/* ==========================================================================
   GÜNCELGÜNDEM.TR - DESIGN SYSTEM & STYLESHEET
   FAZ 01 / PROMPT 01 - Foundation CSS
   ========================================================================== */

/* Optional CDN import; if offline/self-hosted, falls back smoothly to system sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* --- CSS Variables & Design Tokens --- */
:root {
  /* Typography */
  --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Color Palette */
  --color-primary: #E30613;
  --color-primary-hover: #C0040F;
  --color-primary-soft: #FEF2F2;
  --color-primary-border: #FCA5A5;

  --color-dark: #0F172A;
  --color-dark-surface: #1E293B;
  --color-dark-muted: #334155;

  --color-text-main: #1E293B;
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;
  --color-text-white: #FFFFFF;

  --color-bg-body: #FFFFFF;
  --color-bg-light: #F8FAFC;
  --color-bg-alt: #F1F5F9;

  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-strong: #CBD5E1;

  --color-positive: #16A34A;
  --color-positive-soft: #DCFCE7;
  --color-negative: #DC2626;
  --color-negative-soft: #FEE2E2;

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 16px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  /* Shadows (Subtle, elegant news style) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* --- Base Reset & Typography --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg-body);
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  object-fit: cover;
}

button, input {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* --- Container --- */
.container {
  max-width: var(--container-max-width);
  width: calc(100% - 32px);
  margin-inline: auto;
}

/* --- Utilities & Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.badge-red {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.badge-blue {
  background-color: #0284C7;
  color: #FFFFFF;
}

.badge-green {
  background-color: #16A34A;
  color: #FFFFFF;
}

.badge-purple {
  background-color: #7C3AED;
  color: #FFFFFF;
}

.badge-orange {
  background-color: #EA580C;
  color: #FFFFFF;
}

.badge-dark {
  background-color: var(--color-dark);
  color: #FFFFFF;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--color-primary);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--color-dark);
  text-transform: uppercase;
}

.section-title-line {
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.section-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform var(--transition-fast);
}

.section-link:hover {
  transform: translateX(3px);
  color: var(--color-primary-hover);
}

.section-spacer {
  margin-top: 36px;
  margin-bottom: 36px;
}

/* ==========================================================================
   1. ÜST BİLGİ BARI (TOP UTILITY BAR)
   ========================================================================== */
.top-bar {
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 6px 0;
}

.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-bar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.top-bar-date {
  font-weight: 600;
  color: var(--color-dark);
}

.top-bar-weather-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-weather-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-main);
  font-weight: 500;
}

.top-weather-item svg {
  width: 14px;
  height: 14px;
  color: #F59E0B;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-nav-links a {
  color: var(--color-text-muted);
  font-weight: 500;
}

.top-nav-links a:hover {
  color: var(--color-primary);
}

.top-social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-circle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #E2E8F0;
  color: #475569;
  transition: all var(--transition-fast);
}

.social-circle-link:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.social-circle-link svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   2. ANA HEADER
   ========================================================================== */
.site-header {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.header-logo-area {
  flex-shrink: 0;
}

.site-logo {
  display: inline-block;
}

.site-logo img {
  width: 220px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
@media (min-width: 1920px) { .site-logo img { width: 240px; } }
@media (min-width: 1366px) and (max-width: 1919px) { .site-logo img { width: 225px; } }
@media (min-width: 1024px) and (max-width: 1365px) { .site-logo img { width: 205px; } }
@media (min-width: 768px)  and (max-width: 1023px) { .site-logo img { width: 190px; } }
@media (max-width: 767px)  { .site-logo img { width: 175px; } }

/* Search Box */
.header-search-form {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.header-search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.header-search-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
  background-color: #FFFFFF;
}

.header-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 18px;
  font-size: 0.88rem;
  color: var(--color-text-main);
  outline: none;
}

.header-search-input::placeholder {
  color: var(--color-text-light);
}

.header-search-btn {
  background-color: var(--color-primary);
  color: #FFFFFF;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.header-search-btn:hover {
  background-color: var(--color-primary-hover);
}

.header-search-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  min-width: 16px;
}

/* Header Actions & Quick Links */
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.header-quick-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.quick-link-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark);
  padding: 6px 8px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.quick-link-item:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.quick-link-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.btn-report-news {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 4px rgba(227, 6, 19, 0.25);
  transition: all var(--transition-fast);
}

.btn-report-news:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 4px 8px rgba(227, 6, 19, 0.35);
  transform: translateY(-1px);
}

.btn-report-news svg {
  width: 15px;
  height: 15px;
}

/* Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-light);
  color: var(--color-dark);
}

.mobile-menu-toggle svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   3. ANA NAVİGASYON (MAIN NAVBAR)
   ========================================================================== */
.site-nav {
  background-color: #FFFFFF;
  border-bottom: 2px solid var(--color-dark);
  position: relative;
  z-index: 40;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-list::-webkit-scrollbar {
  display: none;
}

.nav-item {
  flex-shrink: 0;
}

.nav-link {
  display: inline-block;
  padding: 12px 11px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.nav-breaking-badge {
  background-color: var(--color-primary);
  color: #FFFFFF !important;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-right: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-link.nav-breaking-badge::after {
  display: none;
}

.nav-link.nav-breaking-badge:hover {
  background-color: var(--color-primary-hover);
}

/* Mobile Off-canvas Drawer */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal);
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 290px;
  background: #FFFFFF;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
}

.mobile-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer-overlay.active .mobile-drawer {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.mobile-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-nav-item a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark);
}

.mobile-nav-item a:hover {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}

/* ==========================================================================
   4. SON DAKİKA TICKER (BREAKING NEWS)
   ========================================================================== */
.ticker-section {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
}

.ticker-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 44px;
}

.ticker-badge {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.ticker-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFFFFF;
  animation: pulseAnimation 1.5s infinite;
}

@keyframes pulseAnimation {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* Son Dakika bandı — kesintisiz kayma (marquee). İçerik bir kez çoğaltıldığı
   için -50%'de sorunsuz (kesintisiz) döngü sağlanır. */
@keyframes tickerScrollTrack {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-content {
  flex: 1;
  overflow: hidden;
  padding: 0 16px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.ticker-item:hover {
  color: var(--color-primary);
}

.ticker-time {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.82rem;
}

.ticker-controls {
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  flex-shrink: 0;
}

.ticker-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  transition: all var(--transition-fast);
}

.ticker-btn:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.ticker-btn svg {
  width: 14px;
  height: 14px;
}

/* Son Dakika bandı — TÜM CİHAZLARDA kesintisiz sola akan marquee.
   Tüm başlıklar arka arkaya küçük boşlukla sürekli akar; JS içeriği bir kez
   kopyalar, -50% ile sorunsuz döngü olur. İleri/geri butonları gizlenir. */
.ticker-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: tickerScrollTrack 34s linear infinite;
  will-change: transform;
}
.ticker-item {
  display: inline-flex !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
  min-width: auto;
  padding-right: 44px;   /* haberler arası küçük boşluk */
}
.ticker-content:hover .ticker-track,
.ticker-content:active .ticker-track {
  animation-play-state: paused;   /* üzerine gelince/dokununca durur */
}
.ticker-controls { display: none; }
.ticker-time { flex-shrink: 0; }

/* ==========================================================================
   5. HERO / ANA MANŞET
   ========================================================================== */
.hero-section {
  margin-top: 16px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 66% 1fr;
  gap: 20px;
}

/* Sol Büyük Manşet */
.hero-main-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-dark);
  box-shadow: var(--shadow-md);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-main-img-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hero-main-card:hover .hero-main-img {
  transform: scale(1.03);
}

.hero-main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.3) 40%, rgba(15, 23, 42, 0.95) 100%);
  pointer-events: none;
}

.hero-main-content {
  position: relative;
  z-index: 2;
  padding: 32px 36px 28px;
  color: #FFFFFF;
}

.hero-main-badge {
  margin-bottom: 12px;
}

.hero-main-title {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.hero-main-title a:hover {
  color: #FCA5A5;
}

.hero-main-spot {
  font-size: 0.95rem;
  color: #E2E8F0;
  line-height: 1.45;
  margin-bottom: 16px;
  max-width: 90%;
}

.hero-main-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.78rem;
  color: #CBD5E1;
}

.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-meta-item svg {
  width: 13px;
  height: 13px;
  color: #F87171;
}

/* Slider Controls */
.hero-slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  z-index: 3;
}

.hero-arrow-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.hero-arrow-btn:hover {
  background-color: var(--color-primary);
  transform: scale(1.1);
}

.hero-arrow-btn svg {
  width: 18px;
  height: 18px;
}

.hero-slider-dots {
  position: absolute;
  bottom: 24px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.slider-dot.active {
  width: 24px;
  border-radius: 4px;
  background-color: var(--color-primary);
}

/* Manşet slider slaytları — üst üste yığılır, aktif olan görünür (yayın sıralı). */
.hero-main-card > .hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  z-index: 0;
}
.hero-main-card > .hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Manşet altı kartlar — 10 sn'de bir 4'erli GRUP döner; yalnız aktif grup görünür. */
.hero-side-cards .side-card { display: none; }
.hero-side-cards .side-card.active { display: flex; }

/* Sağ 4 Dikey Haber Kartı */
.hero-side-cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.side-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  flex: 1;
}

.side-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.side-card-img-wrapper {
  width: 110px;
  height: 90px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.side-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.side-card:hover .side-card-img {
  transform: scale(1.05);
}

.side-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.side-card-badge {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.side-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.side-card:hover .side-card-title {
  color: var(--color-primary);
}

.side-card-meta {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   6. HIZLI SERVİSLER
   ========================================================================== */
.quick-services-section {
  margin-top: 24px;
}

/* Hızlı servisler: 4 kolonluk sabit ızgara. Öğeler alt satıra sarar
   (8 öğe = 2 satır, 12 öğe = 3 satır). Yatay kaydırma yok. */
.quick-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.quick-services-grid > .service-card {
  min-width: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 8px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  position: relative;
}

.service-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 8px;
  transition: all var(--transition-fast);
}

.service-card:hover .service-icon-wrapper {
  background-color: var(--color-primary-soft);
  transform: scale(1.08);
}

.service-icon-wrapper svg {
  width: 20px;
  height: 20px;
}

.service-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-dark);
}

.service-live-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: pulseAnimation 1.2s infinite;
}

/* ==========================================================================
   7. MOBİL UYGULAMA / PWA BANNER
   ========================================================================== */
.app-banner-section {
  margin-top: 28px;
}

.app-banner-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--radius-lg);
  padding: 24px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #FFFFFF;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.app-banner-card::before {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.app-banner-left {
  flex-shrink: 0;
}

.app-phone-mockup {
  width: 170px;
  height: auto;
}

.app-banner-center {
  flex: 1;
}

.app-banner-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 6px;
}

.app-banner-title span {
  color: var(--color-primary);
}

.app-banner-desc {
  font-size: 0.92rem;
  color: #CBD5E1;
  max-width: 440px;
}

.app-banner-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.btn-pwa-install {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.4);
  transition: all var(--transition-fast);
}

.btn-pwa-install:hover {
  background-color: var(--color-primary-hover);
  transform: scale(1.03);
}

.btn-pwa-install svg {
  width: 18px;
  height: 18px;
}

.app-qr-box {
  background: #FFFFFF;
  padding: 8px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.app-qr-box img {
  width: 76px;
  height: 76px;
}

.app-qr-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   8. DÖRT ANA KATEGORİ BLOĞU
   ========================================================================== */
.category-columns-section {
  margin-top: 36px;
}

.category-columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cat-col {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.cat-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 2px solid var(--color-border-light);
}

.cat-col-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-col-accent {
  width: 4px;
  height: 16px;
  border-radius: 2px;
}

.cat-col-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -0.2px;
}

.cat-col-arrow {
  color: var(--color-text-light);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.cat-col:hover .cat-col-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

.cat-featured-story {
  padding: 14px;
  border-bottom: 1px solid var(--color-border-light);
}

.cat-featured-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 10px;
  background-color: var(--color-bg-alt);
}

.cat-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.cat-col:hover .cat-featured-img {
  transform: scale(1.04);
}

.cat-featured-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-featured-title a:hover {
  color: var(--color-primary);
}

.cat-featured-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-headlines-list {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cat-headline-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.35;
}

.cat-headline-item svg {
  width: 13px;
  height: 13px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 3px;
}

.cat-headline-item a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   9. ÖNE ÇIKAN HABERLER & SIDEBAR (HAVA / PİYASA)
   ========================================================================== */
.featured-layout-section {
  margin-top: 36px;
}

.featured-layout-grid {
  display: grid;
  /* fr birimleri: yüzdeler (42+33+25=%100) + 40px gap konteyneri aşıyordu;
     fr aynı oranı korur ama gap'i hesaba katarak taşmayı önler. */
  grid-template-columns: 42fr 33fr 25fr;
  gap: 20px;
}

/* Sol Büyük Öne Çıkan Haber */
.featured-main-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.featured-main-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-dark);
}

.featured-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.featured-main-card:hover .featured-main-img {
  transform: scale(1.04);
}

.featured-main-badge-pos {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.featured-main-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.featured-main-title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.featured-main-title a:hover {
  color: var(--color-primary);
}

.featured-main-excerpt {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
  flex: 1;
}

.featured-main-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.74rem;
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border-light);
  padding-top: 12px;
}

/* Orta 4 Yatay Kart */
.featured-center-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.featured-sub-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  flex: 1;
}

.featured-sub-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.featured-sub-img-wrap {
  width: 95px;
  height: 75px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-bg-alt);
}

.featured-sub-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.featured-sub-card:hover .featured-sub-img {
  transform: scale(1.05);
}

.featured-sub-body {
  flex: 1;
}

.featured-sub-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-sub-card:hover .featured-sub-title {
  color: var(--color-primary);
}

.featured-sub-meta {
  font-size: 0.72rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sağ Sidebar: Hava Durumu & Piyasalar */
.featured-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hava Durumu Widget (Koyu Şık Kart) */
.weather-widget-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--radius-lg);
  padding: 18px;
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.weather-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.weather-city {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
}

.weather-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
}

.weather-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.weather-temp-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.weather-temp {
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.weather-condition {
  font-size: 0.85rem;
  color: #94A3B8;
}

.weather-main-icon {
  width: 44px;
  height: 44px;
  color: #FBBF24;
}

.weather-forecast-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  margin-bottom: 14px;
}

.weather-forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
}

.forecast-name {
  color: #94A3B8;
  font-weight: 600;
}

.forecast-icon {
  width: 16px;
  height: 16px;
  color: #FCD34D;
}

.forecast-temp {
  color: #FFFFFF;
  font-weight: 700;
}

.weather-btn {
  display: block;
  text-align: center;
  width: 100%;
  padding: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.weather-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Piyasalar Widget (Açık Kart) */
.market-widget-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-light);
}

.market-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-dark);
}

.market-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

.market-item-name {
  font-weight: 600;
  color: var(--color-dark);
}

.market-item-data {
  display: flex;
  align-items: center;
  gap: 8px;
}

.market-val {
  font-weight: 700;
  color: var(--color-dark);
}

.market-change {
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.market-change.positive {
  background-color: var(--color-positive-soft);
  color: var(--color-positive);
}

.market-change.negative {
  background-color: var(--color-negative-soft);
  color: var(--color-negative);
}

.market-link {
  display: block;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
}

.market-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   10. ANALİZ & REHBER (BLOG / COMMON TAXONOMY)
   ========================================================================== */
.analysis-section {
  margin-top: 36px;
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 28px 0 36px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 24px;
}

/* Büyük Analiz Kartı */
.analysis-featured-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.analysis-featured-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-dark);
}

.analysis-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.analysis-featured-card:hover .analysis-featured-img {
  transform: scale(1.03);
}

.analysis-featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.analysis-featured-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.analysis-featured-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.analysis-featured-title a:hover {
  color: var(--color-primary);
}

.analysis-featured-excerpt {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.analysis-featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border-light);
  padding-top: 12px;
  margin-top: auto;
  font-size: 0.78rem;
}

.analysis-author-info {
  display: flex;
  flex-direction: column;
}

.analysis-author-name {
  font-weight: 700;
  color: var(--color-dark);
}

.analysis-author-role {
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.analysis-meta {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Küçük Analiz Kartları */
.analysis-items-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analysis-sub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  flex: 1;
}

.analysis-sub-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.analysis-sub-img-wrap {
  width: 100px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-bg-alt);
}

.analysis-sub-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.analysis-sub-card:hover .analysis-sub-img {
  transform: scale(1.05);
}

.analysis-sub-body {
  flex: 1;
}

.analysis-sub-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0284C7;
  margin-bottom: 4px;
  display: block;
}

.analysis-sub-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.analysis-sub-card:hover .analysis-sub-title {
  color: var(--color-primary);
}

.analysis-sub-meta {
  font-size: 0.72rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   11. MULTİMEDYA: VİDEO / FOTO GALERİ / YAZARLAR / SİZDEN GELENLER
   ========================================================================== */
.multimedia-section {
  margin-top: 36px;
}

.multimedia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mm-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.mm-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mm-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mm-accent-red {
  width: 4px;
  height: 16px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* Video Card */
.mm-video-card .mm-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-dark);
}

/* Video / Foto Galeri / Sizden Gelenler kartlarındaki görseller: kaba tam otur.
   Bu kural olmadan img, HTML width/height özniteliklerindeki 300x180 boyutunda
   kalıyor ve 16/10 kabın altında boş bir alan bırakıyordu (object-fit ancak
   öğe kabı doldurduğunda çalışır). */
.mm-media-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mm-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.3);
  transition: background var(--transition-fast);
}

.mm-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-fast);
}

.mm-card:hover .mm-play-btn {
  transform: scale(1.15);
}

.mm-play-btn svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.mm-duration-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Foto Galeri Card */
.mm-gallery-card .mm-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-dark);
}

.mm-photo-count-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mm-card-body {
  padding: 14px;
  flex: 1;
}

.mm-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
}

.mm-card-title a:hover {
  color: var(--color-primary);
}

/* Yazarlar Card */
.mm-authors-list {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mm-author-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.mm-author-info {
  flex: 1;
}

.mm-author-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-dark);
}

.mm-author-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mm-author-item:hover .mm-author-name {
  color: var(--color-primary);
}

.mm-authors-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}

.mm-authors-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Sizden Gelenler Card */
.mm-submissions-card .mm-media-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.mm-submission-btn-wrap {
  padding: 0 14px 14px;
}

.btn-submit-news {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.btn-submit-news:hover {
  background-color: var(--color-primary-hover);
}

.btn-submit-news svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   12. YEREL HABER HERO BANNERI (1200px)
   ========================================================================== */
.local-news-section {
  margin-top: 36px;
}

.local-banner-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 220px;
  display: flex;
  align-items: center;
  background-color: var(--color-dark);
}

.local-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.local-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.75) 45%, rgba(15, 23, 42, 0.3) 100%);
}

.local-banner-content {
  position: relative;
  z-index: 2;
  padding: 36px 48px;
  max-width: 580px;
  color: #FFFFFF;
}

.local-banner-title {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
}

.local-banner-desc {
  font-size: 0.92rem;
  color: #CBD5E1;
  margin-bottom: 20px;
  line-height: 1.45;
}

.btn-local-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  color: var(--color-dark);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-fast);
}

.btn-local-explore:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateX(4px);
}

.btn-local-explore svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   13. ALT HABER LİSTELERİ (3 KOLON)
   ========================================================================== */
.bottom-news-section {
  margin-top: 36px;
  margin-bottom: 48px;
}

.bottom-lists-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bottom-col-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.bottom-col-header {
  padding: 14px 18px;
  border-bottom: 2px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bottom-col-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-dark);
  text-transform: uppercase;
}

/* En Çok Okunanlar */
.most-read-list {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.most-read-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.most-read-rank {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-primary);
  width: 24px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

.most-read-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.35;
}

.most-read-item:hover .most-read-item-title {
  color: var(--color-primary);
}

/* Son Haberler */
.latest-news-list {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.latest-news-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.84rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 8px;
}

.latest-news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.latest-news-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}

.latest-news-title {
  font-weight: 600;
  color: var(--color-dark);
}

.latest-news-item:hover .latest-news-title {
  color: var(--color-primary);
}

/* Günün Manşetleri */
.daily-headlines-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.daily-headline-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.daily-headline-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.daily-headline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.daily-headline-card:hover .daily-headline-img {
  transform: scale(1.04);
}

.daily-headline-content {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.daily-headline-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.daily-headline-title a:hover {
  color: var(--color-primary);
}

.daily-headline-meta {
  font-size: 0.74rem;
  color: var(--color-text-light);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  background-color: #0B0F19;
  color: #94A3B8;
  font-size: 0.85rem;
  border-top: 4px solid var(--color-primary);
  padding-top: 48px;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 28% 16% 16% 16% 24%;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 6px;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-logo {
  display: inline-block;
  background: #FFFFFF;
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 0;
}
.footer-logo img {
  height: auto;
  max-height: 48px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  filter: none;
}

.footer-about {
  line-height: 1.55;
  color: #94A3B8;
  font-size: 0.82rem;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.footer-social-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #1E293B;
  color: #CBD5E1;
  transition: all var(--transition-fast);
}

.footer-social-circle:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.footer-social-circle svg {
  width: 14px;
  height: 14px;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a {
  color: #94A3B8;
  transition: color var(--transition-fast);
}

.footer-nav-list a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

/* Footer App Column (No store badges as instructed) */
.footer-app-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-pwa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.footer-pwa-btn:hover {
  background-color: var(--color-primary-hover);
}

.footer-pwa-btn svg {
  width: 16px;
  height: 16px;
}

.footer-qr-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border-radius: var(--radius-md);
}

.footer-qr-wrap img {
  width: 60px;
  height: 60px;
  background: #FFFFFF;
  padding: 4px;
  border-radius: var(--radius-sm);
}

.footer-qr-text {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #CBD5E1;
}

/* Footer Bottom Bar */
.footer-bottom {
  padding: 20px 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copyright {
  font-size: 0.78rem;
  color: #64748B;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.78rem;
}

.footer-legal-links a {
  color: #64748B;
}

.footer-legal-links a:hover {
  color: #FFFFFF;
}

.btn-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: #1E293B;
  color: #CBD5E1;
  transition: all var(--transition-fast);
}

.btn-back-to-top:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-back-to-top svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   15. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Laptop / Small Desktop (1024px to 1199px) */
@media (max-width: 1199px) {
  .hero-grid {
    grid-template-columns: 60% 1fr;
  }
  .quick-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .category-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-layout-grid {
    grid-template-columns: 1fr 1fr;
  }
  .featured-sidebar {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .multimedia-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-app-wrap {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
  }
}

/* Tablet (768px to 1023px) */
@media (max-width: 1023px) {
  .top-bar-weather-group {
    display: none;
  }
  .header-search-form {
    max-width: 320px;
  }
  .quick-link-item span {
    display: none;
  }
  .quick-link-item {
    padding: 8px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-main-card {
    min-height: 420px;
  }
  .hero-side-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .quick-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .app-banner-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
  .app-banner-desc {
    max-width: 100%;
  }
  .app-banner-right {
    flex-direction: column;
    width: 100%;
  }
  .btn-pwa-install {
    width: 100%;
    justify-content: center;
  }
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  .bottom-lists-grid {
    grid-template-columns: 1fr;
  }
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand-col {
    grid-column: span 2;
  }
  .footer-app-wrap {
    grid-column: span 2;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile (Up to 767px) */
@media (max-width: 767px) {
  .top-bar-left, .top-bar-right .top-nav-links {
    display: none;
  }
  .top-bar .container {
    justify-content: center;
  }
  .site-header {
    padding: 10px 0;
  }
  .header-search-form,
  .header-actions {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .site-nav {
    display: none; /* Mobilde hamburger drawer kullanılır */
  }
  .ticker-badge {
    padding: 0 10px;
    font-size: 0.72rem;
  }
  /* Marquee yapısı artık tüm cihazlarda ortak (base). Mobilde yalnız yazı boyutu
     ve daha dar boşluk uygulanır. */
  .ticker-item {
    font-size: 0.8rem;
    padding-right: 34px;
  }
  .hero-main-card {
    min-height: 360px;
  }
  .hero-main-content {
    padding: 20px 16px 42px; /* Bottom padding prevents overlap with dots */
  }
  .hero-main-title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  /* Ok butonları görselin üst yarısına taşınır; alttaki başlık yazısıyla
     üst üste binmez. Boyut da küçültülür. */
  .hero-slider-nav {
    top: 96px;
    transform: none;
    padding: 0 10px;
  }
  .hero-arrow-btn {
    width: 34px;
    height: 34px;
  }
  .hero-slider-dots {
    bottom: 14px;
    right: 16px;
  }
  .hero-main-spot {
    display: none; /* Mobilde yer kazanmak için */
  }
  .hero-side-cards {
    grid-template-columns: 1fr;
  }
  .side-card {
    padding: 8px;
  }
  .side-card-img-wrapper {
    width: 80px;
    height: 65px;
  }
  /* Hızlı servisler mobilde de 4 kolon kalır; kartlar daralarak sığar. */
  .quick-services-grid {
    gap: 8px;
  }
  .quick-services-grid > .service-card {
    min-width: 0;
  }
  .app-banner-card {
    padding: 20px 16px;
  }
  .app-banner-title {
    font-size: 1.3rem;
  }
  .category-columns-grid {
    grid-template-columns: 1fr;
  }
  .featured-layout-grid {
    grid-template-columns: 1fr;
  }
  .featured-sidebar {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
  .multimedia-grid {
    grid-template-columns: 1fr;
  }
  .local-banner-content {
    padding: 24px 20px;
  }
  .local-banner-title {
    font-size: 1.4rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
  .footer-brand-col,
  .footer-app-wrap {
    grid-column: span 1;
  }
  .footer-bottom .container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom-right {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==================================================
   PUBLIC PUBLICATION LAYER — ARTICLE & TAXONOMY TYPOGRAPHY (FAZ 04 / PROMPT 02)
   ================================================== */

.site-main-content {
  min-height: 60vh;
}

/* Breadcrumb Navigation */
.article-breadcrumb-nav {
  padding: 14px 0;
  background-color: #F8FAFC;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-dark);
}

.breadcrumb-item a {
  color: var(--color-dark);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-primary);
}

.breadcrumb-sep {
  color: #94A3B8;
  font-size: 1.1rem;
  line-height: 1;
}

.breadcrumb-item.active span {
  color: var(--color-primary);
  font-weight: 600;
}

/* Article Layout & Typography (Max 820px) */
.article-layout-container {
  padding-top: 32px;
  padding-bottom: 60px;
}

.article-main-column {
  max-width: 820px;
  margin: 0 auto;
}

.article-header {
  margin-bottom: 24px;
}

.article-category-wrap,
.blog-badges-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.article-h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.article-spot {
  font-size: 1.18rem;
  line-height: 1.65;
  color: #475569;
  font-weight: 500;
  margin-bottom: 24px;
  padding-bottom: 18px;
}

/* Article Meta Bar */
.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.article-meta-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.article-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.article-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.article-author-chip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.article-author-chip-info .author-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-dark);
}

.article-author-chip-info .author-role {
  font-size: 0.76rem;
  color: var(--color-gray-dark);
}

.article-meta-dates {
  font-size: 0.82rem;
  color: #64748B;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-date-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-updated {
  color: #94A3B8;
}

.article-meta-right .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #F1F5F9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.article-meta-right .share-btn:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

/* Article Cover */
.article-cover-figure {
  margin: 28px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #F1F5F9;
}

.article-cover-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Article Body & Typography */
.article-body {
  font-size: 1.08rem;
  line-height: 1.78;
  color: #1E293B;
  margin-bottom: 36px;
}

.article-p {
  margin-bottom: 22px;
}

.article-h2 {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 36px 0 16px;
  line-height: 1.35;
  border-left: 4px solid var(--color-primary);
  padding-left: 12px;
}

.article-h3 {
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 28px 0 12px;
  line-height: 1.4;
}

.article-list {
  margin: 18px 0 24px 28px;
  padding-left: 0;
}

.article-list li {
  margin-bottom: 8px;
}

.article-quote {
  margin: 30px 0;
  padding: 20px 24px;
  background: #F8FAFC;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  font-size: 1.12rem;
  color: #334155;
}

.article-quote p {
  margin: 0;
}

.article-quote-cite {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.article-factbox {
  margin: 28px 0;
  padding: 20px 24px;
  background: #FFF1F2;
  border: 1px solid #FFE4E6;
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.factbox-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.factbox-content {
  margin: 0;
  font-size: 0.98rem;
  color: #4C0519;
}

.article-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 28px 0;
  border-radius: var(--radius-sm);
}

.article-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Sources Box */
.article-sources-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: #F1F5F9;
  border-radius: var(--radius-sm);
  margin: 32px 0;
  font-size: 0.86rem;
}

.sources-box-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #334155;
}

.source-chip {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--color-dark);
}

/* Taxonomies (Tags & Topics) */
.article-taxonomies-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 32px 0;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.article-topics-group,
.article-tags-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tax-group-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-dark);
  margin-right: 4px;
}

.topic-chip {
  background: #EFF6FF;
  color: #1D4ED8;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.topic-chip:hover {
  background: #DBEAFE;
}

.tag-chip {
  background: #F1F5F9;
  color: #334155;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.tag-chip:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* Author Box in Article */
.article-author-section {
  margin: 40px 0;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.author-card-full {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.author-full-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}

.author-card-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.author-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.author-card-name a {
  color: var(--color-dark);
}

.author-card-name a:hover {
  color: var(--color-primary);
}

.author-card-role {
  font-size: 0.82rem;
  color: var(--color-gray-dark);
  font-weight: 500;
}

.author-card-bio {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 14px 0;
}

.btn-author-all {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.btn-author-all:hover {
  text-decoration: underline;
}

/* Related Content Block */
.article-related-section {
  margin: 48px 0 16px;
  padding-top: 28px;
  border-top: 2px solid var(--color-border);
}

.related-section-header {
  margin-bottom: 20px;
}

.related-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-dark);
}

.related-title-accent {
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.related-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.related-card-img-wrap {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.related-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.related-card:hover .related-card-img {
  transform: scale(1.05);
}

.related-card-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.related-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 8px 0;
  flex: 1;
}

.related-card-title a {
  color: var(--color-dark);
}

.related-card-title a:hover {
  color: var(--color-primary);
}

.related-card-date {
  font-size: 0.76rem;
  color: #94A3B8;
}

/* Category & Archive Pages */
.category-header-banner,
.archive-header-banner {
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  padding: 36px 0 28px;
  margin-bottom: 36px;
}

.category-h1,
.archive-h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-dark);
  margin: 12px 0 10px;
  letter-spacing: -0.02em;
}

.category-desc,
.archive-desc {
  font-size: 1.08rem;
  color: var(--color-gray-dark);
  max-width: 780px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.category-subnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.subnav-label,
.districts-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-dark);
}

.subnav-pills,
.districts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subnav-pill,
.district-pill {
  display: inline-block;
  padding: 5px 14px;
  background: #F1F5F9;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark);
  transition: all var(--transition-fast);
}

.subnav-pill:hover,
.district-pill:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.district-pill.active {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.category-content-container,
.archive-content-container {
  padding-bottom: 60px;
}

.category-section {
  margin-bottom: 48px;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-dark);
}

.title-accent-red {
  width: 4px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 2px;
}

.title-accent-dark {
  width: 4px;
  height: 20px;
  background: var(--color-dark);
  border-radius: 2px;
}

.section-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94A3B8;
}

.content-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.standard-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.standard-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-thumb-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.standard-card:hover .card-thumb {
  transform: scale(1.04);
}

.standard-card .card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.standard-card .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 10px 0 8px;
  flex: 1;
}

.standard-card .card-title a {
  color: var(--color-dark);
}

.standard-card .card-title a:hover {
  color: var(--color-primary);
}

.standard-card .card-summary {
  font-size: 0.88rem;
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin-bottom: 12px;
}

.standard-card .card-date {
  font-size: 0.78rem;
  color: #94A3B8;
}

.card-footer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #94A3B8;
}

/* Category Topics Bar */
.category-topics-bar {
  margin-top: 36px;
  padding: 24px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.topics-bar-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.topics-bar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.topic-box-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--color-dark);
  font-size: 0.88rem;
  transition: all var(--transition-fast);
}

.topic-box-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Authors Directory Page */
.authors-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.author-grid-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.author-grid-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.author-grid-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.author-grid-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.author-grid-name a {
  color: var(--color-dark);
}

.author-grid-role {
  display: block;
  font-size: 0.8rem;
  color: var(--color-gray-dark);
  font-weight: 500;
  margin-bottom: 8px;
}

.author-grid-bio {
  font-size: 0.86rem;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 12px;
}

.btn-author-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Author Profile Banner */
.author-profile-banner {
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  padding: 36px 0;
  margin-bottom: 36px;
}

.author-profile-card {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.author-big-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
}

.author-title-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}

.author-profile-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-dark);
}

.author-profile-role {
  font-size: 0.92rem;
  color: var(--color-gray-dark);
  font-weight: 600;
}

.author-profile-bio {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  max-width: 800px;
  margin-bottom: 16px;
}

.author-expertise-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.exp-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.exp-chip {
  background: #F1F5F9;
  color: var(--color-dark);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Pagination */
.pagination-nav {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.pagination-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-dark);
  transition: all var(--transition-fast);
}

.page-link:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.page-item.active .page-link {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

/* 404 Error Page */
.page-404-container {
  padding: 60px 0 80px;
  text-align: center;
}

.error-hero {
  max-width: 600px;
  margin: 0 auto 60px;
}

.error-code-badge {
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 12px;
}

.error-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.error-desc {
  font-size: 1.05rem;
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin-bottom: 28px;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.btn-primary-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-primary);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background var(--transition-fast);
}

.btn-primary-red:hover {
  background: var(--color-primary-hover);
}

.btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--color-dark);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background var(--transition-fast);
}

.btn-secondary-dark:hover {
  background: #334155;
}

/* Responsive Media Queries for Publication Layer */
@media (max-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-cards-grid,
  .authors-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .article-h1 {
    font-size: 1.75rem;
  }
  .article-spot {
    font-size: 1.05rem;
  }
  .article-meta-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-meta-right {
    width: 100%;
  }
  .article-meta-right .share-btn {
    width: 100%;
    justify-content: center;
  }
  .author-card-full {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .author-card-top {
    flex-direction: column;
    gap: 4px;
  }
  .category-h1,
  .archive-h1 {
    font-size: 1.7rem;
  }
  .content-cards-grid,
  .authors-cards-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
  .author-profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .author-title-row {
    flex-direction: column;
    gap: 4px;
  }
  .author-expertise-row {
    justify-content: center;
  }
  .error-code-badge {
    font-size: 4rem;
  }
  .error-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   FAZ 09 / PWA MOBİL UYGULAMA & /UYGULAMA SAYFASI STİLLERİ
   ========================================================================== */
.app-install-page {
  padding-bottom: 4rem;
}
.app-hero-section {
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 100%);
  color: #FFFFFF;
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid #334155;
  margin-bottom: 3.5rem;
}
.app-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
}
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(227, 6, 19, 0.2);
  color: #FF4D5B;
  border: 1px solid rgba(227, 6, 19, 0.4);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E30613;
  box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7);
  animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(227, 6, 19, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}
.app-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  color: #FFFFFF;
}
.app-hero-desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 2rem;
}
.app-cta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.pwa-install-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  padding: 0.875rem 2rem;
  border-radius: 10px;
  box-shadow: 0 10px 20px -5px rgba(227, 6, 19, 0.4);
}
.pwa-installed-msg {
  padding: 0.75rem 1.25rem;
  background: rgba(22, 163, 74, 0.2);
  color: #4ADE80;
  border: 1px solid rgba(22, 163, 74, 0.4);
  border-radius: 8px;
  font-weight: 600;
}
.push-permission-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.push-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(227, 6, 19, 0.15);
  color: #E30613;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.push-card-info h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: #FFFFFF;
}
.push-card-info p {
  font-size: 0.8125rem;
  color: #94A3B8;
  margin: 0;
}
.app-mockup-card {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}
.mockup-frame img {
  max-width: 220px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 25px 35px -10px rgba(0, 0, 0, 0.7);
}
.qr-scan-card {
  background: #FFFFFF;
  padding: 1.25rem;
  border-radius: 16px;
  color: #0F172A;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  max-width: 200px;
}
.qr-code-wrapper svg,
.qr-code-wrapper img {
  display: block;
  margin: 0 auto 0.75rem;
  width: 150px;
  height: 150px;
}
.qr-scan-text strong {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 4px;
  color: #0F172A;
}
.qr-scan-text span {
  font-size: 0.75rem;
  color: #64748B;
  line-height: 1.3;
  display: block;
}
.app-features-section {
  margin-bottom: 4rem;
}
.app-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.feature-box {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.feature-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.feature-icon.bg-red { background: #FEE2E2; color: #DC2626; }
.feature-icon.bg-blue { background: #DBEAFE; color: #2563EB; }
.feature-icon.bg-orange { background: #FFEDD5; color: #EA580C; }
.feature-icon.bg-green { background: #DCFCE7; color: #16A34A; }
.feature-box h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}
.feature-box p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.instructions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
.instruction-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.card-header-os {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-light);
}
.os-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.card-header-os h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
}
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.step-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-dark);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.step-list strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-dark);
  margin-bottom: 2px;
}
.step-list p {
  font-size: 0.84375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 992px) {
  .app-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .app-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .app-cta-group {
    justify-content: center;
  }
  .push-permission-card {
    text-align: left;
  }
  .app-mockup-card {
    flex-direction: column;
  }
  .app-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .instructions-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px) {
  .app-hero-title {
    font-size: 1.875rem;
  }
  .app-features-grid {
    grid-template-columns: 1fr;
  }
  .push-permission-card {
    flex-direction: column;
    text-align: center;
  }
}


/* ========== Reklam Slot Sistemi ========== */
.ad-container { margin: 28px auto; text-align: center; }
.ad-slot { display: block; margin: 0 auto; }
.ad-slot-link { display: block; line-height: 0; }
.ad-slot picture { display: block; }
.ad-slot img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.ad-slot-label {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  font-weight: 700;
}
.ad-slot-home img { max-height: 90px; }

/* Ana sayfadaki kanonik reklam slotları AdSlotRepository section metadata'sına göre
   homepage.php tarafından otomatik basılır. Aktif/pasif ve kreatif seçimi yine
   mevcut AdRenderer üzerinden yönetilir. */
.home-section-ad { margin-top: 20px; margin-bottom: 20px; }

/* Haber/Blog detay üst & alt banner:
   Reklam kreatifi kendi native ölçüsünde kalmak yerine 820px haber kolonunu
   doldurur. Mobilde de taşmadan %100 responsive davranır. */
.article-top-ad,
.article-bottom-ad {
  width: calc(100% - 32px);
  max-width: 820px;
  margin: 16px auto;
  padding: 0;
}
.article-top-ad .ad-slot,
.article-bottom-ad .ad-slot,
.article-top-ad .ad-slot-link,
.article-bottom-ad .ad-slot-link,
.article-top-ad .ad-slot picture,
.article-bottom-ad .ad-slot picture {
  display: block;
  width: 100%;
  max-width: 100%;
}
.article-top-ad .ad-slot img,
.article-bottom-ad .ad-slot img {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: contain;
}

/* Haber/Blog detay sol/sağ 160x600 skyscraper:
   1200px ana container'ın KENDİ İÇ RAYLARINDA durur. Haber ana kolonu 820px
   olduğu için 1200px container içinde solda ve sağda yaklaşık 190px doğal boşluk
   vardır; 160px reklam bu raya oturur ve haber kolonuna taşmaz.

   Dikey başlangıç, üst yatay banner ile aynı hizada olacak şekilde yukarı alınır.
   Böylece sol reklam breadcrumb/container sol çizgisine hizalanır ve aşağı doğru
   uzanır; viewport'un en soluna kaçmaz. */
.article-side-ad { display: none; }
@media (min-width: 1200px) {
  .article-side-ad {
    display: block;
    position: absolute;
    top: -160px;
    width: 160px;
    z-index: 2;
  }
  .article-side-ad-left  { left: 0; }
  .article-side-ad-right { right: 0; }
  .article-side-ad .ad-slot,
  .article-side-ad .ad-slot-link,
  .article-side-ad .ad-slot picture {
    display: block;
    width: 160px;
    max-width: 160px;
  }
  .article-side-ad .ad-slot img {
    display: block;
    width: 160px;
    max-width: 160px;
    height: auto;
    margin: 0;
    object-fit: contain;
  }
}
@media (max-width: 1199px) {
  .article-side-ad { display: none !important; }
}
@media (max-width: 767px) {
  .article-top-ad,
  .article-bottom-ad {
    width: calc(100% - 32px);
    max-width: none;
    margin: 12px auto;
  }
}

/* Footer taşma güvenliği: kolonlar viewport'u aşmasın */
.site-footer .footer-top-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer .footer-app-wrap { min-width: 0; max-width: 100%; overflow: hidden; }
@media (max-width: 1400px) {
  .site-footer .footer-app-wrap { display: none !important; }
}
body { overflow-x: hidden; }

/* ========== Logo Responsive Sizing (Header + Footer + Mobile) ========== */
.site-logo, .site-logo-img { flex-shrink: 0; }
.site-logo-img {
  height: auto;
  width: 220px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.footer-logo-img {
  height: auto;
  width: 240px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (min-width: 1920px) {
  .site-logo-img   { width: 240px; }
  .footer-logo-img { width: 280px; }
}
@media (min-width: 1366px) and (max-width: 1919px) {
  .site-logo-img   { width: 225px; }
  .footer-logo-img { width: 260px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .site-logo-img   { width: 205px; }
  .footer-logo-img { width: 240px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-logo-img   { width: 190px; }
  .footer-logo-img { width: 235px; }
}
@media (max-width: 767px) {
  .site-logo-img   { width: 175px; }
  .footer-logo-img { width: 210px; }
}

/* ==========================================================================
   TABLET PORTRE BAŞLIK ANAHTARI (768–900px)
   Tam masaüstü menüsü tablet portrede (iPad 768px) sığmıyordu; bu aralıkta
   hamburger drawer'a geçilir (≤767 mobil davranışıyla tutarlı). ≥901px
   masaüstü menüsü değişmeden kalır.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 900px) {
  .header-search-form,
  .header-actions { display: none; }
  .site-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}

/* ==========================================================================
   ORTA MASAÜSTÜ BAŞLIK KOMPAKTLAMA (1024–1365px)
   Tam etiketli hızlı bağlantılar + arama + "Haber Bildir" başlığı 1200px
   konteynerine sığmıyordu (≥1366 tam etiketli hâli sığar ve korunur).
   Bu aralıkta hızlı bağlantılar ikon-öncelikli, arama daraltılır.
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1365px) {
  .quick-link-item span { display: none; }
  .quick-link-item { padding: 8px; }
  .header-search-form { max-width: 260px; }
}

/* ==========================================================================
   MOBİL SON RÖTUŞ — MINIMAL / KOMPAKT / DENGELİ / OKUNABİLİR
   (Yalnızca ≤767px; masaüstü tasarımı korunur. Bu blok en sonda olduğu için
    aynı seçicilerde önceki mobil kurallarını sırayla geçersiz kılar.)
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Yatay taşma güvenliği: hiçbir medya/tablo viewport'u aşmasın --- */
  img, svg, video, iframe, embed, object { max-width: 100%; }
  .site-main-content table { display: block; max-width: 100%; overflow-x: auto; }
  .article-body pre,
  .article-body code { white-space: pre-wrap; word-break: break-word; }
  .article-body a { word-break: break-word; }

  /* --- Bölüm dikey boşlukları: 36px → ~22px (daha kompakt) --- */
  .quick-services-section,
  .app-banner-section,
  .category-columns-section,
  .featured-layout-section,
  .analysis-section,
  .multimedia-section,
  .local-news-section,
  .bottom-news-section { margin-top: 22px; }
  .bottom-news-section { margin-bottom: 28px; }

  /* --- Bölüm başlıkları --- */
  .section-header { margin-bottom: 12px; }
  .section-title { font-size: 1.02rem; letter-spacing: -0.2px; }

  /* --- Makale tipografisi (haber/blog detay) --- */
  .article-h1        { font-size: 1.72rem; line-height: 1.28; margin-bottom: 12px; }
  .article-spot      { font-size: 1.08rem; line-height: 1.6; margin-bottom: 16px; padding-bottom: 14px; }
  .article-body      { font-size: 1.02rem; line-height: 1.72; margin-bottom: 26px; }
  .article-p         { margin-bottom: 16px; }
  .article-h2        { font-size: 1.3rem;  margin: 24px 0 12px; padding-left: 10px; }
  .article-h3        { font-size: 1.12rem; margin: 20px 0 10px; }
  .article-quote     { font-size: 1.02rem; margin: 20px 0; padding: 14px 16px; }
  .article-list      { margin: 14px 0 18px 22px; }

  /* --- Kart tipografisi --- */
  .standard-card .card-title   { font-size: 1rem; line-height: 1.4; margin: 8px 0 6px; }
  .standard-card .card-summary { font-size: 0.86rem; line-height: 1.45; margin-bottom: 10px; }

  /* --- Breadcrumb / rozet --- */
  .article-breadcrumb-nav { padding: 10px 0; font-size: 0.78rem; }
  .breadcrumb-sep { font-size: 1rem; }
  .badge { font-size: 0.62rem; padding: 2px 6px; }

  /* --- Kategori / arşiv başlıkları (dev başlık yok) --- */
  .category-h1, .archive-h1 { font-size: 1.55rem; line-height: 1.25; }
}

@media (max-width: 480px) {
  /* --- Konteyner iç boşluk: her yandan 14px --- */
  .container { width: calc(100% - 28px); }

  /* --- Başlıklar biraz daha küçük (390–480px odak) --- */
  .article-h1 { font-size: 1.65rem; }
  .category-h1, .archive-h1 { font-size: 1.45rem; }
  .hero-main-title { font-size: 1.15rem; }

  /* --- Hızlı servisler: 32px ikon, kompakt kart --- */
  .service-card { min-width: 0; padding: 12px 4px; }
  .service-icon-wrapper { width: 34px; height: 34px; margin-bottom: 6px; }
  .service-icon-wrapper svg { width: 18px; height: 18px; }
  .service-name { font-size: 0.74rem; }

  /* --- App banner başlık --- */
  .app-banner-title { font-size: 1.18rem; }
}

/* ==========================================================================
   CANLI VERİ (ANALİTİK) SAYFALARI — GÜÇLENDİRİLMİŞ TASARIM
   Döviz / Altın / Borsa / Hava Durumu / Deprem / Namaz / Eczane
   ========================================================================== */
.live-data-page .live-data-content-container { padding-top: 24px; padding-bottom: 40px; }

/* Veri tabloları: okunur satırlar, sticky başlık, zebra + hover */
.live-data-page .data-table { width: 100%; border-collapse: collapse; }
.live-data-page .data-table thead th {
  background: var(--color-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.live-data-page .data-table tbody tr { border-bottom: 1px solid var(--color-border); }
.live-data-page .data-table tbody tr:nth-child(even) { background: #F8FAFC; }
.live-data-page .data-table tbody tr:hover { background: var(--color-primary-soft); }

/* Kartlar: yumuşak gölge + hover yükselmesi */
.live-data-page .currency-card,
.live-data-page .metric-tile,
.live-data-page .weather-day-card {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.live-data-page .currency-card:hover,
.live-data-page .weather-day-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Bayat veri uyarısı belirginleştirme */
.live-data-page .live-data-notice-box.notice-warning {
  border-left: 4px solid var(--color-warning, #D97706);
}

/* Şehir seçici (hava durumu) dokunmatik dostu */
.live-data-page select,
.live-data-page .city-select {
  min-height: 44px;
  font-size: 16px; /* iOS zoom engeli */
}

/* Mobil: tablolar sarmalayıcı içinde kayar, yazılar kompakt */
@media (max-width: 767px) {
  .live-data-page .archive-h1 { font-size: 1.5rem; line-height: 1.25; }
  .live-data-page .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .live-data-page .data-table { font-size: 0.85rem; }
  .live-data-page .data-table th,
  .live-data-page .data-table td { padding: 8px 10px !important; white-space: nowrap; }
  .live-data-page .featured-currency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .live-data-page .featured-currency-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BÖLGESEL HABER SİSTEMİ (81 il / ilçe)
   ============================================================ */

/* --- 81 il kartları (/yerel-haberler/) --- */
.cityhub-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 20px; }
.cityhub-search { position:relative; flex:1 1 280px; max-width:420px; }
.cityhub-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#94a3b8; }
.cityhub-search input { width:100%; padding:11px 14px 11px 38px; border:1px solid #e2e8f0; border-radius:10px; font-size:15px; background:#fff; }
.cityhub-search input:focus { outline:none; border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.cityhub-stats { font-size:13px; color:#64748b; }
.cityhub-stats strong { color:#0f172a; }

.cityhub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.cityhub-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cityhub-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.12); border-color:#cbd5e1; }
.cityhub-media { position:relative; display:block; aspect-ratio:16/9; background:#0f172a; }
.cityhub-media img { width:100%; height:100%; object-fit:cover; display:block; }
.cityhub-plate { position:absolute; top:8px; left:8px; background:rgba(255,255,255,.94); color:#0f172a; font-size:11px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.02em; }
.cityhub-body { padding:11px 12px 13px; display:flex; flex-direction:column; gap:5px; }
.cityhub-name { font-size:15px; font-weight:700; color:#0f172a; }
.cityhub-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; }
.cityhub-count { color:#dc2626; font-weight:700; }
.cityhub-count--empty { color:#94a3b8; font-weight:500; }
.cityhub-districts { color:#94a3b8; }
.cityhub-empty { text-align:center; color:#64748b; padding:28px 0; }
.cityhub-seo { margin-top:36px; padding-top:22px; border-top:1px solid #e2e8f0; color:#475569; font-size:14.5px; line-height:1.75; }
.cityhub-seo h2 { font-size:1.15rem; color:#0f172a; margin:0 0 8px; }

/* --- İl / ilçe sayfası ek öğeleri --- */
.location-recent-note { display:inline-flex; align-items:center; gap:8px; margin:10px 0 0; font-size:13px; color:#e2e8f0; }
.location-live-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:cityPulse 2s infinite; }
@keyframes cityPulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.7);} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }
.district-search { margin:10px 0 8px; }
.district-search input { width:100%; max-width:280px; padding:8px 12px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:rgba(255,255,255,.10); color:#fff; font-size:14px; }
.district-search input::placeholder { color:rgba(255,255,255,.6); }
.district-search input:focus { outline:none; border-color:rgba(255,255,255,.5); }
.district-pill.has-news { border-color:rgba(248,113,113,.55); }
.district-pill-count { display:inline-block; margin-left:5px; padding:0 5px; border-radius:8px; background:#dc2626; color:#fff; font-size:10px; font-weight:800; line-height:16px; }

/* --- Ana sayfa "Şehrinizin Son 24 Saati" --- */
/* Kutu hem tam genişlikte hem dar kolonda kullanılabildiği için ölçüler
   VİEWPORT'a değil KUTUNUN KENDİ GENİŞLİĞİNE göre ayarlanır (container query).
   Desteklemeyen tarayıcılarda dikey (stacked) düzen geçerli kalır — bozulmaz. */
.cityfeed-section { margin:36px 0; }
.cityfeed-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden;
  box-shadow:0 4px 16px rgba(15,23,42,.06);
  container-type: inline-size;
  container-name: cityfeed;
}

/* Başlık bandı — varsayılan: dikey, her öğe tam genişlik */
.cityfeed-head {
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding:14px 16px; border-bottom:1px solid #e2e8f0;
  background:linear-gradient(135deg,#0f172a,#1e293b);
}
.cityfeed-title-wrap { display:flex; align-items:center; gap:9px; min-width:0; }
.cityfeed-title { margin:0; font-size:.98rem; font-weight:800; color:#fff; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cityfeed-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:cityPulse 2s infinite; }

/* Ekran okuyucu etiketi — gorsel olarak gizli.
   Bu sinif sitede tanimli olmadigi icin "Sehir secin" etiketi
   secicinin arkasinda gorunuyordu. */
.cityfeed-head .sr-only {
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Dar gorunumde kontroller BASLIK METNIYLE HIZALI sola yaslanir */
.cityfeed-controls { display:flex; align-items:center; gap:8px; min-width:0; justify-content:flex-start; }
.cityfeed-select {
  flex:0 1 auto; min-width:0; max-width:100%;
  padding:9px 11px; border-radius:9px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);
  color:#fff; font-size:14px; font-weight:600;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
  padding-right:32px;
  /* Dar gorunumde tum genisligi kaplamaz; "81 il" butonuyla birlikte
     baslik hizasinda saga yaslanir. */
  flex:0 1 auto; width:auto; max-width:62%;
}
.cityfeed-select:focus { outline:none; border-color:rgba(255,255,255,.6); }
.cityfeed-select option { color:#0f172a; background:#fff; }
.cityfeed-all {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
  padding:9px 12px; border-radius:9px;
  border:1px solid rgba(248,113,113,.45); background:rgba(220,38,38,.22);
  color:#fecaca; font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.cityfeed-all:hover { background:rgba(220,38,38,.36); color:#fff; }

/* İlçe çipleri */
.cityfeed-districts {
  display:flex; gap:6px; flex-wrap:wrap;
  padding:12px 16px 2px;
  max-height:104px; overflow-y:auto; overscroll-behavior:contain;
}
.cityfeed-chip {
  border:1px solid #e2e8f0; background:#f8fafc; color:#334155;
  border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:5px; line-height:1.3;
}
.cityfeed-chip span { background:#e2e8f0; color:#475569; border-radius:8px; padding:0 5px; font-size:10px; font-weight:800; }
.cityfeed-chip:hover { border-color:#cbd5e1; background:#f1f5f9; }
.cityfeed-chip.active { background:#dc2626; border-color:#dc2626; color:#fff; }
.cityfeed-chip.active span { background:rgba(255,255,255,.24); color:#fff; }

.cityfeed-body { padding:14px 16px; }
.cityfeed-loading, .cityfeed-empty { color:#64748b; font-size:14px; margin:6px 0; }
.cityfeed-empty a { color:#dc2626; font-weight:600; }
.cityfeed-note { font-size:12.5px; color:#94a3b8; margin:0 0 10px; }

/* Haber öğeleri — varsayılan: lead büyük, diğerleri tek sütun yatay */
.cityfeed-item { display:flex; gap:11px; text-decoration:none; align-items:flex-start; }
.cityfeed-item + .cityfeed-item { margin-top:12px; }
.cityfeed-item--lead { flex-direction:column; gap:10px; margin-bottom:14px; }
.cityfeed-thumb { display:block; flex:0 0 84px; border-radius:9px; overflow:hidden; background:#f1f5f9; aspect-ratio:16/11; }
.cityfeed-item--lead .cityfeed-thumb { flex:none; width:100%; aspect-ratio:16/9; border-radius:11px; }
.cityfeed-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cityfeed-item-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cityfeed-badge { align-self:flex-start; background:#fef2f2; color:#dc2626; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:5px; }
.cityfeed-item-title { font-size:13.5px; font-weight:700; color:#0f172a; line-height:1.38;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cityfeed-item--lead .cityfeed-item-title { font-size:1.05rem; -webkit-line-clamp:3; }
.cityfeed-item:hover .cityfeed-item-title { color:#dc2626; }
.cityfeed-item-time { font-size:11.5px; color:#94a3b8; }
.cityfeed-grid { display:grid; grid-template-columns:1fr; gap:12px; padding-top:12px; border-top:1px solid #f1f5f9; }
.cityfeed-grid .cityfeed-item + .cityfeed-item { margin-top:0; }
.cityfeed-foot { padding:11px 16px; border-top:1px solid #e2e8f0; background:#f8fafc; }
.cityfeed-more { color:#dc2626; font-weight:700; font-size:13px; text-decoration:none; }

/* Kutu genişledikçe düzen açılır (kutu genişliğine göre) */
@container cityfeed (min-width: 530px) {
  .cityfeed-head { flex-direction:row; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; }
  .cityfeed-title { font-size:1.05rem; }
  .cityfeed-controls { flex:0 0 auto; }
  .cityfeed-select { width:auto; min-width:170px; max-width:230px; }
  .cityfeed-districts { padding:12px 18px 2px; max-height:none; }
  .cityfeed-body { padding:16px 18px; }
  .cityfeed-foot { padding:12px 18px; }
}
@container cityfeed (min-width: 620px) {
  .cityfeed-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .cityfeed-item--lead .cityfeed-item-title { font-size:1.18rem; }
  .cityfeed-item-title { font-size:14px; }
  .cityfeed-thumb { flex:0 0 96px; }
}

/* container query desteklenmiyorsa: geniş ekranda yatay başlık */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .cityfeed-head { flex-direction:row; align-items:center; justify-content:space-between; }
    .cityfeed-select { width:auto; min-width:170px; }
    .cityfeed-grid { grid-template-columns:repeat(2,1fr); }
  }
}

@media (max-width:640px) {
  .cityhub-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

/* --- İl/ilçe sayfası: şehir arka planlı başlık bandı --- */
.location-header-banner.has-city-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
  position: relative;
}
.location-header-banner.has-city-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.78) 100%);
  pointer-events: none;
}
.location-header-banner.has-city-bg > .container { position: relative; z-index: 1; }
.location-header-banner.has-city-bg .archive-h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.location-header-banner.has-city-bg .archive-desc { color: rgba(255,255,255,.88); }
.location-header-banner.has-city-bg .districts-label { color: rgba(255,255,255,.72); }
.location-header-banner.has-city-bg .district-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.location-header-banner.has-city-bg .district-pill:hover { background: rgba(255,255,255,.22); }
.location-header-banner.has-city-bg .district-pill.active { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Şehir kutusu sağ sidebar'da (hava durumunun üstünde) kullanıldığında
   sayfa genişliği sarmalayıcısını devre dışı bırak. */
.featured-sidebar .cityfeed-section { margin: 0 0 20px; }
.featured-sidebar .cityfeed-section > .container {
  max-width: none; width: 100%; padding-left: 0; padding-right: 0; margin: 0;
}

/* --- Hava durumu: konum + şehir/ilçe filtresi --- */
.wx-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wx-filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:0 0 10px; }
.wx-loc {
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  padding:6px 9px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);
  color:#fff; font-size:11.5px; font-weight:700; line-height:1;
}
.wx-loc svg { width:13px; height:13px; }
.wx-loc:hover { background:rgba(255,255,255,.22); }
.wx-loc.is-active { background:rgba(34,197,94,.28); border-color:rgba(34,197,94,.55); }
.wx-loc.is-busy { opacity:.6; pointer-events:none; }
.wx-loc.is-error { background:rgba(220,38,38,.28); border-color:rgba(248,113,113,.5); }
.wx-select {
  flex:1 1 96px; min-width:0; max-width:100%;
  padding:6px 24px 6px 9px; border-radius:8px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);
  color:#fff; font-size:11.5px; font-weight:600;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; background-size:12px;
}
.wx-select:focus { outline:none; border-color:rgba(255,255,255,.6); }
.wx-select option { color:#0f172a; background:#fff; }
.wx-scope { margin:0 0 10px; font-size:11px; color:rgba(255,255,255,.72); line-height:1.4; }
.weather-widget-card.is-loading { opacity:.75; transition:opacity .15s ease; }

/* Şehir kutusu yuvaları: boşken yer kaplamaz */
#cityfeed-slot-mobile:empty, #cityfeed-slot-wide:empty { display: none; }

/* ============================================================
   ŞEHİR/İLÇE AÇILIR FİLTRESİ (citydd) — şehir renkleriyle
   ============================================================ */
.citydd { position:relative; display:inline-block; max-width:100%; margin-top:12px; }
.citydd-caption { display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:6px; }
.citydd-btn {
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:220px; max-width:100%; padding:10px 14px; cursor:pointer;
  border-radius:11px; border:1px solid rgba(255,255,255,.24);
  background:var(--city-primary,#dc2626); color:var(--city-ink,#fff);
  font-size:14.5px; font-weight:700; line-height:1.2;
  box-shadow:0 6px 18px rgba(15,23,42,.22);
  transition:filter .15s ease, box-shadow .15s ease;
}
.citydd-btn:hover { filter:brightness(1.08); }
.citydd-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.citydd-caret { width:16px; height:16px; flex:0 0 auto; transition:transform .18s ease; }
.citydd.is-open .citydd-caret { transform:rotate(180deg); }

.citydd-panel {
  position:absolute; z-index:60; top:calc(100% + 8px); left:0;
  width:min(360px, 92vw); background:#fff; border:1px solid #e2e8f0;
  border-radius:13px; box-shadow:0 18px 42px rgba(15,23,42,.22);
  overflow:hidden; animation:cityddIn .16s ease;
}
@keyframes cityddIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.citydd-search { position:relative; padding:10px 10px 8px; border-bottom:1px solid #f1f5f9; }
.citydd-search svg { position:absolute; left:20px; top:50%; transform:translateY(-30%);
  width:16px; height:16px; color:#94a3b8; }
.citydd-search input { width:100%; padding:9px 12px 9px 34px; font-size:14px;
  border:1px solid #e2e8f0; border-radius:9px; background:#f8fafc; color:#0f172a; }
.citydd-search input:focus { outline:none; background:#fff;
  border-color:var(--city-primary,#dc2626); box-shadow:0 0 0 3px var(--city-soft,rgba(220,38,38,.12)); }

.citydd-list { list-style:none; margin:0; padding:6px; max-height:302px; overflow-y:auto; }
.citydd-opt {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:9px; text-decoration:none;
  color:#0f172a; font-size:14px; font-weight:600;
}
.citydd-opt em { font-style:normal; font-size:11px; font-weight:800; color:#94a3b8; }
.citydd-opt.has-news em { background:var(--city-soft,rgba(220,38,38,.12));
  color:var(--city-primary,#dc2626); padding:1px 7px; border-radius:8px; }
.citydd-opt:hover { background:var(--city-soft,rgba(220,38,38,.10)); }
.citydd-opt.is-active { background:var(--city-primary,#dc2626); color:var(--city-ink,#fff); }
.citydd-opt.is-active em { background:rgba(255,255,255,.22); color:var(--city-ink,#fff); }
.citydd-empty { margin:0; padding:14px 16px; color:#64748b; font-size:13.5px; }

/* Şehir temalı başlık bandı: rozet ve vurgular şehir rengini alır */
.is-city-themed .badge-red { background:var(--city-primary,#dc2626); color:var(--city-ink,#fff); }
.is-city-themed .location-live-dot { background:var(--city-secondary,#22c55e); }
.location-header-banner.has-city-bg.is-city-themed::after {
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--city-primary,#0f172a) 55%, rgba(15,23,42,.85)) 0%,
    rgba(15,23,42,.88) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .location-header-banner.has-city-bg.is-city-themed::after {
    background:linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.85) 100%);
  }
}

@media (max-width:600px) {
  .citydd { display:block; width:100%; }
  .citydd-btn { width:100%; min-width:0; }
  .citydd-panel { width:100%; }
}

/* Şehir kutusu içindeki kompakt açılır ilçe filtresi */
.cityfeed-districts { display:block; padding:12px 16px 0; max-height:none; overflow:visible; }
.citydd--compact { margin-top:0; width:100%; }
.citydd--compact .citydd-btn { width:100%; min-width:0; padding:8px 12px; font-size:13.5px; border-radius:9px; box-shadow:none; }
.citydd--compact .citydd-panel { width:100%; }
.cityfeed-card.is-city-themed .cityfeed-head { background:linear-gradient(135deg,
  color-mix(in srgb, var(--city-primary,#0f172a) 78%, #0f172a), #1e293b); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cityfeed-card.is-city-themed .cityfeed-head { background:linear-gradient(135deg,#0f172a,#1e293b); }
}
.cityfeed-card.is-city-themed .cityfeed-dot { background:var(--city-secondary,#22c55e); }
.cityfeed-card.is-city-themed .cityfeed-badge { background:var(--city-soft,#fef2f2); color:var(--city-primary,#dc2626); }
.cityfeed-card.is-city-themed .cityfeed-item:hover .cityfeed-item-title { color:var(--city-primary,#dc2626); }
.cityfeed-card.is-city-themed .cityfeed-more { color:var(--city-primary,#dc2626); }
@container cityfeed (min-width: 530px) {
  .cityfeed-districts { padding:12px 18px 0; }
  .citydd--compact { max-width:280px; }
}
/* Açılır liste kartın dışına taşabilmeli; kapalıyken köşeler yine kırpılır */
.cityfeed-card.dd-open { overflow:visible; }
.cityfeed-card .cityfeed-head { border-radius:13px 13px 0 0; }
.cityfeed-card .cityfeed-foot { border-radius:0 0 13px 13px; }
/* "81 İl" butonu da şehrin ikincil rengini alsın (sabit kırmızı yerine) */
.cityfeed-card.is-city-themed .cityfeed-all {
  border-color:color-mix(in srgb, var(--city-secondary,#f87171) 55%, transparent);
  background:color-mix(in srgb, var(--city-secondary,#dc2626) 26%, transparent);
  color:#fff;
}
.cityfeed-card.is-city-themed .cityfeed-all:hover {
  background:color-mix(in srgb, var(--city-secondary,#dc2626) 42%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cityfeed-card.is-city-themed .cityfeed-all {
    border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.16); color:#fff;
  }
}

/* ============================================================
   İL/İLÇE BAŞLIK BANDI — SAYFA ÖLÇÜSÜNE SIĞAR (tam ekran değil)
   Site standardı: en fazla 1200px, küçük ekranlarda 20px boşluk.
   ============================================================ */
.location-header-banner.has-city-bg {
  max-width: var(--container-max-width, 1200px);
  width: calc(100% - 40px);          /* iki yanda 20px boşluk */
  margin: 18px auto 30px;
  padding: 30px 0 26px;
  border-radius: 18px;
  /* NOT: overflow:hidden KULLANILMAZ — açılır ilçe listesi banttan
     taşabilmelidir. Arka plan zaten border-radius ile kırpılır; aynı
     yuvarlaklık karartma katmanına da verilir. */
}
.location-header-banner.has-city-bg::after { border-radius: inherit; }
/* Bant zaten 1200px; içerideki .container ikinci bir daraltma yapmasın */
.location-header-banner.has-city-bg > .container {
  width: 100%;
  max-width: none;
  padding-inline: 30px;
}
@media (max-width: 600px) {
  .location-header-banner.has-city-bg {
    width: calc(100% - 40px);
    margin: 14px auto 24px;
    padding: 24px 0 20px;
    border-radius: 14px;
  }
  .location-header-banner.has-city-bg > .container { padding-inline: 20px; }
}

/* ============================================================
   ŞEHİR SAYFASI BAŞLIK BANDI — FİLTRE BAŞLIĞIN KARŞISINDA
   Masaüstü: metin solda, ilçe filtresi sağda, aynı hizada.
   Mobil   : alt alta, sade ve dar ekrana sığar.
   ============================================================ */
.location-head-split { display:flex; align-items:flex-start; gap:28px; }
.location-head-text { min-width:0; flex:1 1 auto; }
.location-head-split > .citydd { flex:0 0 auto; margin-top:6px; align-self:center; }
.location-head-split .citydd-panel { left:auto; right:0; }   /* sağ kenardan taşmasın */

/* Dar ekran: tek sütun, filtre metnin altında ve tam genişlikte */
@media (max-width: 900px) {
  .location-head-split { flex-direction:column; gap:14px; }
  .location-head-split > .citydd { align-self:stretch; margin-top:0; width:100%; }
  .location-head-split .citydd-panel { left:0; right:auto; width:100%; }
}

/* Mobilde bandı sadeleştir: daha küçük başlık, daha az boşluk */
@media (max-width: 600px) {
  .location-header-banner.has-city-bg .archive-h1 { font-size:1.5rem; margin:8px 0 6px; }
  .location-header-banner.has-city-bg .archive-desc { font-size:.92rem; line-height:1.5; margin-bottom:10px; }
  .location-header-banner.has-city-bg .location-recent-note { font-size:.82rem; margin:0 0 10px; }
  .location-header-banner.has-city-bg .badge-red { font-size:10px; padding:3px 8px; }
  .citydd-caption { font-size:10.5px; margin-bottom:5px; }
  .citydd-list { max-height:min(52vh, 300px); }
}

/* ============================================================
   ANA SAYFA MODÜLÜ — İLÇE FİLTRESİ BAŞLIK SATIRINDA
   Masaüstü: [şehir seçici] [ilçe filtresi] [81 İl]  hepsi bir satırda.
   Dar/mobil: kontroller alt satıra sarar, filtre tam genişlik (eskisi gibi).
   ============================================================ */
.cityfeed-controls { flex-wrap:wrap; }
/* Kontrol satırının içindeyken kendi dolgusu olmasın */
.cityfeed-head .cityfeed-districts {
  display:block; padding:0; margin:0; max-height:none; overflow:visible;
  flex:1 1 100%;                      /* dar görünümde kendi satırına düşer */
  min-width:0;
}
.cityfeed-head .citydd--compact .citydd-btn {
  border-color:rgba(255,255,255,.28);
  box-shadow:none;
}
/* Panel koyu başlık bandının üstünde kalsın */
.cityfeed-head .citydd-panel { z-index:70; }

@container cityfeed (min-width: 530px) {
  .cityfeed-head .cityfeed-districts { flex:0 0 auto; width:auto; }
  .cityfeed-head .citydd--compact { width:auto; max-width:none; }
  .cityfeed-head .citydd--compact .citydd-btn { width:auto; min-width:150px; max-width:210px; }
  /* Panel buton hizasında açılsın, kartın sağından taşmasın */
  .cityfeed-head .citydd-panel { left:auto; right:0; width:min(320px, 80cqw); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .cityfeed-head .cityfeed-districts { flex:0 0 auto; width:auto; }
    .cityfeed-head .citydd--compact .citydd-btn { width:auto; min-width:150px; max-width:210px; }
    .cityfeed-head .citydd-panel { left:auto; right:0; width:320px; }
  }
}
/* Dar görünüm: [şehir] [81 İl] üstte, ilçe filtresi kendi satırında (eski düzen) */
.cityfeed-head .cityfeed-select   { order:1; }
.cityfeed-head .cityfeed-all      { order:2; }
.cityfeed-head .cityfeed-districts{ order:3; }
@container cityfeed (min-width: 530px) {
  /* Geniş görünüm: şehir -> ilçe -> 81 İl, hepsi tek satırda */
  .cityfeed-head .cityfeed-districts { order:2; }
  .cityfeed-head .cityfeed-all       { order:3; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .cityfeed-head .cityfeed-districts { order:2; }
    .cityfeed-head .cityfeed-all       { order:3; }
  }
}
/* "En çok okunanlar" henüz veri toplanmadıysa: boş kutu yerine durum notu */
.most-read-empty { margin:0; padding:14px 2px 4px; color:#64748b; font-size:13.5px; line-height:1.55; }

/* ============================================================
   GÜNCELGÜNDEM — FINAL REKLAM YERLEŞİM STANDARDI V2
   29.09.2026
   - Ana sayfa yatay reklam: bulunduğu 1200px container'ı TAM doldurur
   - Haber/blog üst-alt reklam: 820px haber kolonunu TAM doldurur
   - Görsel oranı korunur; yükseklik otomatik
   - Haber/blog yan ray: 160x600, sticky
   - Mobilde yan raylar görünmez
   - Aynı ana-sayfa section'ında 2 gerçek aktif slot varsa yan yana 2 kolon
   ============================================================ */

:root {
  --gg-ad-page-max: 1200px;
  --gg-ad-article-max: 820px;
  --gg-ad-rail-w: 160px;
  --gg-ad-rail-h: 600px;
}

/* Ortak yatay reklam davranışı: parent genişliğini gerçekten doldur */
.ad-container .ad-slot,
.ad-container .ad-slot-link,
.ad-container .ad-slot picture {
  width: 100%;
  max-width: 100%;
}

.ad-container .ad-slot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: contain;
}

/* HABER / BLOG — ÜST + ALT
   820px makale kolonu genişliğini tam doldurur. */
.article-top-ad,
.article-bottom-ad {
  width: 100%;
  max-width: var(--gg-ad-article-max);
  margin: 18px auto 24px;
  padding: 0;
}

.article-top-ad .ad-slot,
.article-bottom-ad .ad-slot,
.article-top-ad .ad-slot-link,
.article-bottom-ad .ad-slot-link,
.article-top-ad .ad-slot picture,
.article-bottom-ad .ad-slot picture,
.article-top-ad .ad-slot img,
.article-bottom-ad .ad-slot img {
  width: 100%;
  max-width: 100%;
}

.article-top-ad .ad-slot img,
.article-bottom-ad .ad-slot img {
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* HABER / BLOG — SOL + SAĞ STICKY RAY
   1200px container içinde 820px haber + iki yanda yaklaşık 190px doğal alan.
   160px reklam rayı burada haber kolonuna değmeden oturur. */
@media (min-width: 1200px) {
  .article-side-ad {
    display: block;
    position: absolute;
    top: -160px;
    bottom: 0;
    width: var(--gg-ad-rail-w);
    height: auto;
    z-index: 2;
    pointer-events: auto;
  }

  .article-side-ad-left  { left: 0; }
  .article-side-ad-right { right: 0; }

  .article-side-ad .ad-slot {
    position: sticky;
    top: 90px;
    display: block;
    width: var(--gg-ad-rail-w);
    max-width: var(--gg-ad-rail-w);
    margin: 0;
  }

  .article-side-ad .ad-slot-link,
  .article-side-ad .ad-slot picture {
    display: block;
    width: var(--gg-ad-rail-w);
    max-width: var(--gg-ad-rail-w);
  }

  .article-side-ad .ad-slot img {
    display: block;
    width: var(--gg-ad-rail-w);
    height: var(--gg-ad-rail-h);
    max-width: var(--gg-ad-rail-w);
    max-height: var(--gg-ad-rail-h);
    margin: 0;
    object-fit: fill;
  }
}

@media (max-width: 1199px) {
  .article-side-ad {
    display: none !important;
  }
}

/* ANA SAYFA — TAM 1200px REKLAM ŞERİDİ
   Tek aktif slot varsa container'ın tamamını doldurur. */
.home-section-ad {
  width: 100%;
  max-width: var(--gg-ad-page-max);
  margin: 24px auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: start;
  gap: 18px;
}

.home-section-ad .home-ad-item,
.home-section-ad .ad-slot,
.home-section-ad .ad-slot-link,
.home-section-ad .ad-slot picture {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.home-section-ad .ad-slot-home img,
.home-section-ad .ad-slot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: contain;
}

/* Aynı section altında GERÇEKTEN iki farklı aktif reklam slotu varsa
   1200px alan içinde 2 eşit kolon. Aynı reklam kopyalanmaz. */
.home-section-ad--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-section-ad--pair .home-ad-item,
.home-section-ad--pair .ad-slot,
.home-section-ad--pair .ad-slot-link,
.home-section-ad--pair .ad-slot picture,
.home-section-ad--pair .ad-slot img {
  width: 100%;
  max-width: 100%;
}

/* TABLET / MOBİL
   Side rail yok; yatay reklamlar mevcut container'ı doldurur. */
@media (max-width: 767px) {
  .article-top-ad,
  .article-bottom-ad,
  .home-section-ad {
    width: calc(100% - 32px);
    max-width: none;
    margin: 14px auto 18px;
  }

  .home-section-ad,
  .home-section-ad--pair {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .article-top-ad .ad-slot img,
  .article-bottom-ad .ad-slot img,
  .home-section-ad .ad-slot-home img,
  .home-section-ad .ad-slot img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}