/* ── Vespira design tokens ─────────────────────────────────────────
   Intent color system: each category owns a hue that carries through
   chips, card spines, map pins and the detail sheet. */
:root {
  /* Clay styleguide: warm surfaces, mint primary (dark text on mint),
     pill controls, soft layered elevation. */
  --ink: #2f3e46;
  --ink-soft: #5d6b73;  /* 6a7880 idi: mono meta acik temada 4.43 ile AA (4.5) altinda kaliyordu — olculdu */
  --paper: #fbfcfb;
  --card: #ffffff;
  --line: #e8ece9;
  --acc: #5ebb7e;          /* mint primary surface */
  --acc-deep: #3d8f5f;     /* mint for text/links on light */
  --acc-ink: #122b1d;      /* ink on mint surfaces */
  --acc-soft: #e3f0e8;
  --focus: #6faede;
  --acc-deeper: #006d3b;   /* koyu marka yesili: logo, baglanti, acik-durum */

  --c-see: #3b6fe0;
  --c-do: #1fa06a;
  --c-eat: #d94a35;
  --c-shop: #c3900f;
  --c-night: #6e4ae0;
  --c-ess: #0d8f8a;

  --c-see-soft: #e8eefc;
  --c-do-soft: #e3f4ec;
  --c-eat-soft: #fbe9e5;
  --c-shop-soft: #f8f0da;
  --c-night-soft: #ede8fb;
  --c-ess-soft: #dff3f2;

  /* Typography.
     Fraunces (optical-size serif) for headings gives the editorial, magazine
     feel a travel guide should have — the "premium" the tester was missing.
     Source Sans 3 carries the interface: humanist, warm, legible at small
     sizes without the mechanical feel of a geometric sans.
     The long fallback chains matter: the app ships in 20+ languages and
     Latin webfonts have no Arabic/CJK/Thai/Devanagari glyphs, so those
     scripts must land on the device's own high-quality system fonts rather
     than a broken fallback. */
  --display: "Fraunces", "Noto Serif", "Songti SC", "Hiragino Mincho ProN",
             "Times New Roman", Georgia, serif;
  /* Gövde: Source Sans 3 — hümanist. Önceki Plus Jakarta Sans geometrikti
     (dairesel harfler, kapalı açıklıklar, tek tip kalınlık) ve uzun
     paragraflarda mekanik okunuyordu. Source Sans'ın açık apertürleri ve
     kaligrafiden gelen ritmi metni insan eliyle yazılmış gibi gösteriyor;
     ayrıca Kiril, Yunan ve Vietnamca glifleri kendisinde var, yani Rusça,
     Ukraynaca ve Vietnamca artık sistem yedeğine düşmüyor. */
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Noto Sans", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans Thai",
          "Noto Sans Devanagari", Roboto, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --radius: 24px;
  --app-w: 480px;
  --shadow: 0 2px 4px rgba(47, 62, 70, 0.05), 0 12px 28px rgba(47, 62, 70, 0.10);
  --clay: 0 1px 2px rgba(47, 62, 70, 0.06), 0 6px 16px rgba(47, 62, 70, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: #eef2f0;
  overflow: hidden;
  /* iOS Safari overflow:hidden'ı body'de UYGULAMAZ — sayfa parmakla
     kaydırılabiliyor ve lastik bant etkisiyle başlık ekran dışına
     itiliyordu (telefonda ölçüldü: açılışta sayfa kayıyor). Safari'nin
     dinlediği tek şey position:fixed. İç kaydırıcılar (akış, sheet'ler)
     kendi overflow'larına sahip, etkilenmiyor. */
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}

/* Ambient backdrop behind the phone column on wide screens */
.backdrop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(59, 111, 224, 0.08), transparent),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(94, 187, 126, 0.10), transparent),
    repeating-radial-gradient(circle at 70% 30%, transparent 0 38px, rgba(28, 35, 32, 0.035) 38px 39px);
}

.app {
  position: relative;
  margin: 0 auto;
  max-width: var(--app-w);
  /* Gövde position:fixed inset:0 olduğundan görünür alanın kendisi zaten
     gövde kutusu. iOS WKWebView içinde 100dvh bu kutuyla örtüşmüyor ve alt
     nav "askıda" kalıyordu (TestFlight, iPhone) — %100 her yerde doğru. */
  height: 100%;
  /* No min-height: a fixed floor taller than a landscape phone (360px) pushed
     the bottom nav off-screen entirely. The layout must always fit the
     viewport it's given. */
  background:
    radial-gradient(120% 45% at 80% -5%, rgba(94, 187, 126, 0.10), transparent),
    radial-gradient(100% 35% at 0% 100%, rgba(167, 199, 231, 0.07), transparent),
    var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Desktop "device frame" look. The height guard matters: a landscape phone
   (640×360) is wide enough to trip a width-only query, and the inset framing
   then wastes 32px of an already short screen and lifts the nav off the
   bottom edge. Only frame it when there is vertical room to spare.
   data-shell koşulu: çerçeve yalnızca WEB'de. Mağaza uygulamasında (Capacitor)
   uygulama cihazın kendisi — tablette 480px'lik yüzen bir sütun ve etrafında
   dev boşluk görünüyordu. Native'de çerçeve yok, genişlik de aşağıda ayrı. */
@media (min-width: 560px) and (min-height: 600px) {
  :root[data-shell="web"] .app {
    height: calc(100% - 32px);
    margin-top: 16px;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(28, 35, 32, 0.25);
  }
}
/* Native'de tablet: tam yükseklik, içerik 760px'e kadar genişleyebilir.
   Sınırsız genişlik değil — 1200px'lik satırlar okunmaz; 760 ile kartlar
   büyür, satırda daha çok kart görünür, kenarlarda makul nefes kalır. */
:root[data-shell="native"] .app { max-width: 760px; }

/* ── Header ──────────────────────────────────────────────── */
.topbar {
  background: transparent;
  /* Üst çentik payı: iPhone 14 Pro ve sonrasında dinamik ada, eski
     modellerde çentik başlığın üstüne biniyordu — logo ve şehir seçici
     kısmen görünmez oluyordu. Alt navbar'da bu pay zaten vardı
     (safe-area-inset-bottom), üstte unutulmuş. Tarayıcıda env() sıfır
     döndüğü için web görünümü hiç değişmiyor. */
  padding: calc(14px + env(safe-area-inset-top)) 16px 0;
  z-index: 30;
  flex: none;   /* never let the header get squeezed out of the flex column */
}
.topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar-btn {
  /* 44px is Apple's HIG minimum touch target (Play has the same guidance) —
     these were 33-36px, small enough to mis-tap. */
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 16px; cursor: pointer; color: var(--ink-soft);
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(47,62,70,.08);
}
.avatar-btn.signed-in {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink); border-color: transparent;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-width: 0;   /* let children shrink rather than overflow the row */
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  /* Bu bir düğme ("akışa dön"). Yüksekliği yalnızca metin belirlerse 28px'e
     düşüyor — mağazaların 44px dokunma hedefi kuralının altında. Dikey iç
     boşluk onu geri çıkarıyor; negatif yatay marj görsel hizayı bozmuyor. */
  min-height: 44px; padding: 0 8px; margin-left: -8px;
  gap: 6px;
}

/* Başlıktaki işaret: tam illüstrasyon değil, ayrı çizilmiş DOLU silüet
   (logo-figures.png → logo-mark-sm.png). Tam logo bu ölçekte okunmuyordu —
   ince daire çizgisi kopuk noktalara dönüşüyor, yıldızlar kayboluyordu.
   Silüetin iç detayı yok, 26px'te bile iki figür ve yıldız seçiliyor.
   Renk maskeyle geliyor, yani arayüzün mürekkep rengini alıyor. */
.wm-mark {
  flex: none; width: 26px; height: 26px;
  background-color: var(--ink);
  -webkit-mask: url("logo-mark-sm.png") center/contain no-repeat;
  mask: url("logo-mark-sm.png") center/contain no-repeat;
}

/* "beta" — uygulamanın geliştirme aşamasında olduğunu söylüyor. Marka
   adından belirgin biçimde daha hafif: bilgi veriyor, dikkat çalmıyor. */
.wm-beta {
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: lowercase;
  color: var(--acc-ink); background: var(--acc-soft);
  border: 1px solid rgba(61, 143, 95, .25);
  padding: 2px 6px; border-radius: 999px;
  align-self: center; margin-top: 2px;
}
/* Marka işareti: tek bir beyaz maske PNG, rengi CSS veriyor. Böylece aynı
   dosya açık başlıkta koyu, koyu splash'ta krem görünüyor — logo kendi
   koyu zeminiyle gelen kare bir görsel olarak "yapıştırma" gibi durmuyor. */
/* .compass kaldırıldı: illüstrasyon 26-30px'te okunmuyordu — ince daire
   çizgisi ve minik yıldızlar bu ölçekte kayboluyor, geriye bulanık bir leke
   kalıyordu. Rozet denendi, ağırlık verdi ama okunaklılığı çözmedi (30px
   önizleme üretilip bakıldı). Başlıkta artık yalnızca Fraunces ile yazılmış
   "Vespira" var; işaret yalnızca yer bulduğu boyutlarda kullanılıyor:
   splash 88px, onboarding 34px, ana ekran ikonu 1024px. */
.city-btn {
  font-family: var(--body); font-weight: 600; font-size: 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 11px 16px; min-height: 44px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 2px rgba(28,35,32,.05);
  /* A long city name used to push the avatar off-screen on a 280px display
     (Galaxy Fold cover screen). Shrink the label instead of the row. */
  min-width: 0; overflow: hidden;
}
.city-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.city-btn-caret { flex: none; }
.city-btn:hover { border-color: var(--ink-soft); }
.city-btn-caret { font-size: 11px; color: var(--ink-soft); }

.search-row { margin-top: 12px; display: flex; gap: 8px; position: relative; }
.locate-btn {
  flex: none; width: 50px; height: 50px; border-radius: 16px;
  border: 0; cursor: pointer; font-size: 18px;
  background: linear-gradient(160deg, #7fd29b, var(--acc));
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 143, 95, 0.3);
  display: grid; place-items: center;
  transition: transform .12s, filter .15s;
}
.locate-btn:hover { filter: brightness(1.04); }
.locate-btn:active { transform: scale(0.93); }
.locate-btn.located { border-color: var(--acc-deep); background: var(--acc-soft); }
.locate-btn.locating { opacity: .5; }

/* "You are here" pulsing dot on the map */
.you-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2f7fe0; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(47, 127, 224, 0.3);
  animation: you-pulse 2s infinite;
}
@keyframes you-pulse {
  0% { box-shadow: 0 0 0 3px rgba(47,127,224,.35); }
  70% { box-shadow: 0 0 0 12px rgba(47,127,224,0); }
  100% { box-shadow: 0 0 0 3px rgba(47,127,224,0); }
}
@media (prefers-reduced-motion: reduce) { .you-dot { animation: none; } }
.search-loading { display: flex; justify-content: center; padding: 24px; }
/* Pill field with the icon inside, paired with a circular action button —
   the modern search pattern from the reference. */
/* Soft inset field — reads as something you type into, not a raised button.
   The icon is a clean SVG-style glyph rather than a colour emoji, which looked
   noisy at this size. */
.search-field {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center;
  background: #f2f5f3;
  border: 1.5px solid transparent; border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(47, 62, 70, 0.06);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.search-field:focus-within {
  background: #fff;
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(94, 187, 126, 0.14);
}
.search-ico {
  flex: none; width: 36px; text-align: center;
  font-size: 22px; line-height: 1; color: var(--ink-soft); opacity: .65;
  pointer-events: none;
}
.search-input {
  flex: 1; min-width: 0;
  min-height: 44px;   /* dokunma hedefi tabanı (ölçüldü: 42px'ti) */
  font-family: var(--body); font-size: 15px; font-weight: 500;
  padding: 14px 16px 14px 0;
  border: 0; background: none; color: var(--ink);
  outline: none;
}
.search-input::placeholder { color: #9aa8a0; font-weight: 400; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input::placeholder { color: #9aa39e; }

/* ── Category bar (the "compass strip" signature) ───────── */
.cat-bar {
  display: flex; gap: 8px;
  padding: 12px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-chip {
  /* Stitch: çip zemini kategorinin soft tonu, metni koyulaştırılmış tonu. */
  font-family: var(--body); font-weight: 600; font-size: 13px;
  display: flex; align-items: center;
  padding: 11px 16px; min-height: 44px;
  border-radius: 99px;
  border: 0;
  background: #eef1ef; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, transform .1s;
}
.cat-chip:active { transform: scale(0.96); }
.cat-chip[data-cat="all"] { background: var(--acc-soft); color: var(--acc-deeper); }
.cat-chip[data-cat="see"]   { background: #e8eefc; color: #2f5cc4; }
.cat-chip[data-cat="do"]    { background: #e3f4ec; color: #17835a; }
.cat-chip[data-cat="eat"]   { background: #fbe9e5; color: #c23a26; }
.cat-chip[data-cat="shop"]  { background: #f8f0da; color: #9a7208; }
.cat-chip[data-cat="night"] { background: #ede8fb; color: #5c3bc8; }
.cat-chip[data-cat="exp"]   { background: #fdeae0; color: #b03a09; }
.cat-chip[data-cat="ess"]   { background: #dff3f2; color: #0b7d79; }
.cat-chip.active { color: #fff !important; }
.cat-chip[data-cat="all"].active  { background: var(--acc); color: var(--acc-ink) !important; }
.cat-chip[data-cat="see"].active  { background: #3b6fe0; }
.cat-chip[data-cat="do"].active   { background: #1fa06a; }
.cat-chip[data-cat="eat"].active  { background: #d94a35; }
.cat-chip[data-cat="shop"].active { background: #c3900f; }
.cat-chip[data-cat="night"].active{ background: #6e4ae0; }
.cat-chip[data-cat="exp"].active  { background: #c2410c; }
.cat-chip[data-cat="ess"].active  { background: #0d8f8a; }
.cat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--ink-soft));
  flex: none;
}
.cat-chip.active {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink); border-color: transparent;
  box-shadow: var(--clay);
  font-weight: 700;
}
.cat-chip.active .cat-dot { box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.12); }
.akis-cip { flex: none; }

/* POI fotoğrafı yokken şehir kapağı dürüst ve premium bir ara katmandır:
   kartın gerçek mekân fotoğrafı olmadığını gradient/etiket diliyle ayırır. */
.city-cover { position: relative; overflow: hidden; }
.city-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .34; mix-blend-mode: screen;
}
.city-cover[data-cover-cat="see"]::before {
  background: repeating-radial-gradient(ellipse at 18% 78%, transparent 0 16px, rgba(255,255,255,.34) 17px 18px, transparent 19px 32px);
}
.city-cover[data-cover-cat="do"]::before {
  background: repeating-linear-gradient(132deg, transparent 0 22px, rgba(255,255,255,.22) 23px 25px, transparent 26px 48px);
}
.city-cover[data-cover-cat="eat"]::before {
  background: radial-gradient(circle at 18% 25%, rgba(255,239,196,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 65%, rgba(255,239,196,.45) 0 4px, transparent 5px);
  background-size: 28px 28px, 42px 42px;
}
.city-cover[data-cover-cat="shop"]::before {
  background: linear-gradient(45deg, transparent 42%, rgba(255,255,255,.22) 43% 47%, transparent 48%),
    linear-gradient(-45deg, transparent 42%, rgba(255,255,255,.16) 43% 47%, transparent 48%);
  background-size: 34px 34px;
}
.city-cover[data-cover-cat="night"]::before {
  background: radial-gradient(circle at 18% 22%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 68% 32%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 76%, #fff 0 1px, transparent 2px);
  background-size: 64px 58px, 92px 76px, 118px 94px;
}
.city-cover[data-cover-cat="exp"]::before {
  background: repeating-radial-gradient(ellipse at 85% 10%, transparent 0 15px, rgba(255,255,255,.23) 16px 18px, transparent 19px 34px);
}
.city-cover[data-cover-cat="ess"]::before {
  background: linear-gradient(90deg, transparent 47%, rgba(255,255,255,.24) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255,255,255,.24) 48% 52%, transparent 53%);
  background-size: 34px 34px;
}
.city-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, rgba(17, 39, 29, .08), rgba(17, 39, 29, .42));
  mix-blend-mode: multiply;
}
.city-cover img { filter: saturate(.88) contrast(.98); }
.city-cover[data-cover-cat="see"]::after { background: linear-gradient(145deg, rgba(37, 82, 171, .08), rgba(17, 39, 29, .42)); }
.city-cover[data-cover-cat="do"]::after { background: linear-gradient(145deg, rgba(15, 133, 93, .1), rgba(17, 39, 29, .42)); }
.city-cover[data-cover-cat="eat"]::after { background: linear-gradient(145deg, rgba(201, 69, 42, .1), rgba(17, 39, 29, .42)); }
.city-cover[data-cover-cat="shop"]::after { background: linear-gradient(145deg, rgba(184, 133, 17, .12), rgba(17, 39, 29, .42)); }
.city-cover[data-cover-cat="night"]::after { background: linear-gradient(145deg, rgba(78, 45, 159, .16), rgba(9, 15, 28, .58)); }
.city-cover[data-cover-cat="exp"]::after { background: linear-gradient(145deg, rgba(189, 68, 18, .12), rgba(17, 39, 29, .42)); }
.city-cover[data-cover-cat="ess"]::after { background: linear-gradient(145deg, rgba(11, 125, 121, .12), rgba(17, 39, 29, .42)); }
.city-cover-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(15, 27, 22, .66); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(8px);
}
.city-cover .save-btn, .city-cover .sheet-close,
.city-cover .hero-rate { z-index: 2; }

/* Short viewports — YATAY telefonlar. 360px yükseklikte başlık ekranın
   %49'unu kaplıyor ve alt menüyü dışarı itiyordu; burada her şey küçülüyor.

   `orientation: landscape` şart: mobil tarayıcılarda viewport yüksekliği
   kullanım sırasında değişiyor (adres çubuğu kayınca, klavye açılınca).
   Yalnızca yüksekliğe bakan bir sorgu, dikey telefonda 560px eşiğinin iki
   yanında gidip geliyordu — marka yazısı 22px↔18px, başlık 192px↔164px.
   Kullanıcının "ara ara ölçeklendirme bozuluyor" dediği şey buydu.
   Yönü şart koşunca dikey telefon bu bloğa hiç girmiyor. */
@media (max-height: 560px) and (orientation: landscape) {
  .topbar { padding: 8px 14px 0; }
  .wordmark { font-size: 18px; }

  /* Not shrunk below 44px: that is the store-mandated minimum touch target,
     and landscape is exactly where mis-taps are most likely. */
  .avatar-btn { font-size: 14px; }
  .city-btn { padding: 5px 11px; font-size: 13px; }
  .search-row { margin-top: 8px; }
  .search-input { font-size: 14px; padding: 10px 14px 10px 8px; }
  .search-ico { padding-left: 14px; font-size: 13px; }
  .locate-btn { width: 42px; height: 42px; font-size: 16px; }
  .cat-bar { padding: 8px 0 9px; }
  .cat-chip { padding: 6px 11px; font-size: 12px; }
  .bottom-nav { margin: 0 10px calc(6px + env(safe-area-inset-bottom)); }
  .nav-btn { padding: 6px 0 5px; font-size: 11px; }
  .nav-btn .nav-icon { font-size: 15px; }
  .nav-ai-orb { width: 46px; height: 46px; font-size: 20px; margin-top: -16px; }
  /* Hero cards would fill the whole viewport at this height. */
  .poi-hero { min-height: 200px; }
  .row-card, .rc-img { width: 148px; }
  .rc-img { height: 120px; }
}
/* Çok kısa yatay ekran: yalnızca temel öğeler kalsın. (Yukarıdakiyle aynı
   sebeple yön şartı var.) */
@media (max-height: 420px) and (orientation: landscape) {
  .cat-bar { padding: 6px 0 7px; }
  .poi-hero { min-height: 170px; }
  }

/* ── Splash ──────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: linear-gradient(165deg, #18232a 0%, #223038 45%, #2c4a41 100%);
  color: #fff;
  transition: opacity .45s ease, visibility .45s;
}
.splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.splash-glyph {
  width: 74%; height: 74%;
  background-color: #f5f0e6;
  -webkit-mask: url("logo-mark.png") center/contain no-repeat;
  mask: url("logo-mark.png") center/contain no-repeat;
}
.splash-mark {
  width: 88px; height: 88px; border-radius: 28px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
  animation: sp-rise .55s cubic-bezier(.2,.9,.3,1) both;
}
.splash-word {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.02em;
  animation: sp-rise .55s .08s cubic-bezier(.2,.9,.3,1) both;
}
.splash-tag {
  font-size: 12px; color: rgba(255, 255, 255, 0.6);
  animation: sp-rise .55s .16s cubic-bezier(.2,.9,.3,1) both;
}
.splash-bar {
  width: 128px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.16); overflow: hidden;
}
.splash-bar span {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #7fd29b, var(--acc));
  animation: sp-slide 1.1s ease-in-out infinite;
}
@keyframes sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sp-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-word, .splash-tag { animation: none; }
  .splash-bar span { animation-duration: 2.4s; }
}

/* Type-ahead suggestions under the search field.
   Çizgisiz görünüm: kalın kenarlık + her satırın altında ayraç, kutuyu
   "demode bir dikdörtgen"e çeviriyordu (kullanıcı tabiriyle). Kenarlık ve
   ayraçlar gitti; derinliği gölge, ayrımı satır aralığı veriyor. */
.suggest-box {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: 70;
  background: var(--card);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(47, 62, 70, .10), 0 20px 48px rgba(47, 62, 70, .16);
  max-height: 420px; overflow-y: auto;
  padding: 5px;
}
.sg-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; cursor: pointer; text-align: left;
  background: none; border: 0; border-radius: 13px;
  font-family: var(--body);
}
.sg-row:hover { background: var(--acc-soft); }
.sg-ico { flex: none; font-size: 16px; }
.sg-txt { display: flex; flex-direction: column; min-width: 0; }
.sg-txt b {
  font-family: var(--display); font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-txt span {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-all { background: var(--paper); }
.sg-all b { color: var(--acc-deep); }

/* Navigating out is intentionally understated — the app is the destination. */
.sheet-nav-out {
  display: block; text-align: center; margin-top: 12px;
  font-size: 12px; color: var(--ink-soft); text-decoration: none;
}
.sheet-nav-out:hover { color: var(--acc-deep); text-decoration: underline; }

/* "Search this area" — floats over the map after the traveller pans. */
.map-search-area {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 500;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 16px rgba(47, 62, 70, 0.18);
  animation: msa-in .18s ease-out;
}
.map-search-area:hover { border-color: var(--acc); }
.map-search-area:disabled { opacity: .6; cursor: default; }
.map-area-results { position: absolute; inset-inline: 12px; bottom: 24px; z-index: 450; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.map-area-results summary { padding: 12px; min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 700; }
.map-plan { position: absolute; top: 12px; inset-inline: 56px 12px; z-index: 450; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; }
.map-plan summary { cursor: pointer; padding: 12px; min-height: 44px; font-size: 12px; font-weight: 700; }
.map-plan-controls { padding: 0 12px 12px; display: grid; gap: 8px; max-height: 35vh; overflow: auto; }
.map-plan-controls label { display: grid; gap: 4px; font-size: 12px; }
.map-plan-controls select, .map-plan-controls button { min-height: 44px; width: 100%; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.map-plan-controls small { font-size: 11px; }
[data-act-recheck] { min-height: 44px; margin-top: 8px; }
.quality-note a { color: var(--acc); text-decoration: underline; }
.agent-task-panel { flex: 0 0 auto; margin: 0 12px 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); font-size: 12px; }
.agent-task-panel summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; gap: 8px; }
.agent-task-panel button { min-height: 44px; padding: 6px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.agent-task-log { max-height: 120px; overflow: auto; overflow-wrap: anywhere; }
.agent-task-settings { max-height: 35vh; overflow: auto; overflow-wrap: anywhere; }
/* Ajan kapatma bayrağı: panel (yolculuk kontrolleri içinde) hiç görünmez. */
:root[data-ajan="kapali"] .agent-task-panel,
:root[data-ajan="kapali"] [data-journey-clock-state] { display: none !important; }
.agent-task-settings label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.agent-task-settings input { flex: 0 0 auto; width: 20px; height: 20px; }
.agent-task-log article { border-top: 1px solid var(--line); padding: 4px 0; }
.agent-receipt { padding-inline: 6px; }
.journey-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-task-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; align-items:start; }
.agent-task-panel[hidden] { display:none; }
.agent-task-panel > details { min-width:0; }
.agent-task-panel > details[open] { grid-column:1 / -1; }
.agent-task-panel .usage-help { justify-self:end; font-size:12px; max-width:145px; white-space:normal; }
.journey-intro { line-height:1.5; margin:6px 0 12px; color:var(--ink-soft); }
.journey-controls > button { flex:1 1 140px; min-width:0; overflow-wrap:anywhere; text-align:start; }
.journey-controls > button:disabled { opacity:.5; cursor:not-allowed; }
.usage-guide ol { padding-inline-start:22px; margin:18px 0 0; }
.usage-guide li { padding-inline-start:4px; margin-bottom:20px; }
.usage-guide h4 { margin:0 0 6px; color:var(--ink); }
.usage-actions { display:flex; gap:8px; flex-wrap:wrap; }
.modal .activation-modal { min-width:0; overflow-wrap:anywhere; }
.modal .activation-modal h3 { padding-inline-end:30px; line-height:1.2; }
.modal .activation-preferences label { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.modal .activation-preferences select { min-width:0; width:100%; min-height:44px; font-size:16px; box-sizing:border-box; }
.modal .activation-preferences label small { grid-column:1; }
.modal #journeyText { font-size:16px; resize:vertical; }
.activation-route-actions { flex-wrap:wrap; }
.modal .modal-x { width:44px; height:44px; top:4px; right:4px; }
[dir=rtl] .modal .modal-x { right:auto; left:4px; }
@media (max-height:500px) { .agent-task-settings { max-height:25dvh; } .modal { max-height:calc(100dvh - 24px); } }
.activation-modal .activation-share { min-height:44px; margin:4px 0; font-size:13px; }
.activation-preferences label:has(small) { flex-wrap:wrap; }
.activation-preferences label small { flex-basis:100%; overflow-wrap:anywhere; }
#journeyText { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--card); }
.agent-task-panel summary::after { content: '⌄'; margin-inline-start: auto; }
[data-journey-city] > button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
[data-journey-city] > .btn-primary { background: var(--acc); color: var(--acc-ink); }
[data-journey-city] > label:has(input) { display: flex; align-items: center; gap: 8px; min-height: 44px; }
#journeyRemember { width: 20px; height: 20px; flex: 0 0 auto; }
#mapAreaStatus { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#mapAreaList { max-height: min(160px, 28vh); overflow-y: auto; overscroll-behavior: contain; }
.map-area-place { display: block; width: 100%; min-height: 52px; padding: 10px 12px; text-align: start; background: none; color: var(--ink); border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.map-area-place strong, .map-area-place span { display: block; overflow-wrap: anywhere; }
.map-area-place span { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.msa-ico { font-size: 14px; }
@keyframes msa-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .map-search-area { animation: none; } }

/* ── Destination picker (location-first, no preset city list) ─ */
.dp-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.dp-current { font-family: var(--display); font-weight: 700; font-size: 15px; }
.dp-locate {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; cursor: pointer; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.dp-locate:hover { background: var(--acc-soft); }
.dp-locate-ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(180deg, #7fd29b, var(--acc));
}
.dp-locate-txt { display: flex; flex-direction: column; }
.dp-locate-txt b { font-family: var(--display); font-size: 15px; color: var(--ink); }
.dp-locate-txt span { font-size: 12px; color: var(--ink-soft); }
/* "Başka bir yer ara" satırı — konum satırıyla aynı biçim, farklı ikon
   rengi. Buradaki ayrı arama kutusu kaldırıldı: üstteki arama zaten hem
   mekân hem destinasyon öneriyordu, iki kutu aynı işi yapıyordu. */
.dp-search-hint {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; cursor: pointer; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.dp-search-hint:hover { background: var(--acc-soft); }
.dp-search-hint .dp-locate-ico {
  background: linear-gradient(180deg, #cdd9e8, #a7c7e7);
  color: var(--ink);
}
.dp-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); padding: 6px 16px 4px;
}
.dp-recent { padding-bottom: 8px; }
.dp-recent-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 10px 16px; cursor: pointer; text-align: left;
  background: none; border: 0; font-family: var(--body); font-size: 14px; color: var(--ink);
}
.dp-recent-row:hover { background: var(--paper); }
.dp-country { font-size: 12px; color: var(--ink-soft); }

/* ── City menu ───────────────────────────────────────────── */
.city-menu {
  position: absolute; top: 58px; right: 16px; z-index: 60;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; min-width: 230px;
}
.city-option {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.city-option:last-child { border-bottom: 0; }
.city-option:hover { background: var(--paper); }
.city-option .co-name { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.city-option .co-tag { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.co-beta {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--c-shop-soft); color: var(--c-shop);
  border-radius: 4px; padding: 1px 5px;
}

/* ── Views ───────────────────────────────────────────────── */
/* z-index:1 makes .views a stacking context, so Leaflet's internal panes
   (z-index up to 700) can never paint above the sheet, scrim or nav. */
.views { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; z-index: 1; }
.view { position: absolute; inset: 0; overflow-y: auto; }
.view-feed, .view-saved { padding: 16px 16px 24px; }
.view-map { overflow: hidden; }
#map { width: 100%; height: 100%; }

/* Feed */

.coverage-note {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--c-shop-soft); border: 1px solid #ecd9a4;
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 13px; color: #6b5107; line-height: 1.45;
  margin-bottom: 16px;
}

/* ── Kategori satırı (keşif ana ekranı) ──────────────────────
   Airbnb'nin "Experiences" düzeni: her konu tek bir yatay şerit, sağda
   tümünü açan bir ok. Dikey yığın yerine bunu seçmemizin sebebi ölçülebilir:
   altı kategori × (1 kapak + ~12 kart) = tek ekranda 78 karta kadar
   çıkabiliyordu. Şimdi görünen yükseklik kategori başına sabit. */
.cat-row { margin-bottom: 24px; }
.cr-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 0 2px 11px; font-family: var(--body); color: inherit;
}
.cr-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em;
}
.cr-arrow {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px;
  transition: transform .12s, background .12s;
}
.cr-head:hover .cr-arrow { background: var(--acc-soft); transform: translateX(2px); }
[dir="rtl"] .cr-arrow { transform: scaleX(-1); }
[dir="rtl"] .cr-head:hover .cr-arrow { transform: scaleX(-1) translateX(2px); }

/* Şerit kenardan kenara kaysın: negatif marjla kap dolgusunu iptal edip
   aynı miktarı iç dolgu olarak veriyoruz, böylece ilk kart hizada durur
   ama son kart ekranın kenarına kadar gidebilir. */
.cr-strip {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 0 -16px; padding: 0 16px 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cr-strip::-webkit-scrollbar { display: none; }
[dir="rtl"] .cr-strip { direction: rtl; }

.row-card { flex: none; width: 156px; scroll-snap-align: start; cursor: pointer; }
.rc-img {
  position: relative; width: 156px; height: 156px;
  border-radius: 18px; overflow: hidden;
  background: var(--thumb-bg, var(--paper));
  display: grid; place-items: center; font-size: 30px;
}
.rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Fotoğrafsız kart: EKSİK DEĞİL, TASARIM ──────────────────
   Ölçüldü: kapak oranı %3,7 ve hiçbir şehir %15'e ulaşmıyor (ücretsiz
   kaynakların tavanı). Yani kartların ezici çoğunluğunda görünen tek
   görsel bu kutu. "Fotoğraf yüklenemedi" gibi durursa uygulama bozuk
   görünür; kasıtlı dururca sakin bir liste olur.

   Üç değişiklik, üçü de aynı amaca hizmet ediyor:
   1. Emoji 30px -> 52px. Türe göre ayrıştığı için (tur-emoji.js) artık
      bilgi taşıyor; küçük kalınca hem okunmuyor hem yer tutucu gibi.
   2. İç halka: kutuya kenar veriyor, boş çerçeve hissini kaldırıyor.
   3. Hafif gölge: emoji zeminden ayrılıyor, düz yapıştırılmış durmuyor.

   Renk degradesi mekân adının hash'inden geliyor (kapakZemin), yani
   her mekân kendi rengini koruyor — liste tekdüze bir blok olmuyor. */
.rc-img.rc-noimg {
  font-size: 52px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
  text-shadow: 0 1px 2px rgb(0 0 0 / .10);
}
@media (prefers-color-scheme: dark) {
  .rc-img.rc-noimg { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
}
:root[data-theme="dark"] .rc-img.rc-noimg { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
:root[data-theme="light"] .rc-img.rc-noimg { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.rc-img .save-btn {
  position: absolute; top: 7px; inset-inline-end: 7px;
  color: #fff; font-size: 18px;
  /* Fotoğraflar açık da olabilir koyu da; kalp her ikisinde de okunmalı. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.rc-img .save-btn.saved { color: #ff8f7a; }
.rc-name {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  line-height: 1.25; margin: 9px 1px 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* İKİ SATIRLIK YER HER ZAMAN AYRILIR. Ad kısa olunca kart kısalıyor
     ve şeritteki kartların alt kenarı kayıyordu — mobilde ölçüldü,
     aynı şeritte 190px ve 174px kartlar yan yana geldi. Üst sınır zaten
     iki satır; alt sınırı da iki satır yapmak hizayı garanti ediyor. */
  min-height: calc(2 * 1.25em);
}
/* İKİ SATIRDA KES. Alt satır eskiden kısa bir tür etiketiydi ("Museum")
   ve tek satıra sığıyordu. Artık editoryal cümle taşıyor ve cümleler
   farklı uzunlukta: sınır koymayınca kartlar 2, 3, 4 satır olup şeritte
   farklı boylarda duruyor, göz hizası bozuluyor. Ölçüldü: aynı şeritte
   54px ve 18px yükseklikte alt satırlar yan yana geldi. */
.rc-sub {
  font-size: 12px; color: var(--ink-soft); margin-left: 1px;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Sabit yükseklik: cümlesi olmayan kart da aynı yeri kaplasın ki
     şeritteki kartların alt kenarı hizalı kalsın. */
  min-height: calc(2 * 1.35em);
}

/* ── Ortaklık ────────────────────────────────────────────────
   Bonus rozeti bilinçli olarak sakin: mekânın kendi bilgisinden daha
   yüksek sesle bağırırsa liste reklam panosuna dönüyor ve tam da
   kaçındığımız "gözü yoran" hâle geri dönerdik. */
.pt-bonus {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; padding: 2px 8px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc-ink);
  font-size: 11px; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-demo {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; background: #b45309; color: #fff;
  border-radius: 4px; padding: 1px 4px;
}
.sheet-bonus {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--acc-soft); border: 1px solid #c9e3d4;
  font-size: 13px; font-weight: 600; color: var(--acc-ink);
}
/* Demo uyarısı feed'in en üstünde ve göz ardı edilemeyecek kadar belirgin. */
.demo-banner {
  display: flex; gap: 8px; align-items: flex-start;
  background: #fef3c7; border: 1px solid #fbbf24; color: #78350f;
  border-radius: 14px; padding: 11px 13px; margin-bottom: 14px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}

.cat-section { margin-bottom: 26px; }
.cat-heading {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
}
.cat-heading h2 {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.01em;
}
.cat-heading .cat-count {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.cat-heading .cat-sub { font-size: 12px; color: var(--ink-soft); margin-left: auto; }

/* POI card */
.poi-card {
  position: relative;
  display: flex; gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  /* Gölge yok. Her kartın altında gölge olunca liste kabartmalı bir yüzeye
     dönüşüyor ve göz her satırda yeniden odaklanmak zorunda kalıyordu.
     Ayırıcı olarak ince çizgi + boşluk yetiyor; gölge sadece gerçekten
     yüzen katmanlara (sayfa, kapak kartı) ayrıldı. */
  transition: transform .12s, border-color .12s;
  overflow: hidden;
}
/* A thin colour edge reads as a modern accent; the old 4px border made every
   card look like a bordered box. */
.poi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cfe0d6; }
.poi-card:active { transform: translateY(0) scale(0.995); }
.poi-thumb { border-radius: 18px; }
.poi-name { letter-spacing: -0.01em; }

/* ── Photo-hero card (top pick per section) ──────────────── */
.poi-hero {
  /* Stitch düzeni: foto üstte, beyaz gövde altta. Karartma perdesi yok —
     metin foto kalitesinden bağımsız her zaman okunur. */
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  cursor: pointer;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(47, 62, 70, 0.05), 0 2px 8px rgba(94, 187, 126, 0.08);
  transition: transform .14s, box-shadow .14s;
}
.poi-hero:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(47,62,70,.10), 0 2px 8px rgba(94,187,126,.08); }
.poi-hero:active { transform: scale(0.98); box-shadow: 0 4px 14px rgba(47,62,70,.08); }
.hero-img {
  position: relative;
  aspect-ratio: 5 / 3.4;
  background: var(--acc-soft);
  display: grid; place-items: center; font-size: 40px;
}
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-rate {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 5px 10px;
  box-shadow: 0 1px 4px rgba(47, 62, 70, 0.14);
}
.hero-img .save-btn {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  color: #fff; font-size: 21px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.hero-img .save-btn.saved { color: #ff8f7a; }
.poi-hero.hero-noimg .hero-img { aspect-ratio: 1.18 / 1; }
.hero-body { padding: 14px 16px 15px; color: var(--ink); }
.hero-name {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 5px;
}
.hero-sub {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 5px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-soft); text-transform: uppercase;
}
.hero-meta .meta-open { color: var(--acc-deeper); }
.hero-meta .meta-closed { color: #c14a37; }
.poi-thumb {
  flex: none; width: 96px; height: 96px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 24px;
  background: var(--thumb-bg, var(--paper));
  overflow: hidden;
}
.poi-thumb.has-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fotoğrafsız liste küçüğü: satır kartıyla aynı dil. 26px emoji 72px
   kutuda kayboluyordu; 34px kutuyu dolduruyor ve tür emojisi okunur
   hâle geliyor. İç halka burada da "boş kutu" hissini kaldırıyor. */
.poi-thumb:not(.has-img) {
  font-size: 34px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
  text-shadow: 0 1px 2px rgb(0 0 0 / .10);
}
:root[data-theme="dark"] .poi-thumb:not(.has-img) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
@media (prefers-color-scheme: dark) {
  .poi-thumb:not(.has-img) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
}
:root[data-theme="light"] .poi-thumb:not(.has-img) { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.meta-rating { color: var(--c-shop); font-weight: 500; }
.live-open { font-family: var(--mono); font-size: 12px; color: #256b45; }   /* 3.3:1 idi */
.poi-body { flex: 1; min-width: 0; }
.poi-name-row { display: flex; align-items: flex-start; gap: 8px; }
.poi-name {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; line-height: 1.25;
  flex: 1;
}
.save-btn {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px;
  color: #b7bfba;
  transition: transform .12s;
}
.save-btn:hover { transform: scale(1.15); }
.save-btn.saved { color: var(--c-eat); }
.poi-blurb {
  font-size: 13px; color: var(--ink-soft); line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.poi-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
}
.meta-open { color: var(--c-do); }
.meta-closed { color: var(--c-eat); }
.meta-done { color: var(--c-do); font-weight: 500; }

/* ── Empty / search states ───────────────────────────────── */
.empty-state {
  text-align: center; padding: 56px 24px;
  color: var(--ink-soft);
}
.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state h3 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--ink); margin-bottom: 6px;
}
.empty-state p { font-size: 14px; line-height: 1.5; }
.empty-state .es-retry { margin-top: 16px; }

/* Zemin var(--ink) ise yazı var(--card): koyu temada --ink AÇIK renge döner ve
   sabit #fff yazı görünmez olur. Ölçüldü (19 Eylül, koyu tema): şehir arama
   sonucu kontrast 1,14:1 (WCAG AA 4,5). --ink/--card çifti tüm temalarda ≥ 10,5.
   Aynı kalıp .guide-msg.you, .guide-send, .lang-btn.active'te de düzeltildi. */
.search-city-hit {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  background: var(--ink); color: var(--card);
  border: 0; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.search-city-hit span:last-child { font-size: 13px; opacity: .75; }

/* ── Map ─────────────────────────────────────────────────── */
.pin {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--pin-bg, var(--ink));
  border: 2.5px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(0deg);
  box-shadow: 0 2px 8px rgba(28,35,32,.35);
  font-size: 15px;
  cursor: pointer;
}
.pin.pin-saved { outline: 3px solid rgba(217, 74, 53, .4); outline-offset: 1px; }
.pin.pin-g {
  width: 26px; height: 26px;
  border: 2.5px solid var(--pin-line, var(--ink));
  box-shadow: 0 2px 6px rgba(28,35,32,.25);
}

.gdisc-divider {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
.gdisc-divider .gdisc-note {
  font-family: var(--mono); font-weight: 400; font-size: 11px; color: #9aa39e;
}
.gdisc-more {
  display: block; width: 100%;
  margin: 6px 0 4px;
  padding: 12px;
  font-family: var(--body); font-weight: 700; font-size: 14px;
  color: var(--ink); background: var(--card);
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.gdisc-more:hover { border-color: var(--ink-soft); background: var(--paper); }

.search-geocode {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink);
}
.search-geocode span:last-child { opacity: .7; }
.city-menu-hint {
  padding: 11px 16px; font-size: 12px; line-height: 1.45;
  color: var(--ink-soft); background: var(--paper);
  border-top: 1px solid var(--line);
}

/* Explore prompt for searched destinations (no curated feed yet) */
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--body); }
.map-popup b { font-family: var(--display); font-size: 14px; }
.map-popup .mp-open {
  display: inline-block; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--c-see);
  cursor: pointer;
}

/* ── Saved / Trip view ───────────────────────────────────── */
.trip-header { margin-bottom: 14px; }
.trip-header h2 {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em;
}
.trip-header p { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.trip-progress {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  margin-top: 8px;
}
.trip-bar {
  height: 5px; border-radius: 3px; background: var(--line);
  margin-top: 6px; overflow: hidden;
}
.trip-bar-fill { height: 100%; background: var(--acc); border-radius: 3px; transition: width .3s; }

.trip-city-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  margin: 18px 0 8px;
}
.poi-card.done-card { opacity: .55; }
.poi-card.done-card .poi-name { text-decoration: line-through; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: absolute; left: 50%; bottom: 92px; transform: translate(-50%, 8px);
  /* z-index her sahnenin ÜSTÜNDE (perde 400, bakaç 360, albüm 340) —
     ölçüldü: 95'te albüm açıkken uyarılar tamamen görünmezdi.
     Renkler TEMADAN BAĞIMSIZ sabit: koyu temada var(--ink) açığa
     dönüyor, yazı beyaz kalıyordu — beyaz-üstüne-beyaz okunmuyordu. */
  z-index: 460; max-width: 84%;
  background: rgba(17, 23, 20, 0.95); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 11px 16px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(28,35,32,.3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Beta geri bildirim daveti ───────────────────────────── */
/* Toast'ın kardeşi: renkler TEMADAN BAĞIMSIZ sabit (toast dersinden —
   koyu temada değişken renkler beyaz-üstüne-beyaz üretiyordu) ve alt
   gezinmenin üstünde ama modalların (460 toast) altında durur. */
.fb-davet {
  position: fixed; left: 14px; right: 14px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 300;
  background: rgba(17, 23, 20, 0.96); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(28, 35, 32, .35);
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .25s;
}
.fb-davet.show { opacity: 1; transform: translateY(0); }
.fb-davet-metin { display: flex; flex-direction: column; gap: 2px; }
.fb-davet-metin b { font-family: var(--display); font-size: 15px; }
.fb-davet-metin span { font-size: 13px; color: rgba(255, 255, 255, .75); line-height: 1.4; }
.fb-davet-dugmeler { display: flex; gap: 8px; }
.fb-davet-dugmeler .btn { flex: 1; padding: 10px 12px; font-size: 13px; }
.fb-davet-dugmeler .btn:not(.btn-primary) {
  background: transparent; color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .22);
}
@media (min-width: 720px) { .fb-davet { left: auto; right: 24px; max-width: 360px; } }
[dir="rtl"] .fb-davet { direction: rtl; }

/* ── Kurulum şeridi (Android web) ────────────────────────── */
/* Renkler temadan bağımsız sabit (toast dersi). Alt gezinmenin üstünde,
   görev şeridiyle aynı bölgede — ikisi aynı anda görünmez (aşağıda). */
#kurSerit {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 64;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px 9px 10px; border-radius: 16px;
  background: rgba(17, 23, 20, .96); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 26px rgba(28, 35, 32, .34);
  opacity: 0; transform: translateY(12px);
  transition: opacity .28s, transform .28s;
}
#kurSerit.show { opacity: 1; transform: translateY(0); }
.kur-ikon { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; }
.kur-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kur-metin b { font-family: var(--display); font-size: 14px; font-weight: 700; }
.kur-metin span { font-size: 11.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kur-git { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; min-height: 38px; }
.kur-kapat {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: #fff; opacity: .55; font-size: 15px; min-width: 34px; min-height: 38px;
}
/* Aynı bölgeyi paylaşan üç şerit asla üst üste binmez */
body:has(#kurSerit) #gorevSerit,
body:has(.fb-davet) #kurSerit { opacity: 0; pointer-events: none; }
[dir="rtl"] #kurSerit { direction: rtl; }
@media (min-width: 720px) { #kurSerit { left: auto; right: 20px; width: 380px; } }

/* ── Kurulum: Play rozeti + ayraç ────────────────────────── */
.kur-veya {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px; color: var(--ink-soft, #6c766f); font-size: 12px;
}
.kur-veya::before, .kur-veya::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #e3e8e4);
}
.kur-play {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 11px 16px; border-radius: 13px; text-decoration: none;
  background: #1c2320; color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
}
.kur-play-ico {
  font-size: 17px; line-height: 1;
  background: linear-gradient(135deg, #34d07f, #3b6fe0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kur-play span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.kur-play small { font-size: 10px; opacity: .7; letter-spacing: .04em; }
.kur-play b { font-family: var(--display); font-size: 14px; font-weight: 700; }

/* ── Keşif rehberi şeridi (aktif yönlendirme) ────────────── */
/* v1'de köşede pasif bir rozetti; kullanıcı "ne yapacağımı bilmiyorum"
   diyordu. v2 sabit şerit: ilerleme + sıradaki adım + onu AÇAN düğme.
   Renkler temadan bağımsız sabit (toast dersi: koyu temada değişkenler
   beyaz-üstüne-beyaz üretiyordu). z-index alt gezinmenin üstünde ama
   sahnelerin/modalın (90+) altında. */
#gorevSerit {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 62;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 14px;
  border-radius: 16px; cursor: pointer;
  background: rgba(17, 23, 20, .95); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 22px rgba(28, 35, 32, .3);
  transition: opacity .25s, transform .25s, background .3s;
  animation: gsGir .4s cubic-bezier(.22, .9, .36, 1);
}
@keyframes gsGir { from { opacity: 0; transform: translateY(14px); } }
#gorevSerit.bitti { background: #c9a227; color: #1c2320; border-color: #e8cf7a; }
/* Adım tamamlandığında bir an yeşil yanar, sonra sıradakini yazar. */
#gorevSerit.kutla { background: #256b45; transform: scale(1.02); }
.gs-sol { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.gs-nokta { display: flex; gap: 4px; flex: 0 0 auto; }
.gs-nokta i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .28); transition: background .3s, transform .3s;
}
.gs-nokta i.dolu { background: #7fd29b; }
.gs-nokta i.sirada { background: #fff; transform: scale(1.35); }
#gorevSerit.bitti .gs-nokta i { background: rgba(28, 35, 32, .35); }
#gorevSerit.bitti .gs-nokta i.dolu { background: #1c2320; }
.gs-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-metin b {
  font-family: var(--display); font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-metin span { font-size: 11.5px; opacity: .72; }
.gs-git {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: #3d8f5f; color: #fff;
  font-family: var(--body); font-size: 13px; font-weight: 700;
  padding: 9px 15px; border-radius: 11px;
  min-height: 38px;   /* dokunma hedefi */
  transition: transform .12s, filter .15s;
}
.gs-git:active { transform: scale(.94); }
.gs-kapat {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: currentColor; opacity: .6; font-size: 15px;
  min-width: 38px; min-height: 38px;
}
/* Geri bildirim daveti aynı bölgeyi kullanıyor — ikisi aynı anda görünmez */
body:has(.fb-davet) #gorevSerit { opacity: 0; pointer-events: none; }
[dir="rtl"] #gorevSerit { direction: rtl; }
@media (min-width: 720px) { #gorevSerit { left: auto; right: 20px; width: 380px; } }

/* Panel (şeride dokununca) */
.gorev-cubuk {
  height: 6px; border-radius: 3px; margin: 12px 0 4px;
  background: var(--line, #e3e8e4); overflow: hidden;
}
.gorev-cubuk span { display: block; height: 100%; background: #3d8f5f; transition: width .4s ease; }
.gorev-liste { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.gorev {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--surface, #f1f4f1); font-size: 15px; font-weight: 600;
  text-align: left;
}
.gorev-ad { flex: 1; min-width: 0; }
.gorev.oldu { opacity: .62; text-decoration: line-through; }
.gorev.sirada { outline: 2px solid var(--acc, #3d8f5f); outline-offset: -2px; background: var(--acc-soft, #e3f4ec); }
.gorev-isaret { font-size: 18px; flex: 0 0 auto; }
.gorev-git { flex: 0 0 auto; padding: 7px 13px; font-size: 13px; min-height: 36px; }
.gorev-unvan {
  text-align: center; font-size: 14px; color: var(--ink-soft, #5a645d);
  padding-top: 4px;
}
.gorev-unvan b { color: #c9a227; }

/* ── Countdown ───────────────────────────────────────────── */
.cd-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 14px; padding: 12px;
  border: 1.5px dashed var(--line); background: var(--card); cursor: pointer;
  border-radius: 16px; font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--ink-soft);
}
.cd-add:hover { border-color: var(--acc); color: var(--acc-deep); }
.cd-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #2f3e46, #45525a); color: #fff;
  border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; cursor: pointer;
  box-shadow: var(--clay);
}
.cd-plane { font-size: 24px; }
.cd-info { flex: 1; min-width: 0; }
.cd-lbl { font-size: 12px; opacity: .8; }
.cd-count { display: flex; align-items: baseline; gap: 6px; }
.cd-count b { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.cd-count span { font-size: 13px; opacity: .85; }
.cd-edit { font-family: var(--mono); font-size: 11px; opacity: .7; }
.cd-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.cd-clear { align-self: center; background: none; border: 0; color: var(--c-eat); font-size: 13px; cursor: pointer; }

/* ── Memory board (kazı-kazan) ───────────────────────────── */
.mem-board { margin-bottom: 20px; }
.mem-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.mem-head h3 { font-family: var(--display); font-weight: 700; font-size: 16px; }
.mem-head p { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.mem-share {
  flex: none; font-family: var(--body); font-weight: 700; font-size: 12px;
  color: var(--acc-ink); background: linear-gradient(180deg, #7fd29b, var(--acc));
  border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.mem-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mem-tile {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  border: 0; padding: 0; cursor: pointer;
  border-bottom: 3px solid var(--spine, var(--acc));
  box-shadow: var(--clay);
}
.mem-tile img { width: 100%; height: 100%; object-fit: cover; }
.mem-ico { width: 100%; height: 100%; display: grid; place-items: center; font-size: 24px; }
.mem-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--body); font-weight: 600; font-size: 11px; color: #fff;
  padding: 12px 6px 5px; text-align: left; line-height: 1.15;
  background: linear-gradient(to top, rgba(20,30,26,.85), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mem-more {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px;
  background: var(--acc-soft); color: var(--acc-deep);
  font-family: var(--display); font-weight: 700; font-size: 20px;
}

/* ── Trip tools (split + group) ──────────────────────────── */
.trip-tools { display: flex; gap: 8px; margin: 12px 0 16px; }
.tt-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--clay);
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--ink);
}
.tt-btn span { font-size: 16px; }
.tt-btn:hover { border-color: var(--acc); }

/* Split (ortak adisyon) */
.sp-sec { margin-top: 16px; }
.sp-sec h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 8px; }
.sp-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--acc-soft); color: var(--acc-ink); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; }
.sp-chip button { background: rgba(0,0,0,.12); border: 0; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 11px; color: inherit; }
.sp-add { display: flex; gap: 8px; }
.sp-add .auth-input { flex: 1; }
.sp-expform { display: flex; flex-direction: column; gap: 8px; }
.sp-row2 { display: flex; gap: 8px; }
.sp-row2 .auth-input { flex: 1; min-width: 0; }
.sp-split-lbl { font-size: 12px; color: var(--ink-soft); }
.sp-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-check { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.sp-hint { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.sp-total { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.sp-total b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.sp-exp { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-exp-i { flex: 1; display: flex; flex-direction: column; }
.sp-exp-i b { font-size: 14px; }
.sp-exp-i span { font-size: 12px; color: var(--ink-soft); }
.sp-exp-x { background: none; border: 0; color: var(--c-eat); cursor: pointer; font-size: 13px; }
.sp-settle { display: flex; justify-content: space-between; padding: 9px 12px; background: var(--paper); border-radius: 10px; margin-bottom: 6px; font-size: 14px; }
.sp-settle span { font-family: var(--display); font-weight: 700; color: var(--acc-deep); }
.sp-settled { text-align: center; padding: 16px; color: var(--acc-deep); font-family: var(--display); font-weight: 700; }

/* Group (grup planlama) */
.gr-code { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: .12em; text-align: center; padding: 16px; background: var(--acc-soft); color: var(--acc-ink); border-radius: 16px; margin: 12px 0; }
.gr-actions { display: flex; gap: 8px; }
.gr-or { text-align: center; color: var(--ink-soft); font-size: 12px; margin: 16px 0; }
.gr-input { text-align: center; letter-spacing: .15em; font-family: var(--mono); }
.gr-leave { display: block; width: 100%; background: none; border: 0; color: var(--c-eat); font-size: 13px; cursor: pointer; margin-top: 14px; }

/* Hand a finished day straight to Google Maps as a multi-stop route —
   the step testers said they otherwise do by hand, stop by stop. */
.day-route {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 4px; padding: 13px 15px; cursor: pointer;
  border: 1.5px solid var(--acc); border-radius: 16px;
  background: var(--acc-soft); color: var(--acc-ink);
  font-family: var(--body); font-weight: 700; font-size: 13px;
  text-align: left;
}
.day-route:hover { background: #d6ecdf; }
.day-route:active { transform: scale(0.99); }
.dr-ico { font-size: 16px; }
.dr-txt { flex: 1; }
.dr-count {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: rgba(255, 255, 255, 0.75); border-radius: 999px; padding: 3px 9px;
}

/* ── Trip planner ────────────────────────────────────────── */
.trip-auto { width: 100%; margin-top: 12px; }
.plan-day { margin-bottom: 18px; }
.plan-day-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  margin: 6px 2px 10px;
}
.plan-day-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  display: grid; place-items: center; font-size: 13px;
  box-shadow: var(--clay);
}
.plan-day-count {
  margin-left: auto; font-family: var(--mono); font-weight: 400;
  font-size: 11px; color: var(--ink-soft);
}
.plan-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 8px 10px; margin-bottom: 8px;
  box-shadow: var(--clay); cursor: pointer;
}
.plan-row.done { opacity: .5; }
.plan-time {
  flex: none; width: 74px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 4px;
  background: var(--paper); color: var(--ink); text-align: center;
}
.plan-thumb {
  flex: none; width: 42px; height: 42px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 18px;
  background: var(--thumb-bg, var(--paper));
}
.plan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-info b { font-family: var(--display); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-info span { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-ctrl { flex: none; display: flex; align-items: center; gap: 2px; }
.plan-ctrl button {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font-size: 11px; color: var(--ink-soft); display: grid; place-items: center;
}
.plan-ctrl button:hover { border-color: var(--ink-soft); color: var(--ink); }
.plan-unsched-head {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  margin: 22px 0 10px;
}
.plan-add {
  font-family: var(--body); font-weight: 700; font-size: 12px;
  color: var(--acc-deep); background: var(--acc-soft);
  border: 0; border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.plan-add:hover { filter: brightness(0.97); }

/* Day-count chooser (auto-plan) */
.day-choices { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.day-choice {
  flex: 1; min-width: 40px;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 14px; padding: 12px 0; cursor: pointer;
}
.day-choice.sug { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-deep); }
.day-choice:hover { border-color: var(--ink-soft); }

/* Nearby town chips in the city menu */
.city-menu-head {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  padding: 12px 16px 6px;
}
.city-nearby { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.nearby-chip {
  font-family: var(--body); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 99px; padding: 6px 12px; cursor: pointer;
}
.nearby-chip:hover { border-color: var(--acc); color: var(--acc-deep); }

/* Sponsored slot */
.ad-slot {
  position: relative; cursor: pointer;
  background: linear-gradient(135deg, var(--acc-soft), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 14px 12px; margin: 4px 0 12px;
  box-shadow: var(--clay);
}
/* Gerçek reklam ağı alanı: içeriği AdMob/AdSense dolduruyor, biz yalnızca
   kabı ve yüksekliği veriyoruz. Sabit yükseklik şart — reklam sonradan
   yüklenince akış zıplamasın (CLS), kullanıcı yanlış karta basmasın. */
.ad-slot.ad-net {
  min-height: 100px; cursor: default;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
}
.ad-label {
  position: absolute; top: 8px; right: 12px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
}
.ad-body { display: flex; align-items: center; gap: 12px; }
.ad-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
}
.ad-text { flex: 1; display: flex; flex-direction: column; }
.ad-text b { font-family: var(--display); font-size: 14px; }
.ad-text span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.ad-cta {
  flex: none; font-family: var(--body); font-weight: 700; font-size: 12px;
  color: var(--acc-ink); background: linear-gradient(180deg, #7fd29b, var(--acc));
  border-radius: 999px; padding: 7px 13px;
}

.done-btn {
  flex: none; background: none; border: 1.5px solid var(--line);
  border-radius: 50%; width: 26px; height: 26px;
  cursor: pointer; font-size: 13px; line-height: 1;
  color: transparent; display: grid; place-items: center;
}
.done-btn:hover { border-color: var(--c-do); color: var(--c-do); }
.done-btn.done { background: var(--c-do); border-color: var(--c-do); color: #fff; }

/* ── Bottom nav ──────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  flex: none;   /* pinned — never shrinks or scrolls away */
  margin: 0 12px calc(10px + env(safe-area-inset-bottom));
  padding: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 30px rgba(47, 62, 70, 0.16), 0 1px 2px rgba(47, 62, 70, 0.08);
  z-index: 30;
}
/* Active tab sits in its own filled pill — the icon+label lift together so the
   current section is obvious at a glance, rather than relying on colour alone. */
.nav-icon svg { width: 20px; height: 20px; display: block; }
.nav-ai-orb svg { width: 22px; height: 22px; }
.nav-btn {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 4px 8px; margin: 5px 3px;
  border-radius: 18px;
  font-family: var(--body); font-size: 11px; font-weight: 600;
  color: #9aa39e;
  transition: background .18s, color .18s, transform .12s;
}
.nav-btn .nav-icon {
  font-size: 18px; line-height: 1;
  transition: transform .18s;
}
.nav-btn:active { transform: scale(0.94); }
.nav-btn.active {
  color: var(--acc-ink);
  background: linear-gradient(180deg, #b7efd7, var(--acc));
  box-shadow: 0 3px 10px rgba(61, 143, 95, 0.28);
  font-weight: 700;
}
.nav-btn.active .nav-icon { transform: translateY(-1px) scale(1.06); }
.nav-badge {
  position: absolute; top: 4px; right: calc(50% - 22px);
  background: var(--c-eat); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ── Detail sheet ────────────────────────────────────────── */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(28, 35, 32, 0.45);
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 82;
  max-height: 86%;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  box-shadow: 0 -12px 48px rgba(28,35,32,.3);
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ── Kaydırarak mekân değiştirme ─────────────────────────────
   Çıkış ve giriş ayrı: parmak hangi yöne gittiyse kart o yöne süzülüp
   çıkıyor, yenisi karşı taraftan geliyor. Yönsüz bir soluklaşma, hareketin
   nereye gittiğini anlatmadığı için kafa karıştırıyordu. */
.sheet-exit-l, .sheet-exit-r { transition: transform .13s ease-in, opacity .13s ease-in; }
.sheet-exit-l { transform: translateX(-9%); opacity: 0; }
.sheet-exit-r { transform: translateX(9%); opacity: 0; }
.sheet-enter-r { animation: sheet-in-r .2s ease-out; }
.sheet-enter-l { animation: sheet-in-l .2s ease-out; }
@keyframes sheet-in-r { from { transform: translateX(9%);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-in-l { from { transform: translateX(-9%); opacity: 0; } to { transform: none; opacity: 1; } }
/* Listenin ucu: sarmalamak yerine hafif bir direnç. */
.sheet-bump { animation: sheet-bump .22s ease-out; }
@keyframes sheet-bump { 40% { transform: translateX(-6px); } 75% { transform: translateX(3px); } }

.sheet-deck {
  position: absolute; top: 12px; inset-inline-start: 12px;
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .85); border-radius: 999px;
  padding: 2px 4px;
}
.sd-btn {
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: none; cursor: pointer; color: var(--ink);
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.sd-btn:disabled { opacity: .28; cursor: default; }
.sd-count {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  padding: 0 3px; min-width: 34px; text-align: center;
}
[dir="rtl"] .sd-btn { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .poi-card, .save-btn { transition: none; }
  .sheet-exit-l, .sheet-exit-r { transition: none; opacity: 0; transform: none; }
  .sheet-enter-l, .sheet-enter-r, .sheet-bump { animation: none; }
}

.sheet-hero {
  position: relative;
  height: 148px;
  display: grid; place-items: center;
  font-size: 56px;
  background: var(--hero-bg, var(--paper));
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
.sheet-hero.has-photo { height: 212px; }
.sheet-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sheet-hero .hero-rate { top: auto; bottom: 12px; right: 12px; }
.sheet-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--ink);
  font-size: 15px; display: grid; place-items: center;
}
.sheet-body { padding: 18px 20px 26px; }
.sheet-cat {
  display: inline-block;
  font-family: var(--body); font-weight: 600; font-size: 12px;
  background: var(--cbg, var(--acc-soft)); color: var(--cfg, var(--acc-deeper));
  border-radius: 999px; padding: 5px 12px; margin-bottom: 8px;
}
.sheet-body h2 {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1.15;
}
.sheet-area { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.sheet-blurb { font-size: 15px; line-height: 1.55; margin-top: 12px; }

.sheet-facts {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 10px 0 12px;
}
.sheet-facts .meta-open { color: var(--acc-deeper); }
.sheet-facts .meta-closed { color: #c14a37; }

.sheet-tip {
  display: flex; gap: 8px;
  background: var(--paper); border-radius: 12px;
  padding: 12px 14px; margin-top: 14px;
  font-size: 13px; line-height: 1.5;
}
.sheet-tip b { font-family: var(--display); }

.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  font-family: var(--mono); font-size: 11px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; color: var(--ink-soft);
}

.sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.btn {
  flex: 1;
  font-family: var(--body); font-weight: 700; font-size: 14px;
  padding: 13px 16px; border-radius: 999px;
  cursor: pointer; text-align: center; text-decoration: none;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .1s, filter .12s, box-shadow .12s, background .12s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.btn-primary {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink); border-color: transparent;
  box-shadow: var(--clay), 0 8px 20px rgba(61, 143, 95, 0.18);
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-primary:active { filter: brightness(0.96); box-shadow: var(--clay); }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: var(--clay); }
.btn-ghost:hover { background: var(--paper); }
.btn-ghost.saved { border-color: var(--c-eat); color: var(--c-eat); }

/* ── Public transport near a place ───────────────────────── */
.transit-box {
  margin-top: 16px; padding: 13px 15px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
}
.tr-head {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  margin-bottom: 9px;
}
.tr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.tr-row:last-of-type { border-bottom: 0; }
.tr-ico { flex: none; font-size: 15px; }
.tr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dist { flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.tr-go {
  display: inline-block; margin-top: 9px;
  font-size: 12px; font-weight: 700; color: var(--acc-deep); text-decoration: none;
}
.tr-go:hover { text-decoration: underline; }

/* ── Live Google data in the sheet ───────────────────────── */
.sheet-live { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.sheet-live:empty { display: none; }
.live-loading { font-family: var(--mono); font-size: 12px; color: #9aa39e; }
.live-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.live-rating { font-family: var(--display); font-weight: 700; font-size: 18px; }
.live-count { font-size: 12px; color: var(--ink-soft); }
.live-powered {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; color: #6c766f;   /* 2.6:1 idi — AA için koyulaştı */
}
.live-demo-note {
  margin-top: 10px; padding: 10px 12px;
  background: var(--paper); border: 1px dashed var(--line); border-radius: 10px;
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
}
.live-demo-note code {
  font-family: var(--mono); font-size: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}
.live-photos {
  display: flex; gap: 8px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.live-photos::-webkit-scrollbar { display: none; }
.live-photos img, .live-photo-ph {
  flex: none; width: 132px; height: 96px; border-radius: 10px;
  object-fit: cover; background: var(--paper);
}
.live-photo-ph {
  display: grid; place-items: center; font-size: 24px;
  border: 1px dashed var(--line); color: #b7bfba;
}
.live-review { margin-top: 14px; }
.lr-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.lr-stars { color: var(--c-shop); font-size: 12px; letter-spacing: 1px; }
.lr-when { font-family: var(--mono); font-size: 11px; color: #9aa39e; }
.live-review p {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.live-more {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--c-see); text-decoration: none;
}
.live-more:hover { text-decoration: underline; }

/* ── Booking / affiliate button ──────────────────────────── */
.btn-book {
  background: var(--c-do); color: #fff; border-color: var(--c-do);
  margin-top: 10px; width: 100%;
}
.btn-book:hover { background: #178a5b; }
.btn-book-tag {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; opacity: .8; margin-left: 8px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 1px 4px;
}

/* ── Overlay stacking tiers (low → high) ─────────────────────
   guide (70/72) < detail sheet (80/82) < modal (90/92) < onboarding (100).
   Keeps a drilled-into place sheet above the guide that launched it. */
.scrim {
  position: absolute; inset: 0;
  background: rgba(28, 35, 32, 0.45);
}
#guideScrim { z-index: 70; }
#modalScrim { z-index: 90; }

/* ── Concierge FAB + panel ───────────────────────────────── */
/* Centre AI button: raised out of the bar so it reads as the primary action. */
.nav-ai {
  flex: none; width: 62px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0; margin: 0 2px;
}
.nav-ai-orb {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  margin-top: -22px;
  background: linear-gradient(160deg, #7fd29b, var(--acc) 55%, #3d8f5f);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(61, 143, 95, 0.42);
  transition: transform .16s, box-shadow .16s;
}
.nav-ai:hover .nav-ai-orb { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(61, 143, 95, 0.5); }
.nav-ai:active .nav-ai-orb { transform: scale(0.92); }
/* Sohbet artık ekranın %78'ini kaplayan bir çekmece değil, TAM ekran.
   Yarım panel, altında kalan feed'i görünür bırakıyordu: göz sürekli iki
   katman arasında bölünüyor ve sohbet "asıl ekranın üstüne yapıştırılmış
   yardımcı" gibi duruyordu. Rehber ürünün merkezindeyse ekranın tamamına
   sahip olmalı. */
.guide-panel {
  position: absolute; inset: 0; z-index: 72;
  background: var(--paper);
  display: flex; flex-direction: column;
  animation: guide-in .2s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
.guide-ses {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
@keyframes guide-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guide-panel { animation: none; } }

/* Yapılan işin görünür kanıtı. Sohbet bir şeyi sessizce yaptığında
   kullanıcı olup olmadığını bilemiyordu. */
.guide-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.guide-act {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--acc-soft); border: 1px solid #c9e3d4;
  border-radius: 12px; padding: 9px 11px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  color: var(--acc-ink); cursor: pointer; text-align: start;
}
.guide-act:hover { border-color: var(--acc-deep); }
/* Uçuş/otel bağlantıları <a> olarak çiziliyor — düğme görünümü korunur. */
a.guide-act { text-decoration: none; color: var(--ink); }
.ga-ext { margin-inline-start: auto; color: var(--ink-soft); font-size: 12px; }

/* ── Rezervasyon talebi formu (sohbetin içinde) ──────────────
   Gönder düğmesi tam genişlikte ve tek: kullanıcı adına mekâna gidecek
   mesaj bu, yanlışlıkla tıklanacak bir yerde durmamalı. Altındaki küçük
   metin ne olduğunu ve ne OLMADIĞINI söylüyor. */
.rez-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px;
}
.rez-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 3px; }
.rez-head b { font-family: var(--display); font-size: 14px; }
.rez-head span { font-size: 12px; color: var(--ink-soft); }
.rez-grid { display: grid; grid-template-columns: 1fr 1fr 66px; gap: 7px; }
.rez-grid label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--ink-soft); font-weight: 600;
}
.rez-grid input, .rez-in {
  font-family: var(--body); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px;
  background: var(--paper); width: 100%; min-width: 0;
}
.rez-grid input:focus, .rez-in:focus { outline: none; border-color: var(--acc-deep); }
.rez-send { width: 100%; margin-top: 3px; }
.rez-send:disabled { opacity: .6; cursor: default; }
.rez-fine { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.rez-ok {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--acc-soft); border: 1px solid #c9e3d4;
  border-radius: 14px; padding: 12px; color: var(--acc-ink);
}
.rez-ok b { font-family: var(--display); font-size: 14px; }
.rez-ok span { font-size: 12px; }
.rez-ok code { font-family: var(--mono); font-size: 12px; }
@media (max-width: 340px) { .rez-grid { grid-template-columns: 1fr 1fr; } }
.guide-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid var(--line); background: var(--card);
}
.guide-head h3 { font-family: var(--display); font-weight: 700; font-size: 18px; }
.guide-head-txt { min-width: 0; }
.guide-head-txt span {
  display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px;
}
.guide-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.guide-msg {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 11px 14px;
  font-size: 14px; line-height: 1.5; max-width: 88%;
}
.guide-msg.you { background: var(--ink); color: var(--card); align-self: flex-end; }
.guide-typing { display: flex; gap: 4px; align-items: center; width: fit-content; }
.guide-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft);
  animation: gt-bounce 1s infinite ease-in-out;
}
.guide-typing span:nth-child(2) { animation-delay: .15s; }
.guide-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes gt-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .guide-typing span { animation: none; } }
.guide-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.guide-chip {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 99px; padding: 7px 12px; cursor: pointer;
}
.guide-chip:hover { border-color: var(--ink); }
.guide-hits { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.guide-hit {
  display: flex; flex-direction: column; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; cursor: pointer; font-family: var(--body);
}
.guide-hit:hover { border-color: var(--ink-soft); }
.guide-hit b { font-family: var(--display); font-size: 14px; }
.guide-hit span { font-size: 12px; color: var(--ink-soft); }
.guide-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.guide-input {
  flex: 1; font-family: var(--body); font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none;
}
.guide-input:focus { border-color: var(--ink); }
.guide-send {
  flex: none; width: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--ink); color: var(--card); font-size: 16px;
}

/* ── Modal (premium, install, about) ─────────────────────── */
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 92; width: calc(100% - 40px); max-width: 380px; max-height: 84%;
  overflow-y: auto;
  background: var(--card); border-radius: 20px; padding: 22px;
  box-shadow: 0 24px 64px rgba(28,35,32,.35);
}
.modal h3 { font-family: var(--display); font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.modal p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 12px; }
.modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: 14px;
}
/* ── Premium / paywall ───────────────────────────────────── */
.pmx { text-align: left; }
.pmx-head { text-align: center; margin-bottom: 18px; }
.pmx-crown { font-size: 34px; display: block; margin-bottom: 6px; }
.pmx-head h3 { font-family: var(--display); font-weight: 700; font-size: 22px; margin-bottom: 4px; }
.pmx-head p { font-size: 13px; color: var(--ink-soft); margin: 0; }

.pmx-feats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.pmx-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.pmx-ico {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 16px; color: #fff;
}
.pmx-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmx-txt b { font-family: var(--display); font-size: 14px; }
.pmx-txt span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

.pmx-choose {
  font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 10px;
}
.pmx-plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pmx-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 14px 15px; cursor: pointer; text-align: left;
  border: 2px solid var(--line); border-radius: 16px; background: var(--card);
  font-family: var(--body);
  transition: border-color .15s, background .15s;
}
.pmx-plan.on { border-color: var(--acc); background: var(--acc-soft); }
.pmx-plan-l { display: flex; align-items: center; gap: 12px; }
.pmx-radio {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c3ccc7; background: #fff;
}
.pmx-plan.on .pmx-radio {
  border-color: var(--acc-deep);
  background: radial-gradient(circle, var(--acc-deep) 0 5px, #fff 6px);
}
.pmx-plan-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.pmx-save {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--acc); color: var(--acc-ink);
  border-radius: 999px; padding: 2px 7px; letter-spacing: .03em;
}
.pmx-plan-r { text-align: right; display: flex; flex-direction: column; }
.pmx-plan-r b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.pmx-plan-r span { font-size: 11px; color: var(--ink-soft); }

.pmx-cta {
  display: block; width: 100%; padding: 16px; cursor: pointer;
  border: 0; border-radius: 999px;
  background: linear-gradient(160deg, #7fd29b, var(--acc) 60%, #4fae72);
  color: var(--acc-ink);
  font-family: var(--display); font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 22px rgba(61, 143, 95, 0.35);
  transition: transform .12s, filter .15s;
}
.pmx-cta:hover { filter: brightness(1.04); }
.pmx-cta:active { transform: scale(0.98); }
.pmx-restore {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--acc-deep);
}
.pmx-fine {
  font-size: 11px; color: var(--ink-soft); line-height: 1.45;
  margin-top: 14px; text-align: center;
}
.pmx-demo {
  font-size: 11px; line-height: 1.45; margin-top: 10px; text-align: center;
  background: var(--c-shop-soft); color: #6b5107;
  border-radius: 10px; padding: 9px 11px;
}
.pmx-legal {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 12px; color: var(--ink-soft);
}
.pmx-legal a { color: var(--ink-soft); }

.premium-modal { text-align: center; }
.pm-badge, .pc-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
  color: var(--c-night); background: var(--c-night-soft);
  border-radius: 6px; padding: 3px 8px; display: inline-block;
}
.premium-modal h3 { margin: 12px 0; }
.pm-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.pm-list li { font-size: 14px; }
.pm-price { font-size: 15px; margin-bottom: 14px; }
.pm-price b { font-family: var(--display); font-size: 22px; }
.pm-fine { font-size: 11px; color: #9aa39e; margin-top: 12px; line-height: 1.4; }

/* ── Profile view ────────────────────────────────────────── */
.profile-card {
  background: linear-gradient(135deg, var(--c-night-soft), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 18px;
}
.profile-card.is-premium { background: linear-gradient(135deg, var(--c-do-soft), var(--card)); }
.pc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pc-top h3 { font-family: var(--display); font-weight: 700; font-size: 16px; }
.pc-top p { font-size: 13px; color: var(--ink-soft); }
.profile-section { margin-bottom: 22px; }
.profile-section h4 {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 10px;
}
.lang-row { display: flex; gap: 8px; }
.lang-btn {
  flex: 1; font-family: var(--body); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 10px; padding: 8px; cursor: pointer;
}
.lang-btn.active { background: var(--ink); color: var(--card); border-color: var(--ink); }
.profile-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.profile-list a { color: var(--c-see); text-decoration: none; }
.profile-link {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 13px 2px; font-family: var(--body); font-size: 15px; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.profile-foot { font-size: 12px; color: #6c766f; text-align: center; margin-top: 8px; }   /* 2.5:1 idi */

/* ── Onboarding (dark immersive hero) ────────────────────── */
.onboard {
  position: absolute; inset: 0; z-index: 100;
  background: linear-gradient(165deg, #18232a 0%, #223038 45%, #2c4a41 100%);
  display: grid; justify-items: center; padding: 28px;
  /* Was `overflow: hidden` + `place-items: center`: in landscape (e.g. 640×360)
     the card is taller than the viewport, so the CTA was clipped below the fold
     and unreachable — the user could never leave onboarding. `safe center`
     keeps it centred when it fits and falls back to start when it doesn't, and
     the scroll makes the button reachable either way. */
  align-content: safe center;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Onboarding tüm ekranı kaplıyor, yani çentiğin ve alttaki ana çubuğun
     altına da uzanıyor. Dolgu buna göre büyütülüyor; yoksa dil seçim
     ızgarasının ilk satırı çentiğin, "Atla" bağlantısı ana çubuğun
     altında kalabiliyor. */
  padding-top: calc(28px + env(safe-area-inset-top));
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.onboard-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 30% at 75% 12%, rgba(94, 187, 126, 0.28), transparent),
    radial-gradient(50% 35% at 15% 85%, rgba(167, 199, 231, 0.14), transparent);
}
.onboard-card {
  text-align: center; max-width: 340px; position: relative; width: 100%;
  color: #fff;
}
.onboard-skip {
  position: absolute; top: -18px; right: -12px;
  /* Was a 26×16 hit area — too small to hit reliably on a phone.
     Padding brings it to the 44px minimum without changing how it looks. */
  min-width: 44px; min-height: 44px; padding: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; color: rgba(255, 255, 255, 0.55);
}
.onboard-skip:hover { color: rgba(255, 255, 255, 0.85); }
.onboard-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 30px; }
.ob-logo {
  /* 34px'ti: 30px önizlemede işaretin lekeye dönüştüğü ölçüldü, 65px'te
     net okunuyor. Onboarding marka satırında yer var, 56px'e çıkarıldı. */
  display: inline-block; width: 56px; height: 56px;
  background-color: #fff;
  -webkit-mask: url("logo-mark.png") center/contain no-repeat;
  mask: url("logo-mark.png") center/contain no-repeat;
}
.ob-word {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.02em;
}
.ob-tag { font-size: 12px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; }
.onboard-icon {
  width: 96px; height: 96px; margin: 0 auto 22px;
  display: grid; place-items: center;
  font-size: 46px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.onboard-card h2 {
  font-family: var(--display); font-weight: 700; font-size: 27px;
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.onboard-card p {
  font-size: 15px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.72); margin-bottom: 24px;
}
.onboard-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 24px; }
.onboard-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.onboard-dots span.on { background: #fff; width: 22px; border-radius: 4px; }
.onboard-cta { width: 100%; font-size: 15px; padding: 15px; }

/* ── Onboarding soru adımları ────────────────────────────────
   Tanıtım slaytları yerine sorular geldiği için adımlar artık sola hizalı:
   ortalanmış metin bir manifesto için doğru, doldurulacak bir form için
   değil — göz her satırda yeni bir başlangıç noktası aramak zorunda kalıyor. */
.ob-step { max-width: 380px; text-align: left; }
.ob-step h2 { font-size: 25px; }
.ob-step > p { margin-bottom: 20px; font-size: 15px; }
.ob-step .onboard-cta { margin-top: 20px; }

.ob-search {
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px; margin-bottom: 10px;
}
.ob-search-ico { padding: 0 4px 0 14px; font-size: 16px; color: rgba(255, 255, 255, .6); }
.ob-search-input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  padding: 14px 14px 14px 8px; color: #fff;
  font-family: var(--body); font-size: 15px;
}
.ob-search-input::placeholder { color: rgba(255, 255, 255, .45); }

.ob-sugg {
  background: rgba(255, 255, 255, .1); border-radius: 14px;
  overflow: hidden; margin-bottom: 12px;
}
.ob-sugg-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: start;
  padding: 12px 14px; color: #fff; font-family: var(--body); font-size: 14px;
}
.ob-sugg-row:hover { background: rgba(255, 255, 255, .1); }
.ob-sugg-row b { display: block; font-weight: 600; }
.ob-sugg-row i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .55); }

.ob-city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-city {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; padding: 13px 14px;
  cursor: pointer; text-align: start; color: #fff; font-family: var(--body);
}
.ob-city:hover { background: rgba(255, 255, 255, .16); }
.ob-city b { font-family: var(--display); font-weight: 700; font-size: 15px; }
.ob-city span { font-size: 12px; color: rgba(255, 255, 255, .55); }

.ob-styles { display: flex; flex-direction: column; gap: 8px; }
.ob-style {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px; padding: 15px 16px;
  cursor: pointer; text-align: start; color: #fff; font-family: var(--body);
  transition: background .12s, border-color .12s;
}
.ob-style:hover { background: rgba(255, 255, 255, .17); border-color: var(--acc); }
.obs-ico { font-size: 24px; flex: none; }
.obs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obs-txt b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.obs-txt span { font-size: 13px; color: rgba(255, 255, 255, .62); line-height: 1.35; }

/* Plan hazırlanırken: belirsiz süreli bir işlem, o yüzden yüzde değil
   sürekli akan bir şerit. Sahte bir yüzde göstermek yalan olurdu. */
.ob-planbar {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .14); margin-top: 22px;
}
.ob-planbar span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--acc); animation: ob-slide 1.1s ease-in-out infinite;
}
@keyframes ob-slide {
  0% { transform: translateX(-100%); } 100% { transform: translateX(350%); }
}

.ob-plan-badge {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--acc-ink);
  background: var(--acc); border-radius: 999px; padding: 4px 10px;
}
.ob-plan {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 42vh; overflow-y: auto;
}
.obp-daylabel {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.obp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0;
}
.obp-thumb {
  flex: none; width: 40px; height: 40px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 16px;
  background: var(--thumb-bg, rgba(255, 255, 255, .12));
}
.obp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.obp-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.obp-name {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zaman dilimi etiketi: planın gün içinde NASIL aktığını gösteriyor —
   sabah/öğle/akşam. Salt isim listesi gerçekçi bir plan gibi okunmuyordu. */
.obp-slot {
  font-size: 11px; color: rgba(255, 255, 255, .55);
}
@media (prefers-reduced-motion: reduce) {
  .ob-planbar span { animation: none; width: 100%; }
}

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Kendi odak göstergesi olan alanlar genel çerçeveyi devre dışı bırakır.
   Arama kutusunda ikisi üst üste biniyordu: sarmalayıcının yuvarlak yeşil
   halkası ve onun üstünde bu kuralın çizdiği KÖŞELİ mavi dikdörtgen —
   hap biçimli alanın etrafında kutu duruyor, eski görünüyordu.
   Erişilebilirlik kaybı yok: :focus-within klavye odağında da tetikleniyor,
   yani halka hâlâ görünüyor, yalnızca tek ve doğru biçimde. */
.search-input:focus-visible,
.auth-input:focus-visible,
.guide-input:focus-visible,
.ob-search-input:focus-visible { outline: none; }
/* Onboarding aramasının odak göstergesi: kutunun kendi kenarlığı parlar.
   Tablet ekranında görülen köşeli mavi dikdörtgenin kaynağı, genel
   focus-visible kuralının bu hap biçimli kutuya da uygulanmasıydı. */
.ob-search:focus-within { border-color: rgba(255, 255, 255, .6); }
/* Android WebView'ın dokunmada bastığı yarı saydam vurgu katmanı —
   native pakette her dokunuş gri bir flaş çiziyordu. */
* { -webkit-tap-highlight-color: transparent; }

/* ── Profile page (clean, organized) ─────────────────────── */
.app[data-view="profile"] .cat-bar { display: none; }
.view-profile { padding-top: 6px; }

.pf-title {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em; margin: 4px 2px 14px;
}

/* GO PREMIUM prominent button */
.pf-go-premium {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; margin: 14px 0 4px; padding: 15px;
  border: 0; cursor: pointer; border-radius: 18px;
  background: linear-gradient(135deg, #7fd29b, var(--acc) 60%, #4fae72);
  color: var(--acc-ink);
  box-shadow: var(--clay), 0 10px 24px rgba(61, 143, 95, 0.28);
}
.pf-go-premium span { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.pf-go-premium small { font-size: 11px; opacity: .8; }
.pf-prem-on {
  text-align: center; margin: 14px 0 4px; padding: 12px;
  border-radius: 16px; background: var(--acc-soft); color: var(--acc-deep);
  font-family: var(--display); font-weight: 700; font-size: 14px;
}

.pf-group-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  margin: 22px 2px 8px;
}

/* Grouped settings card with coloured icon rows */
.pf-card2 {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--clay);
}
.pf-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 15px; color: var(--ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.pf-item:last-child { border-bottom: 0; }
.pf-item:not(.pf-item-static):hover { background: rgba(94, 187, 126, 0.05); }
.pf-item-static { cursor: default; }
.pf-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; color: #fff;
}
.pf-item-label { flex: 1; }
.pf-item-val { font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.pf-item .pf-chev { color: #8b93a8; font-size: 18px; }   /* 1.7:1 idi, simge eşiği 3:1 */
.pf-item .pf-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acc-soft); color: var(--acc-deep);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* "Tehlike bölgesi" kartı kaldırıldı: Hesabı sil artık Hesap ayarları
   grubunda sıradan bir satır, yalnızca etiketi kırmızı. Ayrı kırmızı kart,
   sayfanın dibinde kendi başına bağıran bir bölümdü — motto gereği gitti. */
.pf-item-danger .pf-item-label { color: #b3402c; font-weight: 600; }

/* ── SSS (katlanır soru-cevap) ─────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 11px 13px;
  font-weight: 600; font-size: 13px; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; inset-inline-end: 13px; top: 9px;
  font-size: 16px; color: var(--ink-soft);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
  margin: 0; padding: 0 13px 12px; font-size: 13px;
  color: var(--ink-soft); line-height: 1.5;
}

/* ── Right-to-left (Arabic, Persian) ─────────────────────── */
/* Only the handful of places where direction actually matters — most of the
   layout is flex/grid and mirrors itself once dir="rtl" is set. */
[dir="rtl"] [dir="rtl"] .search-input { padding: 14px 0 14px 16px; }
[dir="rtl"] .pf-chev, [dir="rtl"] [dir="rtl"] .onboard-skip { right: auto; left: -12px; }
[dir="rtl"] [dir="rtl"] .plan-time { text-align: center; }
[dir="rtl"] .mem-name { text-align: right; }
[dir="rtl"] .toast { direction: rtl; }

/* Language picker modal */
.langpick {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  max-height: 58vh; overflow-y: auto;   /* 21 languages need to scroll */
  -webkit-overflow-scrolling: touch;
}
.langpick-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card);
  font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink);
}
.langpick-row.on { border-color: var(--acc); background: var(--acc-soft); }
.langpick-flag { font-size: 20px; }
.langpick-check { margin-left: auto; color: var(--acc-deep); font-weight: 700; }

.pf-hero {
  background: linear-gradient(160deg, #8fd8a8, var(--acc) 70%, #4fae72);
  border-radius: 26px; padding: 18px;
  color: var(--acc-ink);
  box-shadow: var(--clay), 0 14px 32px rgba(61, 143, 95, 0.22);
  margin-bottom: 10px;
}
.pf-hero-prem { background: linear-gradient(160deg, #cbe9d6, #a7dcc0 55%, #8fd8a8); }
.pf-hero-top { display: flex; align-items: center; gap: 14px; }

/* Quick actions (tonight + AI route) */

/* Tonight list */

/* AI route output */
.route-badge {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--acc-soft); color: var(--acc-deep);
  border-radius: 6px; padding: 3px 8px; margin-bottom: 8px;
}
.route-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
.route-err { color: var(--c-eat); font-size: 13px; margin-top: 12px; }
.route-out { margin-top: 16px; }
.route-title { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.route-summary { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 14px; }
.route-day { margin-bottom: 14px; }
.route-day-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 14px; margin-bottom: 8px;
}
.route-day-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  display: grid; place-items: center; font-size: 12px;
}
.route-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 10px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--line); background: var(--card); margin-bottom: 6px;
}
.route-item:hover { border-color: var(--acc); }
.route-time { flex: none; font-family: var(--mono); font-size: 12px; color: var(--acc-deep); font-weight: 500; padding-top: 1px; }
.route-item-body { display: flex; flex-direction: column; }
.route-item-body b { font-family: var(--display); font-size: 14px; color: var(--ink); }
.route-item-body span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* Highlights carousel */
.pf-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ffffff;
  color: var(--acc-deep);
  font-family: var(--display); font-weight: 700; font-size: 24px;
  box-shadow: 0 4px 12px rgba(20, 70, 50, 0.18);
}
.pf-id { flex: 1; min-width: 0; }
.pf-id h2 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; line-height: 1.2;
}
.pf-id p { font-size: 12px; opacity: .85; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.pf-cta {
  flex: none; border: 0; cursor: pointer;
  background: #fff; color: var(--acc-deep);
  font-family: var(--body); font-weight: 700; font-size: 13px;
  border-radius: 11px; padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(50, 40, 130, 0.2);
}
.pf-cta-ghost { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.pf-signin {
  display: block; width: 100%; margin: 0 0 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--acc-deeper, #256b45);   /* 3.9:1 idi */
}

.pf-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin: 14px 0 18px;
}
/* Sayaçlar artık <button>: dokunulabilir olduğu görünsün diye imleç ve
   basılma geri bildirimi var. font: inherit şart — tarayıcı düğmelere kendi
   sistem fontunu uyguluyor ve bu kutucukları çevresinden koparıyordu. */
.pf-stat {
  background: var(--card); border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px; padding: 14px 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(47,62,70,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .12s, box-shadow .18s;
}
.pf-stat:active { transform: scale(0.97); }
.pf-stat:hover { box-shadow: 0 4px 16px rgba(47,62,70,.12); }
.pf-stat b {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em;
}
.pf-stat span { font-size: 11px; color: var(--ink-soft); }

.pf-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(47,62,70,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pf-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 14px; color: var(--ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.pf-row:last-child { border-bottom: 0; }
.pf-row:hover { background: rgba(61, 143, 95, 0.05); }
.pf-row-icon { flex: none; width: 22px; text-align: center; }
.pf-row span:nth-child(2) { flex: 1; }
.pf-chev { color: #8b93a8; font-size: 18px; }
.pf-row-accent span:nth-child(2) { color: var(--acc-deep); font-weight: 700; }

/* Live "right now" tiles (weather / currency / emergency) */
.pf-live { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pf-live-tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 8px; text-align: center;
  box-shadow: var(--clay);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  /* Acil numara kutusu artık <a href="tel:">; bağlantı stilini devral. */
  text-decoration: none; color: inherit;
}
a.pf-live-tile:active { transform: scale(0.97); }
.pf-live-tile .pfl-ico { font-size: 20px; }
/* Fixed line box so values arriving async never resize the tile (no reflow). */
.pf-live-tile b {
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  min-height: 21px; line-height: 21px; white-space: nowrap;
}
.pf-live-tile span:last-child { font-size: 11px; color: var(--ink-soft); }

/* Trust card */
.pf-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acc-soft); color: var(--acc-deep);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* Feedback */
.fb-rate { display: flex; gap: 6px; justify-content: center; margin: 14px 0 6px; }
.fb-star {
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: #d9b73a;
}
.fb-star.on { transform: scale(1.05); }
.fb-text { resize: vertical; min-height: 90px; font-family: var(--body); }
.fb-done { text-align: center; }
.fb-done-ico { font-size: 44px; margin-bottom: 8px; }
.fb-done h3 { margin-bottom: 16px; }

/* ── Account & auth ──────────────────────────────────────── */
.account-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius); padding: 14px;
  box-shadow: 0 2px 10px rgba(47,62,70,.07);
  margin-bottom: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.account-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px;
}
.account-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.account-meta b { font-family: var(--display); font-size: 15px; }
.account-meta span { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.btn-sm { flex: none; width: auto; padding: 9px 14px; font-size: 13px; border-radius: 11px; }

.auth-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.auth-input {
  font-family: var(--body); font-size: 15px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; outline: none;
}
.auth-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(111,174,222,.22); }
.auth-error {
  font-size: 13px; color: var(--c-eat);
  background: var(--c-eat-soft); border-radius: 8px; padding: 8px 10px;
}
.auth-switch {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--acc-deep);
}
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; color: var(--ink-soft); font-size: 12px;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.auth-social { display: flex; flex-direction: column; gap: 8px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: 14px;
}
.social-btn:hover { border-color: var(--ink-soft); }
.social-ico { font-size: 16px; font-weight: 700; }
.social-btn .social-ico { color: #4285f4; }
.social-apple { background: #000; color: #fff; border-color: #000; }
.social-apple .social-ico { color: #fff; font-size: 16px; }
.social-apple:hover { background: #1a1a1a; border-color: #1a1a1a; }

.auth-forgot {
  display: block; width: 100%; margin-top: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 12px; color: var(--ink-soft);
}
.auth-forgot:hover { color: var(--acc-deep); }
.pw-sent { font-size: 13px; color: var(--acc-deep); margin-top: 12px; }
.pw-dev {
  margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  background: var(--c-shop-soft); font-size: 12px; line-height: 1.45; color: #6b5107;
}
.pw-dev-link {
  display: block; margin-top: 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--acc-deep);
}

/* AI consent + account deletion */
.ai-consent { margin: 10px 0 16px; }
.ai-consent p { font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.ai-consent .ai-fine { font-size: 12px; color: var(--ink-soft); }
.ai-decline {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.btn-danger {
  width: 100%; background: var(--c-eat); color: #fff; border-color: transparent;
  box-shadow: var(--clay);
}
.btn-danger:hover { filter: brightness(1.04); }

/* Onboarding on a short screen: the full-size card is ~470px, so on a 360px
   landscape phone the CTA fell below the fold and the user could not leave
   onboarding at all. Compacting it makes the card fit; .onboard's scroll is
   the safety net, not the plan. Placed here for the same cascade reason as
   the block below.

   Yukarıdaki iki bloğun aksine burada `orientation` şartı BİLEREK yok:
   onboarding ekranında klavye açılmıyor ve sayfa kaymıyor, yani viewport
   yüksekliğini oynatan bir şey olmadığı için mod değiştirme titremesi
   oluşmuyor. Kısa bir dikey ekranda kompakt kart gerçekten işe yarıyor. */
@media (max-height: 560px) {
  .onboard { padding: 16px 24px; }
  .onboard-icon { width: 52px; height: 52px; font-size: 24px; margin-bottom: 12px; }
  .onboard-card h2 { font-size: 21px; margin-bottom: 6px; }
  .onboard-card p { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
  .onboard-brand { margin-bottom: 14px; }
  .onboard-dots { margin-bottom: 14px; }
  .onboard-cta { padding: 12px; font-size: 14px; }
  .onboard-skip { top: -10px; right: -8px; font-size: 12px; }
}

/* Cover screens / very narrow phones — the Galaxy Fold outer display is 280
   CSS px. Tighter gutters keep all five nav targets at the 44px minimum;
   measured 39-43px before this. Must stay near the end of the file: the base
   .bottom-nav / .nav-btn rules come later than the other media blocks and
   would otherwise win the cascade at equal specificity. */
@media (max-width: 319px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .bottom-nav { margin-left: 6px; margin-right: 6px; padding: 0; }
  .nav-btn { margin: 4px 1px; padding: 8px 1px 7px; font-size: 11px; }
  .nav-btn .nav-icon { font-size: 16px; }
  .wordmark { font-size: 18px; }
  .city-btn { padding: 8px 10px; font-size: 13px; }
}

/* The avatar is a fixed 44px target — never let flex shrink it (it was being
   squeezed to 42px next to a long city name). */
.avatar-btn { flex: none; }

/* The hidden attribute must always win, even over rules that set display
   (e.g. .onboard { display: grid }, .guide-panel { display: flex }). Without
   this, "hidden" overlays keep covering the app. */
[hidden] { display: none !important; }

/* Soğuk şehir yüklenirken gösterilen iskelet. Boş ekran "bulunamadı" gibi
   okunuyordu; hareketli üç kart bir şeyin geldiğini anlatıyor. */
.feed-skeleton { padding: 4px 0 8px; }
.sk-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 12px; margin-bottom: 10px;
}
.sk-thumb, .sk-lines span {
  background: linear-gradient(90deg, rgba(47,62,70,.06) 25%, rgba(47,62,70,.12) 37%, rgba(47,62,70,.06) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
.sk-thumb { flex: none; width: 76px; height: 76px; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-lines span { height: 12px; }
.sk-lines span:last-child { width: 60%; }
.sk-note {
  text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 10px;
}
@keyframes sk-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) {
  .sk-thumb, .sk-lines span { animation: none; }
}

/* ── Onboarding: dil seçimi ve hesap adımı ──────────────────────────── */
/* Dil ekranı listeyi kaydırılabilir tutuyor: 21 dil kısa bir telefonda
   ekrana sığmıyor ve sığdırmaya çalışmak satırları dokunulamayacak kadar
   inceltirdi. */
.onboard-lang { max-width: 400px; }
.onboard-lang h2 { margin-bottom: 4px; }
.onboard-lang p { margin-bottom: 16px; font-size: 13px; }
.oblang-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px; text-align: left;
}
.oblang-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 10px 12px;
  border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff; font-family: var(--body); font-size: 14px; font-weight: 600;
  text-align: left;
}
.oblang-row:hover { background: rgba(255, 255, 255, 0.16); }
.oblang-row.secili { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.oblang-flag { font-size: 18px; flex: none; }
/* Tek sütun: iki sütun 320px'te dil adlarını kırpıyordu. */
@media (max-width: 360px) { .oblang-grid { grid-template-columns: 1fr; } }

.onboard-later {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  min-height: 44px;   /* mağaza dokunma hedefi */
}
.onboard-later:hover { color: #fff; }

/* ── Akışkan ölçek: telefonda otomatik yoğunluk ─────────────────────
   Bileşen boyutları sabit pikseldi ve 540px'lik tasarım genişliğine göre
   seçilmişti; 390-440px'lik telefonlarda (iPhone dahil) her şey oranla
   büyüyor, kapak kartı ekranın üçte birini yiyordu (TestFlight'ta
   ölçüldü). clamp(alt, vw, üst): dar ekran kendini sıkıştırır, 560px ve
   üzeri eski tasarım değerlerinde kalır — cihaz başına elle ayar yok. */
@media (max-width: 560px) {
  .poi-hero { min-height: clamp(180px, 56vw, 300px); }
  .hero-name { font-size: clamp(18px, 5vw, 24px); }
  .hero-sub { font-size: clamp(12px, 3.2vw, 14px); }
  .hero-meta { font-size: clamp(11px, 2.9vw, 12px); }
  .hero-body { padding: 0 clamp(11px, 3.2vw, 16px) clamp(11px, 3.2vw, 16px); }
  .row-card { width: clamp(132px, 38vw, 180px); }
  .rc-img { width: clamp(132px, 38vw, 180px); height: clamp(132px, 38vw, 180px); }
  .rc-name { font-size: clamp(12px, 3.4vw, 15px); }
  .search-input { font-size: clamp(13px, 3.7vw, 15px); padding-top: clamp(11px, 2.9vw, 14px); padding-bottom: clamp(11px, 2.9vw, 14px); }
  .cat-chip { font-size: clamp(11px, 3.2vw, 13px); padding: clamp(5px, 1.6vw, 8px) clamp(9px, 2.8vw, 14px); }
  .poi-thumb { width: clamp(72px, 22vw, 96px); height: clamp(72px, 22vw, 96px); font-size: clamp(22px, 6vw, 28px); }
  .poi-name { font-size: clamp(14px, 3.9vw, 16px); }
  .nav-btn { font-size: clamp(10px, 2.9vw, 11px); }
  .nav-btn .nav-icon { font-size: clamp(14px, 4vw, 16px); }
  /* Alt nav dibe yaslansın: eski hesap güvenli alan payının ÜSTÜNE bir de
     10px ekliyordu — iPhone'da çubuk dipten 44px yukarıda süzülüyordu.
     max(): göstergeli cihazda göstergeye oturur, göstergesizde 8px pay. */
  .bottom-nav { margin-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ── Stitch uyarlaması 2. dalga ──────────────────────────────────────
   Referans setin ortak imzası: koyu yeşil YALNIZCA tepe/marka bloğunda,
   gövde her ekranda beyaz kartlı. Onboarding komple koyuydu, profil
   kartı yeşil degradeydi — setin dışında kalıyorlardı. Bu blok kasıtlı
   olarak dosya sonunda: kaynak kuralları ezmesi kolay izlensin. */

/* Onboarding: beyaz gövde + koyu yeşil marka şeridi */
.onboard {
  background: var(--paper);
  padding-top: calc(16px + env(safe-area-inset-top));
}
.onboard-glow { display: none; }
.onboard-card { color: var(--ink); }
.onboard-brand {
  background: linear-gradient(160deg, #0b3d24, #116c40);
  color: #fff; border-radius: 20px;
  padding: 22px 16px 20px; width: 100%;
  margin-bottom: 20px;
}
.onboard-card h2 { color: var(--ink); }
.onboard-card p { color: var(--ink-soft); }
.onboard-skip { color: var(--ink-soft); }
.oblang-row {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
.oblang-row:active { background: var(--acc-soft); }
.onboard-dots span { background: rgba(47, 62, 70, 0.16); }
.onboard-dots span.on { background: var(--acc-deep); }

/* Profil: hesap kartı beyaz, eylem yeşil */
.pf-hero {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(47, 62, 70, 0.05);
}
.pf-cta {
  background: var(--acc); color: var(--acc-ink);
  box-shadow: 0 4px 12px rgba(94, 187, 126, 0.35);
}

/* AI rehber: kullanıcı baloncuğu siyah değil yeşil tonlu */
.guide-msg.you { background: var(--acc-soft); color: var(--ink); }

/* Gezi planı: satırlar kart dilinde, gün seçimleri hap */
.plan-row {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px;
}
.day-choice {
  border-radius: 999px;
}
.day-choice.sug { background: var(--acc); color: var(--acc-ink); border-color: transparent; }

/* Mekân detayı: alan satırı saha-notu, yol tarifi yeşil hap */
.sheet-area {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sheet-nav-out {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--acc-soft); color: var(--acc-deeper);
  font-weight: 700; font-size: 14px;
  border-radius: 999px; padding: 12px;
  text-decoration: none; margin-top: 8px;
}

/* ── 2. dalga düzeltme: onboarding 2-3-4. adımların cam-koyu kontrolleri
   açık zemine taşındı. İlk geçişte yalnız dil adımı test edilmişti; şehir
   /tarz/plan adımları beyaz yazıyla beyaz zemine düşüp "beyaz ekran"
   görünümü yaratıyordu (cihazda rapor edildi, yerelde doğrulandı). */
.ob-search { background: var(--card); border: 1px solid var(--line); }
.ob-search:focus-within { border-color: var(--acc); }
.ob-search-ico { color: var(--ink-soft); }
.ob-search-input { color: var(--ink); }
.ob-search-input::placeholder { color: #9aa6a0; }
.ob-sugg { background: var(--card); border: 1px solid var(--line); }
.ob-sugg-row { color: var(--ink); }
.ob-sugg-row:hover { background: var(--acc-soft); }
.ob-sugg-row i { color: var(--ink-soft); }
.ob-city { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.ob-city:hover { background: var(--acc-soft); }
.ob-city span { color: var(--ink-soft); }
.ob-style { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.ob-style:hover { background: var(--acc-soft); border-color: var(--acc); }
.obs-txt span { color: var(--ink-soft); }
.ob-planbar { background: #e4e9e6; }
.obp-daylabel { color: var(--ink-soft); }
.obp-slot { color: var(--ink-soft); }
.obp-thumb { background: var(--thumb-bg, #eef1ef); }
.ob-plan-badge { background: var(--acc-soft); color: var(--acc-deeper); }


/* ── Stitch 3. dalga: AI rehber, gezi, yükleniyor durumları, animasyon ── */

/* AI rehber: beyaz kart başlık, tonlu çipler, hap giriş + yeşil yuvarlak gönder */
.guide-head { border-bottom: 1px solid var(--line); }
.guide-head-txt h3 { color: var(--ink); }
.guide-head-txt span { color: var(--ink-soft); }
.guide-msg { background: var(--card); border: 1px solid var(--line); }
.guide-chip {
  background: var(--acc-soft); color: var(--acc-deeper); border: 0;
  border-radius: 999px; font-weight: 600;
}
.guide-form { border-top: 1px solid var(--line); background: var(--paper); }
.guide-input {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px;
}
.guide-input:focus { border-color: var(--acc); }
.guide-send {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--acc); color: var(--acc-ink);
  display: grid; place-items: center;
  transition: transform .12s;
}
.guide-send:active { transform: scale(0.92); }

/* Gezi: zaman çizelgesi numaraları yeşil rozet, gün rotası kart */
.plan-day-badge {
  background: var(--acc-deeper); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.day-route { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.tt-btn {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tt-ico { display: inline-flex; color: var(--acc-deeper); }
.trip-bar-fill { background: var(--acc-deeper); }

/* Yükleniyor: dönen halka — geç gelen her içeriğin başına */
.spin {
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--acc-soft); border-top-color: var(--acc-deep);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block; vertical-align: -3px; margin-inline-end: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.live-loading::before, .sk-note::before {
  content: ""; width: 14px; height: 14px;
  border: 2px solid var(--acc-soft); border-top-color: var(--acc-deep);
  border-radius: 50%; display: inline-block;
  animation: spin .7s linear infinite;
  vertical-align: -2px; margin-inline-end: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .spin, .live-loading::before, .sk-note::before { animation: none; }
}

/* Uygulama içi animasyonlar (yalnız CSS):
   1) Görünüm geçişi: sekme değişince içerik 220ms yumuşak yükselir
      (display none->block animasyonu yeniden başlatır, ekstra JS yok). */
.view { animation: gorunum-gir .22s ease-out; }
@keyframes gorunum-gir {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* 2) Kalp pop: kaydetme anı hissedilir */
.save-btn { transition: transform .15s; }
.save-btn.saved { animation: kalp-pop .3s cubic-bezier(.34,1.56,.64,1); }
/* Dinlenme hâlinden KÜÇÜK başlamıyor. Eski hâli scale(.7) ile açılıyordu
   ve bu, dokunma hedefini 44px'ten 31px'e indiriyordu: animasyon duraklar,
   yavaş cihazda uzarsa ya da tarayıcı hareketi azaltırsa düğme o küçük
   hâlde kalıyordu — canlıda tam olarak böyle ölçüldü. Vurgu artık yukarı
   doğru: kutu hiçbir an 44px'in altına düşmüyor. */
@keyframes kalp-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); }
}
/* 3) Sheet: alttan yumuşak geliş (mevcutsa da netleştir) */
.sheet { animation: sheet-gir .26s cubic-bezier(.2,.9,.3,1); }
@keyframes sheet-gir {
  from { transform: translateY(28px); opacity: .6; }
  to   { transform: none; opacity: 1; }
}
/* 4) Foto yumuşak beliriş: lazy yüklenen görsel aniden patlamasın */
.rc-img img, .poi-thumb img, .hero-img img { animation: foto-gir .3s ease-out; }
@keyframes foto-gir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .view, .save-btn.saved, .sheet, .rc-img img, .poi-thumb img, .hero-img img { animation: none; }
}


/* ── 4. dalga: 10 puan döngüsü ─────────────────────────────────────── */

/* Onboarding şehir kartları fotoğraflı (referans: fotolu kart ızgarası).
   Foto üstüne koyu perde — burada beyaz yazı DOĞRU (fotonun üstünde). */
.ob-city-photo {
  position: relative; overflow: hidden; min-height: 92px;
  justify-content: flex-end;
  border: 0;
}
.ob-city-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.ob-city-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 25, 20, .72), rgba(15, 25, 20, .06) 60%);
}
.ob-city-photo b, .ob-city-photo span { position: relative; z-index: 2; color: #fff; }
.ob-city-photo span { color: rgba(255, 255, 255, .8); }
/* Foto düştü (app.js görsel hata yakalayıcısı): düz kart ama AYNI yükseklik —
   ızgara zıplamasın, dokunuş hedefi kaymasın (Aşama 2.8). */
.ob-city-nofoto { min-height: 92px; justify-content: flex-end; }

/* Bayrak devri: perde sahnedeyken kartın marka satırı gizli — solma
   penceresinde iki logo + iki VESPIRA üst üste görünüyordu (ölçüldü).
   SAF CSS zamanlama: 'backwards' dolgu markayı gecikme boyunca gizler,
   1.75sn'de (perde 1.6-2.15sn arasında çekilirken) kendini gösterir.
   Sınıf kaldırmaya bağımlılık YOK — JS aksasa bile marka takılı kalamaz. */
/* v2 — ölçüldü: sınıf 1600ms'te kalkınca animasyon gecikmesi (1750ms)
   dolmadan iptal oluyor ve marka PAT diye beliriyordu; kısa ekranlarda
   (667py) perdenin ortadaki markası kartın BAŞLIĞININ üstüne de düşüyordu.
   Yeni koreografi: perde çekilene kadar KARTIN TAMAMI görünmez; perde
   ~%80 solunca kart tek parça yumuşakça gelir. Üst üste binecek iki öğe
   aynı anda hiç var olmaz — ekran boyundan bağımsız.
   :has() güvence: JS aksar da sınıf takılı kalırsa, perde DOM'dan
   düştüğü an kart yine görünür (desteklemeyen tarayıcıda kural hiç
   uygulanmaz — kart perdenin altında hazır bekler, eski davranış). */
.onboard-card { transition: opacity .38s ease, transform .38s ease; }
/* :has() KULLANILMIYOR — Safari 15.4 öncesinde desteklenmiyor ve orada
   kural hiç uygulanmayıp çift marka geri geliyordu. Düz sınıf her yerde
   çalışır. Güvence saf CSS: JS sınıfı kaldıramasa bile (2050ms) kart
   2,5sn'de kendiliğinden gelir — kullanıcı asla boş kart görmez.
   NOT: bu kural .onboard-card'ın obSahne animasyonunu bilinçli ezer;
   sınıf kalkınca obSahne normal girişi yapar. */
.perde-acik .onboard-card {
  opacity: 0;
  animation: kartGuvence .4s cubic-bezier(.22, .9, .36, 1) 2.5s forwards;
}
@keyframes kartGuvence {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Şehir görselleri atıfı (CC BY/BY-SA şartı) — sessiz katlanır satır */
.ob-atif { margin-top: 8px; }
.ob-atif summary { font-size: 11px; color: var(--ink-soft); cursor: pointer; list-style: none; opacity: .7; }
.ob-atif p { font-size: 11px; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 0; }

/* Gezi: gün çipleri navigasyonu */
.trip-days-nav {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 2px 0 12px; padding: 2px;
}
.trip-days-nav::-webkit-scrollbar { display: none; }
.td-chip {
  flex: none; border: 0; cursor: pointer;
  background: var(--acc-soft); color: var(--acc-deeper);
  font-family: var(--body); font-weight: 700; font-size: 13px;
  border-radius: 999px; padding: 9px 16px;
}
.td-chip:active { transform: scale(.95); }
.trip-strip { margin-bottom: 14px; }

/* Profil sayaç ikonu */
.pfs-i { width: 13px; height: 13px; vertical-align: -2px; margin-inline-end: 4px; }

/* Erişilebilirlik: klavye odağı her etkileşimli öğede görünür.
   :focus-visible yalnız klavyede çizer — dokunmatikte halka çıkmaz. */
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, .cat-chip:focus-visible, .nav-btn:focus-visible,
.td-chip:focus-visible, .oblang-row:focus-visible, .ob-city:focus-visible {
  outline-offset: 1px; border-radius: 999px;
}


/* ── 5. dalga: koyu onboarding harmanı + animasyon seti + çizelge ────
   Makale (Jamal & Hashmat 2025) dayanakları: mikro-etkileşim algılanan
   hızı belirgin artırır; animasyon güç-dostu ve kısa olmalı; yüksek
   kontrast esas. Onboarding: kullanıcı geri bildirimi "beyaz telefonda
   sırıtıyor" — koyu yeşil atmosfer geri geldi, okunurluk savaşını
   kazanan BEYAZ KARTLAR korundu (harman: koyu sahne + beyaz kart). */
.onboard {
  background: linear-gradient(168deg, #0d2c1c 0%, #14402a 55%, #1c5638 100%);
}
.onboard-card { color: #fff; }
.onboard-card h2 { color: #fff; }
.onboard-card p { color: rgba(255, 255, 255, .72); }
.onboard-skip { color: rgba(255, 255, 255, .65); }
.onboard-brand { background: none; padding: 0 0 4px; margin-bottom: 16px; }
.onboard-dots span { background: rgba(255, 255, 255, .28); }
.onboard-dots span.on { background: var(--acc); }
.ob-planbar { background: rgba(255, 255, 255, .16); }
.obp-daylabel, .obp-slot { color: rgba(255, 255, 255, .6); }
.ob-plan-badge { background: rgba(255, 255, 255, .12); color: #d9efe2; }
/* kartlar beyaz kalır — koyu zeminde zaten patlar; yalnız kenar yumuşar */
.oblang-row, .ob-city, .ob-style, .ob-search, .ob-sugg { border-color: rgba(255,255,255,.14); }

/* Gezi: zaman çizelgesi hissi — rozetleri bağlayan dikey hat */
.plan-day { position: relative; }
.plan-day::before {
  content: ""; position: absolute; top: 30px; bottom: 14px;
  inset-inline-start: 11px; width: 2px;
  background: var(--acc-soft);
}
.plan-day-head, .plan-row, .day-route { position: relative; }
.plan-row { margin-inline-start: 30px; margin-bottom: 8px; padding: 10px 12px; }
.day-route { margin-inline-start: 30px; }

/* Mekân detayı: yorumlar kart dilinde */
.live-review {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
}
.live-photos img { border-radius: 12px; }

/* Animasyon seti (salt CSS, reduced-motion saygılı):
   1) Satır kartları kademeli girer — 40ms aralıklı, en fazla 8 kademe */
.cr-strip .row-card {
  animation: kart-gir .32s ease-out both;
  animation-delay: calc(var(--sira, 0) * 40ms);
}
@keyframes kart-gir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* 2) AI orb nefes alır — dikkat çekmeden canlı */
.nav-ai-orb { animation: orb-nefes 3.2s ease-in-out infinite; }
@keyframes orb-nefes {
  0%, 100% { box-shadow: 0 6px 18px rgba(94, 187, 126, .35); }
  50%      { box-shadow: 0 6px 26px rgba(94, 187, 126, .6); }
}
/* 3) İskelet parıltısı: yükleniyor hissi statik gri yerine akar */
.sk-thumb, .sk-lines span {
  position: relative; overflow: hidden;
}
.sk-thumb::after, .sk-lines span::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: parla 1.3s ease-in-out infinite;
}
@keyframes parla { to { transform: translateX(100%); } }
/* 4) Perdeler yumuşak kararır */
.sheet-scrim, .scrim { animation: perde .2s ease-out; }
@keyframes perde { from { opacity: 0; } to { opacity: 1; } }
/* 5) Çip aktifleşince yumuşak büyür */
.cat-chip.active { animation: cip-sec .18s ease-out; }
/* Aynı gerekçe: çip seçilirken 0.94'ten büyüyordu ve 44px'lik hedef
   41px'e iniyordu. Artık hafifçe büyüyüp yerine oturuyor. */
@keyframes cip-sec { from { transform: scale(1.05); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cr-strip .row-card, .nav-ai-orb, .sk-thumb::after, .sk-lines span::after,
  .sheet-scrim, .scrim, .cat-chip.active { animation: none; }
}


/* ── Ölçeklenen okuma metni (makale: erişilebilirlik / ayarlanabilir yazı) ──
   Uzun okuma metinleri rem tabanına alındı: tarayıcının/sistemin yazı
   boyutu tercihi bunları büyütür; kabuk (başlık, nav, çipler) piksel
   kalır ki düzen kırılmasın. Tam Dynamic Type (iOS) ayrı iş — yol
   haritasında. 1rem = kullanıcının taban tercihi (varsayılan 16px). */
html { font-size: 100%; }
.hero-sub    { font-size: clamp(0.78rem, 3.2vw, 0.875rem); }
.poi-blurb   { font-size: 13px; }
.rc-sub      { font-size: 12px; }
.sheet-blurb { font-size: 14px; }
.guide-msg   { font-size: 13px; }
.empty-state p { font-size: 13px; }
.sheet-tip   { font-size: 13px; }
.hero-name   { font-size: clamp(1.05rem, 5vw, 1.5rem); }

/* Sohbet içi plan kartı: baloncuk genişler, rota kartı içine oturur */
.guide-msg.guide-plan { max-width: 100%; width: 100%; padding: 8px; }
.guide-msg.guide-plan .route-out { margin: 0; }


/* ── KOYU TEMA ───────────────────────────────────────────────────────
   Token çevirisi + token dışı kalan yüzeylerin hedefli düzeltmeleri.
   Onboarding ve açılış perdesi zaten koyu — dokunulmadı. Renkli kutu
   ikonları (profil satırları, kategori kutuları) bilerek renkli kaldı:
   koyu zeminde canlı aksan görevi görüyorlar. */
/* Karanlık temada YÜZEY AYRIMI.
   Kontrast CI yeşildi çünkü YAZI okunuyordu — ama şikâyet okunabilirlik
   değil, kartların zeminden ayrışmamasıydı. Ölçüldü: sayfa #0e1412,
   kart #1d2521; aradaki oran ~1,2:1, yani kart bir yüzey gibi değil
   düz bir leke gibi duruyordu. Giriş ve dil seçim ekranı baştan sona
   kartlardan oluştuğu için en kötü orada görünüyordu.
   Kart bir adım açıldı, çizgi belirginleşti; yazı renkleri AYNI kaldı,
   yani kontrast kazanımı korunuyor. */
:root[data-tema="koyu"] {
  --ink: #e6ebe8;
  --ink-soft: #9db0a8;
  --paper: #171f1c;
  --card: #2a352f;      /* sayfa zeminiyle oran 1,46 — kart artık yüzey */
  --line: #435049;      /* çizgi kart üstünde görünür olmalı, yoksa kart sınırsız kalıyor */
  --acc-soft: #1d3328;
  --acc-deep: #6fcb94;
  --acc-deeper: #7bd6a0;
  --focus: #7fb8e8;
}
:root[data-tema="koyu"] body { background: #0e1412; }
:root[data-tema="koyu"] .topbar,
:root[data-tema="koyu"] .backdrop { background: #141a17; }
:root[data-tema="koyu"] .search-field { background: #1d2521; border-color: var(--line); }
:root[data-tema="koyu"] .bottom-nav {
  background: rgba(24, 31, 27, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
:root[data-tema="koyu"] .hero-rate { background: rgba(24, 31, 27, 0.9); color: var(--ink); }
:root[data-tema="koyu"] .poi-hero,
:root[data-tema="koyu"] .sheet,
:root[data-tema="koyu"] .modal,
:root[data-tema="koyu"] .city-menu,
:root[data-tema="koyu"] .suggest-box { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); }
:root[data-tema="koyu"] .cat-chip { background: #232c27; color: var(--ink-soft); }
:root[data-tema="koyu"] .cat-chip[data-cat="all"]  { background: var(--acc-soft); color: var(--acc-deeper); }
:root[data-tema="koyu"] .cat-chip[data-cat="see"]  { background: #1c2740; color: #93b2f2; }
:root[data-tema="koyu"] .cat-chip[data-cat="do"]   { background: #16362a; color: #6fd0a0; }
:root[data-tema="koyu"] .cat-chip[data-cat="eat"]  { background: #3c211c; color: #f2a08e; }
:root[data-tema="koyu"] .cat-chip[data-cat="shop"] { background: #362d15; color: #e2bd66; }
:root[data-tema="koyu"] .cat-chip[data-cat="night"]{ background: #291f45; color: #b3a0f0; }
:root[data-tema="koyu"] .cat-chip[data-cat="exp"]  { background: #3a2418; color: #eda079; }
:root[data-tema="koyu"] .cat-chip[data-cat="ess"]  { background: #14332f; color: #6fcac5; }
:root[data-tema="koyu"] .sk-card, :root[data-tema="koyu"] .sk-thumb,
:root[data-tema="koyu"] .sk-lines span { background: #222b26; }
:root[data-tema="koyu"] .sk-thumb::after,
:root[data-tema="koyu"] .sk-lines span::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}
:root[data-tema="koyu"] .trip-days-nav .td-chip { background: var(--acc-soft); color: var(--acc-deeper); }
:root[data-tema="koyu"] .guide-send { background: var(--acc); color: var(--acc-ink); }
:root[data-tema="koyu"] .pf-stat, :root[data-tema="koyu"] .pf-live > * { background: var(--card); }
:root[data-tema="koyu"] .wordmark { color: var(--acc-deeper); }
:root[data-tema="koyu"] .city-btn, :root[data-tema="koyu"] .avatar-btn {
  background: #1d2521; border-color: var(--line); color: var(--ink);
}
:root[data-tema="koyu"] .leaflet-container { background: #0e1412; }

/* Koyu temada aktif çip dolgusu: koyu çip kuralı (4 seçici) açık temanın
   aktif kuralını (3 seçici) eziyordu — aktifler dolgusuz kalıyordu. */
:root[data-tema="koyu"] .cat-chip.active { color: #fff !important; }
:root[data-tema="koyu"] .cat-chip[data-cat="all"].active  { background: var(--acc); color: var(--acc-ink) !important; }
:root[data-tema="koyu"] .cat-chip[data-cat="see"].active  { background: #3b6fe0; }
:root[data-tema="koyu"] .cat-chip[data-cat="do"].active   { background: #1fa06a; }
:root[data-tema="koyu"] .cat-chip[data-cat="eat"].active  { background: #d94a35; }
:root[data-tema="koyu"] .cat-chip[data-cat="shop"].active { background: #c3900f; }
:root[data-tema="koyu"] .cat-chip[data-cat="night"].active{ background: #6e4ae0; }
:root[data-tema="koyu"] .cat-chip[data-cat="exp"].active  { background: #c2410c; }
:root[data-tema="koyu"] .cat-chip[data-cat="ess"].active  { background: #0d8f8a; }

/* ── Cihaz geri bildirimi turu (TestFlight): nav doğallaştı, gezi sabitlendi ──
   1) Alt nav: beyaz hap kutusu kalktı — tam genişlik, sayfaya karışan
      yumuşak geçişli zemin (iOS sekme çubuğu doğallığı). Aktif hap ve
      orb duruyor; kutu havada süzülmüyor.
   2) Gezi: sayfanın "çok kayması" iki sebepti — eylem yığını içeriğten
      önce ~340px yer yiyordu ve gün çipleri kaydırınca kayboluyordu.
      Yığın sıkıştı, çipler yapışkan oldu, lastik-bant zinciri kesildi. */
.bottom-nav {
  margin: 0 !important;
  border: 0; border-radius: 0;
  background: linear-gradient(to top, var(--paper) 68%, rgba(251, 252, 251, 0));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: none;
  padding: 6px 10px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}
:root[data-tema="koyu"] .bottom-nav {
  background: linear-gradient(to top, #141a17 68%, rgba(20, 26, 23, 0));
}

/* Gezi başlığı diyeti */
.trip-auto { padding: 12px; margin-bottom: 8px; }
.trip-tools { margin-bottom: 8px; }
.tt-btn { padding: 9px 14px; }
.cd-add { padding: 8px; margin-bottom: 10px; }
.trip-header { margin-bottom: 8px; }

/* Gün çipleri yapışkan: uzun planda hangi gündeyim kaybolmasın */
.trip-days-nav {
  position: sticky; top: -16px;
  z-index: 6;
  margin: 2px -4px 12px;
  padding: 10px 4px 8px;
  background: linear-gradient(to bottom, var(--paper) 78%, rgba(251, 252, 251, 0));
}
:root[data-tema="koyu"] .trip-days-nav {
  background: linear-gradient(to bottom, #141a17 78%, rgba(20, 26, 23, 0));
}

/* Kaydırma zinciri: görünüm kendi içinde durur, lastik bant gövdeye taşmaz */
.view { overscroll-behavior-y: contain; }


/* Rehber kapatma: akış içinde, iri, kaçırılmaz (modal-x mutlak konumluydu
   ve telefonda çentiğin arkasında kalıyordu). */
.guide-close {
  flex: none; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: var(--card); color: var(--ink);
  display: grid; place-items: center;
}
.guide-close:active { transform: scale(.92); }
.guide-plan-add { width: 100%; margin-top: 10px; padding: 12px; }


/* ── Cihaz turu 3 ────────────────────────────────────────────────────
   1) Koyu temada kategori çipleri: 8 ayrı renkli-tonlu hap koyuda çamur
      görünüyordu (cihaz raporu). Renk disiplini: pasifler tek örnek nötr,
      renk yalnız AKTİF çipte konuşur. */
:root[data-tema="koyu"] .cat-chip,
:root[data-tema="koyu"] .cat-chip[data-cat="see"],
:root[data-tema="koyu"] .cat-chip[data-cat="do"],
:root[data-tema="koyu"] .cat-chip[data-cat="eat"],
:root[data-tema="koyu"] .cat-chip[data-cat="shop"],
:root[data-tema="koyu"] .cat-chip[data-cat="night"],
:root[data-tema="koyu"] .cat-chip[data-cat="exp"],
:root[data-tema="koyu"] .cat-chip[data-cat="ess"] {
  background: #222b26;
  color: #aab7b1;
}
:root[data-tema="koyu"] .cat-chip[data-cat="all"] {
  background: #222b26; color: #aab7b1;
}

/* 3) Nav Instagram doğallığında: degrade/blur yok, sayfayla aynı düz
      zemin + tek ince üst çizgi. Aktif sekme haplı değil — ikon ve
      etiket koyulaşır (renk yalnız orb'da). */
.bottom-nav {
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
}
:root[data-tema="koyu"] .bottom-nav {
  background: #141a17;
  border-top-color: #232c27;
}
.nav-btn.active {
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-weight: 700;
}
.nav-btn.active .nav-icon { transform: none; }
.nav-btn.active .nav-icon svg { stroke-width: 2.3; }
:root[data-tema="koyu"] .nav-btn.active { color: var(--ink); }

/* ── Koyu tema derinlik cilası ───────────────────────────────────────
   Koyuda gölge görünmez; derinliği hafif AÇIK kenarlık taşır (yüzeye
   üstten ışık vurmuş hissi). Kenarlıksız yükseltilmiş yüzeylere ince
   çizgi verildi, genel çizgi tonu bir tık kaldırıldı. */
:root[data-tema="koyu"] { --line: #313d36; }
:root[data-tema="koyu"] .poi-hero,
:root[data-tema="koyu"] .pf-stat,
:root[data-tema="koyu"] .pf-live > *,
:root[data-tema="koyu"] .cd-card,
:root[data-tema="koyu"] .sheet,
:root[data-tema="koyu"] .modal,
:root[data-tema="koyu"] .city-menu,
:root[data-tema="koyu"] .suggest-box,
:root[data-tema="koyu"] .route-day,
:root[data-tema="koyu"] .guide-panel .route-out,
:root[data-tema="koyu"] .rc-img {
  border: 1px solid #2f3b34;
}
:root[data-tema="koyu"] .sheet,
:root[data-tema="koyu"] .modal { border-bottom: 0; }

/* ── Nav: referans (Instagram) — ikon-only yüzen hap ─────────────────
   Yarı saydam açık hap, yalnız ikonlar; aktif sekme ikonun arkasında
   yumuşak gri daire + kalın ikon. Etiketler ekran okuyucuya kalır
   (sr-only) — görsel değil ama erişilebilir. */
.bottom-nav {
  margin: 0 14px calc(10px + env(safe-area-inset-bottom)) !important;
  padding: 8px 10px;
  border: 0; border-radius: 999px;
  background: rgba(238, 241, 239, 0.9);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 6px 24px rgba(47, 62, 70, 0.12);
}
:root[data-tema="koyu"] .bottom-nav {
  background: rgba(32, 40, 35, 0.92);
  border: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
/* etiketler: görsel olarak gizli, erişilebilirlik ağacında var */
.nav-btn span[data-i18n] {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.nav-btn { padding: 0; margin: 0 2px; min-height: 48px; }
.nav-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.nav-icon svg { width: 24px; height: 24px; }
.nav-btn.active .nav-icon { background: rgba(47, 62, 70, 0.12); }
.nav-btn.active .nav-icon svg { stroke-width: 2.4; }
:root[data-tema="koyu"] .nav-btn.active .nav-icon { background: rgba(255, 255, 255, 0.14); }
.nav-badge { top: 2px; inset-inline-end: 4px; }


/* Koyu temada marka: Vespira beyaz (logo işaretiyle uyum), beta rozeti
   görünür (acc-soft/acc-ink koyuda koyu-üstü-koyu kalıyordu — cihaz raporu). */
:root[data-tema="koyu"] .wordmark { color: #fff; }
:root[data-tema="koyu"] .wm-beta {
  color: #a8dfc0;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Nav hapı gerçek şeffaf-cam: gri okunuyordu — opaklık düştü, blur arttı;
   içerik hapın altından buzlu camdan geçer gibi görünür. */
.bottom-nav {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 4px 20px rgba(47, 62, 70, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
:root[data-tema="koyu"] .bottom-nav {
  background: rgba(18, 24, 21, 0.38);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Nav referans farkları kapanıyor:
   1) Çifte güvenli-alan bug'ı: pay hem margin'de hem hapın İÇİNDE
      sayılıyordu — iPhone'da hapın alt yarısı boş kalıyordu. Pay yalnız
      dış boşlukta; hap içi sıkı.
   2) Aktif durum küçük daire değil TAM BOY hap dilimi (segment hissi).
   3) Pasif ikonlar gri değil mürekkep — referansın kararlı kontrastı. */
.bottom-nav { padding: 5px 8px !important; }
.nav-btn { min-height: 0; color: var(--ink); opacity: .82; }
.nav-btn.active { opacity: 1; }
.nav-icon { width: 60px; height: 46px; border-radius: 999px; }
.nav-btn.active .nav-icon { background: rgba(47, 62, 70, 0.12); }
:root[data-tema="koyu"] .nav-btn { color: var(--ink); }
.nav-badge { top: 1px; inset-inline-end: 8px; transform: scale(.9); }


/* ── AI zengin cevaplar (parti 1) ── */
.g-puan { font-family: var(--mono); font-size: 11px; color: var(--acc-deeper); white-space: nowrap; }
.g-serit { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.g-serit::-webkit-scrollbar { display: none; }
.g-kart {
  flex: none; width: 128px; text-align: start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--card); padding: 0 0 8px;
}
.g-kart img, .g-kart-ikon {
  width: 100%; height: 74px; object-fit: cover; display: grid;
  place-items: center; font-size: 24px; background: var(--thumb-bg, #eef2ef);
}
.g-kart-ad {
  display: block; padding: 6px 9px 0;
  font-family: var(--body); font-weight: 600; font-size: 12px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-kart-puan { display: block; padding: 1px 9px 0; font-family: var(--mono); font-size: 11px; color: var(--acc-deeper); }
.g-transit {
  margin-top: 9px; padding: 8px 11px; border-radius: 11px;
  background: var(--acc-soft); color: var(--acc-deeper);
  font-family: var(--mono); font-size: 12px;
}


/* ── AI parti 2: günaydın brifi + çip taşması ── */
.gb-brif { border-inline-start: 3px solid var(--acc); }
.gb-hava { font-family: var(--mono); color: var(--acc-deeper); margin-inline-start: 6px; }
.gb-satir { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.gb-git {
  margin-top: 9px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc-deeper);
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.guide-chips { flex-wrap: wrap; }


/* ── AI parti 3: ses + foto ── */
.guide-foto, .guide-mik {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  cursor: pointer; display: grid; place-items: center;
}
.guide-mik.dinliyor { color: #d94a35; border-color: #d94a35; animation: mik-nabiz 1s ease-in-out infinite; }
@keyframes mik-nabiz { 50% { box-shadow: 0 0 0 6px rgba(217, 74, 53, .15); } }
.g-foto { display: block; max-width: 180px; border-radius: 10px; margin-bottom: 6px; }
.g-oku {
  float: inline-end; margin-inline-start: 8px;
  border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 2px;
}
.g-oku:hover { color: var(--acc-deeper); }
@media (prefers-reduced-motion: reduce) { .guide-mik.dinliyor { animation: none; } }

/* ── Rehber canlılık dalgası: kapak, keşif kartı, balon yaylanması ── */
.g-kapak {
  position: relative; border-radius: 16px; overflow: hidden;
  height: 118px; margin-bottom: 4px; flex-shrink: 0;
}
.g-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-kapak b {
  position: absolute; left: 12px; bottom: 9px; color: #fff;
  font-size: 16px; letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.g-kapak::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.42));
}
.g-kesif b { display: block; font-size: 12px; opacity: 0.75; margin-bottom: 6px; }
.g-devam { margin-top: -2px; }
.g-devam .guide-chip[disabled] { opacity: 0.6; }
.g-daktilo::after {
  content: "▍"; opacity: 0.5; animation: g-imlec 0.9s steps(1) infinite;
}
@keyframes g-imlec { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .guide-msg { animation: balon-yay 0.34s cubic-bezier(0.34, 1.4, 0.64, 1); }
  @keyframes balon-yay {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
}
:root[data-tema="koyu"] .g-kesif b { opacity: 0.85; }

/* ── AI eylem kartları: iletişim + mail taslağı ── */
.g-tel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: var(--card, #fff); border: 1px solid rgba(47, 62, 70, 0.1);
  border-radius: 14px; padding: 10px 13px; margin-top: 8px;
}
.g-tel b { font-size: 13px; }
.g-tel-bekle { opacity: 0.55; font-size: 13px; }
.g-tel-ara {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--ink, #2f3e46); background: rgba(47, 62, 70, 0.07);
  border-radius: 999px; padding: 6px 12px;
}
.g-mail {
  background: var(--card, #fff); border: 1px solid rgba(47, 62, 70, 0.1);
  border-radius: 14px; padding: 11px 13px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.g-mail > b { font-size: 13px; }
.g-mail-govde {
  font: inherit; font-size: 13px; white-space: pre-wrap; margin: 0;
  background: rgba(47, 62, 70, 0.05); border-radius: 10px; padding: 9px 11px;
  max-height: 220px; overflow-y: auto;
}
.g-mail-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.g-mail-not { font-size: 11px; opacity: 0.6; }
:root[data-tema="koyu"] .g-tel,
:root[data-tema="koyu"] .g-mail { border-color: #2f3b34; }
:root[data-tema="koyu"] .g-mail-govde,
:root[data-tema="koyu"] .g-tel-ara { background: rgba(255, 255, 255, 0.08); color: inherit; }

/* ── Sesli sohbet sahnesi: nefes alan küre + durum + transkript ── */
.ses-sahne {
  position: fixed; inset: 0; z-index: 320;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  background: linear-gradient(165deg, #22302a 0%, #2f3e46 55%, #1d2a24 100%);
  color: #f3f6f4; text-align: center;
}
.ses-kapat, .ani-kapat {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 18px;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 15px;
}
.ses-orb {
  width: 132px; height: 132px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 32% 30%, #cfe8d8, #84a98c 58%, #52796f);
  box-shadow: 0 0 60px rgba(132, 169, 140, 0.45);
}
.ses-orb[data-durum="dinliyor"] { box-shadow: 0 0 80px rgba(132, 169, 140, 0.8); }
.ses-orb[data-durum="dusunuyor"] { filter: saturate(0.6); }
.ses-durum { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.ses-metin {
  min-height: 3.2em; max-width: 30rem; max-height: 34vh; overflow-y: auto;
  font-size: 14px; line-height: 1.5; opacity: 0.92;
}
.ses-metin.kismi { opacity: 0.55; font-style: italic; }
.ses-ipucu { font-size: 11px; opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .ses-orb { animation: orb-nefes 3.2s ease-in-out infinite; }
  .ses-orb[data-durum="dinliyor"] { animation-duration: 1.6s; }
  .ses-sahne { animation: perde 0.3s ease; }
}

/* ── Sesli sahne v2: katmanlı küre, yayılan halkalar, ekolayzır ── */
.ses-sahne {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(132, 169, 140, 0.28), transparent 60%),
    radial-gradient(120% 90% at 50% 110%, #131c18 10%, transparent 70%),
    linear-gradient(170deg, #2c3b33 0%, #1d2a24 55%, #141d19 100%);
}
.ses-kapat {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ses-orb {
  position: relative; width: 148px; height: 148px;
  background: radial-gradient(circle at 30% 26%, #eef7f0 0%, #b9d4c1 30%, #6f9d87 62%, #3e6a5c 100%);
  box-shadow: 0 0 90px rgba(132, 169, 140, 0.55), inset 0 -16px 34px rgba(0, 0, 0, 0.28);
}
.ses-orb::before, .ses-orb::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1.5px solid rgba(185, 212, 193, 0.4); pointer-events: none;
}
.ses-orb::after { inset: -30px; border-color: rgba(185, 212, 193, 0.18); }
.ses-orb[data-durum="dusunuyor"] { filter: saturate(0.55) brightness(0.92); }
.ses-dalga { display: flex; gap: 5px; height: 26px; align-items: center; }
.ses-dalga i { width: 4px; height: 7px; border-radius: 2px; background: #b9d4c1; opacity: 0.9; }
.ses-sahne[data-durum="dusunuyor"] .ses-dalga { visibility: hidden; }
.ses-durum {
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; padding: 7px 18px; font-size: 14px;
}
.ses-metin {
  background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 12px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ses-metin:empty { display: none; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ses-orb::before { animation: ses-halka 2.6s ease-out infinite; }
  .ses-orb::after { animation: ses-halka 2.6s ease-out 1.3s infinite; }
  .ses-sahne[data-durum="dinliyor"] .ses-orb::before { animation-duration: 1.2s; }
  .ses-sahne[data-durum="dinliyor"] .ses-orb::after { animation-duration: 1.2s; animation-delay: 0.6s; }
  .ses-sahne[data-durum="dinliyor"] .ses-dalga i,
  .ses-sahne[data-durum="konusuyor"] .ses-dalga i { animation: ses-bar 0.9s ease-in-out infinite; }
  .ses-dalga i:nth-child(2) { animation-delay: 0.14s; }
  .ses-dalga i:nth-child(3) { animation-delay: 0.28s; }
  .ses-dalga i:nth-child(4) { animation-delay: 0.42s; }
  .ses-dalga i:nth-child(5) { animation-delay: 0.56s; }
}
@keyframes ses-halka {
  from { transform: scale(0.94); opacity: 0.85; }
  to { transform: scale(1.24); opacity: 0; }
}
@keyframes ses-bar { 0%, 100% { height: 7px; } 50% { height: 24px; } }

/* Sahne küresi kendi nefesini alır: nav orb'unun minik gölge animasyonu
   148px kürede kayboluyordu — ölçek + parlama birlikte soluklanır. */
@media (prefers-reduced-motion: no-preference) {
  .ses-orb, .ses-sahne[data-durum="dinliyor"] .ses-orb {
    animation: ses-nefes 3.2s ease-in-out infinite;
  }
  .ses-sahne[data-durum="dinliyor"] .ses-orb { animation-duration: 1.6s; }
}
@keyframes ses-nefes {
  0%, 100% { transform: scale(1); box-shadow: 0 0 70px rgba(132, 169, 140, 0.4), inset 0 -16px 34px rgba(0, 0, 0, 0.28); }
  50% { transform: scale(1.045); box-shadow: 0 0 110px rgba(132, 169, 140, 0.65), inset 0 -16px 34px rgba(0, 0, 0, 0.28); }
}

/* ── Akış: tam ekran kaydırmalı keşif ── */
.cat-chip.kapak-cip {
  background: var(--ink, #2f3e46); color: #fff; border-color: transparent;
  font-weight: 700;
}
:root[data-tema="koyu"] .cat-chip.kapak-cip { background: var(--acc, #5ebb7e); color: #10171a; }
.akis-sahne { position: fixed; inset: 0; z-index: 300; background: #10171a; }
.akis-kaydirak {
  height: 100%; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain;
}
.akis-kart {
  position: relative; height: 100%; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.akis-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.akis-noimg { display: grid; place-items: center; background: #1c2723; }
.akis-noimg-ikon { font-size: 64px; opacity: 0.5; }
/* ── Tasarımlı kapak: fotoğrafsız mekân kartı ─────────────────────
   Katman 1 (imza): dev, kırpık, soluk tür simgesi — doku görevi görür.
   Katman 2 (çip): küçük, net rozet — tür bilgisini verir. Zemin rengi
   mekâna özgü koyu gradyan olarak inline gelir (kapakKoyu). */
.akis-nofoto { overflow: hidden; }
.kapak-imza {
  position: absolute; right: -6%; top: 16%;
  font-size: clamp(180px, 42vh, 340px); line-height: 1;
  opacity: 0.16; transform: rotate(-14deg);
  user-select: none; pointer-events: none;
  filter: saturate(0.7);
}
.kapak-cip {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 26px;
  display: grid; place-items: center; font-size: 44px;
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.22);
  backdrop-filter: blur(3px);
}
.akis-bilgi {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 46px 20px calc(28px + env(safe-area-inset-bottom)); color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.74) 62%);
}
.akis-bilgi b { font-size: 18px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.akis-bilgi span { font-size: 13px; opacity: 0.88; }
.akis-bilgi p {
  margin: 0; font-size: 13px; line-height: 1.45; opacity: 0.82;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.akis-rozet {
  align-self: flex-start; font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.akis-kalp {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  font-size: 88px; color: #fff; opacity: 0; pointer-events: none;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}
.akis-kalp.pop { animation: akis-kalp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes akis-kalp {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1.15); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.akis-kapat { z-index: 4; }
.akis-seri {
  position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 18px; z-index: 4;
  color: #fff; font-size: 12px; font-weight: 600;
  background: rgba(0, 0, 0, 0.38); border-radius: 999px; padding: 6px 13px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ── Anı Kartı sahnesi ── */
.akis-ani {
  position: absolute; right: 18px; bottom: 190px; z-index: 3;
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.38); font-size: 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.akis-plan { bottom: 256px; }   /* 📸 düğmesinin üstünde, aynı sütun */
.ani-sahne {
  position: fixed; inset: 0; z-index: 340;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  background: rgba(13, 18, 16, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#aniTuval {
  max-height: 62vh; max-width: min(92vw, 62vh * 0.5625);
  width: auto; height: auto; border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

/* Şablon gezme: kartın iki yanında ok — çip aramaya gerek kalmadan
   kartın üstünden deste çevrilir; mobilde kaydırma da aynı işi yapar. */
.ani-tuval-kap { position: relative; display: flex; align-items: center; }
.ani-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ani-ok:active { background: rgba(0, 0, 0, 0.65); }
.ani-ok-sol { left: -10px; }
.ani-ok-sag { right: -10px; }
.ani-cipler {
  display: flex; gap: 8px; overflow-x: auto; max-width: 94vw;
  padding: 4px 2px; -webkit-overflow-scrolling: touch;
}
.ani-cipler .guide-chip { flex-shrink: 0; background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.ani-cipler .guide-chip.active { background: var(--acc, #5ebb7e); color: #10171a; }
.ani-paylas { min-width: 220px; }

/* Paylaş düğmesi: genel .btn-primary bu bağlamda daireye şişiyordu —
   sahnedeki flex hizalaması + oran kuralı. Açıkça hap biçimine sabitle. */
.ani-paylas {
  height: 52px; padding: 0 30px; border-radius: 999px;
  aspect-ratio: auto; width: auto; flex: none;
  font-size: 15px; display: inline-flex; align-items: center; gap: 8px;
}

/* Anı v2 → v4 araç çubuğu: Paylaş köşede tek başına duruyordu ("ıssız",
   kullanıcı geri bildirimi). Şimdi iki katman: ikincil çipler bir satır,
   altında kart genişliğinde tam-en Paylaş — sahnenin çapası. */
.ani-arac {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  /* genişlik: aşağıdaki v2 bloğu (100% / max 30rem) — sahnedeki başlık
     ve çip satırlarıyla aynı sütun. */
}
.ani-arac-cipler { display: flex; gap: 8px; justify-content: center; }
.ani-arac .guide-chip { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.ani-arac .ani-paylas { width: 100%; min-width: 0; justify-content: center; }
.sheet-ani { flex: none; font-size: 18px; padding: 0 14px; }

/* Anı v3: filtreler + vitrin */
.ani-filtreler { display: flex; gap: 8px; overflow-x: auto; max-width: 94vw; padding: 2px; }
.ani-filtreler .guide-chip { flex-shrink: 0; background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.ani-filtreler .guide-chip.active { background: #fff; color: #10171a; }
.kv-serit { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; }
.kv-kart {
  height: 210px; width: auto; border-radius: 14px; flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(28, 35, 32, 0.16);
}
#kartVitrin:empty { display: none; }

/* ── Anı Kartı sahnesi v2: tasarım diline hizalama ──
   İlk sürüm "yüzen parçalar" gibiydi: başlıksız, etiketiz çip yığınları,
   görünen kaydırma çubukları. Şimdi: başlık satırı, bölüm etiketleri,
   nefes payları ve gizli kaydırma — rehber panelindeki dille aynı. */
.ani-sahne {
  justify-content: flex-start;
  gap: 8px;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
}
.ani-bas {
  width: 100%; max-width: 30rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 4px;
}
.ani-bas-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ani-bas-txt b { color: #fff; font-size: 16px; letter-spacing: 0.01em; }
.ani-bas-txt span { color: rgba(255, 255, 255, 0.6); font-size: 12px; }
.ani-bas .ses-kapat { position: static; }
#aniTuval { max-height: 56vh; margin: 2px 0 4px; }
.ani-etiket {
  width: 100%; max-width: 30rem; text-align: left;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.ani-cipler, .ani-filtreler {
  width: 100%; max-width: 30rem; justify-content: flex-start;
  scrollbar-width: none;
}
.ani-cipler::-webkit-scrollbar, .ani-filtreler::-webkit-scrollbar { display: none; }
.ani-arac {
  width: 100%; max-width: 30rem;
  justify-content: space-between; margin-top: 4px;
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Anı Albümü ──────────────────────────────────────────────────────
   Sahne ani-sahne'nin karanlık zeminini miras alır; içerik kolonu 30rem
   (kartpostalla aynı ritim). Izgara 3 sütun — telefon galerisi dili. */
.album-sahne { justify-content: flex-start; overflow-y: auto; }
.album-kimlik { width: 100%; max-width: 30rem; font-size: 13px; color: rgba(255,255,255,0.75); padding: 2px 2px 0; }
.album-govde { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 12px; }
.album-liste { display: flex; flex-direction: column; gap: 8px; }
.album-satir {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 14px; border-radius: 14px; border: 0;
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.album-satir b { font-size: 15px; }
.album-satir span { font-size: 12px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; }
.album-form { display: flex; gap: 8px; }
.album-form .ob-search-input {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; border-radius: 12px;
  padding: 12px 14px; font-size: 15px;
}
.album-form .ob-search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.album-form .btn { flex: none; }
/* Karanlık sahnede hayalet düğme: genel .btn-ghost zemini var(--card)
   (açık temada BEYAZ) — beyaz kutuda beyaz yazı "boş kutucuk" gibi
   görünüyordu (ölçüldü, kullanıcı raporu). Sahne diline sabitlendi. */
.album-form .btn-ghost {
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: none;
}
.album-form .btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }
.album-kod-girdi { text-transform: uppercase; letter-spacing: 0.25em; font-family: ui-monospace, monospace; }
.album-ayrac { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.album-not { font-size: 12px; color: rgba(255, 255, 255, 0.55); text-align: center; line-height: 1.5; max-width: 30rem; }
.album-arac { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 30rem; justify-content: space-between; }
.album-arac .guide-chip { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.album-yukle-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.album-izgara {
  width: 100%; max-width: 30rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.album-hucre {
  aspect-ratio: 1; border: 0; border-radius: 10px; overflow: hidden;
  padding: 0; background: rgba(255, 255, 255, 0.06); cursor: pointer;
}
.album-hucre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-gizli { opacity: 0.35; outline: 2px dashed rgba(255, 120, 120, 0.7); }
.album-bos {
  grid-column: 1 / -1; text-align: center; padding: 40px 16px;
  color: rgba(255, 255, 255, 0.5); font-size: 14px;
}
.album-bakac {
  position: fixed; inset: 0; z-index: 360;
  background: rgba(8, 10, 9, 0.96); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 16px;
}
.album-bakac img { max-width: 96vw; max-height: 74vh; border-radius: 12px; object-fit: contain; }
.album-admin-arac { justify-content: flex-start; flex-wrap: wrap; }
.album-admin-arac .guide-chip.active { background: var(--acc, #5ebb7e); color: #10171a; }
.album-politika-etiket { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.album-kilit-not { flex: 1; text-align: right; margin: 0; }
.album-tehlike { color: #ff9c9c !important; }
.album-kim { color: rgba(255, 255, 255, 0.7); font-size: 12px; letter-spacing: 0.03em; }
.album-bakac-arac { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.album-bakac-arac .guide-chip { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; text-decoration: none; }

/* Akış son kartı */
.akis-son { display: grid; place-items: center; background: #131c18; }
.akis-son-ic { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; padding: 24px; text-align: center; }
.akis-son-ic span { font-size: 52px; }
.akis-son-ic b { font-size: 16px; opacity: 0.9; }

/* Boş gezi eylem çağrısı + masaüstünde ince kaydırma çubuğu */
.es-eylem { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
@media (pointer: fine) {
  .view, .sheet, .guide-body { scrollbar-width: thin; scrollbar-color: rgba(47, 62, 70, 0.25) transparent; }
  :root[data-tema="koyu"] .view, :root[data-tema="koyu"] .sheet,
  :root[data-tema="koyu"] .guide-body { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
}

/* Ortaklık çağrısı satırı + mini BETA rozeti */
.sheet-partner-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 10px 0 2px; padding: 11px 14px;
  border: 1px dashed rgba(47, 62, 70, 0.28); border-radius: 12px;
  color: var(--ink, #2f3e46); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.beta-mini {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--acc, #5ebb7e); color: #10171a;
  border-radius: 6px; padding: 2px 6px;
}
:root[data-tema="koyu"] .sheet-partner-cta { border-color: rgba(255, 255, 255, 0.22); color: inherit; }

/* Mekân bildirimi: ortaklık satırının altında sessiz bir bağlantı; açılınca üç neden */
.sheet-report { margin: 8px 0 2px; text-align: center; }
.sheet-report-btn, .sheet-report-cancel {
  background: none; border: 0; padding: 8px 10px; min-height: 36px;
  color: var(--ink-soft, #6b7a80); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.sheet-report-title { margin: 4px 0 8px; font-size: 13px; font-weight: 600; }
.sheet-report-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sheet-report-opts button {
  padding: 9px 12px; min-height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(47, 62, 70, 0.22); background: transparent; color: inherit; font-size: 13px;
}
.sheet-report-opts button:disabled, .sheet-report-btn:disabled { opacity: 0.5; cursor: default; }
.sheet-report-done { margin: 6px 0; font-size: 12.5px; color: var(--ink-soft, #6b7a80); }
:root[data-tema="koyu"] .sheet-report-opts button { border-color: rgba(255, 255, 255, 0.22); }
:root[data-tema="koyu"] .sheet-report-btn, :root[data-tema="koyu"] .sheet-report-cancel,
:root[data-tema="koyu"] .sheet-report-done { color: rgba(255, 255, 255, 0.62); }

/* Akış yatay kayma freni: dikey hariç dokunma hareketi yok, x taşması kilitli */
.akis-sahne { overflow: hidden; }
.akis-kaydirak { overflow-x: hidden; touch-action: pan-y; }
.akis-kart { touch-action: pan-y; max-width: 100%; }
.akis-bilgi { overflow-wrap: anywhere; }

/* Sosyal giriş: gerçek logolar */
.social-ico { width: 18px; height: 18px; flex-shrink: 0; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ── GetYourGuide ortaklık kartı ──
   Reklam gibi değil, gezinin doğal bir parçası gibi durmalı; ama ortaklık
   bağlantısı olduğu küçük puntoyla AÇIKÇA yazılı (yasal + dürüstlük). */
.gyg-kart {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 12px; margin: 18px 0 6px; padding: 14px 16px 24px;
  background: var(--card, #fff); border: 1px solid rgba(47, 62, 70, 0.1);
  border-radius: 16px; text-decoration: none; color: inherit;
  box-shadow: 0 6px 20px rgba(28, 35, 32, 0.05);
}
.gyg-ico { font-size: 24px; }
.gyg-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gyg-txt b { font-size: 14px; }
.gyg-txt > span { font-size: 12px; opacity: 0.7; }
.gyg-ok { opacity: 0.45; font-size: 15px; }
.gyg-not {
  position: absolute; left: 16px; right: 16px; bottom: 8px;
  font-size: 11px; opacity: 0.5;
}
:root[data-tema="koyu"] .gyg-kart { border-color: #2f3b34; }
.guide-acts .gyg-kart { margin: 8px 0 4px; }

/* Plan satırında yaklaşık süre — adın altında, ikincil tonda */
.plan-sure { opacity: 0.75; }
.plan-sure::before { content: " · "; opacity: 0.6; }

/* Web araştırma rozeti: cevabın kaynağı görünür olsun */
.g-web {
  display: inline-block; margin-top: 8px;
  font-size: 11px; opacity: 0.6; letter-spacing: 0.01em;
}

/* ── Form denetimleri tema mürekkebini kullanır ──
   Tarayıcı <input>'a siyah varsayılan veriyor ve bunu miras alan rehber
   giriş kutusu KOYU temada siyah zeminde siyah yazıyordu: kullanıcı ne
   yazdığını göremiyordu (ölçüldü: kontrast 1.34:1, okunabilirlik eşiği
   4.5). Tek kutuyu yamamak yerine kural koyuyoruz — bundan sonra eklenen
   hiçbir giriş bu tuzağa düşmez. */
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 1; }

/* ── Dokunma hedefleri: en az 44×44 ──────────────────────────────────
   Ölçüldü (canlıda, 375px genişlikte): 89 dokunulabilir öğenin 53'ü
   44×44'ün altındaydı. En kötüsü her karttaki ♡ kaydet düğmesi: 17×23.
   Apple HIG ve Material'ın ortak eşiği 44 pt/dp ve mağaza incelemesinde
   de kullanıcı şikâyetinde de karşımıza çıkacak bir eksikti.

   YAKLAŞIM: görsel boyut DEĞİŞMİYOR — simgeler aynı puntoda kalıyor,
   yalnızca dokunulabilir kutu büyüyor. Bunu görünmez bir katmanla
   (::after) değil, öğenin kendi kutusuyla yapıyoruz: sözde öğe
   getBoundingClientRect'e girmediği için "düzelttik" deyip ölçümde
   göremezdik, yani doğrulanamayan bir düzeltme olurdu. */
.save-btn,
.done-btn,
.g-oku {
  min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center;
  padding: 0;
}
/* Yuvarlak "gezildi" işareti 26px kalmalı; kutu 44 olurken daire
   sözde öğeye taşınıyor. */
.done-btn {
  border: 0; background: none;
}
.done-btn::before {
  content: ""; position: absolute;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: background .12s, border-color .12s;
}
.done-btn { position: relative; }
.done-btn:hover::before { border-color: var(--c-do); }
.done-btn.done::before { background: var(--c-do); border-color: var(--c-do); }
.done-btn > * { position: relative; }

/* Kategori çipleri: yüksekliği zaten 44 ama "Ye" gibi kısa etiketlerde
   genişlik 33px'e düşüyordu. */
.cat-chip { min-width: 44px; justify-content: center; }

.sheet-close { width: 44px; height: 44px; }

/* ── Kalp fotoğraf üstünde okunmalı ──────────────────────────────────
   Satır kartındaki ♡ zaten gölgeliydi ama kart ve kahraman görsellerdeki
   kalp beyaz, gölgesiz ve doğrudan fotoğrafın üstündeydi: açık renkli bir
   fotoğrafta (kumsal, beyaz cephe, kar) tamamen kayboluyordu. Dış mekan
   okunabilirliği maddesinin somut karşılığı buydu. */
.poi-thumb .save-btn,
.poi-hero .save-btn,
.mem-tile .save-btn {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

/* ── Çevrimdışı şeridi ───────────────────────────────────────────────
   Bağlantı kesikken görünür. Alt gezinme çubuğunun ÜSTÜNDE duruyor:
   uyarı, gezinmeyi kapatarak kendi başına ikinci bir sorun olmamalı. */
#cevrimdisiSerit {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  margin: 0 12px 8px; padding: 10px 14px;
  border-radius: 12px;
  background: #3a2f24; color: #ffe9c9;
  font-family: var(--body); font-size: 13px; line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
@media (prefers-color-scheme: dark) {
  #cevrimdisiSerit { background: #4a3c2c; color: #ffeed6; }
}

/* Kategori satır başlığı tam genişlikteydi ama 41px yüksekliğindeydi. */
.cr-head { min-height: 44px; }

/* Ortaklık bağlantısı açıklaması — rehber eylem şeridinin altında. */
.guide-act-not {
  margin: 2px 0 6px; font-size: 11px; line-height: 1.35;
  color: var(--ink-soft); opacity: .85;
}

/* ── Giriş koreografisi — film dilinin uygulamadaki karşılığı ─────────
   Amaç doğallık: her adım kartı yumuşak yükselerek gelir, satırlar
   kademeli dökülür (dil listesi, şehir kartları, tarzlar), plan satırları
   filmin imza anı gibi tek tek düşer, kurulum anında pusulanın etrafında
   ikonlar döner, ilk açılışta kısa bir marka girişi oynar.
   Erişilebilirlik: prefers-reduced-motion tümünü kapatır. */
.onboard-card { animation: obSahne .45s cubic-bezier(.22, .9, .36, 1); }
/* DOKUNUŞ KUTUSU KIPIRDAMAZ (Aşama 2.8). Kart ve kademeli öğeler eskiden
   22-26 px aşağıdan kayarak geliyordu; başsız tarayıcıda 5x9 noktada her 50 ms
   "parmak buraya dokunsa neye basar" ölçüldü (tools/akis-kayma-olcum.cjs):
   şehir adımında Kuşadası'nın göründüğü yerde bir an İstanbul, Porto'nun
   yerinde Barcelona, "Konumumu kullan"ın yerinde arama kutusu vardı (3 dilde
   14-16 hedef kayması). Görünmez (opacity 0) düğme de dokunuş alır ve transform
   kutuyu taşır. Artık giriş YALNIZ saydamlık: kutular baştan yerinde, ölçüm 0. */
@keyframes obSahne { from { opacity: 0; } }

.ob-giris {
  opacity: 0;
  animation: obGiris .5s cubic-bezier(.22, .9, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes obGiris {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Plan satırları: film gibi daha yavaş, tane tane */
.obp-row.ob-giris { animation-delay: calc(var(--i, 0) * 140ms + 180ms); }
.obp-day .obp-daylabel.ob-giris { animation-delay: calc(var(--i, 0) * 140ms); }

/* Kurulum anı: pusulanın yörüngesindeki üç ikon */
.onboard-icon { position: relative; }
.ob-uydu {
  position: absolute; left: 50%; top: 50%; margin: -13px;
  font-size: 22px; opacity: .85; pointer-events: none;
  animation: obYorunge 3.2s linear infinite;
}
.ob-uydu.u2 { animation-delay: -1.07s; }
.ob-uydu.u3 { animation-delay: -2.14s; }
@keyframes obYorunge {
  from { transform: rotate(0turn) translateX(58px) rotate(0turn); }
  to   { transform: rotate(1turn) translateX(58px) rotate(-1turn); }
}

/* İlk açılış marka girişi: logo netleşir, harfler sırayla gelir */
.giris-perde {
  position: fixed; inset: 0; z-index: 400; background: #1c2320;   /* marka mürekkebi: logo karesiyle tek parça görünür */
  display: grid; place-items: center; transition: opacity .45s ease;
}
.giris-perde.git { opacity: 0; pointer-events: none; }
.giris-marka { text-align: center; }
.giris-marka img {
  width: 112px; height: 112px; border-radius: 28px;
  animation: girisLogo .9s cubic-bezier(.22, .9, .36, 1) both;
  box-shadow: 0 18px 50px rgba(28, 35, 32, .16);
}
@keyframes girisLogo {
  from { opacity: 0; filter: blur(14px); transform: scale(.86); }
  to   { opacity: 1; filter: blur(0);  transform: scale(1); }
}
.giris-harfler { margin-top: 18px; font-family: var(--display); font-weight: 700;
  font-size: 28px; letter-spacing: .28em; color: #f3f5f0; }
.giris-harfler span {
  display: inline-block; opacity: 0;
  animation: obGiris .45s cubic-bezier(.22, .9, .36, 1) forwards;
  animation-delay: calc(.35s + var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .onboard-card, .ob-giris, .obp-row.ob-giris, .giris-marka img,
  .giris-harfler span { animation: none; opacity: 1; transform: none; filter: none; }
  .ob-uydu { display: none; }
  .giris-perde { display: none; }
}

/* ── Film → giriş: eksik kalan öğeler ─────────────────────────────── */
/* Marka çubuğu: mini logo + VESPIRA + adım noktaları — filmdeki kalıcı
   marka katmanının uygulamadaki karşılığı. */
.ob-marka {
  position: absolute; left: 0; right: 0; top: calc(14px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px; padding: 0 20px; z-index: 2;
  animation: obGiris .5s cubic-bezier(.22, .9, .36, 1) both;
}
/* Marka çubuğu MUTLAK konumlu ve akışta yer kaplamıyor; kapsayıcının üst
   dolgusu (28px) ise çubuğun bittiği yere (~70px) yetmiyordu. Kart ekrana
   sığmayınca (şehir adımı: 819px kart / 812px ekran) tepeye dayanıp
   çubuğun ALTINA giriyor, logo+VESPIRA başlıkla çakışıyordu (ölçüldü:
   çubuk [36-70] ✗ başlık [42-72]). Kardeş seçici — :has() gerektirmez,
   eski Safari dahil her yerde çalışır — yalnız çubuk VARKEN yer açar. */
.ob-marka ~ .onboard-card { margin-top: 46px; }
.ob-marka img { width: 34px; height: 34px; border-radius: 9px; }
.ob-marka b { font-family: var(--display); font-size: 14px; letter-spacing: .22em; color: var(--ink); }
.obm-noktalar { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.obm-nokta { width: 9px; height: 9px; border-radius: 5px; background: var(--acc-soft); transition: all .3s; }
.obm-nokta.on { background: var(--acc); }
.obm-nokta.aktif { width: 22px; }

/* Seçim anı: dokunulan kart nane vurgu + ✓ — akış 260 ms sonra ilerler. */
.ob-secim {
  border-color: var(--acc) !important;
  background: var(--acc-soft) !important;
  transform: scale(1.03); transition: all .18s;
  position: relative;
}
.ob-secim::after {
  content: "✓"; position: absolute; right: 12px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 13px;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center;
  animation: obSecimPop .28s cubic-bezier(.34, 1.4, .5, 1) both;
}
@keyframes obSecimPop { from { transform: scale(.4); opacity: 0; } }

/* Plan başlık bandı: filmin "kapak plana katlanır" anının karşılığı —
   şehre özgü tasarımlı kapak zemini + logoya selam duran yıldız filigranı. */
.obp-kapak {
  position: relative; margin: -6px -6px 14px; height: 108px;
  border-radius: 18px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px 18px;
  animation: obGiris .5s cubic-bezier(.22, .9, .36, 1) both;
}
.obp-kapak b {
  position: relative; font-family: var(--display); font-size: 24px;
  color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.obp-kapak-yildiz {
  position: absolute; right: -14px; top: -26px; font-size: 120px; line-height: 1;
  color: #fff; opacity: .14; transform: rotate(-12deg); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ob-marka, .obp-kapak { animation: none; }
  .ob-secim { transform: none; }
  .ob-secim::after { animation: none; }
}

/* Fotoğraf atıfı — açık lisans şartı: küçük, okunur, fotoğrafın köşesinde */
.foto-atif {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  max-width: calc(100% - 90px);
  font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .92);
  background: rgba(28, 35, 32, .55); border-radius: 8px; padding: 3px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.foto-atif a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Sohbet: AI düşüş notu — dürüst, küçük, tekrar dene çipiyle */
.g-ai-dustu {
  font-size: 12px; color: var(--ink-soft); background: var(--acc-soft);
  border-radius: 12px; padding: 8px 12px; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.g-tekrar {
  border: 1px solid var(--acc); background: #fff; color: var(--acc-deep);
  border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600;
}

/* Sohbet içi plan kartı satırları */
.sp-gun { margin: 8px 0 4px; }
.sp-gun > b { font-family: var(--display); font-size: 14px; }
.sp-satir { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.sp-slot { color: var(--acc-deep); font-weight: 700; font-size: 11px; min-width: 52px; }
.sp-ad { color: var(--ink); }

/* Onboarding: konum düğmesi — tam genişlik, ikincil ton */
.ob-konum {
  width: 100%; margin: 4px 0 12px; padding: 12px 16px;
  border: 1.5px solid var(--acc); border-radius: 14px;
  background: var(--acc-soft); color: var(--acc-deep);
  font-family: var(--body); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
}
.ob-konum:disabled { opacity: .6; }

/* ========================================================================
   VESPIRA UI 2 — FIELD JOURNAL
   A deliberate visual reset: the product should feel like a confident local
   travel journal, not a generic utility dashboard. This layer intentionally
   lives at the end so the old, heavily-tested component rules remain useful
   fallbacks while this design system owns the final surface.
   ======================================================================== */
:root {
  --ink: #21332b;
  --ink-soft: #66746b;
  --paper: #f5f1e9;
  --card: #fffdf9;
  --line: #e7e0d5;
  --acc: #c86f4d;
  --acc-deep: #9b4f35;
  --acc-ink: #fff9f4;
  --acc-soft: #f4e1d7;
  --acc-deeper: #7e3e2a;
  --focus: #477f9c;
  --radius: 22px;
  --shadow: 0 16px 42px rgba(48, 41, 32, .10), 0 2px 8px rgba(48, 41, 32, .06);
  --clay: 0 2px 5px rgba(48, 41, 32, .05), 0 10px 22px rgba(48, 41, 32, .07);
}

body { background: #ddd8cf; }
.backdrop {
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%, rgba(200,111,77,.16), transparent),
    radial-gradient(ellipse 45% 40% at 88% 92%, rgba(58,104,81,.15), transparent),
    #ddd8cf;
}
.app {
  background:
    radial-gradient(120% 34% at 100% 0, rgba(200,111,77,.08), transparent),
    var(--paper);
}

.topbar {
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid rgba(231,224,213,.85);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.wordmark { color: var(--ink); font-size: 24px; letter-spacing: -.035em; }
/* MARKA SABİTİ. İşaret önce var(--ink), sonra var(--acc-deep) alıyordu;
   yani temaya göre renk değiştiriyordu. Koyu tema turkuaza kayınca marka
   yeşilinden koptu (kullanıcı fark etti). Logo, temalar arasında DEĞİŞMEYEN
   tek öğe olmalı: pano, mağaza görselleri ve ikon hep marka yeşili.
   --marka-yesil iki temada da aynı; koyu zeminde biraz açık tonu kullanılır
   ki parlaklık dengelensin. */
:root{ --marka-yesil:#3d8f5f; }
:root[data-tema=koyu]{ --marka-yesil:#5fc286; }
.wm-mark { background-color: var(--marka-yesil); width: 24px; height: 24px; }
.city-btn, .avatar-btn {
  background: rgba(255,253,249,.78);
  border-color: var(--line);
  box-shadow: 0 2px 6px rgba(48,41,32,.04);
}
.city-btn { padding-inline: 14px; }
.city-btn:hover, .avatar-btn:hover { border-color: var(--acc); }
.search-row { margin-top: 2px; }
.search-field {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 5px 18px rgba(48,41,32,.06);
}
.search-field:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(200,111,77,.12); }
.search-ico { color: var(--acc-deep); }
.locate-btn {
  background: var(--acc); color: #fffaf5; border-color: var(--acc);
  box-shadow: 0 5px 14px rgba(155,79,53,.22);
}
.locate-btn:hover { background: var(--acc-deep); }

.cat-bar { gap: 7px; padding: 10px 0 13px; }
.cat-chip {
  border-color: var(--line) !important;
  background: rgba(255,253,249,.72) !important;
  color: var(--ink-soft) !important;
  box-shadow: none;
  min-height: 44px;
  flex: 0 0 auto;
  padding-inline: 13px;
}
.cat-chip.active { background: var(--ink) !important; color: #fffdf9 !important; border-color: var(--ink) !important; }
.cat-chip[data-cat="all"].active { background: var(--acc) !important; border-color: var(--acc) !important; color: #fffdf9 !important; }

.view-feed, .view-saved { padding: 20px 18px 28px; }
.coverage-note, .demo-banner { border-radius: 18px; border-color: #e7c29a; box-shadow: none; }
.cat-row { margin-bottom: 30px; }
.cr-head { padding-bottom: 12px; }
.cr-head h2, .cat-heading h2 {
  font-size: 21px;
  letter-spacing: -.025em;
  color: var(--ink);
}
.cr-head h2::first-letter { color: var(--acc); }
.cr-arrow {
  width: 34px; height: 34px;
  background: var(--card); border-color: var(--line); color: var(--acc-deep);
}
.cr-strip { gap: 14px; margin-inline: -18px; padding-inline: 18px; }
.row-card { width: 170px; }
.rc-img { width: 170px; height: 178px; border-radius: 22px; box-shadow: 0 10px 24px rgba(48,41,32,.10); }
.rc-name { font-size: 15px; margin-top: 11px; }
.rc-sub { font-size: 12.5px; }
.poi-hero { border-radius: 26px; box-shadow: 0 15px 34px rgba(48,41,32,.12); }
.hero-img { aspect-ratio: 1.18 / 1; }
.hero-body { padding: 17px 18px 18px; }
.hero-name { font-size: 24px; }
.hero-meta { color: var(--acc-deep); }
.poi-card {
  border: 0;
  border-radius: 19px;
  background: rgba(255,253,249,.76);
  box-shadow: 0 3px 13px rgba(48,41,32,.045);
  padding: 11px;
}
.poi-card:hover { border-color: transparent; box-shadow: 0 10px 24px rgba(48,41,32,.10); }
.poi-thumb { border-radius: 15px; }
.poi-name { font-size: 17px; }
.poi-blurb { color: var(--ink-soft); }
.save-btn { color: #b6b0a8; }
.save-btn.saved { color: var(--acc); }

.bottom-nav {
  margin-inline: 14px;
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 3px 4px;
  border: 1px solid rgba(255,253,249,.96);
  border-radius: 24px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 12px 34px rgba(48,41,32,.17), 0 2px 4px rgba(48,41,32,.08);
}
.nav-btn { color: #8a938b; margin: 4px 2px; border-radius: 17px; }
.nav-btn.active { background: var(--ink); color: #fffdf9; box-shadow: 0 5px 13px rgba(33,51,43,.22); }
.nav-ai-orb { background: var(--acc) !important; box-shadow: 0 8px 22px rgba(155,79,53,.32) !important; }
.nav-ai:hover .nav-ai-orb { background: var(--acc-deep) !important; }
.nav-badge { background: var(--acc); }

.sheet, .modal, .city-menu, .suggest-box, .guide-panel {
  border-color: var(--line);
  box-shadow: 0 -14px 48px rgba(48,41,32,.22);
}
.sheet { border-radius: 28px 28px 0 0; }
.sheet-scrim, .scrim { background: rgba(33,51,43,.48); }
.trip-header h2 { font-size: 25px; }
.plan-row, .tt-btn { border-color: var(--line); box-shadow: 0 3px 12px rgba(48,41,32,.05); }
.trip-bar-fill, .plan-day-badge { background: var(--acc); }

/* Onboarding is a calm editorial cover, with one clear primary action. */
.onboard {
  background:
    radial-gradient(70% 40% at 100% 0, rgba(200,111,77,.38), transparent),
    radial-gradient(60% 50% at 0 100%, rgba(91,139,108,.36), transparent),
    #20372d;
}
.onboard-card { max-width: 390px; }
.onboard-card h2 { font-size: 30px; letter-spacing: -.035em; }
.onboard-card p { color: rgba(255,250,245,.72); }
.onboard-cta, .btn-primary {
  background: var(--acc) !important; color: #fffaf5 !important;
  border-color: var(--acc) !important;
  box-shadow: 0 10px 24px rgba(155,79,53,.28);
}
.onboard-cta:hover, .btn-primary:hover { background: #d9805d !important; }
.ob-city, .ob-style {
  background: rgba(255,253,249,.08);
  border-color: rgba(255,253,249,.16);
  border-radius: 17px;
}
.ob-city:hover, .ob-style:hover { background: rgba(255,253,249,.15); border-color: var(--acc); }
/* Kurulum iki temada da KOYU zeminde — ama seçenek kartlarının ve marka
   yazısının rengi açık temanın --ink'ine (KOYU) bağlı kalmıştı: açık temada
   "Hareketli / Dengeli / Sakin" ve "VESPIRA" koyu zeminde koyu, okunmuyordu.
   Kontrast CI yarı saydam kartı düz beyaz sandığı için bunu göremiyordu;
   saydamlık eşiği düzeltilince yakalandı (2026-09-11). */
.ob-city, .ob-style { color: #fffdf9; }
.ob-style .obs-txt span { color: rgba(255,253,249,.68); }
.onboard [class*="marka"] b { color: #fffdf9; }
.ob-search { border-radius: 17px; }
.ob-plan-badge { background: var(--acc); color: #fffaf5; }
.obp-kapak { border-radius: 22px; }
.obp-row { padding-block: 9px; }
.obp-thumb { border-radius: 13px; }

@media (min-width: 560px) and (min-height: 600px) {
  :root[data-shell="web"] .app { border-radius: 30px; }
}
@media (max-width: 420px) {
  .view-feed, .view-saved { padding-inline: 14px; }
  .cr-strip { margin-inline: -14px; padding-inline: 14px; }
  .row-card, .rc-img { width: 158px; }
  .rc-img { height: 166px; }
  .hero-name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .poi-card, .poi-hero, .nav-btn, .nav-ai-orb { transition: none !important; }
}

:root[data-tema="koyu"] {
  --ink: #f5f1e9;
  --ink-soft: #b7bdb5;
  --paper: #17231d;
  --card: #1e2d25;
  --line: #304238;
  --acc: #df8b65;
  --acc-deep: #f0a17d;
  --acc-ink: #241711;
  --acc-soft: #4a2e25;
  --acc-deeper: #f2b094;
}
:root[data-tema="koyu"] body { background: #0d1511; }
:root[data-tema="koyu"] .backdrop { background: #0d1511; }
:root[data-tema="koyu"] .app { background: var(--paper); }
:root[data-tema="koyu"] .topbar { background: rgba(23,35,29,.92); border-color: var(--line); }
:root[data-tema="koyu"] .search-field,
:root[data-tema="koyu"] .city-btn,
:root[data-tema="koyu"] .avatar-btn,
:root[data-tema="koyu"] .poi-card,
:root[data-tema="koyu"] .poi-hero,
:root[data-tema="koyu"] .bottom-nav { background: var(--card); }
:root[data-tema="koyu"] .nav-btn.active { background: var(--acc); color: var(--acc-ink); }

/* Premium editorial brief — the first screen answers "what should I do
   today?" before asking the traveller to browse the full catalogue. */
.daily-brief {
  margin: 2px 0 34px;
  padding: 2px 0 4px;
}
.daily-brief-head { padding: 4px 2px 16px; }
.daily-brief-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--acc-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.daily-brief-head h1 {
  max-width: 360px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.daily-brief-head p {
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 13px;
}
.daily-picks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.daily-picks .poi-hero {
  grid-row: auto;
  height: auto;
  margin: 0;
}
.daily-picks .poi-card {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 9px;
}
.daily-picks .poi-thumb {
  width: 72px;
  height: 72px;
  border-radius: 13px;
}
.daily-picks .poi-name { font-size: 15px; }
.daily-picks .poi-blurb { display: none; }
.daily-picks .poi-meta { margin-top: 5px; font-size: 10px; }
.daily-picks .poi-card .save-btn { font-size: 16px; }

.sheet-verdict {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(200,111,77,.25);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--acc-soft), rgba(255,253,249,.35));
  color: var(--ink);
}
.sheet-note-mark {
  flex: none;
  color: var(--acc);
  font-size: 20px;
  line-height: 1;
}
.sheet-verdict b {
  display: block;
  margin-bottom: 3px;
  color: var(--acc-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sheet-note-copy {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.48;
}

:root[data-tema="koyu"] .daily-brief-head h1,
:root[data-tema="koyu"] .sheet-verdict { color: var(--ink); }
:root[data-tema="koyu"] .daily-picks .poi-card { background: var(--card); }

@media (max-width: 380px) {
  .daily-picks { display: flex; flex-direction: column; }
  .daily-picks .poi-hero { height: auto; }
  .daily-picks .poi-card { min-height: 88px; }
}
/* Atlas MVP — a small collectible loop that feels like part of the journal. */
.atlas-quest{margin:18px 0 22px;padding:20px;border:1px solid rgba(48,74,57,.14);border-radius:24px;background:linear-gradient(135deg,#20372d 0%,#315b49 58%,#c97852 160%);color:#fff;box-shadow:0 12px 30px rgba(31,55,43,.14);overflow:hidden;position:relative}
.atlas-quest:after{content:"✦";position:absolute;right:24px;top:8px;font-size:90px;line-height:1;color:rgba(255,244,214,.1);pointer-events:none}
.atlas-quest-head{display:flex;justify-content:space-between;gap:14px;position:relative;z-index:1}.atlas-quest-head h2{margin:5px 0 4px;font:600 23px/1.08 var(--font-display,Georgia,serif);letter-spacing:-.02em}.atlas-quest-head p{margin:0;max-width:280px;color:rgba(255,255,255,.7);font-size:12px;line-height:1.45}.atlas-kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#f2c990;font-weight:700}.atlas-spirit{width:58px;height:58px;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.13);font-size:31px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}.atlas-progress{height:4px;margin:18px 0 10px;background:rgba(255,255,255,.18);border-radius:8px;overflow:hidden;position:relative;z-index:1}.atlas-progress span{display:block;height:100%;background:#f2c990;border-radius:8px;transition:width .4s ease}.atlas-steps{display:grid;gap:6px;position:relative;z-index:1}.atlas-step{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:14px;background:rgba(255,255,255,.09);color:#fff;text-align:left;cursor:pointer;font:inherit}.atlas-step:hover{background:rgba(255,255,255,.16)}.atlas-step-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f2c990;color:#20372d;font-weight:800;font-size:12px;flex:0 0 auto}.atlas-step.is-done .atlas-step-num{background:#9ad0a4}.atlas-step b,.atlas-step small{display:block}.atlas-step b{font-size:12px;font-weight:650}.atlas-step small{margin-top:2px;color:rgba(255,255,255,.58);font-size:10px}.atlas-arrow{margin-left:auto;font-size:20px;color:rgba(255,255,255,.55)}.atlas-open{position:relative;z-index:1;margin-top:13px;padding:0;border:0;background:none;color:#f2c990;font-weight:750;font-size:12px;cursor:pointer}.atlas-open span{font-size:16px;margin-left:4px}.atlas-empty{display:flex;gap:10px;align-items:center;padding:15px;background:var(--surface,#fff);color:var(--ink,#20372d);box-shadow:none}.atlas-empty p{margin:0;font-size:13px}.atlas-profile-card{display:flex;align-items:center;gap:12px;width:100%;margin:15px 0 18px;padding:14px;border:1px solid rgba(48,74,57,.14);border-radius:18px;background:linear-gradient(105deg,#edf3e9,#fff9ed);color:var(--ink,#20372d);text-align:left;cursor:pointer}.atlas-profile-orb{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#315b49;color:#f2c990;font-size:22px;flex:0 0 auto}.atlas-profile-copy{display:grid;gap:3px}.atlas-profile-copy b{font:600 17px/1.1 var(--font-display,Georgia,serif)}.atlas-profile-copy small{font-size:11px;color:#6d776d}.atlas-profile-arrow{margin-left:auto;font-size:22px;color:#c97852}.atlas-modal{padding:8px 2px 2px}.atlas-modal-title{display:flex;align-items:center;gap:11px}.atlas-modal-title h3{margin:3px 0 0;font:600 24px var(--font-display,Georgia,serif);color:var(--ink,#20372d)}.atlas-modal-sub{color:#6d776d;font-size:13px;margin:14px 0}.atlas-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0 18px}.atlas-spirit-card{min-height:100px;padding:12px;border:1px solid #e2e7de;border-radius:16px;background:#f7f8f2;display:grid;align-content:center;gap:3px;text-align:center;filter:grayscale(1);opacity:.65}.atlas-spirit-card.is-found{background:#fff5df;border-color:#e7c58f;filter:none;opacity:1;animation:atlas-pop .45s ease}.atlas-spirit-card>span{font-size:28px}.atlas-spirit-card b{font-size:12px;color:var(--ink,#20372d)}.atlas-spirit-card small{font-size:10px;color:#7a8178}.atlas-share{width:100%}.atlas-celebrate{text-align:center;padding:10px 0 2px}.atlas-burst{width:94px;height:94px;margin:0 auto 14px;display:grid;place-items:center;border-radius:30px;background:linear-gradient(145deg,#315b49,#d78a58);font-size:50px;box-shadow:0 14px 28px rgba(49,91,73,.2);animation:atlas-pop .6s cubic-bezier(.2,1.4,.4,1)}.atlas-celebrate h3{margin:8px 0 5px;font:600 25px var(--font-display,Georgia,serif);color:var(--ink,#20372d)}.atlas-celebrate p{margin:0 0 18px;color:#6d776d;font-size:13px}@keyframes atlas-pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
/* FUTURE FIELD INTERFACE */
:root{--future-mint:#b8f1c8;--future-coral:#ff9d79;--future-glow:rgba(135,239,171,.22)}
.app{isolation:isolate}.app:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 10% 8%,rgba(172,240,186,.22),transparent 24%),radial-gradient(circle at 92% 32%,rgba(255,157,121,.13),transparent 26%);animation:future-drift 18s ease-in-out infinite alternate}.app:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:8;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 68%);mix-blend-mode:soft-light}
.topbar{background:color-mix(in srgb,var(--paper) 76%,transparent)!important;backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);border-bottom-color:rgba(184,241,200,.18)!important;box-shadow:0 1px 0 rgba(255,255,255,.06),0 14px 32px rgba(14,30,23,.06)}.wm-mark{box-shadow:0 0 0 5px rgba(184,241,200,.08),0 0 24px rgba(184,241,200,.25);animation:future-pulse 3.8s ease-in-out infinite}.search-field,.city-btn,.avatar-btn{border-color:rgba(48,74,57,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 20px rgba(26,50,38,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.search-field:focus-within{transform:translateY(-2px);border-color:rgba(91,167,111,.5)!important;box-shadow:0 0 0 4px rgba(135,239,171,.13),0 12px 26px rgba(25,74,46,.1)}
.view-feed>*{animation:future-rise .65s cubic-bezier(.2,.75,.25,1) both}.daily-brief{position:relative;padding:12px 0 28px}.daily-brief:before{content:"";position:absolute;left:-24px;right:-24px;top:-24px;height:240px;z-index:-1;background:radial-gradient(ellipse at 16% 10%,rgba(170,236,184,.24),transparent 58%);pointer-events:none}.daily-brief-head h1{font-size:clamp(31px,8.8vw,46px);max-width:520px;text-wrap:balance;letter-spacing:-.055em}.daily-brief-head h1:after{content:"";display:inline-block;width:9px;height:9px;margin:0 0 6px 7px;border-radius:50%;background:var(--future-coral);box-shadow:0 0 0 5px rgba(255,157,121,.12),0 0 18px rgba(255,157,121,.55);animation:future-pulse 2.2s infinite}.daily-picks{gap:15px}.daily-picks .poi-hero,.daily-picks .poi-card{overflow:hidden;border-color:rgba(48,74,57,.12);box-shadow:0 16px 34px rgba(33,55,43,.09);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}.daily-picks .poi-hero{position:relative}.daily-picks .poi-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:future-sheen 6s ease-in-out infinite}.daily-picks .poi-hero:hover,.daily-picks .poi-card:hover{transform:translateY(-7px) rotateX(1deg);box-shadow:0 24px 46px rgba(33,55,43,.16)}
.atlas-quest{border-color:rgba(184,241,200,.24);background:radial-gradient(circle at 92% 0%,rgba(184,241,200,.2),transparent 28%),linear-gradient(132deg,#102a24 0%,#1e5141 55%,#a95f4b 140%);box-shadow:0 20px 46px rgba(20,57,43,.2),inset 0 1px 0 rgba(255,255,255,.13)}.atlas-quest:before{content:"";position:absolute;width:180px;height:180px;right:-90px;bottom:-100px;border:1px solid rgba(184,241,200,.3);border-radius:50%;box-shadow:0 0 0 18px rgba(184,241,200,.05),0 0 0 36px rgba(184,241,200,.03);animation:future-orbit 12s linear infinite}.atlas-spirit{box-shadow:0 0 0 1px rgba(184,241,200,.22),0 0 28px rgba(184,241,200,.18),inset 0 0 20px rgba(255,255,255,.08);animation:future-float 4.8s ease-in-out infinite}.atlas-step{border:1px solid transparent;transition:background .22s ease,border-color .22s ease,transform .22s ease}.atlas-step:hover{border-color:rgba(184,241,200,.35);transform:translateX(4px)}.atlas-step-num{box-shadow:0 0 0 4px rgba(242,201,144,.08),0 0 15px rgba(242,201,144,.2)}
.bottom-nav{background:color-mix(in srgb,var(--paper) 78%,transparent)!important;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-top-color:rgba(184,241,200,.16)!important;box-shadow:0 -12px 30px rgba(14,30,23,.08)}.nav-btn.active{background:linear-gradient(135deg,var(--ink),#37624e)!important;box-shadow:0 7px 22px rgba(39,77,57,.28),inset 0 1px 0 rgba(255,255,255,.16)!important}.nav-ai-orb{box-shadow:0 0 0 6px rgba(184,241,200,.08),0 0 30px rgba(184,241,200,.35),0 10px 24px rgba(40,84,58,.28)!important;animation:future-orb 3.2s ease-in-out infinite!important}
@keyframes future-drift{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(1%,1%,0) scale(1.04)}}@keyframes future-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes future-pulse{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.14);opacity:1}}@keyframes future-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}@keyframes future-orbit{to{transform:rotate(360deg)}}@keyframes future-sheen{0%,45%,100%{transform:translateX(-120%)}65%{transform:translateX(120%)}}@keyframes future-orb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.app:before,.wm-mark,.daily-brief-head h1:after,.daily-picks .poi-hero:after,.atlas-spirit,.atlas-quest:before,.nav-ai-orb{animation:none!important}.view-feed>*{animation:none!important}}
/* ── Vespira Nocturne Atlas — YALNIZ KOYU TEMA ─────────────────────
   İlk sürüm bu paleti koşulsuz :root'a yazıyordu: profilden "Açık" seçen
   kullanıcı da neredeyse siyah bir ekran görüyordu (ölçüldü: tema=acik
   iken --paper #091117, body rgb(4,8,13)). Ayarladığımız bir tercih
   çalışmıyordu. Blok artık :root[data-tema=koyu] altında; açık tema
   kendi paleti + FUTURE FIELD katmanıyla geri döndü. */
:root[data-tema=koyu]{
  --ink:#e8f1f7;--ink-soft:#9aaebe;--paper:#091117;--card:#111e29;--line:#263746;
  --acc:#7de8ff;--acc-deep:#44b8d1;--acc-ink:#06131b;--acc-soft:rgba(125,232,255,.12);
  --focus:#c0a6ff;--acc-deeper:#9befff;--shadow:0 18px 48px rgba(0,0,0,.26);
  --clay:0 1px 0 rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.22);
  --c-see:#76a7ff;--c-do:#67e5b0;--c-eat:#ff997f;--c-shop:#f7c96b;--c-night:#b9a0ff;--c-ess:#7de8ff;
  --c-see-soft:rgba(118,167,255,.14);--c-do-soft:rgba(103,229,176,.13);--c-eat-soft:rgba(255,153,127,.14);--c-shop-soft:rgba(247,201,107,.14);--c-night-soft:rgba(185,160,255,.15);--c-ess-soft:rgba(125,232,255,.13);
}
:root[data-tema=koyu] body{background:#04080d;color:var(--ink)}
:root[data-tema=koyu] .backdrop{background:radial-gradient(ellipse 65% 60% at 12% 4%,rgba(55,126,170,.18),transparent),radial-gradient(ellipse 55% 45% at 92% 88%,rgba(122,79,199,.16),transparent),repeating-radial-gradient(circle at 70% 30%,transparent 0 38px,rgba(125,232,255,.025) 38px 39px)}
:root[data-tema=koyu] .app{background:radial-gradient(100% 42% at 75% -8%,rgba(47,126,153,.16),transparent),radial-gradient(80% 40% at 0 100%,rgba(92,62,158,.10),transparent),var(--paper)}
:root[data-tema=koyu] .topbar{background:rgba(9,17,23,.76)!important;border-bottom:1px solid rgba(125,232,255,.12);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)}
:root[data-tema=koyu] .wordmark,:root[data-tema=koyu] .city-btn,:root[data-tema=koyu] .avatar-btn{color:var(--ink)}
:root[data-tema=koyu] .city-btn,:root[data-tema=koyu] .avatar-btn,:root[data-tema=koyu] .search-field{background:rgba(20,32,43,.82);border-color:var(--line)!important;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.18)}
:root[data-tema=koyu] .city-btn:hover,:root[data-tema=koyu] .avatar-btn:hover,:root[data-tema=koyu] .search-field:focus-within{border-color:var(--acc)!important}
:root[data-tema=koyu] .search-input{color:var(--ink)}
:root[data-tema=koyu] .search-input::placeholder{color:#708293}
:root[data-tema=koyu] .search-ico{color:var(--acc)}
:root[data-tema=koyu] .cat-chip{background:rgba(17,30,41,.86)!important;border-color:var(--line);color:var(--ink-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
:root[data-tema=koyu] .cat-chip.active,:root[data-tema=koyu] .cat-chip[data-cat=all].active{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--acc-ink)!important;box-shadow:0 0 0 4px rgba(125,232,255,.10),0 8px 24px rgba(68,184,209,.18)}
:root[data-tema=koyu] .view-feed,:root[data-tema=koyu] .view-saved{color:var(--ink)}
:root[data-tema=koyu] .daily-brief-head h1{color:var(--ink);text-shadow:0 0 32px rgba(125,232,255,.12)}
:root[data-tema=koyu] .daily-brief-kicker{color:var(--acc)!important}
:root[data-tema=koyu] .daily-brief-head p{color:var(--ink-soft)}
:root[data-tema=koyu] .daily-brief:before{background:radial-gradient(ellipse at 20% 8%,rgba(125,232,255,.18),transparent 56%)}
:root[data-tema=koyu] .poi-hero,:root[data-tema=koyu] .poi-card,:root[data-tema=koyu] .row-card{background:linear-gradient(145deg,rgba(23,38,51,.94),rgba(13,23,32,.96));border:1px solid rgba(125,232,255,.10);color:var(--ink);box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)}
:root[data-tema=koyu] .poi-hero:hover,:root[data-tema=koyu] .poi-card:hover,:root[data-tema=koyu] .row-card:hover{border-color:rgba(125,232,255,.34);box-shadow:0 24px 52px rgba(0,0,0,.34),0 0 28px rgba(125,232,255,.08)}
:root[data-tema=koyu] .poi-name,:root[data-tema=koyu] .hero-name{color:var(--ink)}
:root[data-tema=koyu] .poi-blurb,:root[data-tema=koyu] .poi-meta,:root[data-tema=koyu] .hero-sub{color:var(--ink-soft)}
:root[data-tema=koyu] .hero-meta{color:var(--acc)!important}
:root[data-tema=koyu] .save-btn{color:#718394}
:root[data-tema=koyu] .save-btn.saved{color:var(--acc)}
:root[data-tema=koyu] .atlas-quest{background:radial-gradient(circle at 90% 0,rgba(192,166,255,.22),transparent 30%),linear-gradient(140deg,#101d31,#172b43 52%,#312458);border-color:rgba(192,166,255,.30);box-shadow:0 22px 55px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.10)}
:root[data-tema=koyu] .atlas-kicker{color:var(--acc)!important}
:root[data-tema=koyu] .atlas-spirit{background:rgba(125,232,255,.10);box-shadow:0 0 0 1px rgba(125,232,255,.28),0 0 28px rgba(125,232,255,.16)}
:root[data-tema=koyu] .atlas-step{background:rgba(255,255,255,.06);color:var(--ink)}
:root[data-tema=koyu] .atlas-step:hover{background:rgba(125,232,255,.10);border-color:rgba(125,232,255,.38)}
:root[data-tema=koyu] .atlas-step small{color:var(--ink-soft)}
:root[data-tema=koyu] .atlas-step-num{background:var(--acc);color:var(--acc-ink)}
:root[data-tema=koyu] .atlas-step.is-done .atlas-step-num{background:var(--c-do);color:#061a15}
:root[data-tema=koyu] .atlas-open{color:var(--acc)}
:root[data-tema=koyu] .bottom-nav{background:rgba(12,22,30,.86)!important;border-color:rgba(125,232,255,.16)!important;box-shadow:0 -12px 38px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)}
:root[data-tema=koyu] .nav-btn{color:#718394}
:root[data-tema=koyu] .nav-btn.active{background:linear-gradient(135deg,#17384b,#23687a)!important;color:#dffaff;box-shadow:0 8px 26px rgba(37,135,161,.27),inset 0 1px 0 rgba(255,255,255,.16)!important}
:root[data-tema=koyu] .nav-ai-orb{background:linear-gradient(145deg,#9f8aff,#62daf5)!important;color:#07131b;box-shadow:0 0 0 6px rgba(125,232,255,.08),0 0 34px rgba(125,232,255,.38),0 12px 28px rgba(0,0,0,.32)!important}
:root[data-tema=koyu] .nav-badge{background:var(--c-eat)}
:root[data-tema=koyu] .sheet-scrim,:root[data-tema=koyu] .scrim{background:rgba(2,7,12,.72)}
:root[data-tema=koyu] .sheet,:root[data-tema=koyu] .modal,:root[data-tema=koyu] .city-menu,:root[data-tema=koyu] .suggest-box,:root[data-tema=koyu] .guide-panel{background:linear-gradient(150deg,#13222e,#0c151d);border-color:#2b4253;color:var(--ink);box-shadow:0 -18px 60px rgba(0,0,0,.5)}
:root[data-tema=koyu] .sheet h2,:root[data-tema=koyu] .modal h3{color:var(--ink)}
:root[data-tema=koyu] .sheet-area,:root[data-tema=koyu] .modal p{color:var(--ink-soft)}
:root[data-tema=koyu] .sheet-facts{color:var(--ink-soft)}
:root[data-tema=koyu] .sheet-tags .tag{background:rgba(125,232,255,.10);border-color:rgba(125,232,255,.22);color:var(--acc)}
:root[data-tema=koyu] .sheet-tip,:root[data-tema=koyu] .sheet-verdict{background:linear-gradient(135deg,rgba(125,232,255,.10),rgba(192,166,255,.09));border-color:rgba(125,232,255,.25);color:var(--ink)}
:root[data-tema=koyu] .sheet-note-copy{color:var(--ink-soft)}
:root[data-tema=koyu] .btn-primary,:root[data-tema=koyu] .onboard-cta{background:linear-gradient(135deg,#7de8ff,#6dbeff)!important;color:#06131b!important;border-color:transparent!important;box-shadow:0 12px 30px rgba(86,197,230,.25)}
:root[data-tema=koyu] .btn-ghost{background:rgba(125,232,255,.08);border-color:rgba(125,232,255,.28);color:var(--acc)}
:root[data-tema=koyu] .pf-title,:root[data-tema=koyu] .pf-group-label{color:var(--ink-soft)}
:root[data-tema=koyu] .pf-hero,:root[data-tema=koyu] .pf-card,:root[data-tema=koyu] .pf-card2,:root[data-tema=koyu] .pf-stats,:root[data-tema=koyu] .pf-live-tile,:root[data-tema=koyu] .atlas-profile-card{background:linear-gradient(145deg,rgba(23,38,51,.95),rgba(12,21,29,.96));border-color:rgba(125,232,255,.12);color:var(--ink);box-shadow:var(--clay)}
:root[data-tema=koyu] .pf-id h2,:root[data-tema=koyu] .pf-stat b,:root[data-tema=koyu] .pf-item-label,:root[data-tema=koyu] .pf-live-tile b{color:var(--ink)}
:root[data-tema=koyu] .pf-stat span,:root[data-tema=koyu] .pf-live-tile span:last-child,:root[data-tema=koyu] .pf-item-val{color:var(--ink-soft)}
:root[data-tema=koyu] .atlas-profile-card{background:linear-gradient(110deg,#132b3b,#172338)}
:root[data-tema=koyu] .atlas-profile-copy small{color:var(--ink-soft)}
:root[data-tema=koyu] .atlas-profile-orb{background:linear-gradient(145deg,#64d9ed,#8f7cf4);color:#07131b}
:root[data-tema=koyu] .onboard{background:radial-gradient(ellipse at 90% 0,rgba(125,232,255,.24),transparent 42%),radial-gradient(ellipse at 0 100%,rgba(143,124,244,.22),transparent 42%),#091117}
:root[data-tema=koyu] .onboard-card p{color:var(--ink-soft)}
:root[data-tema=koyu] .ob-city,:root[data-tema=koyu] .ob-style{background:rgba(255,255,255,.06);border-color:rgba(125,232,255,.18)}
:root[data-tema=koyu] .ob-city:hover,:root[data-tema=koyu] .ob-style:hover{background:rgba(125,232,255,.12);border-color:var(--acc)}
:root[data-tema=koyu]{--ink:#e8f1f7;--ink-soft:#9aaebe;--paper:#091117;--card:#111e29;--line:#263746;--acc:#7de8ff;--acc-deep:#44b8d1;--acc-ink:#06131b;--acc-soft:rgba(125,232,255,.12);--focus:#c0a6ff;--acc-deeper:#9befff}
:root[data-tema=koyu] body{background:#04080d}
:root[data-tema=koyu] .app{background:var(--paper)}

/* Kart açılma animasyonu. JS (initFutureMotion) .motion-card sınıfını
   ekliyordu ama CSS karşılığı YOKTU: kod çalışıyor, hiçbir şey olmuyordu.
   Üstelik kartlara satır içi transition-delay yazdığı için hover geri
   bildirimi gecikiyordu. GÜVENLİ KURGU: sınıfı ekleyen ile gözlemleyen
   aynı kod; IntersectionObserver yoksa ya da hareket azaltma açıksa
   fonksiyon erken dönüyor, sınıf hiç eklenmiyor — yani içerik asla
   görünmez kalmıyor. */
.motion-card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.25,1)}
.motion-card.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.motion-card{opacity:1!important;transform:none!important}}
/* Retention MVP: the city compass and three-stop route. */
.activation-start,.activation-route{position:relative;margin:10px 0 24px;padding:20px;border:1px solid rgba(125,232,255,.20);border-radius:26px;background:radial-gradient(circle at 96% 0,rgba(125,232,255,.15),transparent 34%),linear-gradient(145deg,rgba(17,36,51,.98),rgba(12,22,32,.98));box-shadow:0 20px 48px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;color:var(--ink)}.activation-start:after{content:"⌁";position:absolute;right:18px;top:-22px;font:120px/1 Georgia;color:rgba(125,232,255,.07);transform:rotate(-18deg)}.activation-start{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}.activation-start-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(145deg,#7de8ff,#9a86ff);color:#07131b;font-size:28px;box-shadow:0 0 28px rgba(125,232,255,.25)}.activation-kicker{display:block;color:var(--acc);font:700 9px/1.2 var(--mono,monospace);letter-spacing:.15em}.activation-start h2,.activation-route h2{margin:6px 0 5px;font:600 clamp(20px,5.4vw,27px)/1.08 var(--display,Georgia,serif);letter-spacing:-.035em}.activation-start p,.activation-route p{margin:0;color:var(--ink-soft);font-size:12px;line-height:1.45;max-width:290px}.activation-start-btn{grid-column:2;margin-top:4px;justify-self:start;padding:11px 15px;border:1px solid rgba(125,232,255,.38);border-radius:999px;background:rgba(125,232,255,.12);color:var(--acc);font-weight:750;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}.activation-start-btn:hover{transform:translateX(3px);background:rgba(125,232,255,.2);box-shadow:0 0 22px rgba(125,232,255,.16)}.activation-start-btn span{margin-left:7px;font-size:16px}.activation-route-top{display:flex;justify-content:space-between;gap:12px}.activation-orbit{display:grid;place-items:center;width:52px;height:52px;flex:none;border:1px solid rgba(125,232,255,.35);border-radius:18px;color:var(--acc);font-size:24px;box-shadow:0 0 24px rgba(125,232,255,.12);animation:future-float 4.8s ease-in-out infinite}.activation-progress{height:4px;margin:17px 0 9px;border-radius:9px;background:rgba(255,255,255,.11);overflow:hidden}.activation-progress span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--acc),#bba2ff);transition:width .45s ease}.activation-stops{display:grid;gap:7px}.activation-stop{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid transparent;border-radius:15px;background:rgba(255,255,255,.055);color:var(--ink);text-align:left;cursor:pointer;transition:.22s ease}.activation-stop:hover{transform:translateX(3px);border-color:rgba(125,232,255,.32);background:rgba(125,232,255,.1)}.activation-stop-index{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:10px;background:rgba(125,232,255,.12);color:var(--acc);font:700 11px var(--mono,monospace)}.activation-stop.is-done .activation-stop-index{background:rgba(103,229,176,.2);color:var(--c-do)}.activation-stop-copy{min-width:0;display:grid;gap:3px}.activation-stop-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.activation-stop-copy small{color:var(--ink-soft);font-size:10px}.activation-stop-arrow{margin-left:auto;color:var(--acc);font-size:18px}.activation-reset{margin-top:12px;border:0;background:none;color:var(--ink-soft);font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.activation-modal h3{margin:7px 0;color:var(--ink);font:600 25px/1.08 var(--display,Georgia,serif);letter-spacing:-.035em}.activation-modal>p{margin-bottom:18px}.activation-intents{display:grid;gap:8px}.activation-intents button{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);color:var(--ink);text-align:left;cursor:pointer;transition:.22s ease}.activation-intents button:hover{border-color:var(--acc);background:rgba(125,232,255,.1);transform:translateX(3px)}.activation-intents button span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(125,232,255,.13);color:var(--acc);font-size:20px}.activation-intents button b{flex:1;font-size:13px}.activation-intents button i{color:var(--acc);font-size:17px;font-style:normal}
@media(max-width:380px){.activation-start{grid-template-columns:1fr}.activation-start-btn{grid-column:1}.activation-start-icon{width:38px;height:38px;font-size:23px}.activation-start h2,.activation-route h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.activation-orbit{animation:none}.activation-stop,.activation-start-btn{transition:none}}
.activation-stop-wrap{display:flex;gap:6px;align-items:stretch}.activation-stop-wrap .activation-stop{flex:1;width:auto}.activation-stop-add{width:38px;border:1px solid rgba(125,232,255,.18);border-radius:13px;background:rgba(125,232,255,.07);color:var(--acc);font-size:19px;cursor:pointer;transition:.2s ease}.activation-stop-add:hover{background:rgba(125,232,255,.18);border-color:var(--acc);transform:scale(1.04)}
.city-pulse{margin:8px 0 24px;padding:16px 17px;border:1px solid rgba(192,166,255,.22);border-radius:22px;background:linear-gradient(120deg,rgba(43,34,77,.72),rgba(16,32,48,.92));box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);color:var(--ink)}.city-pulse-line{display:flex;align-items:center;gap:7px;color:#bba2ff;font:700 9px var(--mono,monospace);letter-spacing:.13em}.city-pulse-dot{width:6px;height:6px;border-radius:50%;background:#bba2ff;box-shadow:0 0 0 5px rgba(187,162,255,.10),0 0 15px rgba(187,162,255,.7);animation:future-pulse 2.5s infinite}.city-pulse-body{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:12px}.city-pulse h2{margin:0 0 4px;font:600 21px/1.1 var(--display,Georgia,serif)}.city-pulse p{margin:0;max-width:320px;color:var(--ink-soft);font-size:12px;line-height:1.45}.city-pulse button{width:38px;height:38px;flex:none;border:1px solid rgba(192,166,255,.35);border-radius:13px;background:rgba(187,162,255,.12);color:#d6caff;font-size:20px;cursor:pointer;transition:.2s}.city-pulse button:hover{transform:translate(2px,-2px);background:rgba(187,162,255,.22);box-shadow:0 0 22px rgba(187,162,255,.18)}
.activation-route-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.activation-share{border:1px solid rgba(125,232,255,.24);border-radius:999px;padding:7px 11px;background:rgba(125,232,255,.07);color:var(--acc);font-size:11px;cursor:pointer}.activation-route-actions .activation-reset{margin-top:0}.activation-preferences{display:grid;gap:8px;margin:14px 0 16px}.activation-preferences label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-soft);font-size:12px}.activation-preferences select{min-width:125px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.06);color:var(--ink);font:inherit}.activation-preferences option{background:#13222e;color:var(--ink)}
/* Retention MVP — AÇIK TEMA. İlk sürüm kartları koyu gradyana sabitlemişti
   ama metin var(--ink) (açık temada KOYU) → açık temada koyu-üstüne-koyu,
   okunmaz. Koyu gradyan artık yalnız koyu temada; açıkta yüzey tokenları. */
:root:not([data-tema=koyu]) .activation-start,:root:not([data-tema=koyu]) .activation-route{background:var(--card);border-color:var(--line);box-shadow:0 12px 30px rgba(33,51,43,.08)}
:root:not([data-tema=koyu]) .activation-start:after{color:rgba(33,51,43,.05)}
:root:not([data-tema=koyu]) .activation-kicker{color:var(--ink-soft)}
:root:not([data-tema=koyu]) .activation-stop{background:rgba(33,51,43,.045)}
:root:not([data-tema=koyu]) .activation-stop:hover{background:rgba(33,51,43,.08);border-color:var(--line)}
:root:not([data-tema=koyu]) .activation-stop-index{background:rgba(33,51,43,.08);color:var(--ink)}
:root:not([data-tema=koyu]) .activation-progress{background:rgba(33,51,43,.1)}
:root:not([data-tema=koyu]) .activation-start-btn{background:var(--ink);border-color:var(--ink);color:var(--card)}
:root:not([data-tema=koyu]) .activation-share,:root:not([data-tema=koyu]) .activation-stop-add{background:transparent;border-color:var(--line);color:var(--ink)}
:root:not([data-tema=koyu]) .activation-preferences option{background:#fff;color:#21332b}
.activation-stop-copy small{line-height:1.35}
.activation-stop-add.is-done{opacity:.75}
.activation-intents button.is-suggested{border-color:var(--acc)}
.activation-empty{margin-top:8px!important;padding:8px 10px;border-radius:10px;background:rgba(200,111,77,.1);color:var(--ink)!important}
.activation-empty p{margin:0}.activation-empty p+button{margin-top:8px}

/* Bottom-layer geometry: only one strip owns the space above bottom-nav.
   Toasts sit above that reserved band so they never cover route/task actions. */
:root{--bottom-nav-clear:calc(84px + env(safe-area-inset-bottom));--strip-clear:calc(154px + env(safe-area-inset-bottom))}
#gorevSerit,#kurSerit{bottom:var(--bottom-nav-clear)!important;z-index:62}
.toast{position:fixed!important;left:50%!important;bottom:var(--strip-clear)!important;z-index:460!important;max-width:min(92vw,420px)}
body:has(#kurSerit.show) #gorevSerit,body:has(#kurSerit.is-visible) #gorevSerit{visibility:hidden;opacity:0;pointer-events:none}
body:has(#gorevSerit.show) #kurSerit,body:has(#gorevSerit.is-visible) #kurSerit{visibility:hidden;opacity:0;pointer-events:none}
@media(max-height:700px){:root{--strip-clear:calc(142px + env(safe-area-inset-bottom))}.toast{max-height:24vh;overflow:auto}}

/* Mobile geometry contract: five equal targets, no fixed-width overflow. */
.bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.bottom-nav .nav-btn,.bottom-nav .nav-ai{width:auto;min-width:0;min-height:46px;margin:0}
.bottom-nav .nav-icon{width:100%;min-width:0}
.bottom-nav .nav-ai-orb{width:44px;height:44px;margin-top:0}
.view-profile{padding:20px 18px 28px}
.daily-picks .poi-body{min-width:0;flex:1}
.daily-picks .poi-thumb{flex:0 0 72px}
.guide-close{min-width:44px;min-height:44px}
#gorevSerit{position:relative;inset:auto!important;width:auto;flex:none;margin:0 14px 12px;z-index:2}
#gorevSerit[hidden],#kurSerit[hidden]{display:none!important}
.gs-git,.gs-kapat{min-width:44px;min-height:44px;flex-shrink:0}
@media(max-width:420px){.view-profile{padding-inline:14px}}
@media(max-height:500px){#gorevSerit{display:none}}

/* First-value screen: real choices before decorative introductions. */
.daily-brief{padding:0 0 20px}
.daily-brief-head{margin-bottom:12px}
.daily-brief-head h1{font-size:clamp(23px,6vw,29px);line-height:1.15;margin:5px 0 12px;letter-spacing:-.025em}
.daily-brief-head h1:after{display:none}
.daily-route-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:16px;background:var(--ink);color:var(--paper);font:600 14px/1.3 var(--body);cursor:pointer}
.daily-route-btn:disabled{opacity:.65;cursor:wait}
.daily-route-btn:focus-visible,.first-pick-open:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
:root[data-tema=koyu] .daily-route-btn{background:var(--acc);color:var(--acc-ink)}
.daily-picks{gap:10px}
.daily-picks .first-pick{padding:10px;align-items:center}
.daily-picks .first-pick .poi-blurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.4;margin:3px 0}
.daily-picks .first-pick .poi-name{white-space:normal;overflow-wrap:anywhere}
.first-pick-open{border:0;background:none;color:inherit;font:inherit;line-height:1.25;text-align:start;padding:0;min-height:44px;cursor:pointer}
.daily-picks .first-pick .save-btn{min-width:44px;min-height:44px;flex:none}
.daily-picks .first-pick .poi-meta{font-size:11px;line-height:1.4;margin-top:4px}
.daily-picks .first-pick{animation:none!important;opacity:1;transform:none}
.daily-picks .first-pick:hover{transform:none}
.quality-note{margin:8px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink-soft);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.activation-stop-wrap{display:grid;grid-template-columns:minmax(0,1fr) 44px}
.activation-route{background:var(--card);border-color:var(--line)}
.activation-route .quality-note{margin:10px 0;max-width:none}
.activation-stop{text-align:start}
.activation-stop-copy small{overflow-wrap:anywhere}
.activation-stop-wrap .activation-stop{min-width:0}
.activation-stop-wrap .activation-stop-add{width:44px;min-height:44px}
.activation-visit{grid-column:1/-1;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:10px 14px;text-align:start;white-space:normal;overflow-wrap:anywhere}
.activation-visit[aria-pressed="true"]{border-color:var(--acc);font-weight:700}
.activation-route-actions{flex-wrap:wrap}
.activation-resume{display:block;width:100%;min-height:44px;margin-top:12px;white-space:normal;overflow-wrap:anywhere;font-size:13px;text-align:start}
.activation-route-actions button{min-height:44px;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.illustration-heading{margin:0 0 18px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.illustration-heading img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;max-height:220px}
.illustration-heading figcaption{padding:9px 12px;color:var(--ink-soft);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.illustration-badge{font-size:9px!important;max-width:100%;white-space:normal;line-height:1.2;background:rgba(10,22,30,.86);color:#fff}
.poi-thumb.has-img{position:relative}
.poi-thumb .illustration-badge{left:2px;right:2px;bottom:2px;padding:3px;text-align:center;border-radius:5px;letter-spacing:0}
.illustration-detail-label{display:block;padding:10px 14px;color:var(--ink);background:var(--card);font-size:12px;line-height:1.4}

/* Açılış ekranı kategori satırı bandı: illüstrasyon satır başına BİR kez,
   akışı aşağı itmesin diye alçak. (Tam başlık yalnız kategori ekranında.) */
.illustration-heading.is-compact{margin:0 0 10px;border-radius:14px}
.illustration-heading.is-compact img{max-height:96px}
.illustration-heading.is-compact figcaption{padding:6px 10px;font-size:11px}