/* Plus Jakarta Sans (OFL, static/licenses/plus-jakarta-sans-OFL.txt): the home's headings (--hm-display), bundled so the
   extension never fetches a font; the variable file covers 500–800, latin and latin-ext (Turkish letters). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/PlusJakartaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* v82 (aşama 8, A3, C36): the older palettes below take their colours from the plan's tokens at the end of this file
     (--q-*), so Gün gün, Seyahatlerim, Ayarlar, the toasts and the popup speak the same colours as the plan: one ink, one
     muted grey, one line, the action purple, Seçildi sand, Alındı green, a warning amber, red for a fault. */
  /* The hero v9's colours (hero, its card, the view tabs). */
  --hx-ink: var(--q-ink); --hx-muted: var(--q-mut); --hx-accent: var(--q-acc); --hx-lav: var(--q-acc-s);
  --hx-mint: #eaf7f2; --hx-mintbar: #2cc79a; --hx-card: #f7f5f1; --hx-line: var(--q-line);
  /* The planning bar: booked dark, planned the same green lighter (one hue, two tones; a soft stripe on the light). */
  --hx-booked: var(--q-ok); --hx-planned: var(--q-ok-l); --hx-planned2: #b9eadb;
  --text: var(--q-ink);
  --muted: var(--q-mut);
  --line: var(--q-line);
  --soft: var(--q-soft);
  --accent: var(--q-acc);
  --accent-soft: var(--q-acc-s);
  --success: var(--q-ok);
  --warning: var(--q-warn);
  --danger: var(--q-bad);
  --radius: 14px;
  --ink: var(--q-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; }
button { font: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.board-updating { margin: 30vh auto 0; text-align: center; font-size: 15px; color: var(--muted); }

/* ---------- layout ---------- */
.board { display: grid; grid-template-columns: clamp(360px, 34%, 540px) 1fr; height: 100vh; }
.chat { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.panel { overflow-y: auto; padding: 16px 40px 40px; min-width: 0; background: #f8f7f4; container: panel / inline-size; }
@media (max-width: 860px) {
  .board { grid-template-columns: 1fr; height: auto; }
  /* v82 (A7): the chat on top at 70vh gives way to the drawer from the bottom in v82/chat.css (its 860 px rule). Kept for
     the clean-up of aşama 8. */
  .chat { height: 70vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .panel { padding: 16px; }
}

/* ---------- chat ---------- */
.chat-top { padding: 18px 28px 0; position: relative; }
.trip-switch { background: none; border: 0; padding: 4px 0; font-size: 17px; display: flex; align-items: center; gap: 12px; }
.trip-menu {
  position: absolute; top: 56px; left: 24px; z-index: 5; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.1); min-width: 240px; padding: 6px;
}
.trip-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 8px; }
.trip-menu button:hover, .trip-menu button.active { background: var(--soft); }
.chat-title { font-size: 26px; font-weight: 700; margin: 22px 0 10px; letter-spacing: -.02em; }
.messages { flex: 1; overflow-y: auto; padding: 8px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.msg-user {
  align-self: flex-end; max-width: 85%; background: #eeeef0; border-radius: 18px; padding: 10px 16px;
  font-size: 15.5px; white-space: pre-wrap;
}
.msg-assistant { font-size: 16.5px; line-height: 1.55; white-space: pre-wrap; }
/* Art arda yazmak (0.44.2): written while the answer comes, waiting its turn */
.msg-user.msg-queued { opacity: .72; display: grid; gap: 4px; }
.msg-q { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11.5px; font-weight: 700; color: #6e6e73; white-space: normal; }
.msg-q .btn-link { padding: 0 2px; font-size: 15px; line-height: 1; color: #6e6e73; }
.msg-assistant .msg-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff6e5; color: #7a4b00; font-size: 13.5px; line-height: 1.4; white-space: normal; }
/* find_offers: the real offers under a reply, compact (title · rating · source · why | price · Ekle). */
.chat-offers { display: grid; gap: 8px; margin-top: 10px; white-space: normal; }
.chat-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #e4dcff; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.35; }
.chat-offer .co-main { display: grid; gap: 3px; min-width: 0; }
.chat-offer .co-title { font-weight: 650; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-offer .co-title:hover { text-decoration: underline; }
.chat-offer .co-meta { display: flex; align-items: center; gap: 2px; color: #6b6b75; font-size: 12.5px; }
.chat-offer .co-src { color: inherit; }
.chat-offer .co-why { margin: 0; color: #5b3fd1; font-size: 12.5px; }
.chat-offer .co-deal { display: grid; justify-items: end; gap: 2px; text-align: right; }
.chat-offer .co-amt { font-size: 16px; }
.chat-offer .co-per { color: #6b6b75; font-size: 12px; }
.chat-offer .co-add { margin-top: 4px; }
.chat-offer .co-pick { justify-self: start; padding: 2px 8px; border-radius: 999px; background: #f2f1f6; color: #6e6e73; font-size: 11px; font-weight: 700; }
.chat-offer.pick-best { border-color: #b9aaf5; }
.chat-offer.pick-best .co-pick { background: #5b45e0; color: #fff; }
@media (max-width: 420px) {
  .chat-offer { grid-template-columns: 1fr; }
  .chat-offer .co-deal { justify-items: start; text-align: left; }
}
.msg-event { align-self: center; font-size: 12px; color: var(--muted); text-align: center; }
.choices .btn-primary { padding: 9px 16px; font-size: 14.5px; border-radius: 12px; }
.choices .btn-link { font-size: 14.5px; }
.choices { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-primary, .primary {
  background: var(--ink); color: #fff; border: 0; border-radius: 16px; padding: 14px 28px; font-size: 17px;
}
.btn-link { background: none; border: 0; color: var(--accent); font-size: 17px; padding: 0; }
.thinking { color: var(--muted); font-size: 15px; }
/* The chat's turn, step by step ("Lizbon otelini fikre alıyorum…"), the board changing with each (0.36.47). */
.chat-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.chat-steps li { color: var(--muted); }
.chat-steps li.now { color: var(--ink, inherit); font-weight: 500; }
.chat-steps li.done span { color: var(--ok, #2e9e5b); }
.chat-error { color: var(--danger); font-size: 14px; }
.composer {
  margin: 0 20px 20px; border: 1px solid var(--line); border-radius: 20px; display: flex; align-items: center;
  gap: 8px; padding: 6px 6px 6px 8px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.composer.drag { border-color: var(--accent); background: var(--accent-soft); }
.composer input[type="text"] { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 15px; padding: 8px 4px; background: transparent; }
/* The input draws no ring of its own: the whole box gets the app's focus ring instead. */
.composer:has(input[type="text"]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); display: grid; place-items: center; }
.send-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #111; color: #fff; display: grid; place-items: center; }
.send-btn:disabled { opacity: .35; }

/* ---------- trip panel ---------- */
.home-menu { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 40px; position: relative; }
/* The trip's ••• menu (v8): over the hero photo on a trip, top right on the overview. */
.menu {
  position: absolute; top: 42px; right: 0; z-index: 6; min-width: 230px; padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.04);
}
.menu button, .menu a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 9px; font-size: 15px; color: #1d1d1f; text-decoration: none; white-space: nowrap; }
.menu button:hover, .menu a:hover { background: #f5f5f7; }
.menu hr { border: 0; border-top: 1px solid #e8e8ed; margin: 4px 6px; }
.menu .danger { color: #c62828; }

.section { margin-top: 18px; }
.section-head { display: flex; justify-content: space-between; color: #3a3a3c; font-size: 16px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.section-head .muted { font-size: 15px; }
.row {
  display: grid; grid-template-columns: 72px 1fr auto 20px; align-items: center; gap: 16px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 0; background: none; width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0;
}
.row:hover { background: #fafafa; }
.row.highlight { background: var(--accent-soft); border-radius: 12px; border-bottom-color: transparent; }
.thumb { width: 72px; height: 50px; border-radius: 8px; object-fit: cover; background: var(--soft); display: grid; place-items: center; color: #333; }
.thumb.icon { background: none; }
.row-name { font-size: 17px; }
.row-label { font-size: 14px; margin-top: 2px; }
.tone-accent { color: var(--accent); }
.tone-success { color: var(--success); }
.tone-warning { color: var(--warning); }
.tone-muted { color: var(--muted); }
.row-price { font-size: 18px; font-variant-numeric: tabular-nums; }
.chev { color: #9a9aa0; }
.more { background: none; border: 0; color: var(--accent); padding: 10px 12px; font-size: 14px; }
.trips-empty { max-width: 460px; margin: 12vh auto; line-height: 1.6; }
.trips-empty h2 { font-size: var(--q-fs-page); margin-bottom: 8px; }
.trips-empty ol { padding-left: 20px; color: var(--q-ink); }
.errors { margin: 8px 4px; font-size: 13.5px; }
.errors div { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0; }
/* An error is read in full (DESIGN.md: no text is cut): it wraps, the button stays on the right. */
.error-text { min-width: 0; overflow-wrap: anywhere; }
.small-btn { flex: none; }
.errors .err { color: var(--danger); }
.small-btn { background: var(--soft); border: 0; border-radius: 8px; padding: 4px 10px; font-size: var(--q-fs-info); }

/* ---------- drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.18); z-index: 10; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: #fff; z-index: 11;
  box-shadow: -12px 0 40px rgba(0,0,0,.12); overflow-y: auto; padding: 24px 28px 40px;
}
.drawer img.cover { width: 100%; border-radius: 14px; aspect-ratio: 16/9; object-fit: cover; }
.drawer h2 { font-size: 28px; margin: 14px 0 2px; letter-spacing: -.02em; }
.drawer .close { float: right; background: var(--soft); border: 0; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; }
.move { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--muted); }
.move select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 14px; background: #fff; }
.facts { margin: 18px 0; border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fact .k { color: var(--muted); }
.badge { display: inline-block; font-size: 12px; border-radius: 6px; padding: 1px 7px; margin-left: 6px; background: var(--soft); color: #555; }
.badge.page, .badge.user { background: #e8f6ee; color: var(--success); }
.badge.unverified, .badge.none { background: #fff3e0; color: var(--warning); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.actions button { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 16px; }
.actions button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.drawer h3 { font-size: 15px; color: #3a3a3c; margin: 22px 0 6px; }
.drawer ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare td, .compare th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.compare tr.me { background: var(--accent-soft); }
.danger-link { background: none; border: 0; color: var(--danger); padding: 0; margin-top: 24px; font-size: 14px; }

/* ---------- settings ---------- */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; background: rgba(0,0,0,.25); }
.modal-card { background: #fff; border-radius: 18px; padding: 28px; width: min(480px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal-card h2 { margin-top: 0; font-size: var(--q-fs-intent); }
.field { display: block; margin: 16px 0; font-size: var(--q-fs-info); color: var(--q-ink); }
.field input, .field select { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 12px; padding: 4px; gap: 4px; }
.segmented button { border: 0; background: none; border-radius: 9px; padding: 10px; font-size: 15px; color: var(--q-ink); }
.segmented button.on { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: var(--text); font-weight: 600; }
.lang-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lang-picker .segmented { min-width: 220px; }
.lang-picker .segmented button { padding: 6px 10px; font-size: var(--q-fs-info); }
.row-inline { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.row-inline select { margin-top: 0; flex: 1; }
.small { font-size: var(--q-fs-info); margin-top: -6px; }
.note { background: #fff8eb; color: #7a5200; border-radius: 10px; padding: 10px 12px; margin-top: 4px; line-height: 1.5; }

/* ---------- crash & error banner ---------- */
.crash { max-width: 720px; margin: 10vh auto; padding: 0 24px; line-height: 1.5; }
.crash pre { background: var(--soft); border-radius: 12px; padding: 14px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crash-actions { display: flex; gap: 20px; align-items: center; }
#error-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #fdecea; color: var(--danger);
  font-size: 13.5px; padding: 8px 16px; cursor: pointer; border-bottom: 1px solid #f5c2bd;
}

/* ---------- popup ---------- */
body.popup { width: 320px; }
.popup-card { padding: 18px; font-size: var(--q-fs-info); line-height: 1.5; }
.popup-title { font-weight: 700; font-size: var(--q-fs-card); margin-bottom: 6px; }
.popup-card .primary { width: 100%; padding: 10px; font-size: 15px; border-radius: 12px; margin-top: 8px; }
.popup-card .error { color: var(--danger); }
.popup-card .warning { color: var(--warning); }

.setup { margin: 18px 0 4px; padding-left: 22px; line-height: 1.55; color: var(--q-ink); font-size: 15px; }
.setup li { margin: 8px 0; }
.setup-btn { display: inline-block; padding: 10px 18px; font-size: 15px; border-radius: 12px; }

.update-banner {
  position: fixed; bottom: 20px; right: 20px; z-index: 40; background: var(--q-ink); color: #fff; border-radius: 14px;
  padding: 12px 14px 12px 18px; display: flex; gap: 14px; align-items: center; font-size: var(--q-fs-info);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.update-banner .small-btn { background: #fff; color: var(--q-ink); }

/* ---------- trips overview ---------- */
.home { max-width: 1120px; margin: 0 auto; padding: 28px 32px 60px; min-height: 100vh; }
.home-top { display: flex; justify-content: space-between; align-items: center; }
.home-top h1 { font-size: 40px; letter-spacing: -.03em; margin: 8px 0; }
.home-add { display: flex; gap: 10px; margin: 18px 0 8px; border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
.home-add.drag { border-color: var(--accent); background: var(--accent-soft); }
.home-add input { flex: 1; border: 0; outline: 0; font-size: 15px; padding: 8px; background: transparent; }
.home-add .btn-primary { padding: 10px 20px; font-size: 15px; border-radius: 12px; }
.home-add .btn-primary:disabled { opacity: .4; }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 20px; }
.trip-card { text-align: left; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 0; overflow: hidden; }
.trip-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.trip-card-img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; background: linear-gradient(120deg, #f7c77e, #7aa6d8); }
.trip-card-body { padding: 14px 16px 16px; }
.trip-card-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.trip-card-meta { margin-top: 8px; font-size: 13.5px; color: #3a3a3c; }
.chat-sub { margin: -6px 0 6px; font-size: 14px; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 45; background: var(--q-ink); color: #fff;
  border-radius: 14px; padding: 12px 12px 12px 18px; display: flex; gap: 12px; align-items: center; font-size: var(--q-fs-info);
  box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: min(720px, 92vw);
}
.toast .small-btn { background: #fff; color: var(--q-ink); }
.toast-close { background: none; border: 0; color: #aaa; font-size: var(--q-fs-card); }

/* ---------- decisions ---------- */
.row-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.score-pill {
  display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--soft); color: #3a3a3c; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.score-pill.best { background: var(--accent); color: #fff; }
.verdict-line {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: 0; padding: 10px 12px 4px; font-size: 14px; color: #3a3a3c; line-height: 1.45;
}
.verdict-line:hover .verdict-cta { text-decoration: underline; }
.verdict-cta { color: var(--accent); white-space: nowrap; flex: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-size: inherit; }
.small-note { font-size: var(--q-fs-info); margin: 6px 0; }

.compare-modal { position: fixed; inset: 0; z-index: 12; background: rgba(0,0,0,.25); display: grid; place-items: start center; overflow-y: auto; padding: 4vh 16px; }
.compare-card { position: relative; background: #fff; border-radius: 20px; width: min(1040px, 100%); padding: 24px 28px 28px; box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.compare-card h2 { font-size: 28px; margin: 2px 0 14px; letter-spacing: -.02em; }
/* 0.37 the Comparison window's two views (Kartlar | Tablo) and the options board (otel panosu v2) */
.compare-card:has(.bd) { width: min(1180px, 100%); }
.cmp-views { display: flex; align-items: center; gap: 4px; margin: 16px 0 12px; }
.cmp-views [role="tab"] { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: #f1efeb; font: inherit; font-size: 13.5px; color: #6e6e73; cursor: pointer; }
.cmp-views [role="tab"].on { background: #1d1d1f; color: #fff; font-weight: 600; }
.cmp-views .link-btn { margin-left: 8px; }
.bd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.bd-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e3dfd8; background: #fff; font: inherit; font-size: 13px; color: #3a3a3c; cursor: pointer; }
.bd-chip.f { border-style: dashed; }
.bd-chip.on { border-style: solid; border-color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; color: #1d1d1f; font-weight: 600; }
.bd-sep { width: 1px; height: 22px; background: #ece9e3; margin: 0 4px; }
.bd-count { margin-left: auto; font-size: 13px; color: #6e6e73; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.bd-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.04); }
.bd-card.chosen { box-shadow: 0 0 0 2px #23998b, 0 6px 20px rgba(35,153,139,.16); }
.bd-card.out { opacity: .55; }
.bd-pic { position: relative; height: 150px; background: linear-gradient(135deg, #e9e0d2, #d7e3e6); }
.bd-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-ph-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #8b7f6c; }
.bd-badge { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #fff; }
.bd-b-pick { background: #5b3fd6; } .bd-b-fav { background: #c0256b; } .bd-b-cheap { background: #1f8f4e; } .bd-b-top { background: #d0592b; }
.bd-tick { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: rgba(255,255,255,.92); font: inherit; font-size: 15px; font-weight: 700; color: #1d1d1f; cursor: pointer; }
.bd-tick.on { background: #1d1d1f; color: #fff; }
.bd-score { position: absolute; left: 10px; bottom: -22px; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; align-content: center; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.bd-score b { font-size: 18px; color: #3a3a3c; } .bd-score.best b { color: #1556d6; } .bd-score.low b { color: #8e8e93; }
.bd-score small { display: block; margin-top: 2px; font-size: 9.5px; color: #8e8e93; }
.bd-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 12px; }
.bd-pic + .bd-body { padding-top: 14px; }
.bd-row1 { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; padding-left: 52px; min-height: 30px; }
.bd-dates { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #a35a00; }
.bd-name { margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.25; color: #1d1d1f; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; cursor: pointer; }
.bd-name:hover { text-decoration: underline; }
.bd-price { flex: none; text-align: right; line-height: 1.15; } .bd-price b { display: block; font-size: 17px; } .bd-price small { font-size: 11.5px; color: #6e6e73; }
.bd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12.5px; color: #6e6e73; }
.bd-src { padding: 2px 7px; border-radius: 6px; background: #eef2ff; color: #2b4fc7; font-weight: 700; font-size: 11px; }
.bd-star { color: #e0a43a; } .bd-meta b { color: #1d1d1f; }
.bd-in { color: #13756a; font-weight: 700; }
.bd-needs { margin: 10px 0 0; }
.bd-pc { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.4; }
.bd-pc li { display: flex; gap: 6px; margin-top: 3px; }
.bd-pc .p { color: #1f8f4e; font-weight: 800; } .bd-pc .m { color: #c62828; font-weight: 800; }
.bd-only { margin-left: 6px; padding: 0 5px; border-radius: 5px; background: #e8edff; color: #3b4fd6; font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.bd-only.m { background: #ffe9e9; color: #c62828; }
.bd-more { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #1556d6; cursor: pointer; }
.bd-out { margin: 10px 0 0; font-size: 13px; color: #8a5a00; }
.bd-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.bd-pc + .bd-foot, .bd-out + .bd-foot { margin-top: 12px; border-top: 1px solid #f1efeb; }
.bd-react { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bd-r { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 48px; padding: 4px 0 3px; border-radius: 10px; border: 1px solid #ece8e1; background: #fdfcfa; font: inherit; font-size: 10.5px; color: #6e6e73; cursor: pointer; }
.bd-r em { font-style: normal; font-size: 16px; line-height: 1; }
.bd-r.me { border-color: #e9b54a; background: #fff6e2; color: #8a5a00; font-weight: 700; }
.bd-who { display: flex; margin-left: 6px; }
.bd-av { position: relative; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; border: 2px solid #fff; background: #c58a2e; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; overflow: visible; }
.bd-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bd-av i { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 11px; }
.bd-act { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bd-ele { height: 30px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 12.5px; color: #6e6e73; cursor: pointer; }
.bd-ele:hover { color: #c62828; }
.bd-pick { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: #1d1d1f; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
.bd-pick.done { background: color-mix(in srgb, #23998b 14%, #fff); color: #13756a; }
.bd-add { align-items: center; justify-content: center; gap: 4px; min-height: 280px; padding: 20px; border: 2px dashed #d8d2c8; background: transparent; box-shadow: none; font: inherit; font-size: 14px; color: #6e6e73; cursor: pointer; text-align: center; }
.bd-add b { font-size: 30px; font-weight: 400; color: #b9b2a6; }
.bd-add small { font-size: 12.5px; max-width: 220px; }
.bd-add:hover { border-color: #b9b2a6; color: #1d1d1f; }
.bd-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: #1d1d1f; color: #fff; font-size: 14px; }
.bd-bar button { margin-left: auto; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #1d1d1f; font: inherit; font-weight: 700; cursor: pointer; }
.board-btn { color: #5b3fd6; border-color: color-mix(in srgb, #5b3fd6 45%, #fff) !important; }
@media (max-width: 620px) {
  .bd-grid { grid-template-columns: 1fr; }
  .bd-count { width: 100%; margin-left: 0; }
}
/* -- Karar Panosu -- (docs/mockups/artifact-arsivi/karar-panosu-taslagi-Hajs4s, #10 Sırayla karar ver, #2/#4 öncelik ★, #9 sohbet adı; the cards' own "neden" line)
   The window's own colours and sizes (bd-*, --accent, --success, --danger); nothing new. */
.cmp-step { margin-left: auto; height: 32px; padding: 0 14px; border: 1px solid #1d1d1f; border-radius: 9px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: #1d1d1f; cursor: pointer; }
.cmp-step:hover { background: #1d1d1f; color: #fff; }
.mine-star { display: inline-block; margin-left: 4px; color: #c98a00; font-size: 12px; line-height: 1; cursor: help; }
.mine-legend { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.mine-legend .mine-star { margin: 0 2px 0 0; cursor: default; }
/* #9: an option's name in the assistant's reply goes to its card ("Jardim Stay ↗"); the arrow is drawn, not text, so the reply copies as it was written */
.chat-ref { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.chat-ref::after { content: " \2197"; font-size: .8em; }
.chat-ref:hover { text-decoration-color: var(--accent); }
.chat-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* the card's "neden" line (K6): one quiet line above the strip, in the traveller's own word */
.pk-why { margin: 8px 0 0; font-size: var(--q-fs-small); line-height: 1.35; color: var(--v-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd { margin-top: 14px; }
.sd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sd-top h3 { margin: 0; font-size: 18px; color: #1d1d1f; outline: none; }
.sd-actions { display: flex; gap: 14px; }
.sd-nav { font-size: 14px; }
.sd-reco { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 14.5px; line-height: 1.45; }
.sd-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.sd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sd-card { display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.04); }
.sd-card.best { box-shadow: 0 0 0 2px var(--accent), 0 6px 20px rgba(23,104,255,.12); }
.sd-card.chosen { box-shadow: 0 0 0 2px #23998b, 0 6px 20px rgba(35,153,139,.16); }
.sd-card.out { opacity: .7; }
.sd-name { margin-top: 0; }
.sd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12.5px; color: #6e6e73; }
.sd-score b { color: #1d1d1f; }
.sd-price { margin-top: 8px; line-height: 1.2; }
.sd-price b { font-size: 18px; }
.sd-price small { display: block; font-size: 12px; color: #6e6e73; }
.sd-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: flex-end; }
.bd-pick.ghost { background: #fff; color: #1d1d1f; box-shadow: inset 0 0 0 1px #cfcac1; }
.sd-more { margin-top: 12px; }
.sd-done-msg { margin: 14px 0 10px; font-size: 16px; font-weight: 600; color: #1d1d1f; }
.sd-sum { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.sd-sum li { display: flex; gap: 8px; align-items: baseline; }
.sd-sum.later li { justify-content: space-between; max-width: 460px; color: #3a3a3c; }
.sd-ok { color: var(--success); font-weight: 800; }
.sd-finish { margin-top: 6px; height: 34px; }
.sd-card, .sd-reco { animation: mv-rise var(--t-base) var(--e-out) backwards; }
@media (prefers-reduced-motion: reduce) { .sd-card, .sd-reco { animation: none; } }
body.still .sd-card, body.still .sd-reco { animation: none; }
@media (max-width: 620px) { .cmp-step { margin-left: 0; } .sd-cards { grid-template-columns: 1fr; } }
.compare-card h3 { font-size: 15px; color: #3a3a3c; margin: 0 0 6px; }
.compare-card .close { position: absolute; top: 18px; right: 18px; background: var(--soft); border: 0; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; }
.verdict-box { background: var(--accent-soft); border-radius: 14px; padding: 14px 16px; line-height: 1.5; }
.verdict-box.status-insufficient, .verdict-box.status-single { background: #fff8eb; }
.verdict-main { font-size: 17px; font-weight: 600; }
.cmp-verdict { padding: 10px 14px; }
.cmp-verdict-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.cmp-verdict-row .verdict-main { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; font-size: 15.5px; }
.cmp-verdict-why { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #4a4a4f; }
.cmp-verdict-more { flex: none; font-size: 14px; }
.cmp-verdict-detail { margin-top: 6px; white-space: normal; }
.ai-verdict { margin-top: 8px; font-size: 15px; }
.ai-verdict ul { margin: 6px 0 0; padding-left: 20px; }
.ai-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #6b3fd4; background: #f1ebff; border-radius: 6px; padding: 1px 7px; margin-right: 4px; }
.ai-question { margin-top: 6px; }
.matrix-wrap { overflow-x: auto; margin: 16px -4px 4px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.matrix th, .matrix td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.matrix thead th { vertical-align: bottom; font-weight: 400; }
.matrix thead th.win { background: var(--accent-soft); border-radius: 12px 12px 0 0; }
.matrix tr.off td, .matrix tr.off .crit-col > div { opacity: .45; }
.matrix .crit-col { width: 170px; font-weight: 500; }
.opt-name { background: none; border: 0; padding: 0; font-size: 16px; font-weight: 600; text-align: left; color: var(--text); }
.opt-name:hover { color: var(--accent); }
.opt-provider { font-size: 12.5px; }
.opt-score { margin: 6px 0; }
.score-big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score-big.best { color: var(--accent); }
.conf { font-size: 12px; }
.plan-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 5px 12px; font-size: 13px; }
.plan-btn.on { background: var(--success); border-color: var(--success); color: #fff; }
.cell-value { line-height: 1.35; }
.cell-note { font-size: 12px; margin-top: 2px; }
.bar { display: block; height: 5px; background: var(--soft); border-radius: 3px; margin-top: 6px; overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; border-radius: 3px; }
.bar .good { background: #2fb36a; }
.bar .mid { background: #f0b429; }
.bar .low { background: #e5534b; }
.level { margin-top: 4px; border: 0; border-radius: 8px; padding: 3px 6px; font-size: 12.5px; background: var(--soft); color: #3a3a3c; cursor: pointer; }
.level.level-3, .level.level-4 { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.level.level-0 { color: var(--muted); }
.missing-row td, .missing-row th { font-size: 13px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; margin-top: 18px; }
.why-grid ul { margin: 0; padding-left: 18px; line-height: 1.55; font-size: 14.5px; }
.pts { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.pts.plus { background: #e8f6ee; color: var(--success); }
.pts.minus { background: #fdecea; color: var(--danger); }
.amenities { margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 13px; color: #3a3a3c; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.compare-foot { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.compare-foot .link-btn { white-space: nowrap; font-size: 13px; }
@media (max-width: 700px) {
  .compare-card { padding: 20px 16px; }
  .compare-foot { flex-direction: column; }
}

.breakdown { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 14px 0; }
.breakdown-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.parts { margin-top: 8px; }
.part { display: grid; grid-template-columns: 1fr 1.3fr 70px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13.5px; border-top: 1px solid var(--line); }
.part.off { opacity: .5; }
.part .bar { margin-top: 0; }

/* ---------- plan: nights, gaps, closed options ---------- */
.stay-block { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 4px 6px; }
.stay-block.booked { border-color: #cfe9d9; background: #f6fbf8; }
.stay-block.empty { border-style: dashed; }
.block-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px; font-size: 15px; color: #3a3a3c; }
.block-chip { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.block-chip.booked { background: #e3f4ea; color: var(--success); }
.block-chip.chosen { background: var(--accent-soft); color: var(--accent); }
.block-chip.open { background: #fff3e0; color: var(--warning); }
.block-chip.empty { background: var(--soft); color: #6e6e73; }
.stay-block .row { border-bottom: 0; }
.group.nested + .group.nested { border-top: 1px solid var(--line); }
.group-head { display: flex; justify-content: space-between; padding: 6px 8px 0; font-size: 13.5px; }
.empty-slot { padding: 4px 10px 8px; font-size: 14px; color: #6e6e73; }
.notice { margin: 10px 0 2px; padding: 8px 12px; border-radius: 10px; background: #fff8eb; color: #7a5200; font-size: 14px; }

/* ---------- legs: transfers between the stays ---------- */
.leg { margin: 6px 0 6px 18px; border-left: 2px dashed #d6d6db; padding: 2px 0 2px 10px; }
.leg.st-booked { border-left: 2px solid #9fd5b5; }
.leg.st-chosen, .leg.st-planned { border-left-style: solid; border-left-color: #b9cffb; }
.leg-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.leg-head:hover { background: var(--soft); }
.leg-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: var(--q-fs-info); }
.leg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.leg-title { font-size: var(--q-fs-info); font-weight: 600; overflow-wrap: anywhere; }
.leg-sub { font-size: var(--q-fs-small); color: var(--muted); }
.leg-hint { color: #9a5b00; font-weight: 700; }
.leg-chip { flex: none; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.leg-chip.st-empty { background: #fff3e0; color: var(--warning); }
.leg-chip.st-options { background: var(--soft); color: #3a3a3c; }
.leg-chip.st-planned, .leg-chip.st-chosen { background: var(--accent-soft); color: var(--accent); }
.leg-chip.st-booked { background: #e3f4ea; color: var(--success); }
.leg-note { margin: 2px 8px 4px 44px; font-size: var(--q-fs-info); color: #7a5200; line-height: 1.4; }
.leg-body { padding: 2px 8px 8px 44px; }
.leg-body .leg-note { margin-left: 0; }
.leg-options { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; font-size: 13.5px; }
.leg-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.mode-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.mode-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.leg-booked { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin: 4px 0; }
.row.closed .row-name { color: #6e6e73; }

/* ---------- decision card & intent ---------- */
.verdict-because { margin-top: 6px; font-size: 15px; }

.level-note { font-size: 11.5px; font-weight: 400; margin-top: 3px; }

/* ---------- pros & cons, evidence ---------- */
.row-details { grid-column: 2 / -1; display: grid; gap: 4px; margin-top: -4px; min-width: 0; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font-size: 13px; line-height: 1.4; min-width: 0; }
.pc.stacked { grid-template-columns: 1fr; gap: 2px; }
.pc-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-line { display: grid; grid-template-columns: 12px 1fr; gap: 4px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.pc-sign { font-weight: 700; text-align: center; }
.pc-col.pros .pc-sign { color: var(--success); }
.pc-col.cons .pc-sign { color: var(--danger); }
.pc-col.pros .pc-line { color: #1d3b2a; }
.pc-col.cons .pc-line { color: #4a1f1f; }
.pc-line.decisive { font-weight: 600; color: var(--danger) !important; }
.pc-line.serious { font-weight: 600; color: #a31d1d !important; }
.pc-line.unverified, .pc-line.stale, .pc-line.accepted { color: var(--muted) !important; }
.pc-line.unverified .pc-sign, .pc-line.stale .pc-sign, .pc-line.accepted .pc-sign { color: var(--muted) !important; }
.pc-line.accepted > div, .pc-line.accepted > span:last-child { text-decoration: line-through; text-decoration-color: #c7c7cc; }
.pc-detail { color: var(--muted); font-size: 12px; }
.pc-more { color: var(--muted); font-size: 12px; padding-left: 16px; }
.reading { font-size: 12.5px; }
.reading .link-btn { margin-left: 10px; font-size: 12.5px; }
.evidence { margin: 14px 0; }
.evidence .reading { margin-bottom: 8px; }
.pc.full { font-size: 14px; gap: 6px 18px; }
.pc.full .pc-col { gap: 8px; }
.pc-actions { display: flex; gap: 12px; }
.pc-actions .link-btn { font-size: 12.5px; padding: 0; }
.quotes { margin-top: 4px; }
.quotes blockquote { margin: 4px 0; padding: 4px 8px; border-left: 3px solid var(--line); background: #fafafa; font-size: 12.5px; color: #3a3a3c; border-radius: 0 6px 6px 0; }
.pc-row td { vertical-align: top; }
@media (max-width: 700px) {
  .pc { grid-template-columns: 1fr; }
  .row-details { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- decision cards that swipe ---------- */
.role { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 7px; background: #e9f6ee; color: var(--success); white-space: nowrap; }
.carousel { margin: 2px 0 8px; }
.carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 8px; }
.carousel-head:has(.carousel-title:empty):not(:has(.carousel-nav)) { display: none; }
.carousel-title { min-width: 0; }
.group-title { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 600; }
.group-title .muted { font-weight: 400; font-size: 13.5px; }
.carousel-nav { display: flex; align-items: center; gap: 6px; font-size: 13px; flex: none; margin-left: auto; }
.nav-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e3e0da; background: #fff; font-size: 18px; line-height: 1; color: #3a3a3c; display: grid; place-items: center; padding: 0 0 2px; }
.nav-btn:hover:not(:disabled) { background: var(--soft); }
.nav-btn:disabled { opacity: .35; cursor: default; }
.carousel-track {
  position: relative; display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 12px; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.carousel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.swipe-card {
  flex: 0 0 290px; max-width: 86%; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 6px 20px rgba(40, 30, 20, .06);
}
.swipe-card.best { box-shadow: 0 0 0 2px #cbdcff, 0 6px 20px rgba(23, 104, 255, .08); }
.swipe-card.out { opacity: .72; }
.swipe-card.open { flex-basis: 560px; }
.sc-media { position: relative; height: 150px; margin: 8px 8px 0; border-radius: 18px; overflow: hidden; background: var(--soft); }
.sc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder { display: grid; place-items: center; }
.cat-flight.placeholder { background: linear-gradient(160deg, #9cc4ff 0%, #dbe9ff 60%, #fff3e3 100%); color: #3b6fd8; }
.cat-stay.placeholder { background: linear-gradient(160deg, #f3e7d9, #e6d3bd); color: #8a6a45; }
.cat-transport.placeholder { background: linear-gradient(160deg, #d9f0e6, #b9e0cf); color: #2e7d5b; }
.cat-activity.placeholder { background: linear-gradient(160deg, #ffe3d6, #ffc9b0); color: #c0562a; }
.cat-food.placeholder { background: linear-gradient(160deg, #fde7c8, #f9d29a); color: #a86b12; }
.cat-esim.placeholder { background: linear-gradient(160deg, #e7e3ff, #cfc7ff); color: #5a47c9; }
.cat-other.placeholder { background: linear-gradient(160deg, #eceff3, #dde2e8); color: #5b6572; }
.sc-source {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: fit-content;
}
.sc-media .sc-source { position: absolute; top: 10px; left: 10px; max-width: 64%; }
/* The site's name is the way to its page: one click, a new tab. */
a.sc-source.link { color: var(--ink); text-decoration: none; cursor: pointer; }
a.sc-source.link:hover { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
a.sc-source.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-open { color: var(--accent); font-weight: 700; margin-left: -1px; }
.sc-favicon { width: 18px; height: 18px; border-radius: 50%; flex: none; object-fit: contain; background: #fff; }
.sc-favicon.letter { display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }
.sc-score {
  position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; border-radius: 50%; background: #fff; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.sc-score b { font-size: 18px; }
.sc-score small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.sc-score.best b { color: var(--accent); }
.sc-flag { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--success); font-size: 12px; font-weight: 700; }
.sc-flag.warning { color: var(--danger); }
/* Best to worst: the first three carry their place and what they're best at. */
.sc-flag { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-flag.rank-2, .sc-flag.rank-3 { color: #3b4bb8; }
.sc-rank { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--success); color: #fff; font-size: 11px; }
.sc-flag.rank-2 .sc-rank, .sc-flag.rank-3 .sc-rank { background: #3b4bb8; }
.sc-why { margin-top: 4px; font-size: 12.5px; color: #4a4540; line-height: 1.35; }
.sc-why b { color: var(--ink); font-weight: 700; }
.sc-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 16px 14px; }
.sc-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
.sc-sub { font-size: 13.5px; color: var(--muted); }
.price-block { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; width: 100%; }
.price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price-main b { font-size: 22px; letter-spacing: -.01em; }
.price-main .muted, .price-main .tone-warning { font-size: 13px; }
.price-night { font-size: 13.5px; font-weight: 600; color: #3a3a3c; }
.price-block.compact { width: auto; flex-direction: column; align-items: flex-end; gap: 0; }
.price-block.compact .price-main b { font-size: 19px; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.sc-actions { display: inline-flex; align-items: center; gap: 12px; }
.link-btn.quiet { color: var(--muted); font-size: 13.5px; }
.link-btn.quiet:hover { color: var(--danger); }
/* A quiet link that opens something (not a removal): darkens on hover, never danger red. */
.link-btn.quiet.calm:hover { color: var(--text); }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; border: 0; white-space: nowrap; }
.pill-btn.dark { background: var(--ink); color: #fff; padding: 8px 26px; }
.pill-btn.dark:hover { background: #000; }
.pill-btn.soft { background: var(--accent-soft); color: var(--accent); }
.pill-btn.outline { background: #fff; color: var(--ink); border: 1.5px solid #d9cdf0; }
.pill-btn.outline:hover { background: #f6f2fd; }
.sc-details { border-top: 1px solid var(--line); padding-top: 8px; }
.sc-details .evidence { margin: 4px 0 6px; }
.sc-why p { margin: 2px 0 6px; font-size: 13.5px; line-height: 1.4; }
.sc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; font-size: 13.5px; }

/* ---------- a decided need: one calm card ---------- */
.settled-card { margin: 0 0 8px; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 6px 20px rgba(40, 30, 20, .06); overflow: hidden; }
.settled-card.booked { box-shadow: 0 0 0 1.5px #cfe9d9, 0 6px 20px rgba(40, 30, 20, .05); }
.stc-main { padding: 14px; cursor: pointer; }
.stc-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 28px; }
.stc-media-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: start; }
.stc-img { width: 170px; height: 130px; border-radius: 18px; object-fit: cover; display: block; }
.stc-img.placeholder { display: grid; place-items: center; }
.stc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.stc-name { font-size: 18px; font-weight: 700; line-height: 1.25; }
.stc-line { font-size: 14px; color: #6e6a66; }
.rating-badge { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rating-badge b { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 14px; background: #efe7fb; color: var(--ink); font-size: 16px; }
.rating-badge span { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.2; }
.rating-badge small { font-size: 13px; font-weight: 400; color: #6e6a66; }
.stc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 18px 14px; border-top: 1px solid #f0ece6; }
.stc-state { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.stc-actions { display: flex; gap: 8px; }
.stc-details { padding: 4px 18px 16px; border-top: 1px solid #f0ece6; }
.state-chip { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.state-chip.chosen { background: var(--accent-soft); color: var(--accent); }
.state-chip.booked { background: #e3f4ea; color: var(--success); }
.empty-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px;
  border-radius: 24px; border: 1.5px dashed #ddd6cc; background: rgba(255, 255, 255, .6);
}
.empty-card > span { display: flex; flex-direction: column; gap: 2px; }

.slot-note { margin: 6px 4px 0; font-size: var(--q-fs-info); }
.slot-note.gap { color: #8a5a00; }
.state-chip.empty { background: #fff3e0; color: var(--warning); }
@media (max-width: 700px) {
  .stc-media-row { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .stc-img { width: 110px; height: 96px; }
}

/* ===== cardsA (plan v30): empty cards with options, eSIM and insurance, the × fold and •••, Ayarlandı, touch targets ===== */
/* The drawings are shown whole, never cropped (object-fit contain); a tent is drawn here, the others are static/illus. */
article.pk-card .ek-band { display: block; height: 104px; border-radius: 12px; background: color-mix(in srgb, var(--mc) 7%, #fff); overflow: hidden; margin: 0 0 8px; }
article.pk-card .ek-band img, article.pk-card .ek-band .ek-tent { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 6px 0; object-fit: contain; opacity: .9; box-sizing: border-box; mix-blend-mode: multiply; }
/* A need with saved options: the same shape as the empty stay (the band across the top, the place large under it). */
.nd-card .nd-body.nd-shaped { display: block; padding: 0; }
.nd-card .nd-stay h3, .nd-card .nd-pic h3 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 750; letter-spacing: -.015em; overflow-wrap: anywhere; }
.nd-shaped .ek-txt > small { display: block; margin-top: 2px; font-size: var(--q-fs-small); color: var(--v-muted); overflow-wrap: anywhere; }
.nd-shaped .nd-sub { margin: 2px 0 0; font-size: var(--q-fs-info); color: var(--v-muted); }
.nd-card .nd-pic { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.nd-card .nd-pic .nd-self { grid-column: 1 / -1; }
/* eSIM and insurance: their drawing in place of the small tile, as large as the mockup's. */
.ek-tile.ek-ill { width: 72px; height: 58px; border-radius: 12px; background: color-mix(in srgb, var(--mc) 8%, #fff); }
.ek-tile.ek-ill img { width: 100%; height: 100%; padding: 4px; box-sizing: border-box; object-fit: contain; mix-blend-mode: multiply; }
.nd-pic .ek-txt h3 { font-size: 17px; }
/* "N seçenek ⌄": a chip that opens downward; the estimate, or the real "from", at the right of the foot. */
.nd-opts.nd-chip svg { transform: rotate(90deg); }
.nd-foot .nd-est { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--q-fs-small); color: var(--v-muted); }
.nd-est b { font-size: 15px; font-weight: 750; color: var(--v-ink); }
.nd-est i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--v-muted); }
/* Ayarlandı (Ben hallettim): grey and flat, in both paths (a plan, a transfer): no sand, no green, no shadow, nothing left to do. */
article.pk-card.pk-arranged { background: #f3f2ef; border: 1px solid #dcdad4; box-shadow: none; }
article.pk-card.pk-arranged:hover { box-shadow: none; }
.pk-arranged .pk-ring { display: none; }
.pk-arranged .pk-state.done { color: #6e6e73; font-weight: 600; }
.pk-arranged .pk-state.done svg { color: #8e8e93; }
.pk-arranged .pk-art, .pk-arranged .pk-illus, .pk-arranged .pk-img, .pk-arranged .pk-route svg { filter: grayscale(1); opacity: .6; }
.pk-arranged .pk-moons i { background: #a8a8ad; opacity: 1; }
.pk-arranged .pk-media { padding-right: 0; }
.pk-arranged .pk-foot .pk-sub { display: inline; }
/* Empty transport (how to go isn't known): "A → B" and the sentence on top, the way drawn faint and large at the left. */
/* Touch targets (spec: 30 px): the hit area of × and ••• is 30 px everywhere (an invisible edge), their size 30 px on a touch screen. */
.pk-x, .pk-ib { position: relative; }
.pk-x::after, .pk-ib::after { content: ""; position: absolute; left: -3px; right: -3px; top: -4px; bottom: -4px; }
@media (pointer: coarse) {
  .pk-x { width: 30px; height: 30px; }
  .pk-ib { width: 30px; height: 30px; }
  .pk-x::after, .pk-ib::after { left: 0; right: 0; top: 0; bottom: 0; }
}
/* ---------- nights at a glance ---------- */
.day-strip { display: flex; gap: 4px; margin: 12px 0 6px; overflow-x: auto; padding-bottom: 2px; }
.strip-block {
  display: flex; flex-direction: column; gap: 4px; min-width: 64px; border: 0; border-radius: 10px; padding: 6px 6px 5px;
  text-align: left; background: var(--soft); color: #3a3a3c;
}
.strip-block.booked { background: #e3f4ea; color: #155c33; }
.strip-block.chosen { background: var(--accent-soft); color: #1447a8; }
.strip-block.open { background: #fff3e0; color: #7a5200; }
.strip-block.empty { background: #fff; border: 1px dashed #d5d5da; color: #6e6e73; }
.strip-days { display: flex; gap: 2px; }
.strip-day { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 26px; line-height: 1.1; }
.strip-day b { font-size: 15px; }
.strip-day small { font-size: 10.5px; opacity: .8; }
.strip-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }

/* ---------- stay blocks: one clear block per stretch of nights ---------- */
.stay-block { margin: 14px 0 6px; padding: 0 4px 6px; border-left-width: 5px; scroll-margin-top: 12px; }
.stay-block.booked { border-left-color: var(--book-line); }
.stay-block.chosen { border-left-color: var(--plan-line); }
.stay-block.open { border-left-color: var(--v-dash); }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.block-date { display: flex; flex-direction: column; gap: 1px; }
.block-range { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.block-days { font-size: 13.5px; color: #6e6e73; }

/* ---------- where each plan stands: booked, planned, open ---------- */
.status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 9px 18px; font-size: 13.5px; }
.status-bar b { font-weight: 700; }
.status-sub { opacity: .8; }
.status-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; }
.status-bar.st-booked { background: #e1f3e8; color: #16623a; }
.status-bar.st-booked .status-mark { background: #1f8f4e; color: #fff; }
.status-bar.st-planned { background: var(--plan-bg); color: var(--plan-ink); }
.status-bar.st-planned .status-mark { background: var(--plan-dot); color: #fff; }
.status-bar.st-open { background: #f1efeb; color: #5f5a54; }
.status-bar.st-open .status-mark { border: 1.5px dashed #a39d95; }
.settled-card.st-booked { box-shadow: 0 0 0 2px #7cc79b, 0 6px 20px rgba(40, 30, 20, .05); }
.settled-card.st-planned { box-shadow: 0 0 0 2px #f3c98a, 0 6px 20px rgba(40, 30, 20, .05); }
.settled-card.st-open { box-shadow: none; border: 1.5px dashed #d6cfc4; background: rgba(255, 255, 255, .7); }
.stay-open .empty-card { border: 0; background: none; }
.empty-card.quiet { padding: 8px 12px; border-style: dashed; background: none; }
.empty-card.quiet > span { flex-direction: row; font-size: 13.5px; }
/* ---------- an opened card: where it stands, the facts, what matters ---------- */
.card-details { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; font-size: 14px; line-height: 1.45; }
.cd-verdict { margin: 0; padding: 10px 12px; border-radius: 12px; background: #f5f1fb; color: var(--ink); font-weight: 600; }
.cd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.cd-facts div { min-width: 0; }
.cd-facts dt { font-size: 12.5px; color: var(--muted); }
.cd-facts dd { margin: 1px 0 0; color: var(--text); overflow-wrap: anywhere; }
.cd-list h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: .02em; }
.cd-list.pros h4 { color: var(--success); }
.cd-list.cons h4 { color: var(--danger); }
.cd-list ul { margin: 0; padding-left: 18px; }
.cd-list li { margin: 2px 0; }
.cd-list li.strong { color: var(--danger); font-weight: 600; }
.cd-list .muted { font-size: 12.5px; }
/* Transfers speak the same colours: planned amber, booked green, open grey. */
.leg-chip.st-planned, .leg-chip.st-chosen { background: #fff1d9; color: #8a5300; }
.leg-chip.st-empty { background: #f1efeb; color: #6e6a64; }

/* ---------- what the traveller asked for, checked on the card: ✓ there, ✕ not, ? not said ---------- */
.sc-needs { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-top: 1px solid #f1ede7; }
.sc-needs-head { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sc-needs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.need { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.need > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; }
.need.yes { background: #e8f6ee; color: #16623a; }
.need.yes i { background: #3aa76d; }
.need.no { background: #fdecea; color: #97241d; }
.need.no i { background: #d9534f; }
.need.unknown { background: #f3f1ed; color: #5f5a53; }
.need.unknown i { background: #a39d94; }
.need.more { padding: 3px 9px; background: #f3f1ed; color: var(--muted); }
.cd-list.needs h4 { color: var(--ink); }
.cd-list.needs ul { list-style: none; padding-left: 0; }
.cd-list.needs li { display: flex; align-items: baseline; gap: 6px; background: none; padding: 0; border-radius: 0; font-weight: 400; }
.cd-list.needs li i { position: relative; top: 2px; }

/* ---------- the card front: for it on the left, against it on the right, biggest first ---------- */
.sc-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 104px; padding-top: 8px; border-top: 1px solid #f1ede7; }
.sc-col { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc-col li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.3; }
.sc-col li > span { min-width: 0; overflow-wrap: anywhere; }
.sc-col li i {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  color: #fff; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1;
}
.sc-col.pros li i { background: #3aa76d; }
.sc-col.cons li i { background: #d9534f; }
.sc-col li:first-child { font-weight: 700; font-size: 13.5px; }
.sc-col.pros li:first-child { color: #16623a; }
.sc-col.cons li:first-child { color: #97241d; }
.sc-col li.strong { color: var(--danger); font-weight: 700; }
/* What only this place has, for or against: the reason to look at it rather than the others. */
.only-here { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #eef1ff; color: #3b4bb8; font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.sc-col.cons .only-here { background: #fdecea; color: #97241d; }
.sc-col.cons li.strong i { background: var(--danger); }
/* Closed cards stand the same height side by side; an opened one grows on its own. */
.carousel-track { align-items: stretch; }
.carousel-track:has(.swipe-card.open) { align-items: flex-start; }
/* Name and what it is take the same room on every card, so prices and pros line up across them. */
.sc-head { display: flex; flex-direction: column; gap: 3px; min-height: 66px; }
.sc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- a decision: the recommendation in one line, the options side by side ---------- */
.reco-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px;
  border-radius: 16px; background: #fff; border: 1.5px solid #cddcff;
}
.reco-line.tie { border-color: #ddd3f5; }
.reco-line p { flex: 1; min-width: 220px; margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.reco-line b { color: var(--ink); }
.reco-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }
.reco-question { color: var(--muted); }
.reco-actions { display: flex; align-items: center; gap: 14px; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: stretch; margin: 2px 0 8px; }
.option-grid:has(.swipe-card.open) { align-items: start; }
.option-grid .swipe-card { flex: none; width: auto; max-width: none; }
.option-grid .swipe-card.open { grid-column: 1 / -1; }
.more-options { margin: 0 0 8px 4px; font-size: 14px; }
.mine { margin-left: 3px; color: #c98a00; font-size: 12px; font-weight: 700; }
/* A comparison takes the whole row: the label sits above the options. */
@keyframes flash { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 3px var(--accent); } }
.flash { animation: flash 1.6s ease-out; border-radius: 22px; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 3px solid var(--accent); } }

/* ---------- what's left to do: the list a count on the hero's quiet line opens ---------- */

.todo-list { list-style: none; margin: 8px 0 0; padding: 4px; border-radius: 18px; background: #fff; border: 1px solid #ece7df; max-width: 640px; }
.todo-list li + li { border-top: 1px solid #f1ede6; }
.todo-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 0; background: none; text-align: left; border-radius: 12px; color: var(--ink); }
.todo-list button:hover { background: #f7f4ef; }
.todo-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; }
.todo-text .muted { font-size: 13px; }
.todo-when { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.todo-when.soon { color: #9a5b00; font-weight: 700; }

.tone-danger { color: var(--danger); }

/* ---------- time running out, on the card ---------- */
.card-alert { padding: 7px 18px; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
/* The ⓘ sits on the strip's right end: the text wraps before it, never under it. */
.settled-card .card-alert { padding-right: 50px; }
.card-alert.red { background: #fcebea; color: #9c2a22; }
.card-alert.amber { background: #fff7e8; color: #7a4a00; border-top: 1px solid #f6e2bd; }

/* ⓘ on a decided card: details; the card itself shows the other options. */
.settled-card { position: relative; }
.info-btn {
  position: absolute; top: 44px; right: 12px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; border: 1.5px solid #d6cfc4; background: #fff; color: var(--ink); font: italic 700 14px/1 Georgia, "Times New Roman", serif;
}
.info-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.hidden-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 14px; border-top: 1px solid var(--line, #ece7df); }

/* ---------- the plan and the itinerary: two views of the trip ---------- */
.today-chip { align-self: flex-start; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }

/* Underlined tabs, centred (hero v9): the one on in ink with a 3px accent line, a thin line between. */
.view-tabs { display: flex; justify-content: center; flex-wrap: wrap; margin: 4px 0 20px; }
.view-tabs button { position: relative; border: 0; padding: 10px 24px 14px; background: none; font-size: 17px; font-weight: 400; color: var(--hx-muted); }
.view-tabs button + button::before { content: ""; position: absolute; left: 0; top: 13px; width: 1px; height: 20px; background: var(--hx-line); }
.view-tabs button:hover { color: var(--hx-ink); }
.view-tabs button.on { color: var(--hx-ink); font-weight: 600; }
.view-tabs button.on::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px; background: var(--hx-accent); }
/* v11: the bar sits atop the board, above the hero. Gün gün's own switch: Liste | Harita. */
.view-tabs { margin: 0 0 16px; }
.days-mode { display: flex; justify-content: center; gap: 2px; width: max-content; margin: 0 auto 16px; padding: 3px; border-radius: 10px; background: #efedf5; }
.days-mode button { border: 0; background: none; padding: 6px 16px; border-radius: 8px; font: inherit; font-size: var(--q-fs-info); color: var(--q-mut); cursor: pointer; }
.days-mode button[aria-pressed="true"] { background: #fff; color: var(--q-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.day-chev { font-size: 11px; color: var(--muted); font-weight: 400; }
.day-left { padding: 1px 8px; border-radius: 999px; background: #fff1d9; color: #8a5300; font-size: 12.5px; font-weight: 700; }

/* the itinerary: day by day, a small block for each booking, a line for information */
.itinerary { display: flex; flex-direction: column; gap: 12px; }
.it-city-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 4px; }
.it-city-head b { font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.it-stay { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #e7e1d7; border-radius: 999px; background: #fff; font-size: 13px; color: var(--text); }
.it-stay.st-booked { border-color: #bfe3cc; }
.it-stay.st-chosen { border-color: #f0a53a; }
.it-stay.st-open { border-style: dashed; color: var(--muted); }
.it-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; }
.it-day-head b { font-size: 16px; color: var(--ink); }
.it-day-head .day-chev { margin-left: auto; }
.it-route { padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.it-folded { margin: 0; padding: 0 16px 12px; font-size: 14px; color: var(--muted); }
.it-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 16px 14px; list-style: none; }
.it-time { text-align: right; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.it-dot { justify-self: center; width: 8px; height: 8px; border-radius: 50%; background: #c9c2b8; }
.it-row.st-done .it-dot { background: #1f8f4e; }
.it-row.st-pending .it-dot, .it-row.st-decide .it-dot, .it-row.st-open .it-dot { width: 10px; height: 10px; background: #fff; border: 2px solid #f0a53a; }
.it-row.st-decide .it-dot { border-color: var(--accent); }
.it-row.st-open .it-dot { border: 2px dashed #c9c2b8; }
.it-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 0; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--muted); }
.it-line b { font-weight: 600; color: var(--text); }
button.it-line:hover b { text-decoration: underline; text-decoration-color: #cfc8bd; }
.it-cell { min-width: 0; }
.it-block {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 7px 10px; border: 1px solid #ece7df; border-radius: 12px; background: #faf9f6; text-align: left; font: inherit;
}
.it-block:hover { background: #fff; border-color: #dcd7cf; }
.it-block.st-done { border-color: #cfe9d9; }
.it-block.st-pending { border-color: #f5cf92; }
.it-block.st-decide { border-color: #cddcff; }
.it-block.st-open { border-style: dashed; }
.it-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--ink); }
.it-chip { padding: 2px 9px; border-radius: 999px; background: #f1efeb; color: #5f5a54; font-size: 12px; font-weight: 700; white-space: nowrap; }
.it-chip.st-done { background: #e1f3e8; color: #16623a; }
.it-chip.st-pending { background: #fff1d9; color: #8a5300; }
.it-chip.st-decide { background: var(--accent-soft); color: var(--accent); }
.it-more { margin-top: 8px; }
.it-more .leg.embedded { padding: 0; box-shadow: none; background: none; }
.it-more .leg.embedded .leg-body { padding: 0; }
@media (max-width: 600px) {
  .it-block { grid-template-columns: 26px minmax(0, 1fr); }
  .it-chip { grid-column: 2; justify-self: start; }
}

/* A plan said in the chat comes off the board in one tap. */
.leg-option { display: inline-flex; gap: 8px; align-items: baseline; }
.pill-btn.outline.quiet { color: var(--muted); border-color: var(--line); }
.pill-btn.outline.quiet:hover { color: var(--danger, #b42318); border-color: currentColor; }

/* ---------- 0.24: an option card that reads easily ----------
   Options stand one under another, best first, each as wide as the plan: picture on the left, name and
   price beside it, then what you asked for and what speaks for and against it in whole sentences. Two
   side by side only when there's room for both to breathe. */
.option-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.swipe-card { container-type: inline-size; border-radius: 22px; }
.sc-top { display: flex; flex-direction: column; }
.sc-top .sc-head { min-height: 0; gap: 4px; padding: 14px 18px 0; }
.sc-title { font-size: 18px; line-height: 1.3; }
.sc-sub { font-size: 14px; }
.sc-why { margin-top: 2px; font-size: 13.5px; line-height: 1.45; }
.sc-price { margin-top: 8px; }
.price-block { justify-content: flex-start; gap: 2px 12px; }
.price-note { flex-basis: 100%; font-size: 13px; color: #8a5300; }
.sc-body { gap: 0; padding: 12px 18px 16px; }
.sc-needs { padding: 12px 0; border-top: 1px solid #f1ede7; }
.need { font-size: 13px; padding: 4px 10px 4px 5px; }
.sc-pc { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px 0 4px; border-top: 1px solid #f1ede7; }
.sc-col { gap: 8px; }
.sc-col li, .sc-col li:first-child { flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--text); }
.sc-col.pros li:first-child, .sc-col.cons li:first-child { color: var(--text); }
.sc-col li > span { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.sc-col li i { position: relative; top: 2px; width: 18px; height: 18px; margin-top: 0; font-size: 13px; }
.sc-col li.strong, .sc-col li.strong:first-child { color: var(--danger); font-weight: 600; }
.sc-col .only-here { flex: none; margin-left: 0; align-self: center; }
.sc-foot { padding-top: 12px; }
/* Wide enough: the picture beside the name and price, like a row of search results. */
@container (min-width: 420px) {
  .sc-top { display: grid; grid-template-columns: minmax(150px, 36%) 1fr; }
  .sc-top .sc-media { height: auto; min-height: 150px; margin: 10px 0 0 10px; }
  .sc-top .sc-head { padding: 16px 18px 0 16px; }
}
/* Wider still: for it and against it side by side. */
@container (min-width: 640px) {
  .sc-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ---------- 0.25: an option, calm and clear (Apple-like) ----------
   Why it's here (a small label), its name and price, what it costs or saves against the cheapest one
   that meets the musts, and a mark for each thing asked for. One accent colour, no boxes in boxes. */
.option-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.swipe-card.opt {
  gap: 12px; padding: 16px; border-radius: 20px; background: #fff; overflow: visible;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 18px rgba(0, 0, 0, .05);
}
.swipe-card.opt.first { box-shadow: 0 0 0 1.5px #cfe0ff, 0 4px 18px rgba(23, 104, 255, .08); }
.swipe-card.opt.fit-unfit { opacity: .72; }
.opt-main { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.opt-img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; display: block; background: var(--soft); }
.opt-img.placeholder { display: grid; place-items: center; }
.opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.opt-name { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; color: #1d1d1f; }
.opt-meta { font-size: 13.5px; color: #6e6e73; line-height: 1.35; }
.opt-price { margin-top: 6px; }
.opt-price .price-block { gap: 0 10px; }
.opt-price .price-main b { font-size: 20px; font-weight: 650; color: #1d1d1f; }
.opt-price .price-night { font-size: 13px; font-weight: 500; color: #6e6e73; }
.opt-price .price-note { font-size: 12.5px; }
.opt-trade { margin: 0; font-size: 14px; line-height: 1.5; color: #1d1d1f; }
.opt-trade .sep { color: #c7c7cc; }
.opt-trade b { font-weight: 650; }
.opt-trade b.cheaper { color: var(--success); }
.opt-trade .opt-loss, .opt-trade.quiet { color: #6e6e73; }
/* A topic asked for that the others' guests speak of and this one's don't: unknown, worth a look (gray, like "?"). */
.opt-unknown { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
/* The one thing an option's place hangs on: amber like "Seçmeden kontrol et", with the traveller's answers. */
.opt-pivot { padding: 8px 12px; border-radius: 12px; background: #fff7e8; color: #8a5300; font-size: 13.5px; line-height: 1.45; }
.opt-pivot p { margin: 0; }
.opt-pivot b { color: inherit; }
.opt-pivot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.opt-pivot-actions .pill-btn { padding: 5px 12px; font-size: 13px; }
.opt-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; border: 0; }
.opt-checks .need { padding: 0; background: none; font-size: 13.5px; font-weight: 500; color: #1d1d1f; gap: 6px; }
.opt-checks .need.unknown { color: #6e6e73; }
.opt-checks .need i { width: 17px; height: 17px; font-size: 10.5px; }
.opt-status { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.opt-status.check { background: #fff7e8; color: #8a5300; }
.opt-status.partial { background: #f5f5f7; color: #3a3a3c; }
.opt-status.unfit { background: #fdeeec; color: #a1261d; }
.opt-score { margin: 0 0 6px; font-size: 14px; color: #1d1d1f; }
.opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px solid #f2f2f4; }
.opt-links { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.opt-foot .sc-source { padding: 0; background: none; box-shadow: none; font-weight: 500; color: #6e6e73; font-size: 13px; }
.opt-foot .sc-source .sc-favicon { width: 16px; height: 16px; }
.pill-btn.primary { background: var(--accent); color: #fff; padding: 8px 22px; }
.pill-btn.primary:hover { background: #0f5ae6; }
@container (max-width: 330px) {
  .opt-main { grid-template-columns: 72px 1fr; gap: 12px; }
  .opt-img { width: 72px; height: 72px; }
}
/* The decision in a sentence above the cards, and what to check first. */
.reco-line.headline { align-items: flex-start; gap: 10px 16px; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 18px rgba(0, 0, 0, .04); }
.reco-text { flex: 1; min-width: 220px; }
.reco-line.headline p { margin: 0; font-size: 15px; line-height: 1.5; color: #1d1d1f; }
.reco-verify { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.reco-verify li { font-size: 13.5px; color: #8a5300; line-height: 1.45; }
.reco-verify li::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: #f0a53a; color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.reco-verify a { font-weight: 600; }

/* ---------- 0.26: the ranking is the backbone: 1, 2, 3, 4… one under another ---------- */
.option-grid { grid-template-columns: 1fr; gap: 12px; }
.opt-main { grid-template-columns: auto 96px 1fr auto; }
.opt-rank {
  align-self: start; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%;
  background: #f2f2f4; color: #1d1d1f; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.swipe-card.opt.first .opt-rank { background: var(--accent); color: #fff; }
.opt-score {
  align-self: start; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; background: #f5f5f7; line-height: 1;
}
.opt-score b { font-size: 18px; font-weight: 750; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.opt-score small { margin-top: 2px; font-size: 10px; color: #6e6e73; }
.opt-score.best { background: #eaf1ff; }
.opt-score.best b { color: var(--accent); }
.opt-trade .opt-vs { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: #f2f2f4; color: #6e6e73; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.swipe-card.opt .sc-pc { padding-top: 10px; border-top: 1px solid #f2f2f4; }
.swipe-card.opt .sc-col li { font-size: 13.5px; }
@container (max-width: 420px) {
  .opt-main { grid-template-columns: auto 64px 1fr; }
  .opt-img { width: 64px; height: 64px; border-radius: 12px; }
  .opt-score { grid-column: 3; justify-self: start; width: auto; height: auto; flex-direction: row; gap: 4px; background: none; }
}

/* ---------- 0.27: the picture large, as on the site ----------
   A card a row. Wide: the photo takes the left ~42% at full height, its place, score and site on it; the
   name, price, why-here, marks and pros/cons beside it with room to read. Narrow: the photo on top. */
.swipe-card.opt { padding: 0; gap: 0; overflow: hidden; border-radius: 22px; }
.opt-layout { display: flex; flex-direction: column; }
.opt-photo { position: relative; height: 220px; background: var(--soft); overflow: hidden; }
.opt-photo .opt-img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; display: block; }
.opt-photo .opt-img.placeholder { display: grid; place-items: center; }
.opt-layout.no-photo .opt-photo { height: 132px; }
.opt-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 16px; }
@container (min-width: 620px) {
  .opt-layout { display: grid; grid-template-columns: minmax(250px, 42%) 1fr; }
  .opt-layout.no-photo { grid-template-columns: 180px 1fr; }
  .opt-photo, .opt-layout.no-photo .opt-photo { height: auto; min-height: 260px; }
  .opt-layout.no-photo .opt-photo { min-height: 0; }
}
/* On the photo: the place (top left), the score (top right), the site (bottom left, one click to the page). */
.opt-photo .opt-rank {
  position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; margin: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .96); color: #1d1d1f;
  font-size: 18px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.swipe-card.opt.first .opt-photo .opt-rank { background: var(--accent); color: #fff; }
.opt-photo .opt-score {
  position: absolute; top: 12px; right: 12px; width: 58px; height: 58px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.opt-photo .opt-score b { font-size: 20px; }
.opt-photo .sc-source { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); }
/* Beside it: room to read. */
.opt-body .opt-text { gap: 3px; }
.opt-body .opt-label { font-size: 12px; }
.opt-body .opt-name { font-size: 21px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 3; }
.opt-body .opt-meta { font-size: 14px; }
.opt-body .opt-price { margin-top: 8px; }
.opt-body .opt-price .price-main b { font-size: 24px; }
.opt-body .opt-price .price-night { font-size: 14px; }
.opt-body .opt-trade { font-size: 14.5px; }
.opt-body .opt-checks .need { font-size: 14px; }
.swipe-card.opt .opt-body .sc-pc { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.swipe-card.opt .opt-body .sc-col li { font-size: 14px; line-height: 1.45; }
@container (min-width: 1000px) {
  .swipe-card.opt .opt-body .sc-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
.opt-body .opt-foot { margin-top: auto; }
.opt-body .sc-details { border-top: 1px solid #f2f2f4; padding-top: 10px; }
/* The details open under the photo and the text, full width. */
.swipe-card.opt > .sc-details { padding: 14px 20px 18px; border-top: 1px solid #f2f2f4; }
/* The photo fills its column however tall the text beside it is. */
.opt-photo > .opt-img { position: absolute; inset: 0; }

/* ---------- sharing (0.28): votes, status, code, join ---------- */
.vote-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; }
.vote-btn { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 15px; line-height: 1.4; }
.vote-btn:hover { border-color: #c9c9cf; }
.vote-btn.on { background: var(--soft); border-color: var(--ink); }
.vote-line { color: var(--muted); font-size: 13.5px; }
.vote-bar.all-no .vote-line { font-weight: 600; }
/* Both said 👎: steps back like an option set aside (a vote brings it back). */
.swipe-card.all-no { opacity: .6; }
.swipe-card.all-no:hover, .swipe-card.all-no:focus-within { opacity: .9; }

.share-code { display: block; width: 100%; margin: 10px 0; padding: 12px; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; border: 1px solid var(--line); border-radius: 10px; resize: none; }
.share-join-link { font-size: 14px; margin: 4px 0 0; }
.share-join { border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 16px; margin: 10px 0; max-width: 560px; }
.share-join textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
/* Settings grew a section: the dialog scrolls instead of running off the screen. */
.modal-card { max-height: calc(100vh - 32px); overflow-y: auto; }
.share-settings { margin: 18px 0 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.share-settings summary { cursor: pointer; font-weight: 600; font-size: 15px; }

/* ---------- what the hero v9 (0.35) leaves: the v82 hero is static/v82/hero.css ----------
   The fade-in of what arrives late (useAppear), the to-do list, Gün gün's rows, the box "Kimler gidiyor?" opens
   (Travellers.tsx WhoPopover) and the popovers' frame; colours from the --hx- tokens (:root). */

/* Fades in what arrived after the hero was drawn (an empty block filled). */
@keyframes hx-appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hx-appear { animation: hx-appear .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .hx-appear { animation: none; } }

/* The story too narrow for four cells (a small laptop beside the chat, or a narrow board): the button under the bar. */
.todo-list ul { list-style: none; margin: 0; padding: 0; }
.todo-group + .todo-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid #ece7df; }
.todo-head { margin: 0; padding: 8px 12px 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.todo-head span { margin-left: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Still loading (no decisions yet): the block keeps its height, says nothing; a style chip is a faint pill. */
.hx-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 16px; color: var(--hx-accent); }
.hx-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Gün gün (plan v30): one compact row a day: the date box, then a card with the day's lines (icon, NE · HANGİSİ, the grey word,
   a time, its stage on the right), the night line, or the free day's word. Drawn in docs/mockups/plan-v30 (.dv). */
.dg { display: grid; gap: 8px; align-content: start; }
.dg-day { align-self: start; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: start; scroll-margin-top: 90px; }
.dg-d { display: flex; justify-content: center; }
.dg-date { display: grid; justify-items: center; line-height: 1.12; width: 56px; padding: 6px 2px 7px; border-radius: 12px; background: #fff; box-shadow: var(--v30-shadow); }
.dg-date span { font-size: var(--q-fs-badge); font-weight: 750; color: var(--v-accent-ink); }
.dg-date b { font-size: var(--q-fs-category); font-weight: 800; letter-spacing: -.02em; color: var(--v-ink); }
.dg-date small { font-size: var(--q-fs-small); color: var(--v-muted); }
.dg-date i { font-style: normal; font-size: var(--q-fs-badge); font-weight: 700; color: var(--v-muted); margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--v-line2); width: 78%; text-align: center; white-space: nowrap; }
.dg-date.nd span { color: var(--v-muted); }
.dg-day.today .dg-date { box-shadow: 0 0 0 2px var(--v-accent-ink), var(--v30-shadow); }
.dg-b { display: grid; gap: 6px; align-content: center; min-width: 0; min-height: 76px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--v30-shadow); }
.dg-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dg-i { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; min-height: 26px; font-size: var(--q-fs-button); }
.dg-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--v-ink); text-align: left; cursor: pointer; }
.dg-main.static { cursor: default; }
button.dg-main:hover .dg-ttl { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v-dash); }
.dg-ic { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--v-muted); }
.dg-ic svg { width: 16px; height: 16px; stroke: currentColor; }
.dg-ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-what { font-weight: 700; }
.dg-which { font-weight: 600; }
.dg-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--v-muted); }
.dg-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--q-fs-info); color: var(--v-muted); }
.dg-i .t { padding: 1px 4px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--q-fs-info); font-weight: 600; color: var(--v-ink); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.dg-i .t:empty { padding: 0; min-width: 0; }
/* A line moved by hand has no time but stays tappable: a dashed blank cell (tap to set one, × to put it back). */
.dg-i .t.freed:empty { min-width: 34px; min-height: 22px; border: 1px dashed var(--v-dash); }
.dg-i button.t:hover { background: var(--v-soft); }
.dg-i .t.est { color: var(--v-muted); font-weight: 500; }
.dg-i .t.own { text-decoration: underline dotted var(--v-dash); text-underline-offset: 3px; }
.dg-i .t.edit { display: inline-flex; align-items: center; gap: 2px; }
.dg-i .t.edit input { width: 86px; height: 26px; padding: 0 4px; border: 1px solid var(--v-dash); border-radius: 7px; font: inherit; font-size: var(--q-fs-info); }
.dg-i .t-reset { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--v-soft); color: var(--v-muted); cursor: pointer; }
.dg-i .t .t-hint { display: inline; font-size: 12px; }
.dg-lab { justify-self: end; font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--v-muted); }
.dg-lab.rez { color: var(--v-book-ink); }
.dg-lab.plan { color: var(--plan-ink); }
.dg-lab.open, .dg-lab.idea { color: var(--v-muted); font-weight: 500; }
.dg-i.quiet { min-height: 22px; font-size: 13.5px; }
.dg-i.quiet .dg-what, .dg-i.quiet .dg-which { font-weight: 500; color: var(--v-muted); }
.dg-i.quiet .dg-ic { opacity: .75; }
.dg-i.idea .dg-what { font-weight: 600; }
.dg-who { display: inline-flex; flex: none; padding-left: 4px; }
.dg-who .wh-av + .wh-av { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }
.dg-live, .dg-arrive, .dg-warn { grid-column: 1 / -1; margin: 0 0 0 24px; font-size: var(--q-fs-small); }
.dg-live { font-weight: 600; color: var(--q-ok); }
.dg-live.alert { color: var(--q-bad); }
.dg-live small { font-weight: 400; color: var(--v-muted); }
.dg-arrive { justify-self: start; font-weight: 600; }
.dg-arrive input { font: inherit; padding: 3px 6px; border: 1px solid var(--v-dash); border-radius: 8px; }
.dg-warn { color: var(--q-bad); font-weight: 500; }
.dg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.dg-n { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font-size: var(--q-fs-info); color: var(--v-muted); }
.dg-n svg { flex: none; width: 14px; height: 14px; }
.dg-n b { color: var(--v-ink); }
.dg-nt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-n.dg-home { color: var(--v-muted); }
.dg-free { font-size: var(--q-fs-info); color: var(--v-muted); font-style: italic; }
.dg-left, .dg-today { flex: none; font-size: 12px; font-weight: 650; color: var(--v-warn-ink); white-space: nowrap; }
.dg-today { color: var(--v-accent-ink); }
.dg-add { flex: none; margin-left: auto; padding: 2px 8px; border: 1.5px dashed var(--v-dash); border-radius: 8px; background: none; font: inherit; font-size: 12px; color: var(--v-muted); white-space: nowrap; cursor: pointer; }
.dg-add:hover { border-color: var(--v-ink); color: var(--v-ink); }
/* (a 32 px high hit area around the small dashed button; on a phone it is the + alone) */
.dg-add { position: relative; }
.dg-add::after { content: ""; position: absolute; inset: -8px -4px; }
.dg-grip { position: absolute; left: -12px; top: 1px; z-index: 2; width: 14px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: #aeaeb2; display: grid; place-items: center; cursor: grab; opacity: 0; transition: opacity .12s; }
.dg-i:hover > .dg-grip, .dg-grip:focus, .dg-grip:focus-visible { opacity: 1; }
.dg-grip:hover { color: var(--v-ink); background: rgba(0,0,0,.05); }
.dg-grip:active { cursor: grabbing; }
@media (hover: none) { .dg-grip { opacity: .6; } }
.dg-i.dragging { opacity: .45; }
.dg-i.drop-before { box-shadow: 0 -2px 0 var(--v-accent-ink); }
.dg-i.drop-after { box-shadow: 0 2px 0 var(--v-accent-ink); }
.dg-flash { background: var(--v-lav); }
@media (max-width: 560px) {
  .dg-day { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .dg-date { width: 46px; }
  .dg-b { padding: 10px 12px; }
  .dg-i { grid-template-columns: minmax(0, 1fr) auto; }
  .dg-meta { grid-column: 1 / -1; grid-row: 2; margin-left: 24px; }
  .dg-lab { grid-column: 2; grid-row: 1; }
  .dg-live, .dg-arrive, .dg-warn { grid-row: auto; }
  .dg-add span { display: none; }
  .dg-grip { left: -10px; }
}
/* Who goes, without sharing (0.37): a tap opens a small box under the people, anchored to them. */
.hx-who-pop { z-index: 8; display: flex; flex-direction: column; gap: 10px; }
.hx-who-pop h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--hx-ink); }
.hx-who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hx-who-list li { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 4px 2px 10px; border-radius: 10px; background: #f6f4ef; }
.hx-who-list .who-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hx-who-list li { padding-left: 4px; }
.who-photo { position: relative; flex: none; }
.who-av { width: 28px; height: 28px; padding: 0; border: 1.5px dashed #cfc9bf; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; font: inherit; font-size: 12px; font-weight: 700; color: var(--hx-muted); cursor: pointer; }
.who-av.has { border: 0; }
.who-av:not(.has)::before { content: attr(data-initial); }
.who-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-av:disabled { cursor: default; }
.who-av:not(:disabled):hover { border-color: var(--hx-accent); color: var(--hx-accent); }
.who-av-x { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); font-size: 11px; line-height: 1; color: var(--hx-muted); cursor: pointer; opacity: 0; }
.who-photo:hover .who-av-x, .who-av-x:focus-visible { opacity: 1; }
.hx-who-list small { color: var(--hx-muted); font-size: 12px; }
.hx-who-list .who-x { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 18px; line-height: 1; color: var(--hx-muted); cursor: pointer; }
.hx-who-list .who-x:hover { background: #ebe7df; color: var(--danger); }
.hx-who-add { display: flex; gap: 8px; }
.hx-who-add input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--hx-line); border-radius: 10px; font: inherit; font-size: 14px; }
.hx-who-add button { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--hx-accent); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.hx-who-add button:disabled { opacity: .45; cursor: default; }
.hx-who-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.hx-who-count .stepper { display: inline-flex; align-items: center; gap: 10px; }
.hx-who-count .stepper button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--hx-line); border-radius: 50%; background: #fff; font-size: 16px; line-height: 1; cursor: pointer; color: var(--hx-ink); }
.hx-who-count .stepper button:disabled { opacity: .4; cursor: default; }
.hx-who-count .stepper b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.hx-who-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--hx-muted); }
.hx-who-invite { align-self: flex-start; font-size: 14px; }

/* The budget: the figure big, booked / planned / free (or over) a line each; a tap splits it. */
.hx-budget-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 16px; color: var(--hx-muted); font-variant-numeric: tabular-nums; }
.hx-budget-line > span { display: inline-flex; align-items: center; gap: 12px; }
.hx-budget-line i { width: 10px; height: 10px; border-radius: 50%; background: #c9c5bc; }
.hx-budget-line b { font-weight: 500; color: var(--hx-ink); white-space: nowrap; }
.hx-budget-line.booked i { background: #22c08e; }
.hx-budget-line.planned i { background: var(--hx-planned); box-shadow: inset 0 0 0 1px var(--hx-booked); }
.hx-budget-line.over i { background: #d93a3a; }
.hx-budget-line.over, .hx-budget-line.over b { color: #c62828; }
.hx-pop {
  position: absolute; z-index: 7; right: -8px; left: -8px; top: calc(100% + 8px); padding: 16px 18px; border-radius: 16px; background: #fff; font-size: 15px; cursor: default; color: var(--hx-ink);
  box-shadow: 0 12px 40px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.04);
}
.hx-pop .line { display: flex; justify-content: space-between; padding: 5px 0; font-variant-numeric: tabular-nums; }
.hx-pop .line i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; }
.hx-pop .sep { border-top: 1px solid var(--hx-line); margin: 10px 0; }
.hx-pop .left { color: var(--hx-muted); font-size: 13px; margin-top: 8px; }
.hx-pop i.c-flight { background: #6a4fe0; }
.hx-pop i.c-stay { background: #23998b; }
.hx-pop i.c-transport { background: #c58a2e; }
.hx-pop i.c-activity { background: #a8336f; }
.hx-pop i.c-other { background: #8e8e93; }

/* ---------- plan cards (0.31): docs/mockups/2026-10-05-ulasim-v3.html + 2026-10-05-etkinlik-v4.html ---------- */
.pk-card {
  --pk-ink: var(--q-ink); --pk-gray: var(--q-mut); --pk-line: var(--q-line); --pk-link: var(--q-acc);
  position: relative; overflow: hidden; border-radius: 20px; padding: 16px; margin: 0 0 6px;
  background: #fff; border: 1px solid #e8e8ed; color: var(--pk-ink); cursor: pointer; transition: box-shadow .15s;
}
.pk-card:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, .06); }
.pk-card.pk-all-no { opacity: .6; }
.pk-art {
  position: absolute; left: 50%; top: 32px; height: 104px; width: 46%; transform: translateX(-50%); color: var(--mc); opacity: .9; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* top line */
.pk-top { position: relative; display: flex; align-items: center; gap: 8px; height: 24px; font-size: var(--q-fs-info); color: var(--pk-gray); }
.pk-ring { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.pk-ring.open { border: 2px dashed var(--v-dash); }
.pk-ring.half { border: 2px solid var(--plan-dot); }
.pk-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--mc); white-space: nowrap; }
.pk-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Kişiye özel rezervasyon (docs/mockups/2026-10-06-kisiye-ozel-v1.html): whose a plan is, only when it isn't
   everyone's. A white pill, lavender edge, dark purple words, the person's 20 px face (photo or initial). */
.wh-badge { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; height: 22px; padding: 0 8px 0 1px; border-radius: 999px; background: #fff; border: 1px solid #e6e1f7; color: #4b3fb0; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; flex: 0 1 auto; }
.wh-faces { display: inline-flex; flex: none; }
.wh-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex: none; background: #e9e4ff; color: #4b3fb0; font-size: var(--q-fs-badge); font-weight: 700; }
.wh-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-faces .wh-av + .wh-av { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }
.wh-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hx-who-list .who-name small.wh-from { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.2; }
.pk-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pk-ib { width: 28px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--pk-gray); display: grid; place-items: center; cursor: pointer; }
.pk-ib.pk-clip { color: #b9b3a6; }
.pk-docmiss { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border: 0; border-radius: 8px; background: #fff6e6; color: var(--q-warn); font: inherit; font-size: var(--q-fs-small); font-weight: 600; white-space: nowrap; cursor: pointer; }
.pk-docmiss:hover { background: #f1dcb0; }
.pk-ib:hover { background: rgba(255, 255, 255, .8); color: var(--pk-ink); }
.pk-docs, .pk-menu-wrap { position: relative; }
.pk-docpill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border: 0; border-radius: 8px; background: #fff; color: var(--pk-ink); font: inherit; font-size: var(--q-fs-info); font-weight: 500; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; }
.pk-docpill b { font-weight: 600; color: var(--pk-gray); }
.pk-menu, .pk-doclist { position: absolute; right: 0; top: 30px; z-index: 6; min-width: 180px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); display: flex; flex-direction: column; cursor: auto; }
.pk-doclist { min-width: 280px; padding: 8px 10px; gap: 6px; }
.pk-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 15px; color: var(--pk-ink); cursor: pointer; }
.pk-menu button:hover { background: #f5f5f7; }
.pk-menu button.danger, .pk-docrows .danger { color: #c62828; }
.pk-docrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-docrows li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; font-size: var(--q-fs-info); }
.pk-docrows .name { min-width: 0; overflow-wrap: anywhere; }
.pk-docrows .size { color: var(--pk-gray); font-variant-numeric: tabular-nums; }
.pk-docrows button { border: 0; background: none; padding: 0; font: inherit; color: var(--pk-link); cursor: pointer; }
.pk-doc-error { position: absolute; right: 0; top: 30px; z-index: 6; width: 260px; padding: 8px 10px; border-radius: 10px; background: #fdecea; color: #b42318; font-size: var(--q-fs-info); }

/* transport body (ulasim-v3) */
.pk-body { position: relative; outline: none; }
.pk-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
/* The middle column is as wide as the drawing above it (.pk-art, 46%): an end never runs under the silhouette. */
.pk-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 46%) minmax(0, 1fr); align-items: center; gap: 10px; margin: 8px 0 26px; }
.pk-stop { min-width: 0; }
.pk-stop b { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pk-stop b.long { font-size: 24px; }
.pk-stop > span { display: block; margin-top: 3px; font-size: var(--q-fs-info); color: var(--pk-gray); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pk-stop > span strong { color: var(--pk-ink); font-weight: 600; white-space: nowrap; }
.pk-stop.r { text-align: right; }
.pk-route { position: relative; height: 78px; }
.pk-route small { position: absolute; left: -20px; right: -20px; bottom: -26px; text-align: center; font-size: var(--q-fs-info); color: #3a3a3c; white-space: nowrap; }
.pk-title { margin: 12px 0 16px; font-size: var(--q-fs-intent); line-height: 1.25; font-weight: 700; }
/* No ends yet ("Uçuş" said in the chat): the title keeps the drawing's band, so the drawing never runs into the strip. */
.pk-card:has(> .pk-art) .pk-title { min-height: 84px; }
/* No drawing (metro, walking, an unknown way): no empty band for it. */
/* Its middle line (the arrival time, the length) sits in the flow, between the ends, never on the strip. */
.pk-card:not(:has(> .pk-art)) .pk-route { height: auto; align-self: end; }
.pk-card:not(:has(> .pk-art)) .pk-route small { position: static; display: block; margin: 0 -20px; white-space: normal; }
.pk-card:not(:has(> .pk-art)) .pk-mid { margin-bottom: 16px; }

/* media body (etkinlik-v4) */
.pk-media { display: grid; grid-template-columns: 176px 1fr; gap: 16px; align-items: center; margin: 12px 0 16px; }
.pk-vis { position: relative; width: 176px; height: 128px; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--mc) 10%, #fff); color: var(--mc); }
.pk-vis .pk-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-vis svg.pk-sil { position: absolute; inset: 0; margin: auto; width: 116px; height: 96px; }
.pk-vis .pk-kindbig { position: absolute; inset: 0; margin: auto; }
.pk-score { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border-radius: 8px; background: #fff; color: var(--pk-ink); font-size: var(--q-fs-info); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pk-score.best { color: var(--pk-link); }
.pk-txt { min-width: 0; }
.pk-txt h3 { margin: 0; font-size: var(--q-fs-intent); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.pk-txt p { margin: 4px 0 0; font-size: 15px; color: #3a3a3c; font-variant-numeric: tabular-nums; }
.pk-txt p b { font-weight: 600; color: var(--pk-ink); }
.pk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: var(--q-fs-info); color: var(--pk-gray); }
.pk-meta .star { color: var(--pk-ink); font-weight: 600; }
.pk-meta a { color: var(--pk-link); text-decoration: none; }

/* bottom strip */
.pk-foot { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .75); }
/* Short words only ("Seçildi · bilet alınmadı · ⏳ 4 gün"), never cut with "…": the full sentence is in the details. */
.pk-state { display: block; flex: 0 1 auto; min-width: 0; font-size: var(--q-fs-info); font-weight: 600; line-height: 1.35; }
.pk-state > svg { vertical-align: -2px; margin-right: 6px; }
.pk-state.wait { color: #8a5a00; }
.pk-state.done { color: #1d7442; }
.pk-state.plain { color: var(--pk-gray); }
.pk-sub { margin-left: 6px; font-weight: 400; color: var(--pk-gray); }
.pk-when { margin-left: 6px; font-weight: 600; white-space: nowrap; }
.pk-state.alert-red .pk-when { color: var(--q-bad); }
.pk-state.alert-amber .pk-when { color: var(--q-warn); }
.pk-nav { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--q-fs-info); color: var(--pk-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-nav button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e3dccb; background: #fff; display: grid; place-items: center; color: var(--pk-ink); cursor: pointer; }
.pk-nav button:disabled { opacity: .4; cursor: default; }
.pk-best { font-size: var(--q-fs-info); color: var(--pk-link); font-weight: 600; }
.pk-price { flex: none; margin-left: auto; font-size: var(--q-fs-info); color: var(--pk-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-price b { font-size: 17px; color: var(--pk-ink); margin-right: 2px; }
.pk-cta { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pk-ink, #1d1d1f); color: #fff; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pk-cta:disabled { opacity: .5; }
/* No price (a transfer, a move): the one action still sits at the right end. */
.pk-foot > .pk-cta { margin-left: auto; }
.pk-foot > .pk-price ~ .pk-cta { margin-left: 0; }

/* opened (ulasim-v3 .detail) */
.pk-detail { position: relative; margin: 12px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; font-size: var(--q-fs-info); cursor: auto; }
.pk-detail .card-details { padding: 0; }
/* A transfer's details: the day-by-day row's body, without that row's rail indent. */
.pk-detail .leg-body { padding: 0; }
.pk-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0 0 8px; }
.pk-dl dt { color: var(--pk-gray); }
.pk-dl dd { margin: 0; }
.pk-badges { margin: 0 0 6px; font-size: var(--q-fs-info); font-weight: 600; color: var(--pk-link); }
.pk-score-line { margin: 0 0 8px; font-size: var(--q-fs-info); color: var(--pk-gray); }
.pk-alert { margin: 0 0 8px; font-size: var(--q-fs-info); font-weight: 600; }
.pk-alert.red { color: #c62828; }
.pk-alert.amber { color: #8a5a00; }
.pk-why { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--pk-line); line-height: 1.5; }
.pk-why + .pk-why { margin-top: 6px; padding-top: 0; border-top: 0; }
.pk-verify { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.pk-detail .pk-docrows { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pk-line); }
.pk-acts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pk-line); }
.pk-acts a, .pk-acts button { color: var(--pk-link); font: inherit; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.pk-acts .quiet { color: var(--pk-gray); }
.pk-acts .del { margin-left: auto; color: var(--pk-gray); }
.pk-acts .del:hover { color: #c62828; }

/* in a row of cards (a day's ideas, the places list) */
.carousel-track > .pk-card { flex: 0 0 560px; max-width: 92%; scroll-snap-align: start; margin: 0; }
.carousel-track:has(.pk-card.pk-open) { align-items: flex-start; }

/* add: header button, the + between cards, the sheet (ulasim-v3) */
.pk-add { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-left: auto; border-radius: 999px; border: 1px solid var(--q-line); background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--q-ink); cursor: pointer; }
/* "Gezi planı · 6 gece …" on the left, "+ Ekle" at the right end. */
.section-head:has(> .pk-add) { align-items: center; gap: 12px; }
.section-head .pk-add { margin-left: auto; }
.pk-sheet-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .25); }
.pk-sheet { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 22px; border: 1px solid #e8e8ed; box-shadow: 0 20px 60px rgba(0, 0, 0, .12); padding: 20px; background: #fff; color: #1d1d1f; }
.pk-sheet header { display: flex; align-items: baseline; gap: 12px; }
.pk-sheet header b { font-size: var(--q-fs-intent); }
.pk-sheet header span { font-size: var(--q-fs-info); color: #6e6e73; }
.pk-sheet header .pk-ib { margin-left: auto; font-size: var(--q-fs-intent); }
.pk-sheet h4 { margin: 18px 0 8px; font-size: var(--q-fs-info); font-weight: 500; color: #6e6e73; }
.pk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pk-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; border: 1px solid #e8e8ed; background: #fff; font: inherit; font-size: var(--q-fs-info); color: #1d1d1f; cursor: pointer; }
.pk-tile:hover { background: #f5f5f7; }
.pk-tile i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.pk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.pk-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--q-fs-info); color: #6e6e73; }
.pk-field input, .pk-field select { height: 40px; padding: 0 12px; border: 1px solid #d2d2d7; border-radius: 10px; font: inherit; font-size: 15px; color: #1d1d1f; background: #fff; }
.pk-price-field { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.pk-form-error { grid-column: 1 / -1; margin: 0; color: #b42318; font-size: var(--q-fs-info); }
.pk-form-acts { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.pk-form-acts .pk-cta { margin-left: auto; }
.pk-undo { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--q-ink); color: #fff; font-size: var(--q-fs-button); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.pk-undo.err { background: #7a1f16; }
.pk-undo button { border: 0; background: none; color: color-mix(in srgb, var(--q-acc) 42%, #fff); font: inherit; font-weight: 600; font-size: var(--q-fs-button); cursor: pointer; }

/* narrow board (ulasim-v3 @620, etkinlik-v4 @560) */
@container panel (max-width: 620px) {
  .pk-mid { grid-template-columns: 1fr 1fr; }
  .pk-route { grid-column: 1 / -1; grid-row: 2; }
  .pk-stop.r { grid-column: 2; grid-row: 1; }
  .pk-stop b { font-size: 24px; }
  .pk-best { display: none; }
  .pk-art { width: 78%; top: 92px; height: 80px; }
  .pk-card:has(> .pk-art) .pk-title { min-height: 128px; }
  .pk-dl { grid-template-columns: 90px 1fr; }
  .pk-media { grid-template-columns: 1fr; gap: 12px; }
  .pk-vis { width: 100%; height: 168px; }
  .pk-vis svg.pk-sil { width: 140px; height: 116px; }
  .pk-docpill span { display: none; }
  .pk-txt h3 { font-size: 17px; }
  .pk-txt p { font-size: var(--q-fs-info); }
  .pk-sub, .pk-opt { display: none; }
  /* the state and the price on two lines when they don't fit on one ("Planlandı · ⏳ 3 gün" over "€25 toplam") */
  .pk-foot { gap: 8px; flex-wrap: wrap; row-gap: 4px; padding-block: 6px; }
  .pk-form { grid-template-columns: 1fr; }
}

/* Compact plan cards (0.34.5): the same card, about a fifth smaller. Padding 12, top line 22, cities 24 (long 20),
   card titles 17, the media picture 132×96, the bottom strip 40, the action 32. Nothing moves, nothing goes. */
.pk-card { padding: 12px 14px; border-radius: 18px; }
.pk-art { top: 26px; height: 80px; }
.pk-top { height: 22px; font-size: var(--q-fs-small); gap: 7px; }
.pk-ring { width: 20px; height: 20px; }
.pk-ib { height: 22px; }
.pk-docpill { height: 22px; font-size: var(--q-fs-small); }
.pk-mid { margin: 6px 0 20px; }
.pk-stop b { font-size: 24px; }
.pk-stop b.long { font-size: var(--q-fs-intent); }
.pk-stop > span { font-size: var(--q-fs-info); margin-top: 2px; }
.pk-route { height: 60px; }
.pk-route small { bottom: -22px; font-size: var(--q-fs-small); }
.pk-title { margin: 10px 0 12px; font-size: 17px; }
.pk-card:has(> .pk-art) .pk-title { min-height: 66px; }
.pk-card:not(:has(> .pk-art)) .pk-mid { margin-bottom: 12px; }
.pk-media { grid-template-columns: 132px 1fr; gap: 14px; margin: 10px 0 12px; }
.pk-vis { width: 132px; height: 96px; border-radius: 12px; }
.pk-vis svg.pk-sil { width: 88px; height: 72px; }
.pk-score { font-size: 12px; padding: 1px 5px; }
.pk-txt h3 { font-size: 17px; }
.pk-txt p { font-size: var(--q-fs-info); margin-top: 3px; }
.pk-meta { margin-top: 6px; font-size: var(--q-fs-small); }
.pk-foot { min-height: 40px; border-radius: 12px; gap: 10px; }
.pk-state { font-size: var(--q-fs-small); }
.pk-nav { font-size: var(--q-fs-small); }
.pk-nav button { width: 24px; height: 24px; }
.pk-price b { font-size: 15px; }
.pk-cta { height: 32px; padding: 0 14px; font-size: var(--q-fs-info); }
.pk-detail { margin-top: 10px; padding: 12px 14px; }
/* The stay's settled card, the same way: photo 132×100, name 16, tighter bars and strip. */
.settled-card { border-radius: 22px; }
.settled-card .status-bar { padding: 7px 16px; font-size: var(--q-fs-info); }
.settled-card .card-alert { padding: 6px 16px; font-size: var(--q-fs-info); }
.stc-main { padding: 12px; }
.stc-media-row { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
.stc-img { width: 132px; height: 100px; border-radius: 14px; }
.stc-info { gap: 3px; }
.stc-name { font-size: 16px; }
.stc-line { font-size: 13px; }
.stc-foot { padding: 8px 16px 10px; gap: 8px 14px; }
.stc-details { padding: 4px 16px 14px; }
@container panel (max-width: 620px) {
  .pk-stop b { font-size: var(--q-fs-intent); }
  .pk-art { top: 78px; height: 64px; }
  .pk-card:has(> .pk-art) .pk-title { min-height: 104px; }
  .pk-vis { width: 100%; height: 132px; }
  .pk-vis svg.pk-sil { width: 112px; height: 92px; }
  .pk-txt h3 { font-size: var(--q-fs-card); }
}

/* ---------- 0.32: the hover × on every record's card (left of •••) ---------- */
.pk-x { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #6e6e73; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.pk-card:hover .pk-x, .pk-card:focus-within .pk-x, .swipe-card:hover .pk-x, .swipe-card:focus-within .pk-x, .settled-card:hover .pk-x, .settled-card:focus-within .pk-x { opacity: 1; }
.pk-x:hover, .pk-x:focus-visible { background: #fdecea; color: #c62828; }
/* Touch, or a narrow board: always there, faint. */
@media (hover: none) { .pk-x { opacity: .55; } }
@container panel (max-width: 620px) { .pk-x { opacity: .55; } }
/* A stay's × and ••• in its top right corner. */
.st-tools { --pk-ink: #1d1d1f; --pk-gray: #6e6e73; position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 4px; }
.st-tools .pk-ib { background: rgba(255, 255, 255, .85); }
.swipe-card { position: relative; }
.swipe-card .opt-text { padding-right: 64px; }
.settled-card .st-tools { top: 6px; }

/* ---------- 0.32: "+" everywhere (top of the plan, each city's head, each day of the itinerary) ---------- */
.it-add { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f; font-size: 17px; line-height: 1; cursor: pointer; opacity: .35; transition: opacity .15s; }
.it-add:hover, .it-add:focus-visible, .it-day:hover .it-add { opacity: 1; }
.it-day > .it-add { position: absolute; top: 10px; right: 12px; z-index: 1; }
.it-day:not(.empty) .it-day-head { padding-right: 48px; }
.it-day.empty .it-add { margin-left: auto; align-self: center; }
@container panel (max-width: 620px) { .it-add { opacity: 1; } }

/* ---------- 0.32: Fikirler: the quick line, the day chip and its picker ---------- */
.fk-quick { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--fk-soft); color: var(--fk-ink); }
.fk-quick input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 15px; color: var(--fk-ink); outline: none; }
.fk-quick input::placeholder { color: var(--fk-gray); }
.fk-daywrap { position: relative; flex: none; }
.fk-day { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #d2d2d7; background: #fff; font: inherit; font-size: 13px; color: var(--fk-ink); white-space: nowrap; cursor: pointer; }
.fk-day.set { background: var(--fk-ink); border-color: var(--fk-ink); color: #fff; }
.fk-picker { position: absolute; right: 0; top: 34px; z-index: 8; width: 220px; max-height: 320px; overflow-y: auto; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.fk-picker ul { list-style: none; margin: 0; padding: 0; }
.fk-picker li button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--fk-ink); text-align: left; cursor: pointer; }
.fk-picker li button span { font-size: 12.5px; color: var(--fk-gray); }
.fk-picker li button:hover, .fk-picker li button.on { background: var(--fk-soft); }
.fk-meals { display: flex; gap: 4px; margin: 0 0 6px; }
.fk-meals button { flex: 1; height: 28px; border-radius: 999px; border: 1px solid #d2d2d7; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.fk-meals button.on { background: var(--fk-ink); border-color: var(--fk-ink); color: #fff; }
.fk-unday { width: 100%; margin-top: 6px; padding: 7px 10px; border: 0; border-top: 1px solid var(--fk-line); background: none; font: inherit; font-size: 14px; color: #c62828; text-align: left; cursor: pointer; }

/* ---------- 0.33: a block of nights' × (a stay said apart, empty nights): top right of its card; with options under it, at the end of its line ---------- */
.stay-x { position: absolute; top: 6px; right: 10px; z-index: 3; }
.stay-open:hover .pk-x, .stay-open:focus-within .pk-x, .slot-note:hover .pk-x, .slot-note:focus-within .pk-x { opacity: 1; }
.stay-open .status-bar { padding-right: 44px; }
.slot-note { display: flex; align-items: center; gap: 8px; }

/* ---------- 0.33: a card edited where it stands (InlineEdit): underline + pencil on hover, the same-sized box on a click ---------- */
.pk-ed-wrap { position: relative; display: inline; }
.pk-ed { border-bottom: 1px solid transparent; border-radius: 2px; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") 2 18, text; transition: border-color .15s; }
.pk-ed:hover, .pk-ed:focus-visible { border-bottom-color: currentColor; outline: none; }
.pk-ed.empty { opacity: .45; font-weight: 400; }
.pk-ed-box { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; max-width: 100%; vertical-align: baseline; }
.pk-ed-input, .pk-ed-cur { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; min-width: 0; max-width: 100%; padding: 0 2px; border: 0; border-bottom: 2px solid var(--accent); border-radius: 2px; background: rgba(255, 255, 255, .9); outline: none; }
.pk-ed-box.t-number .pk-ed-input { width: 6ch; }
.pk-ed-box.t-date .pk-ed-input { width: auto; font-size: min(1em, 16px); }
.pk-ed-box.t-time .pk-ed-input { width: auto; }
.pk-ed-cur { font-size: .8em; }
.pk-ed-input[aria-invalid] { border-bottom-color: #c62828; }
.pk-ed-err { flex-basis: 100%; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #c62828; white-space: normal; }
.pk-ed-hint { position: absolute; left: 0; top: 100%; z-index: 5; display: none; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: #1d1d1f; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.4; white-space: nowrap; }
.pk-ed-hint button { border: 0; padding: 0; background: none; color: #8fb8ff; font: inherit; cursor: pointer; }
.pk-ed-wrap.fixed:hover .pk-ed-hint, .pk-ed-wrap.fixed:focus-within .pk-ed-hint { display: block; }
.pk-ed-wrap.fixed > .pk-ed { border-bottom: 1px dotted currentColor; }
.st-edit { color: var(--muted); }
.opt-where { margin-top: 2px; font-size: 14px; line-height: 1.35; }
.empty-card .pk-ed-hint { white-space: normal; }

/* ---------- 0.34: the Plan by category (docs/mockups/2026-10-05-kategoriler-v4.html): one white sheet, a
   section per kind divided by hairlines; colour only in the line icon and the bar. Closed, every header is the
   same line: icon · name … bar · "3/4" · arrow. Open, "+ Ekle" joins it and one amber line says what's waiting ---------- */
.cat-plan { --fk-ink: #1d1d1f; --fk-gray: #6e6e73; --fk-line: #e8e8ed; --fk-soft: #f5f5f7; }
.cat-plan > .section-head { align-items: baseline; margin-bottom: 8px; padding: 0 4px 6px; border-bottom: 0; }
.cat-plan > .section-head > span:first-child { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #1d1d1f; }
.cat-plan > .section-head > .muted { font-size: 14px; }
/* no overflow: hidden — a card's menu may reach past the sheet; the rounded corners are the heads' own */
.cat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; user-select: none; }
.cat-head:hover { background: #fbfaf8; }
.cat-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--c); }
/* the right-hand group: ["+ Ekle"] · bar · count · arrow, the count a fixed width so the numbers line up */
.cat-count { flex: none; width: 44px; text-align: right; font-size: 15px; font-weight: 600; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.cat-count i { font-style: normal; font-weight: 400; color: #8e8e93; }
/* open: what's waiting, one amber line under the name */
.cat-wait { margin: -8px 0 0; padding: 0 20px 12px 60px; font-size: 14px; color: #9a6400; }
/* v11: the header's stage line under the section's name; Hazırlık's visa line and "Hazırları gizle". */
.cat-body { padding: 0 20px 18px 60px; }
/* Öneriler (spec 2026-10-06 §1): a soft card atop its section's body and "1 öneri" in its header; never counted. */
.sg-list { display: grid; gap: 8px; margin: 0 0 14px; }
.sg-card { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 14px; background: #f6f3ff; border: 1px dashed #d7cdfb; }
.sg-card.warn { background: #fff8ec; border-color: #f0d9a8; }
.sg-mark { flex: none; font-size: 15px; line-height: 1.4; }
.sg-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sg-text b { font-size: 14.5px; font-weight: 600; color: #1d1d1f; }
.sg-why { font-size: 13px; line-height: 1.4; color: #6e6e73; }
.sg-note { font-size: 13px; line-height: 1.4; color: #9a6400; }
.sg-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.sg-add, .sg-no { height: 30px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sg-add { padding: 0 12px; border: 0; background: #6a4fe0; color: #fff; font-weight: 600; }
.sg-add:hover { background: #5a3fd0; }
.sg-no { padding: 0 10px; border: 1px solid #d9d5ce; background: #fff; color: #3a3a3c; }
.sg-no:hover { border-color: #b9b3aa; }
.sg-add:focus-visible, .sg-no:focus-visible { outline: 2px solid #6a4fe0; outline-offset: 2px; }
@media (max-width: 560px) {
  .sg-card { flex-wrap: wrap; }
  .sg-actions { width: 100%; justify-content: flex-end; }
}
/* the section's end: "Gizlenenler · 2 göster", quiet; opened, a compact row each with its way back */
.cat-hidden { margin: 14px 0 0 118px; }
.cat-hidden-link { margin: 0; font-size: 13px; color: #8e8e93; }
.cat-hidden-link button { padding: 0; border: 0; border-bottom: 1px dotted #c7c7cc; background: none; font: inherit; color: #8e8e93; cursor: pointer; }
.cat-hidden-link button:hover { color: #6e6e73; }
.cat-hidden-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.cat-hidden-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid #f0ede8; font-size: 14px; color: #1d1d1f; }
.cat-hidden-name { flex: none; max-width: 45%; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #1d1d1f; text-align: left; overflow-wrap: anywhere; }
button.cat-hidden-name { cursor: pointer; }
button.cat-hidden-name:hover { text-decoration: underline; }
.cat-hidden-meta { flex: 1; min-width: 0; color: #6e6e73; overflow-wrap: anywhere; }
.cat-hidden-row .link-btn { flex: none; margin-left: auto; }

/* open: a timeline — the day on the left, a line and a dot, the cards on the right */
.cat-line { list-style: none; margin: 0; padding: 0; }
.cat-day { position: relative; display: grid; grid-template-columns: 76px 14px minmax(0, 1fr); gap: 0 14px; padding-bottom: 10px; }
.cat-day::before { content: ""; position: absolute; left: 96px; top: 14px; bottom: -14px; width: 2px; background: color-mix(in srgb, var(--c) 22%, #fff); }
.cat-day:last-child::before { display: none; }
.cat-date { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-top: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.cat-date b { font-size: 15px; font-weight: 700; color: #1d1d1f; white-space: nowrap; }
.cat-date span { font-size: 12.5px; color: #6e6e73; }
.cat-date-city { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-dot { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c); }
.cat-day.undated .cat-dot { border-style: dashed; }
.cat-cards { min-width: 0; }
/* 0.35.3 Yapılacak şeyler and Restoranlar: a list by city, not cards. Row: picture · name / grey line · chip, map, page, ✓ */
.cat-ideas { flex: none; font-size: 13.5px; color: #6e6e73; white-space: nowrap; }
.il-list { display: flex; flex-direction: column; gap: 14px; }
.il-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; border-bottom: 1px solid #efece7; }
.il-head b { font-size: 14px; font-weight: 700; color: #1d1d1f; }
.il-head i { margin-left: auto; font-style: normal; font-size: 12.5px; color: #8e8e93; font-variant-numeric: tabular-nums; }
.il-here { font-size: 12px; font-weight: 600; color: var(--c); }
.il-group.today .il-head b { color: var(--c); }
.il-wrap { scroll-margin-top: 12px; }
.il-wrap + .il-wrap { border-top: 1px solid #f3f1ed; }
.il-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 2px; }
.il-ic, .il-img { flex: none; width: 34px; height: 34px; border-radius: 9px; }
.il-ic { display: grid; place-items: center; }
.il-img { display: block; object-fit: cover; background: var(--fk-soft); }
.il-main { flex: 1; min-width: 0; }
.il-main b { display: block; font-size: 15px; font-weight: 500; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-sub { display: block; font-size: 12.5px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-row.back .il-sub { color: #9a6400; }
.il-act { flex: none; display: flex; align-items: center; gap: 6px; }
.il-done { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 999px; border: 1.5px solid #d2d2d7; background: #fff; display: grid; place-items: center; color: transparent; cursor: pointer; }
.il-done:hover { color: #8e8e93; border-color: #8e8e93; }
/* fikir havuzu v1: the status tabs, the kind chips, one "Harita", the name a link to the map */
.il-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: #f1efeb; overflow-x: auto; scrollbar-width: none; }
.il-tabs::-webkit-scrollbar { display: none; }
.il-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: max-content; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; color: #6e6e73; cursor: pointer; }
.il-tabs button b { font-weight: 700; color: #1d1d1f; }
.il-tabs button.on { background: #fff; color: #1d1d1f; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.il-tabs button.warn b { color: #9a6400; }
.il-tabs .dot { width: 7px; height: 7px; border-radius: 50%; background: #e0a43a; }
.il-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.il-chips button { height: 28px; padding: 0 11px; border: 1px solid #e3dfd8; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: #3a3a3c; cursor: pointer; }
.il-chips button i { font-style: normal; color: #8e8e93; margin-left: 2px; }
.il-chips button.on { border-color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; font-weight: 600; color: #1d1d1f; }
.il-none { margin: 4px 0; font-size: 14px; color: #8e8e93; }
.il-hint { font-size: 12.5px; color: #8e8e93; font-weight: 400; }
.il-group.today .il-head b { color: #5b3fd6; }
.il-group.missed .il-head b { color: #9a6400; }
.il-main .il-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.il-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.il-name a:hover { text-decoration: underline; }
.il-pen { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: #aeaeb2; display: grid; place-items: center; cursor: pointer; opacity: 0; }
.il-row:hover .il-pen, .il-pen:focus-visible { opacity: 1; }
.il-pen:hover { color: #1d1d1f; background: rgba(0,0,0,.05); }
@media (hover: none) { .il-pen { opacity: .6; } }
.il-sub > * + *::before { content: "·"; margin: 0 5px; color: #c7c7cc; }
.il-sub.missed { color: #9a6400; }
.il-src { color: #8e8e93; text-decoration: none; }
.il-src:hover { color: #1d1d1f; text-decoration: underline; }
.il-kindwrap { position: relative; }
.il-kind { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted #c7c7cc; }
.il-kind:hover { color: #1d1d1f; }
.il-kinds { position: absolute; left: 0; top: 20px; z-index: 9; display: flex; flex-direction: column; min-width: 170px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.il-kinds button { padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: #1d1d1f; text-align: left; cursor: pointer; }
.il-kinds button:hover, .il-kinds button.on { background: #f5f5f7; }
.il-kinds button.on { font-weight: 600; }
.il-kinds .auto { color: #6e6e73; border-top: 1px solid #efece7; border-radius: 0 0 8px 8px; }
.il-map { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border: 1px solid #e3dfd8; border-radius: 999px; background: #fff; font-size: 13px; color: #1d1d1f; text-decoration: none; }
.il-map svg { color: #1556d6; }
.il-map:hover { border-color: #c7c2b8; }
.il-today { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: #5b3fd6; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fk-day.set.today { background: #5b3fd6; border-color: #5b3fd6; }
.il-done.on { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.il-row.done .il-main b { color: var(--fk-gray); text-decoration: line-through; }
.il-row.done .il-img, .il-row.done .il-ic { opacity: .55; }
.il-promote, .il-book { flex: none; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.il-promote { color: #1556d6; }
.il-prep { flex: none; height: 26px; padding: 0 10px; border: 1px solid #e3dfd8; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; color: #6e6e73; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .12s; }
.il-row:hover .il-prep, .il-prep:focus-visible { opacity: 1; }
.il-prep:hover { color: #1d1d1f; border-color: #c7c2b8; }
@media (hover: none) { .il-prep { display: none; } }
.il-book { color: #85570a; }
.il-book.on { color: #1d7442; }
.il-row .il-x { position: absolute; top: 50%; left: -30px; transform: translateY(-50%); }
.il-row:hover .il-x, .il-row:focus-within .il-x { opacity: 1; }
/* İlham: tiles — the picture with its platform, the title, the city, "+ Güne ekle" */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ins-tile { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ins-ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, #8a5cc7 9%, #fff); }
.ins-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ins-ph-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #8a5cc7; }
.ins-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px; font-weight: 600; }
.ins-tile > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 5px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #1d1d1f; overflow-wrap: anywhere; }
.ins-city { font-size: 12.5px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-tile .fk-daywrap { align-self: flex-start; margin-top: 4px; }
.ins-tile .fk-picker { left: 0; right: auto; }
.ins-tile .ins-x { position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, .92); }
.ins-tile:hover .ins-x, .ins-tile:focus-within .ins-x { opacity: 1; }

/* -- F6 etkinlik -- Etkinlik ve turlar city by city (plan/ActivityBoard): a row of cards for each city, one card for everything. */
.ev-card { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 16px; background: #fff; border: 1.5px solid var(--v-line2); transition: box-shadow .2s; }
.ev-card:hover { box-shadow: 0 6px 18px rgba(28, 26, 51, .08); }
/* what opens from a card (the page's value under its name, the ••• menu) lies over the next card */
.ev-card:hover, .ev-card:focus-within { z-index: 2; }
.ev-card.chosen { border-color: var(--plan-line); }
.ev-card.booked { background: var(--book-bg); border-color: var(--book-line); }
.ev-card > :not(.ev-hit) { position: relative; z-index: 1; }
/* 0.36 Profilim, and photos in the hero's circles */
.profile-set { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid #ece9e3; }
.profile-set h3 { margin: 0 0 8px; font-size: 15px; }
.profile-row { display: flex; align-items: center; gap: 14px; }
.profile-photo { flex: none; width: 64px; height: 64px; padding: 0; border: 1.5px dashed var(--q-st-wait-line); border-radius: 50%; background: var(--q-soft); overflow: hidden; display: grid; place-items: center; font-size: var(--q-fs-price); font-weight: 700; color: var(--q-mut); cursor: pointer; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-name { flex: 1; min-width: 0; margin: 0; }
/* 0.36 Settings → AI kapısı */
.ai-gate { margin-top: 14px; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid var(--q-line); }
.ai-gate-body { margin-top: 8px; }
.ai-invited { color: #1d7442; }
.ai-on { color: #1d7442; }
.ai-tick { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 8px; font-size: 14px; cursor: pointer; }
.ai-tick input { margin-top: 3px; }
.ai-tickets { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; }
.ai-tickets li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid #f1efeb; }
.ai-tickets li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tickets li.off { opacity: .55; }

/* ---------- Boş kartlar (2026-10-06, docs/mockups/2026-10-06-bos-kartlar-v1.html): the approved card made plain ---------- */
.ek-tile { width: 52px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--mc) 8%, #fff); color: var(--mc); }
.ek-tile svg { width: 34px; height: 28px; opacity: .55; }
.ek-txt { min-width: 0; }
.ek-txt b { display: block; font-size: 15.5px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.ek-txt small { display: block; margin-top: 1px; font-size: 12.5px; color: #8e8e93; overflow-wrap: anywhere; }
.ek-find { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.ek-ara { margin-right: 2px; font-size: 12px; color: #8e8e93; }
.ek-link { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 5px; border-radius: 999px; border: 1px solid #ece8e1; background: #fff; color: #55526a; font-size: 12px; text-decoration: none; white-space: nowrap; }
.ek-link:hover, .ek-link:focus-visible { border-color: #cfc9be; color: #1d1d1f; }
.ek-lg { flex: none; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font-size: 8.5px; font-weight: 800; line-height: 1; color: #fff; }
.ek-slot { scroll-margin-top: 12px; }
@container panel (max-width: 620px) {
  .ek-find { margin-left: 0; justify-content: flex-start; width: 100%; }
}
/* the AI offers' row (revision 2; cards: docs/mockups/2026-10-06-ai-oneriler-turler-v3.html), only with a data source connected */
.ek-offers { margin: 8px 0 0; }
.ek-offers-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 12px; border: 1px solid #e4dcff; background: #f6f3ff; font: inherit; font-size: 13px; font-weight: 600; color: #5b45e0; cursor: pointer; text-align: left; }
.ek-offers-chev { margin-left: auto; transition: transform .2s; }
.ek-offers.open .ek-offers-chev { transform: rotate(180deg); }
.ek-offer-list { display: grid; gap: 6px; margin-top: 6px; }
.ek-offer { display: grid; grid-template-columns: minmax(0, 1fr) 168px; border-radius: 16px; background: #fff; border: 1px solid #e4dcff; overflow: hidden; }
.ek-of-body { min-width: 0; padding: 12px 14px 11px; }
.ek-why { margin: 8px 0 0; font-size: 12px; color: #5b45e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a flight or a transfer: carrier, hours and codes, how long over a thin line, direct in green */
.ek-of-route { display: grid; grid-template-columns: max-content auto minmax(70px, 1fr) auto; align-items: center; gap: 14px; }
.ek-of-carrier { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ek-of-air { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #6a4fe0; color: #fff; font-size: 12px; font-weight: 800; }
.ek-of-tm { font-size: 18px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ek-of-tm small { display: block; font-size: 12.5px; font-weight: 400; color: #6e6e73; }
.ek-of-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; font-size: 12px; color: #6e6e73; }
.ek-of-ln { position: relative; display: block; width: 100%; height: 1px; background: #cfcbe0; }
.ek-of-ln svg { position: absolute; right: -4px; top: -6px; color: #9a96b0; }
.ek-of-ok { color: #1f8a70; font-weight: 500; }
/* a stay, an activity, an eSIM: photo, name, rating chip and area, one line */
.ek-of-media { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; }
.ek-of-ph { width: 92px; height: 72px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #eef1fb; color: #3b6fd1; }
.ek-of-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-of-ph svg { opacity: .55; }
.ek-of-txt { min-width: 0; display: grid; }
.ek-of-t { font-size: 15.5px; font-weight: 700; color: #1d1d1f; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-of-t:hover { text-decoration: underline; }
.ek-of-s { margin-top: 3px; font-size: 12.5px; color: #6e6e73; }
.ek-of-rate { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 20px; margin-right: 6px; padding: 0 5px; border-radius: 6px; background: #1f8a70; color: #fff; font-size: 11.5px; font-weight: 700; }
/* the deal: source, the big price, its unit, a full-width "Ekle →", × in the corner */
.ek-deal { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-left: 1px solid #e4dcff; background: #f6f3ff; }
.ek-from { display: flex; align-items: center; gap: 5px; padding-right: 18px; font-size: 11.5px; color: #6e6e73; text-decoration: none; white-space: nowrap; }
.ek-from .ek-lg { width: 13px; height: 13px; font-size: 7.5px; border-radius: 3px; }
.ek-amt { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.ek-amt small { font-size: 13px; font-weight: 500; color: #6e6e73; letter-spacing: 0; }
.ek-per { margin-top: -2px; font-size: 11.5px; color: #6e6e73; }
.ek-go { margin-top: 8px; height: 36px; border: 0; border-radius: 10px; background: #5b45e0; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ek-go:hover { background: #4a35cf; }
.ek-offer-x { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: #a7a2c4; display: grid; place-items: center; cursor: pointer; }
.ek-offer-x:hover { background: #ebe5ff; color: #3a3a3c; }
/* a stay's three picks (stayPicks.ts): the label on top, photo, name, rating, the price with its scope, why, Favorile · İncele */
.ek-pick-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.ek-pick { display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid #e4dcff; }
.ek-pick.pick-best { border-color: #b9aaf5; box-shadow: 0 2px 10px rgba(91, 69, 224, .08); }
.ek-pick-label { align-self: flex-start; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px; background: #f2f1f6; color: #6e6e73; font-size: 11.5px; font-weight: 700; letter-spacing: .1px; }
.ek-pick.pick-best .ek-pick-label { background: #5b45e0; color: #fff; }
.ek-pick-ph { display: grid; place-items: center; height: 116px; border-radius: 12px; overflow: hidden; background: #eef1fb; color: #3b6fd1; }
.ek-pick-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-pick-ph svg { opacity: .55; }
.ek-pick-body { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; padding: 9px 2px 0; }
.ek-pick-name { font-size: 15px; font-weight: 700; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-pick-s { display: flex; align-items: center; font-size: 12.5px; color: #6e6e73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-pick-price { font-size: 12.5px; color: #6e6e73; }
.ek-pick-price b { font-size: 16px; font-weight: 800; color: #1d1d1f; letter-spacing: -.2px; }
.ek-pick-why { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: #5b45e0; }
.ek-pick-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.ek-pick-fav, .ek-pick-go { display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ek-pick-fav { border: 0; background: #5b45e0; color: #fff; }
.ek-pick-fav:hover { background: #4a35cf; }
.ek-pick-fav.done { background: #e7f5f0; color: #1f8a70; cursor: default; }
.ek-pick-go { border: 1px solid #e4dcff; background: #f6f3ff; color: #5b45e0; }
.ek-pick-go:hover { border-color: #b9aaf5; }
@container panel (max-width: 620px) {
  .ek-pick-list { grid-auto-flow: row; }
  .ek-pick-ph { height: 140px; }
}
@container panel (max-width: 620px) {
  .ek-offer { grid-template-columns: 1fr; }
  .ek-deal { border-left: 0; border-top: 1px solid #e4dcff; }
  .ek-of-route { grid-template-columns: auto minmax(60px, 1fr) auto; }
  .ek-of-carrier { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

/* a narrow board (≤620 px): the day goes above its cards on one line; the header wraps under its name */
@container panel (max-width: 620px) {
  .cat-head { gap: 10px; padding: 14px 14px; }
  .cat-count { width: 40px; }
  .il-row { flex-wrap: wrap; row-gap: 6px; }
  .il-act { width: 100%; padding-left: 46px; }
  .il-row .il-x { left: auto; right: 0; top: 18px; opacity: 1; }
  .cat-ideas { font-size: 12.5px; }
  .cat-wait { padding: 0 14px 10px 52px; }
  .cat-body { padding: 0 10px 12px; }
  .cat-hidden { margin: 12px 4px 0; }
  .cat-day { grid-template-columns: minmax(0, 1fr); padding-bottom: 14px; }
  .cat-day::before, .cat-dot { display: none; }
  .cat-date { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 0 4px 8px; text-align: left; }
}

/* ---------- Günlük akış (0.35.1): one hierarchy for Liste and Kartlar ----------
   Liste: the day's photo left (38%), on the right the title and the whole day as a timeline, nothing folded:
   time · a dot on a dotted line · the Plan's icon in a soft tile of its colour (✓ booked, an amber dot still to
   do) · the name; check-in, check-out, the metro are thin lines. The card is as tall as its day. Kartlar: every
   line is its own Plan card, in order, under its time, the day's header held at the top. */
.dc { --dc-ink: #1d1d1f; --dc-gray: #6e6e73; --dc-line: #e8e8ed; color: var(--dc-ink); }
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.06); transition: box-shadow .15s; }

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
.dc-left { flex: none; padding: 2px 9px; border-radius: 8px; background: #fdf0d5; color: #8a5a00; font-size: 13px; font-weight: 600; }
.dc-ideas-n { flex: none; padding: 2px 9px; border-radius: 8px; background: #f1efe9; color: var(--dc-gray); font-size: 13px; }

/* the timeline */
.dc-tl { position: relative; list-style: none; margin: 0; padding: 0; }
.dc-tl::before { content: ""; position: absolute; left: 60px; top: 18px; bottom: 18px; border-left: 1.5px dotted #cdc7bd; }
.dc-step { position: relative; display: grid; grid-template-columns: 50px 20px minmax(0, 1fr); align-items: center; column-gap: 6px; min-height: 46px; }
.dc-step .t { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-step .dot { justify-self: center; width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; box-shadow: 0 0 0 3px #fffdfa; }
.dc-line { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px 4px 4px; border: 0; border-radius: 12px; background: none; text-align: left; color: inherit; cursor: pointer; }
.dc-line:hover { background: rgba(0,0,0,.035); }
.dc-tile { position: relative; flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 13%, #fff); }
.dc-tile svg { stroke: currentColor; }
.dc-tile i { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fffdfa; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; }
.dc-tile i.done { background: #1f8f4e; }
.dc-tile i.todo { background: #e0a43a; }
.dc-line .name { min-width: 0; font-size: 15.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-line .name small { display: block; margin-top: 2px; font-size: 13px; color: var(--dc-gray); }
.dc-line .name em { font-style: normal; font-weight: 600; }
.dc-line .name em.ok { color: #1f8f4e; }
.dc-line .name em.todo { color: #8a5a00; }
.dc-step.info { min-height: 30px; }
.dc-step.info .t { font-size: 13.5px; font-weight: 500; color: var(--dc-gray); }
.dc-step.info .dot { width: 5px; height: 5px; background: #c8c3bb; }
.dc-step.info .txt { padding-left: 4px; font-size: 14px; color: var(--dc-gray); }
.dc-step.info b { color: var(--dc-ink); font-weight: 600; }
.dc-step.more { min-height: 26px; }
.dc-step.more .dot { opacity: 0; }
.dc-step.more .txt { padding-left: 4px; font-size: 14px; color: #1556d6; }
.dc-step.sel .dc-line { background: rgba(0,0,0,.04); }
.dc-detail { grid-column: 3; margin: 2px 0 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--dc-line); font-size: 14px; }
.dc-detail p { margin: 0 0 6px; }
.dc-detail .muted { color: var(--dc-gray); }
.dc-detail .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.dc-leg { margin: 4px 0 8px; }
.dc-free { margin: 4px 0 0; color: var(--dc-gray); font-size: 15px; }
.dc-other { margin: 14px 0 0 76px; }
.dc-other small { display: block; margin-bottom: 4px; font-size: 13px; color: var(--dc-gray); }
.dc-other ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.7; }
.dc-other li span { color: var(--dc-gray); }
.dc-add { align-self: flex-start; margin: 12px 0 0 76px; height: 32px; padding: 0 12px; border: 1.5px dashed #d5cfc5; border-radius: 10px; background: #fff; color: var(--dc-gray); font-size: 13.5px; }
.dc-add:hover { border-color: var(--dc-ink); color: var(--dc-ink); }

/* 0.34.8: one switch for the view, no day opens or closes. Liste | Kartlar on the left, the days on the right;
   the bar stays at the top, in Kartlar each day's header stays under it. */
.dc-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; margin: 0 -8px 14px; padding: 8px; background: rgba(248, 247, 244, .94); backdrop-filter: blur(8px); }
.dc-seg { flex: none; display: inline-flex; padding: 3px; border-radius: 11px; background: #ece9e3; }
.dc-seg button { border: 0; background: transparent; height: 30px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--dc-gray); cursor: pointer; }
.dc-seg button.on { background: #fff; color: var(--dc-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dc-strip { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dc-strip::-webkit-scrollbar { display: none; }
.dc-strip button { flex: none; min-width: 34px; height: 30px; padding: 0 9px; border: 1px solid #e3ded5; border-radius: 9px; background: #fff; font-size: 13px; font-weight: 600; color: #3a3a3c; font-variant-numeric: tabular-nums; cursor: pointer; }
.dc-strip button:hover { border-color: var(--dc-ink); color: var(--dc-ink); }
.dc-strip button.today { background: #1556d6; border-color: #1556d6; color: #fff; }
.dc-cday { scroll-margin-top: 60px; }
/* 0.35.4 Liste (Emre's reference): a card per day — the photo on the left with "1. gün" on it, the title, the
   hours one line each (time · the icon in its colour on a soft square · its title), all the same weight; a faint
   drawing behind on the right; opened, "+ Bu güne ekle". */
.dl { display: flex; flex-direction: column; gap: 16px; }
.dc-cday.dl-day { position: relative; display: grid; grid-template-columns: minmax(200px, 38%) minmax(0, 1fr); margin: 0; padding: 0; border-radius: 22px; overflow: hidden; background: #fffdfa; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 4px 18px rgba(0,0,0,.04); scroll-margin-top: 60px; }
.dc-cday.dl-day.today { box-shadow: 0 0 0 2px #1556d6, 0 4px 18px rgba(0,0,0,.05); }
.dl-photo { position: relative; min-height: 220px; background: linear-gradient(135deg, #cfe2e8, #efe3c8); }
.dl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-photo .dc-pill { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--dc-ink); font-size: 15px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.dl-body { position: relative; min-width: 0; padding: 20px 22px 18px; }
.dl-motif { position: absolute; right: 8px; bottom: 6px; width: 62%; max-width: 300px; height: auto; color: var(--m); opacity: .16; pointer-events: none; }
.dl-head { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dl-htext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dl-head .ttl { font-size: 23px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.dc .dl-tag { margin-left: 6px; font-style: normal; font-weight: 500; font-size: .72em; letter-spacing: 0; color: var(--dc-gray); white-space: nowrap; }
.dl-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dc-gray); }
.dl-date .today { color: #1556d6; font-weight: 600; }
.dl-date > span:not(.dc-left):not(.dc-ideas-n) + span:not(.dc-left):not(.dc-ideas-n)::before { content: "·"; margin-right: 8px; }
.dl-chev { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--dc-ink); cursor: pointer; }
.dl-chev:hover { background: rgba(0,0,0,.05); }
.dl-chev svg { transition: transform .15s; }
.dl-day.open .dl-chev svg { transform: rotate(180deg); }
/* Satır standardı v2 (docs/mockups/2026-10-06-gun-akisi-standart-v2.html): time · icon · NE · HANGİSİ over a grey
   line, every kind the same size and weight; no dot, no dotted line. A layover is the one quiet line. */
.dc-cday.dl-day .dc-tl { position: relative; }
.dc-cday.dl-day .dc-tl::before { display: none; }
.dc-cday.dl-day .dc-step { grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; min-height: 56px; }
.dc-cday.dl-day .dc-step .t { font-size: 16.5px; font-weight: 600; color: var(--dc-ink); }
.dc-cday.dl-day .dc-step .t.est { color: var(--dc-gray); font-weight: 500; }
.dc-cday.dl-day .dc-tile { width: 40px; height: 40px; border-radius: 12px; }
.dc-cday.dl-day .dc-line { width: 100%; gap: 14px; }
.dc-cday.dl-day .dc-step .dc-line .name { flex: 1; font-size: 16.5px; line-height: 1.3; color: var(--dc-ink); }
.dc-line .name .dc-ttl { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-line .name .dc-what { font-weight: 700; }
.dc-line .name .dc-sep { margin: 0 2px; font-style: normal; color: #c7c4d6; }
.dc-line .name .dc-which { font-weight: 450; color: #3a3850; }
.dc-cday.dl-day .dc-step .dc-line .name small { display: block; margin: 1px 0 0; font-size: 13.5px; color: var(--dc-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-cday.dl-day .dc-step.quiet .t { color: var(--dc-gray); font-weight: 500; }
.dc-cday.dl-day .dc-step.quiet .dc-line { cursor: default; }
.dc-cday.dl-day .dc-step.quiet .dc-line:hover { background: none; }
.dc-cday.dl-day .dc-step.quiet .dc-tile { background: none; color: #8e8e93; }
.dc-cday.dl-day .dc-step.quiet .dc-line .name { font-size: 15px; }
.dc-cday.dl-day .dc-step.quiet .dc-what, .dc-cday.dl-day .dc-step.quiet .dc-which { font-weight: 500; color: var(--dc-gray); }
.dl-day .dc-free { position: relative; margin: 4px 0 0; font-size: 15px; color: var(--dc-gray); }
.dc-cday.dl-day .dc-tl > li.drop-before::after, .dc-cday.dl-day .dc-tl > li.drop-after::after { left: 66px; }
/* 0.35.6 a line without a time moves: its grip on the left (on hover; always on touch), a line where it drops */
.dc-tl > li { position: relative; }
.dc-grip { position: absolute; left: -20px; top: 50%; z-index: 2; width: 18px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 6px; background: none; color: #aeaeb2; display: grid; place-items: center; cursor: grab; opacity: 0; transition: opacity .12s; }
.dc-full > .dc-grip { top: 26px; }
.dc-tl > li:hover > .dc-grip, .dc-grip:focus, .dc-grip:focus-visible { opacity: 1; }
.dc-grip:hover { color: var(--dc-ink); background: rgba(0,0,0,.05); }
.dc-grip:active { cursor: grabbing; }
@media (hover: none) { .dc-grip { opacity: .6; } }
.dc-tl > li.dragging { opacity: .4; }
.dc-tl > li.drop-before::after, .dc-tl > li.drop-after::after { content: ""; position: absolute; left: 60px; right: 0; height: 2px; border-radius: 2px; background: #1556d6; pointer-events: none; }
.dc-tl > li.drop-before::after { top: -1px; }
.dc-tl > li.drop-after::after { bottom: -1px; }
.dl-day > .dl-body > .dc-add { position: relative; margin: 12px 0 0 70px; }
@container panel (max-width: 620px) {
  .dc-cday.dl-day { grid-template-columns: minmax(0, 1fr); }
  .dl-photo { min-height: 150px; }
  .dl-body { padding: 16px 14px 14px; }
  .dl-head .ttl { font-size: 20px; }
  .dc-cday.dl-day .dc-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 4px; }
  .dc-cday.dl-day .dc-step .t { font-size: 14.5px; }
  .dc-cday.dl-day .dc-step .dc-line .name { font-size: 15.5px; }
  .dc-cday.dl-day .dc-tl > li.drop-before::after, .dc-cday.dl-day .dc-tl > li.drop-after::after { left: 52px; }
  .dl-day > .dl-body > .dc-add { margin-left: 56px; }
  .dl-motif { width: 70%; }
}
.dc-tl > li { scroll-margin-top: 120px; }

/* Kartlar: the Plan, day by day; each day's header stays at the top while its cards scroll past. */
.dc-cday { margin-bottom: 18px; }
.dc-dhead { position: sticky; top: 52px; z-index: 4; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: rgba(255, 253, 250, .97); box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.04); backdrop-filter: blur(8px); }
.dc-thumb { flex: none; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #cfe2e8, #efe3c8); }
.dc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dc-dmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--dc-gray); font-variant-numeric: tabular-nums; }
.dc-dmeta > span::before { content: "·"; margin-right: 8px; color: #c7c2b9; }
.dc-dmeta .today { color: #1556d6; font-weight: 600; }
.dc-pill { padding: 2px 9px; border-radius: 8px; background: #ece6fb; color: #3c2a8a; font-size: 13px; font-weight: 700; }
.dc-dhead .ttl { font-size: 16px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Kartlar as the trip goes (after Layla): a rail on the left, a round icon per stretch (✈ a day that travels,
   📍 a city's days) with its label and dates; the stretch's days on the right. */
.dc-grp { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; padding-bottom: 10px; }
.dc-grp::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; border-left: 2px solid #e4dfd6; }
.dc-grp:first-of-type::before { top: 22px; }
.dc-rail { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-top: 8px; }
.dc-railic { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #2b2230; color: #fff; box-shadow: 0 0 0 5px #f8f7f4; }
.dc-railic svg { stroke: currentColor; }
.dc-raillab { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; min-width: 0; }
.dc-raillab b { font-size: 15px; }
.dc-raillab small { font-size: 13px; color: var(--dc-gray); }
.dc-grp-body { min-width: 0; padding-top: 4px; }
.dc-city { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.dc-city h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.dc-city span { font-size: 14px; color: var(--dc-gray); }
/* Each day its own panel: the header on top (held under the bar while the day scrolls past), its lines below. */
.dc-cday { margin-bottom: 12px; padding: 6px 12px 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.03); }
.dc-cday .dc-dhead { margin: 0 -6px 6px; box-shadow: none; border-bottom: 1px solid #efece6; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, .97); }
.dc-cday > .dc-add { margin: 8px 0 0 76px; }
.dc-strip-item { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dc-strip-item small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--dc-gray); }
.dc-cday > .dc-free { margin-left: 76px; }
.dc-flash { animation: dc-flash 1.6s ease-out; border-radius: 16px; }
@keyframes dc-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(21, 86, 214, .45); } 100% { box-shadow: 0 0 0 3px rgba(21, 86, 214, 0); } }
.dc-tl.full::before { left: 60px; top: 22px; bottom: 22px; }
.dc-full { position: relative; display: grid; grid-template-columns: 50px 20px minmax(0, 1fr); column-gap: 6px; align-items: start; margin-bottom: 4px; }
.dc-full > .t { padding-top: 16px; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-full > .dot { justify-self: center; margin-top: 22px; width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; box-shadow: 0 0 0 3px #fffdfa; }
.dc-slot { min-width: 0; }
.dc-slot > * { margin-bottom: 6px; }
.dc-tl.full .dc-step.info { margin: 2px 0 8px; }
.dc-step.idea .name { color: #3a3a3c; }
.dc-step.idea .name small { display: inline; color: var(--dc-gray); }

@container panel (max-width: 720px) {
  .dc-grp { grid-template-columns: 1fr; }
  .dc-grp::before { display: none; }
  .dc-rail { padding: 0 0 8px; }
  .dc-day { grid-template-columns: 1fr; grid-template-rows: 130px auto; }
  .dc-body { padding: 14px 14px 14px 10px; }
  .dc-other, .dc-add { margin-left: 0; }
}
}

/* ---------- 0.34.6: Hazırlık — the chores before the trip, a quiet tick list at the end of Diğer ---------- */
.prep-sub { margin: -6px 0 12px; font-size: 13px; color: #8e8e93; }
.prep { margin: 14px 0 0; }
.cat-line + .prep { margin-top: 18px; padding-top: 12px; border-top: 1px solid #f0ede8; }

/* ---------- 0.34.6: Belgeler — the trip's files on one white sheet, grouped, in the calm 0.34.4 look ---------- */
.doc-tab .section-head { border-bottom: 0; }

/* Times in Günlük akış (0.35.1, dayTimes.ts): worked out "~" in grey (why on hover), fixed or the traveller's
   own in ink; a tap sets one's own (the rest of the day follows), "×" gives it back. A time that doesn't leave
   room is said in red under its line. */
.dc-tl button.t { justify-self: end; padding: 2px 5px; border: 0; border-radius: 7px; background: none; font: inherit; font-weight: 600; color: var(--dc-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.dc-tl button.t:hover { background: rgba(0,0,0,.05); }
/* No time: a blank cell, still there to tap (a time given). */
.dc-tl button.t:empty { min-width: 44px; min-height: 26px; }
.dc-tl button.t.est { color: var(--dc-gray); font-weight: 500; }
.dc-tl button.t.own { text-decoration: underline dotted #b9b2a6; text-underline-offset: 3px; }
.dc-step.info button.t { font-size: 13.5px; }
.dc-tl .t.edit { display: inline-flex; align-items: center; gap: 2px; justify-self: end; }
.dc-tl .t.edit input { width: 86px; height: 28px; padding: 0 4px; border: 1px solid #d2cdc4; border-radius: 7px; font: inherit; font-size: 13.5px; }
.dc-tl .t-reset { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f1efe9; color: var(--dc-gray); cursor: pointer; }
.dc-warn { grid-column: 3; margin: -2px 0 6px; font-size: 13px; color: #b42318; font-weight: 500; }
.dc-slot > .dc-warn { margin: 6px 0 6px; }
.dc-full > button.t, .dc-full > .t.edit { margin-top: 12px; align-self: start; }

/* Paylaşım güvenliği (0.37, paylasim-guvenligi-v1): the other traveller's change above the tabs (Geri al ·
   Tamam), the shared trip's delete dialog, Geçmiş ve çöp kutusu. Own prefix hs-. */
.hs-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #c06c84; color: #fff; font-size: 13px; font-weight: 700; }
.hs-av.me { background: var(--hx-accent); }
.hs-av img { width: 100%; height: 100%; object-fit: cover; }
.hs-btn { flex: none; height: 30px; padding: 0 12px; border: 1px solid #ddd8d0; border-radius: 999px; background: #fff; font: inherit; font-size: var(--q-fs-info); font-weight: 500; color: var(--hx-ink); cursor: pointer; white-space: nowrap; }
.hs-btn:hover { border-color: #b9b2a6; }
.hs-btn.dark { background: var(--hx-ink); border-color: var(--hx-ink); color: #fff; }
.hs-btn.dark:hover { background: #000; }
.hs-btn.red { background: var(--q-bad); border-color: var(--q-bad); color: #fff; }
.hs-btn.red:hover { background: #a93226; }
.hs-btn.lg { height: 36px; padding: 0 14px; border-radius: 10px; font-size: var(--q-fs-button); }
.hs-btn:disabled { opacity: .55; cursor: default; }
.hs-part s, .hs-t s { color: #6e6e73; }

.hs-notices { display: grid; gap: 10px; margin: 14px 0 4px; }
.hs-notice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff8ec; border: 1px solid #f3e2bf; color: var(--hx-ink); }
.hs-notice p { flex: 1; min-width: 0; margin: 0; font-size: var(--q-fs-info); line-height: 1.45; }
.hs-notice p small { display: block; color: var(--q-mut); font-size: var(--q-fs-small); }
@container panel (max-width: 560px) {
  .hs-notice { flex-wrap: wrap; }
  .hs-notice p { flex-basis: calc(100% - 44px); }
  .hs-notice .hs-btn:first-of-type { margin-left: 44px; }
}

.hs-dlg { width: min(520px, calc(100vw - 32px)); padding: 22px; border-radius: 22px; background: #fff; color: var(--hx-ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(0,0,0,.2); }
.hs-dlg h3 { margin: 0 0 8px; font-size: 18px; }
.hs-dlg p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: #3a3850; }
.hs-dlg ul { margin: 6px 0 14px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #3a3850; }
.hs-who { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--hx-muted); }
.hs-avs { display: inline-flex; }
.hs-avs .hs-av + .hs-av { margin-left: -10px; border: 2px solid #fff; }
.hs-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

.hs-hist { display: flex; flex-direction: column; width: min(860px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 20px 22px 12px; border-radius: 22px; background: #fff; color: var(--hx-ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(0,0,0,.2); }
.hs-hist-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hs-hist-h > b { font-size: 18px; margin-right: auto; }
.hs-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #f3f1ed; }
.hs-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; color: #6e6e73; cursor: pointer; }
.hs-seg button.on { background: #fff; color: var(--hx-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.hs-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f1ed; color: #6e6e73; font-size: 18px; line-height: 1; cursor: pointer; }
.hs-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.hs-day { margin: 14px 0 4px; font-size: 12px; font-weight: 600; color: var(--hx-muted); text-transform: uppercase; letter-spacing: .04em; }
.hs-ev { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f1ed; }
.hs-body section .hs-ev:last-child { border-bottom: 0; }
.hs-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.hs-t small { display: block; color: #6e6e73; font-size: 12.5px; }
.hs-ev.undone .hs-t { color: #6e6e73; }
.hs-ev.undone .hs-av { opacity: .6; }
.hs-tag { flex: none; font-size: 12px; color: #6e6e73; padding: 3px 8px; border-radius: 999px; background: #f3f1ed; white-space: nowrap; }
.hs-empty { margin: 24px 0; color: #6e6e73; font-size: 14px; text-align: center; }
.hs-note { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #fff8ec; font-size: 13px; }
.hs-foot { margin: 10px 0 4px; font-size: 12.5px; color: #6e6e73; }
.hs-foot-row { display: flex; align-items: center; gap: 12px; }
.hs-foot-row .hs-foot { flex: 1; }
.hs-acts { flex: none; display: inline-flex; gap: 6px; align-items: center; }
.hs-btn.quiet { border-color: transparent; background: none; color: #6e6e73; }
.hs-btn.quiet:hover { color: #c0392b; border-color: #f0d6d2; }
.hs-btn.danger { color: #c0392b; border-color: #f0d6d2; }
.hs-note.err, .hs-warn { color: var(--q-bad); }
.hs-notice p small.hs-warn { color: var(--q-bad); }
.toast.hs-toast { bottom: 84px; }
@media (max-width: 560px) {
  .hs-hist { padding: 16px 14px 10px; }
  .hs-ev { flex-wrap: wrap; }
  .hs-t { flex-basis: calc(100% - 44px); }
  .hs-ev > .hs-acts, .hs-ev > .hs-tag { margin-left: 44px; }
}

/* ---------- arrivals (ar-, src/app/arrive/*): content coming in, made visible, calmly ----------
   A waiting card at the top of the section a link will most likely land in (or under the Plan's header),
   its site's icon, a line that moves with the reading and one soft shimmer; the new card fades and slides
   in 8px, then a ring in its section's colour fades over 1.5 s; the header's count pops once. 150–400 ms,
   ease-out, no bounce; nothing moves under prefers-reduced-motion. */
.ar-lead { margin: 0 0 12px; }
.ar-lead .ar-pending { background: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.04); }
.ar-pending {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid #ece9e3; background: #fbfaf8; animation: ar-fade .24s ease-out both;
}
.ar-fav { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid #ece9e3; color: #8e8e93; overflow: hidden; }
.ar-fav.ar-has-thumb { width: 44px; border-radius: 8px; }
.ar-favimg { width: 18px; height: 18px; display: block; }
.ar-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; color: #1d1d1f; }
.ar-top b { flex: none; max-width: 60%; font-weight: 600; overflow-wrap: anywhere; }
.ar-sub { min-width: 0; font-size: 13px; color: #8e8e93; overflow-wrap: anywhere; }
.ar-stage { font-size: 13px; color: #6e6e73; }
.ar-bar { position: relative; display: block; height: 3px; margin-top: 5px; border-radius: 999px; background: #efece7; overflow: hidden; }
.ar-bar i {
  position: absolute; inset: 0; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c, #5b45e0) 45%, transparent), transparent);
  animation: ar-shimmer 1.6s ease-in-out infinite;
}
.ar-failed { background: #fff8f6; border-color: #f3dcd6; }
.ar-stale .ar-stage { color: #8e8e93; }
.ar-err { color: var(--danger); font-weight: 500; }
.ar-why { margin-left: 6px; color: #8e8e93; }
.ar-why::before { content: "· "; }
.ar-actions { flex: none; display: flex; gap: 6px; }
.ar-btn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #d9d5ce; background: #fff; font-size: 13px; font-weight: 500; color: #1d1d1f; }
.ar-btn:hover { border-color: #a7a29a; }
.ar-btn.quiet { border-color: transparent; background: none; color: #8e8e93; }
.ar-btn.quiet:hover { color: var(--danger); }
@container panel (max-width: 520px) {
  .ar-pending { flex-wrap: wrap; }
  .ar-actions { width: 100%; padding-left: 48px; }
}

/* T1 "Kota dolunca" (arrive/QuotaLine.tsx, docs/arastirma/2026-10-20-ux-duzeltme-plani.html): another model answering because
   the free Gemini quota is used up, said in one warm line where saves land ("Model değişti · … · Kota yarın 10:00'da yenilenir");
   red when nothing goes on (no Claude key). Nothing else moves; × or the reset takes it away. */
.qt-slot { margin: 8px 4px; }
/* On the home: in the column of its errors and trips (.st-home > .errors). */
.st-home > .qt-slot { max-width: 1180px; margin: 8px auto; padding: 0 32px; }
@media (max-width: 620px) { .st-home > .qt-slot { padding: 0 16px; } }
.qt-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid #f6dfb4; background: #fff7ea; color: var(--q-ink); font-size: 14px; line-height: 1.35; animation: ar-fade .24s ease-out both;
}
.qt-slot .qt-line { margin: 0; }
.qt-pill { flex: none; padding: 2px 8px; border-radius: 999px; background: #fdf1dc; color: #9a5b00; font-size: 12px; font-weight: 700; }
.qt-text { min-width: 0; overflow-wrap: anywhere; }
.qt-sp { flex: 1; }
.qt-reset { color: var(--q-mut); font-size: 13px; }
.qt-key { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #ecc9c2; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--q-bad); cursor: pointer; }
.qt-key:hover { border-color: var(--q-bad); }
.qt-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -6px -8px -6px -4px; padding: 0; border: 0; border-radius: 8px; background: none; color: #8e8e93; cursor: pointer; }
.qt-x:hover { color: var(--q-ink); background: rgba(0, 0, 0, .05); }
.qt-bad { border-color: #f3dcd6; background: #fff8f6; }
.qt-bad .qt-pill { background: #fbe4e1; color: var(--q-bad); }
:root[data-theme="dark"] .qt-line { border-color: #5a4a2a; background: #2a2418; }
:root[data-theme="dark"] .qt-pill { background: #3d311a; color: var(--q-warn); }
:root[data-theme="dark"] .qt-bad { border-color: #5b2d2e; background: #2f1b1d; }
:root[data-theme="dark"] .qt-bad .qt-pill { background: #4a2326; color: var(--q-bad); }
:root[data-theme="dark"] .qt-key { border-color: #5b2d2e; background: transparent; }
:root[data-theme="dark"] .qt-x:hover { background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { .qt-line { animation: none; } }

/* Pano v30 (rows by need, "Senin için", nothing wraps, the price always shown). These come before the Pano's older rules in the file, so they carry `.pn ` to win. */
.pn .pn-head { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pn .pn-head h2, .pn .pn-n, .pn .pn-addlink, .pn .pn-back { white-space: nowrap; flex: none; }
.pn .pn-search { flex: 1 1 140px; min-width: 0; max-width: 300px; }
.pn .pn-search input { width: 100%; min-width: 0; }
.pn .pn-addlink { flex: none; }
.pn .pn-sp { min-width: 0; }
.pn .pn-cats button, .pn .pn-seg button, .pn .pn-sort, .pn .pn-cmp, .pn .pn-gp, .pn .pn-gw, .pn .pn-gn { white-space: nowrap; }
.pn .pn-gh { flex-wrap: wrap; min-width: 0; }
.pn .pn-gh > b { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn .pn-gh > .pn-gn, .pn .pn-gh > .pn-gw, .pn .pn-gh > .pn-cmp { flex: none; }
.pn .pn-gh > .pn-sp { flex: 1 1 0; }
.pn .pn-gp { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.pn .pn-gpt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn .pn-gpl { flex: none; }
.pn .pn-cmp { border: 1px solid var(--v-line2); border-radius: 999px; padding: 5px 12px; background: #fff; color: var(--v-accent-ink); }
.pn .pn-cmp:hover, .pn .pn-cmp[aria-pressed="true"] { background: var(--v-lav); }
.pn .pn-foryou { display: grid; gap: 2px; margin: 0 0 12px; padding: 11px 14px; border-radius: 14px; background: var(--v-lav); font-size: 14px; line-height: 1.4; color: var(--v-ink); }
.pn .pn-foryou b { font-weight: 700; overflow-wrap: anywhere; }
.pn .pn-sep { display: block; height: 0; margin: 8px 4px 6px; border-top: 1px solid var(--v-line2); }
.pn .pn-ci { display: inline-flex; flex: none; }
.pn .pn-ci.liked { color: #e11d5b; }
.pn .pn-ci svg { display: block; }
.pn-body .pn-cats > button[data-cat="liked"] { margin-top: 0; border-top: 0; border-radius: 12px; }
.pn-body .pn-cats button { display: flex; align-items: center; gap: 10px; }
.pn-body .pn-cats button .pn-cl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* a price is never cut: the amount on one line, what it is for ("2 people total") under it */
.pn .pn-price { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; line-height: 1.2; white-space: normal; overflow: visible; font-size: 12px; }
.pn .pn-price b { display: block; font-size: 16.5px; white-space: nowrap; }
.pn .pn-price .pn-pl { display: block; overflow-wrap: anywhere; }
.pn .pn-act { align-items: center; }
/* a narrow Plan column (the chat beside it): the menu goes on top, the header sheds words */
@container panel (max-width: 800px) {
  .pn .pn-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pn .pn-body .pn-cats { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  .pn .pn-body .pn-cats button { width: auto; flex: none; white-space: nowrap; }
  .pn .pn-sep { width: 1px; height: auto; align-self: stretch; margin: 4px 4px; border-top: 0; border-left: 1px solid var(--v-line2); flex: none; }
  .pn .pn-head h2 { font-size: 26px; }
}
@container panel (max-width: 460px) {
  .pn .pn-addlbl { display: none; }
  .pn .pn-addlink { padding: 7px 10px; }
  .pn .pn-gp .pn-gpl { display: none; }
  .pn .pn-gh { gap: 6px 8px; }
}
/* the card that just came, and its section's count */
.ar-new { animation: mv-swap-in var(--t-slow) var(--e-out) both, ar-ring 1.5s ease-out var(--t-slow) both; }
.ar-pop { animation: ar-pop .36s ease-out; transform-origin: right center; }
@keyframes ar-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ar-ring {
  from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #5b45e0) 38%, transparent); }
  to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #5b45e0) 0%, transparent); }
}
@keyframes ar-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes ar-shimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes ar-spin { to { transform: rotate(360deg); } }

/* "Konaklama'ya eklendi: Casa Azul · Göster" */
.ar-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 55; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px;
  max-width: min(640px, 92vw); padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--q-ink); color: #fff; font-size: var(--q-fs-button);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2); animation: ar-toast .22s ease-out both;
}
.ar-toast > span { min-width: 0; overflow-wrap: anywhere; }
.ar-toast button { flex: none; padding: 4px 6px; border: 0; background: none; font: inherit; font-weight: 600; color: color-mix(in srgb, var(--q-acc) 42%, #fff); cursor: pointer; }
.ar-toast .ar-toast-x { display: grid; place-items: center; padding: 4px; color: #8e8e93; }
@keyframes ar-toast { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* the drop overlay over the board or the chat */
.ar-drop { position: fixed; z-index: 70; padding: 12px; pointer-events: none; animation: ar-fade-plain .18s ease-out both; }
.ar-drop-frame {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
  border: 2px dashed #b9b2f0; border-radius: 22px; background: rgba(248, 247, 255, .95); color: var(--hx-ink);
}
.ar-drop-frame b { font-size: 17px; font-weight: 600; }
.ar-drop-frame > span:last-child { font-size: 13.5px; color: var(--hx-muted); }
.ar-drop-icons { display: flex; gap: 10px; color: var(--hx-accent); opacity: .8; }
@keyframes ar-fade-plain { from { opacity: 0; } to { opacity: 1; } }

/* the chat: a link or a file handed over, its chip under it; an event line that goes to its card */
.ar-sent { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 85%; }
.ar-sent > .msg-user { max-width: 100%; }
.ar-sent-link { overflow-wrap: anywhere; color: #3a3a3c; }
.ar-sent-thumb { display: block; max-width: 160px; max-height: 110px; margin-bottom: 6px; border-radius: 10px; }
.ar-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; padding: 5px 10px; border-radius: 12px;
  background: #f6f5f2; font-size: 12.5px; color: #6e6e73; animation: ar-fade .2s ease-out both;
}
.ar-chip-site { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; color: #3a3a3c; }
.ar-chip-site > span { overflow-wrap: anywhere; }
.ar-chip .ar-favimg { width: 14px; height: 14px; }
.ar-chip.ar-done .ar-chip-text { color: var(--success); }
.ar-chip.ar-error { background: #fff3f0; }
.ar-chip.ar-error .ar-chip-text { color: var(--danger); }
.ar-chip-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--accent); cursor: pointer; }
.ar-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #d2d2d7; border-top-color: #6e6e73; animation: ar-spin .9s linear infinite; }
/* a capture that went to the trip of its place (Aç · Geri al), or the question about one (placeCheck.ts) */
.msg-route { align-self: stretch; padding: 10px 12px; border-radius: 12px; background: #f6f5f2; font-size: 13.5px; line-height: 1.45; color: #3a3a3c; }
.msg-route.ask { background: #fff6e5; color: #5c3a00; }
.msg-route-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.msg-route-actions .btn-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--accent); cursor: pointer; }
.msg-route-actions .small-btn { background: #fff; border: 1px solid var(--line); }
.msg-route-actions .muted { font-size: 12.5px; }
.msg-route-strays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.msg-route-strays li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.msg-route-name { flex-basis: 100%; font-weight: 500; overflow-wrap: anywhere; }
button.ar-ev { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.ar-ev:hover { color: #1d1d1f; text-decoration: underline dotted; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ar-pending, .ar-new, .ar-pop, .ar-toast, .ar-drop, .ar-chip, .ar-bar i, .ar-spin { animation: none; }
  .ar-new { outline: 2px solid color-mix(in srgb, var(--c, #5b45e0) 45%, transparent); outline-offset: 2px; }
  .ar-bar i { width: 100%; opacity: .5; }
}

/* ---------- start a trip by chat (spec 2026-10-06 §2, Layla-style): st- ---------- */
/* Home (2026-10-09, Emre: "ortada kocaman AI başlangıç"): the lavender page with its soft shapes, the big question and
   one big box in the middle, the start chips under it; the top bar holds the currency, the language and the profile
   photo (its menu: the profile, the settings, the trash…); the trips below as v11 cards, Yaklaşan · Geçmiş. */
/* --hm-display (ana-sayfa-v1): the headings' face, a plain clean sans (bundled, the @font-face at the top of this file). */
.hm { --hm-ink: var(--q-ink); --hm-muted: var(--q-mut); --hm-line: var(--q-line); --hm-lav: var(--q-acc-s); --hm-accent: var(--q-acc); --hm-dash: var(--q-st-wait-line);
  --hm-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --hm-book-bar: var(--q-ok); --hm-plan: var(--q-warn); --hm-ease: cubic-bezier(.16, 1, .3, 1);
  --hm-shadow: 0 1px 2px rgba(28, 26, 51, .05), 0 16px 40px -22px rgba(28, 26, 51, .28);
  --hm-shadow-up: 0 1px 2px rgba(28, 26, 51, .06), 0 24px 48px -24px rgba(28, 26, 51, .38); }
.st-home { position: relative; isolation: isolate; overflow: hidden; max-width: none; min-height: 100vh; padding: 0 0 80px; color: var(--hm-ink);
  background: radial-gradient(1200px 520px at 50% -80px, #f6f2ff 0%, rgba(246, 242, 255, 0) 70%), linear-gradient(180deg, #ebe4ff 0, #e1d6ff 460px, #ebe5ff 780px, #f5f2ff 1100px, #fbfaff 100%); }
.st-home ::selection { background: #d9d1ff; color: var(--hm-ink); }
.st-home > .errors, .st-home > .trips-empty, .hm-trips { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
.st-home > .trips-empty { max-width: 560px; margin-top: 40px; background: rgba(255, 255, 255, .8); border-radius: 22px; padding: 26px 30px; box-shadow: var(--hm-shadow); }

.hm-bar { display: flex; align-items: center; gap: 10px; padding: 18px 32px; }
.hm-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--hm-accent); }
.st-brand { font-weight: 780; font-size: var(--q-fs-intent); letter-spacing: -.02em; color: var(--hm-ink); }
.hm-bar-sp { flex: 1; }
.hm-prefs { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(28, 26, 51, .06); backdrop-filter: blur(8px); }
.hm-pick { position: relative; }
.hm-pick-btn { min-width: 40px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--hm-ink); font-size: var(--q-fs-button); font-weight: 700; letter-spacing: .02em; transition: background .2s; }
.hm-pick-btn:hover, .hm-pick-btn.on { background: #fff; }
.hm-prof { position: relative; margin-left: 6px; }
.hm-prof-btn { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; }
.hm-prof-btn .hm-face { box-shadow: 0 0 0 2.5px #fff, 0 6px 16px -6px rgba(60, 40, 140, .45); transition: transform .25s var(--hm-ease); }
.hm-prof-btn:hover .hm-face, .hm-prof-btn.on .hm-face { transform: scale(1.05); }
.hm-prof-chev { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--hm-ink); box-shadow: 0 1px 4px rgba(28, 26, 51, .25); }
.hm-face { display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 700; letter-spacing: .01em; overflow: hidden; box-shadow: 0 0 0 2px #fff; }
.hm-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(28, 26, 51, .08), 0 24px 60px -18px rgba(28, 26, 51, .38); animation: hm-pop .22s var(--hm-ease) both; transform-origin: top right; }
@keyframes hm-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.hm-pop ul { list-style: none; margin: 0; padding: 6px; }
.hm-pop ul + ul { border-top: 1px solid #efedf5; }
.hm-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--hm-ink); font-size: 15px; text-align: left; transition: background .15s; }
.hm-pop button:hover, .hm-pop button:focus-visible { background: #f4f2fb; outline: 0; }
.hm-pop button svg { color: var(--hm-muted); flex: none; }
.hm-pop-sm { min-width: 150px; }
.hm-pop-sm button { justify-content: space-between; font-weight: 600; }
.hm-pop-sm button.on { color: var(--hm-accent); }
.hm-pop-sm button.on svg { color: var(--hm-accent); }
.hm-pop-menu { width: 300px; }
.hm-pop-me { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid #efedf5; }
.hm-pop-me b { display: block; font-size: 16px; letter-spacing: -.01em; }
.hm-pop-me span { display: block; margin-top: 2px; font-size: 13px; color: var(--hm-muted); }

.st-hero { position: relative; text-align: center; padding: 64px 32px 56px; }
.st-hello { margin: 0 auto 32px; max-width: 980px; font-family: var(--hm-display); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; color: var(--hm-ink); text-wrap: balance; animation: hm-rise .7s var(--hm-ease) both; }
.st-prompt { position: relative; max-width: 780px; margin: 0 auto; text-align: left; background: #fff; border-radius: 30px; padding: 24px 18px 14px 28px; border: 1px solid rgba(91, 69, 224, .08);
  box-shadow: 0 2px 4px rgba(60, 40, 140, .05), 0 30px 70px -30px rgba(91, 69, 224, .5); transition: box-shadow .3s var(--hm-ease), border-color .3s; view-transition-name: start-prompt; animation: hm-rise .7s var(--hm-ease) 80ms both; }
.st-prompt:focus-within, .st-prompt.lit { border-color: rgba(91, 69, 224, .3); box-shadow: 0 0 0 5px rgba(91, 69, 224, .1), 0 30px 70px -28px rgba(91, 69, 224, .6); }
.st-prompt.drag { border-style: dashed; border-color: var(--hm-accent); background: #faf9ff; }
.st-prompt textarea { display: block; width: 100%; min-height: 66px; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 19px; line-height: 1.45; color: var(--hm-ink); caret-color: var(--hm-accent); }
.st-prompt textarea::placeholder { color: #8f8bab; }
.st-prompt-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.st-clip { border: 0; background: none; color: var(--hm-muted); padding: 8px; border-radius: 10px; display: grid; place-items: center; transition: background .15s, color .15s; }
.st-clip:hover { background: var(--hm-lav); color: var(--hm-accent); }
.st-prompt-hint { flex: 1; font-size: var(--q-fs-info); color: #8d89a8; }
.st-go { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; background: var(--hm-accent); color: #fff; font-size: var(--q-fs-button); font-weight: 650; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(91, 69, 224, .7); transition: transform .2s var(--hm-ease), background .2s, box-shadow .2s; }
.st-go:hover { background: #4b36cf; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(91, 69, 224, .75); }
.st-go:active { transform: translateY(0) scale(.98); }
/* An idea chip pressed writes its sentence into the box (TripsHome), which lights while it does, and the go button pulses once. */
.st-go.ready { animation: hm-ready 1.2s var(--hm-ease) 1; }
@keyframes hm-ready { 30% { box-shadow: 0 0 0 7px rgba(91, 69, 224, .18), 0 10px 24px -10px rgba(91, 69, 224, .7); } }
/* Idea chips (ana-sayfa-v1, 2026-10-19): six ideas, each with its small round drawing, a short name and its place, then
   "Sürpriz bir yer" (a die) and "Başka fikirler" (plain, its arrow turns once). Below about 760 px of the home they are one
   row that scrolls sideways, without a scrollbar, edge to edge. As wide as the old start row (980 px): English stays on two rows too. */
.hm-ideas-wrap { container: hm-ideas / inline-size; max-width: 980px; margin: 22px auto 0; }
.hm-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hm-idea { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 4px 16px 4px 4px; background: rgba(255, 255, 255, .8); color: var(--hm-ink); font-size: 14.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(28, 26, 51, .06); transition: background .2s, box-shadow .25s, transform .25s var(--hm-ease); animation: hm-idea-in .5s var(--hm-ease) both; }
.hm-idea:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(91, 69, 224, .35); }
.hm-idea-th { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.hm-idea-th svg { width: 100%; height: 100%; display: block; transition: transform .5s var(--hm-ease); }
.hm-idea:hover .hm-idea-th svg { transform: scale(1.18); }
.hm-idea-ic { display: grid; place-items: center; background: var(--hm-lav); color: var(--hm-accent); }
.hm-idea-ic svg, .hm-idea:hover .hm-idea-ic svg { width: 16px; height: 16px; transform: none; }
.hm-idea small { font-size: 13px; font-weight: 500; color: var(--hm-muted); }
.hm-idea.hm-more { padding: 9px 14px; background: transparent; box-shadow: none; color: var(--hm-muted); }
.hm-idea.hm-more:hover { background: rgba(255, 255, 255, .7); box-shadow: none; }
.hm-more svg { color: var(--hm-accent); transition: transform .5s var(--hm-ease); }
.hm-more.spin svg { transform: rotate(-360deg); }
@keyframes hm-idea-in { from { opacity: 0; transform: translateY(8px); } }
@container hm-ideas (max-width: 700px) {
  .hm-ideas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .hm-ideas::-webkit-scrollbar { display: none; }
  .hm-idea { flex: none; }
}
.st-ask { max-width: 780px; margin: 14px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; text-align: left; background: #fff; border-radius: 18px; padding: 12px 14px 12px 18px; color: var(--hm-ink); font-weight: 600; box-shadow: 0 8px 24px rgba(91, 69, 224, .12); }
.st-ask > span { flex: 1; min-width: 220px; }
.st-join { max-width: 540px; margin: 18px auto 0; text-align: left; background: #fff; border-radius: 18px; padding: 6px 18px 12px; box-shadow: 0 8px 24px rgba(91, 69, 224, .12); }
.hm .home-waiting { max-width: 780px; margin: 0 auto 18px; text-align: left; }

.hm-trips { margin-top: 24px; }
.hm-trips-h { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hm-trips-sub { margin: 0; font-size: var(--q-fs-button); color: var(--hm-muted); }
.hm-seg { display: inline-flex; margin-top: 12px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(28, 26, 51, .06); }
.hm-seg button { border: 0; background: none; border-radius: 999px; padding: 8px 18px; font-size: 14.5px; font-weight: 650; color: var(--hm-muted); transition: background .2s, color .2s; }
.hm-seg button.on { background: var(--hm-ink); color: #fff; }
.st-section { font-family: var(--hm-display); font-size: var(--q-fs-page); letter-spacing: -.025em; font-weight: 800; color: var(--hm-ink); margin: 0; }
.hm-count { font-size: 14px; font-weight: 650; color: var(--hm-muted); background: #fff; border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; }
.hm .trip-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 352px)); justify-content: center; gap: 28px 24px; margin-top: 26px; }
  background: repeating-linear-gradient(135deg, rgba(91, 69, 224, .06) 0 10px, transparent 10px 20px), var(--hm-lav); }

/* Arriving on the home: the question, the box and the chips rise one after another; the cards follow (once; with
   reduced motion nothing moves and the shapes stand still). */
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } }
.hm .trip-grid > * { animation: hm-rise .7s var(--hm-ease) both; }
.hm .trip-grid > :nth-child(2) { animation-delay: 60ms; }
.hm .trip-grid > :nth-child(3) { animation-delay: 120ms; }
.hm .trip-grid > :nth-child(n + 4) { animation-delay: 180ms; }
@media (max-width: 620px) {
  .hm-bar { padding: 14px 16px; }
  .st-hero { padding: 36px 16px 36px; }
  .st-prompt-hint { display: none; }
  .st-home > .errors, .st-home > .trips-empty, .hm-trips { padding-left: 16px; padding-right: 16px; }
  .hm .trip-grid { grid-template-columns: 1fr; }
  .hm-pop-menu { width: min(300px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .st-hello, .st-prompt, .hm-idea, .st-go.ready, .hm .trip-grid > *, .hm-pop { animation: none; }
  .vcard .pic, .st-go, .hm-idea, .hm-idea-th svg, .hm-more svg, .hm-prof-btn .hm-face { transition: none; }
  .hm-idea:hover .hm-idea-th svg { transform: none; }
  .vcard:hover .pic { transform: none; }
  .hm-plane { display: none; }
}
/* "Hareketi duraklat" too: the plane is SVG's own animation (animateMotion), which no CSS rule stops. */
body.still .hm-plane { display: none; }

/* Screen changes (viewTransition.ts): the home's box flows into the chat's first message; the plan side slides in
   from the right a beat later; everything else crossfades. Exits are quicker than entrances. */
::view-transition-old(root) { animation: .22s cubic-bezier(.4, 0, 1, 1) both vt-out; }
::view-transition-new(root) { animation: .42s cubic-bezier(.16, 1, .3, 1) both vt-in; }
::view-transition-group(start-prompt) { animation-duration: .62s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(start-prompt), ::view-transition-new(start-prompt) { animation-duration: .62s; height: 100%; }
::view-transition-new(start-side) { animation: .7s cubic-bezier(.16, 1, .3, 1) 80ms both vt-side; }
::view-transition-old(start-side) { animation: .25s ease-in both vt-out; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: scale(.992); } }
@keyframes vt-side { from { opacity: 0; transform: translateX(56px); } }
.st-side { view-transition-name: start-side; }

/* The interview: the chat on the left, the checklist on lavender on the right. */
.st-screen { display: grid; grid-template-columns: clamp(360px, 40%, 600px) 1fr; height: 100vh; background: #fff; }
.st-chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.st-top { padding: 18px 28px 6px; }
.st-top-title { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--hx-ink); margin-top: 10px; }
.st-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 12px 28px 20px; }
.st-msg-user { align-self: flex-end; max-width: 82%; background: var(--hx-lav); color: var(--hx-ink); border-radius: 18px; padding: 10px 16px; font-size: 15.5px; white-space: pre-wrap; }
.st-msg-bot { font-size: 16.5px; line-height: 1.55; color: var(--hx-ink); white-space: pre-wrap; }
/* Rev 3: what was understood, then the question on its own line in bold. */
.st-msg-bot .st-q { display: inline-block; margin-top: 2px; font-weight: 700; }
.st-msg-bot .st-ack { color: #3d3863; }
/* A row filling in (the moment a message is sent): its check pops in. */
.st-row.done .st-check { animation: st-tick .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.st-row.done .st-row-value { animation: st-in .35s ease-out both; }
.st-answers { display: flex; flex-direction: column; gap: 8px; margin-top: -4px; }
.st-hint { font-size: 13px; color: var(--hx-muted); }
.st-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dcd6f5; background: #fff; color: var(--hx-ink); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.st-chip:hover { border-color: var(--hx-accent); }
.st-chip.on, .st-chip.first { border-color: var(--hx-accent); color: var(--hx-accent); background: #f4f1ff; font-weight: 600; }
.st-chip.st-style.on { font-weight: 650; }
.st-primary { border: 0; border-radius: 999px; padding: 8px 18px; background: var(--hx-accent); color: #fff; font-size: 14px; font-weight: 650; }
.st-primary:hover { background: #4b36cf; }
.st-skip { border: 0; background: none; padding: 7px 8px; color: var(--hx-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.st-date { border: 1px solid var(--hx-accent); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; color: var(--hx-ink); }
/* What the chat is doing while waiting (revision 2, item 6): three pulsing dots and the stage in words. */
.st-status { padding: 0 28px; min-height: 0; }
.st-status:not(:empty) { padding-bottom: 10px; }
@media (max-width: 860px) { .st-status { padding: 0 16px; } }
.st-thinking { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; padding: 7px 13px 7px 11px; border-radius: 999px; background: #f4f1ff; color: #5d5885; font-size: 13.5px; animation: st-in .25s ease-out both; }
.st-dots { display: inline-flex; gap: 4px; }
.st-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-accent); animation: st-dot 1.1s ease-in-out infinite; }
.st-dots i:nth-child(2) { animation-delay: .16s; }
.st-dots i:nth-child(3) { animation-delay: .32s; }
.st-stage { animation: st-in .3s ease-out both; }
/* The trip about to make itself (2026-10-06): "Oluşturuyorum… 3 · Vazgeç", a bar filling over the 3 seconds. */
.st-auto { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 16px; background: #221b3a; color: #fff; font-size: 14px; animation: st-in .25s ease-out both; }
.st-auto b { font-variant-numeric: tabular-nums; }
.st-auto-bar { flex: 0 0 64px; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.st-auto-bar span { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: st-auto-fill linear both; }
.st-auto-stop { margin-left: auto; border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13.5px; font-weight: 650; }
.st-auto-stop:hover { background: rgba(255, 255, 255, .26); }
@keyframes st-auto-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .st-auto, .st-auto-bar span { animation: none; } }
/* The plan said back while it counts down (2026-10-07). */
.st-summary { margin: 6px 0 2px; padding: 12px 14px; border-radius: 16px; background: var(--hx-card, #fff); border: 1px solid rgba(34, 27, 58, .12); font-size: 14px; animation: st-in .25s ease-out both; }
.st-summary-head { font-weight: 700; margin-bottom: 6px; }
.st-summary dl { margin: 0; display: grid; gap: 4px; }
.st-summary dl > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.st-summary dt { color: rgba(34, 27, 58, .6); }
.st-summary dd { margin: 0; overflow-wrap: anywhere; }
.st-musts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-must { padding: 3px 10px; border-radius: 999px; background: rgba(34, 27, 58, .07); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .st-summary { animation: none; } }
/* The event's official site after the line that says to check it. */
.st-link { color: var(--hx-accent); font-weight: 650; white-space: nowrap; }
@keyframes st-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-2px); } }
@keyframes st-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* A line (and the model's richer one replacing it) fades in. */
.st-msg-bot { animation: st-in .35s ease-out both; }

/* The live preview under the checklist (revision 2, item 4): each part fades in as it becomes known. */
.st-pv-photos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 100px; margin-bottom: 14px; }
.st-pv-photo { position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(150deg, #9db7e8, #5b45e0); animation: st-in .4s ease-out both; }
.st-pv-photo-1 { background: linear-gradient(150deg, #f7c77e, #e07a5f); }
.st-pv-photo-2 { background: linear-gradient(150deg, #8fd3c1, #2c8f7b); }
.st-pv-photo-3 { background: linear-gradient(150deg, #c3a8ff, #7b2fa8); }
.st-pv-photo-name { position: absolute; left: 10px; bottom: 8px; z-index: 1; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.st-pv-photo img, .st-photo img { opacity: 0; transition: opacity .6s ease; }
.st-pv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-pv-photo img.in, .st-photo img.in { opacity: 1; }
.st-composer { display: flex; align-items: center; gap: 8px; margin: 0 20px 18px; padding: 10px 10px 10px 18px; border: 1px solid #e3def6; border-radius: 22px; box-shadow: 0 6px 20px rgba(28, 26, 51, .06); }
.st-composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--hx-ink); }
.st-composer .send-btn { background: var(--hx-accent); }
.st-side { display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 32px 32px 48px; background: #eeecf5; scrollbar-gutter: stable; }
.st-side-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.st-list-head { display: flex; align-items: center; gap: 18px; }
.st-ring { position: relative; width: 64px; height: 64px; flex: none; }
.st-ring circle { fill: none; stroke-width: 4; }
.st-ring-bg { stroke: rgba(91, 69, 224, .18); }
.st-ring-fg { stroke: var(--hx-accent); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.st-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #5d5885; }
.st-ring > span b { color: var(--hx-ink); font-size: 17px; }
.st-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #5d5885; }
.st-list-title { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--hx-ink); }
.st-list-sub { font-size: 15px; color: #5d5885; }
.st-rows { position: relative; list-style: none; margin: 22px 0 0; padding: 0; }
.st-rows::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; background: rgba(91, 69, 224, .2); }
.st-row { display: flex; align-items: flex-start; gap: 16px; width: 100%; border: 0; background: none; padding: 10px 0; text-align: left; color: inherit; }
.st-row:hover:not(:disabled) .st-row-value { text-decoration: underline; text-underline-offset: 3px; }
.st-check { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed rgba(91, 69, 224, .45); background: #e6deff; color: #fff; }
.st-row.done .st-check { border: 0; background: var(--hx-ink); }
/* A destination still to confirm (rev 3): filled, with a "?" instead of the check. */
.st-row.tentative .st-check { border: 2px solid var(--hx-accent); background: #fff; color: var(--hx-accent); font-size: 14px; font-weight: 800; }
.st-row.tentative .st-row-value { color: var(--hx-ink); }
.st-row-label em.st-row-check { color: #a35a00; }
.st-row-label { display: block; font-size: 12.5px; font-weight: 700; color: #5d5885; }
.st-row-label em { font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--hx-accent); }
.st-row-value { display: block; margin-top: 2px; font-size: 17px; color: var(--hx-ink); }
.st-row:not(.done) .st-row-value { color: #5d5885; }
.st-gen-card { background: rgba(255, 255, 255, .72); border-radius: 22px; padding: 18px; text-align: center; }
.st-gen-btn { width: 100%; border: 0; border-radius: 999px; padding: 15px; background: #221b3a; color: #fff; font-size: 17px; font-weight: 650; cursor: pointer; opacity: 1; transition: transform .15s ease; }
.st-gen-btn:hover:not(:disabled) { background: #120d24; }
.st-gen-btn:active:not(:disabled) { transform: scale(.985); }
/* Disabled only while there is no destination (rev 3): then, and only then, it looks so. */
.st-gen-btn:disabled { background: #b8b0d8; color: #f4f1ff; cursor: not-allowed; }
.st-bar-gen { cursor: pointer; }
/* The ROTA row while the route's proposal is on its way (rev 3): the chat goes on meanwhile. */
.st-row-drawing { display: flex; align-items: center; gap: 8px; color: var(--hx-accent); font-size: 14.5px; }
.st-row.drawing .st-check { border-color: var(--hx-accent); }
.st-gen-card p { margin: 10px 0 0; font-size: 13.5px; color: #4b4670; }
.st-bar { display: none; }

/* Generating: the photos fanned out, the real steps ticked as they finish. */
.st-gen { width: 100%; max-width: 640px; padding-top: 24px; text-align: center; }
.st-gen h2 { margin: 0; font-size: 30px; font-weight: 650; letter-spacing: -.02em; color: var(--hx-ink); }
.st-photos { display: flex; justify-content: center; height: 220px; margin: 36px 0 30px; }
.st-photo { position: relative; width: 160px; height: 196px; margin: 0 -14px; padding: 8px; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 16px 36px rgba(40, 20, 120, .22); transform: rotate(var(--r)) translateY(var(--y)); animation: st-fan .6s cubic-bezier(.2, .8, .2, 1) both; }
.st-photo img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 15px; }
.st-photo > span { display: flex; align-items: flex-end; height: 100%; padding: 12px; border-radius: 15px; color: #fff; font-weight: 750; font-size: 16px; text-align: left; }
.st-photo-0 { --r: -9deg; --y: 12px; animation-delay: 0s; }
.st-photo-1 { --r: -3deg; --y: 0px; animation-delay: .08s; z-index: 1; }
.st-photo-2 { --r: 3deg; --y: 0px; animation-delay: .16s; z-index: 1; }
.st-photo-3 { --r: 9deg; --y: 12px; animation-delay: .24s; }
.st-photo-0 > span { background: linear-gradient(150deg, #7aa6d8, #5b45e0); }
.st-photo-1 > span { background: linear-gradient(150deg, #f7c77e, #e07a5f); }
.st-photo-2 > span { background: linear-gradient(150deg, #8fd3c1, #2c8f7b); }
.st-photo-3 > span { background: linear-gradient(150deg, #c3a8ff, #7b2fa8); }
@keyframes st-fan { from { opacity: 0; transform: rotate(0deg) translateY(24px) scale(.92); } to { opacity: 1; transform: rotate(var(--r)) translateY(var(--y)); } }
.st-steps { display: inline-flex; flex-direction: column; gap: 14px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.st-step { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--hx-ink); transition: color .35s ease; }
.st-step.wait { color: rgba(28, 26, 51, .42); }
.st-step-text { animation: st-in .35s ease-out both; }
.st-step-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(91, 69, 224, .3); font-size: 13px; font-weight: 800; transition: border-color .3s ease, background-color .3s ease; }
.st-step.done .st-step-mark { border-color: transparent; background: #e1f3e8; color: #23845a; font-size: 14px; }
.st-tick { display: inline-block; animation: st-tick .45s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes st-tick { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.st-step.run .st-step-mark { border-color: var(--hx-accent); border-right-color: transparent; animation: st-spin .8s linear infinite; }
.st-step.error .st-step-mark { border: 0; background: #c0392b; color: #fff; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-gen-foot { margin: 26px auto 0; max-width: 360px; font-size: 14px; color: #4b4670; }
/* Filled by the steps done, eased: no percentages that jump. */
.st-progress { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(91, 69, 224, .16); }
.st-progress span { display: block; height: 100%; background: var(--hx-accent); border-radius: 3px; transform-origin: left center; transition: transform .7s cubic-bezier(.3, .7, .3, 1); }
.st-gen-note { margin-top: 10px; }
.st-gen-error { display: inline-block; margin-top: 22px; padding: 14px 18px; border-radius: 16px; background: #fff; text-align: left; color: var(--hx-ink); }
.st-gen-error p { margin: 0; }
.st-gen-actions { display: flex; gap: 10px; margin-top: 10px; }
/* The map (rev 3): lavender land on a soft sea, the flight drawn across it, the photos fanning in under it. */
.st-gen-stage { position: relative; margin: 26px 0 24px; }
.st-map { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: #f4f0ff; box-shadow: 0 16px 40px rgba(40, 20, 120, .16); animation: st-map-in .5s ease-out both; }
.st-map svg { display: block; width: 100%; height: 100%; }
.st-map-sea { fill: #f4f0ff; }
.st-map-land { fill: #cfc3ff; }
.st-map-borders { fill: none; stroke: #f4f0ff; stroke-width: .8; stroke-linejoin: round; }
.st-map-arc { fill: none; stroke: var(--hx-accent); stroke-linecap: round; }
.st-map-stops { fill: none; stroke: #2c2560; stroke-linecap: round; }
.st-map-stop { fill: #fff; stroke: #2c2560; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.st-map-from { fill: #221b3a; }
.st-map-to { fill: var(--hx-accent); }
.st-map-ring { fill: none; stroke: var(--hx-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: st-map-ring 1.5s ease-out 2 both; }
.st-map-plane path { fill: #221b3a; }
.st-map-label { fill: #221b3a; font-weight: 750; paint-order: stroke; stroke: #fff; stroke-linejoin: round; }
.st-map-credit { position: absolute; right: 12px; bottom: 6px; font-size: 10.5px; color: #6b6790; }
@keyframes st-map-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes st-map-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }
.st-gen-stage .st-photos { position: relative; height: 200px; margin: -78px 0 0; }
.st-gen-stage.no-map .st-photos { height: 220px; margin: 10px 0 6px; }
@media (prefers-reduced-motion: reduce) {
  .st-map, .st-map-ring, .st-row.done .st-check, .st-row.done .st-row-value { animation: none; }
  .st-photo, .st-tick, .st-step-text, .st-msg-bot, .st-thinking, .st-stage, .st-pv-photo { animation: none; }
  .st-step.run .st-step-mark, .st-dots i { animation: none; }
  .st-progress span, .st-pv-photo img, .st-photo img, .st-step, .st-step-mark, .st-ring-fg, .st-bar-track span { transition: none; }
}

/* Reading, v5: a row a message being read can still fill turns and shimmers until the reading lands. */
.st-row.reading .st-check { border: 2px solid var(--hx-accent); border-right-color: transparent; background: none; animation: st-spin .9s linear infinite; }
.st-row.reading .st-row-value { position: relative; color: transparent; }
.st-row.reading .st-row-value::after { content: ""; position: absolute; left: 0; top: 4px; height: 18px; width: 62%; border-radius: 6px; background: linear-gradient(90deg, rgba(91, 69, 224, .10), rgba(91, 69, 224, .28), rgba(91, 69, 224, .10)); background-size: 200% 100%; animation: st-shimmer 1.1s linear infinite; }
@keyframes st-shimmer { to { background-position: -200% 0; } }
/* The step line (v5): bouncing dots and what the running call is doing, in the accent colour. */
.st-thinking { background: none; padding: 2px 0; color: var(--hx-accent); font-weight: 600; font-size: 14px; }
.st-thinking .st-dots i { animation-name: st-bounce; animation-duration: 1s; }
@keyframes st-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .st-row.reading .st-check, .st-row.reading .st-row-value::after { animation: none; }
}

/* Generating, v5 (mockup 2026-10-06-gezi-baslatma-v5): the centred column on lavender, a line with the route and its
   nights, the light SVG map card (2.5:1), big steps (18 px, 28 px marks, filled green ticks). */
.st-screen.generating .st-side { align-items: center; }
.st-gen { max-width: 760px; padding-top: 0; }
.st-gen-sub { margin-top: 4px; color: #5b5670; font-size: 14.5px; }
.st-gen-stage { margin: 16px 0 22px; }
.gm { position: relative; width: 100%; aspect-ratio: 2.5 / 1; margin: 0; overflow: hidden; border-radius: 24px; background: #fbfaff; box-shadow: 0 18px 50px rgba(60, 40, 140, .18); text-align: left; }
.gm-wait { animation: st-in .4s ease-out both; }
.gm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gm-sea { fill: #fbfaff; }
.gm-land { fill: #e2dafb; stroke: #d3c9f6; stroke-width: 1px; }
.gm-borders { fill: none; stroke: #c8bdf1; stroke-width: 1px; }
.gm-ahead { fill: none; stroke: #5b45e0; stroke-opacity: .35; stroke-width: 2px; stroke-dasharray: 4 6; stroke-linecap: round; transition: opacity .4s; }
.gm-ahead.off { opacity: 0; }
.gm-trail { fill: none; stroke: url(#gm-trail); stroke-linecap: round; }
.gm-ground { fill: none; stroke: #ff3d8b; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 6 7; }
.gm-ov { position: absolute; inset: 0; pointer-events: none; }
.gm-ov > * { position: absolute; }
.gm-home { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 12px rgba(40, 20, 120, .25); font-size: 15px; color: #221b3a; transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.gm-home.in { transform: scale(1); }
.gm-lbl { transform: translate(-50%, -130%); background: #fff; border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 13px; box-shadow: 0 3px 12px rgba(40, 20, 120, .18); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.gm-lbl.in { opacity: 1; }
.gm-plane { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
.gm-plane svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-shadow path { fill: #2b2350; }
.gm-shadow { filter: blur(2px); opacity: .3; }
.gm-body path { fill: #fff; stroke: #2b2350; stroke-width: .8; stroke-linejoin: round; }
.gm-ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #5b45e0; opacity: 0; }
.gm-ring.go { animation: gm-ring 1.1s ease-out 2; }
@keyframes gm-ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
.gm-stop { display: flex; align-items: center; gap: 7px; opacity: 0; transform: translateY(-20px) scale(.6); transition: opacity .55s, transform .55s cubic-bezier(.3, 1.5, .5, 1); }
.gm-stop.in { opacity: 1; transform: none; }
.gm-dot { flex: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #5b45e0; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(91, 69, 224, .2); }
.gm-stop.fest .gm-dot { background: #ff3d8b; box-shadow: 0 0 0 6px rgba(255, 61, 139, .25); }
.gm-stop.left { flex-direction: row-reverse; transform-origin: right; }
.gm-stop.left .gm-dot { margin: -7px -7px 0 0; }
.gm-stop.left.in { transform: translateX(-100%); }
.gm-stop.left:not(.in) { transform: translateX(-100%) translateY(-20px) scale(.6); }
.gm-nm { display: flex; align-items: center; gap: 6px; margin-top: -7px; background: #fff; border-radius: 9px; padding: 3px 9px; font-weight: 700; font-size: 12.5px; box-shadow: 0 3px 10px rgba(40, 20, 120, .2); white-space: nowrap; color: #221b3a; }
.gm-n { min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #efeaff; color: #5b45e0; font-weight: 800; font-size: 11.5px; display: grid; place-items: center; }
.gm-stop.fest .gm-n { background: #ff3d8b; color: #fff; }
.gm-photos { position: absolute; right: 16px; bottom: 14px; display: flex; pointer-events: none; }
.gm-card { position: relative; width: 84px; height: 104px; margin-left: -12px; overflow: hidden; border-radius: 12px; border: 3px solid #fff; background: linear-gradient(150deg, #9db7e8, #5b45e0); box-shadow: 0 8px 18px rgba(40, 20, 120, .28); opacity: 0; transform: translateY(30px); transition: opacity .6s cubic-bezier(.2, 1.25, .4, 1), transform .6s cubic-bezier(.2, 1.25, .4, 1); }
.gm-card-1 { background: linear-gradient(150deg, #f7c77e, #e07a5f); transition-delay: .14s; }
.gm-card-2 { background: linear-gradient(150deg, #8fd3c1, #2c8f7b); transition-delay: .28s; }
.gm-card > span { position: absolute; left: 6px; right: 6px; bottom: 5px; color: #fff; font-weight: 750; font-size: 11px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.gm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-card-0.in { opacity: 1; transform: rotate(-7deg) translateY(4px); }
.gm-card-1.in { opacity: 1; transform: translateY(-4px); z-index: 2; }
.gm-card-2.in { opacity: 1; transform: rotate(7deg) translateY(4px); }
.gm-credit { position: absolute; left: 14px; bottom: 8px; font-size: 10.5px; color: #8a83a6; }
.st-steps { gap: 4px; min-width: min(560px, 100%); }
.st-step { gap: 14px; padding: 8px 0; font-size: 18px; }
.st-step.wait { color: #8f8aa8; }
.st-step.run { font-weight: 600; }
.st-step-mark { width: 28px; height: 28px; border: 2px solid #c3b8ee; background: rgba(255, 255, 255, .45); font-size: 14px; }
.st-step.done .st-step-mark { border-color: #22a35a; background: #22a35a; color: #fff; animation: gm-pop .35s ease; }
.st-step.run .st-step-mark { background: none; }
@keyframes gm-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.st-gen-foot { margin-top: 18px; }
.st-progress { height: 7px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .gm-home, .gm-lbl, .gm-stop, .gm-card, .gm-ahead, .gm-wait { transition: none; animation: none; }
  .st-step.done .st-step-mark { animation: none; }
}

/* Narrow (item 9): the checklist folds into a thin bar above the chat; generating takes the screen. */
.st-bar-row { display: flex; align-items: center; gap: 8px; }
.st-bar-toggle { flex: 1; display: flex; flex-direction: column; gap: 6px; border: 0; background: none; padding: 4px 0; text-align: left; font-size: 14px; color: var(--hx-ink); }
.st-bar-track { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(91, 69, 224, .18); }
.st-bar-track span { display: block; height: 100%; background: var(--hx-accent); transition: width .3s; }
.st-bar-gen { border: 0; border-radius: 999px; padding: 8px 14px; background: #221b3a; color: #fff; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.st-bar .st-list { padding: 4px 0 2px; }
.st-bar .st-list-head { display: none; }
.st-bar .st-rows { margin-top: 6px; }
.st-bar .st-row-value { font-size: 15px; }
@media (max-width: 860px) {
  .st-screen { grid-template-columns: 1fr; }
  .st-chat { border-right: 0; }
  .st-side { display: none; }
  .st-bar { display: block; margin: 4px 16px 0; padding: 8px 12px; border-radius: 16px; background: #efeaff; }
  .st-top, .st-msgs { padding-left: 16px; padding-right: 16px; }
  .st-composer { margin: 0 12px 12px; }
  .st-screen.generating .st-chat { display: none; }
  .st-screen.generating .st-side { display: flex; padding: 32px 16px; }
  .st-photo { width: 120px; height: 150px; }
  .st-photos { height: 170px; }
  .st-gen-stage { margin: 18px 0 16px; }
  .st-gen-stage .st-photos { height: 160px; margin-top: -54px; }
  .st-gen h2 { font-size: 24px; }
}
@media (max-width: 600px) {
  .st-hero { padding: 14px 16px 44px; }
  .st-hello { margin-top: 32px; }
  .st-prompt { padding: 16px 14px 12px 18px; border-radius: 22px; }
  .st-prompt-hint { display: none; }
  .st-prompt-foot { justify-content: space-between; }
  .st-home > .errors, .st-home > .trip-grid, .st-home > .st-section, .st-home > .trips-empty { padding-left: 16px; padding-right: 16px; }
  .st-section { font-size: 24px; }
}

/* The new trip's one-time start card above the plan (item 7). */
.st-guide { margin: 16px 0; padding: 18px 20px; border: 1px solid var(--hx-line); border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(28, 26, 51, .05); }
.st-guide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.st-guide-title { font-size: 18px; font-weight: 750; color: var(--hx-ink); }
.st-guide-sub { margin-top: 2px; font-size: 14px; color: var(--hx-muted); }
.st-guide-x { height: 28px; border: 0; background: none; padding: 0 4px; font-size: 22px; line-height: 1; color: var(--hx-muted); }
.st-guide-x:hover { color: var(--hx-ink); }
.st-guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.st-guide-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid var(--hx-line); border-radius: 14px; background: var(--hx-card); color: var(--hx-ink); font-size: 14.5px; font-weight: 600; text-align: left; }
.st-guide-step > span:nth-child(2) { flex: 1; }
.st-guide-step.next { background: var(--hx-ink); border-color: var(--hx-ink); color: #fff; }
.st-guide-step.done { background: #fff; color: var(--hx-muted); font-weight: 500; text-decoration: line-through; }
.st-guide-n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--hx-lav); color: var(--hx-accent); font-size: 13px; font-weight: 800; }
.st-guide-step.next .st-guide-n { background: rgba(255, 255, 255, .18); color: #fff; }
.st-guide-step.done .st-guide-n { background: var(--hx-mintbar); color: #fff; }
@container panel (max-width: 560px) { .st-guide-steps { grid-template-columns: 1fr; } }
.st-guide-approx { margin: 10px 0 0; font-size: 14px; color: var(--hx-ink); }
.st-guide-approx .btn-link { font-size: 14px; font-weight: 650; color: var(--hx-accent); }
.st-day { display: inline-flex; align-items: center; gap: 8px; }

/* 0.36.13: a time in words, its source, and "İniş saati?" */
.t .t-hint { display: block; font-size: 11px; line-height: 1.2; font-weight: 600; color: #a35a00; white-space: normal; }
.dc-arrive { font-size: 12.5px; font-weight: 600; }
.dc-step > .dc-arrive { grid-column: -2 / -1; justify-self: start; margin: -4px 0 6px 52px; }
.dc-arrive input { font: inherit; padding: 3px 6px; border: 1px solid #d8d4cc; border-radius: 8px; }
.dc-step > .dc-live { grid-column: -2 / -1; margin: -4px 0 6px 52px; font-size: 12.5px; font-weight: 600; color: #13756a; }
.dc-step > .dc-live.alert { color: #b42318; }
.dc-live small { font-weight: 400; color: #8a8a8e; }

/* 0.36.18: a booked flight's boxes (only what's known), the note and the source at its foot */
.pk-live { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 220px); gap: 8px; margin: 22px 0 10px; }
.pk-lv { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .75); }
.pk-lv > svg { flex: none; color: var(--mc); }
.pk-lv > span { min-width: 0; }
.pk-lv small { display: block; font-size: 12px; line-height: 16px; color: var(--pk-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-lv b { display: block; font-size: 17px; line-height: 22px; color: var(--pk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-lv b i { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 6px; color: var(--pk-gray); }
.pk-lv.bad b, .pk-lv.bad > svg, .pk-lv.bad b i { color: #c62828; }
.pk-lv.ok b, .pk-lv.ok > svg { color: #1d7442; }
.pk-card.pk-alert { background: #fff5f4; box-shadow: inset 0 0 0 1.5px #e9a29b; }
.pk-late { color: #c62828 !important; }
.pk-live-note { min-width: 0; font-size: var(--q-fs-info); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-live-note.warn { color: #8a5a00; }
.pk-live-note.bad { color: #c62828; }
.pk-src { flex: none; margin-left: auto; font-size: var(--q-fs-small); color: #a1a1a6; white-space: nowrap; }
.pk-src + .pk-price { margin-left: 12px; }
@media (max-width: 560px) { .pk-live { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The airline's logo first (0.36.20), on the cities' line, as flight search sites show it */
.pk-mid.has-logo { grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 40%) minmax(0, 1fr); }
.pk-logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); display: grid; place-items: center; overflow: hidden; }
.pk-airline { width: 34px; height: 34px; object-fit: contain; }
.pk-logo > svg { color: var(--mc); opacity: .55; }
@media (max-width: 560px) { .pk-mid.has-logo { grid-template-columns: 36px minmax(0, 1fr) minmax(110px, 34%) minmax(0, 1fr); } .pk-logo { width: 36px; height: 36px; border-radius: 10px; } .pk-airline { width: 28px; height: 28px; } }
/* A narrow board: logo, departure, arrival on one row, the route under them (the narrow rule puts the arrival in
   column 2, which with the logo was the departure's: "Porto İstanbul", "İstanbu/l"). */
@container panel (max-width: 620px) {
  .pk-mid.has-logo { grid-template-columns: 36px 1fr 1fr; }
  .pk-mid.has-logo .pk-stop.r { grid-column: 3; }
  .pk-logo { width: 36px; height: 36px; border-radius: 10px; }
  .pk-airline { width: 28px; height: 28px; }
}

/* 0.36.24: the day's groups after the settled lines, quiet ("Henüz rezerve edilmedi · 2", "Fikirler · 4") */
.dc-tl > li.dc-tier { list-style: none; margin: 14px 0 4px; padding-left: 58px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a1a1a6; }

/* 0.36.24 Liste as a timeline (Emre: "iconları bağlayan, net anlaşılır; renkleri hepsi aynı"): one colour for
   every line, round nodes joined by a thin line behind them, the name and one small line of detail. */
.dc-cday.dl-day { --node: #6a5ad8; }
.dc-cday.dl-day .dc-step { min-height: 52px; }
.dc-cday.dl-day .dc-tile { width: 38px; height: 38px; border-radius: 50%; color: var(--node); background: color-mix(in srgb, var(--node) 11%, #fffdfa); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--node) 30%, #fffdfa); z-index: 1; }
.dc-cday.dl-day .dc-tile i { right: -3px; bottom: -3px; width: 15px; height: 15px; }
.dc-cday.dl-day .dc-tl > .dc-step::before { content: ""; position: absolute; left: 88px; top: -10px; bottom: -10px; width: 2px; background: color-mix(in srgb, var(--node) 30%, #fffdfa); }
.dc-cday.dl-day .dc-tl > .dc-step:first-child::before, .dc-cday.dl-day .dc-tl > .dc-tier + .dc-step::before { top: 50%; }
.dc-cday.dl-day .dc-tl > .dc-step:last-child::before, .dc-cday.dl-day .dc-tl > .dc-step:has(+ .dc-tier)::before { bottom: 50%; }
.dc-cday.dl-day .dc-tl > .dc-step:only-child::before { display: none; }
/* The ideas: open nodes, not on the line (nothing's settled about them). */
.dc-cday.dl-day .dc-tl > .dc-step.idea::before { display: none; }
.dc-cday.dl-day .dc-step.idea .dc-tile { background: #fffdfa; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--node) 30%, #fffdfa); }
.dc-cday.dl-day .dc-step.quiet .dc-tile { background: #fffdfa; color: #a1a1a6; }
/* Smaller words: the name, and one line under it. */
.dc-cday.dl-day .dc-step .dc-line .name { font-size: 15.5px; }
.dc-cday.dl-day .dc-step .dc-line .name small { font-size: 12.5px; }
.dc-cday.dl-day .dc-step .t { font-size: 15px; }
.dc-cday.dl-day .dc-tl > li.dc-tier { padding-left: 106px; margin: 10px 0 2px; font-size: 10.5px; }
@media (max-width: 720px) { .dc-cday.dl-day .dc-tl > .dc-step::before { left: 74px; } .dc-cday.dl-day .dc-tl > li.dc-tier { padding-left: 92px; } }

/* Kişiye özel rezervasyon (0.36.26): the menu's "Kimin için?" group, ticked; the faces in Günlük akış */
.pk-menu { min-width: 210px; }
.pk-menu-h { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8e8e93; }
.pk-menu button { display: flex; align-items: center; gap: 10px; }
.pk-menu button .pk-menu-l { flex: 1; }
.pk-menu button.on { background: #f3f0ff; }
.pk-menu-tick { color: #5b3fd6; font-weight: 700; }
.pk-menu button.sep { margin-top: 6px; position: relative; }
.pk-menu button.sep::before { content: ""; position: absolute; left: 6px; right: 6px; top: -4px; border-top: 1px solid #ececf0; }
.pk-menu button .wh-av { width: 24px; height: 24px; font-size: 11px; }
.dc-who { display: inline-flex; flex: none; margin-left: auto; padding-left: 8px; }
.dc-who .wh-av + .wh-av { margin-left: -7px; box-shadow: 0 0 0 2px #fffdfa; }
.popup-held-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Hangi gezi (0.41.0): the country's trips, then the others; the answer remembered unless turned off */
/* Simgeye basınca (0.43.0): opens at once, saves only on "Desteye ekle" (or Enter) */
.pk2 { display: grid; gap: 10px; }
.pk2 > .popup-title { margin-bottom: 0; }
.pk-skel { display: grid; gap: 8px; }
.pk-skel span { height: 38px; border-radius: 10px; background: linear-gradient(90deg, #f1eff7, #e7e4f0, #f1eff7); background-size: 200% 100%; animation: pk-sh 1.1s linear infinite; }
.pk-skel span + span { height: 44px; }
@keyframes pk-sh { to { background-position: -200% 0; } }
.cep-trip:focus-visible, .pk-go:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.pk-go { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 12px; background: #5b45e0; color: #fff; font-weight: 800; font-size: 14px; text-align: center; }
.pk-go:disabled { opacity: .7; cursor: default; }
.pk-go kbd { font: 700 11px/1 inherit; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .2); }
.pk-go.ghost { background: #fff; color: #4a36c9; box-shadow: inset 0 0 0 1.5px #c9bffa; }
.pk-open { justify-self: start; font-size: 12.5px; }
/* Tek bakış (0.45.0): one card at a time; a picture or a sign, one sentence, one big button, one quiet line */
body.popup:has(.tb) { width: 380px; }
.popup-card.tb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.tb-app { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-bottom: 1px solid #efedf5; background: #faf9fc; }
.tb-brand { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #1c1a33; margin-right: auto; }
.tb-brand:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.tb-go:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.tb-main { display: grid; gap: 12px; padding: 14px 16px 16px; }
.tb-say { display: grid; gap: 3px; }
.tb-say b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tb-say span { font-size: 14px; line-height: 1.45; color: #5d5a78; font-weight: 600; }
.tb-go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px; border-radius: 16px; background: #5b45e0; color: #fff; font-weight: 800; font-size: 16px; text-align: center; }
.tb-go:disabled { opacity: .7; cursor: default; }
.tb-go.ok { background: #1f7a45; }
.tb-go.ghost { background: #fff; color: #4a36c9; box-shadow: inset 0 0 0 1.5px #c9bffa; }
.tb-go kbd { font: 700 11px/1 inherit; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .2); }
.tb-go.added { cursor: default; gap: 6px; background: var(--q-ok-s); color: var(--q-ok); box-shadow: inset 0 0 0 1px var(--q-ok-l); }
.ts-ring { position: relative; flex: none; display: inline-grid; place-items: center; }
.ts-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ts-ring circle { fill: none; stroke-linecap: round; }
.ts-ring .tk { stroke: var(--q-line); stroke-linecap: butt; }
.ts-ring .pl { stroke: var(--q-ok-l); }
.ts-ring .bk { stroke: var(--q-ok); }
.ts-ring .in { position: relative; display: grid; justify-items: center; }
.ts-ring .in b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--q-ink); }
.ts-ring .in small { font-size: 11px; font-weight: 700; line-height: 1; margin-top: 2px; color: var(--q-mut); }
.ts-ring.big { position: absolute; z-index: 1; right: 10px; bottom: 10px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px -4px rgba(20, 16, 40, .4); }
.tb-empty { justify-items: center; text-align: center; padding: 22px 20px 20px; }
.tb-empty .tb-go { width: 100%; }
/* Tek Kaydet (0.47.29, docs/mockups/eklenti-tek-kaydet-v2 + v3, Emre onayladı): the page on top, the trips under it, one button a row */
.tk .tb-app { gap: 2px; padding: 8px 8px 8px 12px; }
.tk-ib { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--q-mut); }
.tk-ib:hover { background: var(--q-soft); color: var(--q-ink); }
.tk-ib:disabled { opacity: .5; cursor: default; }
.tk-ib:focus-visible, .tk-pick:focus-visible, .tk-save:focus-visible, .tk-sw:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.tk-ico { width: 18px; height: 18px; flex: none; }
.tk-pad { padding: 12px 14px 0; }
.tk-pad .popup-desk { margin: 0; }
/* Kaydet penceresi v5 (docs/mockups/eklenti-tek-kaydet-v5): what is saved, a small card on top */
.tk-it { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 12px 4px; padding: 8px; border-radius: 14px; background: var(--q-soft); transition: background-color .3s ease; }
.tk-it.ok { background: var(--q-ok-s); }
.tk-pic { position: relative; width: 88px; height: 58px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--q-st-wait-bg); box-shadow: inset 0 0 0 1px var(--q-line); color: var(--q-mut); font-size: 18px; font-weight: 800; }
.tk-pic i { font-style: normal; }
.tk-kind { color: var(--q-acc); }
.tk-kind .tk-ico { width: 26px; height: 26px; }
.tk-pic > img:not(.tk-fv) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.tk-pic > img.in { opacity: 1; }
.tk-pic .tk-sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-pic.wait::after, .tk-skel .tk-pic::after, .tk-sk-th::after, .tk-bars i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-100%); animation: tk-shim 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes tk-shim { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tk-pic.wait::after, .tk-skel .tk-pic::after, .tk-sk-th::after, .tk-bars i::after { animation: none; opacity: 0; } }
.tk-pic em { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px #fff; }
.tk-pic em.ok { background: var(--q-ok); }
.tk-pic em.acc { background: var(--q-acc); }
.tk-pic em .tk-ico { width: 12px; height: 12px; }
.tk-done { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(31, 122, 69, .55); color: #fff; }
.tk-done .tk-ico { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) { .tk-done { animation: tk-done .35s var(--e-out) both; } }
@keyframes tk-done { from { opacity: 0; transform: scale(1.15); } }
.tk-ix { min-width: 0; display: grid; gap: 3px; }
.tk-ix b { font-size: 14px; font-weight: 750; line-height: 1.28; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.tk-ix small { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--q-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ix small em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; color: var(--q-ok); font-weight: 800; }
.tk-ix small em .tk-ico { width: 13px; height: 13px; }
.tk-off { display: flex; align-items: center; gap: 8px; margin: 6px 12px 0; padding: 8px 12px; border-radius: 11px; background: var(--q-soft); font-size: 12.5px; font-weight: 650; color: var(--q-mut); }
.tk-off .tk-ico { width: 16px; height: 16px; }
.tk-skel { display: grid; }
.tk-skel .tk-pic { background: var(--q-soft); box-shadow: none; }
:root[data-theme="dark"] .tk-sketch { filter: invert(.86) hue-rotate(180deg); }
.tk-bars { position: relative; flex: 1; min-width: 0; display: grid; gap: 7px; }
.tk-bars i { position: relative; overflow: hidden; display: block; height: 10px; border-radius: 5px; background: var(--q-line); }
.tk-bars i:nth-child(2) { width: 62%; }
.tk-bars i:nth-child(3) { width: 40%; height: 8px; }
.tk-skel .tk-row { gap: 12px; padding: 0 8px; }
.tk-sk-th { position: relative; overflow: hidden; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--q-line); }
.tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-warn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 12px 0; padding: 4px 4px 4px 12px; border-radius: 12px; background: #fff3df; color: var(--q-warn); font-size: 13.5px; font-weight: 750; }
.tk-warn span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-warn .tk-ib { color: var(--q-warn); }
.tk-trips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px; }
.tk-ask { padding: 8px 8px 2px; font-size: 12.5px; font-weight: 800; color: var(--q-mut); }
.tk-q { box-sizing: border-box; width: 100%; height: 36px; margin: 0 0 4px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--q-line); background: var(--q-soft); font: inherit; font-size: 14px; color: var(--q-ink); }
.tk-q:focus { outline: none; border-color: var(--q-acc); box-shadow: 0 0 0 3px #e3defe; }
/* (v2: the count right after the name, the ring and the button at the end) */
.tk-row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 8px 0 0; border-radius: 12px; }
.tk-row:hover, .tk-row:focus-within { background: var(--q-soft); }
/* (v6: the selected trip, where it saves, in its own box; the same inset on every side) */
.tk-row.sel { margin: 0 4px; padding: 10px; gap: 10px; background: var(--q-acc-s); box-shadow: inset 0 0 0 1.5px #d6cffd; }
.tk-row.sel:hover, .tk-row.sel:focus-within { background: var(--q-acc-s); }
.tk-row.sel .tk-pick { padding: 0; gap: 12px; }
.tk-row.sel .tk-th { width: 48px; height: 48px; border-radius: 12px; }
.tk-row.sel .tk-nm b { font-size: 16px; }
.tk-row.sel.saved, .tk-row.sel.saved:hover { background: var(--q-ok-s); box-shadow: inset 0 0 0 1.5px var(--q-ok-l); }
.tk-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* ("Tümü": the list scrolls in place, about four rows, Chrome caps a popup at 600 px; it never grows past that, "Daha az" stays in view) */
.tk-scroll { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--q-line) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.tk-row.saved { background: var(--q-ok-s); box-shadow: inset 0 0 0 1.5px var(--q-ok-l); }
.tk-pick { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 8px 0 8px 8px; align-self: stretch; border-radius: 12px; }
.tk-nm { min-width: 0; display: grid; gap: 1px; }
.tk-nm b { min-width: 0; font-size: 15px; font-weight: 750; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
/* (the date: small and quiet under the name, never louder than it) */
.tk-nm small { font-size: 12px; font-weight: 500; color: var(--q-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tk-th { width: 40px; height: 40px; border-radius: 11px; }
.tk-th .tk-art { width: 32px; height: 32px; object-fit: contain; mix-blend-mode: multiply; }
.tk-new .tk-plus { display: grid; place-items: center; background: var(--q-st-wait-bg); box-shadow: inset 0 0 0 1.5px #cfc7ff; color: var(--q-acc); }
.tk-new .tk-plus .tk-ico { width: 18px; height: 18px; }
.tk-new .tk-nm b { color: var(--q-acc-d); }
.tk-new.open { align-items: flex-start; gap: 11px; padding: 8px; background: var(--q-acc-s); box-shadow: inset 0 0 0 1.5px #d6cffd; }
.tk-new.open .tk-plus { flex: none; }
.tk-nf { flex: 1; min-width: 0; display: grid; gap: 8px; }
.tk-name { box-sizing: border-box; width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--q-st-wait-bg); box-shadow: inset 0 0 0 1.5px var(--q-acc); font: inherit; font-size: 15px; font-weight: 750; color: var(--q-ink); outline: none; }
.tk-nf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-nf-row .btn-link { padding: 0; font-size: 13px; font-weight: 750; color: var(--q-acc-d); }
.tk-ring b { position: relative; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--q-ink); }
.tk-ring-gap { width: 32px; }
.tk-row > .tk-ring, .tk-row > .tk-ring-gap, .tk-pick + .tk-end, .tk-n + .tk-end { margin-left: auto; }
.tk-end { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 96px; }
.tk-save { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 11px; background: var(--q-acc); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; }
.tk-save .tk-ico { width: 16px; height: 16px; }
.tk-save.ghost { background: var(--q-acc-s); color: var(--q-acc-d); }
.tk-save.ok { background: var(--q-ok); color: #fff; }
.tk-save.ghost.ok { background: var(--q-ok-s); color: var(--q-ok); }
.tk-save:disabled { opacity: .7; cursor: default; }
/* (a row not selected shows its "Kaydet" on hover and on keyboard focus; a touch screen has no hover: always) */
/* (no trip selected yet, "Hangi geziye?": every row shows it, there's no one to fall back on) */
@media (hover: hover) { .tk-trips:not(.ask) .tk-row:not(.sel):not(:hover):not(:focus-within) .tk-save.ghost { visibility: hidden; } }
.tk-state { display: inline-flex; align-items: center; gap: 5px; padding-left: 4px; font-size: 13.5px; font-weight: 800; color: var(--q-ok); white-space: nowrap; }
.tk-state .tk-ico { width: 16px; height: 16px; }
.tk-row.saved .tk-ib { color: var(--q-ok); }
.tk-in { width: 32px; height: 32px; display: grid; place-items: center; color: var(--q-ok); }
.tk-more { display: none; }
.tk-row:hover .tk-more, .tk-row:focus-within .tk-more { display: inline-flex; }
.tk-row:hover .tk-in, .tk-row:focus-within .tk-in { display: none; }
@media (hover: none) { .tk-more { display: inline-flex; } .tk-in { display: none; } }
.tk-none { margin: 4px 8px 6px; font-size: 13.5px; font-weight: 650; color: var(--q-mut); }
.tk-err { margin: 4px 8px 6px; font-size: 13px; font-weight: 650; color: var(--q-bad); }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 12px; }
.tk-foot.open { padding-top: 8px; border-top: 1px solid var(--q-line); }
.tk-foot small { font-size: 12px; font-weight: 650; color: var(--q-mut); }
.tk-foot .btn-link { padding: 0; font-size: 13.5px; font-weight: 800; }
.tk-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-top: 1px solid #efedf5; font-size: 13.5px; font-weight: 700; color: var(--q-ink); }
.tk-alt .btn-link { padding: 0; font-size: 13.5px; font-weight: 800; }
.tk-alt.warn { background: #fff7e8; color: #8a5a00; }
.tk-sw { all: unset; box-sizing: border-box; cursor: pointer; position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #d8d5e3; }
.tk-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.tk-sw:hover { background: #c9c5d8; }
@media (prefers-reduced-motion: no-preference) { .ts-ring .pl, .ts-ring .bk { animation: ts-draw .9s var(--e-out) both; } }
@keyframes ts-draw { from { stroke-dasharray: 0 999; } }
.tb .pk-qp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb .pk-pick { padding: 14px 16px 16px; }
.tb .popup-desk { margin: 0; }
.tb .pk-done { background: none; padding: 14px 16px 16px; }
.tb .pk-done .pk-fly { top: 20px; }
.pk-done { position: relative; display: grid; gap: 4px; padding: 14px 12px; border-radius: 12px; background: #eef8f2; overflow: hidden; }
.pk-done b { color: #1f7a45; font-size: 14px; }
/* "hop": a small card rises from where the page was and lands in the trip */
.pk-fly { position: absolute; right: 14px; top: 10px; width: 26px; height: 20px; border-radius: 5px; background: #5b45e0; box-shadow: 0 4px 12px rgba(91, 69, 224, .4); animation: pk-hop 420ms cubic-bezier(.3, .7, .2, 1) both; }
@keyframes pk-hop { 0% { transform: translate(-150px, 60px) scale(1.6); opacity: .9; } 70% { opacity: 1; } 100% { transform: translate(0, 0) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-fly { display: none; } .pk-skel span { animation: none; } }
body.still .pk-fly { display: none; }
/* Hangi geziye (0.42.0, Pinterest's picker): the three most likely with their covers, then every trip, then a new one */
.pk-pick { display: grid; gap: 6px; }
.pk-pick > p { margin: 0 0 2px; font-weight: 800; }
.pk-pick > small.muted { font-size: 11.5px; font-weight: 750; margin-top: 4px; }
.pk-qp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk-qp button { all: unset; cursor: pointer; display: grid; gap: 4px; min-width: 0; }
.pk-qp button b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-qp button > span:last-child { font-size: 11px; color: #5d5a78; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-th { width: 34px; height: 34px; border-radius: 9px; flex: none; overflow: hidden; background: #efecff; display: grid; place-items: center; color: #4a36c9; font-weight: 800; font-size: 13px; }
.pk-th img { width: 100%; height: 100%; object-fit: cover; }
.pk-th i { font-style: normal; }
/* Benle gezen eklenti (seviye 1): which candidate this tab is, or which planned flight this search is for */
.popup-desk { display: grid; gap: 3px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #f6f4ff; box-shadow: inset 0 0 0 1px #e4defc; }
.popup-desk small { font-size: 11.5px; font-weight: 800; color: #4a36c9; }
.popup-desk b { font-size: 14px; font-weight: 800; }
.popup-desk .muted { font-size: 12.5px; }
.popup-desk-said { font-size: 12.5px; color: #1f7a45; font-weight: 650; }
.home-waiting { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.home-waiting-h { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8e8e93; }

/* 0.36.30: a line's warning under its words, never under its icon (the list's two columns, the timeline's node) */
.dc-cday.dl-day .dc-step > .dc-warn { grid-column: -2 / -1; margin: -4px 0 6px; padding-left: 52px; }

/* --- The plan as a PDF (PrintPlan.tsx, 0.36.51; a file since 0.36.55): laid out at A4 width off screen while its
   picture is taken (.capturing), or printed when the file can't be made (body.printing). --- */
.print-plan { display: none; background: #fff; color: var(--q-ink); font-size: var(--q-fs-info); line-height: 1.4; }
.print-plan.capturing { display: block; position: fixed; left: -12000px; top: 0; width: 794px; box-sizing: border-box; padding: 0 53px; }
.print-plan h1 { margin: 10px 0 2px; font-size: var(--q-fs-page); line-height: 1.1; }
.print-plan h2 { margin: 18px 0 8px; font-size: var(--q-fs-card); border-bottom: 1px solid var(--q-line); padding-bottom: 4px; break-after: avoid; }
/* The board's hero copied as it is, scaled to the page; its colours and photo kept. */
.pp-hero-copy { width: 1180px; zoom: .585; }
.pp-hero-copy, .pp-hero-copy * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp-hero-copy button { pointer-events: none; }
/* On paper there's no hover: the photo's credit in full, the ⓘ left out. */
.pp-hero[hidden] { display: none; }
.pp-photo { margin: 0; position: relative; }
.pp-photo img { display: block; width: 100%; height: 62mm; object-fit: cover; border-radius: 8px; }
.pp-photo figcaption { margin-top: 3px; font-size: var(--q-fs-badge); color: var(--q-mut); text-align: right; }
.pp-when { margin: 0; font-size: var(--q-fs-card); font-weight: 600; }
.pp-route { margin: 2px 0 0; color: var(--q-mut); }
.pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 12px 0 0; }
.pp-facts div { break-inside: avoid; }
.pp-facts dt { font-size: var(--q-fs-badge); text-transform: uppercase; letter-spacing: .04em; color: var(--q-mut); }
.pp-facts dd { margin: 0; }
.pp-bookings table { width: 100%; border-collapse: collapse; }
.pp-bookings td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--q-line); vertical-align: top; }
.pp-bookings tr { break-inside: avoid; }
.pp-kind { width: 22mm; color: var(--q-mut); font-size: var(--q-fs-small); }
.pp-date { width: 30mm; white-space: nowrap; }
.pp-price { width: 22mm; text-align: right; white-space: nowrap; }
.pp-sub { display: block; color: var(--q-mut); font-size: var(--q-fs-small); }
.pp-day { break-inside: avoid; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--q-line); border-radius: 8px; }
.pp-day > header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.pp-day > header b { font-size: var(--q-fs-button); }
.pp-day > header span { color: var(--q-mut); }
.pp-day ol { list-style: none; margin: 0; padding: 0; }
.pp-day li { display: grid; grid-template-columns: 14mm minmax(0, 1fr) auto; gap: 8px; padding: 3px 0; border-top: 1px solid var(--q-soft); }
.pp-day li:first-child { border-top: 0; }
.pp-day li.idea { color: var(--q-mut); }
.pp-day li.quiet { color: var(--q-mut); font-size: var(--q-fs-small); }
.pp-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-state { color: var(--q-mut); font-size: var(--q-fs-small); white-space: nowrap; }
.pp-warn { display: block; color: var(--q-bad); font-size: var(--q-fs-small); }
.pp-free { margin: 0; color: var(--q-mut); }
.pp-foot { margin-top: 16px; font-size: var(--q-fs-badge); color: var(--q-mut); text-align: center; }
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  body.printing > *:not(.print-plan) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing .print-plan { display: block; color: var(--q-ink); font-size: var(--q-fs-info); line-height: 1.4; }
  body.printing .print-plan { position: static; width: auto; padding: 0; }
}

/* ===== cardsB (plan v30): flip chip, +1, ticket stub, ride/rental, stay band, equal heights, back-face ‹ › ===== */
/* A foot with a price and a button keeps them in one row (the left side gives way). */
.pk-foot .pk-alt { display: inline-flex; align-items: center; gap: 3px; border-bottom: 0; padding: 3px 6px 3px 8px; font-size: 12px; border-radius: 999px; background: var(--v-lav, #f1eefc); color: var(--v-accent-ink, #4a35c8); font-weight: 650; }
.pk-foot .pk-alt:hover { background: color-mix(in srgb, var(--hx-accent, #5b45e0) 16%, var(--v-lav, #f1eefc)); color: var(--v-accent-ink, #4a35c8); }
.pk-noticket { margin-left: auto; font-size: var(--q-fs-small); color: var(--v-muted); white-space: nowrap; flex: none; }
.pk-foot > .pk-price ~ .pk-noticket { margin-left: 4px; }
/* A flight that lands another day: "+1" by the hour. */
.pk-stop > span sup.pk-plus { font-size: var(--q-fs-badge); font-weight: 800; color: var(--v-accent-ink, #4a35c8); margin-left: 2px; vertical-align: 5px; line-height: 0; cursor: help; }
/* A chosen flight's stub: what it costs per person and in all. */
/* A rental in the ride template: its line is under "Lizbon · the way". */
/* A stay's picture: a band across the card's whole width (~3:1), the photo covers it, a drawing sits whole in it. */
.pk-card .pk-media.pk-stay .pk-vis { width: auto; margin: 0 -16px; height: auto; aspect-ratio: 3 / 1; border-radius: 0; }
.pk-card .pk-media.pk-stay .pk-vis .pk-img { object-fit: cover; object-position: 50% 55%; }
.pk-card .pk-media.pk-stay .pk-vis .pk-illus { width: auto; height: 100%; max-width: 100%; margin: 0 auto; padding: 6px 0; top: 0; object-fit: contain; }
.pk-card .pk-media.pk-stay .pk-vis .pk-kindbig { transform: scale(1); }
/* The back: ‹ 2/4 › in its head, the one in focus ringed. */
.bk-door { margin-top: 6px; }

/* v11 (phase 2a): a planned card's "✓ Aldım" on its top line; the strip's link to the page to book on. */
.pk-aldim { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 3px 11px; border: 1.5px solid var(--plan-dot); border-radius: 999px; background: #fff; color: var(--plan-ink); font: inherit; font-size: var(--q-fs-info); font-weight: 650; white-space: nowrap; cursor: pointer; }
.pk-aldim:hover { background: var(--plan-bg); }
.pk-aldim:focus-visible { outline: 2px solid var(--plan-dot); outline-offset: 2px; }
a.pk-cta.pk-go { text-decoration: none; display: inline-flex; align-items: center; }
.ask-dlg h3 { overflow-wrap: anywhere; }

/* v11 (phase 5): the Pano. Every link gathered, big photo cards to choose from: tabs by what it is, Hepsi · Karar
   bekleyen · Planda, Sırala; four cards a row on a wide board; the price and one button on the same line in every
   card; who saved it and who liked it at the foot. Amber is chosen, green booked, the accent only for links. */
.pn { padding: 4px 0 40px; color: var(--hx-ink); }
.pn-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.pn-head h2 { margin: 0; font-size: 32px; font-weight: 750; letter-spacing: -.02em; }
.pn-n { color: var(--hx-muted); font-size: 15px; }
.pn-sp { flex: 1; }
.pn-back { border: 1px solid var(--hx-line); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--hx-ink); cursor: pointer; }
.pn-back:hover { background: var(--hx-card); }
.pn-cats { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--hx-line); margin: 0 0 14px; }
.pn-cats button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 0 10px; font: inherit; font-size: 15px; color: var(--hx-ink); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pn-cats button i { font-style: normal; color: var(--hx-muted); }
.pn-cats button.on { color: var(--hx-accent); border-bottom-color: var(--hx-accent); font-weight: 600; }
.pn-cats button.on i { color: var(--hx-accent); }
.pn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.pn-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f2f0ec; }
.pn-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--hx-muted); cursor: pointer; }
.pn-seg button b { font-weight: 700; margin-left: 3px; }
.pn-seg button[aria-pressed="true"] { background: #fff; color: var(--hx-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pn-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--hx-muted); }
.pn-sort select { font: inherit; font-size: 13.5px; color: var(--hx-ink); background: #fff; border: 1px solid var(--hx-line); border-radius: 10px; padding: 6px 10px; }
.pn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; align-items: stretch; }
.pn-empty { margin: 24px 0; padding: 18px; border-radius: 14px; background: var(--hx-card); color: var(--hx-muted); font-size: 15px; line-height: 1.5; }
.pn-group { margin: 0 0 26px; padding-top: 4px; border-radius: 16px; }
.pn-group.focus { outline: 2px solid var(--hx-accent); outline-offset: 8px; }
.pn-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.pn-gh b { font-size: 17px; }
.pn-gn, .pn-gw { color: var(--hx-muted); font-size: 14px; }
.pn-gp { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--plan-ink); cursor: pointer; }
.pn-cmp, .pn-why { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hx-accent); cursor: pointer; }
.pn-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--hx-line); box-shadow: 0 1px 2px rgba(28,26,51,.04), 0 6px 18px rgba(28,26,51,.05); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
.pn-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,26,51,.05), 0 12px 28px rgba(28,26,51,.09); }
.pn-card.in-chosen { border-color: var(--plan-line); }
.pn-card.in-booked { border-color: var(--book-line); }
.pn-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: color-mix(in srgb, var(--c) 10%, #fff); display: grid; place-items: center; overflow: hidden; }
.pn-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-art { color: var(--c); opacity: .85; }
.pn-badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--hx-accent); font-size: 12px; font-weight: 700; }
.pn-heart { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--hx-ink); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.pn-heart:active { transform: scale(.88); }
.pn-heart.on { color: #e11d5b; }
.pn-heart.on svg, .pn-likes svg { fill: currentColor; }
.pn-score { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); display: grid; place-content: center; text-align: center; font-weight: 750; font-size: 15px; line-height: 1; }
.pn-score small { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; color: var(--hx-muted); }
.pn-rib { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; }
.pn-rib.chosen { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #fff; color: var(--plan-ink); border: 1.5px solid var(--plan-line); }
.pn-bd { flex: 1; display: grid; align-content: start; gap: 5px; padding: 14px 14px 4px; min-width: 0; }
.pn-need { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--hx-muted); min-width: 0; }
.pn-need svg { color: var(--c); flex: none; }
.pn-bd h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pn-meta { margin: 0; font-size: 13px; color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 14px 12px; }
.pn-price { font-size: 13px; color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-price b { font-size: 16.5px; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.pn-put { flex: none; border: 1px solid #cfc6ff; background: #fff; color: var(--hx-accent); border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.pn-put:hover { background: var(--hx-lav); }
.pn-goplan { flex: none; border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 13.5px; font-weight: 650; color: #9a6400; cursor: pointer; white-space: nowrap; }
.pn-goplan.booked { color: #1f7a45; }
.pn-ft { display: flex; align-items: center; gap: 8px; padding: 9px 14px 11px; border-top: 1px solid #f0eee9; font-size: 12.5px; color: var(--hx-muted); min-width: 0; }
.pn-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-who.ai { color: var(--hx-accent); }
.pn-likes { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: #e11d5b; }
.pn-likes .wh-av { margin-left: -4px; box-shadow: 0 0 0 2px #fff; }
.pn-likes .wh-av:first-of-type { margin-left: 0; }
.pn-ft .pn-why { margin-left: auto; }
.pn-likes + .pn-why { margin-left: 8px; }
@media (max-width: 560px) { .pn-head h2 { font-size: 26px; } .pn-grid { gap: 12px; } }
/* v11 (phase 3): a booking's window. Its kind's colour in the corner; the price and "Rezerve · belgeli" in a green
   band; the reference, the way there or the nights as rows; the files; Değiştir · İptal ettim … Tüm detaylar · Kapat. */
.bk-sheet { width: min(640px, calc(100vw - 32px)); max-height: min(88vh, 820px); overflow: auto; border-radius: 22px; background: #fff; color: var(--hx-ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 70px rgba(0,0,0,.22); }
.bk-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #f0eee9; }
.bk-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.bk-tt { min-width: 0; flex: 1; }
.bk-tt h3 { margin: 0; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.bk-tt p { margin: 2px 0 0; font-size: 13.5px; color: var(--hx-muted); }
.bk-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hx-line); background: #fff; color: var(--hx-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.bk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 20px 6px; padding: 12px 14px; border-radius: 14px; background: #eef8f1; }
.bk-kind { font-size: var(--q-fs-small); font-weight: 650; color: #1f7a45; }
.bk-hero b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bk-lab { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--q-fs-info); font-weight: 700; color: #1f7a45; }
.bk-sec { padding: 12px 20px 4px; }
.bk-sec h4 { margin: 0 0 8px; font-size: var(--q-fs-info); font-weight: 650; color: var(--hx-muted); }
.bk-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 0; }
.bk-rows div { padding: 9px 12px; border-radius: 12px; background: #f6f9f6; min-width: 0; }
.bk-rows dt { font-size: 12px; color: var(--hx-muted); }
.bk-rows dd { margin: 2px 0 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bk-none { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--hx-card); color: var(--hx-muted); font-size: var(--q-fs-info); }
.bk-miss { border: 1px solid #f0a53a; background: #fbf6ea; color: #9a6400; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.bk-note { margin: 8px 0 0; font-size: var(--q-fs-small); color: var(--hx-muted); }
.bk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 20px 18px; margin-top: 10px; border-top: 1px solid #f0eee9; }
.bk-sp { flex: 1; }
.bk-btn { border: 1px solid var(--hx-line); background: #fff; color: var(--hx-ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: var(--q-fs-info); font-weight: 600; cursor: pointer; }
.bk-btn:hover { background: var(--hx-card); }
.bk-btn.dark { background: var(--hx-ink); border-color: var(--hx-ink); color: #fff; }
.bk-link { border: 0; background: none; padding: 7px 6px; font: inherit; font-size: var(--q-fs-info); font-weight: 600; color: var(--hx-accent); cursor: pointer; }
.bk-link.quiet { color: var(--hx-muted); font-weight: 500; }

/* v11 (phase 2b): a need with options is one card, one size: its name, "3 seçenek · €118'den başlıyor", the faces of
   who saved them and "3 seçenek ›" at its foot; the choice window lists yours first, the AI's alternative apart. */
.nd-card { border-style: dashed; }
.nd-body { padding: 4px 0 2px; }
.nd-body h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.nd-sub { margin: 4px 0 0; font-size: var(--q-fs-info); color: var(--hx-muted); }
.nd-foot { gap: 10px; }
.nd-opts { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 0; border-radius: 999px; background: var(--hx-lav); color: var(--hx-accent); font: inherit; font-size: var(--q-fs-info); font-weight: 650; cursor: pointer; }
.nd-opts:hover { background: #e2dcff; }
.nd-faces { display: inline-flex; }
.nd-faces > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--hx-lav); border-radius: 50%; }
.nd-faces > *:first-child { margin-left: 0; }
.nd-ai { width: 20px; height: 20px; display: inline-grid; place-items: center; background: #fff; font-size: 11px; }
.nd-foot .pk-state { margin-left: auto; }
.ch-for { margin: 14px 20px 2px; padding: 12px 14px; border-radius: 14px; background: var(--hx-lav); color: #2d2470; font-size: var(--q-fs-info); line-height: 1.5; }
.ch-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hx-line); background: #fff; }
.ch-row.on { border-color: var(--plan-line); background: #fff; }
.ch-sc { width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--hx-card); font-weight: 750; font-size: var(--q-fs-card); line-height: 1; }
.ch-sc small { display: block; margin-top: 2px; font-size: var(--q-fs-badge); font-weight: 600; color: var(--hx-muted); }
.ch-main { display: grid; gap: 2px; min-width: 0; }
.ch-main b { font-size: 15px; overflow-wrap: anywhere; }
.ch-time { font-weight: 500; color: var(--hx-muted); }
.ch-sub { font-size: var(--q-fs-info); color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--q-fs-small); color: var(--hx-muted); }
.ch-pr { text-align: right; }
.ch-pr b { font-size: var(--q-fs-card); font-variant-numeric: tabular-nums; }
.ch-pr small { display: block; font-size: var(--q-fs-small); color: var(--hx-muted); }
.ch-put { border: 0; border-radius: 999px; background: var(--hx-ink); color: #fff; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.ch-on { display: inline-flex; align-items: center; gap: 4px; font-size: var(--q-fs-info); font-weight: 700; color: #9a6400; }

/* v11 (phase 4): Yapılacak şeyler as tiles, like the activities' ideas; Gün gün's "Planda, günü yok". */
.it-glyph { display: grid; place-items: center; }
.ud-strip { margin: 0 0 16px; padding: 12px 14px; border-radius: 16px; background: #fbf6ea; border: 1px solid #f3dfb4; }
.ud-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; font-size: var(--q-fs-info); }
.ud-h i { font-style: normal; color: #9a6400; font-weight: 700; }
.ud-h span { color: var(--hx-muted); font-size: var(--q-fs-info); }
.ud-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ud-item { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--hx-line); font-size: 13.5px; }
.ud-name { font-weight: 600; }
.ud-city { color: var(--hx-muted); font-size: var(--q-fs-small); }

/* v11 (phase 6): insurance and eSIM side by side, as large; a section's spend before its bar. */
.ek-pair { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: stretch; }
.ek-pair > * { height: 100%; }

/* v11: the Plan's head (Kategoriye göre | Yolculuk sırasıyla, the stages' key) and the trip's shape under it. */
.plan-order { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f2f0ec; }
.plan-order button { border: 0; background: none; padding: 5px 11px; border-radius: 8px; font: inherit; font-size: 13.5px; color: #6e6a86; cursor: pointer; }
.plan-order button[aria-pressed="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.plan-key { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; font-size: var(--q-fs-small); color: var(--q-mut); }
.plan-key span { display: inline-flex; align-items: center; gap: 6px; }
.ch-main b a { color: inherit; text-decoration: none; }
.ch-main b a:hover { color: var(--hx-accent); text-decoration: underline; text-underline-offset: 3px; }
.ch-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--hx-lav); color: var(--hx-accent); font-size: var(--q-fs-small); font-weight: 700; vertical-align: 2px; }
.ch-needs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ch-need { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #f2f0ec; color: #6e6a86; }
.ch-need.yes { background: #eef8f1; color: #1f7a45; }
.ch-need.no { background: #fdeeee; color: #b4342f; }
.ch-status { font-size: var(--q-fs-small); font-weight: 650; color: #9a6400; }
.ch-why { justify-self: start; border: 0; background: none; padding: 2px 0; font: inherit; font-size: var(--q-fs-small); font-weight: 600; color: var(--hx-accent); cursor: pointer; }
.ch-detail { display: grid; gap: 6px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--hx-card); font-size: var(--q-fs-info); }
.ch-trade { margin: 0; color: #3a3850; }
.ch-pros, .ch-cons { margin: 0; padding-left: 16px; display: grid; gap: 2px; }
.ch-pros li::marker { content: "+  "; color: #1f8f4e; font-weight: 700; }
.ch-cons li::marker { content: "–  "; color: #d9534f; font-weight: 700; }
.ch-pros i, .ch-cons i { margin-left: 6px; font-style: normal; font-size: var(--q-fs-small); color: var(--hx-accent); }
.ch-verify { margin: 8px 20px 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--q-fs-info); color: #8a5a00; }
.ch-verify li { padding: 7px 12px; border-radius: 10px; background: #fbf6ea; }
.ch-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ch-prov { color: #9a6400 !important; font-weight: 650; }
a.ch-why { text-decoration: none; }

/* v30 · zamana göre gösterme: iptal süresi renkleri (yeşil > amber 14 gün > turuncu-kırmızı 7 gün > kırmızı son gün), alınmamış bilet, rötar, otel giriş saati */
.pk-cancel.soon { color: #a86400; }
.pk-cancel.near { color: #c2550a; }
.pk-cancel.red { color: #c62828; }
.pk-state.alert-orange .pk-when, .pk-state.alert-orange.pk-says { color: #c2550a; }
.pk-state.pk-says .pk-when { white-space: normal; margin-left: 0; }
.card-alert.orange, .pk-alert.orange { color: #c2550a; }
.pk-timed { min-width: 0; font-size: var(--q-fs-small); font-weight: 650; color: var(--v-book-ink, #1b7f45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-stop .pk-was { margin-right: 6px; font-weight: 500; color: var(--v-muted, #6b6790); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pk-card.pk-alert.pk-alert { background: #fff5f4; border-color: #c62828; box-shadow: inset 0 0 0 1px #c62828, 0 6px 18px -10px rgba(198, 40, 40, .45); }
.pk-card.pk-alert.pk-alert .pk-live-note.bad { font-weight: 700; }

/* v11 Hazırlık: why these, "Daha fazla öner", a line under each, "Hazır", Amazon for a thing to buy. */
.prep-sub { font-size: 12.5px; color: #8e8e93; }

/* v11: a card's stage word on its top line (Arıyoruz, Rezerve), the booking's stamp, ✨ ask, "Pano'da N alternatif". */
.pk-lab { font-size: var(--q-fs-small); font-weight: 650; white-space: nowrap; margin-right: 6px; }
.pk-lab.open { color: #8e8e93; font-weight: 500; }
.pk-card { position: relative; }
.pk-ask { flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--q-acc-s); font-size: var(--q-fs-info); line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pk-ask:hover { background: #e2dcff; }
.pk-ask:focus-visible { outline: 2px solid #6a4fe0; outline-offset: 2px; }
.pk-alt { border: 0; background: none; padding: 0 2px; font: inherit; font-size: var(--q-fs-small); color: #6e6e78; border-bottom: 1px dotted #b8b8c4; cursor: pointer; white-space: nowrap; }
.pk-alt:hover { color: #1c1a33; }

/* v11: the drawing in place of a photo, its white ground laid on the picture's tint. */
.pk-illus { width: 78%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }

/* v11: what we're looking for on a need still to find, and its searches ("Kendin ara"). */
.nd-wants { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.nd-wants li { font-size: var(--q-fs-small); font-weight: 600; color: #3d3d47; background: #f1f0f6; border-radius: 999px; padding: 3px 10px; }
.nd-wants li::before { content: "✓ "; color: #6a4fe0; }
.nd-self { margin-top: 8px; }
.nd-self .ek-find { margin: 0; }
.ch-wants { margin: 0 20px 6px; }
.nd-self .ek-find { justify-content: flex-start; }

/* v11: a need still to find has the kind's drawing on its left, as the drawing's empty slot. */
.nd-body.nd-has-art { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.nd-has-art > :not(.nd-art) { grid-column: 2; }
.nd-art { grid-row: 1 / span 4; width: 72px; height: 60px; border-radius: 12px; background: color-mix(in srgb, var(--mc, #1d8577) 10%, #fff); object-fit: contain; padding: 4px; mix-blend-mode: multiply; }

/* v11 Pano head: Kayıtlarda ara, Kartlar | Karşılaştır, + Link ekle; the comparison table. */
.pn-search { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #e3e1ec; border-radius: 999px; background: #fff; color: #8e8e93; }
.pn-search:focus-within { border-color: #6a4fe0; box-shadow: 0 0 0 3px #efebff; }
.pn-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; width: 150px; color: #1c1a33; }
.pn-view { display: inline-flex; padding: 3px; border-radius: 999px; background: #f1f0f6; }
.pn-view button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #6e6e78; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.pn-view button[aria-pressed="true"] { background: #fff; color: #1c1a33; box-shadow: 0 1px 3px rgba(28, 26, 51, .1); }
.pn-addlink { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; background: #1c1a33; color: #fff; font: inherit; font-size: 13.5px; font-weight: 650; padding: 6px 14px; cursor: pointer; }
.pn-addlink:hover { background: #2e2b4d; }
.pn-linkform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; padding: 10px; border: 1px solid #e3e1ec; border-radius: 14px; background: #fff; }
.pn-linkform input { flex: 1 1 260px; min-width: 0; border: 1px solid #e3e1ec; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; }
.pn-linkform input:focus { outline: 2px solid #6a4fe0; outline-offset: 1px; }
.pn-linkgo { border: 0; border-radius: 999px; background: #6a4fe0; color: #fff; font: inherit; font-weight: 650; padding: 7px 16px; cursor: pointer; }
.pn-linkgo:disabled { opacity: .45; cursor: default; }
.pn-linkno { border: 0; background: none; font: inherit; color: #6e6e78; cursor: pointer; }
.pn-linkerr { flex-basis: 100%; margin: 0; font-size: 13px; color: #b42318; }
.pn-tablewrap { overflow-x: auto; border: 1px solid #ececf1; border-radius: 14px; background: #fff; }
.pn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pn-table th, .pn-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #f1f0f6; }
.pn-table thead th { min-width: 150px; }
.pn-table thead th small { display: block; font-weight: 400; color: #8e8e93; font-size: 12px; }
.pn-tn { font-weight: 650; }
.pn-table tbody th { font-weight: 500; color: #6e6e78; white-space: nowrap; }
.pn-table td.best { color: #17784a; font-weight: 700; background: #f3faf6; }
.pn-tpart th { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #8e8e93; background: #faf9fc; }
.pn-table td.need-yes { color: #17784a; font-weight: 700; }
.pn-table td.need-no { color: #b42318; font-weight: 700; }
.pn-table td.need-unknown { color: #a1a1a6; }
.pn-tin { color: #17784a; font-weight: 650; }
.pn-tfoot td, .pn-tfoot th { border-bottom: 0; }

/* The start's side on the v11 page (2026-10-09): white cards on the lavender-grey; the checklist and the button as cards. */
.st-side .st-list { background: #fff; border-radius: 22px; padding: 20px 22px 12px; box-shadow: 0 1px 2px rgba(28, 26, 51, .05), 0 16px 40px -22px rgba(28, 26, 51, .28); }
.st-side .st-list-title { font-size: 21px; }
.st-side .st-list-sub { font-size: 14px; }
.st-side .st-rows { margin-top: 12px; }
.st-side .st-row { padding: 7px 0; }
.st-side .st-row-value { font-size: 15.5px; }
.st-side .st-check { background: #f1eefc; }
.st-side .st-gen-card { background: #fff; box-shadow: 0 1px 2px rgba(28, 26, 51, .05), 0 16px 40px -22px rgba(28, 26, 51, .28); }

@keyframes st-line-in { from { opacity: 0; transform: translateY(10px); } }

/* The generating screen (2026-10-09): the page's lavender-grey; the map a little taller; after the landing the photos
   bloom big over it (a place, a moment of the trip, another place), the map receding behind them; the steps lighter. */
.st-side:has(.st-gen) { background: #eeecf5; }
.st-gen h2 { font-size: 30px; font-weight: 750; letter-spacing: -.025em; }
.gm { aspect-ratio: 2.1 / 1; background: #fff; box-shadow: 0 1px 2px rgba(28, 26, 51, .05), 0 22px 50px -26px rgba(28, 26, 51, .4); }
.gm-svg, .gm-ov { transition: opacity .9s cubic-bezier(.4, 0, .2, 1), filter .9s cubic-bezier(.4, 0, .2, 1); }
/* No box behind the photos (Emre, 2026-10-09): when they arrive the card's white ground, shadow and sea melt away, the land
   becomes a thin line and the stops stay faint; the photos float on the page over a soft light. */
.gm { transition: background-color .6s ease, box-shadow .6s ease; }
.gm-sea, .gm-land { transition: fill .7s ease; }
.gm:has(.gm-card.in) { background: transparent; box-shadow: none; overflow: visible; }
.gm:has(.gm-card.in) .gm-sea, .gm:has(.gm-card.in) .gm-land { fill: transparent; }
.gm:has(.gm-card.in) .gm-svg { opacity: .5; }
.gm:has(.gm-card.in) .gm-ov { opacity: .35; }
.gm-photos { isolation: isolate; }
.gm-photos::before { content: ""; position: absolute; left: 4%; right: 4%; top: -4%; bottom: -10%; z-index: -1; opacity: 0; transition: opacity .9s ease; background: radial-gradient(closest-side, rgba(190, 170, 255, .6), rgba(190, 170, 255, 0)); }
.gm:has(.gm-card.in) .gm-photos::before { opacity: 1; }
.gm:has(.gm-card.in) .gm-credit { opacity: 0; transition: opacity .5s; }
.gm-photos { left: 5%; right: 5%; bottom: 8%; top: 12%; justify-content: center; gap: 2.4%; }
.gm-card { width: 30%; height: 100%; margin: 0; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 2px 4px rgba(28, 26, 51, .08), 0 26px 50px -18px rgba(28, 26, 51, .55);
  transform: translateY(42px) scale(.88); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.gm-card-1 { transition-delay: .16s; }
.gm-card-2 { transition-delay: .32s; }
.gm-card img { transform: scale(1.12); transition: transform 6s cubic-bezier(.25, .1, .25, 1); }
.gm-card.in img { transform: scale(1); }
.gm-card > span { left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: 15px; font-weight: 750; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.gm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 16, 40, .55)); }
.gm-card-0.in { opacity: 1; transform: rotate(-2.5deg) translateY(6px); }
.gm-card-1.in { opacity: 1; transform: translateY(-6px); z-index: 2; }
.gm-card-2.in { opacity: 1; transform: rotate(2.5deg) translateY(6px); }

/* The chat while the trip is made: each step said as it finishes. */
.st-msgs { scroll-behavior: smooth; }
.st-genlines { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.st-genline { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #3d3863; animation: st-line-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.st-genline-tick { flex: none; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: #22a35a; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .st-msgs { scroll-behavior: auto; }
  .st-genline { animation: none; }
  .gm-card, .gm-card img, .gm-svg, .gm-ov { transition: none; }
}
.st-msg-bot .st-why { color: #6b6790; font-size: .94em; }

/* Completion motions (the pıt pıt vocabulary, drawing v2): the check pops and scatters six dots, the ring fills softly,
   the question being asked has a row that breathes. Nothing moves with reduced motion. */
.st-sp { position: absolute; inset: 0; pointer-events: none; }
.st-sp i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #5b45e0; opacity: 0; }
.st-sp i:nth-child(3n+2) { background: #2cc79a; } .st-sp i:nth-child(3n) { background: #f0a53a; }
.st-row.done .st-sp i { animation: st-burst .55s ease-out both; }
@keyframes st-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-27px) scale(.3); } }
.st-ring-fg { transition: stroke-dasharray .55s cubic-bezier(.16, 1, .3, 1); }
.st-row.ask .st-check { animation: st-ask 1.7s ease-in-out infinite; }
@keyframes st-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 69, 224, .35); } 50% { box-shadow: 0 0 0 8px rgba(91, 69, 224, 0); } }
@media (prefers-reduced-motion: reduce) { .st-sp { display: none; } .st-row.ask .st-check { animation: none; } }

/* The home (drawing v2, 2026-10-09): the route backdrop and the poster trip card. */
.hm-bg { position: absolute; left: 0; right: 0; top: 0; height: 760px; z-index: -1; pointer-events: none; overflow: hidden; }
.hm-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vcard { display: block; width: 100%; max-width: 352px; padding: 0; border: 0; background: none; font: inherit; color: #1c1a33; text-align: left; cursor: pointer; --tint: #1c1a33; --ring: #fff; }
.vcard .pic { position: relative; display: block; height: 270px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #e8e2ff, #c9bdfb 55%, #a99bf0); box-shadow: 0 1px 2px rgba(28, 26, 51, .06), 0 18px 40px -22px rgba(28, 26, 51, .5); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.vcard:hover .pic { transform: translateY(-3px); }
.vcard:focus-visible { outline: 0; } .vcard:focus-visible .pic { outline: 3px solid rgba(91, 69, 224, .45); outline-offset: 3px; }
.vcard .pic-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 40%, color-mix(in srgb, var(--tint) 92%, #000) 122%); }
.vcard .who { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; }
.vcard .vp { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #5b45e0; font-size: var(--q-fs-small); font-weight: 650; }
.vcard .foot { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: block; color: #fff; }
.vcard .ttl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: balance; overflow-wrap: break-word; font-size: var(--q-fs-price); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; text-shadow: 0 1px 14px rgba(0, 0, 0, .25); }
.vcard .ttl.m { font-size: 22px; line-height: 1.1; } .vcard .ttl.l { font-size: 19px; line-height: 1.14; letter-spacing: -.015em; }
.vcard .vc-inf { display: block; max-width: 100%; margin-top: 6px; font-size: var(--q-fs-info); font-weight: 550; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard .fc { display: inline-flex; flex: none; }
.vcard .fc i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; box-shadow: 0 0 0 2.5px var(--ring); }
.vcard .fc i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .fc i + i { margin-left: -9px; } .vcard .fc .cn { background: #e6e2f3; color: #5d5885; font-size: 11.5px; }
.vcard.draft .pic { background: repeating-linear-gradient(135deg, rgba(91, 69, 224, .08) 0 10px, transparent 10px 20px), #ece8ff; border: 1.5px dashed #b9b5cf; box-shadow: none; }
.vcard.draft .pic::after { display: none; } .vcard.draft .foot { color: #4a35cc; } .vcard.draft .ttl { text-shadow: none; }
.vcard.draft .vp { background: #fff; border: 1px dashed #b9b5cf; }
.st-draft { position: relative; width: 100%; max-width: 352px; }
.st-draft-x { position: absolute; left: 14px; top: 14px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #6b6790; font-size: 18px; line-height: 1; opacity: .75; transition: opacity .2s, color .2s; }
.st-draft:hover .st-draft-x, .st-draft-x:focus-visible { opacity: 1; } .st-draft-x:hover { color: #c62828; }
/* 0.47.0: a trip card's × on hover (top right, the days left step aside), asked once on the card */
.st-trip { position: relative; width: 100%; max-width: 352px; }
.st-trip > .trip-card { width: 100%; }
.st-trip-x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #6b6790; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.st-trip:hover .st-trip-x, .st-trip-x:focus-visible { opacity: 1; }
.st-trip-x:hover { color: #c62828; }
.st-trip .vp { transition: right .15s; }
.st-trip:hover .vp, .st-trip:focus-within .vp { right: 48px; }
.st-ask { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(28, 26, 51, .22); color: #1c1a33; }
.st-ask b { font-size: 15px; font-weight: 800; }
.st-ask > span { font-size: 13px; color: #5d5a78; line-height: 1.4; }
.st-ask-b { display: flex; gap: 8px; margin-top: 6px; }
.st-ask-b button { all: unset; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; background: #f7f6fb; color: #1c1a33; }
.st-ask-b .st-ask-del { background: #c62828; color: #fff; }
.st-ask-b button:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
@media (hover: none) { .st-trip-x { opacity: .85; } }

/* ============================================================================================================   v11 as drawn (docs/superpowers/specs/2026-10-09-v11-canli-fark-listesi.md; values from the drawing's own tokens):
   the plan bar on one line, each section its own card, the cards in a grid, the three stages' grounds (Arıyoruz white
   and dashed, Seçildi cream, Rezerve mint), a small picture beside the name, a quiet foot over a hairline.
   =================================================================================================================== */
:root {
  --v-ink: var(--q-ink); --v-muted: var(--q-mut); --v-line2: var(--q-line); --v-dash: var(--q-st-wait-line); --v-soft: #f7f5f1; --v-tile: #fbfaf7;
  --v-lav: var(--q-acc-s); --v-accent-ink: var(--q-acc-d);
  /* Amber is a warning's colour only (a visa to sort, a count of what is left): Seçildi is sand, see the F0 block at the end. */
  --v-warn-bg: #fff6e6; --v-warn-ink: var(--q-warn); --v-warn-dot: var(--q-warn);
  --v-book-bg: var(--book-bg); --v-book-line: var(--book-line); --v-book-ink: var(--book-ink);
}
/* The plan bar: "Plan", the order switch, "+ Ekle", the key on the right. */
.plan-h { font-size: var(--q-fs-intent); font-weight: 700; letter-spacing: -.01em; color: var(--v-ink); }

/* Each section its own card. */
.cat-head { gap: 14px; padding: 14px 18px; }
.cat-head:hover { background: var(--v-soft); }
.cat-ic { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.cat-n { font-style: normal; font-size: 14px; font-weight: 600; color: var(--v-muted); }
.cat-body { padding: 4px 18px 18px; display: grid; gap: 14px; }

/* A card: the three stages' grounds. */
.pk-card { border-radius: 18px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; background: #fff; border: 1.5px dashed var(--v-dash); color: var(--v-ink); box-shadow: none; }
.pk-card:hover { box-shadow: 0 1px 2px rgba(28, 26, 51, .06), 0 6px 18px -10px rgba(28, 26, 51, .25); }
.pk-card.pk-r-open { background: #fff; border: 1.5px dashed var(--v-dash); }
.pk-top { height: auto; min-height: 24px; gap: 8px; font-size: var(--q-fs-info); color: var(--v-muted); }
.pk-kind { color: var(--v-ink); font-weight: 650; gap: 5px; }
.pk-kind svg { color: var(--mc); }
.pk-ring { width: 18px; height: 18px; }
.pk-lab { font-size: var(--q-fs-small); }
.pk-lab.open { color: var(--v-muted); font-weight: 500; }
.pk-aldim { padding: 3px 10px; font-size: var(--q-fs-small); }

/* The body: a small picture beside the name and one grey line. */
.pk-media { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; margin: 0; align-items: center; }
.pk-vis { width: 60px; height: 50px; border-radius: 12px; background: var(--v-tile); }
.pk-vis .pk-img { object-fit: cover; }
.pk-vis .pk-illus { width: 100%; height: 100%; padding: 4px; object-fit: contain; mix-blend-mode: multiply; }
.pk-vis .pk-kindbig { transform: scale(.45); }
.pk-vis svg.pk-sil { width: 44px; height: 38px; }
.pk-score, .pk-meta { display: none; }
.pk-txt h3 { font-size: var(--q-fs-card); font-weight: 750; letter-spacing: -.015em; line-height: 1.2; }
.pk-txt p { margin-top: 2px; font-size: var(--q-fs-info); color: var(--v-muted); }
.pk-txt p b { color: var(--v-muted); font-weight: 400; }
.pk-moons { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: 1px; }
.pk-moons i { width: 7px; height: 7px; border-radius: 50%; background: #1d8577; opacity: .35; }
.pk-r-half .pk-moons i { background: var(--plan-dot); opacity: 1; }
.pk-r-done .pk-moons i { background: var(--v-book-ink); opacity: 1; }

/* A ticket's ends: the cities big, the hour and code small, the plane faint in the middle. */
.pk-mid { grid-template-columns: auto minmax(50px, 1fr) auto; gap: 8px; margin: 0; }
.pk-mid.has-logo { grid-template-columns: auto minmax(50px, 1fr) auto; }
.pk-mid .pk-logo { display: none; }
.pk-stop b, .pk-stop b.long { font-size: var(--q-fs-category); font-weight: 750; letter-spacing: -.02em; }
.pk-stop > span { font-size: var(--q-fs-small); color: var(--v-muted); margin-top: 1px; }
.pk-stop > span strong { font-size: var(--q-fs-info); color: var(--v-ink); font-weight: 700; }
.pk-route { height: 44px; }
.pk-route small { position: static; display: block; margin: 0; text-align: center; font-size: 12px; color: var(--v-muted); white-space: nowrap; }
.pk-art { top: 44px; height: 44px; width: 34%; opacity: .55; }
.pk-r-done .pk-art, .pk-r-half .pk-art { opacity: .7; }

/* The foot: over a hairline, no box. */
.pk-foot { min-height: 34px; padding: 10px 0 0; margin: 0; border-radius: 0; background: none; border-top: 1px solid color-mix(in srgb, var(--v-dash) 40%, transparent); gap: 8px; flex-wrap: wrap; row-gap: 6px; font-size: var(--q-fs-info); }
.pk-state { font-size: var(--q-fs-info); }
.pk-state.done { color: var(--v-book-ink); }
.pk-price { margin-left: 0; font-size: var(--q-fs-small); color: var(--v-muted); }
.pk-price b { font-size: var(--q-fs-card); font-weight: 750; color: var(--v-ink); }
.pk-foot > .pk-cta, .pk-foot > .pk-go { margin-left: auto; height: auto; padding: 7px 14px; font-size: 13.5px; font-weight: 600; background: var(--v-ink); color: #fff; }
.pk-foot .pk-alt { margin-left: 4px; }
.pk-more { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: var(--q-fs-small); color: var(--v-muted); cursor: pointer; white-space: nowrap; }
.pk-more:hover { color: var(--v-ink); }
.pk-docname { display: inline-flex; align-items: center; gap: 4px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--v-book-ink); border: 1px solid var(--v-book-line); background: #fff; border-radius: 999px; padding: 2px 9px; cursor: pointer; font-family: inherit; }

/* A ticket's stub (a booked flight): the airline, the booking code, how many go. */

/* v11 fixes after the first look: the plan bar's "+ Ekle" by the switch; the plane in the ticket's middle, no
   duration under it; a booking's foot is its proof, its file and "Ayrıntı" (its price is in the section's head). */
.pk-route small { display: none; }
.pk-art { top: 50px; }
.pk-r-done .pk-foot .pk-price { display: none; }
.nd-body h3 { font-size: var(--q-fs-card); font-weight: 750; letter-spacing: -.015em; }
.nd-route .pk-mid { margin: 2px 0 0; }
.nd-card .pk-art { top: 46px; }

/* v11 the trip's shape as drawn: the picture in the ring, the way moving along the dotted line, its length under it. */

.cat-body > .cat-hidden-link, .cat-body .cat-hidden { margin-left: 0; padding-left: 0; }

/* v11 Hazırlık as drawn: three across, each a soft tile with a square tick; a ready one white with a green edge and
   "Hazır" (not struck through); a thing to buy has "Amazon ↗". */
.prep { margin: 0; display: grid; gap: 10px; }
.prep-sub { font-size: 12px; color: var(--v-muted); }

/* v11 the Pano's cards as drawn: the drawing when the page gave no photo, a flight's arc, the site's mark, "Neden?". */
.pn-illus { background: var(--v-tile); }
.pn-illus img { width: 70%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.pn-meta { display: flex; align-items: center; gap: 6px; }
.pn-bm { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 800; }
.pn-why { color: var(--v-accent-ink); font-weight: 600; }
.pn-whylist { list-style: none; margin: 0; padding: 8px 14px 12px; display: grid; gap: 4px; font-size: 13px; border-top: 1px solid var(--v-line2); }
.pn-whylist .pro { color: var(--v-book-ink); }
.pn-whylist .con { color: #c62828; }
.pn-whylist .cmp button { border: 0; background: none; padding: 0; font: inherit; color: var(--v-accent-ink); font-weight: 600; cursor: pointer; }
.pn-img:has(.pn-illus) { background: var(--v-tile); }
.pn-illus { position: absolute; inset: 0; display: grid; place-items: center; }

/* v11 Yapılacak şeyler as drawn: flush with the section, five small tiles across, the drawing in place of a photo,
   "Daha fazla öner" filled lavender, the note plain. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A ticket's ends never broken inside a word ("Booking.co / m"): long ones a size smaller, wrapping at spaces. */
.pk-stop b, .pk-stop b.long { overflow-wrap: normal; word-break: normal; }
.pk-stop b.long { font-size: 17px; }
.nd-body.nd-has-art > .nd-wants, .nd-body.nd-has-art > .nd-self { grid-column: 1 / -1; }
/* One card (drawing v3, 2026-10-09): the photos on top of the checklist; the flights and the styles inside their rows. */
.st-side .st-list .st-pv-photos { margin-bottom: 16px; }
.st-row-sub { display: block; margin-top: 1px; font-size: 13px; font-weight: 500; color: #7a76a0; }
.st-row-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.st-row-chip { padding: 2px 10px; border-radius: 999px; background: #efeaff; color: var(--hx-accent); font-size: 12.5px; font-weight: 650; }

/* The panel holds what's placed absolutely inside it (the screen-reader count, tooltips, a card's "+"): without a
   position of its own they'd count against the page and make the whole page scroll past its end. */
.panel { position: relative; }

/* ===== A card's contents, one standard (Emre 2026-10-09: "üstü binen yazılar … bir standarda dönüşmesi gerekiyor"):
   a card never wider than its cell; long names wrap at words, their lines under them two at most; the live boxes as
   many across as fit; the top line wraps under itself; a booking's foot is its word, a red date if one runs out, its
   file and "Ayrıntı". */
.pk-card { min-width: 0; max-width: 100%; }
.pk-top { flex-wrap: wrap; row-gap: 4px; }
.pk-top .pk-date { white-space: normal; }
.pk-end { margin-left: auto; }
.pk-mid, .pk-mid.has-logo { grid-template-columns: minmax(0, 1fr) minmax(36px, .55fr) minmax(0, 1fr); }
.pk-stop { min-width: 0; }
.pk-stop b, .pk-stop b.long { overflow-wrap: break-word; hyphens: auto; }
.pk-stop > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pk-txt h3, .nd-body h3 { overflow-wrap: break-word; }
.pk-txt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pk-live { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); grid-auto-columns: auto; margin: 2px 0 0; }
.pk-lv { padding: 8px 10px; gap: 8px; }
.pk-lv b { font-size: var(--q-fs-card); }
.pk-booked .pk-foot .pk-sub { display: none; }
.pk-foot .pk-src { font-size: 11px; color: var(--v-muted); margin-left: 0; }
.pk-docname { max-width: min(200px, 100%); min-width: 0; }
.pk-docname > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-foot .pk-state { min-width: 0; }

/* The way's drawing sits in the middle of its ends, in the flow (never over the top line or the boxes). */
.pk-route { position: relative; display: grid; align-items: center; height: auto; min-height: 40px; }
.pk-route .pk-art { position: static; transform: none; width: 100%; max-width: 120px; height: 40px; margin: 0 auto; opacity: .6; }
.pk-r-done .pk-route .pk-art, .pk-r-half .pk-route .pk-art { opacity: .75; }

/* v11 revision: Yapılacak şeyler — on the plan as rows (picture, name, its line, its day or "Günü yok", ✓ Planda), the
   ideas and suggestions as tiles under them. */
.it-rows { display: grid; gap: 8px; }

/* The layered interface (docs/mockups/ux-katmanli-arayuz): tips, the folded change lines, the sticky bar. Additions only. */
.tipx { position: relative; outline: none; }
.tipx:focus-visible { outline: 2px solid #5b45e0; outline-offset: 3px; border-radius: 6px; }
.tipx-box { position: fixed; z-index: 1000; width: max-content; box-sizing: border-box; padding: 9px 12px; border-radius: 12px; background: #221b3a; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; letter-spacing: 0; text-transform: none; pointer-events: none; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55); animation: tipx-in .14s ease-out both; }
.tipx-box::after { content: ""; position: absolute; left: 18px; top: 100%; border: 6px solid transparent; border-top-color: #221b3a; }
.tipx-box.right::after { left: auto; right: 18px; }
.tipx-box.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #221b3a; }
@keyframes tipx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tipx-h { display: block; margin-bottom: 4px; font-weight: 700; }
.tipx-line { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.tipx-line .d { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; }
.tipx-line .d.bk { background: #4cc38a; } .tipx-line .d.ch { background: #f0c25c; } .tipx-line .d.fr { background: #c9c3e6; } .tipx-line .d.ov { background: #ff7ab0; }
.tipx-note { display: block; margin-top: 6px; font-size: 12px; color: #c9c3e6; }
.ev-fold { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ev-fold-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 5px 12px; background: #f1eefb; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ev-fold-btn:hover { background: #e8e3fa; }
.ev-fold-btn:focus-visible { outline: 2px solid #5b45e0; outline-offset: 2px; }
.ev-fold-btn > span:first-child { color: #1d8a5a; }
.ev-fold-chev { transition: transform .2s ease; }
.ev-fold.open .ev-fold-chev { transform: rotate(180deg); }
.ev-fold-list { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: st-in .2s ease-out both; }
.sbar-d { font-size: 13.5px; color: var(--muted); }
.sbar-track { width: 80px; height: 6px; border-radius: 3px; background: #ebe8f5; overflow: hidden; }
.sbar-track i { display: block; height: 100%; background: #1d8a5a; }
@media (max-width: 760px) { .sbar-d, .sbar-track { display: none; } }
@media (prefers-reduced-motion: reduce) { .tipx-box, .ev-fold-list, .ev-fold-chev { transition: none; animation: none; } }

/* Layered interface, round 2 (docs/mockups/ux-katmanli-arayuz): additions only. */
/* -- Kopyala: an empty, zero-wide button beside the text; its pill is drawn by its ::before (so the text around reads and copies as before) -- */
.cpy { position: relative; display: inline; }
.cpy-b { position: relative; display: inline-block; width: 0; height: 1em; margin: 0; padding: 0; border: 0; background: none; vertical-align: middle; overflow: visible; font: inherit; cursor: pointer; user-select: none; -webkit-user-select: none; }
.cpy-b::before { content: attr(data-label); position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); box-sizing: border-box; padding: 3px 9px 3px 25px; border-radius: 99px; background: #f1edff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a36c9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h10v11H9zM5 15V4h10'/%3E%3C/svg%3E") no-repeat 9px center / 12px; color: #4a36c9; font-family: inherit; font-size: 11.5px; font-weight: 650; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .16s ease; box-shadow: 0 2px 8px -3px rgba(28, 26, 51, .35); }
.cpy.right .cpy-b::before { left: 6px; }
.pk-stop > span:has(.cpy) { overflow: visible; }
.cpy.below .cpy-b { position: static; }
.cpy.below .cpy-b::before { top: 100%; left: 0; margin-top: 5px; transform: none; }
.cpy:hover .cpy-b::before, .cpy-b:focus-visible::before, .cpy-b.done::before { opacity: 1; pointer-events: auto; }
.cpy-b:focus-visible { outline: none; }
.cpy-b:focus-visible::before { outline: 2px solid #5b45e0; outline-offset: 2px; }
.cpy-b.done::before { background-color: #e4f5ec; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d8a5a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); color: #1d8a5a; }
@media (hover: none) { .cpy-b::before { opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .cpy-b::before { transition: none; } }
/* -- Geri alma halkası: the time left to "Geri al" -- */
.pk-undo-ring { width: 26px; height: 26px; flex: none; }
.pk-undo-ring circle { fill: none; stroke-width: 3; }
.pk-undo-ring .track { stroke: rgba(255, 255, 255, .25); }
.pk-undo-ring .run { stroke: #fff; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 0; animation: pk-undo-run linear forwards; }
@keyframes pk-undo-run { to { stroke-dashoffset: 94.25; } }
/* -- The hero's plan-line tips: a name and where it stands on each line -- */
.tipx-line b { flex: none; font-weight: 650; color: #c9c3e6; }
/* -- "Kendin ara": logo first, the name and ↗ open beside it on hover or focus (a screen with a pointer; a touch screen keeps the names) -- */
.ek-up { color: #8e8e93; }
@media (hover: hover) {
  .ek-find { flex-wrap: nowrap; }
  .ek-link { gap: 0; padding: 0 5px; }
  .ek-link .ek-nm { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease; }
  .ek-link:hover .ek-nm, .ek-link:focus-visible .ek-nm { max-width: 190px; margin-left: 5px; padding-right: 3px; opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) { .ek-link .ek-nm { transition: none; } }
/* -- Eylem ikonları: on a pointer screen the card's most used menu lines show on its top edge while it is pointed at -- */
.pk-strip { position: absolute; top: -15px; right: 14px; z-index: 5; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #fff; border: 1px solid var(--q-line); box-shadow: 0 6px 16px -8px rgba(28, 26, 51, .4); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.pk-strip button { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #3b3560; display: grid; place-items: center; cursor: pointer; }
.pk-strip button:hover { background: #f1edff; color: #4a36c9; }
.pk-card:hover > .pk-strip, .pk-card:focus-within > .pk-strip { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .pk-strip { display: none; } }
@media (prefers-reduced-motion: reduce) { .pk-strip { transition: none; } }
/* -- Kim ne yaptı: a person's latest action under their name in the who box -- */
.hx-who-list .who-name small.wh-last { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.25; color: var(--hx-muted); }
/* -- Pano sekmesindeki nokta: the other traveller did something since the Pano was last open here -- */
.tab-dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #e0457b; box-shadow: 0 0 0 2px #fff; }
/* -- Hareket sözlüğü (motion.ts): nothing here moves the layout; all off for reduced motion -- */
@keyframes mv-stamp { from { transform: scale(1.8); opacity: 0; } 70% { transform: scale(.92); opacity: 1; } }
@keyframes pk-pop { 0% { transform: scale(.4) rotate(-14deg); opacity: .2; } 60% { transform: scale(1.18) rotate(4deg); opacity: 1; } }
@keyframes pk-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 69, 224, 0); } 35% { box-shadow: 0 0 0 10px rgba(91, 69, 224, .6); } }
@keyframes pk-drop { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 70% { opacity: 1; transform: translateY(2px) scale(1); } }
@keyframes pk-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 116, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(139, 116, 255, .15); } }
.pk-seal .okt { animation: mv-stamp 420ms cubic-bezier(.2, .9, .3, 1.3) backwards; }
.pk-glow { animation: pk-glow 1.1s ease-out; }
.pk-drop { animation: pk-drop .55s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.pk-card { transition: transform .18s ease, box-shadow .2s ease; }
@media (hover: hover) { .pk-card:not(.pk-open):not(.ek-still):hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,26,51,.05), 0 12px 28px rgba(28,26,51,.09); } }
.counting { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .pk-seal .okt, .pk-glow, .pk-drop { animation: none; }
  .pk-card { transition: none; }
  .pk-card:not(.pk-open):not(.ek-still):hover { transform: none; }
}
/* -- The assistant's mascot in the chat (Mascot.tsx); the opening itself (opening.ts) draws nothing of its own -- */
.chat-title { display: flex; align-items: center; gap: 10px; }
.mascot-seat { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: -2px 0; border-radius: 50%; }
.ms-wrap { display: inline-block; line-height: 0; }
.ms { overflow: visible; }
.ms-wrap .eyes, .ms-wrap .eye { transform-box: fill-box; transform-origin: center; }
.ms-wrap .happy { opacity: 0; }
.ms-wrap[data-state="idle"] .eyes { animation: ms-blink 3.2s infinite; }
.ms-wrap[data-state="wink"] .eye.r { animation: ms-wink .7s ease-in-out both; }
.ms-wrap[data-state="work"] .ms { animation: ms-bob 1.1s ease-in-out infinite; }
.ms-wrap[data-state="work"] .eyes { animation: ms-look 2.2s ease-in-out infinite; }
.ms-wrap[data-state="done"] .ms { animation: ms-hop 900ms cubic-bezier(.2, .9, .3, 1.3) infinite alternate; }
.ms-wrap[data-state="done"] .eye { opacity: 0; }
.ms-wrap[data-state="done"] .happy { opacity: 1; }
@keyframes ms-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ms-wink { 0%, 100% { transform: scaleY(1); } 25%, 75% { transform: scaleY(.12); } }
@keyframes ms-bob { 50% { transform: translateY(-4px); } }
@keyframes ms-hop { to { transform: translateY(-5px) scale(1.04); } }
@keyframes ms-look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-1.5px); } 65% { transform: translateX(1.5px); } }
@media (prefers-reduced-motion: reduce) { .ms-wrap .eyes, .ms-wrap .eye, .ms-wrap .ms { animation: none !important; } }

/* -- Hareket dili (docs/mockups/hareket, 2026-10-10): five durations, three curves. Exits are quicker than entrances;
   only opacity, transform and light move, never a box's size or place; with reduced motion the colour changes stay and the
   movement goes. Cards and their options are not touched here (their own design line, plan-v19). -- */
:root {
  --t-instant: 120ms; --t-quick: 180ms; --t-base: 260ms; --t-slow: 380ms; --t-story: 600ms;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-in: cubic-bezier(.5, 0, .75, 0); --e-move: cubic-bezier(.65, 0, .35, 1);
}
@keyframes mv-fade { from { opacity: 0; } }
@keyframes mv-pop { from { opacity: 0; transform: scale(.96); } }
@keyframes mv-leave { to { opacity: 0; } }
@keyframes mv-shrink { to { opacity: 0; transform: scale(.97); } }
@keyframes mv-drawer-out { to { transform: translateX(102%); } }
@keyframes mv-drawer { from { transform: translateX(102%); } }
@keyframes mv-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes mv-unfold { from { opacity: 0; transform: translateY(-6px); } }
@keyframes mv-tab { from { opacity: 0; transform: scaleX(.3); } }
@keyframes mv-tab-in { from { opacity: 0; transform: translateX(calc(var(--tab-dir, 0) * 12px)); } }
@keyframes mv-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes mv-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes mv-spin { to { transform: rotate(360deg); } }
@keyframes mv-blur-up { from { opacity: 0; filter: blur(16px); transform: scale(1.05); } }
@keyframes ms-oops { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-2deg); } }
@keyframes ms-breathe { 50% { transform: scale(1.035); } }
@keyframes ms-zz { 0% { opacity: 0; transform: translate(0, 2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -6px); } }

/* 1 · the view tabs: the line grows under the chosen tab; the view fades in (opacity only: nothing shifts under the pointer) */
.view-tabs button.on::after { animation: mv-tab var(--t-base) var(--e-out) backwards; }
.panel .cat-plan, .panel .trip-plan, .panel .doc-tab, .panel .tm-tab, .panel .pn { animation: mv-tab-in var(--t-base) var(--e-out) backwards; }
/* a trip's card photo grows into its hero (viewTransition.ts withTripPhoto); the rest crossfades as before */
::view-transition-group(trip-photo) { animation-duration: 600ms; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
::view-transition-old(trip-photo), ::view-transition-new(trip-photo) { height: 100%; object-fit: cover; animation-duration: 600ms; }
:root[data-photo="back"]::view-transition-group(trip-photo), :root[data-photo="back"]::view-transition-old(trip-photo), :root[data-photo="back"]::view-transition-new(trip-photo) { animation-duration: 420ms; }

/* 2 · windows and the drawer: the backdrop fades in, the window grows from 96 %, the drawer slides in from the right.
   (They leave at once: each is taken off the page when closed.) The options window (ChoiceSheet) is left to the card design. */
.modal, .overlay, .compare-modal, .pk-sheet-back { animation: mv-fade var(--t-base) var(--e-out) backwards; }
.modal > .modal-card, .modal > .hs-dlg, .modal > .hs-hist, .modal > .bk-sheet, .compare-card, .pk-sheet { animation: mv-pop var(--t-base) var(--e-out) backwards; }
.drawer { animation: mv-drawer 320ms var(--e-out) backwards; }
.mv-leaving { pointer-events: none !important; animation: mv-leave var(--t-quick) var(--e-in) forwards !important; }
.mv-leaving > .modal-card, .mv-leaving > .hs-dlg, .mv-leaving > .hs-hist, .mv-leaving > .bk-sheet, .mv-leaving .compare-card, .mv-leaving > .pk-sheet { animation: mv-shrink var(--t-quick) var(--e-in) forwards !important; }
.drawer.mv-leaving { animation: mv-drawer-out 220ms var(--e-in) forwards !important; }
/* a section the traveller opens unfolds; its arrow turns with it */
.cat-body.mv-unfold { animation: mv-unfold var(--t-base) var(--e-out) 40ms backwards; }

/* 3 · waiting: the assistant's dots; a trip card's photo comes out of a blur; the home's "N kayıt işleniyor…" as a pill */
.thinking { display: flex; align-items: center; gap: 8px; }
.thinking .th-line { animation: mv-fade var(--t-quick) ease-out backwards; }
.th-dots { display: inline-flex; gap: 3px; flex: none; }
.th-dots i { width: 5px; height: 5px; border-radius: 50%; background: #8b74ff; animation: mv-dot 1.1s ease-in-out infinite; }
.th-dots i:nth-child(2) { animation-delay: .15s; }
.th-dots i:nth-child(3) { animation-delay: .3s; }
.vcard img.pic-img.loaded { animation: mv-blur-up var(--t-story) var(--e-out) backwards; }
.work-pill { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid #e6e2ef; font-weight: 600; animation: mv-rise var(--t-quick) var(--e-out) backwards; }
.work-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid #ddd5ff; border-top-color: #5b45e0; animation: mv-spin .8s linear infinite; }
/* "Plana koy" (putFly.ts): the card's name flies to the Plan tab */
.mv-fly { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; max-width: 220px; padding: 5px 11px; border-radius: 10px; background: #fffaf0; border: 1.5px solid #ecd28f; color: #1c1a33; font: 650 12.5px var(--hx-font, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 20px -10px rgba(28, 26, 51, .45); }
/* A link being read (arrive/ArriveViews.tsx): a light passes over its row while it waits */
.ar-pending:not(.ar-failed) { position: relative; overflow: hidden; }
.ar-pending:not(.ar-failed)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: mv-sweep 1.6s ease-in-out infinite; }
@keyframes mv-sweep { to { transform: translateX(100%); } }
/* "Asistana bağlanamadım · Ayarlar'a git" (Chat.tsx): a strip at the chat's top, down from above */
.chat-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #fff3f6; border: 1.5px solid #ffc9d9; color: #8a1f4a; font-size: 13.5px; line-height: 1.4; animation: mv-banner-in var(--t-slow) var(--e-out) backwards; }
.chat-banner.offline { background: #f6f4fa; border-color: #e1dced; color: #3b3560; }
.chat-banner > span:not(.ms-wrap) { flex: 1; min-width: 0; }
.chat-banner .small-btn { flex: none; }
@keyframes mv-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes mv-banner-in { from { transform: translateY(-105%); } }
/* "İnternet yok · N sn sonra tekrar deniyorum" (OfflineNotice.tsx): bottom right, clear of the chat's box and the undo toast */
.reconnect { transition: background-color var(--t-base) var(--e-out); position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 48px); padding: 9px 12px 9px 14px; border-radius: 12px; background: #221b3a; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(28, 26, 51, .55); animation: mv-rise var(--t-base) var(--e-out) backwards; }
.reconnect.bad { background: #3a1526; }
.reconnect.ok { background: #16311f; }
.reconnect .small-btn { background: #fff; color: #1c1a33; border: 0; }

/* 4 · empty screens: the mascot, then the words, rise one after another */
.trips-empty > * { animation: mv-rise var(--t-slow) var(--e-out) backwards; }
.trips-empty > :nth-child(2) { animation-delay: 60ms; }
.trips-empty > :nth-child(3) { animation-delay: 120ms; }
.trips-empty > :nth-child(4) { animation-delay: 180ms; }
.empty-mascot { display: block; margin: 0 0 10px; }
.pn-empty { animation: mv-rise var(--t-slow) var(--e-out) backwards; }

/* 5 · errors: the chat's error comes in once; a key that doesn't work reddens its box and shakes it once */
.chat-error { animation: mv-rise var(--t-quick) var(--e-out) backwards; }
.field input.key-bad { border-color: #e2789f; animation: mv-shake 300ms var(--e-move) 1; }
.key-bad-line { color: #b0205c; }
.key-ok-line { color: #1d8a5a; }

/* 7 · the mascot's two new faces (Mascot.tsx): oops tilts its head, sleepy breathes; both hide the usual face */
.ms-wrap[data-state="oops"] .eyes, .ms-wrap[data-state="oops"] .smile, .ms-wrap[data-state="sleepy"] .eyes, .ms-wrap[data-state="sleepy"] .smile, .ms-wrap[data-state="sleepy"] .star { opacity: 0; }
.ms-wrap[data-state="oops"] .star { opacity: .35; }
.ms-wrap[data-state="oops"] .ms { transform-origin: 50% 80%; animation: ms-oops 2.8s ease-in-out infinite; }
.ms-wrap[data-state="sleepy"] .ms { transform-origin: 50% 90%; animation: ms-breathe 3s ease-in-out infinite; }
.ms-wrap .zz { transform-box: fill-box; animation: ms-zz 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .view-tabs button.on::after, .panel .cat-plan, .panel .trip-plan, .panel .doc-tab, .panel .tm-tab, .panel .pn, .modal, .overlay, .compare-modal,
  .pk-sheet-back, .modal > *, .compare-card, .pk-sheet, .drawer, .cat-body.mv-unfold, .thinking .th-line, .vcard img.pic-img.loaded, .work-pill,
  .trips-empty > *, .pn-empty, .chat-error, .field input.key-bad, .ms-wrap .zz, .reconnect, .chat-banner, .ar-pending::after { animation: none !important; }
  .th-dots i, .work-spin { animation-duration: 2.4s; }
  .ms-wrap[data-state] .ms { animation: none !important; }
}

/* ===== v30 (docs/superpowers/specs/2026-10-11-plan-v30-design.md): two tabs, the sticky summary bar, "Yolculuk sırasıyla" ===== */
:root { --v30-shadow: 0 1px 2px rgba(40, 28, 90, .06), 0 12px 28px -18px rgba(40, 28, 90, .34); }

/* The tabs: Plan · Pano, a segmented pair. */
.view-tabs { display: flex; justify-content: center; margin: 4px 0 18px; gap: 0; }
.view-tabs button { padding: 7px 22px; font-size: 15px; font-weight: 600; border-radius: 10px; color: var(--v-muted); }
.view-tabs button + button::before { display: none; }
.view-tabs button.on { background: #fff; color: var(--v-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.view-tabs button.on::after { display: none; }
.view-tabs { background: var(--v-soft); border: 1px solid var(--v-line2); border-radius: 13px; padding: 3px; width: fit-content; margin-left: auto; margin-right: auto; }

/* The Plan's three ways to read it. */
.plan-order button[aria-selected="true"], .plan-order button.on { background: #fff; color: var(--v-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.plan-bar-slim { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 0 2px; }

@media (max-width: 860px) {
  /* Below this the page scrolls, not the panel: the panel must not be the sticky root, or the bar scrolls away with it. */
  .panel { overflow: visible; }
}

/* ===== v30 · cards: the brand label, the curved route, the ride card, the stay's order, price per night, × folding ===== */
.brand { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; background: var(--bc, #475467); white-space: nowrap; flex: none; line-height: 1; vertical-align: 1px; }
.brand.plain { background: var(--v-soft); color: var(--v-muted); border: 1px solid var(--v-line2); font-weight: 650; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* A flight's middle: the curved dashed route, the plane in a white circle. */

/* A ride: its drawing, "A → B", the way, the hours. */

/* A stay: the picture on top as a band, then where it's from, its name, what guests thought, the nights. */
.pk-media.pk-stay { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.pk-stay .pk-vis { width: 100%; height: 132px; border-radius: 14px; }
.pk-stay .pk-vis .pk-illus { width: auto; height: 92%; max-width: 90%; padding: 0; margin: 0 auto; display: block; position: relative; top: 4%; }
.pk-stay .pk-vis .pk-img { object-position: 50% 55%; }
.pk-stay .pk-score { display: block; }
.pk-srcrow { display: flex; gap: 8px; align-items: center; min-width: 0; margin-bottom: 3px; }
.pk-loc { font-size: var(--q-fs-info); color: var(--v-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk-stay .pk-txt h3 { font-size: 19px; }
.pk-rate { display: flex; gap: 6px; align-items: center; font-size: 13.5px; min-width: 0; white-space: nowrap; margin-top: 3px; }
.pk-rate b { font-weight: 650; } .pk-rate span:last-child { color: var(--v-muted); }
.pk-rb { background: #003b95; color: #fff; font-weight: 800; font-size: var(--q-fs-small); border-radius: 6px 6px 6px 0; padding: 1px 6px; }
.pk-rb.star { background: none; color: var(--v-ink); padding: 0; border-radius: 0; }

/* A stay's price: the night large ("€210 / gece"); see F3 otel below. */
.pk-price2 b { font-weight: 800; color: var(--v-ink); margin: 0; }

/* The × folds the card in place: why it went. */
.pk-fold { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed var(--v-dash); background: var(--v-soft); font-size: var(--q-fs-info); }
.pk-fold-t { display: inline-flex; gap: 6px; align-items: center; color: var(--v-muted); min-width: 0; }
.pk-fold-t b { color: var(--v-ink); font-weight: 650; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-fold-t svg { flex: none; }
.pk-fold-q { color: var(--v-muted); font-size: var(--q-fs-info); }
.pk-fold-b { display: inline-flex; gap: 5px; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid #e7e4dd; background: #fff; font: inherit; font-size: var(--q-fs-info); font-weight: 600; color: var(--v-ink); cursor: pointer; }
.pk-fold-b:hover { border-color: var(--v-accent-ink); color: var(--v-accent-ink); }
.pk-fold-sp { flex: 1; }
.pk-fold-u { background: none; border: 0; color: var(--v-accent-ink); font: inherit; font-size: var(--q-fs-info); font-weight: 650; cursor: pointer; }

/* Long names never grow a card: a plan card's title is one line, "…", the whole of it on hover (title=). */
.pk-txt h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-stop b, .pk-stop b.long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.pk-routeimg { display: block; height: 54px; width: auto; max-width: 100%; margin: 0 auto; mix-blend-mode: multiply; }

/* Touch: the × and ••• are 30 px, and always there where there's no hover. */
.pk-x, .pk-ib { min-width: 30px; min-height: 30px; }
@media (hover: none) { .pk-x { opacity: 1; } }
.pk-cancel { display: inline-flex; gap: 5px; align-items: center; font-size: var(--q-fs-small); font-weight: 650; margin-top: 3px; } .pk-cancel.ok { color: var(--v-book-ink); } .pk-cancel.no { color: #c62828; }

/* ===== v30 · the card's back: the options as small cards across the whole row (cards/NeedCard.tsx ChoiceSheet) ===== */
.ch-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-head .bk-tt h3 { font-size: var(--q-fs-card); }
.ch-pano { display: inline-flex; gap: 7px; align-items: center; padding: 7px 13px; border-radius: 999px; border: 0; background: var(--v-lav); color: var(--v-accent-ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap; flex: none; }
.ch-pano:hover { background: color-mix(in srgb, var(--hx-accent, #5b45e0) 16%, var(--v-lav)); }
.ch-back .ch-for, .ch-back .ch-verify { margin-left: 0; margin-right: 0; }
.ch-back .ch-wants { margin: 0; }
.ch-back .ch-row.ch-tile { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--v-line2); background: #fff; box-shadow: var(--v30-shadow, none); min-width: 0; }
.ch-back .ch-row.ch-tile.ai { border: 1px dashed color-mix(in srgb, var(--hx-accent, #5b45e0) 45%, var(--v-line2)); box-shadow: none; }
.ch-back .ch-row.ch-tile.on { border: 1.5px solid var(--plan-line); background: #fff; }
.ch-ph { position: relative; height: 112px; display: grid; place-items: center; background: var(--v-tile); overflow: hidden; }
.ch-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-ill { height: 84px; width: auto; max-width: 86%; mix-blend-mode: multiply; }
.ch-kind { color: var(--c, var(--v-muted)); opacity: .7; }
.ch-by { position: absolute; left: 8px; top: 8px; display: inline-flex; }
.ch-ph .ch-badge { position: absolute; right: 8px; top: 8px; margin: 0; background: #fff; }
.ch-back .ch-sc { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; font-size: var(--q-fs-info); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.ch-back .ch-sc small { font-size: var(--q-fs-badge); margin-top: 0; }
.ch-back .ch-main { padding: 10px 12px 12px; gap: 3px; }
.ch-src { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 20px; min-width: 0; font-size: 12px; color: var(--v-muted); }
.ch-rate { display: inline-flex; gap: 5px; align-items: center; } .ch-rate small { font-size: 12px; color: var(--v-muted); }
.ch-back .ch-main > b { font-size: var(--q-fs-button); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.3em); }
.ch-back .ch-who { font-size: 12px; }
.ch-tf { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ch-back .ch-pr { text-align: left; } .ch-back .ch-pr b { font-size: var(--q-fs-card); font-weight: 800; display: block; } .ch-back .ch-pr small { display: block; }
.ch-back .ch-put { padding: 7px 16px; flex: none; }

/* ===== v30 · Pano: the menu on the left, a row per need, the cards scroll sideways ===== */
.pn-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.pn-main { min-width: 0; }
.pn-body .pn-cats { position: sticky; top: 12px; flex-direction: column; flex-wrap: nowrap; gap: 2px; border: 0; margin: 0; padding: 0; }
.pn-body .pn-cats button { width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-align: left; }
.pn-body .pn-cats button:hover { background: var(--v-soft); }
.pn-body .pn-cats button.on { background: var(--v-lav); color: var(--v-accent-ink); border: 0; }
.pn-body .pn-cats button i { margin-left: auto; font-weight: 500; font-size: 12.5px; }
.pn-body .pn-cats button[data-cat="liked"] { margin-top: 8px; border-top: 1px solid var(--v-line2); border-radius: 0 0 12px 12px; }
.pn-strip { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(250px, 272px); overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; scrollbar-width: thin; }
.pn-strip > * { scroll-snap-align: start; }
.pn-group { padding: 14px 0 12px; border-bottom: 1px solid var(--v-line2); margin: 0; border-radius: 0; }
.pn-group:last-child { border-bottom: 0; }
.pn-group.focus { border-radius: 16px; padding-left: 10px; padding-right: 10px; }
@media (max-width: 860px) { .pn-body { grid-template-columns: 1fr; } .pn-body .pn-cats { position: static; flex-direction: row; overflow-x: auto; } .pn-body .pn-cats button { width: auto; white-space: nowrap; } .pn-body .pn-cats button[data-cat="liked"] { margin: 0; border-top: 0; } }

/* ===== v30 · a booking window's map and cancel line ===== */
.bk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 20px 0; }
.bk-acts .bk-btn { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }

/* Plan v30: a stay not chosen yet: the drawing on a band across the card, the place large under it. */

.view-tabs .tab-n { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--v-soft); color: var(--v-muted); font-size: var(--q-fs-badge); font-weight: 700; }
.view-tabs button.on .tab-n { background: var(--v-line2); color: var(--v-ink); }

/* Gün gün (plan v30): the day's date box and the night's stay. */
.dc-box { display: inline-grid; justify-items: center; gap: 0; min-width: 52px; padding: 5px 8px 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); line-height: 1.15; color: var(--v-ink); }
.dc-box small { font-size: 11px; font-weight: 700; color: var(--v-muted); text-transform: uppercase; letter-spacing: .02em; }
.dc-box b { font-size: 20px; font-weight: 800; }
.dc-box i { font-style: normal; font-size: 10.5px; color: var(--v-muted); white-space: nowrap; }
.dc-night { margin: 4px 0 0; font-size: 13px; color: var(--v-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-night b { color: var(--v-ink); font-weight: 650; }
.dc-free { font-style: italic; }
.dl-photo .dc-box { position: absolute; top: 12px; left: 12px; z-index: 1; }
.dc-box .dc-pill, .dl-photo .dc-box .dc-pill { position: static; padding: 0; background: none; box-shadow: none; font-size: 10.5px; font-weight: 600; color: var(--v-muted); border-radius: 0; }
.card-alert.plain, .pk-alert.plain { color: var(--v-muted); }

/* An empty transfer between cities: the ways to go as drawn choices (plan v30). */

.ek-offers-est { margin-left: 8px; font-size: 12.5px; font-weight: 650; color: var(--v-muted); }

/* Plan v30 (denetim): the ••• menu's one-line explanations. */
.menu button small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: #8e8e93; white-space: nowrap; }

/* Plan v30 (denetim): what scrolls into view (a card, a day, a section, an anchor jump) stops under the sticky bar's height, not behind it. */
.dg-day, .dg-tl > li, .pk-card, .pn-row { scroll-margin-top: 76px; }

/* Plan v30 (denetim): a transfer's way to go opens under its line in Gün gün. */
.dg-i .dg-leg { grid-column: 1 / -1; margin: 6px 0 4px 26px; padding: 10px 12px; border-radius: 12px; background: var(--v-soft, #f4f2fa); border: 1px solid var(--v-line2, #eceaf4); }
.dg-i .dg-leg-plan { margin-top: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: var(--q-fs-info); color: var(--v-accent, #5b3fd9); cursor: pointer; text-decoration: underline; }

/* -- F0 durum dili -- (plan v46, F0; v82 B7): five looks, one set of tokens, now the plan's (--q-*). White is searching or
   our pick; Seçildi is sand (its line, its ink, its dot); green ground is bought or booked and only that, with the one
   BookedBadge (.okt). Grey is what the traveller arranged herself. Amber stays a warning's colour (--v-warn-*). The dark
   values follow the tokens' own [data-theme="dark"]. */
:root {
  --okb: var(--q-ok); --okb-ring: color-mix(in srgb, var(--q-ok) 13%, transparent); --okb-set: var(--q-mut);
  --book-bg: var(--q-ok-s); --book-line: var(--q-ok); --book-ink: var(--q-ok);
  --plan-bg: var(--q-sand); --plan-line: var(--q-sand-l); --plan-ink: var(--q-sand-ink); --plan-dot: var(--q-st-chosen-dot);
  --draft-line: var(--q-st-pick-line);
}
/* Seçildi: white, a thin light-green line, solid. */
.pk-card.pk-r-half { background: #fff; border: 1.5px solid var(--plan-line); }
/* Rezerve: the green ground and the darker line. */
.pk-card.pk-r-done { background: var(--book-bg); border: 2px solid var(--book-line); }
/* The one badge: dark green capsule, white tick; Ayarlandı is the same capsule in grey. */
.okt { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 11px 3px 3px; border-radius: 999px; background: var(--okb); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 8px -3px var(--okb); }
.okt i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .2); flex: none; }
.okt i svg { width: 12px; height: 12px; stroke-width: 3.2; color: #fff; }
.okt.set { background: var(--okb-set); box-shadow: none; }
.okt.sm { font-size: var(--q-fs-badge); gap: 4px; padding: 2px 9px 2px 2px; box-shadow: none; }
.okt.sm i { width: 16px; height: 16px; } .okt.sm i svg { width: 10px; height: 10px; }
.bk-lab { display: inline-flex; }
/* The key: five sample boxes, flat lines (searching dashed, our pick purple-grey, chosen light green, booked the badge's green). */
.plan-key .pk-sw { display: inline-grid; place-items: center; width: 26px; height: 16px; border-radius: 5px; background: #fff; border: 1.5px solid var(--v-line2); color: #fff; }
.plan-key .pk-sw.search { border: 1.5px dashed var(--v-dash); }
.plan-key .pk-sw.draft { border-color: var(--draft-line); }
.plan-key .pk-sw.chosen { border-color: var(--plan-line); }
.plan-key .pk-sw.booked { background: var(--okb); border-color: var(--okb); }
.plan-key .pk-sw.arranged { background: var(--okb-set); border-color: var(--okb-set); }

/* -- F1a ⓘ balonu: a 20 px round button on a card's top line; its 250 px balloon is light, "label | value" rows -- */
.inf { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: help; }
.inf i { font: italic 700 11px/1 Georgia, serif; }
.inf:hover, .inf:focus-visible { color: var(--hx-accent); border-color: var(--hx-accent); outline: none; }
.tipx-box.inf-pop { width: 250px; max-width: min(250px, calc(100vw - 16px)); display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(40, 28, 90, .4); font-size: 12.5px; font-weight: 400; line-height: 1.35; pointer-events: auto; }
.tipx-box.inf-pop::after { display: none; }
.inf-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
.inf-row i { font-style: normal; color: var(--muted); overflow-wrap: anywhere; }
.inf-row b { font-weight: 600; overflow-wrap: anywhere; }
.inf-h { font-weight: 700; }
.inf-note { color: var(--muted); font-size: 12px; }
.inf-pop .cpy-t { color: inherit; }
:root[data-theme="dark"] .inf, :root[data-theme="dark"] .tipx-box.inf-pop { background: #241f33; border-color: #3a3452; color: #efeaff; }
@media (prefers-reduced-motion: reduce) { .tipx-box.inf-pop { animation: none; } }

/* -- F1b niyet etiketi: over a stay's picture, top left: bed · city · days · nights (a camp: "Kamp · Ozora") -- */
.pk-intent { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 4px 11px 4px 9px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(40, 28, 90, .12), 0 6px 14px -8px rgba(40, 28, 90, .35); font-size: var(--q-fs-small); line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; }
.pk-intent b { color: var(--text); font-size: 13.5px; }
.pk-intent svg { flex: none; width: 14px; height: 14px; color: var(--mc); }
.pk-intent > span, .pk-intent > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .pk-intent { background: #241f33; }

/* -- F1c köşe yüzü: who saved the card, a 22 px face on its top left corner (-9 px). The card no longer clips, so its own bands round themselves. -- */
.pk-card { overflow: visible; }
.who-dot { position: absolute; top: -9px; left: -9px; z-index: 4; display: inline-flex; }
.who-dot .wh-av, .who-dot .nd-ai { width: 22px; height: 22px; font-size: var(--q-fs-badge); box-shadow: 0 0 0 2px #fff, 0 2px 6px -1px rgba(40, 28, 90, .35); border-radius: 50%; }
:root[data-theme="dark"] .who-dot .wh-av, :root[data-theme="dark"] .who-dot .nd-ai { box-shadow: 0 0 0 2px #1d1830, 0 2px 6px -1px rgba(0, 0, 0, .5); }

/* -- F1d Pano ferah: the strip's column 296-316 px, the actions wrap, "Neden?" opens without stretching its neighbours (a flight's row stretches, F2) -- */
.pn-strip { grid-auto-columns: minmax(296px, 316px); align-items: start; }
.pn-act { flex-wrap: wrap; row-gap: 8px; }
.pn-act .pn-put, .pn-act .pn-goplan { margin-left: auto; }
.pn-whylist { padding: 12px 16px 14px; gap: 6px; }
/* -- F8 hareket (plan-v45 §4): the reduced-motion / "Hareketi duraklat" blocks -- */
/* The last small movements (plan-v45 §4(b) #7 #9 #12 #14 #15 #16): the "×" fold row and a chat message rise 6 px, the undo toast comes up
   from 20 px, the Pano's "Neden?" unfolds (the strip lets a card grow alone) and its arrow turns, the heart springs, the home box's hints rotate. */
@keyframes mv-rise-s { from { opacity: 0; transform: translateY(6px); } }
@keyframes mv-toast { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
.pk-fold { animation: mv-rise-s 300ms var(--e-out) backwards; }
.msg-user, .msg-assistant { animation: mv-rise-s var(--t-base) var(--e-out) backwards; }
.pk-undo { animation: mv-toast 300ms var(--e-out) backwards; }
.mv-leaving .pk-undo-ring { visibility: hidden; }
.pn-heart { transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.pn-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--e-out); }
.pn-detail.open { grid-template-rows: 1fr; }
.pn-detail > div { min-height: 0; overflow: hidden; }
.pn-chev { display: inline-block; transition: transform .3s var(--e-out); }
.pn-why[aria-expanded="true"] .pn-chev { transform: rotate(180deg); }
.pn-new { padding: 1px 8px; border-radius: 99px; background: var(--v-lav, #f1eefc); color: var(--v-accent-ink, #4a35c8); font-size: 11.5px; font-weight: 700; }
.st-ta { position: relative; }
/* One line at a time (ana-sayfa-v1): every 3.2 s it fades and blurs out, the next comes in (TripsHome turns them). */
.st-ph { position: absolute; inset: 0 0 auto; pointer-events: none; font-size: 19px; line-height: 1.45; color: #8f8bab; transition: opacity .45s, filter .45s; }
.st-ph.out { opacity: 0; filter: blur(3px); }
.st-prompt textarea.rot::placeholder { color: transparent; }

/* Aşama geçişi (K29, plan-v45 §4b #1): Seçildi / Rezerve: the card glows 0 > 6 > 14 px for 1.6 s (in place of the plain glow), the ticket's plane
   takes off, its logo drops, the stage's word pops. rt-fly (#3): the plane glides to its card on the first draw. Canlı dot (#4): lvp 1.6 s, ring 4 > 7 px.
   Landed (#2): a draft card that arrives or changes rings 9 px and swells 1.5 % for 1.1 s (the draft's `useJustChanged` adds it, P7). */
@keyframes pk-stage-glow { 0% { box-shadow: 0 0 0 0 rgba(91, 69, 224, .4); } 35% { box-shadow: 0 0 0 6px rgba(91, 69, 224, .4); } 100% { box-shadow: 0 0 0 14px rgba(91, 69, 224, 0); } }
@keyframes pk-takeoff { 0% { transform: translate(-40%, 8px) rotate(-6deg); opacity: 0; } 60% { transform: translate(6%, -4px) rotate(-3deg); opacity: 1; } 100% { transform: none; } }
@keyframes pk-logo-drop { 0% { transform: translateY(-14px) scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pk-lab-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pk-fly { from { opacity: 0; margin-left: -18px; } }
@keyframes pk-live-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 6%, transparent); } }
@keyframes pk-landed { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-accent, #5b45e0) 60%, transparent); } 30% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--hx-accent, #5b45e0) 22%, transparent); transform: scale(1.015); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
.pk-stage { animation: pk-stage-glow 1.6s cubic-bezier(.16, 1, .3, 1); }
.pk-stage .tk-plane { animation: pk-takeoff 1.1s cubic-bezier(.16, 1, .3, 1); }
.pk-stage .tk-logo { animation: pk-logo-drop .7s cubic-bezier(.16, 1, .3, 1); }
.pk-stage .tk-lab, .pk-stage .pk-state { animation: pk-lab-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.tk-fly { animation: pk-fly .9s cubic-bezier(.16, 1, .3, 1) both; }
.lv-dot { flex: none; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: currentColor; color: var(--book-ink); box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); animation: pk-live-pulse 1.6s ease-in-out infinite; }
.lv-dot.late { color: #c62828; }
.pk-landed { animation: pk-landed 1.1s cubic-bezier(.16, 1, .3, 1); }
/* The ticket's frame changes colour over .4 s when its stage does (draft > chosen > booked); a colour is not movement, so it stays when motion is off. */
.pk-card.tk { transition: transform .18s ease, box-shadow .2s ease, border-color .4s ease, background-color .4s ease; }
.tk-stub, .tk-stub::before, .tk-stub::after { transition: border-color .4s ease; }
/* Same rules twice: the system setting, and the person's own switch (Settings, body.still). The undo toast's countdown ring is a
   working clock, not decoration: it keeps running. */
@media (prefers-reduced-motion: reduce) {
  .dc-flash,
  .gm-ring.go,
  .pk-seal .okt,
  .pk-glow,
  .pk-drop,
  .pk-stage,
  .pk-stage .tk-plane,
  .pk-stage .tk-logo,
  .pk-stage .tk-lab,
  .pk-stage .pk-state,
  .tk-fly,
  .lv-dot,
  .pk-landed { animation: none; }
  .ms-wrap[data-state="done"] .ms, .mv-tick, .mv-banner-out, .work-line.on i, .work-pill.done, .ar-skel::after, .ar-new, .panel .cat-plan, .panel .trip-plan, .panel .doc-tab, .panel .tm-tab, .panel .pn, .chat-banner { animation: none !important; }
  .pn-card, .pk-card, .cat-body, .view-tabs.has-ind::before, .plan-order.has-ind::before { transition: none; }
  .pk-fold, .msg-user, .msg-assistant, .pk-undo { animation: none; }
  .pn-detail, .pn-heart, .pn-chev { transition: none; }
  .st-ph { display: none; }
  .st-prompt textarea.rot::placeholder { color: #8f8bab; }
  .pn-card:hover, .pk-card:not(.pk-open):not(.ek-still):hover { transform: none; }
  *:not(.pk-undo-ring .run), *:not(.pk-undo-ring .run)::before, *:not(.pk-undo-ring .run)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pk-card.tk { transition: border-color .4s ease, background-color .4s ease !important; }
  .pk-card.tk .tk-stub, .pk-card.tk .tk-stub::before, .pk-card.tk .tk-stub::after { transition: border-color .4s ease !important; }
}
body.still .dc-flash,
body.still .gm-ring.go,
body.still .pk-seal .okt,
body.still .pk-glow,
body.still .pk-drop,
body.still .pk-stage,
body.still .pk-stage .tk-plane,
body.still .pk-stage .tk-logo,
body.still .pk-stage .tk-lab,
body.still .pk-stage .pk-state,
body.still .tk-fly,
body.still .lv-dot,
body.still .pk-landed { animation: none; }
body.still .ms-wrap[data-state="done"] .ms, body.still .mv-tick, body.still .mv-banner-out, body.still .work-line.on i, body.still .work-pill.done, body.still .ar-skel::after, body.still .ar-new, body.still .panel .cat-plan, body.still .panel .trip-plan, body.still .panel .doc-tab, body.still .panel .tm-tab, body.still .panel .pn, body.still .chat-banner { animation: none !important; }
body.still .pn-card, body.still .pk-card, body.still .cat-body, body.still .view-tabs.has-ind::before, body.still .plan-order.has-ind::before { transition: none; }
body.still .pk-fold, body.still .msg-user, body.still .msg-assistant, body.still .pk-undo { animation: none; }
body.still .pn-detail, body.still .pn-heart, body.still .pn-chev { transition: none; }
body.still .st-ph { display: none; }
body.still .st-prompt textarea.rot::placeholder { color: #8f8bab; }
body.still .ar-new { animation: none; outline: 2px solid color-mix(in srgb, var(--c, #5b45e0) 45%, transparent); outline-offset: 2px; }
body.still .pn-card:hover, body.still .pk-card:not(.pk-open):not(.ek-still):hover { transform: none; }
body.still *:not(.pk-undo-ring .run), body.still *:not(.pk-undo-ring .run)::before, body.still *:not(.pk-undo-ring .run)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
body.still .pk-card.tk { transition: border-color .4s ease, background-color .4s ease !important; }
body.still .pk-card.tk .tk-stub, body.still .pk-card.tk .tk-stub::before, body.still .pk-card.tk .tk-stub::after { transition: border-color .4s ease !important; }

/* -- F3 otel -- the plain stay card: the site and its score, the name, only a warning; the foot reads "Değiştir N · €210 / gece · Rezerve et ↗" (the rest is in the ⓘ) -- */
.pk-foot .pk-alt { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; margin: 0 auto 0 0; padding: 5px 10px 5px 12px; border: 1px solid var(--q-line); border-radius: 999px; background: none; color: var(--v-accent-ink, #4a35c8); font-size: var(--q-fs-info); font-weight: 650; }
.pk-foot .pk-alt:hover { border-color: var(--hx-accent, #5b45e0); background: var(--v-lav, #f1eefc); color: var(--v-accent-ink, #4a35c8); }
.pk-alt-n { min-width: 18px; padding: 0 7px; border-radius: 99px; background: var(--v-lav, #f1eefc); color: var(--v-accent-ink, #4a35c8); font-size: var(--q-fs-badge); font-weight: 700; text-align: center; }
.pk-foot > .pk-alt ~ .pk-cta, .pk-foot > .pk-alt ~ .pk-go, .pk-foot > .pk-alt ~ .pk-noticket, .pk-foot > .pk-alt ~ .pk-more { margin-left: 0; }
.pk-foot > .pk-alt ~ .pk-price { margin-left: 0; }
.pk-price2 { display: inline-flex; align-items: baseline; gap: 0; line-height: 1.15; }
.pk-price2 b { font-size: var(--q-fs-card); }
.pk-price2 small { margin-left: 4px; font-size: var(--q-fs-small); font-weight: 500; color: var(--v-muted); white-space: nowrap; }
.pk-stay .pk-srcrow { gap: 8px; }
.pk-stay .pk-txt .pk-cancel { font-size: var(--q-fs-info); }
:root[data-theme="dark"] .pk-foot .pk-alt { border-color: #3a3452; }
@media (max-width: 520px) { .pk-foot > .pk-alt ~ .pk-cta, .pk-foot > .pk-alt ~ .pk-go { margin-left: auto; } }

/* -- F5a ulaşım -- a way of travel (train, bus, ferry, taxi, a transfer between cities) read left to right: "A → B", when and by what, the hours with the way between them; nothing moves on hover -- */
.pk-rd { display: grid; gap: 10px; margin: 6px 0 4px; min-width: 0; }
.pk-rd-ttl { margin: 0; display: flex; align-items: baseline; gap: 0; min-width: 0; font-size: 19px; font-weight: 750; letter-spacing: -.015em; line-height: 1.2; white-space: nowrap; }
.pk-rd-end { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-rd-ttl > .pk-rd-end:first-child { flex: 0 1 auto; max-width: 50%; }
.pk-rd-ttl > .pk-rd-end:last-child { flex: 1 1 0; }
.pk-rd-arr { flex: none; margin: 0 7px; color: var(--q-warn); font-weight: 600; }
.pk-rd-w { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; font-size: var(--q-fs-info); color: var(--v-muted); }
.pk-rd-when { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 10px 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--mc) 12%, #fff); color: var(--v-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-rd-when svg { flex: none; color: var(--mc); }
.pk-rd-how { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; color: var(--v-ink); }
.pk-rd-how > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-rd-how .brand { height: 18px; font-size: var(--q-fs-badge); padding: 0 6px; flex: none; }
.pk-rd-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 1.3fr) minmax(0, 1fr); align-items: center; gap: 10px; }
.pk-rd-c { display: grid; gap: 3px; min-width: 0; }
.pk-rd-c.r { justify-items: end; text-align: right; }
.pk-rd-h { font-size: 19px; font-weight: 750; letter-spacing: -.015em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pk-rd-c small { font-size: 12px; color: var(--v-muted); line-height: 1.3; overflow-wrap: anywhere; }
.pk-rd-mid { display: grid; justify-items: center; gap: 1px; min-width: 0; }
.pk-rd-line { display: flex; align-items: center; gap: 4px; width: 100%; color: var(--mc); }
.pk-rd-line i { flex: 1; height: 0; border-top: 1.5px solid color-mix(in srgb, var(--v-muted) 40%, transparent); }
.pk-rd-line img { flex: none; width: 80px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.pk-rd-mid small { max-width: 100%; font-size: var(--q-fs-small); font-weight: 650; color: var(--v-muted); text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.pk-rd-line-t { color: var(--v-muted); font-size: var(--q-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .pk-rd-line img { mix-blend-mode: normal; border-radius: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pk-rd-line img { mix-blend-mode: normal; border-radius: 8px; } }
/* hover: the lift is for the cards that open; a ride sits still, its shadow alone answers */
@media (hover: hover) { .pk-card.pk-rd-card:not(.pk-open):not(.ek-still):hover { transform: none; } }
/* the price per person large, the party under it; a booked ride keeps its price in the foot (the file and "Ayrıntı ›" frame it) */
.pk-price3 { display: inline-grid; justify-items: end; line-height: 1.2; font-size: 12px; color: var(--v-muted); }
.pk-price3 b { font-size: 17px; font-weight: 800; color: var(--v-ink); }
.pk-price3 small { font-size: var(--q-fs-small); }
.pk-rd-card.pk-r-done .pk-foot .pk-price { display: inline-block; margin-left: auto; }
.pk-rd-card .pk-foot > .pk-docname, .pk-rd-card .pk-foot > .pk-docs, .pk-rd-card .pk-foot > .pk-docmiss { order: -1; }
.pk-rd-card .pk-foot > .pk-price ~ .pk-more { margin-left: 0; }

/* -- F2 bilet -- (plan v46, F2): a flight is a flat ticket: a notch and a dashed tear-off stub on its right, the head (logo,
   airline, day, ⓘ ••• ×), the route, the foot. The stub holds the stage's word (a big green tick only once it is bought, with the
   one BookedBadge), what one pays, how many go; an empty ticket says what we look for and an estimate only from real offers.
   The ticket wears the frame of .pk-card (CardShell): its stub is the card's `art` child, set on a two-column grid. */
:root { --tk-notch: #fff; --tk-edge: var(--line, #e6e1f3); }
:root[data-theme="dark"] { --tk-notch: #1d1830; }
.pk-card.tk { --tk-edge: var(--line, #e6e1f3); --tk-bg: #fff; --tk-bw: 1.5px; }
.pk-card.tk.tk-draft { --tk-edge: var(--draft-line); }
.pk-card.tk.tk-chosen { --tk-edge: var(--plan-line); }
.pk-card.tk.tk-booked { --tk-edge: var(--book-line); --tk-bg: var(--book-bg); --tk-bw: 2px; }
.pk-card.tk.tk-arranged { --tk-edge: var(--v-line2); }
.pk-card.tk.pk-alert.pk-alert { --tk-edge: #c62828; --tk-bg: #fff5f4; --tk-bw: 1.5px; }
.pk-card.tk:not(.pk-fold) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(116px, 31%, 152px); grid-template-rows: repeat(5, auto); gap: 0; align-content: start; padding: 0; min-height: 172px; border-radius: 18px; border: var(--tk-bw) solid var(--tk-edge); background: var(--tk-bg); }
.pk-card.tk > * { grid-column: 1; }
.pk-card.tk > .tk-stub { grid-column: 2; grid-row: 1 / -1; }
.pk-card.tk > .pk-detail { grid-column: 1 / -1; grid-row: 6; }
.pk-card.tk > .pk-top { grid-row: 1; height: auto; min-height: 0; padding: 14px 14px 0 16px; align-items: flex-start; flex-wrap: nowrap; gap: 8px; }
.pk-card.tk > .pk-body { grid-row: 2; padding: 12px 16px 0; container-type: inline-size; }
.pk-card.tk > .pk-foot { margin: 12px 16px 14px; padding: 10px 0 0; border-top: 1px solid color-mix(in srgb, var(--tk-edge) 70%, transparent); min-height: 34px; }
.pk-card.tk > .nd-self { margin: 10px 16px 0; }
.pk-card.tk > .nd-self .ek-find { justify-content: flex-start; margin: 0; }
.pk-card.tk > .tk-warn { margin: 8px 16px 0; }
.pk-card.tk .pk-end { margin-left: auto; flex: none; }
.pk-card.tk .pk-ring, .pk-card.tk .pk-kind { display: none; }
/* head */
.tk-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 auto; }
.tk-logo, .tk-ph { flex: none; width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; overflow: hidden; margin-top: 1px; }
.tk-logo { background: #fff; box-shadow: 0 0 0 1px rgba(40, 28, 90, .1); }
.tk-logo .pk-airline { width: 20px; height: 20px; object-fit: contain; }
.tk-ph { background: var(--v-lav); color: var(--v-accent-ink); }
.tk-hn { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.tk-hn > b { font-size: 13.5px; font-weight: 700; color: var(--v-ink); overflow-wrap: break-word; }
.tk-no { margin-left: 7px; font-size: 12px; font-weight: 500; color: var(--v-muted); white-space: nowrap; }
.tk-when { font-size: 12px; color: var(--v-muted); }
/* route */
.pk-card.tk .pk-mid { grid-template-columns: minmax(0, max-content) minmax(44px, 1fr) minmax(0, max-content); gap: 8px; margin: 0; align-items: center; }
.pk-card.tk .pk-stop b, .pk-card.tk .pk-stop b.long { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: var(--q-fs-category); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; color: var(--v-ink); }
.pk-card.tk .pk-stop > span { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: var(--q-fs-small); color: var(--v-muted); white-space: normal; }
.pk-card.tk .pk-stop > span strong { color: var(--v-ink); font-weight: 650; }
@container (max-width: 274px) { .pk-card.tk .pk-stop b, .pk-card.tk .pk-stop b.long { font-size: var(--q-fs-intent); } }
@container (max-width: 236px) { .pk-card.tk .pk-stop b, .pk-card.tk .pk-stop b.long { font-size: var(--q-fs-card); } .pk-card.tk .pk-stop > span { font-size: var(--q-fs-badge); } }
.pk-card.tk .pk-route, .pk-card.tk .pk-stop, .pk-card.tk .pk-stop.r { grid-column: auto; grid-row: auto; }
.pk-card.tk .pk-route { height: auto; min-height: 0; display: grid; justify-items: center; gap: 2px; align-self: center; }
.tk-plane { width: 100%; max-width: 84px; height: auto; max-height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.pk-card.tk .pk-route small { position: static; display: block; margin: 0; text-align: center; white-space: normal; line-height: 1.2; font-size: var(--q-fs-small); font-weight: 650; color: var(--v-muted); }
.pk-card.tk .pk-route small.direct, .pk-card.tk .pk-route small.want { color: var(--q-ok); }
.pk-card.tk .pk-route small.stop { color: #a15c00; }
.tk-search .tk-plane, .tk-searching .tk-plane { opacity: .6; }
.tk-search .pk-stop b, .tk-searching .pk-stop b { color: color-mix(in srgb, var(--v-ink) 62%, transparent); }
.tk-arranged .tk-plane { filter: grayscale(1); opacity: .6; }
.pk-card.tk .pk-live { margin-top: 12px; }
/* warnings */
.tk-warn { font-size: var(--q-fs-small); font-weight: 650; color: var(--v-muted); }
.tk-warn.amber { color: var(--q-warn); }
/* stub */
.tk-stub { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 12px 8px; text-align: center; min-width: 0; border-left: 2px dashed var(--tk-edge); }
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; background: var(--tk-notch); border: 1.5px solid var(--tk-edge); }
.tk-stub::before { top: -12px; clip-path: inset(50% 0 0 0); }
.tk-stub::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.tk-lab { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--v-muted); }
.tk-searching .tk-lab, .tk-search .tk-lab { font-weight: 600; }
.tk-draft .tk-lab { color: var(--v-accent-ink); }
.tk-chosen .tk-lab { color: var(--plan-ink); }
.tk-chosen .tk-lab svg { width: 12px; height: 12px; }
.tk-price { display: grid; justify-items: center; margin-top: 4px; min-width: 0; }
.tk-price b { font-size: var(--q-fs-intent); font-weight: 800; letter-spacing: -.01em; color: var(--v-ink); max-width: 100%; }
.tk-price b.estimate, .tk-price b.from { font-size: 15px; font-weight: 750; white-space: nowrap; color: var(--v-muted); }
.tk-price small { font-size: var(--q-fs-small); line-height: 1.3; color: var(--v-muted); }
.tk-chk { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--okb); color: #fff; box-shadow: 0 0 0 5px var(--okb-ring); }
.tk-chk svg { width: 20px; height: 20px; stroke-width: 3.2; }
.tk-arranged .tk-chk { background: var(--okb-set); box-shadow: 0 0 0 5px rgb(107 102 95 / .15); }
.tk-code { display: grid; justify-items: center; margin-top: 2px; }
.tk-code small { font-size: 11px; color: var(--v-muted); }
.tk-code b { font-size: var(--q-fs-info); letter-spacing: .04em; color: var(--v-ink); }
.tk-buy { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 6px 11px; border-radius: 999px; background: var(--v-ink); color: #fff; font-size: var(--q-fs-small); font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.tk-buy:hover { background: color-mix(in srgb, var(--v-ink) 86%, var(--hx-accent, #5b45e0)); }
.tk-stub .pk-aldim { margin: 4px 0 0; padding: 3px 10px; font-size: 12px; }
.tk-buy:focus-visible { outline: 2px solid var(--hx-accent, #5b45e0); outline-offset: 2px; }
.pk-seal .tk-chk { animation: mv-stamp 420ms cubic-bezier(.2, .9, .3, 1.3) backwards; }
/* searching: a shimmering bar where the button was */
.tk-bar { position: relative; flex: none; margin-left: auto; width: 60px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--v-line2); }
.tk-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hx-accent, #5b45e0) 45%, transparent), transparent); animation: tk-shimmer 1.4s linear infinite; }
@keyframes tk-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pk-ask.lbl { width: auto; height: auto; padding: 6px 12px; border-radius: 999px; display: inline-flex; gap: 2px; font-size: var(--q-fs-small); font-weight: 650; color: var(--v-accent-ink); margin-left: auto; }
/* × (S5): on a ticket it sits on the corner, shown on hover or focus and not at all on a touch screen (••• keeps "Gerek yok") */
.pk-card.tk .pk-top .pk-x { position: absolute; top: -9px; right: -9px; z-index: 4; width: 22px; height: 22px; opacity: 0; background: #fff; box-shadow: 0 0 0 1px var(--tk-edge), 0 2px 6px -1px rgba(40, 28, 90, .25); }
.pk-card.tk:hover .pk-top .pk-x, .pk-card.tk:focus-within .pk-top .pk-x { opacity: 1; }
@media (hover: none) { .pk-card.tk .pk-top .pk-x { display: none; } }
/* a narrow body (a phone, a card in a narrow column): the two cities share the first row, the plane and its words the second */
@container (max-width: 200px) {
  .pk-card.tk .pk-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; }
  .pk-card.tk .pk-stop { grid-row: 1; }
  .pk-card.tk .pk-stop.r { grid-column: 2; }
  .pk-card.tk .pk-route { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .pk-card.tk .tk-plane { width: 56px; flex: none; }
}
/* ticket foot: the state on the left, no price (it is on the stub) */
.pk-card.tk .pk-foot .pk-price { display: none; }
@media (max-width: 420px) {
  .pk-card.tk { grid-template-columns: minmax(0, 1fr) 112px; }
  .pk-card.tk > .pk-top { padding: 12px 10px 0 12px; }
  .pk-card.tk > .pk-body { padding: 10px 12px 0; }
  .pk-card.tk > .pk-foot { margin: 10px 12px 12px; }
  .tk-price b { font-size: var(--q-fs-card); }
}
/* flight option: the small card on a flight's back and the Pano's flight card */
.fo { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line, #e6e1f3); background: #fff; }
.fo.on, .fo.cur { border-color: var(--plan-line); }
.fo-h { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.fo-h > b { font-size: var(--q-fs-info); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.fo-h .tk-logo, .fo-h .tk-ph { margin-top: 0; }
.fo-who { display: inline-grid; }
.fo-aside { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.fo-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--plan-ink); background: var(--plan-bg); }
.fo-tag.new { color: #a15c00; background: #fff4e0; }
.fo-tag.draft { color: var(--v-accent-ink); background: var(--v-lav); }
.fo-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line, #e6e1f3) 80%, transparent); }
.fx-leg { display: grid; grid-template-columns: auto minmax(52px, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.fx-t { display: grid; justify-items: start; line-height: 1.1; }
.fx-t.r { justify-items: end; }
.fx-t b { font-size: 18px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.fx-t b sup { font-size: 10px; font-weight: 700; color: #a15c00; margin-left: 1px; }
.fx-t small { font-size: 12px; color: var(--v-muted); font-weight: 600; letter-spacing: .02em; margin-top: 3px; }
.fx-ln { display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; font-size: 11.5px; color: var(--v-muted); }
.fx-ln i { position: relative; display: block; width: 100%; height: 14px; }
.fx-ln i::before { content: ""; position: absolute; left: 0; right: 16px; top: 50%; border-top: 1.5px solid color-mix(in srgb, var(--v-muted) 45%, transparent); }
.fx-ln i img { position: absolute; right: 0; top: -2px; width: 22px; height: 18px; object-fit: contain; mix-blend-mode: multiply; }
.fx-ln small.dir { color: #13795b; font-weight: 650; }
.fx-ln small.stop { color: #a15c00; font-weight: 650; }
.fx-pr { display: grid; justify-items: start; line-height: 1.2; color: var(--v-muted); font-size: 12px; }
.fx-pr b { font-size: 18px; font-weight: 800; color: var(--v-ink); }
.fx-pr small { font-size: 11.5px; }
.fx-pr > span { white-space: nowrap; }
.fo-x { display: grid; gap: 6px; }
.fo-m { display: flex; align-items: center; gap: 8px; }
.fo-m .ch-badge, .fo-m .ch-sc { position: static; }
.fo .ch-name { color: inherit; text-decoration: none; }
.fo .ch-put, .fo .ch-on { flex: none; }
/* the Pano's flight card: a strip over the same body */
.pn-strip:has(> .pn-flt) { align-items: stretch; }
.pn-flt { display: flex; flex-direction: column; overflow: hidden; }
.pn-flt > .pn-ft { margin-top: auto; }
.pn-flt > .fo { border: 0; border-radius: 0; padding: 14px; }
.pn-strip-l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 34px; padding: 7px 14px; font-size: 12px; color: var(--v-muted); background: color-mix(in srgb, var(--v-ink) 5%, #fff); }
.pn-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #fff; color: var(--v-ink); font-size: 11.5px; font-weight: 700; }
.pn-tag.on { color: var(--plan-ink); }
.pn-tag.ai { color: var(--v-accent-ink); }
.pn-why1 { color: var(--v-ink); }
.pn-why1.minus { color: #a15c00; }
.pn-fscore { font-size: 11.5px; color: var(--v-muted); white-space: nowrap; }
.pn-fscore b { font-size: 13px; color: var(--v-ink); }
.pn-flt .pn-heart { position: static; width: 30px; height: 30px; box-shadow: none; border: 1px solid var(--line, #e6e1f3); background: none; }
.pn-flt .pn-need { margin: 0; }
.pn-flt.in-chosen { border-color: var(--plan-line); }
/* nabız (the dictionary's pulse): an empty ticket has no ring, so its frame breathes; the pulse is spread over a row of them */
.pk-card.tk.tk-search { animation: pk-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tk-bar i, .pk-seal .tk-chk, .pk-card.tk.tk-search { animation: none; } }
body.still .tk-bar i, body.still .pk-seal .tk-chk, body.still .pk-card.tk.tk-search { animation: none; }

/* -- F4 arka yüz -- */
/* The card turns where it stands (plan v46 F4, S6): the front stays under the back (unseen, inert), the back is laid over the
   row (BackFace.tsx sets data-bk on the cell's container). A one-column grid keeps it in the flow, the front out of the way. */
.bk-front { display: contents; }
.bk-front.off { visibility: hidden; }
[data-bk="flow"] > .bk-front.off { display: none; }
.ch-back { display: grid; gap: 14px; align-content: start; padding: 16px 18px 16px; border-radius: 18px; background: #fff; border: 1.5px solid var(--plan-line); box-shadow: 0 18px 40px -18px rgba(28, 26, 51, .38), 0 2px 8px rgba(28, 26, 51, .08); color: var(--v-ink); min-width: 0; outline: none; cursor: default; }
[data-bk="over"] > .ch-back { position: absolute; z-index: 40; min-height: 100%; box-sizing: border-box; transform-origin: center top; }
@media (prefers-reduced-motion: no-preference) {
  .ch-back { animation: ch-flip var(--t-slow, 380ms) var(--e-out, cubic-bezier(.16, 1, .3, 1)) both; transform-origin: center top; }
  .ch-back.out { animation: ch-flip-out var(--t-quick, 180ms) var(--e-in, cubic-bezier(.5, 0, .75, 0)) forwards; }
}
.ch-back.out { pointer-events: none; }
@keyframes ch-flip { from { opacity: .2; transform: perspective(900px) rotateY(-80deg); } to { opacity: 1; transform: none; } }
@keyframes ch-flip-out { from { opacity: 1; transform: none; } to { opacity: .2; transform: perspective(900px) rotateY(-80deg); } }
.ch-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.ch-head .bk-tt { flex: 1 1 200px; }
.ch-head .bk-tt h3 { font-size: var(--q-fs-card); }
.ch-cmp { flex: none; border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--v-accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--v-accent-ink) 35%, transparent); }
.ch-cmp:hover { text-decoration-color: currentColor; }
.ch-pano { display: inline-flex; gap: 7px; align-items: center; padding: 7px 13px; border-radius: 999px; border: 0; background: var(--v-lav); color: var(--v-accent-ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap; flex: none; }
.ch-pano:hover { background: color-mix(in srgb, var(--hx-accent, #5b45e0) 16%, var(--v-lav)); }
.bk-sec { display: grid; gap: 8px; min-width: 0; }
.bk-sec + .bk-sec { border-top: 1px solid var(--v-line2); padding-top: 12px; }
.bk-sh { display: flex; align-items: center; gap: 7px; font-size: var(--q-fs-info); color: var(--v-muted); }
.bk-sh b { color: var(--v-ink); font-size: 13.5px; }
.bk-sh .n { font-size: var(--q-fs-small); font-weight: 700; background: var(--v-tile); border-radius: 99px; padding: 0 7px; }
.bk-empty { margin: 0; font-size: var(--q-fs-small); color: var(--v-muted); }
.bk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } }
/* a flight's options are wider (the leg's row): three side by side, the action a strip under them */
.bk-grid.fl { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 900px) { .bk-grid.fl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ch-back .ch-row.ch-tile.fo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; padding: 12px 14px; overflow: visible; border-radius: 14px; border: 1px solid var(--line, #e6e1f3); }
.ch-back .ch-row.ch-tile.fo.on { border: 1.5px solid var(--plan-line); }
.ch-back .ch-row.ch-tile.fo.ai { border: 1px solid color-mix(in srgb, var(--hx-accent, #5b45e0) 38%, var(--v-line2)); }
.ch-back .ch-row.ch-tile.ai { border: 1px solid color-mix(in srgb, var(--hx-accent, #5b45e0) 38%, var(--v-line2)); }
.ch-back.keys .ch-row.ch-tile.cur { box-shadow: 0 0 0 2px var(--hx-accent, #5b45e0); }
.ch-tag { position: absolute; left: 38px; top: 8px; font-size: var(--q-fs-small); font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #fff; color: var(--plan-ink); }
.ch-tag.new { color: #a15c00; background: #fff4e0; }
.ch-ph .ch-badge { max-width: calc(100% - 16px); }
.bk-act { display: grid; align-content: center; justify-items: center; text-align: center; gap: 6px; padding: 14px; min-height: 196px; align-self: stretch; border-radius: 14px; min-width: 0; font: inherit; box-sizing: border-box; }
.bk-act small { font-size: var(--q-fs-small); color: var(--v-muted); }
.bk-act.ext { border: 1.5px dashed var(--v-dash); background: #fff; }
.bk-act.ext .ek-find { margin: 0; justify-content: center; flex-wrap: wrap; }
.bk-act.ai { background: var(--v-lav); color: var(--v-accent-ink); }
.bk-act.ai b { font-size: 15px; }
.bk-act.ai small { color: color-mix(in srgb, var(--v-accent-ink) 75%, transparent); }
.bk-act .tk-bar { margin: 6px auto 0; width: 80px; }
.bk-act .pk-ask { margin: 4px 0 0; width: auto; height: auto; padding: 6px 16px; border-radius: 999px; background: var(--hx-accent, #5b45e0); color: #fff; font-size: var(--q-fs-info); font-weight: 700; }
.bk-act .pk-ask:hover { background: color-mix(in srgb, var(--hx-accent, #5b45e0) 85%, #000); }
.bk-grid.fl .bk-act { grid-column: 1 / -1; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 8px 14px; padding: 9px 14px; }
.bk-grid.fl .bk-act small { margin-right: auto; }
.bk-grid.fl .bk-act .pk-ask, .bk-grid.fl .bk-act .tk-bar { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ch-back, .ch-back.out { animation: none; } }
.ch-back .ch-tf { flex-wrap: wrap; }
.ch-back .ch-pr b { white-space: nowrap; }

/* -- F7 taslak -- (plan v46, F7): "Önerimiz", the best real option shown as the card while nothing is chosen. White, one flat
   purple-grey line (no dashes), ✨ and its word.
   Taken with "✓ Bunu seç" or "Rezerve et ↗". */
.pk-card.pk-draft { background: #fff; border: 1.5px solid var(--draft-line); }
.pk-lab.draft { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: var(--v-accent-ink); font-weight: 700; }
.pk-aldim.pk-pick { border-color: var(--draft-line); color: var(--v-accent-ink); }
.pk-aldim.pk-pick:hover { background: var(--v-lav, #f1eefc); }
.pk-aldim.pk-pick:focus-visible { outline-color: var(--hx-accent, #5b45e0); }
.tk-stub .tk-pick { margin: 2px 0 0; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--v-accent-ink); font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.tk-stub .tk-pick:hover { background: var(--v-lav, #f1eefc); }
.tk-stub .tk-pick:focus-visible { outline: 2px solid var(--hx-accent, #5b45e0); outline-offset: 2px; }
/* the back: the tile of the option the card shows */
.ch-tag.draft { color: var(--v-accent-ink); background: var(--v-lav, #f1eefc); }
.ch-back .ch-row.ch-tile.draft { border: 1.5px solid var(--draft-line); background: #fff; }
.ch-back .ch-row.ch-tile.fo.draft { border: 1.5px solid var(--draft-line); }
/* the Board: the pick is "Önerimiz · kartta", not "Planda" */
.pn-gp.draft { color: var(--v-accent-ink); }
.pn-rib.draft { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #fff; color: var(--v-accent-ink); border: 1.5px solid var(--draft-line); }
.pn-card.in-draft, .pn-flt.in-draft { border-color: var(--draft-line); }
.pn-goplan.draft { color: var(--v-accent-ink); }
.pk-card.pk-draft .pk-ring { display: none; }
/* the card's own top line is crowded by "Önerimiz" and "✓ Bunu seç": the kind's word goes (its icon and the picture's label say it) */
.pk-card.pk-draft .pk-kind { font-size: 0; gap: 0; }

/* -- Denetim düzeltmeleri (v46 bağımsız denetim H1-H4) -- */
/* H1: "Seçildi" yazısı kartın üst satırında (durum asla yalnız renkle/halkayla değil; DOKUNULMAZ §2.3-7, S16). */
.pk-lab.chosen { color: var(--v-ink2, var(--v-ink, #1c1a33)); font-weight: 650; margin-right: 4px; }
/* H4: Rötar kutucuğu: etiket ve değer sarsın, hiçbir şey kesilmesin ("Yeni kalkış", "+25 dk"). */
.pk-lv small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pk-lv b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; white-space: normal; }
.pk-lv b i { margin-left: 0; white-space: nowrap; }
/* H2: 390 px: bölüm başlığı sarsın, ilerleme çubuğu alt satıra insin; ızgara ve arka yüz tek sütun, taşmasız. */
@media (max-width: 480px) {
  .cat-head { flex-wrap: wrap; row-gap: 8px; }
  .ch-back { max-width: 100%; box-sizing: border-box; }
  .ch-back .ch-row.ch-tile, .ch-back .ch-main { min-width: 0; max-width: 100%; }
}
/* H1 (dar ekran): Seçildi + Aldım + ⓘ + ata/× + ··· sığsın: türün adı ve tarih gider (simge ve resim etiketi söylüyor), hiçbiri taşmaz. */
@media (max-width: 520px) {
  .pk-card > .pk-top:has(.pk-lab.chosen) .pk-kind { font-size: 0; gap: 0; }
  .pk-card > .pk-top:has(.pk-lab.chosen) .pk-date { display: none; }
}

/* -- Açılış orb ve mozaik -- */
/* The opening's flourish (opening.ts): the mascot's orb, its sparks and stars, a glint over the counters. Drawn over the page for under a second. */
.mascot-seat.away .ms { opacity: 0; }
.op-fx { position: fixed; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.op-orb { position: absolute; left: 0; top: 0; width: 46px; height: 46px; filter: drop-shadow(0 6px 14px rgba(91, 69, 224, .45)); }
.op-orb-in { display: block; width: 46px; height: 46px; transform-origin: 23px 23px; }
.op-orb svg { width: 46px; height: 46px; }
.op-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #a596ff 31% 100%); box-shadow: 0 0 8px 2px rgba(165, 150, 255, .7); }
.op-star { position: absolute; color: #8b74ff; font-size: 14px; line-height: 1; }
.op-glint { position: absolute; overflow: hidden; }
.op-glint i { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 48%, rgba(181, 166, 255, .45) 52%, transparent 70%); transform: translateX(-120%); }
body.still .op-fx { display: none; }

/* The trip's photos as a mosaic (Preview.tsx; third drawing of the start flow, "B: mozaik + kutucuklar"): one big photo, two beside it.
   The strip stays as the other layout; two small buttons at the corner switch. */
.st-pv-block { position: relative; margin-bottom: 16px; }
.st-pv-block .st-pv-photos, .st-side .st-list .st-pv-block .st-pv-photos { margin-bottom: 0; }
.st-pv-mosaic { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 220px; }
.st-pv-mosaic .st-pv-photo { min-width: 0; min-height: 0; }
.st-pv-mosaic .st-pv-photo:first-child { grid-row: 1 / 3; }
.st-pv-mosaic .st-pv-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 16, 40, .45)); }
.st-pv-mosaic .st-pv-photo-name { right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pv-layout { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .88); box-shadow: 0 1px 6px rgba(28, 26, 51, .25); }
.st-pv-layout button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: #5d5885; cursor: pointer; }
.st-pv-layout button[aria-pressed="true"] { background: var(--hx-accent); color: #fff; }
.st-pv-layout button:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 1px; }
@media (max-width: 860px) { .st-pv-mosaic { height: 180px; } }

/* -- Gün gün foto -- (plan v46, r-gungun / r-yolgunu / r-gunrez): Gün gün's Liste and Kartlar (the day's photo, its lines, its reservations), the journey day's one card, the Kompakt row's "Yolculuk günü". The lines are Kompakt's own (.dg-*). */
.days-mode { flex-wrap: wrap; max-width: 100%; }
.dv { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dv-strip { display: flex; align-items: flex-end; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.dv-strip::-webkit-scrollbar { display: none; }
.dv-strip-item { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dv-strip-item small { font-size: var(--q-fs-small); font-weight: 650; color: var(--v-muted); }
.dv-strip button { min-width: 34px; height: 30px; padding: 0 9px; border: 1px solid var(--v-line2); border-radius: 9px; background: #fff; font: inherit; font-size: var(--q-fs-info); font-weight: 650; color: var(--v-ink); font-variant-numeric: tabular-nums; cursor: pointer; }
.dv-strip button:hover { border-color: var(--v-ink); }
.dv-strip button.today { background: var(--v-accent-ink); border-color: var(--v-accent-ink); color: #fff; }
.dv-day { display: grid; gap: 10px; min-width: 0; scroll-margin-top: 90px; }
.dv-card { display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); min-width: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--v30-shadow); }
.dv-day.today .dv-card, .dv-day.today .dv-chead { box-shadow: 0 0 0 2px var(--v-accent-ink), var(--v30-shadow); }
.dv-photo, .dv-thumb { position: relative; overflow: hidden; background: var(--v-soft); color: var(--v-muted); }
.dv-photo { min-height: 180px; }
.dv-photo img, .dv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-motif { position: absolute; right: 6%; bottom: 8%; width: 84%; height: auto; max-height: 80%; opacity: .35; pointer-events: none; }
.dv-pill { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--v-ink); font-style: normal; font-size: var(--q-fs-info); font-weight: 700; box-shadow: 0 1px 6px rgba(0,0,0,.14); }
.dv-body { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 14px 16px; }
.dv-head { display: grid; gap: 2px; min-width: 0; }
.dv-ttl { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; color: var(--v-ink); overflow-wrap: anywhere; }
.dv-ttl em { margin-left: 8px; font-style: normal; font-size: var(--q-fs-info); font-weight: 550; color: var(--v-muted); white-space: nowrap; }
.dv-meta { font-size: var(--q-fs-info); color: var(--v-muted); }

.dv-part { display: grid; gap: 6px; min-width: 0; }
.dv-part-label { font-size: var(--q-fs-small); font-weight: 700; color: var(--v-muted); }
.dv-flow { gap: 4px; }
/* Kartlar: the day's head with its small photo, then the day on a rail */
.dv-chead { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; box-shadow: var(--v30-shadow); }
.dv-thumb { flex: none; width: 64px; height: 48px; border-radius: 10px; }
.dv-thumb .dv-motif { right: 4px; bottom: 4px; width: 90%; }
.dv-ctext { display: grid; gap: 1px; min-width: 0; }
.dv-ctext .dv-ttl { font-size: 17px; }
.dv-rail { position: relative; display: grid; gap: 12px; min-width: 0; margin-left: 12px; padding-left: 18px; }
.dv-rail::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; border-left: 2px solid var(--v-line2); }
.dv-rail > .dv-part { position: relative; }
.dv-rail > .dv-part::before { content: ""; position: absolute; left: -23px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--v-dash); }
/* the day's reservations: a card each, the Plan's own */
.dv-rez-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.dv-rez-head .dv-part-label { flex: 1; }
.dv-ready, .dv-wait { display: inline-flex; align-items: center; gap: 4px; font-size: var(--q-fs-small); font-weight: 700; white-space: nowrap; }
.dv-ready { color: var(--v-book-ink); }
.dv-wait { color: var(--v-plan-ink); }
.dv-chev { width: 7px; height: 7px; margin: 0 4px 3px 0; border-right: 2px solid var(--v-muted); border-bottom: 2px solid var(--v-muted); transform: rotate(45deg); }
.dv-rez-head[aria-expanded="true"] .dv-chev { transform: rotate(-135deg); margin-bottom: -2px; }
.dv-rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; min-width: 0; }
.dv-rc { min-width: 0; }
.dv-rc.wide { grid-column: 1 / -1; }
/* a day that changes city: one card, the trip in the middle as the Plan's ticket */
.jd { display: grid; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--v-soft); box-shadow: inset 0 0 0 1px var(--v-line2); }
.jd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.jd-head b { font-size: var(--q-fs-button); color: var(--v-ink); }
.jd-head span { font-size: var(--q-fs-info); color: var(--v-muted); }
.jd-head .jd-left { margin-left: auto; font-size: 12px; font-weight: 650; color: var(--v-plan-ink); }
.jd-edge { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; }
.jd-lbl { padding-top: 4px; font-size: 12px; font-weight: 700; color: var(--v-muted); }
.jd-body { display: grid; gap: 6px; min-width: 0; }
.jd-body > .dg-tl { padding: 0 10px; border-radius: 10px; background: #fff; }
.jd-ticket { min-width: 0; }
.jd-body > .dg-arrive, .jd-body > .dg-warn { margin-left: 4px; }
.dg-trip { flex: none; padding: 2px 9px; border: 1px solid var(--v-line2); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 650; color: var(--v-accent-ink); white-space: nowrap; cursor: pointer; }
.dg-trip[aria-expanded="true"] { background: var(--v-lav); }
@media (max-width: 560px) {
  .dv-card { grid-template-columns: minmax(0, 1fr); }
  .dv-photo { min-height: 130px; }
  .dv-body { padding: 12px; }
  .dv-rail { margin-left: 8px; padding-left: 14px; }
  .dv-rail > .dv-part::before { left: -19px; }
  .jd-edge { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jd-lbl { padding-top: 0; }
}

/* -- F8b Hareket Dili (docs/mockups/artifact-arsivi/hareket-dili-P2qVN5; Emre's m-* decisions, 2026-10-13): what the drawing has that the cards' own
   motion did not. The durations and curves are the dictionary's tokens (--t-*, --e-*); opacity, transform and light only, but for the folding
   sections (their rows) and the banner pulled up; the reduced-motion and "Hareketi duraklat" stops are in the F8 block above. -- */
@keyframes mv-swap-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes mv-indet { from { transform: translateX(-100%); } to { transform: translateX(286%); } }
@keyframes mv-pill-bye { 0%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes mv-banner-up { to { opacity: 0; transform: translateY(-105%); margin-bottom: var(--mv-pull, 0px); } }

/* m-sekme: the chosen segment's highlight is one piece that slides to the next segment (hareketDili.ts places it); the view that is left
   fades in 120 ms as a still copy (hareketDili.ts, in its own shadow tree), the new one comes in 12 px from the side it was chosen on (mv-tab-in) */
.view-tabs, .plan-order { position: relative; isolation: isolate; }
.view-tabs.has-ind::before, .plan-order.has-ind::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: var(--ind-w); height: var(--ind-h); transform: translate(var(--ind-x), var(--ind-y)); border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); pointer-events: none; transition: transform var(--t-base) var(--e-out), width var(--t-base) var(--e-out), height var(--t-base) var(--e-out); }
.plan-order.has-ind::before { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.view-tabs.has-ind button.on, .view-tabs.has-ind button[aria-selected="true"], .plan-order.has-ind button.on, .plan-order.has-ind button[aria-selected="true"], .plan-order.has-ind button[aria-pressed="true"] { background: none; box-shadow: none; }

/* m-bolum: a section's body folds on a grid, its rows 0fr and 1fr (260 ms); the cards come in 80 ms late and go first when it shuts (180 ms);
   what is under the section slides; the arrow turns with it (.cat-chev, above). The card's own opening (the detail, the back) is not touched. */
.cat-n { display: inline-block; }

/* m-iskelet: after 0.4 s a link being read is a dashed skeleton of the card to come, the light passing over it 1.3 s; the real card sets in
   over 380 ms (mv-swap-in, .ar-new above; the Pano's "Yeni" card keeps its old slide: it is no skeleton's place) and a small tick is stamped on it (mv-tick) */
.pn-card.ar-new { animation: ar-in .32s ease-out both, ar-ring 1.5s ease-out .32s both; }
.ar-pending.ar-skel:not(.ar-failed) { border: 1.5px dashed #ddd8ea; padding: 11.5px 13.5px; background: #fff; }
.ar-pending.ar-skel:not(.ar-failed)::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); animation-duration: 1.3s; }
.ar-ph { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ar-ph i { display: block; height: 10px; border-radius: 5px; background: #eeebf6; }
.ar-ph i:first-child { width: 70%; }
.ar-ph i:last-child { width: 45%; }
.mv-tick { position: fixed; z-index: 45; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #1d8a5a; color: #fff; font: 800 13px/1 var(--hx-font, inherit); pointer-events: none; box-shadow: 0 4px 10px -4px rgba(29, 138, 90, .6); animation: mv-stamp 420ms cubic-bezier(.2, .9, .3, 1.3) both, mv-leave var(--t-quick) var(--e-in) 1100ms forwards; }

/* m-isik: a thin light runs along the top while work goes on in the background (WorkPill.tsx); the pill ends with "N kayıt eklendi" and fades */
.work-line { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.work-line.on { opacity: 1; }
.work-line i { position: absolute; left: 0; top: 0; width: 35%; height: 100%; background: linear-gradient(90deg, transparent, var(--hx-accent, #5b45e0), transparent); }
.work-line.on i { animation: mv-indet 1.2s var(--e-move) infinite; }
.work-pill.done { color: #1d8a5a; animation: mv-pill-bye 2200ms var(--e-out) forwards; }

/* m-kurallar: a wait under 0.4 s shows no dots (they come in after 400 ms); one focus at a time (a window open, the cards behind keep still);
   at most two pulsing rings on screen (hareketDili.ts marks the third and later) */
.thinking { animation: mv-fade var(--t-quick) var(--e-out) 400ms backwards; }
[data-np] { animation: none !important; }
body:has(.modal:not(.mv-leaving), .overlay:not(.mv-leaving), .drawer:not(.mv-leaving), .compare-modal:not(.mv-leaving), .pk-sheet-back:not(.mv-leaving)) :is(.pk-card.tk.tk-search, .lv-dot, .tk-bar i) { animation-play-state: paused; }

/* m-sert: the banner is pulled up out of the page when it is solved (hareketDili.ts keeps a copy for the 200 ms) */
.mv-banner-out { pointer-events: none; animation: mv-banner-up 200ms var(--e-in) forwards; }
.work-slot.errors { position: fixed; top: 68px; right: 24px; z-index: 40; margin: 0; }
@media (prefers-reduced-motion: reduce) { .work-line i { width: 100%; opacity: .5; } }
body.still .work-line i { width: 100%; opacity: .5; }

/* -- fark-etkinlik -- (v46 Etkinlik ve turlar: the drawing's one toolbar line, a violet line for what we found and put on the plan) */
.ev-card.chosen.ai { border-color: color-mix(in srgb, var(--hx-accent) 38%, var(--v-line2)); }
/* -- fark-konaklama -- a stay's three picks follow the width of the card they sit in (the plan column is narrow when the window is ~1000 px): the grid
   wraps by its own width, never three squeezed columns; the name takes two lines, the rating chip, reviews, area and price are shown whole, the
   buttons never overflow. Card layout as drawn in v46: photo band, source and rating chip, name, price, one action row. */
.ek-pick-list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.ek-pick-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; text-overflow: ellipsis; }
.ek-pick-s { flex-wrap: wrap; row-gap: 2px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.ek-pick-s .ek-of-rate { flex: none; white-space: nowrap; }
.ek-pick-price { line-height: 1.35; overflow-wrap: anywhere; }
.ek-pick-price b { white-space: nowrap; }
.ek-pick-acts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }
.ek-pick-fav, .ek-pick-go { min-width: 0; padding: 0 8px; white-space: nowrap; }

/* -- fark-konaklama -- the back face's option grid wraps by the width of the card it is in (as the v46 drawing's ~220 px tiles), not by the window:
   in the narrow plan column the old 3 columns made 140 px tiles whose chips ran over each other */
.bk-grid:not(.fl) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr)); }
/* -- fark-ucusyol -- the back of a flight card: at most three options side by side, but never narrower than 250 px of the CARD
   (the old rule counted the window: at 1000 px the Plan column is ~520 px and three 160 px cards cut their hours). */
.bk-grid.fl { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(250px, calc((100% - 24px) / 3))), 1fr)); }
@media (min-width: 900px) { .bk-grid.fl { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(250px, calc((100% - 24px) / 3))), 1fr)); } }
/* when the record's airline is only its code ("TK"), the number alone is the name */
.tk-hn > b > .tk-no:first-child { margin-left: 0; font-size: inherit; font-weight: inherit; color: inherit; }
/* -- fark-listeler -- Yapılacaklar, Hazırlık, İlham as the v46 drawing has them */
/* İlham: compact cards, the play thumbnail at the left, the title a link, who saved it and where from under it */
.ins-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.ins-tile { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px 10px; align-items: center; align-content: center; padding: 8px; border-radius: 14px; background: var(--v-soft, #f7f5f1); }
.ins-tile .ins-ph { grid-row: span 3; width: 88px; height: 56px; aspect-ratio: auto; border-radius: 10px; background: linear-gradient(135deg, #e9b9d0, #8a5a7a); display: grid; place-items: center; color: #fff; }
.ins-tile .ins-ph-ic { position: static; color: #fff; }
.ins-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.ins-play svg { fill: #fff; stroke: none; }
.ins-ph-ic svg { fill: #fff; stroke: none; }
.ins-ph-ic + .ins-play { display: none; }
.ins-tile > b.ins-t { display: block; margin: 0; font-size: 13.5px; line-height: 1.25; -webkit-line-clamp: unset; overflow: visible; }
.ins-t a { color: var(--v-accent-ink, #4a35cc); text-decoration: underline; text-underline-offset: 2px; }
.ins-src { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--v-muted, #6b6790); min-width: 0; }
.ins-src .ins-badge { position: static; padding: 0; background: none; color: inherit; font-size: 12px; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.ins-bm { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: #475467; color: #fff; font-size: 10px; font-weight: 800; font-style: normal; }
.ins-bm.p-youtube { background: #d00; } .ins-bm.p-reels, .ins-bm.p-instagram { background: #c0256b; } .ins-bm.p-pinterest { background: #e60023; } .ins-bm.p-tiktok { background: #111; }
.ins-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ins-foot .ins-city { white-space: normal; }
.ins-tile .fk-daywrap { margin-top: 0; }
.ins-tile > b.ins-t { padding-right: 22px; }
/* -- fark-ust -- v46 çizimiyle üst kısım farkları */
/* Sohbet: kayan kutunun üst kenarında yarım kalan satır sert kesilmez, yumuşakça solar (kutu en üstteyken içerik tam görünür). */
.messages, .st-msgs { padding-top: 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
/* Sohbet: çizimdeki kutular (kişi lavanta, asistan krem, değişiklik özeti kesikli çerçeve, hızlı yanıtlar çerçeveli çip). */
.messages { gap: 10px; }
.messages .msg-user, .messages .msg-assistant { align-self: stretch; max-width: 100%; padding: 10px 12px; border-radius: 14px; border-top-left-radius: 5px; font-size: 14.5px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.messages .msg-user { background: var(--hx-lav); color: var(--hx-ink); }
.messages .ar-sent { align-self: stretch; align-items: stretch; max-width: 100%; }
.messages .msg-assistant { background: var(--hx-card); color: var(--hx-ink); }
.msg-assistant[data-who]::before { content: attr(data-who); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 12px; line-height: 20px; color: var(--hx-muted); white-space: nowrap; }
.msg-assistant[data-who]::before { padding-left: 26px; background: no-repeat left center / 20px 20px url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ece8ff'/%3E%3Cpath d='M10 4.5l1 2.8 2.8 1-2.8 1-1 2.8-1-2.8-2.8-1 2.8-1zM14.5 12.5v2.4M15.7 13.7h-2.4' fill='none' stroke='%234a35cc' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.messages .chat-ref { color: #4a35cc; text-decoration-color: color-mix(in srgb, #4a35cc 35%, transparent); }
.messages .msg-event, .messages button.msg-event.ar-ev { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--hx-accent); border-radius: 14px; background: #fff; color: #4a35cc; font-size: 13.5px; font-weight: 600; text-align: left; }
.messages .msg-event::before { content: "\2726"; flex: none; font-size: 14px; }
.messages .choices { gap: 6px; margin-top: -2px; }
.messages .choices button, .messages .choices .btn-primary, .messages .choices .btn-link { padding: 4px 10px; border: 1px solid var(--hx-accent); border-radius: 999px; background: #fff; color: #4a35cc; font-size: 13px; }
.messages .choices .btn-primary { background: var(--hx-lav); font-weight: 600; }
.messages .choices button:hover { background: var(--hx-lav); }
.thinking { font-size: 13px; }
.composer { border-radius: 14px; }
.composer .send-btn { width: 32px; height: 32px; border-radius: 10px; background: var(--hx-lav); color: #4a35cc; }
.composer .send-btn:not(:disabled) { background: var(--hx-accent); color: #fff; opacity: 1; }
.composer .send-btn:disabled { opacity: .7; }
.composer { margin: 0 12px 16px; gap: 6px; padding: 6px 6px 6px 6px; }
.composer input[type="text"] { font-size: 14px; padding: 8px 2px; text-overflow: ellipsis; }
.composer input[type="text"]::placeholder { text-overflow: ellipsis; }
.composer .icon-btn { width: 32px; height: 32px; flex: none; }
.composer input[type="text"]::placeholder { font-size: 13px; }

/* -- fark-toast -- the arrival and undo toasts sit over the Plan column, never over the chat's box (its send button) when the chat is a side column */
@media (min-width: 861px) {
  .toast { --chat-w: clamp(360px, 34%, 540px); left: calc(var(--chat-w) + (100% - var(--chat-w)) / 2); max-width: min(720px, calc(100vw - var(--chat-w) - 32px)); }
}

/* ============================================================================================================
   v82 tokens (aşama 0, docs/superpowers/specs/2026-10-18-v82-gecis/02-spec.md; values from the prototype's mk81/mk82.css):
   the plan's one type scale (nine sizes) and the intent boxes' colours, each state its own: the action and our pick purple,
   Seçildi sand (B7), Alındı green, Ayarlandı grey, a decision dashed. The v82 surfaces (static/v82/*.css) read them; DESIGN.md
   says what each one means. The app has no dark theme yet; the dark values wait on an explicit [data-theme="dark"] like the rest.
   =================================================================================================================== */
:root {
  /* The type scale (v81): badge 11 · small 12 · info 13.5 · button and option 15 · card title 17 · intent 19 · category 22 · price 24 · page title 30. */
  --q-fs-badge: 11px; --q-fs-small: 12px; --q-fs-info: 13.5px; --q-fs-button: 15px; --q-fs-card: 17px;
  --q-fs-intent: 19px; --q-fs-category: 22px; --q-fs-price: 24px; --q-fs-page: 30px;
  /* Ink and ground. */
  --q-ink: #1c1a33; --q-mut: #5d5a78; --q-line: #e7e4ef; --q-soft: #f7f6fb;
  /* The action (Seç, Rezerve et, AI'dan öner) and Önerimiz: purple. */
  --q-acc: #5b45e0; --q-acc-d: #4a36c9; --q-acc-s: #efecff;
  /* Seçildi: sand (B7). */
  --q-sand: #f7f0e3; --q-sand-l: #e6d3ad; --q-sand-ink: #7a5a1c;
  /* Alındı: green. */
  --q-ok: #1f7a45; --q-ok-s: #e8f6ee; --q-ok-l: #bfe3c9;
  /* A warning (a document missing) and a must failed. */
  --q-warn: #9a6215; --q-bad: #c0392b;
  /* An intent box's ground and line, and its dot on the category's rail, by state. */
  --q-rail: #e6e3ee;
  /* Aranıyor and Karar bekliyor: dashed. */
  --q-st-wait-bg: #fbfafd; --q-st-wait-line: #cfcae0; --q-st-wait-dot: #b4afc9;
  /* Önerimiz: its dot is --q-acc on --q-acc-s. */
  --q-st-pick-bg: #f8f7ff; --q-st-pick-line: #dcd6fb;
  --q-st-chosen-bg: #fdfaf3; --q-st-chosen-line: #efe2c4; --q-st-chosen-dot: #c99a3a;
  /* Alındı: its line is --q-ok-l, its dot --q-ok. */
  --q-st-booked-bg: #f4fbf6;
  /* Ayarlandı, Dahil, Gerek yok: grey. */
  --q-st-arranged-dot: #8e8aa6;
  /* The fixed frame (v82): head 76, body 196, side column 232, main action 42, second row 32; a Pano card 220, a comparison column 280.
     (A row's card has no fixed height since 0.38.8: its picture is 4:3 of its width, collect.css.) */
  --q-head-h: 76px; --q-body-h: 196px; --q-side-w: 232px; --q-act-h: 42px; --q-act2-h: 32px;
  --q-pano-w: 220px; --q-col-w: 280px;
}
:root[data-theme="dark"] {
  --q-ink: #ece9f8; --q-mut: #a9a5c4; --q-line: #34304a; --q-soft: #221e33;
  --q-acc: #8b7bff; --q-acc-d: #a497ff; --q-acc-s: #2a2450;
  --q-sand: #3a3020; --q-sand-l: #6b5730; --q-sand-ink: #e8c98a;
  --q-ok: #3fb675; --q-ok-s: #173a27; --q-ok-l: #2f6b48;
  --q-warn: #e0a84a; --q-bad: #ef6b5d;
  --q-rail: #34304a;
  --q-st-wait-bg: #1d1a2c; --q-st-wait-line: #4a4566; --q-st-wait-dot: #6f6a8e;
  --q-st-pick-bg: #221d3d; --q-st-pick-line: #463c86;
  --q-st-chosen-bg: #2a2418; --q-st-chosen-line: #5a4a2a; --q-st-chosen-dot: #d6aa52;
  --q-st-booked-bg: #14251b;
  --q-st-arranged-dot: #7d7999;
}