/* Gezi Botu — an Airbnb-like light surface: white cards on warm near-white,
   soft grey rules, one coral accent. Deliberately light-only: the page is a
   travel guide, and the photography and maps read best on paper-white. */
:root {
  color-scheme: light;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f7f7f7;
  --ink:#222222; --ink-2:#5e5e5e; --ink-3:#8a8a8a;
  --line:#ebebeb; --line-2:#dddddd;
  --accent:#ff385c; --accent-soft:#fff5f6;
  --ok:#008a05; --ok-bg:#eef8ee;
  --warn:#b4690e; --warn-bg:#fdf4e7;
  --bad:#c13515; --bad-bg:#fdefec;
  --shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:0 2px 4px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.10);
  --display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --r:12px;
}


/* The hidden attribute must win over any component's own display value. */
[hidden] { display: none !important; }

* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--ink); font:15px/1.55 var(--body);
  -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-.02em; }
h1 { font-size:26px; } h2 { font-size:18px; } h3 { font-size:15px; }
p { margin:0 0 10px; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--ink-2); font-size:13.5px; }
.eyebrow { font:600 11px var(--body); text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); }
.lede { font-size:16px; line-height:1.5; }
.lede-sm { color:var(--ink-2); margin:6px 0 16px; max-width:62ch; }

/* ---- chrome ---- */
header { position:sticky; top:env(safe-area-inset-top,0px); z-index:500;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.bar { max-width:1260px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { font-family:var(--display); font-weight:700; font-size:17px;
  display:flex; align-items:center; gap:8px; }
.brand i { width:9px; height:9px; border-radius:50%; background:var(--accent); }
nav { display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; }
nav button { background:transparent; border:0; color:var(--ink-2); cursor:pointer;
  font:500 14px var(--body); padding:7px 13px; border-radius:8px; }
nav button:hover { background:var(--surface-2); color:var(--ink); }
nav button[aria-current="page"] { background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
main { max-width:1260px; margin:0 auto; padding:24px 20px 110px; }
.view { display:none; } .view.on { display:block; }
.stack { display:flex; flex-direction:column; gap:18px; }
.page-head { display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; }
.page-head .statusline { margin-left:auto; }
.sec-head { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.sec-head-sm { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }

/* ---- forms ---- */
.panel { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; }
.fields { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); }
.fields .span2 { grid-column:span 2; }
label.f { display:block; font:600 11px var(--body); text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-3); margin-bottom:5px; }
input[type=text],input[type=number],input[type=date] {
  width:100%; padding:9px 11px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--bg); color:var(--ink); font:400 14.5px var(--body); }
.actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.check { display:flex; gap:7px; align-items:center; font-size:14px; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border:0; border-radius:9px;
  padding:11px 24px; font:600 14.5px var(--body); cursor:pointer; margin-left:auto; }
button.primary:hover { filter:brightness(1.07); }
button.primary:disabled { opacity:.45; cursor:not-allowed; filter:none; }
button.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  border-radius:8px; padding:8px 15px; font:500 13.5px var(--body); cursor:pointer; }
button.ghost:hover { background:var(--surface-2); }
.linky { background:none; border:0; color:var(--accent); font:600 13px var(--body);
  cursor:pointer; padding:0; text-align:left; }
.linky:hover { text-decoration:underline; }

/* ---- badges ---- */
.badge { display:inline-flex; align-items:center; gap:5px; font:500 12px var(--body);
  padding:3px 9px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--ink-2); white-space:nowrap; }
.badge.good { background:var(--ok-bg); border-color:transparent; color:var(--ok); }
.badge.bad { background:var(--bad-bg); border-color:transparent; color:var(--bad); }
.badge.warn { background:var(--warn-bg); border-color:transparent; color:var(--warn); }
.badges { display:flex; gap:6px; flex-wrap:wrap; }

/* ---- trip plans ---- */
.plans { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:pointer; text-align:left; font:inherit; color:inherit;
  padding:0; display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.plan:hover { border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px); }
.plan img, .plan-noimg { width:100%; aspect-ratio:16/9; object-fit:cover;
  background:var(--surface-2); display:block; }
.plan-b { padding:13px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.plan-city { font:700 17px var(--display); letter-spacing:-.02em; }
.plan-dates { font-size:13.5px; color:var(--ink-2); }
.plan-foot { font-size:12px; margin-top:auto; }

/* ---- sights ---- */
.sights { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.sight { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; }
.sight img, .sight-noimg { width:100%; aspect-ratio:3/2; object-fit:cover;
  background:var(--surface-2); }
.sight-noimg { display:flex; align-items:center; justify-content:center; font-size:34px;
  color:var(--ink-3); }
.sight-b { padding:14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.sight-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sight-h h3 { flex:1; min-width:0; }
.sight-n { width:23px; height:23px; border-radius:50%; background:var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font:700 12px var(--body); flex:none; }
.sight p { font-size:14px; margin:0; }
.tip { background:var(--warn-bg); color:var(--warn); padding:8px 10px;
  border-radius:8px; font-size:13px; }
.sight .linky { margin-top:auto; }

/* ---- safety ---- */
.score-head { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.rating { display:flex; align-items:baseline; gap:2px; font-family:var(--display); }
.rating b { font-size:44px; line-height:1; letter-spacing:-.04em; }
.rating span { font-size:16px; color:var(--ink-3); }
.rating.good b { color:var(--ok); } .rating.warn b { color:var(--warn); }
.rating.bad b { color:var(--bad); }
.two { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.areas { display:flex; flex-direction:column; gap:9px; margin-top:9px; }
.area { background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 13px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; border-left:3px solid var(--line-2); }
.area.safe { border-left-color:var(--ok); }
.area.risk { border-left-color:var(--bad); }
.area:hover { box-shadow:var(--shadow); }
.area-h { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ev { font-size:12.5px; color:var(--ink-3); border-left:2px solid var(--line-2);
  padding-left:9px; }
.incidents { display:flex; flex-direction:column; gap:8px; margin-top:9px; }
.inc { padding:10px 12px; border-radius:9px; background:var(--warn-bg);
  color:var(--ink); cursor:pointer; font-size:14px; }
.inc b { color:var(--warn); }
.scams { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:9px; }
.scam { padding:11px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; }
.legend { display:flex; gap:12px; font-size:12px; color:var(--ink-2); margin-left:auto;
  flex-wrap:wrap; }
.legend span { display:flex; align-items:center; gap:5px; }
.sw { width:11px; height:11px; border-radius:3px; display:inline-block; }
.sw.ok { background:var(--ok); } .sw.bad { background:var(--bad); }
.sw.warn { background:var(--warn); }

/* ---- listing rows ---- */
.rows { display:flex; flex-direction:column; gap:10px; }
.row-item { display:grid; grid-template-columns:124px 1fr auto; gap:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px; cursor:pointer; text-align:left; width:100%; font:inherit;
  color:inherit; align-items:center; border-left:3px solid var(--line-2);
  transition:border-color .15s, box-shadow .15s; }
.row-item:hover { box-shadow:var(--shadow); }
.row-item.s-hi { border-left-color:var(--ok); }
.row-item.s-mid { border-left-color:var(--warn); }
.row-item.s-lo { border-left-color:var(--bad); }
.row-item img { width:124px; height:86px; object-fit:cover; border-radius:8px;
  background:var(--surface-2); }
.row-body { min-width:0; display:flex; flex-direction:column; gap:6px; }
.row-title { font:600 15.5px var(--body); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.row-score { display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.row-score b { font:700 28px var(--display); letter-spacing:-.03em; line-height:1; }
@media (max-width:640px) {
  .row-item { grid-template-columns:1fr auto; }
  .row-item img { display:none; }
  .fields .span2 { grid-column:span 1; }
}

/* ---- progress ---- */
.statusline { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none; }
.dot.running { background:var(--warn); animation:pulse 1.2s infinite; }
.dot.done { background:var(--ok); }
.dot.error,.dot.blocked { background:var(--bad); }
@keyframes pulse { 50% { opacity:.3; } }
@media (prefers-reduced-motion:reduce) { .dot.running { animation:none; } }
.track { height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden;
  width:110px; }
.track > i { display:block; height:100%; background:var(--ok); width:0;
  transition:width .45s ease; }
.note { padding:11px 13px; border-radius:9px; font-size:13.5px;
  background:var(--warn-bg); color:var(--warn); }
.note.err { background:var(--bad-bg); color:var(--bad); }
.empty { color:var(--ink-3); text-align:center; padding:44px 20px; font-size:14.5px; }

/* ---- maps ---- */
.map { height:420px; border-radius:10px; }
.map-panel { padding:14px; }
.leaflet-container { background:var(--surface-2); font-family:var(--body);
  border-radius:10px; }
.pin { border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 12px var(--body); color:#fff; background:var(--accent);
  box-shadow:0 1px 5px rgba(0,0,0,.45); width:100%; height:100%; }
.pin.sight { background:var(--warn); font-size:11px; }
.pin.ok { background:var(--ok); } .pin.bad { background:var(--bad); }
.pin.warn { background:var(--warn); }
.leaflet-popup-content-wrapper { border-radius:10px; background:var(--surface);
  color:var(--ink); box-shadow:var(--shadow); }
.leaflet-popup-tip { background:var(--surface); }
.leaflet-popup-content { margin:0; width:auto !important; }
.pop { padding:0 0 11px; width:250px; }
.pop img { width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:10px 10px 0 0; display:block; margin-bottom:9px; }
.pop b { display:block; padding:0 12px; font-size:14.5px; }
.pop-cat { padding:2px 12px 0; font-size:12px; color:var(--ink-3); }
.pop p { padding:0 12px; margin:7px 0 0; font-size:13px; line-height:1.45; }
.pop-tip { color:var(--warn); }
.pop .linky { margin:9px 12px 0; }

/* ---- drawer ---- */
/* The detail view is a page, not a side panel: a listing carries a gallery,
   maps and long text, and reading that in a narrow drawer was cramped. */
.drawer { position:fixed; inset:0; background:var(--bg); display:none; z-index:1000;
  overflow-y:auto; }
.drawer.open { display:block; }
.dinner { max-width:1060px; margin:0 auto; min-height:100%;
  background:var(--bg); overflow-y:auto; box-shadow:-10px 0 44px rgba(0,0,0,.25); }
.dhead { position:sticky; top:0; z-index:2; padding:18px 22px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.dhead h2 { font-size:19px; }
.bigscore { font:700 32px var(--display); letter-spacing:-.03em; line-height:1; }
.dbody { padding:20px 22px 70px; display:flex; flex-direction:column; gap:24px; }
.sec > h3 { font:700 14px var(--display); margin-bottom:10px; padding-bottom:7px;
  border-bottom:1px solid var(--line); }
.kv { display:grid; grid-template-columns:136px 1fr; gap:7px 14px; font-size:14px; }
.kv dt { color:var(--ink-3); font-size:12.5px; padding-top:1px; }
.kv dd { margin:0; }
.shots { display:grid; gap:7px; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
.shots img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;
  background:var(--surface-2); cursor:zoom-in; }
.quote { border-left:3px solid var(--ok); background:var(--ok-bg);
  padding:9px 12px; border-radius:0 8px 8px 0; font-size:13.5px; margin-top:8px; }
.rev { border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font-size:13.5px; margin-bottom:7px; background:var(--surface); }
ol.stops { margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
ol.stops li { font-size:14px; }
ul.tight { margin:5px 0; padding-left:18px; }
ul.tight li { margin:3px 0; font-size:14px; }
ul.pro li::marker { color:var(--ok); } ul.con li::marker { color:var(--bad); }
details > summary { cursor:pointer; color:var(--ink-2); font-size:13px; padding:5px 0; }
.pre { white-space:pre-wrap; font-size:13.5px; margin-top:7px; }
pre.logs { background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:11px; max-height:260px; overflow:auto; font-size:11.5px; margin:10px 0 0;
  white-space:pre-wrap; color:var(--ink-2); }
#detailMap { height:300px; border-radius:10px; }

/* ---- chat ---- */
#chatBtn { position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:900; border-radius:50%; width:54px; height:54px; font-size:21px; padding:0;
  background:var(--accent); color:#fff; border:0; cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.3); }
#chatBox { position:fixed; right:22px; bottom:calc(86px + env(safe-area-inset-bottom,0px));
  width:min(400px,calc(100vw - 44px)); height:min(540px,68vh); background:var(--surface);
  border:1px solid var(--line); border-radius:15px; display:none; flex-direction:column;
  z-index:900; box-shadow:0 14px 48px rgba(0,0,0,.28); overflow:hidden; }
#chatBox.open { display:flex; }
.chead { padding:11px 14px; border-bottom:1px solid var(--line);
  font:600 13.5px var(--body); display:flex; align-items:center; gap:8px; }
#chatLog { flex:1; overflow-y:auto; padding:13px; display:flex;
  flex-direction:column; gap:9px; }
.msg { max-width:86%; padding:8px 12px; border-radius:13px; font-size:13.5px;
  white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.msg.user { align-self:flex-end; background:var(--accent); color:#fff;
  border-bottom-right-radius:4px; }
.msg.bot { align-self:flex-start; background:var(--surface-2); color:var(--ink);
  border-bottom-left-radius:4px; }
.msg.tool { align-self:flex-start; font-size:11.5px; color:var(--ink-3);
  background:transparent; padding:0 4px; }
#chatForm { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
#chatInput { flex:1; padding:9px 12px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--bg); color:var(--ink); font:400 13.5px var(--body); }
#chatForm button { padding:9px 16px; background:var(--accent); color:#fff; border:0;
  border-radius:8px; font:600 13.5px var(--body); cursor:pointer; }

/* ---- chat queue ---- */
.chead { justify-content:space-between; }
.chat-x { background:none; border:0; color:var(--ink-3); font-size:15px;
  cursor:pointer; padding:2px 4px; line-height:1; }
.chat-x:hover { color:var(--ink); }
.qbar { display:flex; gap:7px; align-items:center; flex-wrap:wrap; padding:8px 12px;
  border-bottom:1px solid var(--line); background:var(--surface-2); font-size:12px; }
.qstop { background:var(--bad-bg); color:var(--bad); border:0; border-radius:7px;
  padding:4px 10px; font:600 12px var(--body); cursor:pointer; }
.qcount { color:var(--ink-3); }
.qitem { display:inline-flex; align-items:center; gap:5px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:999px; padding:3px 6px 3px 9px;
  color:var(--ink-2); }
.qitem button { background:none; border:0; color:var(--ink-3); cursor:pointer;
  font-size:11px; padding:0 2px; line-height:1; }
.msg.waiting { opacity:.6; }

/* ---- trip context in the nav ---- */
.navsep { display:flex; align-items:center; gap:8px; padding:0 12px 0 6px;
  margin-left:6px; border-left:1px solid var(--line-2); font-size:13.5px; }
.navsep b { font-family:var(--display); letter-spacing:-.01em; }
nav button.trip-tab:disabled { opacity:.38; cursor:not-allowed; background:transparent; }
nav button.trip-tab:disabled:hover { background:transparent; color:var(--ink-2); }
.back { background:none; border:0; color:var(--ink-2); font:500 13px var(--body);
  cursor:pointer; padding:0; margin-bottom:6px; }
.back:hover { color:var(--accent); }

/* ---- the guide reads as an article, not a dashboard ---- */
.headline { font-family:var(--display); font-size:22px; line-height:1.4;
  font-weight:500; letter-spacing:-.02em; max-width:40ch; margin:0 0 4px;
  color:var(--ink); }
.guide-sec { margin-top:34px; }
.guide-sec .sec-head { border-bottom:1px solid var(--line); padding-bottom:9px; }

.gems { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.gem { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; display:flex; flex-direction:column; gap:7px;
  border-left:3px solid var(--accent); }
.gem-h { display:flex; align-items:baseline; gap:10px; }
.gem-h h3 { flex:1; min-width:0; }
.gem p { font-size:14px; margin:0; }
.why { color:var(--ink-3); font-size:13px; font-style:italic; }

.hoods { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.hood { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; display:flex; flex-direction:column; gap:6px; }
.hood-h { display:flex; align-items:baseline; gap:10px; }
.hood-h h3 { flex:1; min-width:0; }
.hood p { font-size:14px; margin:0; }
.go-for { color:var(--accent); font-weight:500; font-size:13.5px; }

.foods { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.food { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; display:flex; flex-direction:column; gap:5px; }
.food h3 { font-size:14.5px; }
.food p { font-size:13.5px; margin:0; }
.where { color:var(--ok); font-weight:500; }

.facts { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.fact { background:var(--accent-soft); border-radius:var(--r); padding:14px 16px;
  font-size:14.5px; line-height:1.5; border-left:3px solid var(--accent); }

.myths { display:flex; flex-direction:column; gap:12px; }
.myth { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; }
.myth-q { color:var(--ink-3); font-style:italic; margin-bottom:6px; font-size:14px; }
.myth-a { font-size:14.5px; }
.myth-a::before { content:"→ "; color:var(--ok); font-weight:700; }

.trips { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.trip { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; display:flex; flex-direction:column; gap:5px; }
.trip p { font-size:13.5px; margin:0; }
.when p { margin:6px 0 0; font-size:14.5px; }
.sources a { color:var(--ink-2); font-size:12.5px; }
.sources a:hover { color:var(--accent); }

/* photo credit under a verified sight image */
.sight figcaption { font-size:12px; color:var(--ink-3); padding:7px 14px 0; }

.plan-stage { font-size:12.5px; color:var(--warn); display:flex; align-items:center; gap:6px; }
.plan-stage::before { content:""; width:6px; height:6px; border-radius:50%;
  background:var(--warn); animation:pulse 1.2s infinite; flex:none; }
@media (prefers-reduced-motion:reduce) { .plan-stage::before { animation:none; } }

/* ---- per-tab research log, closed by default ---- */
.logbox { margin-top:26px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); }
.logbox > summary { padding:12px 16px; font:500 13.5px var(--body);
  color:var(--ink-2); list-style:none; display:flex; align-items:center; gap:8px; }
.logbox > summary::-webkit-details-marker { display:none; }
.logbox > summary::before { content:"▸"; color:var(--ink-3); font-size:11px; }
.logbox[open] > summary::before { content:"▾"; }
.logbox > summary:hover { color:var(--ink); }
.logbox pre.logs { margin:0 12px 12px; background:var(--surface);
  border:1px solid var(--line); max-height:340px; }

/* ---- live work strip ---- */
.livework { background:var(--warn-bg); border:1px solid transparent;
  border-radius:var(--r); padding:12px 14px; display:flex;
  flex-direction:column; gap:6px; }
.lw-head { display:flex; align-items:center; gap:10px; font-size:14px; }
.lw-head b { color:var(--warn); font-weight:600; }
.lw-head .linky { margin-left:auto; }
.lw-last { font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spinner { width:13px; height:13px; border-radius:50%; flex:none;
  border:2px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-top-color:var(--warn); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } }

/* ---- verified photo gallery ---- */
.sight img { cursor:zoom-in; }
.thumbs { display:flex; gap:5px; padding:0 14px; overflow-x:auto; }
.thumbs img { width:52px; height:40px; object-fit:cover; border-radius:6px;
  cursor:pointer; background:var(--surface-2); opacity:.6; transition: opacity .15s, border .15s; box-sizing:border-box; }
.thumbs img.active { opacity:1; border:2px solid var(--accent); }
.thumbs img:hover { opacity:.9; }
.thumbs .more { width:52px; height:40px; border-radius:6px; border:1px dashed var(--line-2);
  background:var(--surface-2); color:var(--ink-2); font:600 12px var(--body);
  cursor:pointer; flex:none; }

.sight-img-box { position:relative; }
.inline-gal {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,.85); color:#222; font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer;
  transition:background .15s; padding:0 0 2px 0;
}
.inline-gal:hover { background:#fff; }
.inline-gal.prev { left:10px; }
.inline-gal.next { right:10px; }
.gallery { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.gallery figure { margin:0; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px;
  background:var(--surface-2); }
.gallery figcaption { font-size:12.5px; color:var(--ink-2); padding-top:6px; }
.gallery figcaption a { color:var(--ink-3); margin-left:6px; }

/* --- Son dakika alerts --- */
.alert-breaking {
  background: #fff3e0;
  border-left: 4px solid #d32f2f;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.alert-badge {
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
  animation: pulse-alert 2s ease-in-out infinite;
}
@keyframes pulse-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
.pin.breaking {
  background: #d32f2f;
  animation: pulse-alert 2s ease-in-out infinite;
}
.sw.breaking {
  background: #d32f2f;
}
.monitor-status {
  font-size: 11px;
  margin-left: auto;
}

/* ---- full-screen popup (replaces side-drawer for gallery) ---- */
.popup-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,14,12,.55); z-index: 1001; padding: 24px;
}
.popup-box {
  background: var(--bg); border-radius: 16px; max-width: 820px; width: 100%;
  max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: popIn .2s ease-out;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.popup-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; padding: 20px 24px 14px;
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.popup-head h2 { font-size: 20px; margin: 0; }
.popup-body { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 18px; }

/* ---- gallery viewer ---- */
.gal-viewer {
  position: relative; display: flex; align-items: center; gap: 0;
  background: var(--surface); border-radius: 12px; overflow: hidden;
  height: 55vh;
  min-height: 280px;
}
.gal-frame { flex: 1; display: flex; align-items: center; justify-content: center;
  height: 100%; }
.gal-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gal-slide img {
  max-width: 100%; max-height: 55vh; object-fit: contain; border-radius: 8px;
  transition: opacity .2s;
}
.gal-caption {
  padding: 10px 14px; text-align: center; font-size: 13.5px; color: var(--ink-2);
}
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.85); color: #222; font-size: 24px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background .15s;
}
.gal-arrow:hover { background: #fff; }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
.gal-counter {
  text-align: center; font-size: 13px; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: .03em;
}
.gal-thumbstrip {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 0;
  justify-content: center; flex-wrap: wrap;
}
.gal-thumb {
  width: 56px; height: 42px; object-fit: cover; border-radius: 6px;
  cursor: pointer; opacity: .5; border: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.gal-thumb:hover { opacity: .8; }
.gal-thumb.active { opacity: 1; border-color: var(--accent); }

/* ---- weather ---- */
.wx { display:flex; flex-direction:column; gap:10px; }
.wx-days { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
.wx-day { background:var(--surface-2); border-radius:10px; padding:12px 10px;
  text-align:center; display:flex; flex-direction:column; gap:3px; }
.wx-dow { font:600 12px var(--body); color:var(--ink-2); }
.wx-icon { font-size:24px; line-height:1.2; }
.wx-temp b { font:700 20px var(--display); letter-spacing:-.02em; }
.wx-temp span { font-size:13px; margin-left:3px; }
.wx-cond { font-size:12px; color:var(--ink-2); }
.wx-rain { font-size:11.5px; color:var(--ink-3); }
.wx-summary { font-size:15px; margin:4px 0 0; }
.wx-notes { margin:2px 0; } .wx-notes li { font-size:13.5px; }
.wx-advice { background:var(--ok-bg); color:var(--ok); padding:9px 12px;
  border-radius:9px; font-size:13.5px; margin:4px 0 0; }
.wx-hist > summary { font:500 13px var(--body); color:var(--ink-2); padding:6px 0; }
.wx-chart { overflow-x:auto; }
.wx-chart svg { width:100%; min-width:420px; height:auto; display:block; }
.wx-band { fill:color-mix(in srgb, var(--accent) 14%, transparent); stroke:none; }
.wx-max, .wx-min { fill:none; stroke-width:2; }
.wx-max { stroke:var(--accent); }
.wx-min { stroke:color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.wx-ref { stroke:var(--ok); stroke-width:1.5; stroke-dasharray:5 4; }
.wx-reftxt { fill:var(--ok); font:600 11px var(--body); }
.wx-grid { stroke:var(--line); stroke-width:1; }
.wx-axis { fill:var(--ink-3); font:11px var(--body); }
.pin.gem { background:#7b4ea8; font-size:12px; }
.pin.hood { background:#2d6ea8; font-size:11px; }

/* ---- phone ----
   The nav, the forms and the detail view were laid out for a desktop; on a
   phone they need to stack, and the drawer needs to be the whole screen. */
@media (max-width: 720px) {
  .bar { padding:10px 14px; gap:10px; }
  .brand { font-size:16px; }
  nav { width:100%; margin-left:0; overflow-x:auto; gap:4px;
        scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  nav::-webkit-scrollbar { display:none; }
  nav button { flex:none; font-size:13.5px; padding:7px 11px; }
  .navsep { padding:0 8px 0 4px; margin-left:2px; font-size:12.5px; }
  .navsep .num { display:none; }

  main { padding:16px 14px 90px; }
  h1 { font-size:21px; } h2 { font-size:16px; }
  .panel { padding:15px; border-radius:11px; }
  .fields { grid-template-columns:1fr 1fr; }
  .fields .span2 { grid-column:span 2; }
  .actions { flex-direction:column; align-items:stretch; }
  button.primary { margin-left:0; width:100%; }
  .page-head { align-items:flex-start; }
  .page-head .statusline { margin-left:0; width:100%; }

  /* full-screen detail, no side gutter to waste */
  .dinner { max-width:100%; }
  .dhead { padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top,0px)); }
  .dbody { padding:16px 16px 70px; gap:18px; }
  .kv { grid-template-columns:1fr; gap:2px 0; }
  .kv dt { margin-top:8px; }

  .map { height:300px; }
  .sights, .gems, .hoods, .foods, .trips, .plans {
    grid-template-columns:1fr; }
  .shots { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
  .gallery { grid-template-columns:1fr; }
  .wx-days { grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }

  /* chat fills the screen rather than floating in a corner */
  #chatBox { right:0; left:0; bottom:0; width:100%;
             height:min(82vh, 100%); border-radius:16px 16px 0 0; }
  #chatBtn { right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); }

  /* comfortable tap targets */
  button, .linky, nav button { min-height:38px; }
  input[type=text],input[type=number],input[type=date] { font-size:16px; }
}

/* ---- live guide ---- */
.live-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.live-controls .primary { margin-left:0; }
.here { border-left:3px solid var(--accent); display:flex;
  flex-direction:column; gap:8px; }
.here-badge { display:inline-flex; align-self:flex-start; font:600 11px var(--body);
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  background:var(--accent-soft); padding:4px 10px; border-radius:999px; }
.here h2 { font-size:19px; }
.here audio { width:100%; margin-top:4px; }
.narration { font-size:15.5px; line-height:1.6; }

.near { display:flex; flex-direction:column; gap:9px; }
.near-item { display:grid; grid-template-columns:62px 1fr auto; gap:13px;
  align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 12px; text-align:left; width:100%;
  font:inherit; color:inherit; cursor:pointer; }
.near-item:hover { border-color:var(--line-2); box-shadow:var(--shadow); }
.near-item.arrived { border-left:3px solid var(--ok); }
.near-item img, .near-noimg { width:62px; height:62px; object-fit:cover;
  border-radius:9px; background:var(--surface-2); }
.near-noimg { display:flex; align-items:center; justify-content:center;
  font-size:22px; }
.near-b { min-width:0; display:flex; flex-direction:column; gap:3px; }
.near-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.near-b p { font-size:13px; margin:0; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.near-play { font-size:19px; opacity:.6; }