/* turkeyroutes — boat trips & bays (01.10): /boat-trips/, /boat-trips/{bay}/, the teaser on destination pages and the extra
   sections on /adventure/blue-cruise/ and /adventure/diving/. Builds on kis.css + tema.css (map, rules card) and the tr.css tokens. */
:root { --t-boat: #1f6fb2; }
.tpin--boat circle { fill: var(--t-boat); }
.tpin--boatx circle { fill: #fff; stroke: var(--t-boat); stroke-width: 2.4; stroke-dasharray: 3 2.4; }
.tpin--boatx .tpin-g { fill: var(--t-boat); }
.tkey--boat::before { background: var(--t-boat); }
.tkey--boatx::before { background: #fff; box-shadow: inset 0 0 0 2px var(--t-boat); }
.tdot--boat, .tema-dot--boat { background: var(--t-boat); }

/* hub: area jump links (02.10: also the map chips) */
.tjump { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.tjump a { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .86rem; color: var(--night); text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.tjump a:hover { border-color: var(--t-boat); }

/* 02.10 live map (assets/site/tekne-harita.js): area chips scroll sideways on phones, one map, route panel under it */
.bchips { margin: 12px 0 10px; }
.bchips a.is-on, .bchip-all[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.bchip-all { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 .86rem/1.2 var(--f-body); color: var(--night); min-height: 34px; cursor: pointer; }
.bmap-wrap { scroll-margin-top: 84px; }
.bmap { position: relative; height: min(560px, 72vh); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #e9f0f4; }
.bmap--k { height: 340px; }
.bmap-wait { position: absolute; inset: auto 12px 12px 12px; margin: 0; padding: 12px 14px; background: #fff; border-radius: 12px; font-size: .88rem; color: var(--ink-2); }
.bmap .maplibregl-popup-content { border-radius: 12px; padding: 10px 26px 10px 12px; font-size: .86rem; box-shadow: 0 6px 20px rgb(19 35 63 / .18); }
.bmap .maplibregl-popup-close-button { font-size: 18px; width: 26px; height: 26px; }
.bmap .bp-t { font: 600 .64rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 0 0 3px; }
.bmap .bp-n { font-weight: 700; color: var(--night); margin: 0 0 4px; line-height: 1.25; }
.bmap .bp-x { margin: 0 0 4px; color: #8a5a00; font-size: .8rem; }
.bmap .bp-l { margin: 0; font-weight: 600; }
.bmap-panel { margin-top: 10px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--night); border-radius: 14px; font-size: .9rem; }
.bmap-panel p { margin: 0; }
.bmap-panel .bp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--night); }
.bmap-panel .bp-h .tlabel { margin: 0; }
.bmap-panel .bp-s { margin-top: 6px; color: var(--ink-2); }
.bmap-panel .bp-a { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-weight: 600; }
.bmap-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; font-size: .8rem; color: var(--ink-2); }
.bmap-key > span { display: inline-flex; align-items: center; gap: 7px; }
.bk { display: inline-block; width: 13px; height: 13px; border-radius: 50%; flex: none; font-style: normal; }
.bk--ok { background: var(--t-boat); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.bk--ax { background: #fff; box-shadow: inset 0 0 0 2.5px var(--t-boat); }
.bk--here { width: 16px; height: 16px; background: var(--t-boat); box-shadow: inset 0 0 0 3px var(--night); }
.bk--cl { width: 20px; height: 20px; background: var(--t-boat); color: #fff; font: 700 .7rem/20px var(--f-body); text-align: center; }
.bk--line { width: 26px; height: 0; border-radius: 0; border-top: 2.5px dashed var(--night); }
.tmapbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--t-boat); border-radius: 999px; background: #fff; color: var(--t-boat); font: 600 .86rem/1.2 var(--f-body); cursor: pointer; }
.tmapbtn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tmapbtn:hover { background: #eef5fb; }
.tmapbtn[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.troute-map, .tarea-map { margin: 10px 0 0; }
.troute:has([data-bmap-route]) { cursor: pointer; }
.troute.is-map { box-shadow: 0 0 0 3px var(--night); }

/* one area */
.tarea { margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--night); scroll-margin-top: 90px; }
.tarea-head { display: flex; gap: 14px; align-items: flex-start; }
.tarea-head img { border-radius: 16px; flex: none; object-fit: cover; }
.tarea-head h3 { font: 800 1.45rem/1.15 var(--f-display); margin: 0 0 4px; letter-spacing: -.01em; }
.tarea-head p { margin: 0; max-width: 72ch; }
.tarea-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "r k" "b k"; gap: 18px 22px; margin-top: 16px; align-items: start; }
.troutes { display: grid; gap: 12px; grid-area: r; }
.trules { grid-area: k; }
.tbays-wrap { grid-area: b; }
.tbays-wrap .tbays-h { margin-top: 0; }
.troute { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; scroll-margin-top: 90px; }
.troute:target { box-shadow: 0 0 0 3px var(--t-boat); }
.troute .eyebrow { margin: 0 0 2px; }
.troute h4, .troute h3 { font: 700 1.05rem/1.25 var(--f-body); margin: 0 0 6px; color: var(--night); }
.troute h3 a { color: inherit; }
.troute--none { color: var(--ink-2); font-size: .92rem; margin: 0; }
.troute--in { margin-top: 12px; }
.tdep, .tdur { margin: 0; font-size: .92rem; }
.tlabel { display: inline-block; margin: 8px 0 4px; padding: 3px 9px; border-radius: 999px; font: 700 .7rem/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; background: #fff4e0; color: #8a5a00; border: 1px solid #ecd2a0; }
.tlabel.is-src { background: #e7f4ec; color: #1f6b3f; border-color: #b9dcc6; }
.tstops { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 3px; font-size: .95rem; }
.tstops li::marker { font-weight: 800; color: var(--t-boat); }
.tstops small { color: var(--ink-2); }
.tstops .is-here { font-weight: 700; }
.tilg { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); }
.troute .fine { margin: 8px 0 0; }
.trules { padding: 16px 18px; border-radius: 18px; }
.trules h4 { font: 800 1.05rem/1.2 var(--f-display); margin: 0 0 6px; color: var(--night); }
.trules .rules-list { margin-top: 8px; font-size: .92rem; gap: 10px; }
.trules .rules-out ul, .rules .rules-out ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.tsepa { margin: 0 0 4px; font-size: .9rem; }
.src-d { white-space: nowrap; }

/* bays list */
.tbays-h { font: 700 1rem/1.2 var(--f-body); margin: 20px 0 8px; color: var(--night); }
.tbays-h small { font-family: var(--f-mono); color: var(--ink-2); margin-left: 4px; }
.tbays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px 12px; }
.tbay { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; scroll-margin-top: 90px; font-size: .9rem; }
.tbay:target { box-shadow: 0 0 0 3px var(--t-boat); }
.tbay img { border-radius: 12px; object-fit: cover; }
.tbay h4 { font: 700 .98rem/1.25 var(--f-body); margin: 0; color: var(--night); }
.tbay h4 small { font-weight: 400; color: var(--ink-2); font-size: .8rem; }
.tbay p { margin: 4px 0 0; }
.tbay-meta { font-size: .8rem; color: var(--ink-2); }
.tbay--dot { grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.tbay-dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--t-boat); }
.tbay-dot--approx { background: #fff; box-shadow: inset 0 0 0 2px var(--t-boat); }
.tbay-dot--none { background: #c9c4bc; }
.tloc--ok { color: var(--t-boat); font-weight: 600; } .tloc--approx { color: #8a5a00; } .tloc--none { color: var(--ink-2); }
.tbay-ticket { font-size: .84rem; }
.tgen { font-style: italic; }
.tnot { color: #8a5a00; }
.tsepa-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: .92rem; }
a.card.tlink { text-decoration: none; color: inherit; } a.card.tlink h3 { color: var(--t-boat); }

/* bay page: know-before-you-go card */
.tkbyg { padding: 18px 20px; }
.tkbyg h2 { font: 800 1.15rem/1.2 var(--f-display); margin: 0 0 10px; }
.tkbyg dl { margin: 0; display: grid; gap: 10px; }
.tkbyg dl div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; font-size: .92rem; }
.tkbyg dt { font-weight: 700; color: var(--night); }
.tkbyg dd { margin: 0; }
.tkbyg dd small { display: block; color: var(--ink-2); font-size: .8rem; }
.tkbyg .fine { margin: 12px 0 0; }

/* adventure pages: anchorages and dive sites */
.tchiplist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tchiplist li { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: .86rem; }
.tchiplist a { color: var(--night); }
.tdive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.tdive-a { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.tdive-a h3 { font: 800 1.1rem/1.2 var(--f-display); margin: 0 0 6px; }
.tdive-a p { margin: 0; font-size: .93rem; }
.tdive-r { margin: 10px 0 0; padding-left: 18px; font-size: .88rem; display: grid; gap: 6px; }
#anchor .rules { margin-top: 16px; }

/* destination teaser */
.city-boat { margin: 22px 0 0; }
.boat-teaser { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: .94rem; }
.boat-teaser small { color: var(--ink-2); }

@media (min-width: 1200px) { .tbays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .tarea-grid, .tbays, .tdive { grid-template-columns: 1fr; }
  .bchips { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bchips::-webkit-scrollbar { display: none; }
  .bchips a, .bchip-all { flex: none; white-space: nowrap; }
  .bmap { height: min(440px, 62vh); border-radius: 14px; }
  .bmap--k { height: 300px; }
  .tarea-grid { grid-template-areas: "r" "k" "b"; }
  .tarea-head img { width: 56px; height: 56px; }
  .tkbyg dl div { grid-template-columns: 92px minmax(0, 1fr); }
}