/* =====================================================================
   Ereğli FM — tasarım v3
   Koyu markalı header · beyaz derinlikli kart yüzeyleri · kategori renkleri
   Display: Bricolage Grotesque (daraltılmış başlıklar) · Okuma: Newsreader
   ===================================================================== */

/* ---------- Belirteçler ---------- */
:root {
  --red: #e3051c;
  --red-deep: #b20315;
  --red-glow: rgb(227 5 28 / .12);

  --paper: #eef0f3;          /* sayfa zemini */
  --surface: #ffffff;        /* kart */
  --surface-2: #f4f5f7;
  --ink: #121318;
  --ink-2: #464a55;
  --muted: #7d828e;
  --rule: #e3e5ea;
  --night: #111217;          /* header / radyo / footer */
  --night-2: #1b1d24;
  --c: var(--red);           /* kategori rengi (öğe bazında ezilir) */

  --sh-1: 0 1px 2px rgb(16 18 24 / .06), 0 2px 8px rgb(16 18 24 / .04);
  --sh-2: 0 2px 4px rgb(16 18 24 / .06), 0 12px 32px rgb(16 18 24 / .10);

  --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-read: "Newsreader", Georgia, "Times New Roman", serif;

  --r-lg: 18px;
  --r: 14px;
  --r-sm: 10px;
  --wrap: 1280px;
  --g: 14px;
  --head-h: 60px;
  --tab-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0c0d10; --surface: #16171c; --surface-2: #1d1f26; --ink: #f1f2f4; --ink-2: #c3c6cf; --muted: #8a8f9a;
  --rule: #262830; --red-glow: rgb(255 59 78 / .16); --sh-1: 0 1px 2px rgb(0 0 0 / .5); --sh-2: 0 10px 30px rgb(0 0 0 / .5); color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c0d10; --surface: #16171c; --surface-2: #1d1f26; --ink: #f1f2f4; --ink-2: #c3c6cf; --muted: #8a8f9a;
    --rule: #262830; --red-glow: rgb(255 59 78 / .16); --sh-1: 0 1px 2px rgb(0 0 0 / .5); --sh-2: 0 10px 30px rgb(0 0 0 / .5); color-scheme: dark;
  }
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* bileşen display kuralları hidden niteliğini ezmesin */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.55 var(--f-display); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--g); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--red); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { left: 8px; }
.icon { width: 20px; height: 20px; flex: none; }

/* Başlık tipografisi — eski içeriğin BÜYÜK HARF başlıkları için daraltılmış genişlik */

.stamp { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Görsel kapsayıcı */

/* Kırpmasız görsel: görsel kutuya tam sığar, kalan alan aynı görselin bulanık kopyası */

picture[data-placeholder] img { object-fit: cover; }

/* Kart başlığı hover: alt çizgi animasyonu */

/* ---------- Üst bant + header (koyu) ---------- */
.topline { display: none; background: #08090c; color: #a3a7b1; font-size: 12.5px; }
.topline__in { display: flex; align-items: center; gap: 20px; height: 34px; }
.topline__city { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #e7e8ec; }
.topline__city b { color: #ff4d5e; }
.topline__w { display: inline-flex; align-items: center; gap: 14px; padding-left: 18px; border-left: 1px solid #23252d; font-variant-numeric: tabular-nums; }
.topline__w b { color: #fff; font-weight: 700; }
.topline nav { display: flex; gap: 18px; margin-left: auto; }
.topline a:hover { color: #fff; }
.topline__social { display: flex; gap: 12px; padding-left: 18px; border-left: 1px solid #23252d; }
.topline__social .icon { width: 15px; height: 15px; }

.head { position: sticky; top: 0; z-index: 50; }
.head__main { background: var(--night); color: #fff; }
.head__bar { display: flex; align-items: center; gap: 12px; height: var(--head-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.head__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ibtn { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; transition: background .2s; }
.ibtn:hover { background: rgb(127 127 140 / .14); }
.ibtn .icon--sun { display: none; }
:root[data-theme="dark"] .ibtn .icon--sun { display: block; } :root[data-theme="dark"] .ibtn .icon--moon { display: none; }
.head__menu { display: none; }
.head__search { display: none; }

/* ON AIR */
.onair { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 5px 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--night); cursor: pointer; font-weight: 700; transition: transform .2s var(--ease); }
.onair:hover { transform: translateY(-1px); }
.onair__eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.onair__eq i { width: 3px; height: 35%; border-radius: 2px; background: var(--red); }
.is-playing .onair__eq i { animation: eq .9s var(--ease) infinite; }
.onair__eq i:nth-child(2) { animation-delay: .15s; } .onair__eq i:nth-child(3) { animation-delay: .3s; } .onair__eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.onair__txt { display: none; flex-direction: column; line-height: 1.05; text-align: left; }
.onair__txt small { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--red); }
.onair__txt span { font-size: 13.5px; }
.onair__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; }
.onair__btn .icon { width: 14px; height: 14px; }
.ic-pause { display: none; }
.is-playing .ic-play { display: none; } .is-playing .ic-pause { display: block; }
.is-loading .onair__btn, .is-loading .tab__radio span { animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }

/* Kategori şeridi (beyaz) — her kategori kendi rengiyle */
.sections { background: var(--surface); border-bottom: 1px solid var(--rule); box-shadow: var(--sh-1); }
.sections__in { display: flex; gap: 4px; height: 48px; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.sections__in::-webkit-scrollbar { display: none; }
.sections a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 650; color: var(--ink-2); transition: background .2s, color .2s; }
.sections a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: 0; transform: scale(.4); transition: .25s var(--ease); }
.sections a:hover { color: var(--ink); background: var(--surface-2); }
.sections a:hover::before, .sections a[aria-current="page"]::before { opacity: 1; transform: none; }
.sections a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sections a.is-hot { color: var(--red); }
.sections a.is-hot::before { opacity: 1; transform: none; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }

/* Son dakika şeridi */
.flash { background: var(--red); color: #fff; }
.flash__in { display: flex; align-items: center; gap: 14px; height: 42px; overflow: hidden; }
.flash__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; background: rgb(0 0 0 / .18); }
.flash__tag .icon { width: 14px; height: 14px; }
.flash__track { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent); }
.flash__track ul { display: flex; gap: 48px; margin: 0; padding: 0; list-style: none; width: max-content; animation: marquee 70s linear infinite; }
.flash__track:hover ul { animation-play-state: paused; }
.flash__track li { white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.flash__track time { font-weight: 800; opacity: .75; margin-right: 8px; font-variant-numeric: tabular-nums; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Arama katmanı */
.search-layer { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); display: grid; align-content: start; padding-top: 12vh; }
.search-layer[hidden] { display: none; }
.search-layer__close { position: absolute; top: 16px; right: 16px; }

/* Çekmece */
.drawer { position: fixed; inset: 0; z-index: 80; background: rgb(10 10 12 / .5); }
.drawer[hidden] { display: none; }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(380px, 88vw); background: var(--paper); overflow-y: auto; padding: 18px 20px 120px; animation: drawerIn .3s var(--ease); }
@keyframes drawerIn { from { transform: translateX(100%); } }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.drawer__top img { height: 30px; width: auto; }
.drawer__group { margin-top: 20px; }
.drawer__group h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.drawer__group > a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin-bottom: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--sh-1); font-size: 16px; font-weight: 650; }
.drawer__group > a .icon { width: 16px; height: 16px; color: var(--muted); }
.drawer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer__chips a { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); box-shadow: var(--sh-1); border-radius: 999px; padding: 9px 14px; font-size: 14.5px; font-weight: 650; }
.drawer__chips a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* ---------- Mobil sekme çubuğu ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--rule); }
.tab { display: grid; justify-items: center; gap: 3px; height: 64px; align-content: center; border: 0; background: none; font-size: 10.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tab .icon { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .icon { color: var(--red); }
.tab__radio { position: relative; }
.tab__radio span { display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 8px 22px rgb(227 5 28 / .4), 0 0 0 5px var(--paper); }
.tab__radio span .icon { width: 22px; height: 22px; }
.tab__radio b { font-size: 10.5px; color: var(--ink); }

/* ---------- Kalıcı oynatıcı ---------- */
.player { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 18px; background: var(--night); color: #fff; box-shadow: 0 16px 40px rgb(0 0 0 / .35); animation: rise .4s var(--ease); }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.player[hidden] { display: none; }
.player__btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--red); color: #fff; cursor: pointer; }
.player__btn .icon { width: 18px; height: 18px; }
.player__ring { position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .3); border-top-color: #fff; animation: spin .8s linear infinite; display: none; }
.is-loading .player__ring { display: block; } .is-loading .player__btn .icon { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.player__meta { display: grid; min-width: 0; }
.player__meta small { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #ff6b79; }
.player__meta strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__side { display: flex; align-items: center; gap: 4px; }
.player__vol { display: none; align-items: center; gap: 6px; color: #aaa; }
.player__vol input { width: 90px; accent-color: var(--red); }
.player .ibtn { color: #fff; width: 38px; height: 38px; }
.player .ibtn:hover { background: rgb(255 255 255 / .1); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; display: inline-block; }

/* ---------- Yerleşim ---------- */
.app { padding-block: 18px 56px; min-height: 60vh; }

/* Bölüm başlığı: renkli dikey işaret + başlık + çizgi */

/* Kategori etiketi — görsel üzerinde renkli rozet */

/* ---------- Kartlar (beyaz yüzey, gölge, hover kalkma) ---------- */

/* Yatay mini kart */

/* Görsel üzerinde başlık */

/* ---------- Manşet: numaralı slayt + sürmanşetler ---------- */

.slider__track { display: grid; }

@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1); } }

.slider__pager { display: flex; gap: 4px; padding: 10px; background: var(--night); overflow-x: auto; scrollbar-width: none; }
.slider__pager::-webkit-scrollbar { display: none; }
.slider__pager button { position: relative; flex: 1 0 30px; height: 32px; border: 0; border-radius: 8px; background: #1f2129; color: #9a9ea8; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; overflow: hidden; transition: background .2s, color .2s; }
.slider__pager button:hover { background: #2a2c35; color: #fff; }
.slider__pager button[aria-selected="true"] { background: var(--red); color: #fff; }
.slider__pager button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgb(255 255 255 / .55); transform-origin: 0 50%; animation: fill var(--dur, 6s) linear forwards; }

@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

 

/* Manşet altı şerit */

/* Hızlı erişim */

/* ---------- Haber ızgarası (son haberler) ---------- */

/* ---------- Kategori blokları ---------- */

/* Panel kutusu */
.panel { background: var(--surface); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-1); }
.panel__t { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.panel__t::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--red); }

/* Radyo modülü */

   
@keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border: 0; border-radius: 999px; font-weight: 700; font-size: 15.5px; cursor: pointer; background: var(--red); color: #fff; transition: transform .2s var(--ease), background .2s; }
.btn:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn .icon { width: 18px; height: 18px; }

/* Anket */
.poll__q { font: 700 19px/1.2 var(--f-display); font-stretch: 88%; margin: 6px 0 14px; }
.poll__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.poll__opt { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); overflow: hidden; font-size: 14px; isolation: isolate; }
.poll__opt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--red-glow); z-index: -1; border-radius: 10px 0 0 10px; }
.poll__opt b { font-variant-numeric: tabular-nums; }
.poll__more { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--red); }

/* Köşe yazarları */

/* ---------- Haber detayı ---------- */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--red); }
.crumbs .sep { opacity: .5; }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 0; border-block: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); }
.byline__who { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 14.5px; }
.byline__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 800; overflow: hidden; }

.byline__who small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.byline span { display: inline-flex; align-items: center; gap: 6px; }
.byline .icon { width: 15px; height: 15px; }

.rail { display: none; }
.prose { max-width: 700px; font: 400 19.5px/1.72 var(--f-read); color: var(--ink); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose img { border-radius: var(--r); margin: 1.4em auto; }
.prose strong, .prose b { font-weight: 650; }
.prose h2, .prose h3 { font-family: var(--f-display); font-stretch: 86%; margin: 1.5em 0 .6em; }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 22px; border-left: 3px solid var(--red); font-style: italic; font-size: 1.12em; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose span[style] { font-size: inherit !important; }
.table-scroll { overflow-x: auto; margin: 1.2em 0; font-family: var(--f-display); }
.prose table { border-collapse: collapse; min-width: 100%; font-size: 15px; }
.prose td, .prose th { border: 1px solid var(--rule); padding: 8px 10px; }
.embed { position: relative; aspect-ratio: 16 / 9; margin: 1.4em 0; border-radius: var(--r); overflow: hidden; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: #000 center / cover no-repeat; }
.yt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 55% 50% / 30px no-repeat; box-shadow: 0 0 0 10px rgb(227 5 28 / .25); transition: transform .3s var(--ease); }
.yt:hover::after { transform: translate(-50%, -50%) scale(1.08); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; max-width: 700px; }
.tags a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; transition: border-color .2s, color .2s; }
.tags a:hover { border-color: var(--red); color: var(--red); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share a, .share button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.share a:hover, .share button:hover { border-color: var(--ink); transform: translateY(-2px); }
.share .icon { width: 18px; height: 18px; }
.share .is-wa { background: #25d366; border-color: transparent; color: #fff; }
.share .is-done { border-color: var(--red); color: var(--red); }
.share__label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

 

/* ---------- Liste sayfaları ---------- */

.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 40px; }
.pager__btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 700; font-size: 14.5px; transition: background .2s, color .2s; }
.pager__btn:hover { background: var(--ink); color: var(--paper); }
.pager__info { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.searchbox { display: flex; gap: 8px; margin-bottom: 26px; }
.searchbox input { flex: 1; min-width: 0; height: 54px; border-radius: 999px; border: 1.5px solid var(--rule); padding: 0 22px; background: var(--surface); font-size: 17px; }
.searchbox input:focus { border-color: var(--ink); outline: 0; }
.empty { padding: 56px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--rule); border-radius: var(--r-lg); }

/* Canlı yayın sayfası */

/* ---------- Footer ---------- */

/* ---------- Görünüm geçişi (soft-nav) ---------- */
.is-navigating .app { opacity: .45; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flash__track { overflow-x: auto; }
}

/* =====================================================================
   ≥ 640
   ===================================================================== */
@media (min-width: 640px) {
  :root { --g: 22px; }
  
  
  
  
  .onair__txt { display: flex; }
  
  
  
  
  
  
}

/* Mobil sekme çubuğu yalnız < 900 */
@media (max-width: 899.98px) {
  :root { --tab-h: 64px; }
  .head__tools .onair { display: none; }
}
@media (min-width: 900px) {
  .tabs { display: none; }
}

/* =====================================================================
   ≥ 900
   ===================================================================== */
@media (min-width: 900px) {
  :root { --head-h: 72px; }
  .topline { display: block; }
  .brand img { height: 44px; }
  .head__bar { gap: 18px; }
  .head__menu { display: inline-grid; }
  .head__search { display: block; }
  .head__tools .search-btn { display: none; }
  
  
  
  

  
  
  
  
  
  
  

  
  .rail { display: grid; gap: 10px; align-content: start; justify-items: center; position: sticky; top: calc(var(--head-h) + 66px); height: max-content; }
  .rail .share { flex-direction: column; }
  
  

  .player { left: auto; right: 24px; bottom: 24px; width: 460px; }
  .player__vol { display: inline-flex; }
  
}

@media print {
  .topline, .head, .flash, .tabs, .player, .rail { display: none !important; }
  body { background: #fff; }
}
:root[data-theme="dark"] .drawer__top img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer__top img { filter: brightness(0) invert(1); } }

/* Kart rozet satırı */

/* ---------- Formlar ---------- */

.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 650; }
.field small { font-weight: 500; color: var(--muted); }
.field input, .field textarea { width: 100%; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--surface-2); padding: 12px 14px; font: 400 16px/1.4 var(--f-display); color: var(--ink); transition: border-color .2s, background .2s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--ink); background: var(--surface); }
.field.is-error input, .field.is-error textarea { border-color: var(--red); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--red); flex: none; }

.cform__msg { margin: 0; font-size: 14px; font-weight: 600; }
.cform__msg.is-ok { color: #0f9d58; } .cform__msg.is-err { color: var(--red); }

.poll__form { display: grid; gap: 8px; }
.poll__choice { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid transparent; cursor: pointer; font-size: 14.5px; font-weight: 600; transition: border-color .2s, background .2s; }
.poll__choice:hover { border-color: var(--rule); }
.poll__choice:has(input:checked) { border-color: var(--red); background: var(--red-glow); }
.poll__choice input { accent-color: var(--red); width: 17px; height: 17px; }
.poll__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.poll__actions .btn { height: 44px; padding: 0 20px; font-size: 14.5px; }
.poll__link { border: 0; background: none; padding: 0; font: 600 13.5px var(--f-display); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.poll__opt { transition: --p .6s; }
.poll__opt.is-mine { outline: 2px solid var(--red); outline-offset: -2px; }

/* ---------- Reklam ---------- */
.ad { position: relative; display: grid; justify-items: center; gap: 4px; margin-inline: auto; width: 100%; }
.ad__label { justify-self: start; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ad a, .ad__img { display: block; width: 100%; }
.ad__img { height: auto; border-radius: var(--r); box-shadow: var(--sh-1); }
.ad.has-mobile .ad__img--d { display: none; }
@media (min-width: 640px) { .ad.has-mobile .ad__img--d { display: block; } .ad.has-mobile .ad__img--m { display: none; } }
.ad--top { max-width: 1200px; }
.ad--top-wrap { padding-top: 14px; }
.ad--article_inline { margin: 1.6em 0; max-width: 700px; font-family: var(--f-display); }
.ad__code { width: 100%; display: grid; justify-items: center; }

/* Açılır reklam */
.popup-ad { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; background: rgb(8 9 12 / .6); backdrop-filter: blur(4px); animation: fadeIn .3s var(--ease); }
.popup-ad[hidden] { display: none; }
.popup-ad__box { position: relative; width: min(460px, 100%); }
.popup-ad__box .ad__img { max-height: 80vh; width: auto; margin: 0 auto; object-fit: contain; }
.popup-ad__close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111; box-shadow: var(--sh-2); display: grid; place-items: center; cursor: pointer; }
.popup-ad .ad__label { color: #ddd; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Şehir kutusu: hava + döviz ---------- */
.topline__w .icon { width: 18px; height: 18px; }
.city__now { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-top: 4px; }
.city__ic { width: 64px; height: 64px; }
.city__now div { display: grid; line-height: 1.15; }
.city__temp { font: 800 40px/1 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; }
.city__now span { font-weight: 650; font-size: 15px; }
.city__now small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.city__days { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.city__days li { display: grid; justify-items: center; gap: 2px; font-size: 13px; }
.city__days span { color: var(--muted); font-weight: 600; }
.city__dic { width: 30px; height: 30px; }
.city__days small { color: var(--muted); }
.city__fx { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.city__fx li { display: flex; justify-content: space-between; font-size: 14.5px; }
.city__fx span { color: var(--ink-2); font-weight: 600; }
.city__fx b { font-variant-numeric: tabular-nums; }

/* ---------- Nöbetçi eczane ---------- */

.duty { display: grid; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }

/* Sayfa üstü reklam: yükseklik sınırı (kırpmadan, ortalı) — manşeti aşağı itmesin */
.ad--top a, .ad--top > .ad__img { display: flex; justify-content: center; }
.ad--top .ad__img { width: auto; max-width: 100%; max-height: 90px; }
@media (min-width: 900px) { .ad--top .ad__img { max-height: 120px; } }
.ad--sidebar .ad__img { max-height: 600px; width: 100%; object-fit: contain; }

/* =====================================================================
   ANASAYFA v5 (onaylı mockup'tan) — görseller kendi oranında, kırpma/dolgu yok;
   kategori + zaman görselin sağ üstünde buzlu cam etikette.
   ===================================================================== */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --section: 32px; --night-3: #24262f; --red-d: var(--red-deep); --page: var(--paper); }
@media (min-width: 640px) { :root { --section: 40px; } }
.hp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--section); }
.hp > * { min-width: 0; }
.ad--top:has(.adband) { max-width: none; }
.ad--top:has(.adband) > .ad__label { display: none; }
.ad--top .ad__code { width: 100%; }

/* Tipografi */
.hp-h { font-weight: 700; font-stretch: 84%; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.hp-h--xs { font-size: 14.5px; line-height: 1.22; font-weight: 650; }
.hp-h--sm { font-size: 16px; }
.hp-h--lg { font-size: 26px; line-height: 1.04; font-weight: 800; font-stretch: 80%; }
.hp-clamp2, .hp-clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hp-clamp2 { -webkit-line-clamp: 2; } .hp-clamp3 { -webkit-line-clamp: 3; }

/* ---------- Görsel: kendi oranında ---------- */
.hp-img { display: block; overflow: hidden; background: var(--surface-2); }
.hp-img img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.hp-img[data-placeholder] img { aspect-ratio: 1100 / 567; object-fit: cover; }
.hp-media { position: relative; display: block; overflow: hidden; }
a:hover .hp-media img { transform: scale(1.025); }

/* Buzlu cam etiket — görselin sağ üstünde, görseli kapatmadan */
.hp-chip { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
  padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgb(14 15 19 / .38); border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: 0 2px 10px rgb(0 0 0 / .12); }
.hp-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgb(255 255 255 / .35); flex: none; }
.hp-chip b { opacity: .55; font-weight: 400; }

/* ---------- Reklam şeridi (tam genişlik, alçak) ---------- */
.adband { position: relative; display: flex; align-items: center; gap: var(--s4); min-height: 76px; padding: var(--s3) var(--s4); border-radius: var(--r); color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 220% at 0% 0%, #ff3348 0%, #e3051c 38%, #8f0211 100%); box-shadow: var(--sh-1); }
.adband::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 / .5) 22px 24px); -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000); }
.adband__label { position: absolute; top: 6px; right: 12px; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.adband__wa { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 0 0 5px rgb(255 255 255 / .16); }
.adband__wa svg { width: 26px; height: 26px; color: #fff; }
.adband__txt { display: grid; line-height: 1.15; min-width: 0; }
.adband__txt b { font-size: 18px; font-weight: 800; font-stretch: 82%; letter-spacing: .01em; text-transform: uppercase; }
.adband__txt small { display: none; font-size: 13px; opacity: .85; }
.adband__num { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 12px; background: #fff; color: var(--red-d); font-size: 17px; font-weight: 800; font-stretch: 85%; letter-spacing: .02em; white-space: nowrap; transition: transform .25s var(--ease); }
.adband:hover .adband__num { transform: scale(1.04); }
.adband__brand { display: none; }
.adband__brand img { height: 30px; width: auto; }

/* ---------- Manşet ---------- */
.hp-hero { display: grid; gap: var(--s4); }
.hp-slider { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--night); color: #fff; box-shadow: var(--sh-2); }
.hp-slide { display: none; }
.hp-slide.is-on { display: block; animation: hp-fadeIn .45s var(--ease); }
@keyframes hp-fadeIn { from { opacity: 0; } }
.hp-slide .hp-img { background: #1a1b20; }
.hp-slide .hp-chip { top: 14px; right: 14px; font-size: 12.5px; padding: 6px 12px; }
.hp-slide__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: var(--s4) var(--s4) 0; font-size: 22px; font-weight: 800; font-stretch: 80%; line-height: 1.06; letter-spacing: -.015em; }
.hp-slide:hover .hp-slide__title { color: #ffd2d6; }
.hp-slider__pager { display: flex; gap: 4px; padding: var(--s3) var(--s4) var(--s4); overflow-x: auto; scrollbar-width: none; }
.hp-slider__pager button { flex: 1 0 28px; height: 28px; border: 0; border-radius: 7px; background: var(--night-3); color: #9a9ea8; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
.hp-slider__pager button:hover { background: #30323b; color: #fff; }
.hp-slider__pager button[aria-selected="true"] { background: var(--red); color: #fff; }

/* Dakika dakika akışı */
.hp-flow { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.hp-flow__h { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 var(--s4); border-bottom: 1px solid var(--rule); flex: none; }
.hp-flow__h a { font-size: 13px; font-weight: 700; color: var(--muted); }
.hp-flow__h a:hover { color: var(--red); }
.hp-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.hp-live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.hp-live i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: hp-ping 1.8s infinite; }
@keyframes hp-ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.hp-live--light { color: #ff5a6b; }
.hp-flow__list { list-style: none; margin: 0; padding: 0; }
.hp-flow__list li { position: relative; }
.hp-flow__list a { display: grid; grid-template-columns: 52px 1fr; gap: var(--s3); padding: 11px var(--s4); border-bottom: 1px solid var(--rule); transition: background .2s; }
.hp-flow__list a:hover { background: var(--surface-2); }
.hp-flow__list time { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hp-flow__list time small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.hp-flow__list span { font-size: 14.5px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-flow__list li.is-breaking time { color: var(--red); }
.hp-flow__list li.is-breaking::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.hp-new { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; background: #0f9d58; color: #fff; font-size: 10px; font-weight: 800; font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.hp-new--red { background: var(--red); }
.hp-flow__list li:nth-child(n+7) { display: none; }

/* ---------- Kart ---------- */
.hp-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.hp-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.hp-card:hover .hp-h { color: var(--c); }
.hp-card__b { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4) var(--s3); flex: 1; }
/* Künye satırı: ● kategori · zaman ······ okunma · yorum — her zaman kartın dibinde, ince çizgiyle başlıktan ayrılır */
.hp-card__m { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; }
.hp-card__cat { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--c); font-weight: 750; }
.hp-card__cat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hp-card__cat + time::before { content: "·"; margin-right: 6px; color: var(--muted); opacity: .6; }
.hp-card__n { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.hp-card__n span { display: inline-flex; align-items: center; gap: 4px; }
.hp-card__n .icon { width: 14px; height: 14px; }
/* Dar kartta (mobil 2 sütun vb.) künye iki satır: kategori üstte, zaman + sayaçlar altta — kartın kendi genişliğine göre */
.hp-card { container-type: inline-size; }
@container (max-width: 260px) {
  .hp-card__m { flex-wrap: wrap; row-gap: 5px; }
  .hp-card__cat { flex-basis: 100%; }
  .hp-card__cat + time::before { content: none; }
  .hp-card__b { padding-inline: var(--s3); }
  .hp-card__n { gap: 7px; }
  .hp-card__n span { gap: 3px; }
  .hp-card__n .icon { width: 13px; height: 13px; }
}
.hp-card__spot { font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* Sürmanşet şeridi */
.hp-picks { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.hp-picks > * { scroll-snap-align: start; min-width: 0; }
.hp-picks .hp-h--sm { font-size: 15.5px; }

/* ---------- Şehir şeridi ---------- */
.hp-city { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 1px; overflow-x: auto; scrollbar-width: none; background: var(--rule); border-radius: var(--r); box-shadow: var(--sh-1); }
.hp-city__cell { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface); min-height: 72px; }
.hp-city__cell div { display: grid; line-height: 1.15; }
.hp-city__cell small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hp-city__cell b { font-size: 15px; }
.hp-city__wx { width: 42px; height: 42px; }
.hp-city__big { font-size: 28px !important; font-weight: 800; font-stretch: 80%; }
.hp-city__cell div > span { font-size: 13px; color: var(--ink-2); }
.hp-city__days { display: flex !important; gap: var(--s3); padding-left: var(--s4); margin-left: var(--s2); border-left: 1px solid var(--rule); }
.hp-city__days > span { display: grid; justify-items: center; font-size: 12.5px; }
.hp-city__dwx { width: 22px; height: 22px; }
.hp-city__fx { gap: var(--s5); }
.hp-city__fx span { display: grid; }
.hp-city__fx b { font-variant-numeric: tabular-nums; }
.hp-city__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); flex: none; }
.hp-city__link:hover b { color: var(--red); }

/* ---------- Radyo: şimdi yayında ---------- */
.hp-radio { position: relative; padding-block: var(--s6); color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 140% at 0% 0%, rgb(227 5 28 / .55), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgb(120 20 160 / .35), transparent 60%), var(--night); }
.hp-radio__in { display: grid; gap: var(--s5); }
.hp-radio__live { display: grid; gap: var(--s3); align-content: start; }
.hp-radio__freq { font-size: 84px; font-weight: 800; font-stretch: 75%; line-height: .85; letter-spacing: -.04em; }
.hp-radio__freq small { display: block; font-size: 15px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-stretch: 100%; margin-top: 10px; color: rgb(255 255 255 / .65); }
.hp-radio__now { margin: 0; font-size: 16px; color: rgb(255 255 255 / .85); }
.hp-radio__wave { display: flex; align-items: center; gap: 3px; height: 44px; }
.hp-radio__wave i { flex: 1; height: 30%; border-radius: 3px; background: rgb(255 255 255 / .5); animation: hp-wave 1.3s ease-in-out infinite; }
.hp-radio__wave i:nth-child(3n) { animation-delay: .2s; } .hp-radio__wave i:nth-child(3n+1) { animation-delay: .5s; } .hp-radio__wave i:nth-child(4n) { animation-delay: .75s; } .hp-radio__wave i:nth-child(5n) { animation-delay: .1s; }
@keyframes hp-wave { 50% { height: 100%; } }
.hp-radio__cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.hp-radio__play { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: #fff; color: var(--night); font-size: 16px; font-weight: 800; cursor: pointer; transition: transform .25s var(--ease); }
.hp-radio__play:hover { transform: translateY(-2px); }
.hp-radio__play .icon { color: var(--red); }
.hp-radio__ears { font-size: 14px; color: rgb(255 255 255 / .75); }
.hp-radio__ears b { color: #fff; font-size: 18px; }
.hp-radio__shows { display: grid; gap: var(--s3); align-content: start; }
.hp-radio__sh { display: flex; align-items: baseline; justify-content: space-between; }
.hp-radio__sh h2 { margin: 0; font-size: 20px; font-weight: 800; font-stretch: 85%; text-transform: uppercase; }
.hp-radio__sh a { font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .7); }
.hp-show { display: grid; grid-template-columns: 76px 1fr; gap: var(--s4); align-items: center; padding: var(--s3); border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hp-show.is-on { background: rgb(255 255 255 / .12); border-color: rgb(255 90 107 / .6); }
.hp-show__img { width: 76px; border-radius: 10px; overflow: hidden; }
.hp-show__img img { width: 100%; height: auto; }
.hp-show__time { display: flex; align-items: center; gap: var(--s2); font-size: 12.5px; color: rgb(255 255 255 / .65); font-variant-numeric: tabular-nums; }
.hp-show__time em { font-style: normal; padding: 1px 7px; border-radius: 5px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hp-show h3 { margin: 2px 0 0; font-size: 18px; font-weight: 800; font-stretch: 85%; }
.hp-show p { margin: 0; font-size: 13.5px; color: rgb(255 255 255 / .7); }

/* ---------- Son haberler + yan sütun ---------- */
.hp-cols { display: grid; gap: var(--section); }
.hp-sh { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.hp-sh h2 { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); font-size: 22px; font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: -.01em; }
.hp-sh h2::before { content: ""; width: 5px; height: 20px; border-radius: 3px; background: var(--red); }
.hp-sh__rule { flex: 1; height: 2px; background: var(--rule); border-radius: 2px; }
.hp-sh a { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.hp-sh a:hover { color: var(--red); }
.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.hp-grid > * { min-width: 0; }
.hp-grid .hp-h--sm { font-size: 14.5px; }
.hp-card--wide { grid-column: 1 / -1; }
.hp-aside { display: grid; gap: var(--s4); align-content: start; }
.hp-panel { background: var(--surface); border-radius: var(--r); padding: var(--s4); box-shadow: var(--sh-1); }
.hp-panel__t { margin: 0 0 var(--s3); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: var(--s2); }
.hp-panel__t::before { content: ""; width: 14px; height: 3px; background: var(--red); border-radius: 2px; }
.hp-tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); margin-bottom: var(--s2); }
.hp-tabs2 button { height: 34px; border: 0; border-radius: 9px; background: none; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.hp-tabs2 button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.hp-rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.hp-rank li { counter-increment: r; }
.hp-rank a { display: grid; grid-template-columns: 34px 1fr; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.hp-rank li:last-child a { border-bottom: 0; padding-bottom: 0; }
.hp-rank a::before { content: counter(r); grid-row: span 2; font-size: 30px; font-weight: 800; font-stretch: 75%; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.hp-rank small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.hp-rank small .icon { width: 13px; height: 13px; }
.hp-rank a:hover .hp-h { color: var(--red); }
.hp-talk { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.hp-talk li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); }
.hp-talk__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: 13px; font-weight: 800; }
.hp-talk__q { margin: 0; font-size: 14px; line-height: 1.4; }
.hp-talk__by { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.hp-talk__by b { color: var(--ink); font-weight: 650; }
.hp-talk__on { margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.hp-talk__on:hover { color: var(--red); }

/* ---------- Köşe yazıları + anket ---------- */
.hp-opinion { display: grid; gap: var(--s5); }
.hp-writers { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--s3); overflow-x: auto; scrollbar-width: none; }
.hp-writer { display: grid; grid-template-columns: 56px 1fr; gap: var(--s2) var(--s3); align-content: start; padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); transition: box-shadow .3s, transform .3s; }
.hp-writer:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.hp-writer__av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.hp-writer__av img { width: 100%; height: 100%; object-fit: cover; }
.hp-writer__by { display: grid; align-content: center; line-height: 1.2; }
.hp-writer__by b { font-size: 15px; }
.hp-writer__by small { font-size: 12px; color: var(--muted); }
.hp-writer__q { grid-column: 1 / -1; font-size: 19px; font-weight: 700; font-stretch: 84%; line-height: 1.15; }
.hp-writer__q::before { content: "“"; color: var(--red); margin-right: 2px; }
.hp-writer:hover .hp-writer__q { color: var(--red); }
.hp-poll { padding: var(--s4); border-radius: var(--r); background: var(--night); color: #fff; align-self: start; }
.hp-poll__k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff5a6b; }
.hp-poll__q { margin: 6px 0 var(--s3); font-size: 17px; font-weight: 700; font-stretch: 88%; line-height: 1.2; }
.hp-poll ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-poll li { position: relative; display: flex; justify-content: space-between; gap: var(--s2); padding: 8px 10px; border-radius: 9px; background: rgb(255 255 255 / .06); font-size: 13px; overflow: hidden; isolation: isolate; }
.hp-poll li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: rgb(227 5 28 / .45); z-index: -1; }
.hp-poll__a { display: inline-block; margin-top: var(--s3); font-size: 13.5px; font-weight: 700; color: #fff; }

/* ---------- Gündemdeki konular ---------- */
.hp-topics { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.hp-topics__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-right: var(--s2); }
.hp-topics a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-size: 14px; font-weight: 650; }
.hp-topics a small { font-size: 11px; color: var(--muted); font-weight: 700; }
.hp-topics a:hover { color: var(--red); }

/* ---------- Daha fazla haber ---------- */
.hp-more { display: grid; gap: var(--s3); }
.hp-row { display: grid; grid-template-columns: 128px 1fr; gap: var(--s3); align-items: center; padding: var(--s2); background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); transition: box-shadow .25s, transform .25s; }
.hp-row:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.hp-row:hover .hp-h { color: var(--c); }
.hp-row .hp-img { border-radius: var(--r-sm); }
.hp-row__b { display: grid; gap: 4px; padding-right: var(--s2); }
.hp-row__meta { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.hp-morebtn { display: flex; justify-content: center; margin-top: var(--s5); }
.hp-morebtn a { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: var(--page); font-weight: 700; font-size: 14.5px; transition: background .2s; }
.hp-morebtn a:hover { background: var(--red); color: #fff; }

@media (min-width: 640px) {
  .adband { min-height: 84px; padding: var(--s3) var(--s5); }
  .adband__txt small { display: block; }
  .adband__num { font-size: 20px; padding: 10px 18px; }
  .hp-picks { grid-auto-columns: 42%; }
  .hp-grid { grid-template-columns: repeat(3, 1fr); }
  .hp-card--wide { flex-direction: row; align-items: center; }
  .hp-card--wide > .hp-media { width: 56%; flex: none; }
  .hp-card--wide .hp-card__b { padding: var(--s5); gap: var(--s3); justify-content: center; }
  .hp-card--wide .hp-card__m { margin-top: var(--s2); }
  .hp-writers { grid-auto-columns: 46%; }
  .hp-more { grid-template-columns: 1fr 1fr; }
  .hp-slide__title { font-size: 28px; padding: var(--s4) var(--s5) 0; }
  .hp-slider__pager { padding: var(--s3) var(--s5) var(--s4); }
  .hp-radio__in { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .hp-flow__list li:nth-child(n+7) { display: block; }
  .hp-flow__list li:nth-child(n+9) { display: none; }
}
@media (min-width: 960px) {
  .adband__brand { display: block; margin-left: var(--s3); padding-left: var(--s4); border-left: 1px solid rgb(255 255 255 / .25); }

  /* Manşet: sol sütun yüksekliği belirler; akış paneli bu yüksekliği doldurur ve kendi içinde kayar */
  .hp-hero { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
  .hp-flow__list { position: absolute; inset: 52px 0 0 0; overflow-y: auto; scrollbar-width: thin; }
  .hp-flow__list li:nth-child(n+7) { display: block; }
  .hp-flow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
  .hp-slide__title { font-size: 32px; padding: var(--s4) var(--s5) 0; }

  .hp-picks { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; align-items: stretch; }

  .hp-city { grid-auto-flow: row; grid-template-columns: auto auto 1fr 1fr; }

  .hp-radio__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s7); align-items: center; }
  .hp-radio__freq { font-size: 120px; }

  .hp-cols { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
  .hp-aside { position: sticky; top: 132px; }

  .hp-opinion { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: end; }
  .hp-opinion:not(:has(> .hp-poll)) { grid-template-columns: minmax(0, 1fr); }   /* aktif anket yoksa yazılar tam genişlik */
  .hp-writers { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }

  .hp-more { grid-template-columns: repeat(3, 1fr); }
  .hp-row { grid-template-columns: 140px 1fr; }
}
@media (min-width: 1200px) {
  .hp-slide__title { font-size: 34px; }
}
.hp-hero > *, .hp-cols > *, .hp-opinion > *, .hp-radio__in > *, .hp-more > * { min-width: 0; }

/* =====================================================================
   SAYFALAR v5 — liste + haber detayı (anasayfa bileşenleriyle aynı dil)
   ===================================================================== */
.hp-sh h2::before { background: var(--c); }
.hp-sh h2 em { font-style: normal; }
.hp-grid--4 { grid-template-columns: 1fr 1fr; }
.hp-card .hp-new { margin-right: 6px; }

/* Yan sütun kutusu olarak akış: sabit yükseklik yok, liste düz akar */
.hp-flow--box .hp-flow__list { position: static !important; overflow: visible; }
.hp-flow--box .hp-flow__list li { display: block !important; }
.hp-flow--box::after { display: none !important; }
.hp-flow--box .hp-flow__list li:last-child a { border-bottom: 0; }

/* Küçük radyo kutusu */
.hp-minradio { display: grid; gap: var(--s3); padding: var(--s5) var(--s4); border-radius: var(--r); color: #fff; overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, rgb(227 5 28 / .55), transparent 60%), var(--night); box-shadow: var(--sh-1); }
.hp-minradio__freq { font-size: 64px; font-weight: 800; font-stretch: 75%; line-height: .85; letter-spacing: -.04em; }
.hp-minradio__freq small { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; font-stretch: 100%; color: rgb(255 255 255 / .65); }
.hp-minradio .hp-radio__wave { height: 30px; }
.hp-minradio .hp-radio__play { height: 44px; padding: 0 20px; font-size: 14.5px; }

/* Oynat / duraklat ikonları radyo düğmelerinde */
.hp-radio__play .ic-pause { display: none; }
.is-playing .hp-radio__play .ic-play { display: none; } .is-playing .hp-radio__play .ic-pause { display: block; }

/* ---------- Liste sayfaları ---------- */
.lp { padding-top: var(--s2); }
.lp-head { display: grid; gap: var(--s2); padding: var(--s4) 0 var(--s5); }
.lp-head h1 { display: flex; align-items: center; gap: var(--s3); font-size: clamp(32px, 5.4vw, 54px); font-weight: 800; font-stretch: 78%; letter-spacing: -.025em; line-height: .95; }
.lp-head h1::before { content: ""; flex: none; width: 8px; height: .8em; border-radius: 4px; background: var(--c); }
.lp-head p { margin: 0; color: var(--muted); font-size: 15px; }
.lp .searchbox { margin-bottom: var(--s5); }
.lp-rows { display: grid; gap: var(--s3); }
.lp-rows .hp-row { grid-template-columns: 112px 1fr; }
.lp-day { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s5) 0 var(--s3); font-size: 20px; font-weight: 800; font-stretch: 85%; text-transform: uppercase; }
.lp-day:first-child { margin-top: 0; }
.lp-day small { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; font-stretch: 100%; }
.lp-tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.lp-tl::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); border-radius: 2px; }
.lp-tl li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.lp-tl time { position: relative; z-index: 1; justify-self: start; margin-top: 12px; padding: 3px 0; background: var(--page); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-tl li.is-breaking time { color: var(--red); }
.lp-tl li.is-breaking .hp-row { box-shadow: inset 3px 0 0 var(--red), var(--sh-1); }

/* ---------- Haber detayı ---------- */
.art { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-top: var(--s2); }
.art > * { min-width: 0; }
.art__head { display: grid; gap: var(--s3); max-width: 860px; }
.art__kick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.art__kick:empty { display: none; }
.art__cat { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.art__cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.art__cat:hover { background: var(--c); color: #fff; }
.art__hot { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.art__title { font-size: clamp(30px, 5.2vw, 52px); line-height: 1; font-weight: 800; font-stretch: 78%; letter-spacing: -.02em; }
.art__spot { margin: 0; font: 400 clamp(18px, 2.2vw, 22px)/1.45 var(--f-read); color: var(--ink-2); }
.art .byline { margin-top: var(--s2); }
.art .byline a { display: inline-flex; align-items: center; gap: 6px; }
.art .byline a:hover { color: var(--red); }
.byline__av .hp-img { width: 40px; height: 40px; border-radius: 50%; }
.byline__av .hp-img img { width: 40px; height: 40px; object-fit: cover; }

/* Kapak: kendi oranında; dikey/kare kapak tam genişliğe yayılmaz, ortalanır */
.art__media { margin: var(--s5) 0 0; }
.art__media .hp-img { border-radius: var(--r); box-shadow: var(--sh-1); }
.art__media.is-tall .hp-img { width: fit-content; margin-inline: auto; background: none; }
.art__media.is-tall img { width: auto; max-width: 100%; max-height: 80vh; }
.art__media .yt { border-radius: var(--r); }

.art__body { display: grid; gap: var(--s5); margin-top: var(--s6); }
.art__text { display: grid; gap: var(--s6); max-width: 700px; min-width: 0; }
.art__text > * { margin: 0; }
.art__text .prose { max-width: none; }
.art__text .tags { margin: 0; }
.art__share { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.art__gallery { columns: 2; column-gap: var(--s2); }
.art__gallery a { display: block; margin-bottom: var(--s2); break-inside: avoid; border-radius: var(--r-sm); overflow: hidden; }

.art__related { margin-top: var(--s7); }

@media (min-width: 640px) {
  .lp-rows .hp-row { grid-template-columns: 200px 1fr; }
  .lp-rows .hp-row .hp-h--xs { font-size: 17px; }
  .art__gallery { columns: 3; }
}
@media (min-width: 900px) {
  .art__body { grid-template-columns: 64px minmax(0, 700px); gap: var(--s6); }
  .art__share { display: none; }
}
@media (min-width: 960px) {
  .hp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .art { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
  .art .hp-aside { position: static; }
}

/* =====================================================================
   DİĞER SAYFALAR v5 — canlı yayın, programlar, köşe yazıları, galeri, eczane, anket, statik, 404
   ===================================================================== */
.lp-sec { margin-top: var(--s7); }
.lp-stack { display: grid; gap: var(--s6); align-content: start; }

.lp-page { padding: var(--s5) var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); min-width: 0; }
.lp-page .prose { max-width: 720px; font-size: 18px; }
.lp-head--404 { justify-items: start; }
.lp-code { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--red); }
.panel { background: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--sh-1); }

/* Canlı yayın */
.app:has(> .lp-flush) { padding-top: 0; }
.lp-flush { display: grid; gap: var(--s6); }
.lp-flush .hp-radio { padding-block: var(--s7); }
.hp-radio__note { margin: var(--s2) 0 0; max-width: 46ch; font-size: 14px; color: rgb(255 255 255 / .7); }
.live-apps { display: grid; gap: var(--s3); }
.live-app { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); transition: transform .25s var(--ease), box-shadow .25s; }
.live-app:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.live-app .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.live-app span { display: grid; line-height: 1.2; }
.live-app small { font-size: 12px; color: var(--muted); font-weight: 600; }
.live-app b { font-size: 16px; }

/* Programlar */
.pg-list { display: grid; gap: var(--s3); align-content: start; }
.pg-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s3); padding: var(--s3); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.pg-card.is-on { box-shadow: inset 0 0 0 2px var(--red), var(--sh-1); }
.pg-card .hp-img { border-radius: var(--r-sm); align-self: start; }
.pg-card__b { display: grid; gap: 6px; align-content: start; }
.pg-card__time { display: inline-flex; align-items: center; gap: var(--s2); font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-card__time em { font-style: normal; padding: 1px 7px; border-radius: 5px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pg-card__t { font-size: 24px; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.pg-card__by { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.pg-card__by .icon { width: 16px; height: 16px; color: var(--red); }
.pg-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Kişi kartları (sunucu / yazar) — fotoğraf kendi oranında */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.person { display: grid; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); transition: transform .25s var(--ease), box-shadow .25s; }
a.person:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.person__b { display: grid; gap: 2px; padding: var(--s3) var(--s4) var(--s4); }
.person__b b { font-size: 17px; font-weight: 800; font-stretch: 85%; line-height: 1.15; }
.person__b small { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.person:hover b { color: var(--red); }

/* Köşe yazıları */
.hp-writers--grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; }
.art__title--quote::before { content: "“"; color: var(--red); margin-right: .04em; }
.byline__who--lg .byline__av, .byline__who--lg .byline__av .hp-img, .byline__who--lg .byline__av .hp-img img { width: 52px; height: 52px; }
.prose--column > p:first-of-type::first-letter { float: left; font: 800 3.4em/.82 var(--f-display); font-stretch: 80%; margin: .06em .1em 0 0; color: var(--red); }
.author-box { display: grid; grid-template-columns: 88px 1fr; gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.author-box__img { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; }
.author-box__img img { width: 88px; height: 88px; object-fit: cover; }
.author-box > span { display: grid; gap: 4px; min-width: 0; }
.author-box small { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.author-box b { font-size: 20px; font-weight: 800; font-stretch: 85%; }
.author-box span span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.author-box em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-2); }
a.author-box:hover em, a.author-box:hover b { color: var(--red); }
.author-box--head { margin-bottom: var(--s5); }

/* Foto galeri */
.gal { display: grid; gap: var(--s5); margin-top: var(--s5); }
.gal__item { margin: 0; }
.gal__item .hp-img { border-radius: var(--r); box-shadow: var(--sh-1); }
.gal__item figcaption { display: flex; gap: var(--s2); padding-top: var(--s2); font-size: 14px; color: var(--ink-2); }
.gal__item figcaption b { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.art__share--always { display: flex !important; margin-top: var(--s5); }

/* Anketler */
.polls { display: grid; gap: var(--s4); align-items: start; }

/* Eczane kartları */

@media (min-width: 640px) {
  .live-apps { grid-template-columns: repeat(3, 1fr); }
  .pg-card { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4); }
  .pg-card__b { padding: var(--s2) var(--s2) var(--s2) 0; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .polls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-page { padding: var(--s6); }
}
@media (min-width: 960px) {
  .people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .polls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   NÖBETÇİ ECZANE (v5) — kartlar, harita, en yakın, çizelge
   ===================================================================== */
.rx-now { display: grid; gap: var(--s4); }
.rx-now__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.rx-now__t { font-size: 15px; }
.rx-near { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 14px; font-weight: 700; cursor: pointer; }
.rx-near:hover { background: #0f9d58; color: #fff; }
.rx-near .icon { width: 18px; height: 18px; }
.rx-grid { display: grid; gap: var(--s3); }
.rx { --g: #0f9d58; position: relative; display: grid; gap: 6px; align-content: start; padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.rx--big { box-shadow: inset 4px 0 0 var(--g), var(--sh-1); }
.rx.is-nearest { box-shadow: inset 0 0 0 2px var(--g), var(--sh-2); }
.rx.is-done { opacity: .55; }
.rx__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.rx__region { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--g); }
.rx__dist { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--g) 14%, transparent); color: var(--g); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rx__name { font-size: 24px; font-weight: 800; font-stretch: 82%; line-height: 1.05; }
.rx__name small { font-size: .62em; font-weight: 600; color: var(--muted); font-stretch: 100%; }
.rx__hours { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.rx__hours .icon { width: 15px; height: 15px; color: var(--g); }
.rx__hours.is-partial { color: #b26a00; } .rx__hours.is-partial .icon { color: #e08a00; }
.rx__addr { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.rx__act { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.rx__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--ink); }
.rx__btn .icon { width: 16px; height: 16px; }
.rx__btn:hover { background: var(--ink); color: var(--page); }
.rx__btn--call { background: var(--g); color: #fff; font-variant-numeric: tabular-nums; }
.rx__btn--call:hover { background: #0b7f46; color: #fff; }
.rx:not(.rx--big) .rx__name { font-size: 19px; }
.rx:not(.rx--big) .rx__btn { height: 36px; font-size: 13px; }

.rx-map { position: relative; z-index: 0; height: 340px; border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-1); display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.rx-map .leaflet-container { font: inherit; }
.rx-tip { padding: 3px 8px; border: 0; border-radius: 8px; background: var(--night); color: #fff; font: 700 12px/1.2 var(--f-display); box-shadow: 0 4px 12px rgb(0 0 0 / .25); }
.rx-tip::before { border-top-color: var(--night) !important; }
.rx-tip--me { background: #1f5fd6; } .rx-tip--me::before { border-top-color: #1f5fd6 !important; }

.rx-table { display: grid; border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); }
.rx-table__row { display: grid; gap: 4px var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); font-size: 14px; }
.rx-table__row:last-child { border-bottom: 0; }
.rx-table__row b { font-weight: 750; }
.rx-table__row span[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
.rx-table__head { display: none; }
.rx-src { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rx-src .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }

@media (min-width: 640px) {
  .rx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-now .rx-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .rx-table__row { grid-template-columns: 150px repeat(3, minmax(0, 1fr)); align-items: center; }
  .rx-table__head { display: grid; background: var(--surface-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .rx-table__row span[data-label]::before { content: none; }
  .rx-map { height: 400px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rx__hours.is-partial { color: #f0b04d; } }
:root[data-theme="dark"] .rx__hours.is-partial { color: #f0b04d; }

/* Önizleme bandı (taslak haber) */
.art__preview { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r); background: #fff4d6; color: #6b4700; font-size: 14px; box-shadow: inset 4px 0 0 #e08a00; }
.art__preview .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
:root[data-theme="dark"] .art__preview { background: #3a2b0b; color: #f6d48b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .art__preview { background: #3a2b0b; color: #f6d48b; } }

/* =====================================================================
   PWA — çevrimdışı sayfası, bağlantı uyarısı, tam ekran (ana ekrandan açılış)
   ===================================================================== */
.off { display: grid; justify-items: center; gap: var(--s3); max-width: 560px; margin: var(--s6) auto var(--s5); padding: var(--s6) var(--s5); text-align: center; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.off__ic { width: 72px; height: 72px; padding: 16px; border-radius: 50%; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.off h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; font-stretch: 82%; }
.off p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.off__retry { margin-top: var(--s2); height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font-weight: 700; cursor: pointer; }
.off__list { max-width: 900px; margin: 0 auto; }
.net { position: fixed; z-index: 95; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--night); color: #fff; font-size: 13.5px; font-weight: 650; box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.net.is-ok { background: #0f9d58; }
/* Ana ekrandan açılınca: üst bant gizlenir, iPhone çentiği için güvenli alan */
.is-standalone .topline { display: none !important; }
.is-standalone .head { padding-top: env(safe-area-inset-top); background: var(--night); }

/* =====================================================================
   HABER DETAYI v6 — künye, okuma tipografisi, paylaşım, tepkiler, sıradaki haber, yorumlar
   ===================================================================== */
.art__head { gap: var(--s4); }
.art__title { font-size: clamp(30px, 5vw, 50px); line-height: 1.02; text-wrap: balance; }
.art__spot { position: relative; padding-left: var(--s4); font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--ink-2); }
.art__spot::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 3px; border-radius: 2px; background: var(--red); }
.art__loc { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 650; color: var(--muted); }
.art__loc .icon { width: 15px; height: 15px; }

/* Künye: kim · ne zaman · ne kadar */
.meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--rule); }
.meta__who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.meta__av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff;
  background: hsl(var(--h, 350) 55% 42%); }
.meta__av img, .meta__av .hp-img, .meta__av .hp-img img { width: 44px; height: 44px; object-fit: cover; }
.meta__av--brand { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.meta__av--brand img { object-fit: contain; padding: 3px; }
.meta__name { display: grid; min-width: 0; line-height: 1.2; }
.meta__name b { display: block; font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta__name small time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meta__name small { font-size: 12.5px; color: var(--muted); }
.meta__name a:hover b { color: var(--red); }

.meta__stats { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.meta__stats li, .meta__stats a { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meta__stats li:has(a) { padding: 0; background: none; box-shadow: none; }
.meta__stats a:hover { color: var(--red); }
.meta__stats .icon { width: 15px; height: 15px; color: var(--muted); }

/* Okuma tipografisi */
.prose--news { font-size: 19px; line-height: 1.75; }
.prose--news > p:first-of-type { font-size: 1.1em; line-height: 1.62; color: var(--ink); }
.prose--news p { margin-bottom: 1.2em; }
.prose--news img { width: auto; max-width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sh-1); }
.prose--news figure { margin: 1.6em 0; }
.prose--news figcaption { margin-top: 8px; font: 400 14px/1.45 var(--f-display); color: var(--muted); }
.prose--news h2, .prose--news h3 { font-size: 1.2em; line-height: 1.2; }
.prose--news blockquote { padding: var(--s3) var(--s4); border-left: 4px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface); font-style: normal; font-weight: 500; }
.prose--news a { text-decoration-color: color-mix(in srgb, var(--red) 45%, transparent); }
.prose--news a:hover { text-decoration-color: var(--red); }

/* Haber sonu: kaynak, etiketler, hata bildir */
.art__end { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.art__src { margin: 0; font-size: 14px; color: var(--muted); }
.art__src b { color: var(--ink-2); }
.art .tags { margin: 0; }
.art .tags a { background: var(--surface); border-color: transparent; box-shadow: var(--sh-1); }
.art__report { display: inline-flex; align-items: center; gap: 7px; justify-self: start; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.art__report .icon { width: 15px; height: 15px; }
.art__report:hover { color: var(--red); }

/* Paylaşım kartı */
.xs { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap; padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.xs__t { display: grid; line-height: 1.25; }
.xs__t b { font-size: 16px; }
.xs__t small { font-size: 13px; color: var(--muted); }
.xs__btns { display: flex; gap: var(--s2); flex-wrap: wrap; }
.xs__b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s; }
.xs__b .icon { width: 19px; height: 19px; }
.xs__b:hover { transform: translateY(-2px); background: var(--ink); color: var(--page); }
.xs__b--wa { padding: 0 18px; background: #25d366; color: #fff; }
.xs__b--wa:hover { background: #1ebe5b; color: #fff; }
.xs__b.is-done { background: #0f9d58; color: #fff; }

/* Tepkiler */
.feel { display: grid; gap: var(--s4); padding: var(--s5) var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.feel__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.feel__h h2 { font-size: 18px; font-weight: 800; font-stretch: 88%; }
.feel__total { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.feel__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.feel__b { --fc: var(--red); position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: var(--s3) 4px var(--s3); border: 0; border-radius: 16px; background: var(--surface-2); color: var(--ink); cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, opacity .25s; }
.feel__b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--fc) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; }
.feel__b:hover { transform: translateY(-3px); }
.feel__b:hover::before { opacity: 1; }
.feel__emo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; line-height: 1;
  background: color-mix(in srgb, var(--fc) 14%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 20%, transparent); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.feel__b:hover .feel__emo { transform: scale(1.12) rotate(-6deg); }
.feel__l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.feel__n { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.feel__n b { font-size: 15px; font-weight: 800; }
.feel__n i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.feel__bar { width: 70%; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--fc) 14%, transparent); overflow: hidden; }
.feel__bar i { display: block; height: 100%; width: var(--p); border-radius: 4px; background: var(--fc); transition: width .6s var(--ease); }
.feel.is-voted .feel__b { cursor: default; }
.feel.is-voted .feel__b:not(.is-picked) { opacity: .62; }
.feel.is-voted .feel__b:hover { transform: none; }
.feel__b.is-picked { background: color-mix(in srgb, var(--fc) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--fc); }
.feel__b.is-picked::before { opacity: 1; }
.feel__b.is-picked .feel__l { color: var(--fc); }
.feel__b.is-pop .feel__emo { animation: feelPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes feelPop { 0% { transform: scale(.6); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1); } }
.feel__plus { position: absolute; top: 8px; left: 50%; font-size: 13px; font-weight: 800; color: var(--fc); pointer-events: none; animation: feelUp .9s var(--ease) forwards; }
@keyframes feelUp { from { opacity: 1; transform: translate(-50%, 6px); } to { opacity: 0; transform: translate(-50%, -22px); } }
.feel__msg { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.feel__msg.is-ok { color: #0f9d58; font-weight: 700; }

/* Sıradaki haber */
.nx { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--night); color: #fff; box-shadow: var(--sh-2); transition: transform .25s var(--ease); }
.nx:hover { transform: translateY(-3px); }
.nx__k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff5a6b; }
.nx__k .icon { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.nx:hover .nx__k .icon { transform: translateX(4px); }
.nx__in { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.nx__img { border-radius: var(--r-sm); overflow: hidden; }
.nx__b { display: grid; gap: var(--s2); }
.nx__t { font-size: 18px; line-height: 1.15; }
.nx .hp-card__m { border-top-color: rgb(255 255 255 / .12); color: rgb(255 255 255 / .6); padding-top: var(--s2); }

/* Yorumlar */
.cmt { display: grid; gap: var(--s4); }
.cmt__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.cmt__h h2 { display: inline-flex; align-items: center; gap: var(--s2); font-size: 22px; font-weight: 800; font-stretch: 85%; text-transform: uppercase; }
.cmt__h h2::before { content: ""; width: 5px; height: 20px; border-radius: 3px; background: var(--red); }
.cmt__count { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13px; font-stretch: 100%; }
.cmt__h small { font-size: 12.5px; color: var(--muted); }
.cmt__av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  background: hsl(var(--h, 220) 52% 46%); }
.cmt__av--me { background: var(--surface-2); color: var(--muted); }
.cmt__av--me .icon { width: 18px; height: 18px; }

.cmf { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); transition: box-shadow .25s; }
.cmf.is-open, .cmf:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent), var(--sh-1); }
.cmf__top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.cmf__body textarea { width: 100%; min-height: 44px; max-height: 320px; padding: 10px 0; border: 0; background: none; resize: none; font: 400 17px/1.5 var(--f-read); color: var(--ink); overflow: hidden; }
.cmf__body textarea:focus { outline: 0; }
.cmf__body textarea::placeholder { color: var(--muted); }
.cmf__more { display: grid; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.cmf__row { display: grid; gap: var(--s3); }
.cmf .field input { background: var(--surface-2); border-color: transparent; }
.cmf__foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.cmf__cnt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmf__cnt.is-warn { color: #e08a00; }
.cmf__foot .cform__msg { flex: 1; min-width: 160px; }
.cmf__send { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: auto; padding: 0 20px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font-size: 15px; font-weight: 750; cursor: pointer; }
.cmf__send:hover { background: var(--red-deep); }
.cmf__send:disabled { opacity: .6; cursor: wait; }
.cmf__send .icon { width: 17px; height: 17px; }
.cmf__to { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.cmf__to .icon { width: 15px; height: 15px; color: var(--red); }
.cmf__to button { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.cmf__done { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r); background: color-mix(in srgb, #0f9d58 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #0f9d58 35%, transparent); }
.cmf__done .icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #0f9d58; color: #fff; }
.cmf__done b { display: block; font-size: 15px; }
.cmf__done span { font-size: 13.5px; color: var(--ink-2); }

.cmt__list, .cmt__replies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.cmt__list.is-folded > li:nth-child(n+7) { display: none; }
.cmt-c { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.cmt-c__h { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.cmt-c__h b { font-size: 15px; }
.cmt-c__h time { font-size: 12.5px; color: var(--muted); }
.cmt-c__t { margin: 4px 0 0; font: 400 17px/1.55 var(--f-read); color: var(--ink); overflow-wrap: anywhere; }
.cmt-c__reply { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s2); padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.cmt-c__reply .icon { width: 15px; height: 15px; }
.cmt-c__reply:hover { color: var(--red); }
.cmt__replies { position: relative; margin: var(--s3) 0 0 20px; padding-left: var(--s4); }
.cmt__replies::before { content: ""; position: absolute; left: 0; top: 0; bottom: 18px; width: 2px; border-radius: 2px; background: var(--rule); }
.cmt-i--reply .cmt-c { background: color-mix(in srgb, var(--surface) 70%, var(--page)); box-shadow: none; }
.cmt-i .cmf { margin-top: var(--s3); }
.cmt__more { justify-self: center; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font-weight: 700; cursor: pointer; }
.cmt__empty { display: grid; justify-items: center; gap: 4px; padding: var(--s6) var(--s4); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); text-align: center; }
.cmt__empty span { font-size: 34px; }
.cmt__empty small { color: var(--muted); }

@media (max-width: 639.98px) {
  .meta { grid-template-columns: minmax(0, 1fr); }
  .feel { padding: var(--s4) var(--s3); }
  .feel__row { gap: 6px; }
  .feel__emo { width: 44px; height: 44px; font-size: 26px; }
  .feel__l { font-size: 11px; }
  .feel__n i { display: none; }
  .xs { padding: var(--s3); }
  .xs__btns { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .xs__b--wa { grid-column: 1 / -1; height: 48px; font-size: 15px; }
  .xs__b--copy [data-copy-label] { display: none; }
  .prose--news { font-size: 18px; }
  .nx__in { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); }
  .nx__t { font-size: 16px; }
  .cmt__replies { margin-left: 8px; padding-left: var(--s3); }
  .cmt-c { padding: var(--s3); grid-template-columns: 34px minmax(0, 1fr); }
  .cmt-c .cmt__av { width: 34px; height: 34px; font-size: 12.5px; }
}
@media (min-width: 640px) { .cmf__row { grid-template-columns: 1fr 1fr; } }
.check.is-error span { color: var(--red); }

/* =====================================================================
   FOOTER v6 — canlı radyo şeridi · marka + iletişim · bağlantılar (mobilde katlanır) · alt şerit
   ===================================================================== */
.ft { position: relative; margin-top: var(--s7); padding-top: var(--s6); color: #a4a8b3; isolation: isolate; overflow: hidden;
  background: radial-gradient(70% 60% at 12% 0%, rgb(227 5 28 / .16), transparent 60%), radial-gradient(50% 50% at 100% 0%, rgb(120 20 160 / .12), transparent 60%), var(--night); }
.ft::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgb(227 5 28 / .7), transparent); }
.ft a { transition: color .2s; }
.ft a:hover { color: #fff; }
.ft .icon { width: 18px; height: 18px; flex: none; }

/* 1) Canlı radyo şeridi */
.ft-live { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); border-radius: 20px;
  background: linear-gradient(120deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); border: 1px solid rgb(255 255 255 / .08); }
.ft-live__play { display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; box-shadow: 0 0 0 6px rgb(227 5 28 / .18), 0 10px 24px rgb(227 5 28 / .35); transition: transform .25s var(--ease); }
.ft-live__play:hover { transform: scale(1.06); }
.ft-live__play .icon { width: 24px; height: 24px; }
.ft-live__txt { display: grid; min-width: 0; line-height: 1.25; }
.ft-live__txt small { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff6b79; }
.ft-live__txt b { font-size: 19px; font-weight: 800; font-stretch: 85%; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-live__txt span { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-live__wave { display: none; align-items: center; gap: 3px; height: 36px; }
.ft-live__wave i { flex: 1; height: 25%; border-radius: 3px; background: rgb(255 255 255 / .28); }
.is-playing .ft-live__wave i { animation: hp-wave 1.2s ease-in-out infinite; background: rgb(255 107 121 / .75); }
.ft-live__wave i:nth-child(2n) { height: 55%; } .ft-live__wave i:nth-child(3n) { height: 80%; } .ft-live__wave i:nth-child(5n) { height: 40%; } .ft-live__wave i:nth-child(7n) { height: 95%; }
.ft-live__wave i:nth-child(3n) { animation-delay: .2s; } .ft-live__wave i:nth-child(3n+1) { animation-delay: .45s; } .ft-live__wave i:nth-child(4n) { animation-delay: .7s; }
.ft-live__lines { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ft-live__lines a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .06); color: #fff; font-weight: 750; font-variant-numeric: tabular-nums; font-size: 14px; }
.ft-live__lines a:hover { background: rgb(255 255 255 / .12); }
.ft-live__lines a .icon { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgb(255 255 255 / .1); }
.ft-live__lines a.is-wa .icon { background: #25d366; }
.ft-live__lines span { display: grid; line-height: 1.2; min-width: 0; }
.ft-live__lines small { font-size: 11px; font-weight: 650; color: #a4a8b3; letter-spacing: .02em; }

/* 2) Marka + bağlantılar */
.ft-main { display: grid; gap: var(--s6); padding-block: var(--s7) var(--s6); }
.ft-brand { display: grid; gap: var(--s4); align-content: start; }
.ft-brand__logo img { height: 46px; width: auto; }
.ft-brand__about { margin: 0; max-width: 40ch; font-size: 14.5px; line-height: 1.6; }
.ft-contact { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ft-contact li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.5; }
.ft-contact .icon { width: 17px; height: 17px; margin-top: 2px; color: #ff6b79; }
.ft-contact a { color: #d6d8de; }
.ft-apps { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ft-app { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 12px; border-radius: 14px; background: #000; border: 1px solid rgb(255 255 255 / .16); color: #fff; }
.ft-app:hover { border-color: rgb(255 255 255 / .4); }
.ft-app .icon { width: 24px; height: 24px; }
.ft-app span { display: grid; line-height: 1.1; font-size: 16px; font-weight: 750; }
.ft-app small { font-size: 10.5px; font-weight: 500; color: #a4a8b3; }

.ft-cols { display: grid; }
.ft-col { border-top: 1px solid rgb(255 255 255 / .08); }
.ft-col summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; list-style: none; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ft-col summary::-webkit-details-marker { display: none; }
.ft-col summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); opacity: .6; }
.ft-col[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ft-col nav { display: grid; gap: 4px; padding-bottom: var(--s4); }
.ft-col nav a, .ft-rich--static { padding: 6px 0; font-size: 14.5px; color: #c3c6cf; }
.ft-col nav a.is-hot { color: #ff6b79; font-weight: 700; }
.ft-rich { display: grid; gap: 2px; }
.ft-rich small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #8b909b; }
.ft-rich small .live-dot { color: #36d27e; }

/* 3) Alt şerit */
.ft-bar { border-top: 1px solid rgb(255 255 255 / .08); background: rgb(0 0 0 / .25); }
.ft-bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-block: var(--s4); font-size: 13px; }
.ft-social { display: flex; gap: 6px; }
.ft-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .06); color: #d6d8de; }
.ft-social a:hover { background: var(--red); color: #fff; }
.ft-social .icon { width: 17px; height: 17px; }
.ft-social__rss { width: auto !important; padding: 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; }
.ft-top { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .06); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.ft-top:hover { background: rgb(255 255 255 / .14); }
.ft-top .icon { width: 16px; height: 16px; }

@media (min-width: 640px) {
  .ft-live { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--s4) var(--s5); }
  .ft-live__lines { grid-column: auto; grid-template-columns: auto auto; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
  .ft-col { border-top: 0; }
  .ft-col summary { pointer-events: none; padding-bottom: 10px; }
  .ft-col summary::after { display: none; }
}
@media (min-width: 1100px) {
  .ft-live { grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr) auto; }
  .ft-live__wave { display: flex; }
  .ft-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: var(--s7); }
  .ft-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .ft-bar__in { justify-content: center; text-align: center; }
  .ft-bar__copy { order: 3; width: 100%; }
  .ft-live__txt b { font-size: 17px; }
  .ft-live__lines { grid-template-columns: 1fr; }
  .ft-live__lines a { font-size: 14px; padding: 8px 10px; white-space: nowrap; }
  .ft-live__lines span { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .ft-live__lines a .icon { width: 30px; height: 30px; padding: 7px; }
}

/* Footer bağlantı sütunları: yumuşak kart zemini, bir tık küçük bağlantılar, hafif hover vurgusu */
.ft-col nav a, .ft-rich--static { font-size: 13.5px; }
.ft-col nav a { margin-inline: -10px; padding: 6px 10px; border-radius: 9px; transition: background .2s, color .2s; }
.ft-col nav a:hover { background: rgb(255 255 255 / .055); }
.ft-rich--static { padding: 6px 0; }
.ft-rich small { font-size: 12px; }
@media (min-width: 640px) {
  .ft-cols { gap: var(--s3); }
  .ft-col { padding: var(--s4) var(--s4) var(--s2); border: 1px solid rgb(255 255 255 / .06); border-radius: 16px; background: rgb(255 255 255 / .022); }
  .ft-col summary { padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid rgb(255 255 255 / .06); font-size: 11.5px; }
  .ft-col nav { gap: 1px; padding-bottom: var(--s2); }
}

/* =====================================================================
   ANLIK ARAMA (header + mobil katman) — "Aradığınız her şeyi bulun"
   ===================================================================== */
.qs { position: relative; }
.head__search.qs { flex: 1 1 auto; max-width: 720px; margin-inline: 28px auto; }
.qs__box { position: relative; display: flex; align-items: center; height: 46px; border-radius: 999px; background: #1a1c23; border: 1px solid #2a2c35; transition: border-color .2s, background .2s, box-shadow .25s; }
.qs.is-open .qs__box, .qs__box:focus-within { background: #20222a; border-color: #4a4d58; box-shadow: 0 0 0 4px rgb(227 5 28 / .18); }
.qs__ic { position: absolute; left: 16px; width: 19px; height: 19px; color: #8a8f9a; pointer-events: none; }
.qs__box input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 46px; border: 0; background: none; color: #fff; font-size: 15px; outline: 0; }
.qs__box input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.qs__ph { position: absolute; left: 46px; right: 96px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: #8a8f9a; pointer-events: none; }
.qs__ph b { font-weight: 650; color: #d6d8de; display: inline-block; transition: opacity .3s, transform .3s; }
.qs__ph b.is-out { opacity: 0; transform: translateY(6px); }
.qs.has-value .qs__ph { display: none; }
.qs__kbd { margin-right: 6px; padding: 2px 8px; border-radius: 7px; border: 1px solid #3a3d47; color: #8a8f9a; font: 700 12px/1.4 var(--f-display); }
.qs.is-open .qs__kbd, .qs.has-value .qs__kbd { display: none; }
.qs__go { display: grid; place-items: center; width: 36px; height: 36px; margin-right: 5px; border: 0; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; transition: transform .2s var(--ease); }
.qs__go:hover { transform: scale(1.06); }
.qs__go .icon { width: 17px; height: 17px; }

/* Panel */
.qs__panel { position: absolute; z-index: 70; top: calc(100% + 10px); left: 0; width: min(860px, calc(100vw - 2 * var(--g))); max-height: calc(100vh - 150px); overflow: auto; overscroll-behavior: contain;
  border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgb(10 12 18 / .28), 0 0 0 1px rgb(0 0 0 / .04); animation: qsIn .2s var(--ease); }
@keyframes qsIn { from { opacity: 0; transform: translateY(-6px); } }
.qs__discover, .qs__results { padding: var(--s4) var(--s5) var(--s3); }
.qs__sec + .qs__sec, .qs__cols { margin-top: var(--s4); }
.qs__cols { display: grid; gap: var(--s4) var(--s5); }
.qs__h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s2); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.qs__clear { border: 0; background: none; color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; text-decoration: underline; cursor: pointer; }
.qs__foot { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: var(--s3); padding: 10px var(--s5); border-top: 1px solid var(--rule); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.qs__foot kbd { padding: 0 6px; margin-right: 2px; border-radius: 5px; background: var(--surface); box-shadow: 0 1px 0 var(--rule); font: 700 11px/1.6 var(--f-display); color: var(--ink-2); }

/* Hızlı erişim kutucukları */
.qs-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
.qs-quick__i { display: flex; align-items: center; gap: var(--s3); padding: 10px 12px; border-radius: 14px; background: var(--surface-2); transition: background .2s, transform .2s var(--ease); }
.qs-quick__i:hover, .qs-quick__i.is-active { background: color-mix(in srgb, var(--c) 10%, var(--surface)); transform: translateY(-1px); }
.qs-quick__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.qs-quick__ic .icon { width: 19px; height: 19px; }
.qs-quick__b { display: grid; min-width: 0; line-height: 1.25; }
.qs-quick__b b { font-size: 14px; }
.qs-quick__b small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liste satırları */
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qs-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; padding: 8px 10px; margin-inline: -10px; border-radius: 12px; transition: background .15s; }
.qs-row:hover, .qs-row.is-active, .qs-tags a.is-active, .qs-mini.is-active { background: var(--surface-2); }
.qs-row__n { width: 22px; font-size: 18px; font-weight: 800; font-stretch: 78%; color: transparent; -webkit-text-stroke: 1.2px var(--red); text-align: center; }
.qs-row__img { width: 72px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.qs-row__img img { width: 100%; height: 100%; object-fit: cover; }
.qs-row__b { display: grid; gap: 3px; min-width: 0; }
.qs-row__t { font-size: 14.5px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-row__m { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.qs-row__m .icon { width: 13px; height: 13px; }
.qs-row__m i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--red)); }
.qs-row mark, .qs-mini mark { background: color-mix(in srgb, #ffd54a 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.qs-hot { padding: 0 6px; border-radius: 5px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.qs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qs-tags a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; font-weight: 650; }
.qs-tags a:hover { background: var(--ink); color: var(--page); }
.qs-tags small { font-size: 11px; color: var(--muted); font-weight: 700; }
.qs-mini { display: flex; align-items: center; gap: var(--s3); padding: 8px 10px; margin-inline: -10px; border-radius: 12px; font-size: 14px; }
.qs-mini:hover { background: var(--surface-2); }
.qs-mini__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.qs-mini__ic .icon { width: 17px; height: 17px; }
.qs-mini__ic img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.qs-mini__b { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.qs-mini__b b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-mini__b small { font-size: 12px; color: var(--muted); }
.qs-duty { padding: 1px 7px; border-radius: 6px; background: #0f9d58; color: #fff; font-size: 10.5px; font-weight: 800; }
.qs-duty--soft { background: color-mix(in srgb, #0f9d58 15%, transparent); color: #0b7f46; }
.qs-call { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0f9d58; color: #fff; }
.qs-call .icon { width: 16px; height: 16px; }
.qs-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s3); height: 42px; border-radius: 12px; background: var(--ink); color: var(--page); font-size: 14px; font-weight: 700; }
.qs-all:hover, .qs-all.is-active { background: var(--red); color: #fff; }
.qs-all .icon { width: 16px; height: 16px; }
.qs-none { padding: var(--s5) 0; text-align: center; color: var(--muted); }
.qs-none b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.qs-load { height: 3px; margin: calc(var(--s4) * -1) calc(var(--s5) * -1) var(--s3); background: linear-gradient(90deg, transparent, var(--red), transparent) 0 0 / 40% 100% no-repeat; animation: qsLoad 1s linear infinite; }
@keyframes qsLoad { from { background-position: -40% 0; } to { background-position: 140% 0; } }

@media (min-width: 760px) {
  .qs__cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .qs__res { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "main top" "main side"; grid-template-rows: auto 1fr; gap: 0 var(--s5); align-items: start; }
  .qs__top { grid-area: top; } .qs__main { grid-area: main; } .qs__side { grid-area: side; }
  .qs__top + .qs__main + .qs__side { margin-top: var(--s4); }
}

/* Mobil tam ekran katman */
.search-layer { padding-top: 0; background: var(--page); backdrop-filter: none; align-content: stretch; overflow: hidden; }
.qs--layer { display: flex; flex-direction: column; height: 100dvh; padding-top: calc(env(safe-area-inset-top) + 14px); }
.qs--layer .qs__box { flex: none; margin-right: 48px; height: 50px; }
.qs--layer .qs__panel { position: static; width: auto; max-height: none; flex: 1; margin: var(--s3) calc(var(--g) * -1) 0; border-radius: 20px 20px 0 0; box-shadow: none; animation: none; overflow: auto; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.qs--layer .qs__discover, .qs--layer .qs__results { padding-inline: var(--g); }
.qs--layer .qs__foot { display: none; }
.search-layer__close { z-index: 2; top: calc(env(safe-area-inset-top) + 16px); right: 12px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); }
.qs--layer .qs-quick { grid-template-columns: 1fr 1fr; }
.qs--layer .qs-quick__ic { width: 34px; height: 34px; }
.qs-tags a { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 32px; }
.qs-tags a small { margin-left: 2px; }
.qs--layer .qs__ph { right: 52px; }
.qs__res > * + * { margin-top: var(--s4); }
@media (min-width: 760px) { .qs__res > * + * { margin-top: 0; } .qs__res > .qs__side { margin-top: var(--s4); } .qs__res > .qs__main:first-child + .qs__side { margin-top: 0; } }

/* =====================================================================
   ÖNEMLİ NUMARALAR — acil kartı, kısa hatlar, arama, grup kartları
   ===================================================================== */
.nb { display: grid; gap: var(--s5); padding-bottom: var(--s5); }
.nb .lp-head { padding-bottom: 0; }
.nb-sos { display: grid; gap: var(--s3); }
.nb-sos__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-radius: 20px; color: #fff;
  background: radial-gradient(120% 200% at 0% 0%, #ff3348, #e3051c 45%, #9b0313); box-shadow: 0 16px 36px rgb(227 5 28 / .28); transition: transform .25s var(--ease); }
.nb-sos__main:hover { transform: translateY(-2px); }
.nb-sos__n { font-size: 64px; font-weight: 800; font-stretch: 75%; line-height: .85; letter-spacing: -.03em; }
.nb-sos__t { display: grid; gap: 4px; line-height: 1.25; }
.nb-sos__t b { font-size: 20px; font-weight: 800; font-stretch: 88%; }
.nb-sos__t small { font-size: 14px; opacity: .88; }
.nb-sos__call { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--red-deep); font-weight: 800; }
.nb-sos__call .icon { width: 18px; height: 18px; }
.nb-sos__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.nb-sos__list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s; }
.nb-sos__list a:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.nb-sos__list b { min-width: 44px; padding: 4px 0; border-radius: 9px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nb-sos__list span { font-size: 13.5px; font-weight: 650; line-height: 1.2; }

.nb-tools { position: sticky; top: calc(var(--head-h) + 52px); z-index: 5; display: grid; gap: var(--s3); padding: var(--s3) 0; background: var(--page); }
.nb-search { position: relative; display: block; }
.nb-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); }
.nb-search input { width: 100%; height: 50px; padding: 0 18px 0 46px; border: 1.5px solid transparent; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-size: 16px; color: var(--ink); }
.nb-search input:focus { outline: 0; border-color: var(--ink); }
.nb-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.nb-chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-size: 13.5px; font-weight: 650; }
.nb-chips a small { font-size: 11px; color: var(--muted); font-weight: 800; }
.nb-chips a:hover { background: var(--ink); color: var(--page); }

.nb-groups { display: grid; gap: var(--s4); align-items: start; }
.nb-g { scroll-margin-top: calc(var(--head-h) + 160px); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.nb-g__h { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.nb-g__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.nb-g__ic .icon { width: 18px; height: 18px; }
.nb-g__h h2 { flex: 1; font-size: 17px; font-weight: 800; font-stretch: 88%; }
.nb-g__h small { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.nb-list { list-style: none; margin: 0; padding: 4px 0; }
.nb-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--rule); }
.nb-i:last-child { border-bottom: 0; }
.nb-i__n { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.nb-i__p { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.nb-i__p a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .2s, color .2s; }
.nb-i__p a:hover { background: #0f9d58; color: #fff; }
.nb-i__p a .icon { width: 15px; height: 15px; color: #0f9d58; }
.nb-i__p a:hover .icon { color: #fff; }
.nb-i__p small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.nb-i__p a:hover small { color: rgb(255 255 255 / .85); }

@media (min-width: 900px) {
  .nb-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-g:has(.nb-list > li:nth-child(12)) { grid-row: span 2; }
}
@media (max-width: 639.98px) {
  .nb-sos__main { grid-template-columns: auto minmax(0, 1fr); padding: var(--s4); }
  .nb-sos__n { font-size: 52px; }
  .nb-sos__t b { font-size: 17px; }
  .nb-sos__call { grid-column: 1 / -1; justify-content: center; }
  .nb-sos__list { grid-template-columns: 1fr 1fr; }
  .nb-tools { top: calc(var(--head-h) + 48px); }
  .nb-i { padding: 10px var(--s3) 10px var(--s4); gap: var(--s2); }
  .nb-i__n { font-size: 14px; }
  .nb-i__p { flex-direction: column; align-items: flex-end; gap: 4px; }
  .nb-i__p a { height: 38px; padding: 0 10px; font-size: 13.5px; }
  .nb-i__p small { display: none; }
}

/* =====================================================================
   UYGULAMA KATMANI (mobil < 900 px) — web sitesi değil, uygulama hissi
   ===================================================================== */
.head__back { display: none; }
.drawer__group--desk { display: none; }

/* Menü kısayol kutucukları (her ekranda) */
.drawer__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.drawer__tiles a { display: grid; justify-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.15; }
.drawer__tiles span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.drawer__tiles .icon { width: 21px; height: 21px; }
.drawer__row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; margin-bottom: 6px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); font: 650 15px/1.2 var(--f-display); cursor: pointer; }
.drawer__row > span { display: inline-flex; align-items: center; gap: 10px; }
.drawer__row .icon { width: 19px; height: 19px; color: var(--muted); }
.drawer__row .icon--sun { display: none; }
:root[data-theme="dark"] .drawer__row .icon--sun { display: block; } :root[data-theme="dark"] .drawer__row .icon--moon { display: none; }
.drawer__switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--rule); transition: background .25s; }
.drawer__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .25s var(--ease); }
:root[data-theme="dark"] .drawer__switch { background: #0f9d58; }
:root[data-theme="dark"] .drawer__switch::after { transform: translateX(18px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer__switch { background: #0f9d58; } :root:not([data-theme="light"]) .drawer__switch::after { transform: translateX(18px); } }
.drawer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ink-2); }
.drawer__links a { padding: 6px 0; }
.drawer__grab { display: none; }

/* Sayfa geçiş animasyonları (yumuşak gezinme) */
@keyframes pageIn { from { opacity: 0; transform: translateX(18px); } }
@keyframes pageBack { from { opacity: 0; transform: translateX(-18px); } }
.app.is-enter { animation: pageIn .28s var(--ease); }
.app.is-back { animation: pageBack .28s var(--ease); }
.is-navigating .app { opacity: .55; transition: opacity .15s; }

@media (max-width: 899.98px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; }

  /* Üst bar: kaydırınca gizlenir, yukarı kaydırınca döner */
  .head { transition: transform .32s var(--ease); will-change: transform; }
  .head-hidden .head { transform: translateY(-100%); }
  .head__main { padding-top: env(safe-area-inset-top); }
  .head__bar { height: 54px; gap: 6px; }
  .brand img { height: 30px; }
  .head__back { display: inline-grid; width: 38px; height: 38px; margin-left: -8px; color: #fff; }
  .head__back .icon { width: 24px; height: 24px; }
  :root:not(.is-inner) .head__back { display: none; }
  .head__tools .ibtn { width: 40px; height: 40px; }
  .sections { box-shadow: none; }
  .sections__in { height: 46px; }
  .is-reading .sections { display: none; }               /* haber okurken kategori şeridi gizli */
  .progress { position: fixed; top: 0; bottom: auto; z-index: 70; height: 3px; }

  /* Alt sekme çubuğu */
  .tabs { height: calc(62px + env(safe-area-inset-bottom)); padding-inline: 4px; background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-top: 0; box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent); user-select: none; -webkit-user-select: none; }
  .tab { position: relative; height: 62px; gap: 2px; font-size: 10.5px; font-weight: 650; transition: color .2s; }
  .tab .icon { width: 23px; height: 23px; transition: transform .25s var(--ease); }
  .tab[aria-current="page"] { color: var(--red); }
  .tab[aria-current="page"]::before { content: ""; position: absolute; top: 6px; left: 50%; width: 34px; height: 30px; margin-left: -17px; border-radius: 12px; background: color-mix(in srgb, var(--red) 11%, transparent); z-index: -1; }
  .tab:active .icon { transform: scale(.88); }
  .tab__radio span { width: 56px; height: 56px; margin-top: -24px; box-shadow: 0 8px 22px rgb(227 5 28 / .42), 0 0 0 5px var(--page); transition: transform .2s var(--ease); }
  .tab__radio:active span { transform: scale(.92); }
  .is-playing .tab__radio span { animation: fabPulse 2s ease-out infinite; }
  @keyframes fabPulse { 0% { box-shadow: 0 8px 22px rgb(227 5 28 / .42), 0 0 0 5px var(--page), 0 0 0 5px rgb(227 5 28 / .5); } 100% { box-shadow: 0 8px 22px rgb(227 5 28 / .42), 0 0 0 5px var(--page), 0 0 0 18px rgb(227 5 28 / 0); } }
  .tab__radio b { color: var(--red); font-weight: 800; }
  .player { border-radius: 20px; bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }

  /* Menü: alttan açılan sayfa */
  .drawer { background: rgb(8 9 12 / .45); animation: fadeIn .2s; }
  .drawer__panel { inset: auto 0 0 0; width: auto; max-height: 88dvh; padding: 6px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px rgb(0 0 0 / .25); animation: sheetUp .34s cubic-bezier(.2, .9, .25, 1); overscroll-behavior: contain; }
  @keyframes sheetUp { from { transform: translateY(100%); } }
  .drawer__panel.is-dragging { transition: none; }
  .drawer__grab { display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none; }
  .drawer__grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--rule); }
  .drawer__top { margin-bottom: 8px; }
  .drawer__group { margin-top: 18px; }

  /* Ana içerik ritmi */
  .app { padding-top: 12px; }
  .ad--top-wrap { padding-top: 10px; }
  .adband { min-height: 64px; padding: 10px 12px; border-radius: 16px; }
  .adband__wa { width: 38px; height: 38px; }
  .adband__wa svg { width: 21px; height: 21px; }
  .adband__txt b { font-size: 15px; }
  .adband__num { padding: 7px 11px; font-size: 15px; border-radius: 10px; }
  .crumbs { display: none; }
  .lp-head { padding-top: 4px; }

  /* Haber listeleri: uygulama satırları (görsel solda, kendi oranında) */
  .hp-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .hp-grid .hp-card:not(.hp-card--wide) { flex-direction: row; align-items: stretch; container-type: normal; }
  .hp-grid .hp-card:not(.hp-card--wide) > .hp-media { flex: none; width: 132px; align-self: center; margin: 10px 0 10px 10px; border-radius: 12px; }
  .hp-grid .hp-card:not(.hp-card--wide) .hp-card__b { padding: 10px 12px; gap: 6px; }
  .hp-grid .hp-card:not(.hp-card--wide) .hp-h { font-size: 15px; -webkit-line-clamp: 3; }
  .hp-grid .hp-card:not(.hp-card--wide) .hp-card__m { flex-wrap: wrap; row-gap: 3px; padding-top: 6px; border-top: 0; }
  .hp-grid .hp-card:not(.hp-card--wide) .hp-card__n { gap: 7px; }

  /* Manşet: kenardan kenara kaydırılabilir */
  .hp-hero { padding-inline: 0; }
  .hp-slider { border-radius: 0; box-shadow: none; }
  .hp-slider__pager { gap: 6px; justify-content: center; padding-bottom: 14px; }
  .hp-slider__pager button { flex: none; width: 7px; height: 7px; padding: 0; border-radius: 4px; font-size: 0; background: rgb(255 255 255 / .28); transition: width .3s var(--ease), background .3s; }
  .hp-slider__pager button[aria-selected="true"] { width: 22px; background: var(--red); }
  .hp-flow { margin-inline: var(--g); }

  /* Haber detayı */
  .art { padding-top: 0; }
  .art__media { margin-inline: calc(var(--g) * -1); }
  .art__media .hp-img { border-radius: 0; box-shadow: none; }
  .art__media.is-tall .hp-img { border-radius: var(--r); }
  .art__title { font-size: 29px; }
  .prose--news { font-size: calc(18px * var(--fs, 1)); }

  /* Dokunma geri bildirimi; dokunmatikte "takılı kalan" hover kalkışları yok */
  .hp-card:active, .hp-row:active, .qs-row:active, .rx:active, .nb-i__p a:active, .drawer__tiles a:active, .pg-card:active, .hp-writer:active, .person:active, .nx:active, .xs__b:active, .feel__b:active { transform: scale(.98); transition: transform .08s; }
}
@media (hover: none) {
  .hp-card:hover, .hp-row:hover, .hp-writer:hover, .live-app:hover, .person:hover, .nx:hover, .feel__b:hover, .xs__b:hover, .rx-near:hover { transform: none; }
  .hp-card:hover .hp-h, .hp-row:hover .hp-h { color: inherit; }
  a:hover .hp-media img { transform: none; }
}

/* Haber okurken kayan eylem çubuğu (mobil) */
.abar { display: none; }
@media (max-width: 899.98px) {
  .abar { position: fixed; z-index: 58; left: 50%; bottom: calc(var(--tab-h) + 40px + env(safe-area-inset-bottom)); display: flex; gap: 2px; padding: 5px; border-radius: 999px; transform: translate(-50%, 140%); opacity: 0;
    background: color-mix(in srgb, var(--night) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgb(0 0 0 / .3); transition: transform .35s var(--ease), opacity .25s; }
  .abar.is-on { transform: translate(-50%, 0); opacity: 1; }
  .is-playing .abar { bottom: calc(var(--tab-h) + 92px + env(safe-area-inset-bottom)); }
  .abar a, .abar button { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font: 700 13.5px/1 var(--f-display); cursor: pointer; }
  .abar a:active, .abar button:active { background: rgb(255 255 255 / .12); }
  .abar .icon { width: 19px; height: 19px; }
  .abar__fs { font-weight: 800; letter-spacing: -.02em; }
  .abar__share { background: #25d366 !important; }
}

/* Mobil (uygulama): footer'da yalnız canlı radyo şeridi — marka, iletişim ve bağlantılar menüde */
@media (max-width: 899.98px) {
  .ft { margin-top: var(--s5); padding-top: var(--s4); padding-bottom: var(--s4); }
  .ft-main, .ft-bar { display: none; }
}
.drawer__copy { margin: 18px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* Künye v2: tek satır, sakin — avatar halkalı; sayaçlar tek kapsülde, ince ayraçlı */
.meta { grid-template-columns: minmax(0, 1fr) auto; }
.meta__av { box-shadow: 0 0 0 2px var(--page), 0 0 0 3.5px color-mix(in srgb, var(--red) 55%, transparent); }
.meta__av--brand { box-shadow: 0 0 0 2px var(--page), 0 0 0 3.5px color-mix(in srgb, var(--red) 55%, transparent); }
.meta__stats { gap: 0; padding: 0 4px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); }
.meta__stats li, .meta__stats a { height: 34px; padding: 0 10px; background: none !important; box-shadow: none !important; border-radius: 0; }
.meta__stats li + li { position: relative; }
.meta__stats li + li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--rule); }
.meta__stats li:has(a) { padding: 0; }
@media (max-width: 639.98px) {
  .meta { grid-template-columns: minmax(0, 1fr) auto !important; gap: var(--s3); padding: 12px 0; }
  .meta__av, .meta__av img, .meta__av .hp-img, .meta__av .hp-img img { width: 38px; height: 38px; }
  .meta__av { font-size: 13px; }
  .meta__name b { font-size: 14px; }
  .meta__name small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .meta__role, .meta__upd, .meta__rt { display: none !important; }
  .meta__stats li, .meta__stats a { height: 32px; padding: 0 8px; font-size: 12.5px; }
}

/* =====================================================================
   MOBİL KARŞILAMA ("Bugün") + temiz manşet — masaüstünde gizli/değişmez
   ===================================================================== */
.hp-sh-m, .hp-cats, .hp-slide__k { display: none; }
.hp-topad { padding-top: 0; margin-bottom: calc(14px - var(--section)); }
@media (max-width: 899.98px) {
  :root:has(.hp-today) .sections { display: none; }      /* anasayfa kategori şeridi değil, karşılama */
  :root:has(.hp-today) .app { padding-top: 0; }
  .hp { gap: 26px; }
  .hp-topad { margin: -8px 0 -6px; }

}
/* Selam + hava + canlı kartlar (her ekranda; masaüstü yerleşimi aşağıda) */
  .hp-today { display: grid; gap: 16px; padding: 16px var(--g) 0;
    background: linear-gradient(180deg, var(--night) 0, var(--night) calc(100% - 62px), transparent calc(100% - 62px)); }
  .hp-today__hi { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: #fff; padding-bottom: 2px; }
  .hp-today__hi small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
  .hp-today__hi p { margin: 2px 0 0; font: 800 29px/1.05 var(--f-display); font-stretch: 85%; letter-spacing: -.02em; }
  .hp-today__hi em { font-style: normal; color: #ff5a6b; }
  .hp-today__wx { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; text-align: left; }
  .hp-today__wxi { grid-row: span 2; width: 38px; height: 38px; }
  .hp-today__wx b { font: 800 26px/1 var(--f-display); letter-spacing: -.02em; }
  .hp-today__wx small { font-size: 11px; line-height: 1.25; font-weight: 600; color: rgb(255 255 255 / .6); }
  .hp-today__wx small span { display: block; }

  /* Canlı kısayollar: yatay kaydırılan kartlar */
  .hp-glance { display: flex; gap: 10px; margin-inline: calc(var(--g) * -1); padding: 2px var(--g) 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none; }
  .hp-glance::-webkit-scrollbar { display: none; }
  .hp-g { position: relative; flex: 0 0 146px; display: grid; align-content: start; gap: 3px; min-height: 104px; padding: 12px 13px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--sh-2);
    color: var(--ink); text-align: left; font: inherit; scroll-snap-align: start; cursor: pointer; overflow: hidden; }
  .hp-g:active { transform: scale(.97); transition: transform .08s; }
  .hp-g small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
  .hp-g b { font: 750 14px/1.22 var(--f-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hp-g__ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 11px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
  .hp-g__ic .icon { width: 18px; height: 18px; }
  .hp-g__ic--tl { font: 800 18px/1 var(--f-display); }

  .hp-g--radio { flex-basis: 196px; color: #fff; background: radial-gradient(130% 140% at 0% 0%, #ff3348 0%, #e3051c 42%, #8f0211 100%); box-shadow: 0 12px 28px rgb(227 5 28 / .32); }
  .hp-g--radio .hp-live { margin-bottom: 8px; font-size: 11px; color: #fff; }
  .hp-g--radio b { font-size: 15px; }
  .hp-g--radio small { color: rgb(255 255 255 / .78); padding-right: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hp-g__play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--red); box-shadow: 0 6px 16px rgb(0 0 0 / .2); }
  .hp-g__play .icon { width: 18px; height: 18px; }
  .hp-g__wave { position: absolute; top: 14px; right: 14px; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
  .hp-g__wave i { width: 3px; height: 30%; border-radius: 2px; background: rgb(255 255 255 / .7); }
  .is-playing .hp-g__wave i { animation: hp-wave 1.1s ease-in-out infinite; }
  .hp-g__wave i:nth-child(2) { animation-delay: .3s; } .hp-g__wave i:nth-child(3) { animation-delay: .6s; } .hp-g__wave i:nth-child(4) { animation-delay: .15s; } .hp-g__wave i:nth-child(5) { animation-delay: .45s; }

@media (max-width: 899.98px) {
  /* Bölüm başlığı (mobil) */
  .hp-sh-m { display: flex; padding-inline: var(--g); align-items: baseline; justify-content: space-between; margin-bottom: -14px; }
  .hp-sh-m h2 { margin: 0; font: 800 21px/1 var(--f-display); font-stretch: 85%; letter-spacing: -.015em; }
  .hp-sh-m a { font-size: 13px; font-weight: 700; color: var(--red); }

  /* Manşet: içerden kart — görsel temiz, künye başlığın üstünde */
  .hp-hero { margin-inline: 0; padding-inline: var(--g) !important; gap: 22px; }
  .hp-slider { border-radius: 22px; box-shadow: var(--sh-2); }
  .hp-slide .hp-media { display: block; }
  .hp-slide .hp-img { border-radius: 0; }
  .hp-slide .hp-chip:not(.hp-chip--ad) { display: none; }
  .hp-slide__k { display: flex; align-items: center; gap: 7px; padding: 14px 16px 0; font-size: 12.5px; font-weight: 650; color: rgb(255 255 255 / .62); }
  .hp-slide__k i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); flex: none; }
  .hp-slide__k b { color: #fff; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hp-slide__k em { font-style: normal; opacity: .5; }
  .hp-slide__k small { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .8); }
  .hp-slide__title { padding: 8px 16px 0; font-size: 23px; -webkit-line-clamp: 3; }
  .hp-slider__pager { padding: 14px 16px 16px; }

  /* Dakika dakika: kısa akış (5 başlık) */
  .hp-flow { margin-inline: 0; border-radius: 20px; }
  .hp-flow__list li:nth-child(n+6) { display: none; }

  /* Bölümler: renkli kapsüller */
  .hp-cats { display: flex; gap: 8px; margin-top: -8px; padding: 2px var(--g) 4px; overflow-x: auto; scrollbar-width: none; }
  .hp-cats::-webkit-scrollbar { display: none; }
  .hp-cats a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-size: 13.5px; font-weight: 700; }
  .hp-cats a i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  .hp-cats a .icon { width: 15px; height: 15px; color: var(--c); }

}
/* Şehir şeridi karşılamaya taşındı (her ekranda) */
.hp > section.wrap:has(> .hp-city) { display: none; }

/* =====================================================================
   BUGÜN v2 — bağlama göre kartlar · kaçırdıklarınız · 60 saniyede Ereğli
   ===================================================================== */
.hp-missed, .ms, .st { display: none; }
/* (her ekranda; masaüstü yerleşimi aşağıda) */
  /* Son dakika kartı (son 3 saat) */
  .hp-g--hot { flex-basis: 236px; color: #fff; background: linear-gradient(150deg, #2a0a0e, #111217 70%); box-shadow: 0 12px 28px rgb(0 0 0 / .28), inset 0 0 0 1.5px rgb(255 59 78 / .5); }
  .hp-g--hot .hp-live { margin-bottom: 8px; font-size: 11px; }
  .hp-g--hot b { -webkit-line-clamp: 3; font-size: 14.5px; }
  .hp-g--hot small { color: rgb(255 255 255 / .55); }

  /* Günün özeti kartı — halka (görülünce griye döner) */
  .hp-g--story { flex-basis: 150px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #2c2f3a, #111217 70%); box-shadow: 0 12px 28px rgb(0 0 0 / .22); }
  .hp-g--story small { color: rgb(255 255 255 / .6); }
  .hp-g__ring { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; padding: 2.5px;
    background: conic-gradient(from 200deg, #ff3348, #ffb300, #ff3348, #ec4899, #ff3348); }
  .hp-g__ring > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #111217; box-shadow: inset 0 0 0 2px #111217; font: 800 15px/1 var(--f-display); letter-spacing: -.03em; }
  .hp-g__ring small { display: block; margin-top: -3px; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .65); }
  .hp-g--story:not(.is-seen) .hp-g__ring { animation: ringSpin 6s linear infinite; }
  .hp-g--story:not(.is-seen) .hp-g__ring > span { animation: ringSpin 6s linear infinite reverse; }
  @keyframes ringSpin { to { transform: rotate(360deg); } }
  .hp-g--story.is-seen .hp-g__ring { background: rgb(255 255 255 / .22); }

  /* Deniz kartı */
  .hp-g--sea.is-warn { box-shadow: var(--sh-2), inset 0 0 0 1.5px rgb(245 158 11 / .6); }
  .hp-g--sea.is-warn small:first-of-type { color: #d97706; }
  .hp-g--sea b + small { margin-top: 1px; }

  /* Kaçırdıklarınız satırı */
  .hp-missed { display: flex; align-items: center; gap: 9px; justify-self: start; max-width: 100%; height: 36px; margin-top: -4px; padding: 0 10px 0 12px; border: 0; border-radius: 999px;
    background: rgb(255 255 255 / .1); color: #fff; font: 650 13.5px/1 var(--f-display); cursor: pointer; animation: fadeIn .4s; }
  .hp-missed[hidden] { display: none; }
  .hp-missed b { color: #ff8a96; font-weight: 800; }
  .hp-missed .icon { width: 16px; height: 16px; opacity: .6; }
  .hp-missed__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3348; box-shadow: 0 0 0 3px rgb(255 51 72 / .25); }
  .hp-missed:active { transform: scale(.97); }

  .ms { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; background: rgb(8 9 12 / .5); animation: fadeIn .2s; }
  .ms[hidden] { display: none; }
  .ms__panel { width: 100%; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--page); animation: sheetUp .34s cubic-bezier(.2, .9, .25, 1); }
  .ms__h { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; background: var(--page); }
  .ms__h small { font-size: 12px; font-weight: 700; color: var(--muted); }
  .ms__h h2 { margin: 0; font: 800 24px/1.1 var(--f-display); font-stretch: 85%; }
  .ms__h .ibtn { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
  .ms__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ms__list a { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); }
  .ms__list small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .ms__list small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
  .ms__list b { font: 700 15px/1.3 var(--f-display); }
  .ms__done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 14px; background: var(--ink); color: var(--page); font: 750 15px/1 var(--f-display); cursor: pointer; }
  .ms__done .icon { width: 18px; height: 18px; }

  /* ---------- 60 saniyede Ereğli: tam ekran hikâye ---------- */
  .st { position: fixed; inset: 0; z-index: 95; display: block; background: #08090c; color: #fff; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; animation: stIn .3s var(--ease); }
  .st[hidden] { display: none; }
  @keyframes stIn { from { opacity: 0; transform: scale(.96); } }
  .st.is-closing { animation: stOut .22s ease forwards; }
  @keyframes stOut { to { opacity: 0; transform: translateY(40px) scale(.96); } }
  .st__top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 12px 18px; background: linear-gradient(rgb(0 0 0 / .55), transparent); }
  .st__bars { display: flex; gap: 4px; }
  .st__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .28); overflow: hidden; }
  .st__bars i { display: block; width: 0; height: 100%; background: #fff; }
  .st__bars span.is-done i { width: 100%; }
  .st__bars span.is-run i { animation: stBar var(--dur, 7s) linear forwards; }
  .st.is-paused .st__bars span.is-run i { animation-play-state: paused; }
  @keyframes stBar { to { width: 100%; } }
  .st__who { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
  .st__who b { font: 750 14px/1 var(--f-display); }
  .st__who > small { font-size: 12.5px; color: rgb(255 255 255 / .6); }
  .st__logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); font: 800 11px/1 var(--f-display); }
  .st__logo small { display: none; }
  .st__x { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
  .st__x .icon { width: 20px; height: 20px; }

  .st__stage { position: absolute; inset: 0; }
  .st__s { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: flex-end; gap: 14px; padding: calc(92px + env(safe-area-inset-top)) 22px calc(34px + env(safe-area-inset-bottom)); }
  .st__s.is-on { display: flex; animation: stSlide .35s var(--ease); }
  @keyframes stSlide { from { opacity: 0; transform: translateX(16px); } }
  .st__s h2 { margin: 0; font: 800 30px/1.05 var(--f-display); font-stretch: 82%; letter-spacing: -.02em; }
  .st__s h2 em { font-style: normal; color: #ff5a6b; }
  .st__k { align-self: flex-start; padding: 6px 11px; border-radius: 999px; background: rgb(255 255 255 / .12); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

  .st__s--intro { justify-content: center; background: radial-gradient(90% 60% at 20% 15%, rgb(227 5 28 / .55), transparent 70%), radial-gradient(80% 60% at 90% 90%, rgb(236 72 153 / .35), transparent 70%), #0b0c10; }
  .st__s--intro > small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
  .st__s--intro h2 { font-size: 40px; }
  .st__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
  .st__facts li { display: grid; gap: 2px; min-width: 92px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .09); font-size: 12.5px; color: rgb(255 255 255 / .7); }
  .st__facts b { font: 800 24px/1 var(--f-display); color: #fff; }
  .st__hint { margin: 18px 0 0; font-size: 12.5px; color: rgb(255 255 255 / .45); }

  .st__s--lead { justify-content: center; background: #0b0c10; }
  .st__fig { margin: 0; border-radius: 18px; overflow: hidden; background: #16171c; box-shadow: 0 20px 50px rgb(0 0 0 / .5); }
  .st__fig .hp-img, .st__fig img { display: block; width: 100%; height: auto; max-height: 42dvh; object-fit: contain; }
  .st__cat { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .7); }
  .st__cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  .st__s--lead h2 { font-size: 27px; }
  .st__go { position: relative; z-index: 4; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: #111217; font: 800 15px/1 var(--f-display); }
  .st__go .icon { width: 18px; height: 18px; }

  .st__s--list, .st__s--top { background: linear-gradient(170deg, #1b1d24, #0b0c10 60%); }
  .st__rows, .st__rank, .st__sched { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .st__rows a, .st__rank a { position: relative; z-index: 4; display: grid; gap: 5px; padding: 14px 16px; border-radius: 18px; background: rgb(255 255 255 / .07); }
  .st__rows small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgb(255 255 255 / .6); }
  .st__rows small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
  .st__rows b, .st__rank b { font: 700 16.5px/1.25 var(--f-display); }
  .st__rank a { grid-template-columns: 44px 1fr; column-gap: 12px; }
  .st__rank span { grid-row: span 2; font: 800 44px/.9 var(--f-display); font-stretch: 75%; color: #ff5a6b; }
  .st__rank small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgb(255 255 255 / .55); }
  .st__rank small .icon { width: 14px; height: 14px; }

  .st__s--wx { background: linear-gradient(180deg, #0c2a4a 0%, #0a1b30 55%, #071321 100%); }
  .st__wx { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; }
  .st__wxi { width: 64px; height: 64px; }
  .st__wx > b { font: 800 64px/.9 var(--f-display); letter-spacing: -.04em; }
  .st__wx span { display: grid; gap: 3px; font: 700 17px/1.2 var(--f-display); }
  .st__wx span small { font: 600 12.5px/1.3 var(--f-body, inherit); color: rgb(255 255 255 / .6); }
  .st__days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .st__days span { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: rgb(255 255 255 / .08); }
  .st__days small { font-size: 12px; color: rgb(255 255 255 / .65); }
  .st__dwx { width: 28px; height: 28px; }
  .st__days b { font: 800 16px/1 var(--f-display); }
  .st__days em { font-style: normal; font-weight: 600; color: rgb(255 255 255 / .5); }
  .st__sea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .st__sea li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgb(56 189 248 / .12); box-shadow: inset 0 0 0 1px rgb(56 189 248 / .18); }
  .st__sea small { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7dd3fc; }
  .st__sea b { font: 800 19px/1.15 var(--f-display); }
  .st__sea span { font-size: 12px; color: rgb(255 255 255 / .6); line-height: 1.3; }

  .st__s--radio { background: radial-gradient(100% 70% at 50% 0%, rgb(227 5 28 / .6), transparent 70%), #0b0c10; }
  .st__sched li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .07); }
  .st__sched li.is-on { background: rgb(227 5 28 / .32); box-shadow: inset 0 0 0 1.5px rgb(255 90 107 / .6); }
  .st__sched time { grid-row: span 2; align-self: center; font: 800 15px/1 var(--f-display); font-variant-numeric: tabular-nums; }
  .st__sched li.is-on time { color: #ffb3bb; }
  .st__sched b { font: 700 15.5px/1.2 var(--f-display); }
  .st__sched small { font-size: 12.5px; color: rgb(255 255 255 / .6); }
  .st__play { position: relative; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border: 0; border-radius: 999px; background: #fff; color: var(--red); font: 800 16px/1 var(--f-display); cursor: pointer; }
  .st__play .icon { width: 20px; height: 20px; }
  .st__play .ic-pause { display: none; } .is-playing .st__play .ic-play { display: none; } .is-playing .st__play .ic-pause { display: block; }
  .st__duty { position: relative; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(15 157 88 / .18); box-shadow: inset 0 0 0 1px rgb(15 157 88 / .35); }
  .st__duty > .icon { width: 22px; height: 22px; color: #34d399; flex: none; }
  .st__duty small { display: block; font-size: 11.5px; font-weight: 700; color: #6ee7b7; }
  .st__duty b { font: 700 14.5px/1.25 var(--f-display); }

  /* Dokunma alanları: sol üçte bir geri, kalanı ileri (bağlantılar üstte kalır) */
  .st__nav { position: absolute; z-index: 2; top: 0; bottom: 0; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
  .st__nav--prev { left: 0; width: 30%; }
  .st__nav--next { right: 0; width: 70%; }
  .st__frame { position: absolute; inset: 0; }
  .st__arr { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hp-g--story .hp-g__ring, .hp-g--story .hp-g__ring > span { animation: none !important; }
}

/* =====================================================================
   OKURLAR NE DİYOR — grup sohbeti: renkli okurlar, alıntılı mesaj balonları
   ===================================================================== */
.hp-chat { --av-l: 92%; --av-c: 38%; --nm: 40%; --bub: var(--surface-2); --re: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
:root[data-theme="dark"] .hp-chat { --av-l: 24%; --av-c: 76%; --nm: 72%; --re: rgb(255 255 255 / .05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-chat { --av-l: 24%; --av-c: 76%; --nm: 72%; --re: rgb(255 255 255 / .05); } }
.hp-chat__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4); }
.hp-chat__h .hp-panel__t { margin: 0; }
.hp-chat__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.hp-chat__live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .2); }
.hp-chat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hp-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: start; }
.hp-msg.is-cont { margin-top: -6px; }
.hp-msg__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: hsl(var(--h) 70% var(--av-l)); color: hsl(var(--h) 55% var(--av-c)); font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.hp-msg__b { position: relative; justify-self: start; max-width: 100%; padding: 8px 12px 9px; border-radius: 4px 18px 18px 18px; background: var(--bub); }
.hp-msg__b::before { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 12px; background: var(--bub); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.hp-msg__who { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 750; color: hsl(var(--h) 55% var(--nm)); }
.hp-msg__re { display: grid; gap: 2px; margin: 2px 0 7px; padding: 7px 10px; border-left: 3px solid var(--red); border-radius: 8px; background: var(--re); transition: background .2s; }
.hp-msg__re:hover { background: color-mix(in srgb, var(--red) 8%, var(--surface)); }
.hp-msg__re small { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; color: var(--red); }
.hp-msg__re small .icon { width: 12px; height: 12px; }
.hp-msg__re span { font-size: 12.5px; font-weight: 650; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-msg__t { margin: 0; font-size: 14.5px; line-height: 1.42; color: var(--ink); overflow-wrap: anywhere; }
.hp-msg__t time { float: right; margin: 6px 0 -3px 10px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* =====================================================================
   BUGÜN — masaüstü: sayfa zemininde ferah selam + sağda canlı kartlar;
   hikâye ortada telefon oranlı pencere, kaçırdıklarınız ortada liste
   ===================================================================== */
@media (min-width: 900px) {
  .hp-today { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "hi cards" "missed cards"; align-items: center; column-gap: 32px; row-gap: 12px;
    width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 6px var(--g) 0; background: none; }
  .hp-today__hi { grid-area: hi; display: grid; gap: 10px; color: var(--ink); align-self: end; }
  .hp-today__hi small { color: var(--muted); font-size: 12.5px; }
  .hp-today__hi p { font-size: 38px; white-space: nowrap; }
  .hp-today__hi em { color: var(--red); }
  .hp-today__wx { justify-self: start; grid-template-columns: auto auto auto; column-gap: 10px; }
  .hp-today__wxi { grid-row: auto; width: 30px; height: 30px; }
  .hp-today__wx b { font-size: 22px; }
  .hp-today__wx small { color: var(--muted); font-size: 12px; }
  .hp-today__wx small span { display: inline; } .hp-today__wx small span::before { content: " · "; }
  .hp-missed { grid-area: missed; align-self: start; margin: 0; background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); transition: box-shadow .2s, transform .2s var(--ease); }
  .hp-missed:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
  .hp-missed b { color: var(--red); }
  .hp-glance { grid-area: cards; justify-content: flex-start; margin: 0; padding: 6px 2px 12px; scroll-snap-type: none; }
  .hp-glance > :first-child { margin-left: auto; }
  .hp-g { flex: 0 0 156px; min-height: 120px; padding: 14px 15px; transition: transform .25s var(--ease), box-shadow .25s; }
  .hp-g:hover { transform: translateY(-3px); }
  a.hp-g:hover, div.hp-g:hover { box-shadow: 0 4px 8px rgb(16 18 24 / .06), 0 18px 40px rgb(16 18 24 / .12); }
  .hp-g--radio { flex-basis: 188px; }
  .hp-g--hot { flex-basis: 220px; }
  .hp-g--fx, .hp-g--nb { display: none; }     /* masaüstünde üst şerit ve menüde zaten var */
  .hp-topad { margin-top: calc(12px - var(--section)); }

  /* Hikâye: karartılmış zemin + ortada çerçeve + yan oklar */
  .st { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: 22px; background: rgb(8 9 12 / .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); touch-action: auto; }
  .st[hidden] { display: none; }
  .st__frame { position: relative; inset: auto; width: min(430px, 92vw); height: min(820px, 92vh); border-radius: 24px; overflow: hidden; background: #08090c; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
  .st__top { padding-top: 14px; }
  .st__s { padding-top: 92px; padding-bottom: 30px; }
  .st__arr { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
  .st__arr:hover { background: rgb(255 255 255 / .26); transform: scale(1.06); }
  .st__arr .icon { width: 24px; height: 24px; }
  .st__nav { cursor: pointer; }
  .st__go:hover, .st__play:hover { transform: translateY(-1px); }
  .st__rows a:hover, .st__rank a:hover { background: rgb(255 255 255 / .12); }

  /* Kaçırdıklarınız: ortada pencere */
  .ms { align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .ms__panel { width: min(560px, 92vw); max-height: 80vh; padding: 8px 22px 22px; border-radius: 24px; box-shadow: 0 30px 80px rgb(0 0 0 / .35); animation: msPop .28s var(--ease); }
  @keyframes msPop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  .ms__list a { transition: transform .2s var(--ease), box-shadow .2s; }
  .ms__list a:hover { transform: translateX(3px); box-shadow: var(--sh-2); }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .hp-today { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hi missed" "cards cards"; }
  .hp-today__hi { display: flex; align-items: flex-end; gap: 24px; }
  .hp-missed { align-self: end; }
  .hp-glance > :first-child { margin-left: 0; }
}

/* =====================================================================
   ÖNE ÇIKARMA — Editörün seçimi bandı · kategori işareti · haber içi "Gündemde" · karşılama kartı · arama
   ===================================================================== */
.hp-ed__grid { display: grid; gap: var(--s4); }
.hp-ed__c { display: grid; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .25s, transform .25s var(--ease); }
.hp-ed__c:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.hp-ed__c .hp-media { display: block; background: var(--surface-2); }
.hp-ed__b { display: grid; align-content: center; gap: 10px; padding: var(--s4) var(--s5) var(--s5); }
.hp-ed__cat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.hp-ed__cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.hp-ed__t { font: 800 22px/1.12 var(--f-display); font-stretch: 85%; letter-spacing: -.015em; color: var(--ink); }
.hp-ed__c.is-big .hp-ed__t { font-size: 28px; }
.hp-ed__x { font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp-ed__go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 750; color: var(--red); }
.hp-ed__go .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.hp-ed__c:hover .hp-ed__go .icon { transform: translateX(3px); }
.hp-ed__c:hover .hp-ed__t { color: var(--red); }
@media (min-width: 900px) {
  .hp-ed__grid.is-two { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .hp-ed__c.is-big { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .hp-ed__c.is-big .hp-media { align-self: stretch; display: grid; align-items: center; }
  .hp-ed__grid:not(.is-two) .hp-ed__c.is-big .hp-ed__t { font-size: 32px; }
}

.hp-boosted { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-bottom: 2px; padding: 3px 9px 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.hp-boosted .icon { width: 13px; height: 13px; }

.art-trend { margin: 1.6em 0; font-family: var(--f-display); }
.art-trend a { display: block; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1), inset 3px 0 0 var(--red); text-decoration: none !important; transition: box-shadow .2s; }
.art-trend a:hover { box-shadow: var(--sh-2), inset 3px 0 0 var(--red); }
.art-trend__k { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.art-trend__k .icon { width: 14px; height: 14px; }
.art-trend__in { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.art-trend__in .hp-media { border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.art-trend__in b { font-size: 17px; line-height: 1.25; font-weight: 750; color: var(--ink); }
.art-trend a:hover b { color: var(--red); }

.hp-g--gnd { background: linear-gradient(150deg, #2b1d05, #111217 72%) !important; box-shadow: 0 12px 28px rgb(0 0 0 / .25), inset 0 0 0 1.5px rgb(245 158 11 / .55) !important; }
.hp-g__k { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fbbf24; }
.hp-g__k .icon { width: 13px; height: 13px; }

.qs__sec--trend .qs__h { display: flex; align-items: center; gap: 6px; color: var(--red); }
.qs__sec--trend .qs__h .icon { width: 15px; height: 15px; }
.qs-row__n--hot { color: var(--red) !important; }
.qs-row__n--hot .icon { width: 16px; height: 16px; }

/* Haber metninde AI/editör vurgusu: <mark> — sakin, okunaklı fosforlu kalem */
.prose mark { background: linear-gradient(transparent 38%, color-mix(in srgb, #facc15 55%, transparent) 38%); color: inherit; padding: 0 .1em; }
:root[data-theme="dark"] .prose mark { background: linear-gradient(transparent 38%, color-mix(in srgb, #facc15 35%, transparent) 38%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose mark { background: linear-gradient(transparent 38%, color-mix(in srgb, #facc15 35%, transparent) 38%); } }

/* Mağaza uygulaması içinde: tarayıcıya özgü öğeler gizli (ana ekrana ekle, uygulama indir bağlantıları) */
.is-app [data-pwa-install], .is-app .ft-apps, .is-app [data-app-links] { display: none !important; }

/* =============== İSKELET (yumuşak geçişte sayfa silüeti) ve görsel yer tutucu =============== */
.is-navigating .app:has(> .sk) { opacity: 1; }
.sk { display: grid; gap: 12px; padding-block: 18px 40px; }
.sk__l, .sk__box { display: block; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 8%, transparent); position: relative; overflow: hidden; }
.sk__l--h { height: 26px; border-radius: 9px; }
.sk__l--s { height: 11px; }
.sk__box--hero { height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg, 18px); margin-block: 8px; }
.sk__box--lead { height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg, 18px); margin-block: 6px 10px; }
.sk__box--th { width: 108px; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; flex: none; }
.sk__row { display: flex; gap: 12px; align-items: center; }
.sk__row > div { flex: 1; display: grid; gap: 9px; }
.sk--article { max-width: 760px; }
.sk__l::after, .sk__box::after, .is-img-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%);
  transform: translateX(-100%); animation: sk-shine 1.25s ease-in-out infinite;
}
.is-img-loading:not([style*="position"]) { position: relative; }
@keyframes sk-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk__l::after, .sk__box::after, .is-img-loading::after { animation: none; opacity: 0; } }
@media (min-width: 900px) { .sk--list { max-width: 900px; } .sk__box--lead { max-height: 420px; } }

/* =============== TEPKİLER: en çok hissettirilen duygu =============== */
.feel__top { --fc: var(--muted); display: flex; align-items: center; gap: 10px; margin: calc(var(--s2) * -1) 0 0; padding: 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--fc) 10%, var(--surface)); color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.feel__top b { color: var(--ink); font-weight: 800; }
.feel__top b:last-child { color: var(--fc); }
.feel__top-emo { flex: none; font-size: 24px; line-height: 1; letter-spacing: 2px; }
.feel__top[hidden] { display: none; }
.feel__badge { display: none; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 99px;
  background: var(--fc); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.feel__b.is-top { background: color-mix(in srgb, var(--fc) 9%, var(--surface-2)); }
.feel:has(.is-top) .feel__b { padding-top: calc(var(--s3) + 14px); }
.feel__b.is-top .feel__badge { display: block; }
.feel__b.is-top .feel__emo { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 35%, transparent); transform: scale(1.06); }
.feel__b.is-top .feel__n b { color: var(--fc); }
.feel.is-voted .feel__b.is-top:not(.is-picked) { opacity: 1; }
.feel__row { align-items: stretch; }
@media (max-width: 639.98px) {
  .feel__top { font-size: 13px; padding: 9px 12px; }
  .feel__top-emo { font-size: 20px; }
  .feel__badge { font-size: 8.5px; padding: 2px 5px; top: 5px; }
  .feel:has(.is-top) .feel__b { padding-top: calc(var(--s3) + 10px); }
}

/* =============== ARŞİV =============== */
.arc { --arc: var(--red); }
.arc-head { padding: var(--s4) 0 var(--s3); }
.arc-head__k { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--arc); }
.arc-head h1 { margin: 0; font-size: clamp(28px, 4.2vw, 44px); font-weight: 800; font-stretch: 88%; line-height: 1.05; letter-spacing: -.01em; }
.arc-head p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.arc-head p b { color: var(--ink); font-variant-numeric: tabular-nums; }

.arc-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; border-radius: var(--r-lg, 18px); background: var(--surface); box-shadow: var(--sh-1); }
.arc-filter__q { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.arc-filter__q input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; outline: none; }
.arc-filter__f { display: grid; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.arc-filter__f select, .arc-filter__f input { height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.arc-filter__go { height: 40px; align-self: end; padding: 0 18px; border: 0; border-radius: 10px; background: var(--arc); color: #fff; font-weight: 800; cursor: pointer; }
.arc-filter__clear { align-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.arc-filter__clear:hover { background: var(--surface-2); }
.arc-filter__clear .icon { width: 16px; height: 16px; }
.arc-filter__q { grid-column: 1 / -1; }
@media (max-width: 639.98px) { .arc-filter__f select, .arc-filter__f input, .arc-filter__go, .arc-filter__clear { height: 38px; font-size: 13.5px; } .arc-filter__f span { font-size: 10px; } }
@media (min-width: 640px) { .arc-filter { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .arc-filter { grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto; align-items: end; } .arc-filter__q { grid-column: auto; } }

/* Yıl şeridi */
.arc-years { display: flex; gap: 6px; margin: var(--s4) calc(var(--g) * -1) 0; padding: 4px var(--g) 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.arc-years::-webkit-scrollbar { display: none; }
.arc-year { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; width: 64px; padding: 8px 4px 9px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); transition: transform .15s var(--ease), background .15s; }
.arc-year:hover { transform: translateY(-2px); }
.arc-year__bar { display: flex; align-items: flex-end; width: 22px; height: 44px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.arc-year__bar i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--arc) 55%, transparent); }
.arc-year b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.arc-year small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arc-year.is-on { background: var(--arc); color: #fff; }
.arc-year.is-on .arc-year__bar { background: rgb(255 255 255 / .25); }
.arc-year.is-on .arc-year__bar i { background: #fff; }
.arc-year.is-on small { color: rgb(255 255 255 / .85); }
.arc-year.is-empty { opacity: .45; }

/* Aylar */
.arc-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s3); }
@media (min-width: 640px) { .arc-months { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .arc-months { grid-template-columns: repeat(6, 1fr); } }
.arc-month { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); }
.arc-month b { font-size: 14.5px; font-weight: 800; }
.arc-month small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arc-month__bar { height: 4px; margin-top: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.arc-month__bar i { display: block; height: 100%; border-radius: 4px; background: var(--arc); }
.arc-month:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--arc) 45%, transparent), var(--sh-1); }
.arc-month.is-on { background: var(--arc); color: #fff; }
.arc-month.is-on small { color: rgb(255 255 255 / .85); }
.arc-month.is-on .arc-month__bar { background: rgb(255 255 255 / .3); } .arc-month.is-on .arc-month__bar i { background: #fff; }
.arc-month.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); }

/* Takvim (yoğunluk ısısı) */
.arc-cal { margin-top: var(--s3); padding: var(--s4); border-radius: var(--r-lg, 18px); background: var(--surface); box-shadow: var(--sh-1); }
.arc-cal__h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.arc-cal__h h2 { margin: 0; font-size: 18px; font-weight: 800; }
.arc-cal__nav { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.arc-cal__legend { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.arc-cal__legend i { width: 12px; height: 12px; border-radius: 3px; }
.arc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.arc-cal__wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.arc-day { position: relative; display: grid; place-items: center; align-content: center; aspect-ratio: 1; border-radius: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.arc-day b { font-size: 14px; font-weight: 800; line-height: 1; }
.arc-day small { font-size: 10px; font-weight: 700; opacity: .75; margin-top: 2px; }
.arc-day.is-empty { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.arc-day.is-empty b { font-weight: 600; }
:is(.arc-day, .arc-cal__legend i)[data-h="1"] { background: color-mix(in srgb, var(--arc) 12%, var(--surface)); }
:is(.arc-day, .arc-cal__legend i)[data-h="2"] { background: color-mix(in srgb, var(--arc) 26%, var(--surface)); }
:is(.arc-day, .arc-cal__legend i)[data-h="3"] { background: color-mix(in srgb, var(--arc) 45%, var(--surface)); }
:is(.arc-day, .arc-cal__legend i)[data-h="4"] { background: color-mix(in srgb, var(--arc) 68%, var(--surface)); color: #fff; }
.arc-day:hover { box-shadow: inset 0 0 0 2px var(--arc); }
.arc-day.is-on { background: var(--ink); color: var(--paper); }
@media (min-width: 900px) { .arc-cal__grid { gap: 7px; } .arc-day { aspect-ratio: auto; height: 54px; } }

/* Sonuçlar */
.arc-cols { margin-top: var(--s5); }
.arc-res { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 6px; }
.arc-res h2 { margin: 0; font-size: 20px; font-weight: 800; font-stretch: 90%; }
.arc-res span { font-size: 13px; color: var(--muted); font-weight: 600; }
.arc-list .lp-day { margin-top: 18px; }
.arc-side { display: grid; gap: var(--s4); align-content: start; }
.arc-otd__sub { margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); }
.arc-otd ol, .arc-top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.arc-otd a, .arc-top a { display: flex; gap: 10px; padding: 9px 4px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.35; }
.arc-otd a:hover, .arc-top a:hover { background: var(--surface-2); }
.arc-otd__y { flex: none; align-self: start; padding: 2px 7px; border-radius: 7px; background: color-mix(in srgb, var(--arc) 12%, transparent); color: var(--arc); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.arc-top b { flex: none; width: 22px; font-size: 18px; font-weight: 800; color: var(--arc); }
.arc-top small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.arc-jump div { display: flex; flex-wrap: wrap; gap: 6px; }
.arc-jump a { padding: 7px 12px; border-radius: 99px; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 700; }
.arc-jump a:hover { background: var(--arc); color: #fff; }
.panel__t .icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: var(--arc); }

/* =============== Nazik davetler (bildirim / uygulama) =============== */
.inv { position: fixed; z-index: 58; left: 10px; right: 10px; bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 40px 14px 14px; border-radius: 18px;
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgb(0 0 0 / .22), 0 0 0 1px var(--rule); animation: invIn .45s var(--ease) both; }
.inv.is-out { animation: invOut .3s var(--ease) forwards; }
@keyframes invIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes invOut { to { opacity: 0; transform: translateY(12px); } }
.inv__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); overflow: hidden; }
.inv__ic svg { width: 22px; height: 22px; animation: invBell 2.4s ease-in-out .8s 2; transform-origin: 50% 10%; }
.inv__ic img { width: 44px; height: 44px; display: block; }
@keyframes invBell { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } }
.inv__b b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.inv__b p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.inv__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inv__yes { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--red); color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.inv__no { height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.inv__yes:hover { filter: brightness(1.08); } .inv__no:hover { color: var(--ink); }
.inv__store { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }
.inv__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.inv__x:hover { background: var(--surface-2); color: var(--ink); }
.inv__x svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .inv { left: 20px; right: auto; bottom: 88px; width: 380px; } }
@media (prefers-reduced-motion: reduce) { .inv, .inv.is-out, .inv__ic svg { animation: none; } }
/* Davet açıkken OneSignal zili çakışmasın */
.has-invite #onesignal-bell-container { opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (max-width: 899.98px) { .inv__act { flex-wrap: nowrap; } .inv__yes, .inv__no { padding: 0 12px; font-size: 13px; white-space: nowrap; } }