/* =====================================================================
   Doğa Günlüğü — web teması
   Uygulamadaki "Orman" paletiyle aynı renkler; kâğıt/defter hissi,
   topoğrafik çizgi deseni, haritalar kartların merkezinde.
   ===================================================================== */
:root {
  --primary: #2D6A4F; --on-primary: #fff; --primary-c: #B7E4C7; --on-primary-c: #0B2B1E;
  --secondary: #7A5C3E; --secondary-c: #EBDCC9; --on-secondary-c: #2C1E10;
  --tertiary: #B5541A; --tertiary-c: #FFDCC4;
  --bg: #F6F3EC; --surface: #FFFFFF; --surface-low: #F9F7F1; --surface-mid: #F1EEE6; --surface-high: #EBE8E0;
  --text: #1B1C18; --muted: #5d6056; --outline: #C6C8BB; --outline-strong: #76786E;
  --error: #BA1A1A; --error-c: #FFDAD6; --ok-c: #d6f0de;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(30, 40, 20, .06), 0 4px 16px rgba(30, 40, 20, .06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%232D6A4F' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 60c40-30 80 20 120-5s70-40 160 0'/%3E%3Cpath d='M-20 90c50-25 90 25 130 0s80-35 150 5'/%3E%3Cpath d='M-20 130c40-20 70 30 120 5s90-45 160 5'/%3E%3Cpath d='M-20 175c60-30 100 20 140-5s60-30 140 10'/%3E%3Cpath d='M-20 215c45-20 85 25 125 0s75-30 155 5'/%3E%3Cellipse cx='170' cy='40' rx='22' ry='12'/%3E%3Cellipse cx='170' cy='40' rx='40' ry='22'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
[data-theme="dark"] {
  --primary: #95D5B2; --on-primary: #00391F; --primary-c: #1B4332; --on-primary-c: #B7E4C7;
  --secondary: #D4B48C; --secondary-c: #3D2B14; --on-secondary-c: #F1DFC6;
  --tertiary: #F4A261; --tertiary-c: #4A2400;
  --bg: #101A14; --surface: #17221B; --surface-low: #141E17; --surface-mid: #1C2820; --surface-high: #233027;
  --text: #E2E6DF; --muted: #A3AA9F; --outline: #3a453c; --outline-strong: #8C9389;
  --error: #FFB4AB; --error-c: #5c1a14; --ok-c: #1d3a29;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2395D5B2' stroke-opacity='.05' stroke-width='1.2'%3E%3Cpath d='M-20 60c40-30 80 20 120-5s70-40 160 0'/%3E%3Cpath d='M-20 90c50-25 90 25 130 0s80-35 150 5'/%3E%3Cpath d='M-20 130c40-20 70 30 120 5s90-45 160 5'/%3E%3Cpath d='M-20 175c60-30 100 20 140-5s60-30 140 10'/%3E%3Cpath d='M-20 215c45-20 85 25 125 0s75-30 155 5'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #95D5B2; --on-primary: #00391F; --primary-c: #1B4332; --on-primary-c: #B7E4C7;
    --secondary: #D4B48C; --secondary-c: #3D2B14; --on-secondary-c: #F1DFC6;
    --tertiary: #F4A261; --tertiary-c: #4A2400;
    --bg: #101A14; --surface: #17221B; --surface-low: #141E17; --surface-mid: #1C2820; --surface-high: #233027;
    --text: #E2E6DF; --muted: #A3AA9F; --outline: #3a453c; --outline-strong: #8C9389;
    --error: #FFB4AB; --error-c: #5c1a14; --ok-c: #1d3a29;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.5 var(--sans); color: var(--text); background: var(--bg) var(--topo);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- üst çubuk */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--outline);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.mainnav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.mainnav a { padding: 7px 12px; border-radius: 999px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.mainnav a:hover { background: var(--surface-mid); text-decoration: none; color: var(--text); }
.mainnav a.on { background: var(--primary-c); color: var(--on-primary-c); }
.topright { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.iconbtn { position: relative; border: 0; background: transparent; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 18px; }
.iconbtn:hover { background: var(--surface-mid); text-decoration: none; }
.badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tertiary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu .menu { position: absolute; right: 0; top: 46px; min-width: 200px; background: var(--surface); border: 1px solid var(--outline); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.usermenu .menu a, .usermenu .menu button { padding: 9px 12px; border-radius: 8px; color: var(--text); text-align: left; border: 0; background: none; cursor: pointer; width: 100%; }
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--surface-mid); text-decoration: none; }
.menu-head { padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--outline); margin-bottom: 4px; }
.bottomnav { display: none; }
.safetybar { background: var(--tertiary-c); color: var(--text); padding: 10px 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--outline); }
.safetybar.alert { background: var(--error-c); }

/* ---------------------------------------------------------------- sayfa */
.page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 90px; }
.page.narrow-auth { max-width: 520px; }
.page.full { max-width: none; padding: 0; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pagehead h1 { margin: 0; }
.pagehead .sub { color: var(--muted); margin-top: 4px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: 1.3fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }

.card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.card h2, .card h3 { margin-top: 0; }
.card + .card { margin-top: 16px; }
.paper { background: var(--surface-low); border: 1px dashed var(--outline-strong); border-radius: var(--radius); padding: 16px; }

.stat { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); padding: 14px 16px; }
.stat .v { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: .85rem; }
.stat.hero { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.stat.hero .l { color: color-mix(in srgb, var(--on-primary) 80%, transparent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

/* ---------------------------------------------------------------- butonlar ve formlar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--outline-strong); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-mid); text-decoration: none; }
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.tonal { background: var(--primary-c); color: var(--on-primary-c); border-color: transparent; }
.btn.danger { color: var(--error); border-color: var(--error); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 6px 12px; font-size: .9rem; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.on { background: var(--primary-c); color: var(--on-primary-c); border-color: transparent; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--outline); background: var(--surface); cursor: pointer; font-size: .9rem; }
.chip.on { background: var(--secondary-c); color: var(--on-secondary-c); border-color: transparent; font-weight: 600; }
.form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .9rem; }
label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
label.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=search], input:not([type]), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--outline-strong); border-radius: var(--radius-sm); background: var(--surface); font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 90px; resize: vertical; }
.codeinput { letter-spacing: .4em; font-size: 1.4rem !important; text-align: center; font-family: ui-monospace, monospace; }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.alert.err { background: var(--error-c); color: var(--text); }
.alert.ok { background: var(--ok-c); }

/* ---------------------------------------------------------------- giriş */
.authcard { background: var(--surface); border: 1px solid var(--outline); border-radius: 22px; padding: 30px; box-shadow: var(--shadow); margin-top: 30px; }
.auth-hero { font-size: 42px; width: 72px; height: 72px; border-radius: 22px; background: var(--primary-c); display: grid; place-items: center; margin-bottom: 14px; }
.links { text-align: center; margin-top: 16px; color: var(--muted); }

/* ---------------------------------------------------------------- avatar ve kişiler */
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-c); color: var(--on-primary-c); display: inline-grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; font-family: var(--serif); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 34px; height: 34px; font-size: .85rem; }
.avatar.lg { width: 84px; height: 84px; font-size: 2rem; }
.person { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--outline); }
.person:last-child { border-bottom: 0; }
.person .name { font-weight: 600; }
.person .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------- akış kartı */
.feed { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.feed + .feed { margin-top: 18px; }
.post { background: var(--surface); border: 1px solid var(--outline); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-head .who { font-weight: 600; color: var(--text); }
.post-head .when { color: var(--muted); font-size: .85rem; }
.post-head .vis { margin-left: auto; color: var(--muted); font-size: .8rem; }
.post-map { position: relative; background: var(--surface-mid); aspect-ratio: 16 / 10; overflow: hidden; }
.post-map svg { width: 100%; height: 100%; display: block; }
.post-map .tag { position: absolute; left: 12px; top: 12px; background: color-mix(in srgb, var(--surface) 90%, transparent); padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.photos { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; background: #000; }
.photos img { height: 260px; width: auto; max-width: none; scroll-snap-align: start; cursor: zoom-in; }
.photos.single img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.post-stats { display: flex; gap: 0; border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline); background: var(--surface-low); }
.post-stats div { flex: 1; padding: 10px 12px; text-align: center; border-right: 1px solid var(--outline); }
.post-stats div:last-child { border-right: 0; }
.post-stats b { display: block; font-family: var(--serif); font-size: 1.15rem; }
.post-stats span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.post-body { padding: 12px 14px; }
.post-body .title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.post-body .caption { white-space: pre-wrap; }
.post-actions { display: flex; gap: 4px; padding: 4px 8px 10px; }
.post-actions button, .post-actions a { border: 0; background: none; padding: 8px 10px; border-radius: 999px; cursor: pointer; color: var(--text); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.post-actions button:hover, .post-actions a:hover { background: var(--surface-mid); text-decoration: none; }
.post-actions .liked { color: var(--tertiary); }
.comments { border-top: 1px solid var(--outline); padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.comment { display: flex; gap: 10px; }
.comment .bubble { background: var(--surface-mid); border-radius: 14px; padding: 8px 12px; flex: 1; }
.comment .bubble b { font-size: .9rem; }
.comment .meta { font-size: .78rem; color: var(--muted); display: flex; gap: 10px; margin-top: 2px; }
.comment .meta button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: .78rem; }
.commentform { display: flex; gap: 8px; }
.tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.tabs button { border: 1px solid var(--outline); background: var(--surface); padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.tabs button.on { background: var(--primary); color: var(--on-primary); border-color: transparent; }

/* ---------------------------------------------------------------- harita */
.mapwrap { position: relative; height: calc(100vh - 61px); display: grid; grid-template-columns: 340px 1fr; }
.mapside { background: var(--surface); border-right: 1px solid var(--outline); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.mapbox { position: relative; }
.mapbox .map { position: absolute; inset: 0; }
.map { width: 100%; height: 100%; min-height: 260px; border-radius: inherit; }
.mapcard { height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--outline); position: relative; }
.mapcard.tall { height: 480px; }
.maptools { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; background: var(--surface); padding: 6px; border-radius: 999px; box-shadow: var(--shadow); border: 1px solid var(--outline); }
.drawpanel { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 92%; }
.listitem { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.listitem:hover { background: var(--surface-mid); }
.listitem .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-c); flex: none; }
.listitem .t { font-weight: 600; line-height: 1.25; }
.listitem .s { color: var(--muted); font-size: .82rem; }
.maplibregl-popup-content { background: var(--surface); color: var(--text); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.livemarker { width: 46px; height: 46px; }   /* position: absolute MapLibre’den gelir; relative verilirse işaretçiler alt alta kayar */
.livemarker .dot { position: absolute; inset: 9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35); overflow: hidden; background: var(--primary); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.livemarker .dot img { width: 100%; height: 100%; object-fit: cover; }
.livemarker .arrow { position: absolute; inset: 0; transform-origin: 50% 50%; }
.livemarker .arrow::before { content: ""; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid var(--tertiary); }
.livemarker.stale { opacity: .5; }
.notemarker { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--tertiary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); display: grid; place-items: center; cursor: pointer; }
.notemarker span { transform: rotate(45deg); font-size: 14px; }

/* ---------------------------------------------------------------- grafik, tablo, liste */
.chart { width: 100%; height: 180px; display: block; cursor: crosshair; }
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.t th, table.t td { padding: 8px 10px; border-bottom: 1px solid var(--outline); text-align: left; }
table.t th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.t tr:hover td { background: var(--surface-low); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--outline); }
.checklist li.done span { text-decoration: line-through; color: var(--muted); }
.checklist .kind { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--secondary-c); color: var(--on-secondary-c); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--surface-high); }
.pill.s0 { background: var(--surface-high); } .pill.s1 { background: var(--secondary-c); color: var(--on-secondary-c); }
.pill.s2 { background: var(--tertiary-c); } .pill.s3 { background: var(--primary-c); color: var(--on-primary-c); } .pill.s4 { opacity: .6; }
.weather { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.weather .w { background: var(--surface-low); border: 1px solid var(--outline); border-radius: 12px; padding: 8px 10px; text-align: center; }
.weather .w .e { font-size: 24px; }
.weather .w .tm { font-size: .78rem; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty.big { padding: 80px 20px; }
.empty-ico { font-size: 48px; margin-bottom: 8px; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.4em; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; z-index: 1000; box-shadow: var(--shadow); max-width: 90%; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 900; display: grid; place-items: center; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 94vh; }
dialog { border: 1px solid var(--outline); border-radius: 20px; padding: 0; background: var(--surface); color: var(--text); width: min(560px, 94vw); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(10, 20, 12, .45); }
dialog .dhead { padding: 16px 20px 0; }
dialog .dbody { padding: 12px 20px; max-height: 70vh; overflow-y: auto; }
dialog .dfoot { padding: 12px 20px 18px; display: flex; gap: 8px; justify-content: flex-end; }
.skeleton { background: linear-gradient(90deg, var(--surface-mid), var(--surface-high), var(--surface-mid)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; min-height: 20px; }
@keyframes sk { 0% { background-position: 0 0 } 100% { background-position: -200% 0 } }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bars .b i { display: block; width: 100%; background: var(--primary); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bars .b span { font-size: .7rem; color: var(--muted); }
.cattree { list-style: none; padding-left: 0; margin: 0; }
.cattree ul { list-style: none; padding-left: 16px; margin: 0; border-left: 1px dashed var(--outline); }
.cattree li > div { padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.cattree li > div:hover { background: var(--surface-mid); }
.cattree li > div.on { background: var(--secondary-c); color: var(--on-secondary-c); font-weight: 600; }

@media (max-width: 960px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .mainnav { display: none; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--outline); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: .72rem; color: var(--muted); gap: 2px; }
  .bottomnav a span { font-size: 20px; }
  .bottomnav a.on { color: var(--primary); font-weight: 700; }
  .mapwrap { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: calc(100vh - 61px - 62px); }
  .mapside { max-height: 40vh; order: 2; border-right: 0; border-top: 1px solid var(--outline); }
  .page { padding: 16px 12px 90px; }
  .photos img { height: 200px; }
  .bare .page { padding-bottom: 30px; }
}

/* ---- Aydınlatma metni / yasal sayfalar ---- */
.page.narrow-auth:has(> .legal) { max-width: 880px; }
.legal { line-height: 1.6; }
.legal h2 { scroll-margin-top: 70px; border-top: 1px solid var(--outline); padding-top: 14px; }
.legal h3 { font-size: 1rem; margin: 1em 0 .3em; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .94rem; }
.legal table th, .legal table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--outline); }
.legal table.tbl thead th { background: var(--surface-mid); font-weight: 600; }
.legal table.kv th { width: 32%; color: var(--muted); font-weight: 500; }
.legal ol[type="a"] li, .legal ul li { margin: 3px 0; }
.legal .notice { padding: 12px 14px; border-radius: 12px; margin: 10px 0 16px; background: #FFF4D6; color: #5a4300; border: 1px solid #E8C873; }
@media (max-width: 640px) {
  .legal table { font-size: .86rem; }
  .legal table th, .legal table td { padding: 6px 6px; }
  .legal table.kv th { width: 38%; }
}
@media print {
  .topbar, .toast, .noprint, .legal .notice { display: none !important; }
  body, .card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .page.narrow-auth { max-width: none; }
  .legal a { color: #000; }
}
.legal-box { font-size: .86rem; color: var(--muted); background: var(--surface-mid); border-radius: 12px; padding: 10px 12px; line-height: 1.5; }
.legal-box a { display: inline-block; margin-top: 4px; font-weight: 600; }
.legal-links { text-align: center; font-size: .82rem; color: var(--muted); margin-top: 6px; }
.sitefoot { text-align: center; font-size: .8rem; color: var(--muted); padding: 18px 12px 28px; }
.sitefoot a { color: var(--muted); }

/* ---- Canlı takip: kendim, izleme linkleri, herkese açık izleme sayfası ---- */
.livemarker.self .dot { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent), 0 1px 6px rgba(0,0,0,.35); }
.livemarker.self::after { content: "Sen"; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 11px; font-weight: 700; background: var(--primary); color: #fff; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.linkrow { border: 1px solid var(--outline); border-radius: 12px; padding: 10px; background: var(--surface); }
.linkurl { font-family: ui-monospace, monospace; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livebadge { display: inline-block; margin-top: 3px; font-size: .82rem; color: var(--muted); }
.livebadge.on { color: #1f8a4c; font-weight: 600; }
.livestats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.livestats > div { background: var(--surface-mid); border-radius: 10px; padding: 8px 10px; }
.livestats span { display: block; font-size: .74rem; color: var(--muted); }
.livestats b { font-size: 1rem; }
.viewerdot { width: 16px; height: 16px; border-radius: 50%; background: #2a7de1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(42,125,225,.25); }
.page.narrow-auth:has(> [data-page="livepublic"]) { max-width: 960px; }
@media (max-width: 640px) { .page.narrow-auth:has(> [data-page="livepublic"]) .mapcard.tall { height: 60vh; } }

/* ---- Harita katman seçici ---- */
.maplayers { position: relative; }
.maplayers-btn { width: 29px; height: 29px; display: grid !important; place-items: center; color: #333; }
.maplayers-panel { position: absolute; right: 36px; top: 0; width: 272px; max-height: 70vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--outline); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 10px; z-index: 5; }
.ml-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 2px 6px; }
.ml-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.maplayers-panel .ml-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--outline); font-size: .76rem; text-align: center; background: var(--surface-low); }
.maplayers-panel .ml-item:hover { background: var(--surface-mid); }
.maplayers-panel .ml-item.on { border-color: var(--primary); background: var(--primary-c); color: var(--on-primary-c); font-weight: 600; }
.ml-ico { font-size: 1.25rem; line-height: 1.2; }
.ml-check { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: .88rem; cursor: pointer; }
.ml-foot { font-size: .72rem; color: var(--muted); margin-top: 6px; }
/* Koyu temada harita kontrolleri */
[data-theme="dark"] .maplibregl-ctrl-group { background: #233027; }
[data-theme="dark"] .maplibregl-ctrl-group button + button { border-top-color: #3a453c; }
[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] .maplayers-btn { color: #e2e6df; }
[data-theme="dark"] .maplibregl-ctrl-attrib, [data-theme="dark"] .maplibregl-ctrl-scale { background: rgba(23,34,27,.8); color: #cfd6cc; }
[data-theme="dark"] .maplibregl-ctrl-attrib a { color: #cfd6cc; }
[data-theme="dark"] .maplibregl-popup-content { background: var(--surface); color: var(--text); }
[data-theme="dark"] .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }

/* ---- Not düzenleyici ---- */
dialog.editor { width: min(1080px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
dialog.editor[open] { display: flex; }
dialog.editor .dhead { padding: 14px 20px 10px; border-bottom: 1px solid var(--outline); }
dialog.editor .dhead h2 { margin: 0; font-size: 1.25rem; }
dialog.editor .editor-body { max-height: none; flex: 1; overflow-y: auto; padding: 16px 20px; }
dialog.editor .dfoot { border-top: 1px solid var(--outline); align-items: center; }
.egrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
.egrid > .ecol:only-child { grid-column: 1 / -1; }
.ecol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.efield { display: flex; flex-direction: column; gap: 6px; }
.elabel { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.icongrid .ic { all: unset; box-sizing: border-box; cursor: pointer; height: 40px; display: grid; place-items: center; font-size: 1.3rem; border-radius: 10px; border: 1px solid var(--outline); background: var(--surface-low); transition: transform .1s; }
.icongrid .ic:hover { transform: translateY(-1px); background: var(--surface-mid); }
.icongrid .ic.on { border: 2px solid var(--primary); background: var(--primary-c); }
.icongrid .ic.custom { font-size: 1rem; color: var(--muted); }
textarea.autogrow { min-height: 130px; resize: vertical; line-height: 1.55; }
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.months .m { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 7px 0; border-radius: 999px; border: 1px solid var(--outline); font-size: .82rem; }
.months .m.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.chip .x { all: unset; cursor: pointer; margin-left: 6px; opacity: .7; font-size: .8em; }
.chip .x:hover { opacity: 1; }
.editor-map { height: 300px; }
.locinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.locinfo > div { background: var(--surface-mid); border-radius: 10px; padding: 8px 10px; }
.locinfo span { display: block; font-size: .72rem; color: var(--muted); }
.locinfo b { font-size: .92rem; }
.dropzone { border: 2px dashed var(--outline-strong); border-radius: 14px; padding: 16px; text-align: center; cursor: pointer; background: var(--surface-low); transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.over { background: var(--primary-c); border-color: var(--primary); }
.mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.mtile { position: relative; border: 1px solid var(--outline); border-radius: 12px; overflow: hidden; background: var(--surface-low); }
.mtile img, .mtile video, .mtile .mico { width: 100%; height: 86px; object-fit: cover; display: grid; place-items: center; font-size: 1.8rem; background: var(--surface-mid); }
.mtile .mlabel { padding: 5px 7px; }
.mtile .mlabel .t { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile .mlabel .s { font-size: .68rem; color: var(--muted); }
.mtile .x { all: unset; cursor: pointer; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 11px; }
.mprog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.15); }
.mprog i { display: block; height: 100%; background: var(--primary); transition: width .2s; }
label.toggle { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--outline); border-radius: 12px; cursor: pointer; }
label.toggle input { margin-top: 3px; }
@media (max-width: 820px) { .egrid { grid-template-columns: 1fr; } dialog.editor { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } }

/* ---- Saha notları ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search] { flex: 1 1 240px; }
.toolbar select { flex: 0 1 220px; }
.notegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.notecard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); overflow: hidden; color: inherit; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; }
.notecard:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 6px 22px rgba(30,40,20,.12); }
.notecard .nimg { height: 150px; background: var(--surface-mid); }
.notecard .nimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notecard .nimg.empty { display: grid; place-items: center; font-size: 2.6rem; background: var(--topo), linear-gradient(135deg, var(--primary-c), var(--surface-mid)); }
.notecard .nbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.notecard .ntitle { font-weight: 700; line-height: 1.3; }
.notecard .nmeta { font-size: .78rem; color: var(--muted); }
.notecard .nex { margin: 4px 0 0; font-size: .86rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.metarow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; color: var(--muted); font-size: .86rem; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--surface-mid); border: 1px solid var(--outline); font-size: .8rem; color: var(--text); }
a.tag:hover { text-decoration: none; background: var(--primary-c); }
.hicon { margin-right: 8px; }
.notebody { white-space: pre-wrap; line-height: 1.65; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.kv span { color: var(--muted); }
.wx { white-space: nowrap; font-size: .86rem; }
.listitem .wx { margin-left: auto; font-weight: 600; }
.wxline { font-size: .86rem; }
.wxline .wx { white-space: normal; }
.coordrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 8px; align-items: center; }
label.toggle { flex-direction: row !important; font-weight: 400; }
label.toggle b { font-weight: 600; }
.maplayers-panel label.ml-check { flex-direction: row !important; font-weight: 500; margin: 0; }
.maplayers-panel label.ml-check input { width: auto; margin: 0; }
.minigrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--topo), linear-gradient(135deg, var(--primary-c), var(--surface-mid)); display: grid; place-items: center; color: inherit; }
.mini:hover { text-decoration: none; filter: brightness(1.04); }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini .mi { font-size: 1.9rem; }
.mini .mt { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: .72rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.editor.narrow { width: min(760px, 96vw); }

/* ---- Birleşik harita: sekmeler, canlı çipler, ◎ ---- */
.sidetabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-mid); border-radius: 12px; position: sticky; top: -14px; z-index: 2; margin: -2px 0 2px; }
.sidetabs button { all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 8px 6px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--muted); display: inline-flex; gap: 6px; justify-content: center; align-items: center; }
.sidetabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.livecount { background: #1f8a4c; color: #fff; border-radius: 999px; font-size: .7rem; padding: 1px 7px; min-width: 18px; }
.mapside .pane { display: flex; flex-direction: column; gap: 12px; }
.mapside .pane[hidden] { display: none; }
.listitem.on { background: var(--primary-c); }
.livechips { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100% - 120px); overflow-x: auto; padding: 6px; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--outline); border-radius: 999px; box-shadow: var(--shadow); z-index: 3; scrollbar-width: none; }
.livechips[hidden] { display: none; }
.lchip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-low); border: 1px solid var(--outline); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.lchip:hover { background: var(--surface-mid); }
.lchip.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.lchip.on small { opacity: .85; font-weight: 500; }
.lchip.me:not(.on) { border-color: var(--primary); }
.lchip.stale { opacity: .6; }
.lchip.all { padding: 4px 12px; }
.avatar.xs { width: 24px; height: 24px; font-size: 11px; }
.me-btn { width: 29px; height: 29px; display: grid !important; place-items: center; color: #333; }
[data-theme="dark"] .me-btn { color: #e2e6df; }
.mapbox.drawing .livemarker { pointer-events: none; }
.livemarker { cursor: pointer; }
@media (max-width: 760px) { .livechips { bottom: 8px; max-width: calc(100% - 16px); } }
.stagebadge { font-style: normal; font-family: var(--sans); font-size: .62rem; font-weight: 800; letter-spacing: .08em; background: var(--tertiary); color: #fff; padding: 2px 6px; border-radius: 6px; margin-left: 2px; align-self: center; }
[data-theme="dark"] .stagebadge { color: #2a1400; }
.stagenote { display: inline-block; margin-bottom: 4px; color: var(--tertiary); font-weight: 600; }
/* ---- İndirme sayfası ---- */
.page.narrow-auth:has(> .download) { max-width: 640px; }
.dl-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.dl-head h1 { margin: 0; }
.dl-head img { border-radius: 18px; }
.dl-btn { font-size: 1.05rem; padding: 12px 22px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.store { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 190px; padding: 10px 16px; border-radius: 14px; background: #111; color: #fff; border: 1px solid #111; text-decoration: none; }
.store:hover { text-decoration: none; }
.store .sico { font-size: 1.5rem; line-height: 1; width: 26px; text-align: center; }
.store small { display: block; font-size: .7rem; opacity: .8; line-height: 1.1; }
.store b { display: block; font-size: 1.05rem; line-height: 1.2; }
.store.apk { background: var(--primary); border-color: var(--primary); }
.store.apk:hover { filter: brightness(1.08); }
.store.soon { background: var(--surface-mid); color: var(--muted); border: 1px dashed var(--outline-strong); cursor: not-allowed; }
.store.soon em { position: absolute; top: -9px; right: -6px; font-style: normal; font-size: .66rem; font-weight: 800; background: var(--tertiary); color: #fff; padding: 2px 8px; border-radius: 999px; }

/* =================================================================== Topluluk v2: kart + sohbet */
.brand span { white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 1.05rem; gap: 8px; } .brand img { width: 28px; height: 28px; } }

.icobtn { border: 0; background: none; color: var(--text); width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.icobtn:hover { background: var(--surface-mid); text-decoration: none; }
.icobtn:disabled { opacity: .4; cursor: default; }
.icobtn.sm { width: 36px; height: 36px; }
.icobtn.xs { width: 28px; height: 28px; }
.icobtn.liked { color: #e5484d; }
.icobtn.pop { transform: scale(1.25); }
.linklike { border: 0; background: none; padding: 2px 0; color: var(--muted); cursor: pointer; font: inherit; text-align: left; }
.linklike:hover { color: var(--text); }

.post { border-radius: 22px; }
.post-head { padding: 12px 8px 10px 14px; }
.post-head .ph-txt { flex: 1; min-width: 0; }
.post-head .who { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-head .when { font-size: .8rem; }
.post-media { position: relative; user-select: none; }
.post-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--surface-mid); }
.post-photos::-webkit-scrollbar { display: none; }
.post-photos img { flex: 0 0 100%; width: 100%; aspect-ratio: 1; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; display: block; }
.post-photos.one img { aspect-ratio: auto; max-height: 560px; }
.post-map + .post-photos img { aspect-ratio: 4 / 3; }
.photo-count { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.note-loc { display: flex; align-items: center; gap: 12px; margin: 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--topo), linear-gradient(135deg, var(--primary-c), var(--surface-mid)); }
.note-loc:hover { text-decoration: none; }
.note-loc .nl-ico { font-size: 1.6rem; }
.note-loc b { display: block; }
.note-loc small { color: var(--muted); }
.note-loc .wx { margin-left: auto; font-weight: 600; }
.like-burst { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: #fff; opacity: 0; transform: scale(.4); pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.like-burst svg { width: 96px; height: 96px; }
.like-burst.go { animation: burst .75s ease-out; }
@keyframes burst { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: .95; transform: scale(1.1); } 60% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
.post-actions { padding: 2px 6px 0; align-items: center; gap: 0; }
.post-actions .spacer { flex: 1; }
.post-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.post-body .likes { font-weight: 700; font-size: .92rem; }
.post-body .title { margin: 2px 0 0; }
.post-body .caption { white-space: pre-wrap; line-height: 1.5; }
.post-body .caption.clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.post-date { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.eventbox { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--secondary-c, var(--surface-mid)); color: inherit; }
.eventbox:hover { text-decoration: none; }
.eventbox > span:first-child { font-size: 1.6rem; }
.eventbox b, .eventbox small { display: block; }
.eventbox small { color: var(--muted); }

.popmenu { position: absolute; z-index: 1000; min-width: 190px; background: var(--surface); border: 1px solid var(--outline); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
.popmenu button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--text); }
.popmenu button:hover { background: var(--surface-mid); }
.popmenu button.danger { color: var(--error, #c62828); }

/* sohbet */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat.inline { border-top: 1px solid var(--outline); }
.chat-list { flex: 1; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.chat.inline .chat-list { max-height: 60vh; }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 30px 10px; color: var(--text); }
.chat-day { text-align: center; margin: 12px 0 6px; }
.chat-day span { font-size: .72rem; color: var(--muted); background: var(--surface-mid); padding: 3px 10px; border-radius: 999px; }
.msg { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; }
.msg.first { margin-top: 10px; }
.msg.me { justify-content: flex-end; }
.msg-av { width: 30px; flex: 0 0 30px; }
.msg-col { display: flex; flex-direction: column; max-width: min(78%, 460px); min-width: 0; }
.msg.me .msg-col { align-items: flex-end; }
.msg-name { font-size: .74rem; font-weight: 700; color: var(--primary); margin: 0 0 2px 12px; }
.msg-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.msg-bubble { padding: 8px 13px; background: var(--surface-mid); color: var(--text); border-radius: 18px; white-space: pre-wrap; word-break: break-word; line-height: 1.4; font-size: .95rem; }
.msg.me .msg-bubble { background: var(--primary); color: var(--on-primary); }
.msg:not(.first):not(.me) .msg-bubble { border-top-left-radius: 6px; }
.msg:not(.last):not(.me) .msg-bubble { border-bottom-left-radius: 6px; }
.msg.me:not(.first) .msg-bubble { border-top-right-radius: 6px; }
.msg.me:not(.last) .msg-bubble { border-bottom-right-radius: 6px; }
.msg.last:not(.me) .msg-bubble { border-bottom-left-radius: 6px; }
.msg.me.last .msg-bubble { border-bottom-right-radius: 6px; }
.msg-time { font-size: .68rem; color: var(--muted); margin: 3px 8px 0; }
.msg-more { opacity: 0; color: var(--muted); }
.msg:hover .msg-more, .msg-more:focus { opacity: 1; }
@media (hover: none) { .msg-more { opacity: .55; } }
.chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--surface-low); border-top: 1px solid var(--outline); }
.chat-input textarea { flex: 1; resize: none; border: 1px solid var(--outline); background: var(--surface); border-radius: 22px; padding: 10px 16px; font: inherit; line-height: 1.35; min-height: 44px; max-height: 140px; outline: none; }
.chat-input textarea:focus { border-color: var(--primary); }
.chat-input .send { background: var(--primary); color: var(--on-primary); width: 44px; height: 44px; flex: 0 0 44px; }
.chat-input .send:hover { background: var(--primary); filter: brightness(1.08); }
.chat-input .send:disabled { background: var(--surface-mid); color: var(--muted); opacity: 1; }
.chat-login { padding: 12px; text-align: center; border-top: 1px solid var(--outline); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--outline); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* alttan açılan pencere (masaüstünde ortada) */
dialog.sheet { padding: 0; border: 0; width: min(560px, 100vw); height: min(760px, 88vh); max-height: none; border-radius: 22px; background: var(--surface); color: var(--text); display: none; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.sheet[open] { display: flex; }
dialog.sheet::backdrop { background: rgba(10,20,12,.45); }
dialog.sheet .chat { flex: 1; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 12px 8px 10px 18px; border-bottom: 1px solid var(--outline); }
.sheet-head > div { flex: 1; min-width: 0; }
.sheet-head b { display: block; font-size: 1.1rem; }
.sheet-head small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  dialog.sheet { width: 100vw; max-width: 100vw; height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; animation: sheetUp .22s ease-out; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  .chat-input { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* akış: kartlar tam genişlik, sosyal medya gibi */
  .feed { gap: 10px; }
  .feed .post { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; margin: 0 -12px; }
  .chat.inline .chat-list { max-height: none; }
}

/* paylaşım yazma, arkadaşlar, bildirimler */
.post.composer { padding: 14px; }
.composer-pill { flex: 1; text-align: left; border: 1px solid var(--outline); background: var(--surface-low); color: var(--muted); border-radius: 999px; padding: 11px 18px; font: inherit; cursor: pointer; }
.composer-pill:hover { background: var(--surface-mid); color: var(--text); }
.composer-hint { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.narrow-col { max-width: 680px; width: 100%; margin-left: auto; margin-right: auto; }
.searchbox input { border-radius: 999px; padding-left: 18px; }
.person { align-items: center; }
.notif { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; border-bottom: 1px solid var(--outline); }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--surface-low); text-decoration: none; }
.notif.unread { background: color-mix(in srgb, var(--primary-c) 45%, transparent); }
.notif .n-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--surface-mid); display: grid; place-items: center; font-size: 1.25rem; }
.notif .n-txt { flex: 1; min-width: 0; }
.notif .t { font-weight: 600; }
.notif .s { color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif .when { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.notif .n-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: 0 0 9px; }
@media (max-width: 760px) {
  /* paylaşım sayfasında yorum yazma çubuğu alt menünün üstünde sabit */
  .chat.inline .chat-input { position: sticky; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 5; }
}

/* rotalar: telefonda kartlar */
.routecards { display: none; flex-direction: column; gap: 10px; margin-top: 12px; }
.routecard { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; color: inherit; }
.routecard:hover { text-decoration: none; background: var(--surface-low); }
.rc-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--primary-c); display: grid; place-items: center; font-size: 1.3rem; }
.rc-main { flex: 1; min-width: 0; }
.rc-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sub { font-size: .8rem; color: var(--muted); }
.rc-stats { display: flex; gap: 12px; margin-top: 4px; font-size: .86rem; font-weight: 600; }
.rc-vis { color: var(--muted); }
/* kütüphane */
.libgrid { grid-template-columns: minmax(200px, 280px) 1fr; }
.libtree { align-self: start; }
@media (max-width: 760px) {
  .routetable { display: none; }
  .routecards { display: flex; }
  .libgrid { grid-template-columns: 1fr; }
  .libtree { max-height: 240px; overflow-y: auto; }
  /* harita araç çubuğu: soldan başlasın, sağdaki yakınlaştırma düğmelerinin üstüne binmesin */
  .maptools { left: 8px; right: 56px; transform: none; overflow-x: auto; scrollbar-width: none; border-radius: 16px; }
  .maptools::-webkit-scrollbar { display: none; }
  .maptools > * { flex: 0 0 auto; }
  .pagehead { flex-wrap: wrap; gap: 10px; }
}

/* ---- yönetim: hata raporları */
.card.crash .cnt { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--error, #b3261e); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: middle; }
.crash-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.crash-pre { margin: 6px 0 0; padding: 10px 12px; max-height: 360px; overflow: auto; background: var(--surface-mid); border-radius: 10px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.crash-steps { margin: 6px 0 0; padding-left: 22px; font-size: .85rem; max-height: 260px; overflow: auto; }
.crash-steps li { margin: 2px 0; }
.crash-meta span { min-width: 0; overflow-wrap: anywhere; }

/* ---- yönetim rozeti / geri bildirim */
.usermenu summary { position: relative; }
.admin-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--tertiary); border: 2px solid var(--surface); z-index: 1; }
.menu-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--tertiary); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 20px; }
.tabs .tcount { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--tertiary); color: #fff; font-size: .72rem; line-height: 18px; }
.rep-reasons { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.rep-reasons li { font-size: .88rem; padding: 6px 10px; border-radius: 10px; background: var(--surface-mid); }
.rep-reasons li small { color: var(--on-surface-variant, #666); margin-left: 6px; }
.fb-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb-kinds label { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--outline); border-radius: 14px; cursor: pointer; background: var(--surface); }
.fb-kinds label.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.fb-kinds input { display: none; }
.fb-kinds .k-ico { font-size: 1.3rem; }
.fb-kinds b { display: block; }
.fb-kinds small { color: var(--on-surface-variant, #666); }
.fb-item .fb-status { font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.fb-status.s0 { background: color-mix(in srgb, var(--tertiary) 18%, transparent); color: var(--tertiary); }
.fb-status.s1 { background: color-mix(in srgb, #c98a00 20%, transparent); color: #9a6a00; }
.fb-status.s2 { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.fb-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--primary); background: var(--surface-mid); border-radius: 0 10px 10px 0; font-size: .92rem; white-space: pre-wrap; }
.fb-msg { white-space: pre-wrap; margin-top: 6px; word-break: break-word; }
.fb-ctx { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
@media (max-width: 560px) { .fb-kinds label { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; } .fb-kinds small { font-size: .72rem; line-height: 1.25; } }
.tabs.admintabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs.admintabs button { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 560px) { .tabs.admintabs { justify-content: flex-start; margin-left: -12px; margin-right: -12px; padding: 0 12px; } .tabs.admintabs button { padding: 8px 12px; font-size: .9rem; } }