/* v82 plan: docs/superpowers/specs/2026-10-18-v82-gecis/02-spec.md. Rules are ported from the approved prototype
   (plan-v32-tasarim: docs/mockups/plan-v83-turler/kaynak/mk81.css, mk82.css, mk83.css) and keep its class names. */

/* ---- Plan's head (v82 "Hero ile plan ayrı"): "Plan" 30 px, "Gezinin omurgası · n karar bekliyor", the view switch ---- */
.q-planbar { display: flex; align-items: center; gap: 22px; margin: 0 0 16px; padding-top: 4px; }
.q-pbt { display: grid; gap: 2px; min-width: 0; }
.q-planbar h2 { margin: 0; font-size: var(--q-fs-page); line-height: 1.1; font-weight: 800; letter-spacing: -.015em; color: var(--q-ink); }
.q-pbt small { font-size: var(--q-fs-info); color: var(--q-mut); }
.q-pbn { all: unset; cursor: pointer; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: #d0d5dd; text-underline-offset: 3px; }
.q-pbn:hover { color: var(--q-acc); }
.q-pbn:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; border-radius: 4px; }
.plan-order.q-seg { margin-left: auto; display: inline-flex; gap: 0; background: #efedf5; border-radius: 12px; padding: 3px; }
.plan-order.q-seg button { font: inherit; font-size: var(--q-fs-info); font-weight: 700; border: 0; background: none; color: var(--q-mut); border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.plan-order.q-seg button.on { color: var(--q-ink); }
.plan-order.q-seg:not(.has-ind) button.on { background: #fff; box-shadow: 0 1px 3px rgba(28, 26, 51, .14); }
.plan-order.q-seg.has-ind::before { border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(28, 26, 51, .14); }
.plan-order.q-seg button:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 1px; }

/* ---- the categories, one card each ---- */
.q-sheet { display: grid; gap: 10px; }
.q-sec { position: relative; background: #fff; border: 1px solid var(--q-line); border-radius: 18px; scroll-margin-top: 76px; transition: box-shadow var(--t-base) var(--e-out); }
.q-sec.open { box-shadow: 0 10px 30px -18px rgba(28, 26, 51, .35); }
/* A card's back (the old cards' choice window) leaves its section. */
.q-sec:has(.ch-back) { z-index: 30; }

/* The closed row (K0): 78 px, the same open or closed (E2). */
.q-row1 { box-sizing: border-box; width: 100%; min-height: 78px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 112px 100px 44px; grid-template-areas: "ic tt ths bud prog"; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; border-radius: 18px; }
.q-row1:hover { background: var(--q-soft); }
.q-sec.open > .q-row1 { border-radius: 18px 18px 0 0; }
.q-row1:has(.q-tt:focus-visible) { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.q-ic { grid-area: ic; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.q-tt { all: unset; grid-area: tt; display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.q-tt b { font-size: var(--q-fs-card); font-weight: 750; letter-spacing: -.01em; color: var(--q-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-kw { font-size: var(--q-fs-info); color: var(--q-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-kw .q-sgn { color: var(--q-acc); font-weight: 700; }
.q-ths { grid-area: ths; display: flex; align-items: center; justify-content: flex-end; transition: opacity 120ms var(--e-out); }
.q-sec.open .q-ths { visibility: hidden; opacity: 0; }
.q-th { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--bc, #888) 14%, #fff); box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px color-mix(in srgb, var(--bc, #888) 24%, #fff); margin-left: -8px; overflow: hidden; flex: none; }
.q-th:first-child { margin-left: 0; }
.q-th img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.q-th img.ph { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.q-thm { font-size: var(--q-fs-small); font-weight: 700; color: var(--q-mut); margin-left: 6px; min-width: 22px; }
.q-prog { grid-area: prog; display: grid; place-items: center; min-width: 0; position: relative; }
/* Bitti ve yaklaştı (lib/planRing.ts): a part a plan; dark green bought, light green chosen, empty to decide */
.q-ring { all: unset; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
button.q-ring { cursor: pointer; }
button.q-ring:hover .q-ringsvg { transform: scale(1.08); }
button.q-ring:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
.q-ringsvg { display: block; transition: transform 160ms var(--e-out); }
.q-ringsvg .q-rp-done { stroke: var(--q-ok); }
.q-ringsvg .q-rp-near { stroke: #9fd6b4; }
.q-ringsvg .q-rp-open { stroke: #e9e6f1; }
.q-ringsvg .q-ridea { stroke: #d6d2e4; }
.q-ringsvg .q-rdisc { fill: var(--q-ok); }
/* Tamamlandı (0.47.0): a soft light crosses the row once and the tick settles (pop), 900 ms; nothing moves the layout */
.q-row1.q-win { position: relative; overflow: hidden; }
.q-row1.q-win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--q-ok) 14%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: q-win-light .9s ease-out both; }
.q-row1.q-win .q-ringsvg { animation: q-win-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes q-win-light { to { transform: translateX(100%); } }
@keyframes q-win-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
body.still .q-row1.q-win::after, body.still .q-row1.q-win .q-ringsvg { animation: none; }
@media (prefers-reduced-motion: reduce) { .q-row1.q-win::after, .q-row1.q-win .q-ringsvg { animation: none; } }
.q-kw .q-alert { font-style: normal; font-weight: 700; }
/* A shut category looking for its needs (2026-10-24, "kategoriler seviyesinde arama hissi"): a soft light in its colour goes
   goes back and forth along the row (git gel, 2026-10-24), its icon sends a ring, "Aranıyor" with the dots. After, the options that came: a small
   number on the icon, as a notice, until it is opened. Still: the dots stand, no light, no ring. */
.q-ic { position: relative; }
.q-row1.q-seek { position: relative; overflow: hidden; }
.q-row1.q-seek::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c) 16%, transparent) 50%, transparent 70%); transform: translateX(-60%); animation: q-seek-light 1.3s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.q-row1.q-seek .q-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: q-seek-ring 1.8s ease-out infinite; }
@keyframes q-seek-light { to { transform: translateX(60%); } }
@keyframes q-seek-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 0%, transparent); } }
.q-kw .q-seekw { color: var(--c); font-weight: 700; }
.q-kw .q-seekw::before { content: " · "; }
.q-kw .q-seekw::after { content: attr(data-w); }
.q-kw .q-seekw .th-dots { margin-right: 5px; vertical-align: 1px; }
.q-kw .q-seekw .th-dots i { background: currentColor; }
.q-fresh { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; background: var(--q-acc); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; animation: q-win-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
body.still .q-row1.q-seek::after, body.still .q-row1.q-seek .q-ic::after, body.still .q-fresh { animation: none; }
@media (prefers-reduced-motion: reduce) { .q-row1.q-seek::after, .q-row1.q-seek .q-ic::after, .q-fresh { animation: none; } }
.q-bar { position: relative; display: flex; height: 6px; border-radius: 99px; background: #ebe9f2; overflow: hidden; }
.q-bar i { display: block; height: 100%; transition: width .3s var(--e-out); }
.q-bar .bk { background: var(--q-ok); }
.q-bar .ch { background: #9fd8b6; }
.q-pl1 { font-size: var(--q-fs-small); color: var(--q-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pl1 em { font-style: normal; color: var(--q-acc); font-weight: 700; }
.q-pl1 .q-dec { all: unset; cursor: pointer; border-radius: 4px; }
.q-pl1 .q-dec:hover { text-decoration: underline; text-underline-offset: 2px; }
.q-pl1 .q-dec:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 1px; }
.q-bud { grid-area: bud; display: grid; justify-items: end; gap: 1px; min-width: 0; }
.q-bud b { font-size: var(--q-fs-button); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--q-ink); }
.q-bud small { font-size: var(--q-fs-badge); color: var(--q-mut); white-space: nowrap; }
.q-bud.tipx { border-radius: 6px; }
.q-chev { grid-area: chev; color: var(--q-mut); display: grid; transition: transform var(--t-base) var(--e-out); }
.q-sec.open .q-chev { transform: rotate(90deg); }

/* The open body folds open and shut on a grid (m-bolum: 260 ms, its cards 80 ms late). */
.q-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--e-out); }
.q-fold.on { grid-template-rows: 1fr; }
.q-fold-in { min-height: 0; overflow: hidden; }
.q-fold.settled > .q-fold-in { overflow: visible; }
/* Settled, it is open whatever became of the move (a busy machine can leave a transition unstarted): no transition holds it. */
.q-fold.settled { transition: none; }
.q-fold-in > * { opacity: 0; transition: opacity var(--t-quick) var(--e-out); }
.q-fold.on > .q-fold-in > * { opacity: 1; transition-delay: 80ms; }
.q-foldb { display: grid; gap: 26px; padding: 6px 18px 20px; }
/* The categories still drawn the old way keep their body's room and look (cat-body), inside the new card. */
.q-sec .fk-quick { margin: 0 0 14px; background: #fff; }

/* "+ Konaklama ekle" at a category's end; "+ Yeni ihtiyaç ekle" at the plan's (B6). */
.q-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--q-fs-info); font-weight: 650; color: var(--q-mut); background: none; border: 1px dashed var(--q-line); border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.q-add:hover { color: var(--q-acc); border-color: color-mix(in srgb, var(--q-acc) 40%, var(--q-line)); }
.q-add:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }
.q-addall { margin-top: 12px; }

/* ---- the open category: intents on a rail, each dot its state (v82 "durum çizgisi") ---- */
.q-ints { position: relative; display: grid; gap: 16px; padding-left: 44px; }
.q-ints::before { content: ""; position: absolute; left: 21px; top: 34px; bottom: 34px; width: 2px; background: var(--q-rail); border-radius: 2px; }
.q-ints > .q-int::before, .q-ints > .z-visa::before { content: ""; position: absolute; left: -30px; top: 31px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px dashed var(--q-st-wait-dot); box-sizing: border-box; transition: background-color .4s ease, border-color .4s ease, box-shadow var(--t-base) var(--e-out); }
.q-ints > .q-int[data-st="sel"]::before { border: 2.5px solid var(--q-st-chosen-dot); background: var(--q-sand); }
.q-ints > .q-int[data-st="ai"]::before { border: 2.5px solid var(--q-acc); background: var(--q-acc-s); }
.q-ints > .q-int[data-st="ok"]::before, .q-ints > .z-visa::before { border: 0; background: var(--q-ok); box-shadow: 0 0 0 3px var(--q-ok-s); }
.q-ints > .q-int[data-st="arr"]::before { border: 0; background: var(--q-st-arranged-dot); }
.q-ints > .q-int[data-st="inc"]::before { border: 0; background: #0e7c66; box-shadow: 0 0 0 3px #d5efe7; }
.q-ints > .z-visa::before { top: 20px; }
.q-ints > .z-visa.need::before { background: #f79009; box-shadow: 0 0 0 3px #fef0c7; }

/* The visa line, Belgeler ve internet's first (C25): green, or amber with its official source and "✓ Vize alındı". */
.z-visa { position: relative; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 52px; box-sizing: border-box; padding: 8px 16px; border-radius: 14px; background: var(--q-ok-s); border: 1px solid var(--q-ok-l); font-size: var(--q-fs-info); color: var(--q-ok); }
.z-visa b { color: var(--q-ok); font-weight: 750; }
.z-visa > span { color: var(--q-mut); }
.z-visa .q-sp { flex: 1; }
.z-visa.need { background: #fff8eb; border-color: #fedf89; color: #7a4b00; gap: 10px; }
.z-visa.need b { color: #7a4b00; }
/* (.z-visa: over the old .need i, a 16 px dot at 10,5) */
.z-visa .z-vx { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #f79009; color: #fff; font-style: normal; font-weight: 900; font-size: var(--q-fs-info); }
.z-visa .q-got { min-height: 34px; margin-left: 4px; }
/* 0.39.1: "Var" / "Yok" side by side, the one chosen filled; the official page small beside them. */
.z-visa .z-vmark { display: inline-flex; gap: 4px; flex: none; }
.z-visa .z-vmark .q-got { margin-left: 0; padding: 0 12px; }
.z-visa .z-vmark .q-got.on { background: var(--q-ink); border-color: var(--q-ink); color: #fff; }
.z-visa[data-done] .z-vmark .q-got.on { background: var(--q-ok); border-color: var(--q-ok); }
.z-visa .z-vsrc { font-size: 12px; font-weight: 600; color: var(--q-mut); }
.z-visa .z-vpass { min-height: 34px; border-radius: 10px; border: 1.5px solid var(--q-line); background: #fff; color: var(--q-ink); font: inherit; font-size: var(--q-fs-info); padding: 0 8px; }
.z-visa .z-vpass:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 2px; }

/* A category's short note when the trip's form changed something there (spec §1.4): one line at its start, only when said. */
.q-tinfo { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #f6f4fd; color: #3d3566; font-size: var(--q-fs-info); line-height: 1.45; }
.q-tinfo > i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e4dcff; color: #4a36c9; font: italic 700 12px/1 Georgia, serif; margin-top: 1px; }

/* ---- Gizlenenler · n (F3, C17): what was said not needed, under the category's last intent ---- */
.q-hid { border-top: 1px dashed var(--q-line); padding-top: 8px; }
.q-hid > summary { cursor: pointer; list-style: none; font-size: var(--q-fs-info); font-weight: 700; color: var(--q-mut); padding: 6px 2px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.q-hid > summary::-webkit-details-marker { display: none; }
.q-hid > summary::before { content: "›"; display: inline-block; transition: transform var(--t-quick) var(--e-out); }
.q-hid[open] > summary::before { transform: rotate(90deg); }
.q-hid > summary:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
.q-hidb { display: grid; gap: 10px; padding-top: 8px; }
.q-hid .q-int { opacity: .8; }
.q-hid .cat-hidden-rows { margin: 0; }
/* (the old list's rows, on the plan's scale: 13,5) */
.q-hid .cat-hidden-row { font-size: var(--q-fs-info); }

@media (max-width: 980px) {
  .q-row1 { grid-template-columns: 42px minmax(0, 1fr) 92px 44px; grid-template-areas: "ic tt bud prog"; }
  .q-ths { display: none; }
}
@media (max-width: 640px) {
  .q-planbar { flex-wrap: wrap; gap: 10px; }
  .plan-order.q-seg { margin-left: 0; width: 100%; }
  .plan-order.q-seg button { flex: 1; padding: 8px 6px; font-size: var(--q-fs-small); }
  .q-row1 { grid-template-columns: 40px minmax(0, 1fr) auto 44px; grid-template-areas: "ic tt bud prog"; gap: 8px 12px; padding: 12px 14px; }
  .q-foldb { padding: 4px 10px 16px; }
  .q-ints { padding-left: 24px; }
  .q-ints::before { left: 9px; }
  .q-ints > .q-int::before, .q-ints > .z-visa::before { left: -21px; }
}
/* The row's bar grows to its new share over .3 s; "azaltılmış hareket" and "Hareketi duraklat" put it there at once. */
body.still .q-bar i { transition: none; }
@media (prefers-reduced-motion: reduce) { .q-bar i { transition: none; } }
/* P7: the visa asked first ("Geçerli bir Schengen vizen var mı?"): its line under the question, wrapping at 390 px. */
.z-visa { min-width: 0; max-width: 100%; }
.z-visa > b, .z-visa > span { min-width: 0; overflow-wrap: anywhere; }