/* nolmuş marka kimliği: siyah/beyaz monokrom, Montserrat Alternates,
   bol beyaz alan, küçük harf Türkçe. Mobil (Flutter) tema ile birebir. */

@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Regular.de8566534b61.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Bold.d25c99d72397.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #0a0a0a;        /* saf siyaha yakın mürekkep */
  --paper: #ffffff;      /* kâğıt beyazı (kart/panel) */
  /* Kart, KOYU temada da açık kalır: aşağıdaki --card-* değişkenleri koyu tema
     bloklarında YENİDEN TANIMLANMAZ, böylece kart hep açık-mod görünümünde kalır. */
  --card-bg: #ffffff;
  --card-ink: #0a0a0a;       /* kart metni (hep koyu) */
  --card-ink-soft: #6b6b6b;  /* kart meta/kaynak/tarih (hep gri) */
  --card-img-bg: #f3f3f3;    /* kart görsel zemini */
  --card-noimg-fg: #c4c4c4;  /* "no photo" ikonu */
  --bg: rgb(244 245 246 / var(--tw-bg-opacity, 1));
  --sidebar-bg: var(--bg);
  --ink-soft: #6b6b6b;   /* ikincil metin */
  --ink-faint: #ededed;  /* çizgi/ayraç */
  --ink-strong: #2a2a2a; /* gövde metni (detay) */
  --hover: #f6f6f6;      /* hover zemini */
  --img-bg: #f3f3f3;     /* görsel/yer tutucu zemini */
  --noimg-fg: #c4c4c4;   /* "no photo" ikonu */
  --card-hover-border: #d8d8d8;
  --scrollbar-thumb: rgba(0, 0, 0, .30);
  --scrollbar-thumb-hover: rgba(0, 0, 0, .48);
  --appbar-h: 60px;
  --navbar-h: 64px;
  --sidebar-w: 400px;
  --maxw: 1280px;
}

/* koyu tema: sistem tercihi (otomatik) ya da elle (data-theme="dark"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1f1f1;
    --paper: #101010;
    --bg: #0a0a0a;
    --sidebar-bg: var(--bg);
    --ink-soft: #9a9a9a;
    --ink-faint: #262626;
    --ink-strong: #cfcfcf;
    --hover: #1b1b1b;
    --img-bg: #1a1a1a;
    --noimg-fg: #4a4a4a;
    --card-hover-border: #3a3a3a;
    --scrollbar-thumb: rgba(255, 255, 255, .26);
    --scrollbar-thumb-hover: rgba(255, 255, 255, .44);
  }
}
:root[data-theme="dark"] {
  --ink: #f1f1f1;
  --paper: #101010;
  --bg: #0a0a0a;
  --sidebar-bg: var(--bg);
  --ink-soft: #9a9a9a;
  --ink-faint: #262626;
  --ink-strong: #cfcfcf;
  --hover: #1b1b1b;
  --img-bg: #1a1a1a;
  --noimg-fg: #4a4a4a;
  --card-hover-border: #3a3a3a;
  --scrollbar-thumb: rgba(255, 255, 255, .26);
  --scrollbar-thumb-hover: rgba(255, 255, 255, .44);
}

* { box-sizing: border-box; }

/* Tüm arayüz durum geçişleri (hover, tema/mod değişimi, lazy-load kartı vb.)
   tek tip ve hızlı: 0.10s. */
* {
  transition: background-color 0.1s ease, color 0.1s ease,
              border-color 0.1s ease, fill 0.1s ease,
              transform 0.1s ease, opacity 0.1s ease;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Montserrat Alternates", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Görünür, tema uyumlu scrollbar (varsayılan thumb soluk/görünmez kalıyordu).
   scrollbar-width:none diyen özel şeritler (appbar__cats, daily__track) daha
   yüksek özgüllükle bunu ezer. */
html { scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }

a { color: inherit; text-decoration: none; }

/* --- sol sabit yan menü (sidebar) ------------------------------------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 144px 24px;
  z-index: 20;
}
.drawer-backdrop {
  display: none;
}

/* --- ana kolon (sidebar'ın sağı) -------------------------------------- */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  min-height: 100dvh;   /* iOS: dvh = görünen alan; 100vh (büyük viewport) sayfayı
                           içerikten uzun yapıp altta boş kaydırma bırakıyordu. */
}

/* --- çubuk içi ortak kapsayıcı: üst ve alt bar aynı sol/sağ hizada ------
   max-width + padding feed (.content) ile birebir → marka/kurlar feed'in
   sol/sağ kenarıyla ve alt navbar ikonlarıyla hizalanır. */
.bar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

/* --- üst çubuk (appbar): solda marka, sağda kur/hava ------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--appbar-h);
  background: var(--bg);
}
.appbar .bar__inner { justify-content: space-between; gap: 20px; }
.appbar__menu {
  display: none;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--card-ink);
  cursor: pointer;
}
.appbar__menu svg {
  width: 22px;
  height: 22px;
}
/* Mobil kategori/ilgi alanı şeridi (hamburgerin sağında). Masaüstünde gizli;
   içerideki çip/buton stilleri yalnızca mobilde görünür (kapsayıcı display:none). */
.appbar__cats { display: none; }
.appbar__cats-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Kenar silinmesi (fade) yalnızca o yönde kaydırılacak içerik varken görünür:
     başta sol kenar, sonda sağ kenar net kalır (ilk/son kategori solmaz). JS
     kaydırma konumuna göre .fade-left / .fade-right ekler. */
  --cats-fade-l: #000;
  --cats-fade-r: #000;
  -webkit-mask-image: linear-gradient(to right, var(--cats-fade-l) 0, #000 18px, #000 calc(100% - 18px), var(--cats-fade-r) 100%);
  mask-image: linear-gradient(to right, var(--cats-fade-l) 0, #000 18px, #000 calc(100% - 18px), var(--cats-fade-r) 100%);
}
.appbar__cats-scroll.fade-left { --cats-fade-l: transparent; }
.appbar__cats-scroll.fade-right { --cats-fade-r: transparent; }
.appbar__cats-scroll::-webkit-scrollbar { display: none; }
.appbar__cat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card-bg);   /* hamburger/arama gibi: iki temada da açık çip */
  color: var(--card-ink);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
}
.appbar__cat.active {
  background: var(--card-ink);  /* aktif: ters renk (koyu çip, açık metin) */
  color: var(--card-bg);
}
.appbar__cat-emoji { font-size: 13px; }
.appbar__cats-settings {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--card-ink);
  text-decoration: none;
}
.appbar__cats-settings svg { width: 20px; height: 20px; }
.appbar .brand {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.appbar__search {
  flex: 0 1 320px;
  margin: 0;
  position: relative;
}
.appbar__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
  transform: translateY(-50%);
}
.appbar__search-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.appbar__search input {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 14px 0 40px;
  outline: none;
}
.appbar__search input::placeholder {
  color: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appbar__search input {
    color: var(--card-ink);
    caret-color: var(--card-ink);
  }
  :root:not([data-theme="light"]) .appbar__search input::placeholder {
    color: var(--card-ink-soft);
  }
}
:root[data-theme="dark"] .appbar__search input {
  color: var(--card-ink);
  caret-color: var(--card-ink);
}
:root[data-theme="dark"] .appbar__search input::placeholder {
  color: var(--card-ink-soft);
}
/* Koyu modda drawer paneli BEYAZ → arama inputu beyaz kalınca silikleşiyor.
   Biraz daha koyu (açık gri) zemin verip belirginleştir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer__tools .appbar__search input {
    background: #e6e6e6;
  }
}
:root[data-theme="dark"] .drawer__tools .appbar__search input {
  background: #e6e6e6;
}
/* üst bar sağı: kurlar + hava, açılır kompakt menüler */
.markets {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  font-weight: 700;
}
.market-menu {
  position: relative;
  color: var(--ink);
}
.market-menu__summary {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.market-menu__summary::-webkit-details-marker { display: none; }
.market-menu__summary::marker { content: ""; }
.market-menu__summary:hover,
.market-menu__summary:focus-visible {
  background: var(--hover);
  outline: none;
}
/* açıkken (open) tetik zemini olmasın — hover/focus/outline dahil (mobil/masaüstü
   fark etmez). !important: drawer'ın #202326 hover'ını da geçsin. */
.market-menu[open] .market-menu__summary,
.market-menu[open] .market-menu__summary:hover,
.market-menu[open] .market-menu__summary:focus,
.market-menu[open] .market-menu__summary:focus-visible {
  background: transparent !important;
  outline: none;
}
.market-menu__code {
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.market-menu__move {
  font-size: 9px;
  line-height: 1;
}
.market-menu__move--up { color: #27b400; }
.market-menu__move--down { color: #f0422f; }
.market-menu__chev {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}
.market-menu[open] .market-menu__chev { transform: rotate(180deg) translateY(1px); }
.market-menu__weather-icon {
  color: #f8bd32;
  font-size: 16px;
  line-height: 1;
}
.market-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 220px;
  max-height: min(360px, calc(100vh - var(--appbar-h) - 24px));
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}
.market-menu__panel--weather { width: 210px; }
.market-menu__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 10px;
}
.market-menu__panel--weather .market-menu__row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.market-menu__row:hover { background: var(--hover); }
.market-menu__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: lowercase;
}
.market-menu__mark,
.market-menu__sun {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex: none;
  text-transform: lowercase;
}
.market-menu__mark { color: #fff; }
.market-menu__mark--usd { background: #1d5fd0; }
.market-menu__mark--eur { background: #174ea6; }
.market-menu__mark--gbp { background: #cf3044; }
.market-menu__mark--gold { background: #ffc64a; color: #fff; }
/* Hava durumu satır ikonu = düz emoji (☀️/🌧️…), sarı daire İÇİNDE değil. */
.market-menu__sun {
  background: none;
  border-radius: 0;
  color: inherit;
  font-size: 17px;
}
.market-menu__mark--btc { background: #f7931a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .market-menu__panel {
    background: var(--card-bg);
    color: var(--card-ink);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  }
  :root:not([data-theme="light"]) .market-menu__panel .market-menu__row:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}
:root[data-theme="dark"] .market-menu__panel {
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}
:root[data-theme="dark"] .market-menu__panel .market-menu__row:hover {
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 560px) {
  .markets { gap: 8px; font-size: 12px; }
  .market-menu__summary { gap: 4px; padding: 0 2px; }
  .market-menu__panel { right: -8px; width: 200px; }
  .market-menu__panel--weather { width: 190px; }
}

/* --- içerik ------------------------------------------------------------ */
.content {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 16px calc(var(--navbar-h) + 24px);
  min-height: calc(100vh - var(--appbar-h));
  min-height: calc(100dvh - var(--appbar-h));   /* iOS: dvh = görünen alan (bkz. .main). */
}

/* --- haber ızgarası ----------------------------------------------------
   Varsayılan: grid (JS yokken sade fallback). JS açıkken `.is-masonry`
   eklenir ve flex-kolon masonry'ye geçer: kartlar sırayla en kısa kolona
   yerleştirildiği için hem kademeli görünür (tek hiza değil) hem de tarih
   sırası (en yeniden eskiye) okuma yönüyle korunur. */
.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  align-items: start;
}
@media (min-width: 600px) { .feed { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .feed { grid-template-columns: repeat(4, 1fr); } }

.feed.is-masonry { display: flex; align-items: flex-start; }
.feed__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.card {
  display: flex;
  flex-direction: column;
  /* arkaplan ve padding yok — görsel + metin doğrudan akışın üstünde durur. */
  background: transparent;
}
.card:hover { transform: translateY(-1px); }
.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* lazy-load ile gelen kartlar 0.10s'de belirir (JS ekleyip bir kare sonra kaldırır) */
.card.is-enter { opacity: 0; }
.card__media {
  display: block;
  flex: none;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: transparent;
}
.card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.72), rgba(255,255,255,0)),
    var(--card-img-bg);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.card__media--loading::before {
  opacity: 1;
  animation: img-loading 1.1s ease-in-out infinite;
}
.card__img {
  display: block;
  width: 100%;
  height: auto;            /* doğal en/boy oranı — kırpma yok */
  background: var(--card-img-bg);
  border-radius: 12px;
  opacity: 0;
  transition: opacity .22s ease;
}
.card__media--loaded .card__img {
  opacity: 1;
}
/* videolu haber kartı: görsel hafif soluk + ortada oynat ikonu. */
.card__media--video.card__media--loaded .card__img { opacity: .7; }
.card__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* tıklama karta/linke geçsin */
  color: #fff;
}
.card__play svg {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.card__media--loaded::before {
  opacity: 0;
  animation: none;
}
@keyframes img-loading {
  to { transform: translateX(100%); }
}
/* görsel yok / yüklenemedi → sade "no photo" ikonu (boş kutu). */
.card__noimg {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-img-bg);
  color: var(--card-noimg-fg);
  border-radius: inherit;
}
.card__noimg[hidden] { display: none; }
.card__noimg svg { width: 40px; height: 40px; }
.card__body {
  padding: 8px 0 0;   /* yan padding yok — metin görselle hizalı */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card__text {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);                /* tema moduna göre (açık/koyu) */
  margin: 0;
  text-transform: lowercase; /* marka dili: küçük harf (html lang=tr → İ/I doğru) */
}
.card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;      /* feed, hemen yanında zaman */
  gap: 8px;
  margin-top: auto;                 /* başlık üstte, feed+zaman altta */
  font-size: 11.5px;
  color: var(--ink-soft);           /* tema moduna göre */
}
.card__time { white-space: nowrap; flex: none; }
/* 10 dk'dan yeni haber: zamanın yanında yanıp sönen kırmızı nokta. */
.card__time--fresh { display: inline-flex; align-items: center; gap: 5px; }
.card__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e11d2e;
  flex: none;
  animation: card-live-blink 1s steps(1, end) infinite;
}
@keyframes card-live-blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card__live-dot { animation: none; }
}
.card__src { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* kaynak adı tıklanabilir (→ /kaynak/<slug>): link stili sıfırlanır, hover'da vurgulanır. */
.card__src--link { color: inherit; text-decoration: none; border-radius: 6px; }
.card__src--link:hover .card__source,
.card__src--link:focus-visible .card__source { color: var(--ink); text-decoration: none; }
.card__logo {
  height: 18px; width: 18px;
  object-fit: contain; display: block; border-radius: 3px; flex: none;
}
.card__source {
  font-weight: 700; text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__text-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* nolmuş modu: AÇIK (varsayılan) => brief göster, brief varsa title gizle;
   KAPALI (html.nolmus-off) => her zaman title, brief gizli. Brief yoksa
   (card__body--has-brief yok) title zaten her modda görünür. */
.card__body--has-brief .card__text--title { display: none; }
.nolmus-off .card__text--brief { display: none; }
.nolmus-off .card__body--has-brief .card__text--title { display: block; }
.card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* özet + kaydet solda; video margin-auto ile sağda */
  gap: 8px;
  padding: 0 12px 12px;
}
.card__action {
  min-width: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--card-ink) 14%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--card-bg) 88%, var(--card-img-bg));
  color: var(--card-ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
}
.card__action svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.card__action--summary {
  justify-content: flex-start;
  color: var(--card-ink-soft);
  padding: 0 8px;
}
/* sağ grup: yer imi + habere git, sağa yaslı */
.card__actions-end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* habere git: ikon-only kare buton (kaydet ile aynı ölçü). */
.card__action--go { width: 30px; padding: 0; color: var(--card-ink-soft); text-decoration: none; }
.card__action--go svg { width: 16px; height: 16px; }
.card__action--summary:hover,
.card__action--summary:focus-visible,
.card__action--go:hover,
.card__action--go:focus-visible {
  border-color: color-mix(in srgb, var(--card-ink) 28%, transparent);
  background: var(--card-img-bg);
}
/* yer imi: ikon-only kare buton; kayıtlıyken dolu (fill) ve koyu renk. */
.card__action--save { width: 30px; padding: 0; color: var(--card-ink-soft); }
.card__action--save svg { width: 16px; height: 16px; }
.card__action--save:hover,
.card__action--save:focus-visible {
  border-color: color-mix(in srgb, var(--card-ink) 28%, transparent);
  background: var(--card-img-bg);
}
.card__action--save.is-saved { color: var(--card-ink); }
.card__action--save.is-saved svg { fill: currentColor; }

.modal-open { overflow: hidden; }
.detail-modal[hidden] { display: none; }
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, .72);
  opacity: 0;
  transition: opacity 0.1s ease;
}
.detail-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100dvh - 36px);
  --ink: var(--card-ink);
  --ink-soft: var(--card-ink-soft);
  --ink-strong: var(--card-ink);
  --paper: var(--card-bg);
  --bg: var(--card-bg);
  --hover: var(--card-img-bg);
  --ink-faint: color-mix(in srgb, var(--card-ink) 14%, transparent);
  background: var(--card-bg);
  color: var(--card-ink);
  border-radius: 12px;
  overflow: hidden;
  overflow-y: auto;            /* okuma modunda uzun metin kaydırılabilsin */
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.detail-modal.is-open .detail-modal__backdrop,
.detail-modal.is-open .detail-modal__panel {
  opacity: 1;
}
.detail-modal.is-open .detail-modal__panel {
  transform: translateY(0) scale(1);
}
/* Gövde: sunucudan çekilen detay parçası (.detail) buraya enjekte edilir;
   detay sayfasıyla AYNI markup + stil (tema duyarlı). */
.detail-modal__body { padding: 20px 18px 26px; }
/* Detay sayfasındaki .detail genişlik/margin'i panelin içinde tam otursun. */
.detail-modal__body .detail { max-width: none; margin: 0; }
/* kapat butonu sağ üstte sabit; üst bardaki araçlar onun altına girmesin. */
.detail-modal__body .detail__bar { margin-top: 0; padding-right: 42px; }
/* yükleniyor/hata durumu (fetch sırasında). */
.detail-modal__body .reader__state { padding: 40px 8px; text-align: center; color: var(--card-ink-soft); }
.detail-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.detail-modal__close svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 640px) {
  .detail-modal {
    align-items: center;
    padding: 10px;
  }
  .detail-modal__panel {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .detail-modal__body { padding: 16px 14px 22px; }
}

/* --- haber popup'ı (read mode / normal) -------------------------------- */
.read-modal[hidden] { display: none; }
.read-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.read-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, .72);
  opacity: 0;
  transition: opacity .1s ease;
}
.read-modal__panel {
  position: relative;
  width: min(1120px, 100%);
  height: min(880px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .1s ease, transform .1s ease;
}
.read-modal.is-open .read-modal__backdrop,
.read-modal.is-open .read-modal__panel { opacity: 1; }
.read-modal.is-open .read-modal__panel { transform: translateY(0) scale(1); }

.read-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 46px 10px 12px;   /* sağda köşedeki kapat (X) için yer bırak */
  border-bottom: 1px solid var(--ink-faint);
  background: var(--paper);
}
.read-modal__src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: lowercase;
}
.read-modal__src > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-modal__logo { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex: none; }
.read-modal__cat { color: inherit; text-decoration: none; white-space: nowrap; flex: none; }
.read-modal__cat:hover { color: var(--ink); }
.read-modal__time { color: var(--ink-soft); white-space: nowrap; flex: none; }
.read-modal__tools { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* okuma modu toggle (ikon): okuma modunda aktif (enable efekt) — dolu/ink;
   normal görünümde pasif (disable efekt) — soluk. */
/* Okuma modu toggle'ı her yüzeyde gizli (popup, video popup, detay, video sayfası).
   JS mantığı/küresel okuma modu bayrağı durur; yalnızca buton görünmez. */
.read-modal__mode { display: none !important; }
.read-modal__mode {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.read-modal__mode svg { width: 16px; height: 16px; }
.read-modal__mode:hover { opacity: 1; color: var(--ink); border-color: var(--ink-soft); }
.read-modal__mode.is-active {
  opacity: 1;
  color: var(--ink);
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.read-modal__tool {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--ink-faint);
  border-radius: 7px;
  /* buton zemini beyaz (koyu temada siyah) — --paper ışık/koyu arası döner. */
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: lowercase;
  cursor: pointer;
}
.read-modal__tool:hover { color: var(--ink); background: var(--hover); }
.read-modal__tool svg { width: 15px; height: 15px; flex: none; }
.read-modal__save { width: 30px; padding: 0; }
.read-modal__save.is-saved { color: var(--ink); }
.read-modal__save.is-saved svg { fill: currentColor; }
.read-modal__close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;            /* bar'ın üstünde, köşede */
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.read-modal__close:hover { color: var(--ink); background: var(--hover); }
.read-modal__close svg { width: 18px; height: 18px; }
/* habere git — chip görünümü .read-modal__tool'dan gelir (üst bar + içerik altı). */
.read-modal__go { text-decoration: none; }
.reader__foot { margin-top: 20px; }

.read-modal__body { flex: 1; min-height: 0; position: relative; }
.read-modal__frame { width: 100%; height: 100%; border: 0; background: #fff; }
/* normal mod yüklenirken uyarı (okuma modu durumu gibi). */
.read-modal__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 700;
}
.read-modal__loading[hidden] { display: none; }

/* okuma görünümü içeriği */
.read-modal__reader {
  height: 100%;
  overflow-y: auto;
  padding: 22px clamp(16px, 5vw, 40px) 32px;
}
.reader__lead { width: 100%; border-radius: 12px; margin-bottom: 18px; display: block; }
.reader__lead--video { max-height: 60vh; background: #000; object-fit: contain; }
.reader__title { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0 0 14px; text-transform: lowercase; }
.reader p { font-size: 16px; line-height: 1.62; color: var(--ink-strong); margin: 0 0 14px; }
.reader h2 { font-size: 18px; font-weight: 800; margin: 22px 0 10px; }
.reader h3 { font-size: 16px; font-weight: 800; margin: 18px 0 8px; }
.reader blockquote {
  margin: 0 0 14px; padding: 4px 0 4px 14px;
  border-left: 3px solid var(--ink-faint); color: var(--ink-soft); font-style: italic;
}
.reader__li { padding-left: 16px; position: relative; }
.reader__li::before { content: "•"; position: absolute; left: 2px; color: var(--ink-soft); }
.reader__go { display: inline-block; margin-top: 8px; font-weight: 800; }
.reader__state { padding: 40px 0; text-align: center; color: var(--ink-soft); font-weight: 700; }

@media (max-width: 640px) {
  /* mobilde de desktop gibi ortalı panel; 100dvh tarayıcı çubuğu kırpmasını azaltır. */
  .read-modal { align-items: center; padding: 10px; }
  .read-modal__panel {
    width: 100%;
    height: min(760px, calc(100vh - 20px));
    height: min(760px, calc(100dvh - 20px));
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 12px;
  }
  .read-modal__bar { padding: 8px 42px 8px 10px; gap: 8px; }
  .read-modal__tools { gap: 5px; }
  .read-modal__tool { padding: 0 8px; }
  .read-modal__tool span { display: none; }            /* etiketleri gizle, ikon kalsın */
  .read-modal__tools .read-modal__go { width: 30px; padding: 0; }  /* habere git de ikon-only */
  /* detay sayfası/popup ALTTAKİ habere git: ikon değil, etiketli buton kalsın. */
  .detail__foot .read-modal__go span { display: inline; }
  .detail__foot .read-modal__go { width: auto; padding: 0 14px; }
  /* detay üst çubuğu: araçlar (özet · yer imi · habere git) HER ZAMAN ikinci satırda
     (kaynak satırının altında), tam genişlik. özet etiketli kalsın (ikon + özet);
     yer imi ve habere git ikon-only. */
  /* `.detail__bar` öneki: temel `.detail__tools{flex:0 1 auto}` kuralı dosyada
     bu media query'den SONRA geldiği için (eşit özgüllük → sonraki kazanır)
     özgüllüğü yükseltiyoruz, yoksa ikinci satıra geçmiyor. */
  .detail__bar .detail__tools { flex: 0 0 100%; justify-content: flex-start; }
  /* Detay üst-çubuk butonları mobilde KÜÇÜLMESİN — etiketler görünür, padding ve
     font standart (masaüstü) kalır (kullanıcı isteği). yer imi ikon-only kalır. */
  .detail__tools .read-modal__tool { width: 30px; padding: 0; }
  .detail__tools .read-modal__tool span { display: none; }
  /* kaynak·lokasyon·zaman ve kategori satırı fontu mobilde de standart. */
  .detail__source, .detail__categories { font-size: 12.5px; }
  .read-modal__src { font-size: 12.5px; }
  .read-modal__time { display: none; }                 /* dar ekranda zamanı gizle, yer aç */
  .read-modal__reader { padding: 16px 16px 28px; }
  .reader__lead { margin-bottom: 14px; }
  .reader__title { font-size: 20px; }
  .reader p { font-size: 15.5px; line-height: 1.6; }
  .reader h2 { font-size: 17px; }
}

/* --- 'özet' popup'ı ---------------------------------------------------- */
.sum-modal[hidden] { display: none; }
.sum-modal {
  position: fixed;
  inset: 0;
  z-index: 110;          /* video modalının (100) üstünde */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.sum-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, .72);
  opacity: 0;
  transition: opacity 0.1s ease;
}
.sum-modal__panel {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 20px 22px 22px;
  background: var(--card-bg);
  color: var(--card-ink);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.sum-modal.is-open .sum-modal__backdrop,
.sum-modal.is-open .sum-modal__panel { opacity: 1; }
.sum-modal.is-open .sum-modal__panel { transform: translateY(0) scale(1); }
.sum-modal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 800;
  font-size: 15px;
  text-transform: lowercase;
  color: var(--card-ink);
}
.sum-modal__head svg { width: 18px; height: 18px; flex: none; }
.sum-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--card-ink);
  cursor: pointer;
}
.sum-modal__close svg { width: 18px; height: 18px; }
.sum-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sum-list li {
  position: relative;
  padding-left: 18px;
  line-height: 1.55;
  font-size: 15px;
  color: var(--card-ink);
}
.sum-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
}
.sum-modal__state {
  color: var(--card-ink-soft);   /* kart hep açık → meta gri sabit (tema bağımsız) */
  font-size: 14px;
}
/* "özet hazırlanıyor…" — metnin başında dönen küçük spinner. */
.sum-modal__state--loading { display: flex; align-items: center; gap: 9px; }
.sum-modal__spinner {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, var(--card-ink) 18%, transparent);
  border-top-color: var(--card-ink-soft);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@media (max-width: 640px) {
  .sum-modal { align-items: center; padding: 10px; }
  .sum-modal__panel {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 16px 18px;
  }
}

/* --- videolar sayfası -------------------------------------------------- */
.video-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}
.video-watch {
  position: sticky;
  top: calc(var(--appbar-h) + 12px);
  min-width: 0;
  max-height: calc(100dvh - var(--appbar-h) - var(--navbar-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0;
  scrollbar-width: thin;
  transition: padding-right 0.1s ease;
}
.video-watch.has-scroll {
  padding-right: 10px;
}
.video-watch__frame {
  background: #050505;
  border-radius: 8px;
  overflow: hidden;
}
.video-watch__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - var(--appbar-h) - 230px);
  background: #000;
}
.video-watch__copy {
  padding: 18px 0 0;
}
.video-watch__copy .detail {
  max-width: none;   /* oynatıcıyla aynı genişlik — araçlar sağ kenara hizalansın */
  margin: 0;
}
/* enjekte edilen detay parçasının üst çubuğu kopya alanının en üstünde dursun. */
.video-watch__copy .detail__bar { margin-top: 0; }
.video-watch__copy .reader__state { padding: 24px 4px; text-align: center; color: var(--ink-soft); }
.video-watch__copy .detail__source {
  margin: 18px 0;
}
.video-watch__copy .detail__desc,
.video-watch__copy .detail__link {
  text-transform: lowercase;
}
.video-rail {
  min-width: 0;
  padding-right: 6px;   /* haber listesi scrollbara yapışmasın */
}
.video-rail__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-item {
  width: 100%;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.video-item:hover,
.video-item:focus-visible,
.video-item.is-active {
  background: var(--paper);
  border-color: var(--ink-faint);
}
.video-item__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--img-bg);
}
.video-item__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.video-item__noimg {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--noimg-fg);
  background: var(--img-bg);
}
.video-item__thumb--noimg .video-item__noimg {
  display: flex;
}
.video-item__noimg svg {
  width: 34px;
  height: 34px;
}
.video-item__body {
  min-width: 0;
  display: block;
}
.video-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: lowercase;
}
.video-item__source {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.video-item__source span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-item__time {
  margin-left: auto;
  white-space: nowrap;
  flex: none;
}
.video-item__logo {
  height: 16px;
  width: 16px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  flex: none;
}
.video-item__title {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: lowercase;
}
.video-item__title--news { display: none; }
.nolmus-off .video-item__title--brief { display: none; }
.nolmus-off .video-item__title--news { display: block; }
@media (max-width: 980px) {
  /* tek kolon: oynatıcı üstte, liste altta. */
  .video-page {
    grid-template-columns: 1fr;
  }
  .video-watch {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    /* oynatıcı/copy ile liste arasını ayır (çok bitişik durmasın). */
    border-bottom: 1px solid var(--ink-faint);
    padding-bottom: 16px;
    margin-bottom: 4px;
  }
  .video-watch.has-scroll { padding-right: 0; }
  /* oynatıcı ekranı kaplamasın (özellikle yatay/landscape): yükseklik tavanı. */
  .video-watch__player { max-height: 70dvh; }
  .video-watch__copy { padding-top: 14px; }
  /* liste: yatay kartlar 2 kolon (tabletten geniş telefona). */
  .video-rail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }
}
@media (max-width: 620px) {
  .video-page { gap: 14px; }
  /* dar ekranda tek kolon liste, daha küçük thumbnail. */
  .video-rail__list { display: flex; }
  .video-item { grid-template-columns: 104px minmax(0, 1fr); }
  .video-watch__player { max-height: 56dvh; }
}

/* --- alt navigasyon çubuğu (navbar) — yalnızca ana kolonu kaplar ------- */
.navbar {
  position: fixed;
  bottom: 0; left: var(--sidebar-w); right: 0;
  z-index: 10;
  height: var(--navbar-h);
  background: var(--bg);
}
.navbar .bar__inner { justify-content: space-around; align-items: stretch; }
.navbar a,
.navbar__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
/* nolmuş modu toggle navbar'da bir <button>; <a> ile aynı görünsün. */
.navbar__toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.navbar a.active,
.navbar__toggle.active { color: var(--ink); }
.navbar__toggle:not(.active) { color: var(--ink-soft); opacity: 0.58; }
.nolmus-icon text {
  fill: currentColor;
  stroke: none;
  paint-order: stroke;
}
.navbar__toggle.active .nolmus-icon text {
  fill: #0a0a0a;
  stroke: #e00000;
  stroke-width: 0.9px;
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar__toggle.active .nolmus-icon text {
    fill: var(--ink);
    stroke: none;
  }
}
:root[data-theme="dark"] .navbar__toggle.active .nolmus-icon text {
  fill: var(--ink);
  stroke: none;
}
.navbar svg { width: 26px; height: 26px; }

.scrolltop {
  position: fixed;
  right: 18px;
  bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom) + 18px);
  z-index: 30;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.scrolltop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scrolltop svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  transform: rotate(-90deg);
}

/* --- yan menü içeriği (sidebar gövdesi) -------------------------------- */
.drawer__panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  color: #f6f7f8;
  border-radius: 20px;
  padding: 20px 18px 14px;
}

.drawer__brand {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  color: #f6f7f8;
  margin: 2px 12px 18px;
}
.drawer__brand-text {
  flex: 0 0 auto;
  font-size: 28px;
  font-weight: 700;
  line-height: .9;
  text-align: center;
}
.drawer__brand::after {
  content: "";
  flex: 1 1 auto;
  height: 24px;
  min-width: 0;
  background: currentColor;
  opacity: .42;
  transform: translateY(2px);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44'%3E%3Cpath d='M0 23C54 11 99 12 142 22c55 13 105 15 178-10-66 35-116 39-178 24C98 25 54 20 0 23Z' fill='%23000'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44'%3E%3Cpath d='M0 23C54 11 99 12 142 22c55 13 105 15 178-10-66 35-116 39-178 24C98 25 54 20 0 23Z' fill='%23000'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Yan menü araç bölümü (arama + kur/hava) — yalnızca MOBİLDE görünür.
   Masaüstünde bunlar üst barda kalır; burası gizli. */
.drawer__tools { display: none; }
.drawer__tools .appbar__search { flex: none; width: 100%; }
.drawer__tools .markets {
  position: relative;               /* açılır panel tam genişlik için referans */
  width: 100%;
  justify-content: space-between;   /* solda kur, sağda hava */
  gap: 8px;
}
/* tetik (summary) drawer panelinin AÇIK metnini izlesin (siyah zeminde okunur);
   açılan beyaz dropdown ise kendi KOYU metnini kullansın. açılır panel drawer'da
   taşmasın diye market-menu'yu static yapıp paneli kur/hava satırına göre konumlarız. */
.drawer__tools .market-menu { color: inherit; position: static; }
.drawer__tools .market-menu__panel { color: #0a0a0a; }
.drawer__tools .market-menu__panel {
  left: 0;
  right: 0;
  width: auto;
  top: calc(100% + 8px);
}
.drawer__tools .market-menu__summary:hover,
.drawer__tools .market-menu__summary:focus-visible {
  background: #202326;
}

.drawer__header {
  display: flex; align-items: center;
  padding: 0;
}
.drawer__header .label { flex: 1; font-weight: 700; font-size: 14px; }
.drawer__header .emoji { width: 30px; text-align: center; font-size: 20px; }
.drawer__markets { width: 100%; }
.drawer__markets .markets {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  color: #f6f7f8;
}
.drawer__panel .markets__rate,
.drawer__panel .markets__weather {
  color: #f6f7f8;
}
.drawer__panel .markets__rate .sym {
  color: #505961;
}
.drawer__markets .markets__rates {
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}
.drawer__markets .markets__weather {
  height: 48px;
  display: flex;
  padding: 0 12px;
}
.drawer__markets .markets__weather svg {
  width: 16px;
  height: 16px;
}

.drawer__list { flex: 1; overflow-y: auto; padding-bottom: 8px; }
/* sabit keşfet menüsü: solda keşfet linki, sağda ilgi alanları ayar butonu. */
.drawer__explore { display: flex; align-items: center; gap: 4px; }
.drawer__explore .drawer__explore-link { flex: 1 1 auto; min-width: 0; }
.drawer__explore .emoji svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
.drawer__explore .icon-btn { flex: none; }
.interest {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0;
  padding: 13px 20px;
  border-radius: 8px;
  font-weight: 700; font-size: 13px;
  text-transform: lowercase;          /* her şey küçük harf */
  color: #969ea5;                     /* siyah panel üstünde okunur açık gri */
}
.interest:hover { background: #202326; color: #f6f7f8; }
/* aktif kategori: kâğıt rengi kutuyla vurgulu (sidebar'dan açık → öne çıkar) */
.interest.active { background: #202326; color: #f6f7f8; }
.interest .emoji { width: 26px; text-align: center; font-size: 18px; }

/* kullanıcı satırı — footer'ın üstünde: avatar + ad + çıkış / "giriş yapılmadı". */
.drawer__user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.drawer__user-link {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.drawer__user-link:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.drawer__user-name {
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer__footer {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--navbar-h);
  padding: 0 0;
}
.drawer__footer-left,
.drawer__footer-right { display: inline-flex; gap: 4px; }
.drawer__logout { margin: 0; }

/* genel ikon düğmesi (başlık tune + footer info/tema/ayarlar) */
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: #969ea5;
  border-radius: 999px;
}
.icon-btn:hover { background: #202326; color: #f6f7f8; }
/* İkon boyutu öğeden bağımsız sabit (button/a fark etmesin). */
.icon-btn svg { width: 24px; height: 24px; display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer__panel {
    background: #fff;
    color: #0a0a0a;
  }

  :root:not([data-theme="light"]) .drawer__brand,
  :root:not([data-theme="light"]) .drawer__markets .markets,
  :root:not([data-theme="light"]) .drawer__panel .markets__rate,
  :root:not([data-theme="light"]) .drawer__panel .markets__weather {
    color: #0a0a0a;
  }

  :root:not([data-theme="light"]) .drawer__panel .markets__rate .sym,
  :root:not([data-theme="light"]) .interest,
  :root:not([data-theme="light"]) .icon-btn {
    color: #6b6b6b;
  }

  :root:not([data-theme="light"]) .interest:hover,
  :root:not([data-theme="light"]) .interest.active,
  :root:not([data-theme="light"]) .icon-btn:hover,
  :root:not([data-theme="light"]) .drawer__tools .market-menu__summary:hover,
  :root:not([data-theme="light"]) .drawer__tools .market-menu__summary:focus-visible {
    background: #f6f6f6;
    color: #0a0a0a;
  }
}

:root[data-theme="dark"] .drawer__panel {
  background: #fff;
  color: #0a0a0a;
}

:root[data-theme="dark"] .drawer__brand,
:root[data-theme="dark"] .drawer__markets .markets,
:root[data-theme="dark"] .drawer__panel .markets__rate,
:root[data-theme="dark"] .drawer__panel .markets__weather {
  color: #0a0a0a;
}

:root[data-theme="dark"] .drawer__panel .markets__rate .sym,
:root[data-theme="dark"] .interest,
:root[data-theme="dark"] .icon-btn {
  color: #6b6b6b;
}

:root[data-theme="dark"] .interest:hover,
:root[data-theme="dark"] .interest.active,
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .drawer__tools .market-menu__summary:hover,
:root[data-theme="dark"] .drawer__tools .market-menu__summary:focus-visible {
  background: #f6f6f6;
  color: #0a0a0a;
}

.theme-icon,
.theme-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.theme-icon__sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon__moon { display: none; }
  :root:not([data-theme="light"]) .theme-icon__sun { display: block; }
}

:root[data-theme="dark"] .theme-icon__moon { display: none; }
:root[data-theme="dark"] .theme-icon__sun { display: block; }

:root[data-theme="light"] .theme-icon__moon { display: block; }
:root[data-theme="light"] .theme-icon__sun { display: none; }

/* --- durumlar (boş / hata / yükleniyor) ------------------------------- */
.state {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 80px 16px; text-align: center;
}
.state[hidden] { display: none; }
.state__title { font-weight: 700; font-size: 16px; color: var(--ink-soft); }
.state__sub { font-size: 14px; color: var(--ink-soft); }
.btn {
  margin-top: 4px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.btn:hover { background: var(--hover); }

.sentinel { height: 1px; }
.loader {
  display: none;
  justify-content: center;
  padding: 24px;
  color: var(--ink-soft);
}
.loader.is-active { display: flex; }
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--noimg-fg);
  border-top-color: var(--ink-soft);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- haber detayı ------------------------------------------------------ */
.detail { max-width: 720px; margin: 0 auto; }
/* üst çubuk — popup gibi: solda kaynak·kategori·tarih, sağda araçlar. */
.detail__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.detail__bar .detail__source { margin: 0; }
.detail__tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  /* araçlar HER ZAMAN kaynak·kategori satırının ALTINDA (tam genişlik → yeni satır),
     ekran genişliğinden bağımsız. */
  flex: 0 0 100%;
  flex-wrap: wrap;
  max-width: 100%;
}
.detail__tools .read-modal__tool {
  width: 30px;
  padding: 0;
  gap: 0;
}
.detail__tools .read-modal__tool span { display: none; }
.detail__foot { margin-top: 22px; }

/* takip et — araç çubuğundaki açılır menü */
.follow { position: relative; display: inline-flex; }
.follow__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 200px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
}
/* hidden attribute'ün display:none'ı .follow__menu'nun display:flex'ini ezebilmeli */
.follow__menu[hidden] { display: none; }
.follow__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
}
.follow__opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.follow__opt-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; color: var(--ink-soft);
}
.follow__opt-icon svg { width: 16px; height: 16px; }
/* dropdown ikonları üst çubuktakiyle aynı: kaynak logosu (img) + kategori emojisi. */
.follow__opt-logo { width: 17px; height: 17px; object-fit: contain; border-radius: 4px; display: block; }
.follow__opt-emoji { font-size: 15px; line-height: 1; }
.follow__opt-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 700; text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.follow__opt-check {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.follow__opt.is-following .follow__opt-check { background: var(--ink); border-color: var(--ink); }
.follow__opt.is-following .follow__opt-check::after {
  content: "✓"; color: var(--paper); font-size: 12px; font-weight: 800; line-height: 1;
}

/* Detay araç butonları (özet · takip et + dropdown · paylaş + dropdown · kaydet ·
   habere git) KOYU temada da AÇIK mod renklerinde kalır — kart paleti gibi (kartlar da
   koyu temada açık kalır). Değişkenler yalnız buton kaplarında ezilir; haber metni
   (.detail__classic / .detail__reader) bundan ETKİLENMEZ, tema rengini korur. Detay
   popup'ı zaten paneli açık palete çeviriyor (.detail-modal__panel) — orada bu, aynı
   değerlerle no-op'tur. */
.detail__tools,
.detail__foot {
  --paper: var(--card-bg);
  --ink: var(--card-ink);
  --ink-soft: var(--card-ink-soft);
  --ink-strong: var(--card-ink);
  --hover: var(--card-img-bg);
  --ink-faint: color-mix(in srgb, var(--card-ink) 14%, transparent);
}

/* paylaş — takip et ile aynı açılır menü yapısı */
.share { position: relative; display: inline-flex; }
.share__menu {
  position: absolute;
  top: calc(100% + 6px);
  /* paylaş butonu araç satırının sağ tarafında (habere git'in solunda) olduğundan
     menü SAĞA hizalanıp sola doğru açılır — sayfadan sağa taşmaz. */
  right: 0;
  left: auto;
  z-index: 60;
  min-width: 200px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
}
.share__menu[hidden] { display: none; }
.share__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
}
.share__opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.share__opt-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--ink);
}
.share__opt-icon svg { width: 17px; height: 17px; }
.share__opt-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 700; text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share__opt.is-done .share__opt-name { color: var(--ink-soft); }

/* özet alınamadı → tekrar dene butonu (kart paletli sum-modal içinde). */
.sum-modal__retry {
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--card-ink) 16%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--card-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-transform: lowercase;
  cursor: pointer;
}
.sum-modal__retry:hover { background: var(--card-img-bg); }

/* kaynak/kategori sayfası üstündeki takip et barı */
.followbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; padding: 10px 8px 10px 14px;
  border: 1px solid var(--ink-faint); border-radius: 14px; background: var(--paper);
}
.followbar__id {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
}
.followbar__logo {
  flex: none; width: 22px; height: 22px; object-fit: contain;
  border-radius: 5px; display: block;
}
.followbar__emoji { flex: none; font-size: 19px; line-height: 1; }
.followbar__name {
  font-weight: 700; font-size: 15px; text-transform: lowercase; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.followbar__btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: inherit; font-weight: 700; font-size: 13.5px; text-transform: lowercase;
  transition: background .12s, color .12s;
}
.followbar__ico { width: 16px; height: 16px; }
/* takip ediliyor: içi boş (outline) hale gelir, + ikonu gizlenir */
.followbar__btn.is-following { background: transparent; color: var(--ink); }
.followbar__btn.is-following .followbar__ico { display: none; }
.detail__img {
  width: 100%; border-radius: 16px;
  margin-bottom: 20px;
  max-height: 400px;
  object-fit: cover;
}
/* haber videoluysa görsel yerine inline oynatıcı; dik videolar için yükseklik sınırı. */
.detail__video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: 16px;
  margin-bottom: 20px;
  background: #000;
  object-fit: contain;
}
.detail__brief { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; text-transform: lowercase; }
.detail__brief--title { display: none; }
.nolmus-off .detail__brief--brief { display: none; }
.nolmus-off .detail__brief--title { display: block; }
.detail__desc { font-size: 16px; line-height: 1.55; color: var(--ink-strong); }
.detail__desc--rss { display: none; }
.nolmus-off .detail__desc--summary { display: none; }
.nolmus-off .detail__desc--rss { display: block; }
.detail__source {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 18px 0; font-weight: 700; color: var(--ink-soft);
  font-size: 12.5px;
}
.detail__logo {
  height: 17px; width: 17px;
  object-fit: contain; display: block; border-radius: 4px; flex: none;
}
.detail__source > span,
.detail__source-name,
.detail__loc,
.detail__category {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  line-height: 20px;
}
.detail__source-name,
.detail__category { color: inherit; text-decoration: none; border-radius: 6px; }
.detail__source-name:hover,
.detail__source-name:focus-visible,
.detail__category:hover,
.detail__category:focus-visible { color: var(--ink); background: none; }
.detail__loc { color: var(--ink-soft); }
.detail__time { white-space: nowrap; }
/* kategori satırı — kaynak·lokasyon·zaman satırının ALTINDA, tam genişlik (kendi
   satırı; .detail__bar flex-wrap). Kategoriler arası "·" ayraç CSS ile. */
.detail__categories {
  flex: 0 0 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  font-weight: 700; color: var(--ink-soft); font-size: 12.5px;
}
.detail__categories .detail__category + .detail__category::before {
  content: "·"; margin: 0 .5em; color: var(--ink-soft);
}
.detail__summary {
  order: -1;              /* her zaman en solda */
  margin-right: 6px;      /* diğer öğelerden ayrı dursun */
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--ink-faint);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
}
.detail__summary:hover,
.detail__summary:focus-visible {
  color: var(--ink);
  background: var(--hover);
}
.detail__summary svg {
  width: 15px;
  height: 15px;
  flex: none;
}
/* yer imi (kaydet) — özet'in yanında kare ikon buton. Kasıtlı olarak .detail__summary
   SINIFINI ALMAZ (o sınıf özet popup handler'ını tetiklerdi); chip görünümü burada
   bağımsız tanımlı. Tema mürekkebini kullanır (kart değişkenleri koyu temada uyumsuz). */
.detail__save {
  order: -1;             /* özet'in yanında, solda */
  margin-right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.detail__save svg { width: 16px; height: 16px; flex: none; }
.detail__save:hover,
.detail__save:focus-visible { color: var(--ink); background: var(--hover); }
.detail__save.is-saved { color: var(--ink); }
.detail__save.is-saved svg { fill: currentColor; }
.detail__link {
  display: inline-block; margin-top: 16px;
  border-radius: 999px;
  padding: 0; font-weight: 700;
}
.detail__link:hover { background: var(--hover); }

/* --- ipuçları (tooltip) — öğenin ÜSTÜNDE belirir ----------------------
   Native title yerine: data-tip="metin". Üstte (top) açılır, ok aşağı bakar.
   Sağ kenardaki öğeler taşmasın diye [data-tip-end] tooltip'i sağa yaslar. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--bg);
  font-family: "Montserrat Alternates", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
}
[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  pointer-events: none;
  opacity: 0;
  z-index: 60;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
/* sağ kenara yaslı varyant (ör. yan menü hesap düğmesi) */
[data-tip][data-tip-end]::after {
  left: auto; right: 0;
  transform: translateX(0) translateY(4px);
}
[data-tip][data-tip-end]::before {
  left: auto; right: 14px;
  transform: translateX(0) translateY(4px);
}
[data-tip][data-tip-end]:hover::after, [data-tip][data-tip-end]:focus-visible::after,
[data-tip][data-tip-end]:hover::before, [data-tip][data-tip-end]:focus-visible::before {
  transform: translateX(0) translateY(0);
}
/* dokunmatik (mobil) cihazlarda hover yok → tooltip yarım/kırpık görünüyordu; gizle. */
@media (hover: none) {
  [data-tip]::after, [data-tip]::before { display: none !important; }
}
/* aşağı açılan varyant (üstte kırpılacak yerlerde, ör. popup üst barı) — ok yukarı. */
[data-tip][data-tip-down]::after {
  top: calc(100% + 8px);
  bottom: auto;
}
[data-tip][data-tip-down]::before {
  top: calc(100% + 3px);
  bottom: auto;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}

/* Yan menü ters renkli (açık temada siyah, koyu temada beyaz) — tooltip de tersi. */
.drawer__panel [data-tip]::after { background: #f6f7f8; color: #0a0a0a; }
.drawer__panel [data-tip]::before { border-top-color: #f6f7f8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer__panel [data-tip]::after { background: #0a0a0a; color: #f6f7f8; }
  :root:not([data-theme="light"]) .drawer__panel [data-tip]::before { border-top-color: #0a0a0a; }
}
:root[data-theme="dark"] .drawer__panel [data-tip]::after { background: #0a0a0a; color: #f6f7f8; }
:root[data-theme="dark"] .drawer__panel [data-tip]::before { border-top-color: #0a0a0a; }

/* --- üyelik (giriş / kayıt / şifremi unuttum) -------------------------- */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.auth__card {
  width: 100%;
  max-width: 360px;
  background: var(--paper);
  border-radius: 20px;
  padding: 32px 28px;
}
.auth__brand {
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 22px;
}
.auth__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
  text-transform: lowercase;
}
/* giriş / kayıt sekmeleri (tek sayfa) */
.auth__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ink-faint);
}
.auth__tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 0;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  text-transform: lowercase;
}
.auth__tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.auth__panel { display: none; }
.auth__panel.active { display: block; }
.auth__sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 22px;
  line-height: 1.45;
}
.auth__form { display: flex; flex-direction: column; gap: 14px; }
.auth__field { display: flex; flex-direction: column; gap: 6px; }
.auth__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: lowercase;
}
.auth__input {
  height: 44px;
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 0 14px;
  outline: none;
}
.auth__input::placeholder { color: var(--ink-soft); font-weight: 400; }
.auth__input:focus { border-color: var(--ink); }
.auth__row { display: flex; justify-content: flex-end; margin-top: -4px; }
.auth__inline-link {
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
}
.auth__inline-link:hover { text-decoration: none; }
.auth__btn {
  margin-top: 6px;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-transform: lowercase;
}
.auth__btn:hover { opacity: 0.88; }
.auth__alt {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.auth__alt a { color: var(--ink); font-weight: 700; }
.auth__alt a:hover { text-decoration: none; }
.auth__note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.auth__error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdecec;
  color: #b42318;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}
:root[data-theme="dark"] .auth__error { background: #2a1414; color: #f5a3a3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth__error { background: #2a1414; color: #f5a3a3; }
}

/* --- profil ------------------------------------------------------------ */
.profile {
  max-width: 420px;
  margin: 0 auto;
  background: var(--paper);   /* giriş formuyla aynı kart zemini */
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.profile__avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
}
.profile__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--img-bg);
  display: block;
}
.profile__avatar--initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
}
/* hidden özelliği gerçekten gizlesin (class display'i ezmesin): resim seçilince
   initials gizlenip önizleme görünsün, avatar yokken önizleme gizli kalsın. */
.profile__avatar[hidden],
.profile__avatar--initials[hidden] { display: none; }
/* sağ alt köşedeki kalem (fotoğrafı değiştir) */
.profile__avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--paper);  /* kart zeminine uysun */
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.profile__avatar-edit svg { width: 15px; height: 15px; display: block; }
.profile__avatar-edit:hover { opacity: 0.88; }
.profile__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.profile__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin-bottom: 16px;
}
.profile__name {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  text-transform: lowercase;
}
.profile__handle { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 2px 0 0; }
.profile__form {
  position: relative;   /* live-save durum rozeti (settings__status) için */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

/* yan menüdeki mini avatar (profil ikonunun yerine) */
.avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.avatar-mini--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #505961;
  color: #f6f7f8;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
/* --- günün özeti karuseli (keşfet) -------------------------------------
   Bugünün haberleri viral_score'a göre, yatay scroll-snap slider; normal
   kartlar ama sabit yükseklikli görselle hizalı slaytlar. */
.daily {
  margin-bottom: 26px;
  padding: 26px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
}
.daily__title { font-size: 16px; font-weight: 800; text-transform: lowercase; margin: 0 0 12px; display: none; }
/* arkaplan paneli: karusel ayrı bir blok; yan boşluklar oklara yer açar (oklar
   panelin İÇİNDE durur), overflow gizli → kartlar panel dışına taşmaz. */
.daily__wrap {
  position: relative;
  /* background: #e8e9ea; */
  border-radius: 16px;
  padding: 0 58px;
  overflow: hidden;
}
.daily__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.daily__track::-webkit-scrollbar { display: none; }
/* track'e tam 4 kart sığar (3 boşluk × 14px = 42px) → yarım kart yok */
.daily__slide { flex: 0 0 calc((100% - 42px) / 4); scroll-snap-align: start; }
/* dar ekranda 4 kart çok küçük kalır → 2 kart */
@media (max-width: 720px) { .daily__slide { flex: 0 0 calc((100% - 14px) / 2); } }
/* kartlar eşit yükseklikte (track stretch); gövde esner, özet/video satırı en alta
   sabitlenir → tüm kartlarda butonlar aynı hizada. */
.daily__slide .card { height: 100%; display: flex; flex-direction: column; }
.daily__slide .card__body { flex: 1 1 auto; }
/* karusel kartında görsel sabit yükseklik → slaytlar düzgün hizalı */
.daily__slide .card__media { height: 150px; }
.daily__slide .card__img { height: 150px; object-fit: cover; }
.daily__slide .card__media--loading { min-height: 150px; }
.daily__slide .card__noimg {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.daily__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: #ffffff;
  color: #0a0a0a;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, .18); */
}
.daily__nav svg { width: 20px; height: 20px; }
.daily__nav--prev { left: 0; }
.daily__nav--prev svg { transform: rotate(180deg); }
.daily__nav--next { right: 0; }
/* dokunmatik (kaydırarak gezilir) cihazlarda okları gizle; yan boşluğu daralt */
@media (hover: none) { .daily__nav { display: none; } .daily__wrap { padding: 0 12px; } }

/* --- liste görünümü (üye tercihi: cards-list) --------------------------
   Masonry yerine tek kolon, ilan sitesi tarzı YATAY kart: solda küçük görsel
   (sabit en, cover-crop thumbnail; tüm kart yüksekliğini kaplar), sağda üstte
   kaynak+başlık, altta aksiyonlar. JS `.feed` üstüne `.is-list` ekler. */
.cards-list .feed { display: block; }
.cards-list .feed.is-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* kartlar içeriğe göre değil, akışın TAM genişliğinde */
  gap: 12px;
}
.cards-list .feed.is-list .card {
  width: 100%;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-rows: 1fr;          /* tek satır kartın tüm yüksekliğini doldursun */
  grid-template-areas: "media body";
  align-items: stretch;
  min-height: 116px;
}
/* sol görsel: sabit en, tüm kart yüksekliğini kaplar, cover-crop küçük thumbnail.
   Görsel MUTLAK konumlanır → kartın yüksekliğini metin+aksiyon belirler, görselin
   doğal boyu değil (uzun görsel kartı şişirip butonları yukarı itmesin). */
.cards-list .feed.is-list .card__link { grid-area: media; position: relative; }
.cards-list .feed.is-list .card__media {
  position: absolute;
  inset: 8px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}
.cards-list .feed.is-list .card__media::before { inset: 0; border-radius: 10px; }
.cards-list .feed.is-list .card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* doğal oranı değil — düzgün thumbnail için kırp */
  border-radius: 10px;
}
.cards-list .feed.is-list .card__noimg {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 10px;
}
.cards-list .feed.is-list .card__body {
  grid-area: body;
  padding: 4px 0 4px 14px;   /* görselden ayırmak için sadece sol boşluk */
  /* başlık ile feed+zaman arasında ölçülü boşluk, blok dikeyde ortalı */
  justify-content: center;
  gap: 14px;
}
.cards-list .feed.is-list .card__meta { margin-top: 0; }
/* uzun metni ~3 satıra kırp — kartlar derli toplu kalsın. NOT: -webkit-line-clamp
   `display:-webkit-box` ister; bu da nolmuş aç/kapa için kullanılan `display:none`
   görünürlük geçişini ezerdi (brief+title birlikte görünürdü). Bu yüzden display'e
   dokunmayan max-height + overflow ile kırpıyoruz. */
.cards-list .feed.is-list .card__text {
  max-height: calc(1.35em * 3);
  overflow: hidden;
}

/* --- hakkımızda / kvkk / gizlilik (sekmeli statik sayfa) ----------------- */
.about { max-width: 680px; margin: 0 auto; }
.about__brand {
  font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -.5px; text-transform: lowercase;
  margin: 0 0 16px;
}
.about__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.about__tab {
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  background: none;
  border: 1.5px solid transparent;
  text-transform: lowercase;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.about__tab:hover { color: var(--ink); }
.about__tab.is-active {
  color: var(--ink);
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.about__panel {
  background: var(--paper);
  border-radius: 18px;
  padding: 6px 22px 24px;
}
.about__panel[hidden] { display: none; }
.about__lead {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  margin: 18px 0 6px;
}
.about__panel h2 {
  font-size: 15px; font-weight: 800;
  text-transform: lowercase;
  margin: 22px 0 8px;
}
.about__panel p {
  font-size: 14px; line-height: 1.65;
  color: var(--ink-strong);
  margin: 8px 0;
}
.about__panel ul { margin: 8px 0; padding-left: 18px; }
.about__panel li {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-strong);
  margin: 4px 0;
}
.about__panel strong { color: var(--ink); font-weight: 800; }
.about__panel a { color: var(--ink); font-weight: 700; }
.about__updated { font-size: 12.5px; color: var(--ink-soft); margin-top: 20px; }

/* --- ayarlar sayfası ---------------------------------------------------- */
.settings { max-width: 560px; margin: 0 auto; }

/* anlık kayıt durumu — panel içinde sağ üstte belirip solar (kaydet butonu yok) */
.settings__status {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: lowercase;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.settings__status.is-on { opacity: 1; }
.settings__status.is-error { color: #c0392b; }

/* kart paneli: bölümler ince ayraçla ayrılır */
/* ayarlar alt-gezinmesi: genel / ilgi alanların / kaynakların */
.settings__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.settings__nav-link {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  text-transform: lowercase;
  border: 1.5px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
}
.settings__nav-link:hover { color: var(--ink); }
.settings__nav-link.is-active {
  color: var(--ink);
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.settings__form {
  position: relative;
  background: var(--paper);
  border-radius: 18px;
  padding: 4px 22px;
}
.settings__group { padding: 22px 0; }
.settings__group + .settings__group { border-top: 1px solid var(--ink-faint); }
.settings__group-head { margin-bottom: 14px; }
.settings__title { font-size: 15px; font-weight: 800; margin: 0; text-transform: lowercase; }
.settings__hint { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 3px 0 0; }

/* kart görünümü seçimi: iki eşit kutu (ızgara / liste) */
.settings__layouts { display: flex; gap: 12px; }
.layout-opt { flex: 1; cursor: pointer; }
.layout-opt input { position: absolute; opacity: 0; pointer-events: none; }
.layout-opt__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 20px 10px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: lowercase;
  transition: border-color .12s, color .12s, background .12s;
}
.layout-opt__face svg { width: 26px; height: 26px; display: block; }
.layout-opt:hover .layout-opt__face { border-color: var(--ink-soft); }
.layout-opt input:checked + .layout-opt__face {
  border-color: var(--ink);
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.layout-opt input:focus-visible + .layout-opt__face { outline: 2px solid var(--ink); outline-offset: 2px; }

/* bildirim tercihleri: tam genişlik satır + sağda anahtar */
.switches { display: flex; flex-direction: column; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  cursor: pointer;
}
.switch-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.switch-row__label { font-size: 14px; font-weight: 700; text-transform: lowercase; }
.switch-row .switch { position: absolute; opacity: 0; pointer-events: none; }
.switch-row__track {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 20%, var(--paper));
  transition: background .15s;
}
.switch-row__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .15s;
}
.switch-row .switch:checked ~ .switch-row__track { background: var(--ink); }
.switch-row .switch:checked ~ .switch-row__track::after { transform: translateX(18px); }
.switch-row .switch:focus-visible ~ .switch-row__track { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ilgi alanları: tıklanınca seçilen çipler */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip__face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: lowercase;
  transition: border-color .12s, color .12s, background .12s;
}
.chip__emoji { font-size: 15px; line-height: 1; }
.chip__logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  flex: none;
}
.settings__filter-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-bottom: 12px;
}
.settings__filter-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--ink-soft);
  pointer-events: none;
}
.settings__filter-icon svg { width: 16px; height: 16px; }
.settings__filter {
  width: 100%;
  padding: 11px 16px 11px 40px;   /* solda ikon için yer */
  border: 1.5px solid var(--ink-soft);
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.settings__filter::placeholder { color: var(--ink-soft); }
.settings__filter:focus-visible {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.settings__filter-wrap:focus-within .settings__filter-icon { color: var(--ink); }
.chip:hover .chip__face { border-color: var(--ink-soft); }
.chip input:checked + .chip__face {
  border-color: var(--ink);
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.chip input:focus-visible + .chip__face { outline: 2px solid var(--ink); outline-offset: 2px; }

/* çip: seç (etiket) + engelle (köşe düğmesi) — iki durumlu */
.chip-item { position: relative; display: inline-flex; }
.chip__ban {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1.5px solid var(--ink-faint);
  opacity: .5;                /* dokunmatikte de erişilebilir; hover/engelli'de tam */
  transition: opacity .12s, color .12s, border-color .12s, background .12s;
}
.chip-item:hover .chip__ban,
.chip-item:focus-within .chip__ban { opacity: 1; }
.chip__ban-input { position: absolute; opacity: 0; pointer-events: none; }
.chip__ban-icon { width: 12px; height: 12px; }
/* açıklamadaki satır-içi örnek rozet (konumlanmasın, akışta dursun) */
.chip__ban--inline {
  position: static;
  width: 16px;
  height: 16px;
  opacity: 1;
  vertical-align: middle;
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}
.chip__ban--inline .chip__ban-icon { width: 10px; height: 10px; }
/* engelli durum: çip üstü çizili + soluk, köşe rozeti kırmızı dolu */
.chip-item.is-blocked .chip__face {
  border-color: color-mix(in srgb, #c0392b 55%, var(--ink-faint));
  color: var(--ink-soft);
  background: transparent;
  text-decoration: line-through;
  opacity: .6;
}
.chip-item.is-blocked .chip__ban {
  opacity: 1;
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}
.chip__ban-input:focus-visible ~ .chip__ban-icon { outline: 2px solid var(--ink); outline-offset: 2px; }

/* liste düzeni: her öğe tek satır; engelle düğmesi solda ayrı durur */
.chips--list { flex-direction: column; flex-wrap: nowrap; gap: 8px; align-items: stretch; max-width: 460px; }
.chips--list .chip-item { display: flex; align-items: center; gap: 10px; width: 100%; }
.chips--list .chip { flex: 1 1 auto; min-width: 0; }
.chips--list .chip__face { width: 100%; border-radius: 12px; justify-content: flex-start; }
.chips--list .chip__ban {
  order: -1;                 /* satırın soluna al */
  position: static;
  flex: none;
  width: 34px;
  height: 34px;
  opacity: 1;                /* liste düzeninde her zaman görünür */
}
.chips--list .chip__ban-icon { width: 15px; height: 15px; }

/* logosuz kaynaklar için yer tutucu simge (gazete ikonu) */
.chip__logo--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.chip__logo--ph svg { width: 13px; height: 13px; }

/* kendi ilgi alanların: serbest-metin ekleme + kaldırılabilir etiket çipleri */
.custom-int__add {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 420px;
  margin-bottom: 12px;
}
.custom-int__add .settings__filter { padding-left: 16px; }   /* ikon yok */
.btn--sm {
  margin-top: 0;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  font-size: 13px;
  white-space: nowrap;
}
.btn--sm:hover { background: var(--ink-soft); }
.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 14px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: lowercase;
}
.chip-tag__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.chip-tag__x:hover { background: #c0392b; color: #fff; }
.interest--custom .emoji svg { width: 17px; height: 17px; }

/* --- dar ekran (mobil): sabit yan menü pratik değil, gizle --------------
   "menü açılır olmasın" gereği toggle yok; dar ekranda yan menü gizlenir,
   ana kolon tam genişlik olur. (İleride dar ekran için ayrı çözüm.) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1024px), (max-width: 980px) and (max-height: 560px) {
  .sidebar {
    top: 0;
    width: min(320px, calc(100vw - 56px));
    padding: 18px 14px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .1s ease;
    background: transparent;
  }
  .drawer-open .sidebar {
    transform: translateX(0);
  }
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    border: 0;
    background: rgba(0, 0, 0, .36);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
  }
  .drawer-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .main { margin-left: 0; }
  .content {
    width: 100%;
    max-width: none;
  }
  .feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .appbar {
    position: fixed;
    left: 0;
    right: 0;
    background: var(--bg);
  }
  .appbar .bar__inner {
    gap: 10px;
  }
  .appbar__menu {
    display: inline-flex;
  }
  /* mobilde arama + kur/hava üst bardan kaldırılıp sol menüye (drawer) taşındı.
     (drawer içindeki .appbar__search etkilenmesin diye .appbar ile sınırlı.) */
  .appbar .appbar__search { display: none; }
  .appbar .markets { display: none; }
  /* hamburgerin sağında kategori şeridi (yatay kaydırılır), en sağda ayar butonu. */
  .appbar__cats {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
  }
  .drawer__tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 12px;
  }
  .content {
    padding-top: calc(var(--appbar-h) + 16px);
    padding-bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom) + 24px);
  }
  .drawer__footer {
    height: var(--navbar-h);
  }
  .drawer__footer-left,
  .drawer__footer-right { gap: 2px; }
  .drawer__footer-right {
    justify-content: flex-end;
  }
  .drawer__footer .icon-btn {
    width: 34px;
    height: 34px;
  }
  .drawer__footer .icon-btn svg {
    width: 20px;
    height: 20px;
  }
  .navbar {
    left: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--navbar-h) + env(safe-area-inset-bottom));
    background: var(--bg);
  }
}

/* Yatay (landscape) + kısa ekran: sol menü sığmıyor, tek başına iç liste kaydırma
   bölgesi çok dar kalıyor. Bu durumda PANELİN TAMAMI kaydırılabilir olsun
   (marka + araçlar + liste + kullanıcı + footer birlikte akar). */
@media (orientation: landscape) and (max-height: 600px) {
  .drawer__panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* iç liste kendi scroll bölgesini oluşturmasın → tüm içerik doğal yükseklikte,
     panel bir bütün olarak kayar. */
  .drawer__list {
    flex: 0 0 auto;
    overflow: visible;
  }
}

@media (max-width: 1024px) and (max-height: 560px) {
  .feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) and (max-width: 1024px) and (max-height: 560px) {
  .feed {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- harita sayfası ----------------------------------------------------
   Harita, appbar ile navbar arasındaki tüm alanı kaplar (fixed); bu sayfada
   .content sarmalayıcısının dolgusu/min-height'ı kaldırılır (:has). Arayüz
   haritanın üstünde yüzen CAM (blur) katmanlardır: sol üstte panel (yalnızca
   kategori chip'leri), sağ altta cam hap zoom + başlangıç görünümü kontrolleri
   (.map-ctrls); üst kenarda okunurluk için yumuşak bir scrim. Motor MapLibre GL:
   noktalar halkalı monokrom pin, kümeler siyah rozet + adet; brief etiketleri
   yalnızca belli zoom'da (JS .briefs-on ekler). */
.content:has(.mapwrap) {
  padding: 0;
  margin: 0;
  min-height: 0;
  max-width: none;
}
.mapwrap {
  position: fixed;
  top: var(--appbar-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: var(--navbar-h);
  z-index: 5;
  background: var(--bg);
}
/* üst scrim — panelin altındaki karoları yumuşatır (tıklama geçirir) */
.mapwrap::before {
  content: "";
  position: absolute;
  z-index: 610;              /* pane'lerin üstünde, panel (900) altında */
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 55%, transparent), transparent);
}
#map {
  width: 100%;
  height: 100%;
}
.maplibregl-map { font: inherit; }
/* Koyu tema: açık (positron) karoların canvas'ını ters çevir — marker'lar canvas
   dışında (DOM overlay) olduğu için filtreden etkilenmez, monokrom kalır. */
#map.map-dark .maplibregl-canvas {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95);
}
/* yüzen cam panel — yalnızca kategori chip'leri.
   z-index 900: marker'ların (620) üstünde, kontrollerin (1000) altında. */
.map-ui {
  position: absolute;
  z-index: 900;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  pointer-events: none;      /* boşluklardan harita tıklanabilir kalsın */
}
.map-panel {
  pointer-events: auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 48px rgba(0, 0, 0, .18);
  animation: map-panel-in .35s ease both;
}
@keyframes map-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.map-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;       /* dokunmatikte yatay kaydırma net olsun */
  padding: 2px;              /* hover kalkışı + focus halkası kırpılmasın */
  cursor: grab;              /* masaüstünde sürükle-kaydır ipucu */
}
.map-chips.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.map-chips::-webkit-scrollbar { display: none; }
.map-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 65%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s,
              box-shadow .15s, transform .15s;
}
.map-chip:hover {
  border-color: var(--ink-soft);
  transform: translateY(-1px);
}
.map-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.map-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  /* box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 30%, transparent); */
}
.map-chip__emoji { font-size: 13px; line-height: 1; }
.map-chip__n {
  font-weight: 400;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
/* boş/hata durumu — harita ortasında cam kart */
.map-note {
  position: absolute;
  z-index: 900;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 48px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
}
/* Marker sarmalayıcı (MapLibre konumu buraya transform ile yazar — bu yüzden
   görsel/hover transform'u İÇ öğeye uygulanır, yoksa konumlandırma bozulur).
   Scrim'in (610) üstünde kalsın diye z-index 620. */
.map-marker {
  position: relative;
  z-index: 620;
  line-height: 0;
  cursor: pointer;
}
/* monokrom konum iğnesi (iç dot) */
.map-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 12%, transparent),
              0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s;
}
.map-marker:hover .map-pin,
.map-marker:focus-visible .map-pin {
  transform: scale(1.4);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--ink) 18%, transparent),
              0 4px 10px rgba(0, 0, 0, .4);
}
/* küme rozeti — siyah daire + ortalanmış beyaz adet + yumuşak dış halka */
.map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--ink) 14%, transparent),
              0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .15s;
}
.map-marker:hover .map-cluster,
.map-marker:focus-visible .map-cluster { transform: scale(1.08); }
/* hover edilen marker etiketiyle komşularının üstüne çıksın (etiket örtülmesin) */
.map-marker:hover,
.map-marker:focus-visible { z-index: 700; }
.map-marker:focus-visible { outline: none; }
/* brief etiketi — yalnızca belli zoom'da kalıcı görünür. Aynı koordinattaki haberler
   JS tarafında en yeni tek marker'a indirildiği için birebir üst üste binmez. */
.map-brief {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  width: max-content;
  max-width: 230px;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
#map.briefs-on .map-brief {
  display: block;
}
.map-brief__loc {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  color: var(--ink-soft);
}
/* kontroller (zoom + başlangıç görünümü) — cam hap, sağ altta. */
.map-ctrls {
  position: absolute;
  z-index: 1000;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .18);
}
.map-ctrl {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.map-ctrl:last-child { border-bottom: none; }
.map-ctrl:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.map-ctrl--home { font-size: 19px; }
/* attribution — küçük yarı saydam hap */
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--paper) 65%, transparent) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  font-size: 10px;
  border-radius: 999px;
}
.maplibregl-ctrl-attrib a { color: var(--ink-soft); }
.maplibregl-ctrl-attrib-button { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .map-panel { animation: none; }
  .map-chip,
  .map-pin,
  .map-cluster { transition: none; }
}

/* Dar ekran: yan menü gizli, navbar tam genişlik → harita da sola/aşağı yaslanır.
   (Ana mobil sorgunun aynısı; .mapwrap fixed offset'lerini eşitler.) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1024px), (max-width: 980px) and (max-height: 560px) {
  .mapwrap {
    left: 0;
    bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom));
  }
  .map-ui { top: 10px; left: 10px; right: 10px; }
  .map-panel { padding: 10px 12px; border-radius: 16px; }
  .mapwrap::before { height: 90px; }
}