/* turkeyroutes v2 (30.09) — shared by every page: header, breadcrumbs, search box, "+ Add to trip", trip bar, toast.
   Loaded after tr.css (content pages) or k1.css (home / city map pages); tokens come from those files. */

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { width: min(1240px, 100% - 24px); margin-inline: auto; display: flex; align-items: center; gap: 14px; min-height: 64px; }
.top .brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 0; background: none; box-shadow: none; border: 0; border-radius: 12px; color: var(--night); text-decoration: none; font: 800 1.3rem/1 var(--f-display); letter-spacing: -.03em; }
.top .brand small { font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-left: 1px solid var(--line); padding-left: 9px; margin-left: 2px; }
.top-nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.top-nav a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .96rem; }
.top-nav a:hover { background: var(--soft); color: var(--night); }
.top-nav a[aria-current] { background: var(--night); color: #fff; }
.top-nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--sea); }
.trip-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--sea); color: #fff; font: 700 .72rem/1 var(--f-mono); }
.trip-n[hidden] { display: none; }
.top-nav a[aria-current] .trip-n { background: #fff; color: var(--night); }
.top-search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--night); border: 1px solid var(--line); background: #fff; }
.top-search:hover { border-color: var(--sea); color: var(--sea); }
.top .lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font: 600 .78rem/1 var(--f-mono); box-shadow: none; background: #fff; }
.top .lang a { display: grid; place-items: center; min-width: 40px; min-height: 40px; color: var(--ink-2); text-decoration: none; }
.top .lang a[aria-current] { background: var(--night); color: #fff; }
.top .lang .lang-off { display: grid; place-items: center; min-width: 40px; min-height: 40px; color: var(--ink-2); opacity: .45; cursor: default; } /* 03.10: DE not available for this page yet */
@media (max-width: 720px) {
  .top-in { gap: 6px; min-height: 56px; width: calc(100% - 16px); }
  .top .brand { font-size: 1.12rem; gap: 6px; }
  .top .brand span, .top .brand small { display: none; }
  .top-nav { gap: 0; }
  .top-nav a { padding: 0 9px; font-size: .9rem; }
  .top .lang { display: none; }
}
@media (max-width: 360px) { .top-nav a { padding: 0 7px; font-size: .86rem; } }

/* ---------- breadcrumbs (same markup on every page: kirinti() in cekirdek.php) ---------- */
.crumbs { padding: 16px 0 4px; font-size: .86rem; color: var(--ink-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin: 0 6px 0 2px; color: #9aa1b1; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--sea); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- search (combobox) ---------- */
.srch { position: relative; }
.srch-f { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 8px 0 18px; background: #fff; border: 2px solid var(--night); border-radius: 18px; box-shadow: var(--float); }
.srch-f:focus-within { border-color: var(--sea); box-shadow: 0 0 0 4px rgb(10 119 128 / .18), var(--float); }
.srch-f svg { flex: none; color: var(--ink-2); }
.srch-in { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 1.12rem/1.2 var(--f-body); color: var(--ink); min-height: 52px; }
.srch-in::placeholder { color: #7b8397; font-weight: 400; }
.srch-in::-webkit-search-cancel-button { display: none; }
.srch-go { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--night); color: #fff; font: 700 .96rem/1 var(--f-display); cursor: pointer; }
.srch-go:hover { background: #1d3257; }
.srch-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -12px rgb(19 35 63 / .35); max-height: min(60vh, 420px); overflow: auto; }
.srch-list[hidden] { display: none; }
.srch-list li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.srch-list li[aria-selected="true"], .srch-list li:hover { background: #eef7f6; }
.srch-list img, .srch-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--soft); display: grid; place-items: center; font: 700 .7rem/1 var(--f-mono); color: var(--ink-2); text-transform: uppercase; }
.srch-list strong { display: block; font: 700 1rem/1.2 var(--f-display); color: var(--night); }
.srch-list small { display: block; color: var(--ink-2); font-size: .8rem; }
.srch-list mark { background: #ffe9b0; color: inherit; border-radius: 3px; }
.srch-list .srch-none { cursor: default; color: var(--ink-2); font-size: .92rem; }
.srch-list .srch-none:hover { background: none; }
.srch-dlg { width: min(640px, 100% - 24px); max-width: none; margin: 72px auto auto; padding: 16px; border: 0; border-radius: 22px; box-shadow: 0 30px 80px -20px rgb(19 35 63 / .5); overflow: visible; }
.srch-dlg::backdrop { background: rgb(19 35 63 / .45); }
.srch-dlg .srch-list { position: static; margin-top: 8px; box-shadow: none; }
.srch-dlg-x { position: absolute; right: -6px; top: -48px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; font-size: 1.4rem; cursor: pointer; }

/* ---------- + Add to trip ---------- */
.trip-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 2px solid var(--sea); border-radius: 999px; background: #fff; color: var(--sea); font: 700 .88rem/1 var(--f-display); cursor: pointer; white-space: nowrap; }
.trip-add:hover { background: #eef7f6; }
.trip-add .ta-on { display: none; }
.trip-add[aria-pressed="true"] { background: var(--sea); color: #fff; }
.trip-add[aria-pressed="true"] .ta-on { display: inline; }
.trip-add[aria-pressed="true"] .ta-off { display: none; }
.trip-add--big { min-height: 48px; padding: 0 20px; font-size: .98rem; }

/* ---------- trip bar (fixed, bottom) ---------- */
.tripbar { position: fixed; z-index: 45; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--night); color: #fff; border-radius: 999px; box-shadow: 0 12px 30px -8px rgb(19 35 63 / .55); max-width: calc(100% - 24px); }
.tripbar[hidden] { display: none; }
.tripbar a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; color: #fff; text-decoration: none; font: 700 1rem/1 var(--f-display); white-space: nowrap; }
.tripbar a:hover { background: #1d3257; }
.tripbar b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--night); font: 700 .82rem/1 var(--f-mono); }
.tripbar .tb-go { background: var(--sea); }
.tripbar .tb-go:hover { background: #0c8993; }
body.has-tripbar { padding-bottom: 76px; }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 60; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 14px 34px -10px rgb(19 35 63 / .45); border: 1px solid var(--line); font-size: .94rem; display: flex; gap: 12px; align-items: center; }
.toast[hidden] { display: none; }
.toast a { font-weight: 700; white-space: nowrap; }
/* v4 (30.09): first-add message with View plan / Undo, short "Added ✓ · Undo" after that */
.toast-t { margin: 0; }
.toast-t b { color: var(--night); }
.toast-act { display: flex; gap: 6px; flex: none; }
.toast-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--night); font: 700 .86rem/1 var(--f-display); text-decoration: none; cursor: pointer; white-space: nowrap; }
.toast-btn:hover { border-color: var(--sea); color: var(--sea); }
.toast .toast-btn--main { background: var(--sea); border-color: var(--sea); color: #fff; }
.toast .toast-btn--main:hover { background: #0c8993; color: #fff; }
.toast--first { width: min(560px, 100% - 24px); box-sizing: border-box; padding-left: 20px; box-shadow: inset 5px 0 0 var(--sea), 0 14px 34px -10px rgb(19 35 63 / .45); }
.toast--short { padding: 6px 8px 6px 16px; gap: 8px; border-radius: 999px; }
.toast-dot { color: var(--ink-2); }
body:not(.has-tripbar) .toast { bottom: max(18px, env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  .toast--first { flex-wrap: wrap; gap: 8px; }
  .toast--first .toast-act { width: 100%; justify-content: flex-end; }
}
@keyframes trip-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.is-bump { animation: trip-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: reduce) { .is-bump { animation: none; } }
/* place page hint under "+ Add to trip"; one-time tip line on city lists */
.trip-hint { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); }
.once-tip { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 3px 4px 3px 14px; border-radius: 12px; background: #eef7f6; border: 1px solid #cfe7e5; font-size: .88rem; color: var(--ink); }
.once-tip[hidden] { display: none; }
.once-tip span { flex: 1; }
.once-tip b { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--sea); border-radius: 50%; color: var(--sea); font: 800 .8rem/1 var(--f-display); vertical-align: -3px; }
.once-tip button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 1.2rem; cursor: pointer; }
.once-tip button:hover { background: #fff; color: var(--night); }

/* ---------- a11y ---------- */
.skip { position: absolute; left: -999px; top: 8px; background: var(--night); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 80; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media print { .top, .tripbar, .toast, .foot, .skip { display: none !important; } body.has-tripbar { padding-bottom: 0; } }

/* 01.10: label next to every link that opens a Turkish ilçemde page */
.tr-lang { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 6px; background: #fff3d6; color: #7a5200; font: 600 .68rem/1.4 var(--f-mono); letter-spacing: .03em; }
.disambig { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid #e3a33b; background: #fff8ea; border-radius: 0 10px 10px 0; font-size: .93rem; }

/* 01.10 themes (caves & waterfalls, hidden gems): shared bits used on place, city and region pages */
:root { --t-cave: #7a4fb3; --t-water: #0f7fa8; --t-gorge: #2f7d4f; --t-gem: #c0562a; --t-view: #b86a00; --t-adv: #b3261e; }
.tema-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tema-list a { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; min-height: 60px; background: #fff; }
.tema-list a:hover { border-color: var(--sea); }
.tema-list img, .tema-list .near-dot { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.tema-list strong { display: block; font: 700 1rem/1.2 var(--f-display); color: var(--night); }
.tema-list small { display: block; color: var(--ink-2); font-size: .82rem; }
.tema-dot { background: var(--t-gem); } .tema-dot--cave { background: var(--t-cave); } .tema-dot--waterfall { background: var(--t-water); } .tema-dot--gorge { background: var(--t-gorge); } .tema-dot--view { background: var(--t-view); } .tema-dot--adv { background: var(--t-adv); }
.near-list .tema-dot, .tema-list .tema-dot { background-image: none; }
.theme-in { font-size: .92rem; margin: 0 0 10px; }
.city-also { margin: 22px 0 8px; }
.tnone { color: var(--ink-2); font-size: .9em; }
.reg-tema { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-bottom: 14px; }
.tstat-t { font-weight: 700; } .tstat-t.is-open { color: var(--ok); } .tstat-t.is-closed { color: var(--warn); } .tstat-t.is-nv { color: var(--amber); }
.kbyg .src-line, .kis-card .src-line { display: block; margin-top: 4px; font-size: .74rem; color: var(--ink-2); } .kbyg .src-line a { color: inherit; }

/* ---------- Watch (01.10): YouTube click-to-load cards (app/site/izle.php, assets/site/izle.js). Narrow containers (the
   city list panel, phones) get a swipeable strip; wide ones (place pages on desktop) a 3-column grid. ---------- */
.yt-sec { container-type: inline-size; margin: 22px 0 28px; }
.yt-list { position: relative; list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.yt { flex: 0 0 min(78%, 300px); min-width: 0; scroll-snap-align: start; }
.yt-list--n1 .yt { flex-basis: 100%; }
@container (min-width: 600px) {
  .yt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; }
  .yt-list--n1 { grid-template-columns: minmax(0, 520px); }
  .yt-list--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.yt-media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--night); }
.yt-play { all: unset; box-sizing: border-box; position: absolute; inset: 0; cursor: pointer; display: block; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; }
/* 20.10: no YouTube thumbnail before the click (GDPR) — title card on a sea-to-night gradient */
.yt-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px 16px 16px; background: linear-gradient(140deg, var(--sea) 0%, var(--night) 78%); color: #fff; }
.yt-ph-k { font: 600 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.yt-ph-t { font-weight: 600; font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: calc(100% - 3.5rem); }
.yt-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(19 35 63 / .88); color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
.yt-btn svg { margin-left: 3px; }
.yt-play:hover .yt-btn { background: var(--sea); }
.yt-play:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; border-radius: 14px; }
.yt-play:focus-visible .yt-btn { background: var(--sea); box-shadow: 0 0 0 3px #fff; }
.yt-dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 6px; background: rgb(11 18 32 / .82); color: #fff; font: 600 .74rem/1 var(--f-mono); }
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-t { margin: 8px 0 2px !important; font: 700 .95rem/1.3 var(--f-display); color: var(--night); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.yt-meta { margin: 0 !important; font-size: .8rem; color: var(--ink-2); }
.yt-meta a { white-space: nowrap; }
.yt-note { margin: 10px 0 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .yt-btn { transition: background-color .15s ease, scale .15s ease; }
  .yt-play:hover .yt-btn { scale: 1.06; }
}
/* 01.10 boat trips: dot of bay pages in "Also in this area" lists (tekne.css has the rest) */
.tema-dot--boat { background: #1f6fb2; }

/* 03.10: footer language link (the header switch is hidden on phones) */
.foot-lang { margin: 10px 0 0; font-size: .9rem; }
.foot-lang a { color: inherit; }

/* 19.10 /report/ form (app/site/bildir.php) */
.rapor-form { display: grid; gap: 16px; max-width: 640px; }
.rapor-form fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px 14px; margin: 0; display: grid; gap: 8px; }
.rapor-form legend { font-weight: 700; padding: 0 6px; }
.rapor-secim { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.rapor-secim input { width: 18px; height: 18px; accent-color: var(--sea); }
.rapor-etiket { font-weight: 700; }
.rapor-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 12px 14px; border: 1px solid var(--ink-2); border-radius: 12px; background: var(--paper); color: var(--ink); resize: vertical; }
.rapor-form textarea:focus, .rapor-secim input:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.rapor-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rapor-hata { max-width: 640px; padding: 12px 16px; border-radius: 12px; background: #fdecea; color: var(--warn); font-weight: 700; }
.rapor-ok { max-width: 640px; padding: 20px 22px; border-radius: 16px; background: var(--soft); }
.rapor-sayfa { margin: 0; overflow-wrap: anywhere; }
.duty-ph { margin-top: 12px; }
.duty-ph small { display: block; color: var(--ink-2); }

/* 20.10 today's sunrise/sunset line (place + city pages, computed) */
.sun-today { margin: 4px 0 0; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .02em; color: var(--ink-2); }

/* 20.10 city climate block (app/site/iklim-blok.php) */
.city-climate { margin-top: 28px; }
.sea-today { font-weight: 700; margin: 0 0 8px; }
.climate th.now, .climate td.now { background: var(--soft); font-weight: 700; }
.climate td.num, .climate th.num { padding-left: 6px; padding-right: 6px; font-variant-numeric: tabular-nums; }
.climate { font-size: .86rem; } .climate th[scope=row] { font-size: .8rem; white-space: nowrap; }