/*
Theme Name: Haberin Saati
Description: Haberin Saati haber portali temasi. Tasarim birebir uygulanmistir.
Version: 1.0.0
Text Domain: haberinsaati
*/

/* ---------------------------------------------------------------
   1. Degiskenler
   Tasarimdaki koyu lacivert zemin, altin sari vurgu ve kirmizi
   son dakika rengi burada tanimli.
---------------------------------------------------------------- */
:root {
  --zemin:        #0d1117;
  --zemin-koyu:   #080b0f;
  --kart:         #141b24;
  --kart-acik:    #1c2531;
  --cizgi:        #2a3441;
  --metin:        #e8edf3;
  --metin-soluk:  #9aa7b5;
  --altin:        #c9a227;
  --altin-acik:   #e5c458;
  --kirmizi:      #d32027;
  --yesil:        #1db954;
  --whatsapp:     #25d366;

  --genislik:     1400px;
  --bosluk:       16px;
  --radius:       3px;

  /* Tasarimdaki tipografi: baslıklar tirnakli (Playfair Display),
     arayuz yazilari geometrik sans (Montserrat). */
  --yazi-baslik:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --yazi-govde:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   2. Temel
---------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin-koyu);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--altin-acik); }
img { max-width: 100%; height: auto; display: block; }

.kapsayici {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 var(--bosluk);
}

/* Bantlar (ust bar, logo bandi, menu, alt bilgi) ekrani tam kaplar;
   icerik .kapsayici ile ortada sinirli kalir. */
.site {
  width: 100%;
  margin: 0;
  background: var(--zemin);
}

/* Bolum basligi: kirmizi egik cizgi + baslik + yanindan uzayan altin cizgi.
   Cizgi basligin ALTINDA degil, YANINDA (tasarimdaki gibi). */
.bolum-baslik {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 22px 0 14px;
}
.bolum-baslik h2 {
  font-family: var(--yazi-baslik);
  font-size: 21px;
  margin: 0;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}
.bolum-baslik h2::before {
  content: '/';
  color: var(--kirmizi);
  font-weight: 700;
  font-style: italic;
}
.bolum-baslik .cizgi {
  flex: 1;
  height: 1px;
  background: var(--altin);
}
.bolum-baslik .tumu {
  font-size: 12px;
  color: var(--metin-soluk);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   3. Ust bar - tarih, hava durumu, piyasa serdi
---------------------------------------------------------------- */
.ust-bar {
  background: var(--zemin-koyu);
  border-bottom: 1px solid var(--cizgi);
  font-size: 12.5px;
  /* Gri degil, acik gumus: koyu zeminde net okunuyor */
  color: #d5dde6;
}
.ust-bar .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  gap: 18px;
}
.ust-bar .sol { display: flex; align-items: center; gap: 12px; }
.ust-bar .sag { display: flex; align-items: center; gap: 16px; }
.ust-bar .sol > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ust-bar b { color: #fff; font-weight: 600; }
.ust-bar .gun { color: #9fb0c2; }

/* Ince dikey ayrac */
.ust-bar .ayrac {
  width: 1px;
  height: 14px;
  background: var(--cizgi);
}

.piyasa-kalem { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.piyasa-kalem b { color: #fff; font-weight: 600; }
.artis  { color: var(--yesil); }
.dusus  { color: var(--kirmizi); }
.artis::before  { content: '▲ '; font-size: 9px; }
.dusus::before  { content: '▼ '; font-size: 9px; }

/* ---------------------------------------------------------------
   4. Logo bandi
---------------------------------------------------------------- */
/* Logo bandi ve menu tek bir koyu bant; altin cizgili doku
   tum genisligi kaplar, aralarinda altin bir sac teli cizgi var. */
.header-ana {
  background: #050505 url('gorseller/header-arkaplan-web.png') center / cover no-repeat;
  border-bottom: 2px solid var(--altin);
}

.logo-bandi { position: relative; padding: 22px 0 18px; overflow: hidden; }
.logo-bandi .kapsayici {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo seffaf ve tam ortada; iki yanindan altin sarisi isik huzmeleri uzaniyor */
.logo-bandi .logo { position: relative; display: block; margin: 0; line-height: 0; padding: 0 54px; }

.logo-bandi .logo::before,
.logo-bandi .logo::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 46vw;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: 0 0 20px 4px rgba(229,196,88,.30);
}
.logo-bandi .logo::before {
  right: 100%;
  background: linear-gradient(270deg,
    rgba(248,235,186,.95) 0%,
    rgba(229,196,88,.68)  16%,
    rgba(201,162,39,.30)  44%,
    rgba(201,162,39,0)   100%);
}
.logo-bandi .logo::after {
  left: 100%;
  background: linear-gradient(90deg,
    rgba(248,235,186,.95) 0%,
    rgba(229,196,88,.68)  16%,
    rgba(201,162,39,.30)  44%,
    rgba(201,162,39,0)   100%);
}

/* Logonun arkasinda hafif sicak hale */
.logo-bandi .logo img {
  position: relative;
  z-index: 1;
  height: 62px;
  width: auto;
}

/* Alt bilgideki logo daha kucuk */
.alt-ust .logo img { height: 54px; }

/* ---------------------------------------------------------------
   5. Menu
---------------------------------------------------------------- */
/* Menu, logo bandiyla ayni bandin icinde; ustunde ince altin ayrac */
.ana-menu { border-top: 1px solid rgba(201, 162, 39, .35); }
.ana-menu .kapsayici {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
}
.ana-menu ul {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  gap: 10px;
}
.ana-menu a {
  display: block;
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .2px;
}
.ana-menu a:hover,
.ana-menu .current-menu-item > a { color: var(--altin-acik); }

.menu-sag { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.arama-dugme { background: none; border: 0; color: var(--metin); cursor: pointer; font-size: 16px; }

.canli-yayin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--kirmizi);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
}
.canli-yayin:hover { color: #fff; opacity: .9; }
.canli-nokta {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: nabiz 1.4s infinite;
}
@keyframes nabiz { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------------------------------------------------------------
   6. Son dakika seridi
---------------------------------------------------------------- */
.son-dakika {
  /* Kirmizi degrade serit; gorsel yok, tamami CSS */
  background: linear-gradient(180deg, #e0262d 0%, var(--kirmizi) 45%, #a8171d 100%);
  color: #fff;
  height: 42px;
  /* Tam genislik: kapsayicinin disinda, ekrani bastan sona kaplar */
  width: 100%;
  /* Altin cizgiler serit yuksekligine dahil olmasin diye margin ile bosluk */
  margin: 0 0 calc(var(--bosluk) + 8px);
  position: relative;
  border-top: 1px solid var(--altin);
  border-bottom: 1px solid var(--altin);
  box-shadow:
    /* ust ve alt altin parlama */
    0 -7px 16px -5px rgba(201, 162, 39, .75),
    0  7px 16px -5px rgba(201, 162, 39, .75),
    /* seridin kendi kirmizi parlamasi ve golgesi */
    0 0 18px rgba(211, 32, 39, .4),
    /* ic isik cizgileri */
    inset 0  1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* Altin cizgilerin uzerinde ince, ortada yogunlasan parlama */
.son-dakika::before,
.son-dakika::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(201, 162, 39, .35) 12%,
    var(--altin-acik) 50%,
    rgba(201, 162, 39, .35) 88%,
    transparent 100%);
}
.son-dakika::before { top: -1px; }
.son-dakika::after  { bottom: -1px; }

/* Serit ekrani bastan sona kaplar, icerigi sayfayla ayni hizada durur.
   .kapsayici'nin yan bosluklarini koruyoruz ki etiket mansetle ayni
   dikey cizgiden bassin. */
.son-dakika-ic {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Sol etiket: koyu kirmizi blok, sagina egik ayrac */
.son-dakika .etiket {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: .4px;
  padding: 0 20px 0 16px;
  height: 100%;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .34));
  box-shadow: 1px 0 0 rgba(255, 255, 255, .18);
}
.son-dakika .simsek {
  width: 15px; height: 15px;
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(255, 240, 180, .85));
  animation: simsek-yanip-sonme 2.2s ease-in-out infinite;
}
@keyframes simsek-yanip-sonme { 0%, 100% { opacity: 1; } 55% { opacity: .45; } }

/* Kayan ticker */
.son-dakika .akis {
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  /* Iki uctan yumusak gecis, yazi kenarda birden kesilmesin */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.son-dakika .ticker {
  display: flex;
  width: max-content;
  animation: ticker-kay 45s linear infinite;
}
.son-dakika .ticker-grup { display: flex; }
.son-dakika .ticker a {
  color: #fff;
  padding: 0 22px;
  white-space: nowrap;
  position: relative;
}
/* Basliklar arasi ince ayrac nokta */
.son-dakika .ticker a::after {
  content: '';
  position: absolute; right: -3px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
}
.son-dakika .ticker a:hover { color: #ffe9a8; }

/* Iki kopya oldugu icin yarisi kadar kaydirmak dikissiz dongu verir */
@keyframes ticker-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Uzerine gelince ve okla durdurulunca akis dursun */
.son-dakika:hover .ticker,
.son-dakika.durdu .ticker { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .son-dakika .ticker { animation: none; }
  .son-dakika .simsek { animation: none; }
}

.son-dakika .oklar { display: flex; gap: 4px; padding: 0 10px; }
.son-dakika .ok {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.son-dakika .ok:hover { background: rgba(0, 0, 0, .4); }
.son-dakika .ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.son-dakika .tum-link {
  border-left: 1px solid rgba(255, 255, 255, .25);
  padding: 0 16px;
  font-size: 12px;
  white-space: nowrap;
  color: #fff;
}
.son-dakika .tum-link:hover { color: #ffe9a8; }

/* ---------------------------------------------------------------
   7. Ana manset alani
   Dort kolon: ana haber | iki kart | SIMDI | piyasa-hava-ihbar
   Sabit yukseklik, tum kolonlar ust ve alt hizada.
---------------------------------------------------------------- */
.news-hero-grid {
  --hero-panel:  #10171f;
  --hero-kenar:  #27313b;
  --hero-kirmizi:#e71925;
  --hero-altin:  #c3a144;
  --hero-ikincil:#aab1ba;
  --hero-bosluk: 9px;

  width: 100%;
  height: 430px;
  margin: 0 0 18px;

  display: grid;
  grid-template-columns:
    minmax(0, 2.65fr)
    minmax(0, 1.40fr)
    minmax(145px, .82fr)
    minmax(165px, 1fr);
  gap: var(--hero-bosluk);
  align-items: stretch;
}

/* Bu alanda arayuz yazilari sans, haber baslıklari serif */
.news-hero-grid,
.news-hero-grid .news-tag,
.news-hero-grid .news-meta {
  font-family: Arial, 'Inter', Helvetica, sans-serif;
}

/* --- Kategori etiketi --- */
.news-tag {
  display: inline-block;
  background: var(--hero-kirmizi);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .3px;
  padding: 5px 8px;
  border-radius: 1px;
  text-transform: uppercase;
}

/* --- SOL: ana haber --- */
.news-main {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: #111;
  border-radius: 2px;
  display: block;
}
.news-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Yuzler genelde ust yarida; kirpma oradan olmasin */
  object-position: center 32%;
}
.news-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .02) 25%,
    rgba(0, 0, 0, .15) 48%,
    rgba(0, 0, 0, .90) 100%);
}
.news-main-body {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
}
.news-main-body h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(27px, 2.2vw, 40px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.8px;
  color: #fff;
  margin: 10px 0 8px;
}
.news-main-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.35;
  color: #dfe4ea;
  margin: 0 0 9px;
  max-width: 78%;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--hero-ikincil);
}
.news-meta .sep {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, .3);
}

/* --- ORTA: ust uste iki esit kart --- */
.news-secondary {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--hero-bosluk);
  height: 100%;
  min-height: 0;
}
.news-card {
  position: relative;
  overflow: hidden;
  background: #111;
  border-radius: 2px;
  display: block;
  min-height: 0;
}
.news-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.news-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .02) 30%,
    rgba(0, 0, 0, .22) 52%,
    rgba(0, 0, 0, .92) 100%);
}
.news-card-body {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 1;
}
.news-card-body h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  margin: 7px 0 4px;
}
.news-card-body p {
  font-size: 11px;
  line-height: 1.3;
  color: var(--hero-ikincil);
  margin: 0;
}

/* --- ORTA-SAG: SIMDI paneli --- */
.news-live { display: flex; min-height: 0; }
.news-live .simdi-kutu {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #0e141b;
  border: 1px solid var(--hero-kenar);
  border-radius: 2px;
  padding: 10px 11px;
}
.news-live .baslik {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  color: #fff;
  border-bottom: 1px solid var(--hero-altin);
  padding-bottom: 7px;
  margin-bottom: 9px;
}

.zaman-cizgi {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.zaman-cizgi::before {
  content: '';
  position: absolute;
  left: 3px; top: 5px; bottom: 6px;
  width: 1px;
  background: var(--hero-kenar);
}
.zaman-cizgi li {
  position: relative;
  padding: 0 0 11px;
  font-size: 11.5px;
}
.zaman-cizgi li::before {
  content: '';
  position: absolute;
  left: -16px; top: 3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #0e141b;
  border: 2px solid var(--hero-kenar);
}
.zaman-cizgi li.canli::before {
  border-color: var(--hero-kirmizi);
  box-shadow: 0 0 6px rgba(231, 25, 37, .85);
}
.zaman-cizgi p {
  margin: 0;
  color: #e4e9ef;
  line-height: 1.35;
}
.zaman-cizgi .saat {
  display: block;
  color: var(--hero-altin);
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 2px;
}

.canli-etiket {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--hero-kirmizi);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 1px;
  margin-bottom: 4px;
}
.canli-etiket .nokta {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  animation: nabiz 1.4s infinite;
}

.kutu-alt-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hero-kenar);
  font-size: 11px;
  color: var(--hero-ikincil);
}

/* --- SAG: piyasa / hava / ihbar --- */
.news-side {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height: 0;
}
.news-side .piyasa-kutu {
  background: var(--hero-panel);
  border: 1px solid var(--hero-kenar);
  border-radius: 2px;
  padding: 9px 11px;
}
.kutu-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--hero-ikincil);
  margin-bottom: 6px;
}
.kutu-basi b {
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 10.5px;
}

.piyasa-kutu .satir {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(39, 49, 59, .8);
  font-size: 11.5px;
}
.piyasa-kutu .satir:last-child { border-bottom: 0; }
.piyasa-kutu .ad { color: var(--hero-ikincil); }
.piyasa-kutu .deger { color: #fff; font-weight: 700; }
.piyasa-kutu .artis,
.piyasa-kutu .dusus { font-size: 10.5px; min-width: 46px; text-align: right; }

/* --- ISTANBUL hava durumu kutusu --- */
.weather-box {
  background: var(--hero-panel);
  border: 1px solid var(--hero-kenar);
  border-radius: 2px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.weather-title {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 12px;
}
.weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.weather-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}
.weather-icon .ikon-hava { width: 34px; height: 34px; }
.weather-icon .gunes { stroke: #f0b429; stroke-width: 1.6; }
.weather-icon .gunes circle { fill: #f0b429; stroke: none; }
.weather-icon .bulut { fill: #dbe3ec; stroke: none; }

.weather-info { min-width: 0; }
.weather-info .temp {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}
.weather-info .desc {
  color: #cfd6df;
  font-size: 12px;
  margin-top: 4px;
}

.weather-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #b8c0ca;
  font-size: 12px;
  white-space: nowrap;
}
.weather-meta strong { color: #fff; font-weight: 700; }

/* --- WhatsApp ihbar hatti --- */
.whatsapp-box {
  /* Solda logolu yesil gorsel, sag tarafa dogru koyulasan ortu
     sayesinde yazilar gorselin uzerinde net okunuyor. */
  background:
    linear-gradient(90deg,
      rgba(4, 32, 18, 0) 26%,
      rgba(4, 32, 18, .82) 54%,
      rgba(4, 32, 18, .94) 100%),
    #062b18 url('gorseller/whatsapp-arkaplan.png') left center / auto 100% no-repeat;
  color: #eafff2;
  border-radius: 2px;
  padding: 12px 12px 12px 74px;
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15px;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}
.whatsapp-box:hover { color: #fff; filter: brightness(1.08); }

.wa-content { min-width: 0; }
.wa-title {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 5px;
  color: #fff;
  letter-spacing: -.2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.wa-text {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #b9edcf;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.wa-arrow {
  justify-self: end;
  align-self: center;
  line-height: 1;
  font-size: 16px;
  color: #7ff0ab;
}

/* --- Duyarli --- */
@media (max-width: 1240px) {
  .news-hero-grid {
    height: auto;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .news-main { height: 340px; }
  .news-secondary { height: 340px; }
  .news-live, .news-side { grid-column: span 1; }
  .news-live .simdi-kutu { min-height: 260px; }
}

@media (max-width: 760px) {
  .news-hero-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .news-main { height: 260px; }
  .news-secondary { height: auto; grid-template-rows: none; }
  .news-card { height: 170px; }
  .news-main-body h2 { font-size: 24px; }
  .news-main-desc { max-width: 100%; }
}

/* ---------------------------------------------------------------
   8. Kart izgaralari
---------------------------------------------------------------- */
.izgara { display: grid; gap: var(--bosluk); }
.izgara-2 { grid-template-columns: repeat(2, 1fr); }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }
.izgara-5 { grid-template-columns: repeat(5, 1fr); }
.izgara-6 { grid-template-columns: repeat(6, 1fr); }

/* Kartlar sutun; baslik esnek, boylece kategori+tarih satiri
   baslik 1 ya da 2 satir olsun fark etmeksizin ayni hizada durur. */
.haber-kart {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.haber-kart .gorsel {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 9px;
  background: var(--kart-acik);
  flex: none;
}
.haber-kart .gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.haber-kart:hover .gorsel img { transform: scale(1.04); }
.haber-kart h3 {
  font-family: var(--yazi-baslik);
  font-size: 16.5px;
  line-height: 1.28;
  margin: 0 0 9px;
  /* Basligi esnetip alt satiri asagi itiyoruz; en fazla 2 satir */
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.haber-kart .kunye {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--metin-soluk);
}
.haber-kart .kunye .tarih { color: var(--metin-soluk); }

/* Kategori etiketi: dolgu degil, kategoriye gore renkli yazi.
   Renkler koyu zeminde okunacak sekilde acik tutuldu. */
.kat {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--kirmizi);
}
.kat--gundem       { color: #f0353f; }
.kat--dunya        { color: #4a9fe0; }
.kat--ekonomi      { color: #e0a63a; }
.kat--politika     { color: #ec7a3c; }
.kat--saglik       { color: #24bcd4; }
.kat--spor         { color: #3fc46a; }
.kat--kultur-sanat { color: #d162c4; }

/* ---------------------------------------------------------------
   9. Iki panelli bolum (Almanya / Turkiye) + Ataturk sozu
---------------------------------------------------------------- */
/* ---------------------------------------------------------------
   9. Almanya / Turkiye panelleri + Ataturk kutusu
   Her panel altin cerceveli koyu kutu; gorselin altinda beyaz
   metin blogu. Sagdaki kutuyu Ataturk gorseli tek basina doldurur.
---------------------------------------------------------------- */
.panel-satir {
  display: grid;
  grid-template-columns: 1fr 1fr 330px;
  gap: 16px;
  margin: 22px 0;
  align-items: stretch;
  /* Altin serit haberlerin etrafinda degil, satirin altinda ve ustunde */
  border-top: 1px solid var(--altin);
  border-bottom: 1px solid var(--altin);
  padding: 16px 0;
}

.panel {
  background: #0b0f14;
  border: 0;
  border-radius: 2px;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
}
.panel .bolum-baslik { margin: 10px 0 10px; }
.panel .bolum-baslik h2 { font-size: 18px; color: #fff; }

.panel-kart { display: block; flex: 1; }
/* Tasarimda gorsel genis ve alcak; satirin tamami ~290px kaliyor.
   16/9 kullanmak satiri 490px'e cikarip Ataturk kutusunu asiri
   uzatiyordu, o yuzden sabit yukseklik. */
.panel .gorsel {
  border-radius: 2px;
  overflow: hidden;
  height: 150px;
  background: var(--kart-acik);
}
.panel .gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Gorselin altindaki beyaz metin blogu */
.panel-govde {
  background: #fff;
  padding: 11px 13px 12px;
  border-radius: 0 0 2px 2px;
}
.panel-govde h3 {
  font-family: var(--yazi-baslik);
  font-size: 16px;
  line-height: 1.22;
  color: #14202c;
  margin: 0 0 6px;
  /* Baslik 1 ya da 2 satir olsa da ayni yeri kaplasin ki
     iki paneldeki beyaz kutular ve kategori satirlari hizali dursun. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.22em);
}
.panel-kart:hover .panel-govde h3 { color: var(--kirmizi); }
.panel-govde p {
  font-size: 12px;
  line-height: 1.4;
  color: #58636f;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4em);
}
.panel-govde .kunye {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.panel-govde .tarih { color: #77828e; }

/* Beyaz zeminde kategori renkleri koyu tonda */
.panel-govde .kat--gundem       { color: #d81c25; }
.panel-govde .kat--dunya        { color: #1f6fb8; }
.panel-govde .kat--ekonomi      { color: #a8781a; }
.panel-govde .kat--politika     { color: #c2551d; }
.panel-govde .kat--saglik       { color: #0f8fa8; }
.panel-govde .kat--spor         { color: #1e8a45; }
.panel-govde .kat--kultur-sanat { color: #a12f92; }

/* Ataturk kutusu: gorsel kutuyu tamamen doldurur */
/* Reklam alani: panellerin sagindaki ucuncu sutun */
.tanitim-kutu {
  position: relative;
  display: block;
  border-left: 1px solid var(--altin);
  padding-left: 16px;
  overflow: hidden;
  line-height: 0;
}
.tanitim-kutu img {
  display: block;
  width: 100%;
  /* height:100% tek basina birakilirsa bazi durumlarda 0'a dusup kutu bos
     kaliyordu; kare oran gorseli her halukarda ayakta tutuyor */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
  transition: transform .35s ease;
}
.tanitim-kutu:hover img { transform: scale(1.02); }
.tanitim-etiket {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.55);
}

@media (max-width: 860px) {
  .panel-satir { grid-template-columns: 1fr 1fr; }
  .ataturk-kutu { grid-column: 1 / -1; max-height: 300px; border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .panel-satir { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   10. Video / Trend / Deprem uclusu
---------------------------------------------------------------- */
.uclu-satir {
  display: grid;
  /* 250px "Son Depremler" + "Tum Depremler" basligini tasiriyordu */
  grid-template-columns: 1fr 300px 300px;
  gap: 20px;
  margin-bottom: 22px;
  align-items: stretch;
}
/* Uc sutun da ust ve alt hizada bitsin: sutunlar dikey esnek kutu,
   listeler kalan bosluğu doldurup kalemleri esit dagitiyor. */
.uclu-satir > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.uclu-satir .bolum-baslik { margin-top: 0; }
.uclu-satir .sirali-liste,
.uclu-satir .deprem-liste {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video-kart { position: relative; }
.video-kart .oynat {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-kart .oynat span {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(211,32,39,.9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.video-kart .sure {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.8);
  color: #fff; font-size: 10px;
  padding: 2px 5px; border-radius: 2px;
}

.sirali-liste { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sirali-liste li {
  display: flex; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 12.5px;
  counter-increment: s;
}
.sirali-liste li:last-child { border-bottom: 0; }
.sirali-liste li::before {
  content: counter(s);
  color: var(--kirmizi);
  font-family: var(--yazi-baslik);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
}

.deprem-liste { list-style: none; margin: 0; padding: 0; }
.deprem-liste li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 12px;
}
.deprem-liste li:last-child { border-bottom: 0; }
.deprem-liste .buyukluk {
  background: var(--kart-acik);
  border-radius: 2px;
  text-align: center;
  padding: 3px 0;
  font-weight: 700;
  font-size: 12px;
}
.deprem-liste .buyukluk.orta  { color: var(--altin); }
.deprem-liste .buyukluk.guclu { background: var(--kirmizi); color: #fff; }
.deprem-liste .zaman { color: var(--metin-soluk); font-size: 11px; white-space: nowrap; }

/* ---------------------------------------------------------------
   11. Ekonomi / Spor ikilisi
---------------------------------------------------------------- */
.ikili-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 22px; }
.ikili-ic { display: grid; grid-template-columns: 1fr 190px; gap: var(--bosluk); }

.mini-liste { list-style: none; margin: 0; padding: 0; }
.mini-liste li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 12px;
}
.mini-liste li:last-child { border-bottom: 0; }
.mini-liste li::before { content: '›'; color: var(--altin); font-weight: 700; }

.puan-tablo { width: 100%; border-collapse: collapse; font-size: 12px; }
.puan-tablo th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--metin-soluk);
  border-bottom: 1px solid var(--altin);
  padding-bottom: 6px;
  font-weight: 600;
}
.puan-tablo td { padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.puan-tablo tr:last-child td { border-bottom: 0; }
.puan-tablo .sira { color: var(--metin-soluk); width: 18px; }
.puan-tablo .puan { text-align: right; font-weight: 700; }

/* ---------------------------------------------------------------
   12. Roportaj bloku
---------------------------------------------------------------- */
/* ---------------------------------------------------------------
   12. Roportaj blogu
   Referansta koyu kutu: solda portre, sagda altin isim + tirnakli
   alinti + kisa aciklama + altin cerceveli buton.
---------------------------------------------------------------- */
.roportaj {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  background: #0b0f14;
  border: 1px solid var(--altin);
  border-radius: 2px;
  overflow: hidden;
  min-height: 0;
}
.roportaj-foto { overflow: hidden; }
.roportaj-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.roportaj-govde {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.roportaj-govde .isim {
  color: var(--altin-acik);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 7px;
}
.roportaj-govde h3 {
  font-family: var(--yazi-baslik);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  margin: 0 0 9px;
}
.roportaj-govde p {
  font-size: 12px;
  line-height: 1.45;
  color: #aab1ba;
  margin: 0 0 13px;
}

.dugme-altin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border: 1px solid var(--altin);
  color: var(--altin-acik);
  padding: 7px 16px;
  border-radius: 18px;
  font-size: 12px;
}
.roportaj:hover .dugme-altin { background: var(--altin); color: #10161e; }

/* Kultur-Sanat: gorsel kolonun tamamini kaplar */
.blok-haber--genis .gorsel { height: 152px; }

@media (max-width: 640px) {
  .roportaj { grid-template-columns: 1fr; }
  .roportaj-foto { height: 200px; }
}

/* ---------------------------------------------------------------
   13. Gunun mansetleri seridi
---------------------------------------------------------------- */
.manset-serit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--bosluk);
  padding: 12px 0 26px;
}
.manset-serit .oge { display: flex; gap: 9px; font-size: 12px; align-items: flex-start; }
.manset-serit .no {
  color: var(--kirmizi);
  font-family: var(--yazi-baslik);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------------------------------------
   14. Alt bilgi
---------------------------------------------------------------- */
.alt-bilgi { background: var(--zemin-koyu); border-top: 2px solid var(--altin); }

.alt-ust {
  display: grid;
  grid-template-columns: 1fr 1.2fr .8fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--cizgi);
  align-items: center;
}
.alt-ust .logo { font-size: 30px; }
.alt-ust .logo-slogan { border: 0; padding: 0; margin-top: 6px; }

.bulten-kutu { display: flex; align-items: center; gap: 14px; }
.bulten-kutu .zarf { font-size: 28px; color: var(--altin); }
.bulten-form { display: flex; gap: 8px; margin-top: 8px; }
.bulten-form input {
  flex: 1;
  overflow: hidden;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 12px;
}
.bulten-form button {
  background: var(--altin);
  color: #10161e;
  border: 0;
  padding: 8px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.sosyal { display: flex; gap: 9px; margin-top: 8px; }
.sosyal a {
  width: 30px; height: 30px;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.sosyal a:hover { border-color: var(--altin); color: var(--altin); }

.alt-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 12.5px;
}
.alt-menu ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 18px; }

.alt-kunye {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0 22px;
  font-size: 11.5px;
  color: var(--metin-soluk);
}
.alt-kunye ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 8px; padding: 0; gap: 16px; }
.alt-kunye .slogan { font-family: var(--yazi-baslik); font-style: italic; }

/* ---------------------------------------------------------------
   15. Ic sayfalar
---------------------------------------------------------------- */
.icerik-satir { display: grid; grid-template-columns: 1fr 320px; gap: 30px; margin: 22px 0; }

.yazi-basligi { font-family: var(--yazi-baslik); font-size: 32px; line-height: 1.2; margin: 10px 0; }
.yazi-spot { font-family: var(--yazi-baslik); font-style: italic; font-size: 16px; color: var(--metin-soluk); }
.yazi-govde { font-size: 16px; line-height: 1.75; }
.yazi-govde p { margin: 0 0 18px; }
.yazi-govde img { border-radius: var(--radius); margin: 18px 0; }
.yazi-govde h2, .yazi-govde h3 { font-family: var(--yazi-baslik); }

.sayfalama { display: flex; gap: 6px; justify-content: center; margin: 26px 0; }
.sayfalama .page-numbers {
  padding: 7px 13px;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  font-size: 13px;
}
.sayfalama .current { background: var(--altin); color: #10161e; border-color: var(--altin); }

/* ---------------------------------------------------------------
   16. Duyarli yerlesim
---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ust-bar .sag  { display: none; }
  .panel-satir   { grid-template-columns: 1fr 1fr; }
  .uclu-satir    { grid-template-columns: 1fr 1fr; }
  .izgara-6      { grid-template-columns: repeat(3, 1fr); }
  .icerik-satir  { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .logo img { height: 52px; }
  .ana-menu .kapsayici { height: auto; padding: 8px var(--bosluk); }
  .ana-menu ul { flex-wrap: wrap; justify-content: center; }
  .panel-satir, .uclu-satir, .ikili-satir, .ikili-ic { grid-template-columns: 1fr; }
  .izgara-4, .izgara-5, .izgara-6 { grid-template-columns: repeat(2, 1fr); }
  .manset-serit { grid-template-columns: 1fr 1fr; }
  .alt-ust, .alt-menu, .alt-kunye { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
}


/* FontAwesome ikon ince ayarlari */
.canli-etiket .fa-circle { font-size: 6px; vertical-align: middle; }
.bolum-baslik .tumu::after { content: none; }
.sosyal a i { font-size: 13px; }

/* Ust bar inline SVG ikonlari.
   Cizgi tabanli, ici bos: koyu zeminde leke gibi durmuyor. */
.ust-bar .ikon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: #8fa3b8;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hava ikonu iki renkli: gunes sicak amber, bulut acik gri */
.ust-bar .ikon-hava { width: 16px; height: 16px; }
.ust-bar .ikon-hava .gunes { stroke: #f0b429; }
.ust-bar .ikon-hava .gunes circle { fill: #f0b429; stroke: none; }
.ust-bar .ikon-hava .bulut { fill: #dbe3ec; stroke: none; }
.ust-bar .hava { color: #e6ecf3; }

/* Alt bilgideki ihbar hatti (manset alanindakinden ayri, daha kucuk) */
.alt-menu .whatsapp-kutu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #19c968;
  color: #04331b;
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 11px;
  line-height: 1.3;
}
.alt-menu .whatsapp-kutu b { display: block; font-size: 12px; }
.alt-menu .whatsapp-kutu:hover { color: #04331b; filter: brightness(1.06); }

/* ---------------------------------------------------------------
   One Cikanlar: koyu sayfanin ortasinda acik zeminli blok.
   Tasarimda bu bolum beyaz, ince altin cerceveli.
---------------------------------------------------------------- */
.one-cikanlar {
  background: #fff;
  /* Tam kenara dayanir: .genis-alan'in yan bosluklarini geri aliyoruz,
     boylece beyaz blogun etrafinda siyah cerceve kalmiyor. */
  margin: 0 -24px;
  padding: 6px 24px 22px;
  border: 0;
  border-top: 1px solid #d9c9a3;
  border-bottom: 1px solid #d9c9a3;
  border-radius: 0;
}
@media (max-width: 760px) {
  .one-cikanlar { margin: 0 -14px; padding: 6px 14px 18px; }
}

/* Bolum basligi: kirmizi egik cizgi + baslik + yanindan uzayan altin cizgi.
   Altin cizgi basligin ALTINDA degil, YANINDA. */
.one-cikanlar .bolum-baslik {
  border-bottom: 0;
  align-items: center;
  gap: 14px;
  margin: 14px 0 16px;
  padding-bottom: 0;
}
.one-cikanlar .bolum-baslik .cizgi {
  flex: 1;
  height: 1px;
  background: var(--altin);
}
.one-cikanlar .bolum-baslik h2 {
  color: #14202c;
  border-left: 0;
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
/* Basliktan once kirmizi egik cizgi */
.one-cikanlar .bolum-baslik h2::before {
  content: '/';
  color: var(--kirmizi);
  font-weight: 700;
  font-style: italic;
}
.one-cikanlar .bolum-baslik .tumu { color: #6b7683; }

/* Kartlar */
.one-cikanlar .haber-kart h3 { color: #14202c; }
.one-cikanlar .haber-kart:hover h3 { color: var(--kirmizi); }
.one-cikanlar .haber-kart .gorsel { background: #eceff3; }
.one-cikanlar .haber-kart .kunye .tarih { color: #77828e; }

/* Kategori renkleri beyaz zeminde okunacak sekilde koyulastirildi */
.one-cikanlar .kat--gundem       { color: #d81c25; }
.one-cikanlar .kat--dunya        { color: #1f6fb8; }
.one-cikanlar .kat--ekonomi      { color: #a8781a; }
.one-cikanlar .kat--politika     { color: #c2551d; }
.one-cikanlar .kat--saglik       { color: #0f8fa8; }
.one-cikanlar .kat--spor         { color: #1e8a45; }
.one-cikanlar .kat--kultur-sanat { color: #a12f92; }

/* Manset alaninin altindaki bolumler ekrani bastan sona kaplar.
   Ust bar, header, son dakika ve manset kendi hizalarinda kalir. */
.genis-alan {
  width: 100%;
  padding: 0 24px;
}
@media (max-width: 760px) {
  .genis-alan { padding: 0 14px; }
}
/* ---------------------------------------------------------------
   Ekonomi / Spor beyaz blogu
   Referanstaki sikisik gazete yerlesimi: iki esit sutun, her
   sutunda solda haber gorseli, sagda koyu veri paneli.
   Kose yuvarlamasi ve golge yok.
---------------------------------------------------------------- */
.blok-beyaz {
  background: #fff;
  margin: 0 -24px;
  padding: 6px 24px 20px;
  border-top: 1px solid #d9c9a3;
}
.blok-beyaz--devam { border-top: 0; padding-top: 0; }

.blok-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* Ekonomi ile Spor arasinda ince altin/bej dikey ayrac */
.blok-izgara > .blok-sutun + .blok-sutun {
  border-left: 1px solid #e2d6b8;
  padding-left: 24px;
  margin-left: -12px;
}
.blok-sutun { min-width: 0; }

/* Baslik alani ~38px */
.blok-beyaz .bolum-baslik {
  height: 34px;
  margin: 8px 0 8px;
  border-bottom: 0;
}
.blok-beyaz .bolum-baslik h2 { color: #14202c; font-size: 20px; }
.blok-beyaz .bolum-baslik .cizgi { background: #e2d6b8; }
.blok-beyaz .bolum-baslik .tumu { color: #6b7683; }

/* Icerik: solda haber, sagda koyu panel */
.blok-icerik {
  display: grid;
  gap: 10px;
  align-items: stretch;
}
/* Ekonomi: haber gorseli ile BIST paneli birbirine yakin genislikte.
   Spor: gorsel puan tablosundan yaklasik 3 kat genis. */
.blok-icerik--ekonomi { grid-template-columns: 1.3fr minmax(0, 1fr); }
.blok-icerik--spor    { grid-template-columns: 1.7fr minmax(0, 1fr); }

.blok-haber { display: block; min-width: 0; }
.blok-haber .gorsel {
  height: 152px;
  overflow: hidden;
  background: #eceff3;
}
.blok-haber .gorsel img { width: 100%; height: 100%; object-fit: cover; }
.blok-govde { padding: 8px 0 0; }
.blok-govde h3 {
  font-family: var(--yazi-baslik);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 700;
  color: #14202c;
  margin: 0 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blok-haber:hover .blok-govde h3 { color: var(--kirmizi); }
.blok-govde p {
  font-size: 11.5px;
  line-height: 1.35;
  color: #6b7683;
  margin: 0;
}

/* --- Finans paneli --- */
.finans-panel {
  background: #101515;
  padding: 12px 12px 6px;
  min-width: 0;
}
.finans-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid #1e2626;
}
.finans-ust .etiket {
  display: block;
  font-size: 10.5px;
  color: #8b959b;
  letter-spacing: .4px;
}
.finans-ust .deger {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.finans-ust .artis { font-size: 11.5px; }
.cizgi-grafik {
  width: 78px;
  height: 34px;
  flex: none;
}
.cizgi-grafik polyline {
  fill: none;
  stroke: var(--yesil);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finans-liste { list-style: none; margin: 0; padding: 0; }
.finans-liste li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #1a2222;
  font-size: 11.5px;
  line-height: 1.35;
  color: #d6dce0;
  /* Referansta her haber tek satir */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finans-liste li:last-child { border-bottom: 0; }
/* Solda kucuk altin dairesel ikon */
.finans-liste li::before {
  content: '';
  width: 11px;
  height: 11px;
  margin-top: 2px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--altin);
  box-shadow: inset 0 0 0 2px #101515, inset 0 0 0 3px var(--altin);
  margin-top: 0;
}

/* --- Puan tablosu --- */
.puan-panel {
  background: #0b0f12;
  border: 1px solid #1a2128;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  padding: 9px 8px 7px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.puan-basi {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  /* Acik krem / sicak beyaz */
  color: #f2e9d8;
  padding-bottom: 7px;
  border-bottom: 1px solid #1e2830;
  white-space: nowrap;
}
.puan-liste { list-style: none; margin: 0; padding: 0; flex: 1; }
.puan-liste li {
  display: grid;
  grid-template-columns: 10px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  /* Satirlar referanstaki kadar sikisik */
  padding: 6px 0;
  border-bottom: 1px solid #161d24;
  font-size: 12px;
}
.puan-liste li:last-child { border-bottom: 0; }
.puan-liste .sira { color: #7e8894; font-size: 11px; }
/* Gercek takim armalari; optik olarak ayni boyda dursun diye
   sabit kutuya oturtulup contain ile olcekleniyor. */
.puan-liste .arma {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.puan-liste .takim {
  color: #e7ebef;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.puan-liste .puan { color: #fff; font-weight: 700; font-size: 12.5px; }

.puan-alt {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #1e2830;
  font-size: 11px;
  color: #9aa3ae;
}

@media (max-width: 900px) {
  .blok-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .blok-icerik--ekonomi,
  .blok-icerik--spor { grid-template-columns: 1fr; }
  .blok-beyaz { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
}

/* Beyaz blogun devamindaki Kultur-Sanat / Roportaj */
.blok-beyaz .haber-kart h3 { color: #14202c; }
.blok-beyaz .haber-kart:hover h3 { color: var(--kirmizi); }
.blok-beyaz .haber-kart .tarih { color: #77828e; }
.blok-beyaz .kat--gundem       { color: #d81c25; }
.blok-beyaz .kat--dunya        { color: #1f6fb8; }
.blok-beyaz .kat--ekonomi      { color: #a8781a; }
.blok-beyaz .kat--politika     { color: #c2551d; }
.blok-beyaz .kat--saglik       { color: #0f8fa8; }
.blok-beyaz .kat--spor         { color: #1e8a45; }
.blok-beyaz .kat--kultur-sanat { color: #a12f92; }

/* ---------------------------------------------------------------
   Dil secimi (TR / DE)
---------------------------------------------------------------- */
.menu-sag { display: flex; align-items: center; gap: 14px; }
.dil-secim {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.55);
  border-radius: 3px;
}
.dil-secim button {
  padding: 4px 9px;
  border: 0;
  cursor: pointer;
  font: 600 11px/1.5 var(--yazi-govde, sans-serif);
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
  background: transparent;
  transition: background .18s ease, color .18s ease;
}
.dil-secim button + button { border-left: 1px solid rgba(201,162,39,.35); }
.dil-secim button:hover { color: #fff; background: rgba(201,162,39,.16); }
.dil-secim button.etkin { color: #1b1405; background: var(--altin, #c9a227); }

/* ===============================================================
   IC SAYFALAR: kategori, haber detay, video, galeri, iletisim
   =============================================================== */

.ekmek-kirintisi {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 22px 0 14px;
  font-size: 12px;
  color: var(--metin-soluk, #8b93a1);
}
.ekmek-kirintisi a { color: var(--altin, #c9a227); text-decoration: none; }
.ekmek-kirintisi a:hover { text-decoration: underline; }

.sayfa-basligi { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.sayfa-basligi h1 {
  margin: 0;
  font-family: var(--yazi-baslik, Georgia, serif);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.sayfa-basligi .cizgi {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--altin, #c9a227), rgba(201,162,39,0));
}

/* --- Kategori vitrini --- */
.kategori-vitrin { margin-bottom: 26px; }
.vitrin-kart {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  overflow: hidden;
  text-decoration: none;
  background: #0f141b;
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 3px;
}
.vitrin-kart .gorsel { overflow: hidden; aspect-ratio: 16 / 10; }
.vitrin-kart .gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.vitrin-kart:hover .gorsel img { transform: scale(1.03); }
.vitrin-govde { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px; }
.vitrin-govde h2 {
  margin: 0;
  font-family: var(--yazi-baslik, Georgia, serif);
  font-size: 25px;
  line-height: 1.28;
  color: #fff;
}
.vitrin-govde p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--metin-soluk, #97a0ae); }
.vitrin-govde .kat { align-self: flex-start; }
.vitrin-govde .tarih { font-size: 12px; color: var(--metin-soluk, #8b93a1); }

.liste-izgara { margin-bottom: 30px; }

/* --- Sayfalama --- */
.sayfalama { display: flex; gap: 8px; align-items: center; margin: 6px 0 40px; }
.sayfalama a, .sayfalama span {
  min-width: 34px;
  padding: 7px 11px;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  border-radius: 3px;
  color: var(--metin-soluk, #97a0ae);
  border: 1px solid rgba(255,255,255,.12);
}
.sayfalama a:hover { color: #fff; border-color: rgba(201,162,39,.6); }
.sayfalama .etkin { color: #1b1405; background: var(--altin, #c9a227); border-color: var(--altin, #c9a227); }
.sayfalama .ileri { min-width: auto; }

/* --- Haber detay --- */
.haber-detay { padding-bottom: 36px; }
.detay-basi { max-width: 780px; margin: 0 auto 22px; text-align: center; }
.detay-basi .kat { display: inline-block; margin-bottom: 12px; }
.detay-basi h1 {
  margin: 0 0 14px;
  font-family: var(--yazi-baslik, Georgia, serif);
  font-size: 36px;
  line-height: 1.22;
  color: #fff;
}
.detay-basi .spot {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  color: var(--metin-soluk, #a3abb8);
}
.detay-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  font-size: 12px;
  color: var(--metin-soluk, #8b93a1);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.detay-kunye .paylas { display: flex; gap: 10px; }
.detay-kunye .paylas a {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--metin-soluk, #97a0ae);
  border: 1px solid rgba(255,255,255,.16);
}
.detay-kunye .paylas a:hover { color: #1b1405; background: var(--altin, #c9a227); border-color: var(--altin, #c9a227); }

.detay-gorsel { max-width: 900px; margin: 24px auto; }
.detay-gorsel img { width: 100%; border-radius: 3px; }

.detay-govde {
  max-width: 780px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.82;
  color: #d6dbe3;
}
.detay-govde p { margin: 0 0 18px; }
.detay-govde img { width: 100%; margin: 22px 0; border-radius: 3px; }
.detay-govde a { color: var(--altin, #c9a227); }
.detay-govde h2, .detay-govde h3 {
  margin: 30px 0 12px;
  font-family: var(--yazi-baslik, Georgia, serif);
  color: #fff;
}

.detay-yan { max-width: 900px; margin: 10px auto 44px; }
.yan-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.yan-oge { display: block; text-decoration: none; }
.yan-oge .gorsel { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 3px; }
.yan-oge .gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.yan-oge:hover .gorsel img { transform: scale(1.04); }
.yan-oge h3 { margin: 9px 0 4px; font-size: 13.5px; line-height: 1.42; color: #e7eaf0; font-weight: 600; }
.yan-oge .tarih { font-size: 11.5px; color: var(--metin-soluk, #8b93a1); }

/* --- Video --- */
.video-kart .gorsel { position: relative; }
.video-kart .oynat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  background: rgba(0,0,0,.28);
  transition: background .25s ease;
}
.video-kart .oynat i {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding-left: 3px;
  border-radius: 50%;
  background: rgba(201,162,39,.9);
  color: #1b1405;
}
.video-kart:hover .oynat { background: rgba(0,0,0,.12); }

/* --- Foto galeri --- */
.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
.galeri-oge {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4 / 3;
}
.galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.galeri-oge:hover img { transform: scale(1.05); }
.galeri-yazi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.82));
}
.galeri-ikon {
  position: absolute;
  top: 10px; right: 10px;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  font-size: 12px;
  border-radius: 3px;
  color: #1b1405;
  background: rgba(201,162,39,.92);
}

/* --- Iletisim --- */
.iletisim-duzen {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  margin-bottom: 44px;
}
.iletisim-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: #0f141b;
  border: 1px solid rgba(201,162,39,.24);
  border-radius: 3px;
}
.iletisim-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--metin-soluk, #97a0ae);
}
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iletisim-form input,
.iletisim-form textarea {
  padding: 10px 12px;
  font: 400 14px/1.5 inherit;
  color: #fff;
  background: #0a0e14;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
}
.iletisim-form input:focus,
.iletisim-form textarea:focus { outline: none; border-color: var(--altin, #c9a227); }
.iletisim-form button {
  align-self: flex-start;
  padding: 10px 26px;
  font: 600 13px/1.5 inherit;
  cursor: pointer;
  color: #1b1405;
  background: var(--altin, #c9a227);
  border: 0;
  border-radius: 3px;
}
.iletisim-form button:hover { filter: brightness(1.08); }
.form-not { margin: 0; font-size: 11.5px; color: var(--metin-soluk, #79808d); }

.iletisim-bilgi { display: grid; gap: 14px; align-content: start; }
.bilgi-kutu {
  padding: 18px;
  background: #0f141b;
  border-left: 2px solid var(--altin, #c9a227);
  border-radius: 3px;
}
.bilgi-kutu h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--altin, #e5c458);
}
.bilgi-kutu p { margin: 0; font-size: 14px; line-height: 1.7; color: #cdd3dc; }
.bilgi-kutu a { color: #cdd3dc; }
.bilgi-kutu a:hover { color: var(--altin, #e5c458); }
.bilgi-kutu .sosyal { display: flex; gap: 10px; }

/* --- Duz metin sayfasi (Hakkimizda vb.) --- */
.metin-sayfa {
  max-width: 760px;
  margin: 0 auto 48px;
  font-size: 16px;
  line-height: 1.85;
  color: #d2d8e1;
}
.metin-sayfa .giris { font-size: 19px; line-height: 1.65; color: #fff; font-family: var(--yazi-baslik, Georgia, serif); }
.metin-sayfa h2 {
  margin: 34px 0 12px;
  font-family: var(--yazi-baslik, Georgia, serif);
  font-size: 22px;
  color: #fff;
}
.metin-sayfa ul { margin: 0 0 18px; padding-left: 20px; }
.metin-sayfa li { margin-bottom: 7px; }
.metin-sayfa a { color: var(--altin, #c9a227); }
.metin-sayfa blockquote {
  margin: 26px 0;
  padding: 14px 20px;
  font-family: var(--yazi-baslik, Georgia, serif);
  font-style: italic;
  font-size: 19px;
  color: #f0e3bd;
  border-left: 2px solid var(--altin, #c9a227);
  background: rgba(201,162,39,.06);
}

@media (max-width: 1080px) {
  .yan-liste { grid-template-columns: repeat(2, 1fr); }
  .galeri-izgara { grid-template-columns: repeat(2, 1fr); }
  .iletisim-duzen { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .vitrin-kart { grid-template-columns: 1fr; }
  .sayfa-basligi h1 { font-size: 24px; }
  .detay-basi h1 { font-size: 27px; }
  .detay-govde { font-size: 15.5px; }
  .alan-ikili { grid-template-columns: 1fr; }
  .galeri-izgara { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Dinamik sitede eklenen parcalar: arama, bos liste uyarisi
---------------------------------------------------------------- */
.arama-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.arama-form input {
  flex: 1;
  max-width: 460px;
  padding: 11px 14px;
  font: 400 14px/1.5 inherit;
  color: #fff;
  background: #0a0e14;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
}
.arama-form input:focus { outline: none; border-color: var(--altin, #c9a227); }
.arama-form button {
  padding: 11px 26px;
  font: 600 13px/1.5 inherit;
  cursor: pointer;
  color: #1b1405;
  background: var(--altin, #c9a227);
  border: 0;
  border-radius: 3px;
}
.arama-form button:hover { filter: brightness(1.08); }

.sonuc-sayisi {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--metin-soluk, #8b93a1);
}

.bos-uyari {
  margin: 30px 0 44px;
  padding: 26px;
  text-align: center;
  font-size: 15px;
  color: var(--metin-soluk, #97a0ae);
  background: #0f141b;
  border: 1px dashed rgba(201,162,39,.35);
  border-radius: 3px;
}

/* Haber detay kunyesindeki ek alanlar */
.detay-kunye .yazar { color: var(--altin, #e5c458); font-weight: 600; }
.detay-kunye .kaynak,
.detay-kunye .okunma { color: var(--metin-soluk, #8b93a1); }

/* Arsiv yedegi eksik oldugunda konan yer tutucu */
img.gorsel-yok { object-fit: contain; background: #131922; }

/* Sayfalamadaki atlama isareti */
.sayfalama .bosluk {
  min-width: auto;
  border: 0;
  color: var(--metin-soluk, #6d7684);
}

/* ---------------------------------------------------------------
   Menu ortalama
   Menuyu bandin tam ortasina almak icin sag taraftaki dil secimi ve
   arama dugmesi akistan cikariliyor; yoksa onlarin genisligi kadar
   menu sola kayiyor.
---------------------------------------------------------------- */
.ana-menu .kapsayici {
  position: relative;
  justify-content: center;
}
.ana-menu ul {
  margin: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.menu-sag {
  position: absolute;
  right: var(--bosluk, 16px);
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

@media (max-width: 760px) {
  /* Dar ekranda menu zaten sariyor; sag grup akista kalsin */
  .ana-menu .kapsayici { flex-direction: column; gap: 8px; }
  .menu-sag { position: static; transform: none; }
}

/* ---------------------------------------------------------------
   Alt bilgideki yapimci imzasi
   Slogan ile ayni serif yazi tipi; altin renk ve yaziyi saran
   yumusak sari isik. Isik nefes alir gibi hafifce guclenip zayifliyor.
---------------------------------------------------------------- */
.alt-kunye .yapimci {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--yazi-baslik);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .2px;
  text-decoration: none;
  color: #e8c765;
  text-shadow:
    0 0 6px rgba(240, 200, 90, .55),
    0 0 14px rgba(214, 168, 40, .35);
  animation: yapimci-parilti 3.4s ease-in-out infinite;
  transition: color .25s ease;
}

.alt-kunye .yapimci:hover {
  color: #fbe49b;
  text-shadow:
    0 0 8px rgba(250, 222, 140, .85),
    0 0 20px rgba(230, 186, 60, .6);
  animation-play-state: paused;
}

.alt-kunye .yapimci .hilal {
  width: 13px;
  height: 13px;
  flex: none;
  fill: #e8c765;
  filter: drop-shadow(0 0 4px rgba(240, 200, 90, .7));
}

@keyframes yapimci-parilti {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(240, 200, 90, .45),
      0 0 14px rgba(214, 168, 40, .25);
  }
  50% {
    text-shadow:
      0 0 9px rgba(248, 214, 120, .8),
      0 0 22px rgba(226, 180, 55, .5);
  }
}

/* Hareketi azaltilmis tercihinde isik sabit kalsin */
@media (prefers-reduced-motion: reduce) {
  .alt-kunye .yapimci { animation: none; }
}

@media (max-width: 760px) {
  .alt-kunye .yapimci { margin-top: 6px; }
}

/* ---------------------------------------------------------------
   Tekli yazi sayfasinda yan sutun
   Sol: haber govdesi, sag: reklam + piyasa + hava + listeler
---------------------------------------------------------------- */
.icerik-satir { align-items: start; }

/* Yan sutun varken yazi ortalanmiyor, sutunu doldurup sola yaslaniyor */
.icerik-satir .detay-basi,
.icerik-satir .detay-govde,
.icerik-satir .detay-gorsel {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.icerik-satir .detay-basi { text-align: left; }
.icerik-satir .detay-kunye { justify-content: flex-start; }
.icerik-satir .detay-basi h1 { font-size: 32px; }

.yan-sutun {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
}

/* Yan sutundaki kutular ortak govde */
.yan-kutu {
  padding: 14px 16px 16px;
  background: #0f141b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
}
.yan-kutu .bolum-baslik { margin-bottom: 10px; }
.yan-kutu .bolum-baslik h2 { font-size: 16px; }
.yan-kutu .sirali-liste,
.yan-kutu .deprem-liste { margin: 0; }

/* Reklam alani: panelden eklenen banner */
.tanitim-alan {
  position: relative;
  line-height: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #0f141b;
}
.tanitim-alan img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.tanitim-alan .tanitim-etiket {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.55);
}

/* Yan sutunda piyasa/hava/whatsapp kutulari tam genislik */
.yan-sutun .piyasa-kutu,
.yan-sutun .weather-box,
.yan-sutun .whatsapp-box { width: 100%; }

@media (max-width: 1080px) {
  /* Tek sutuna dusunce yapiskanlik anlamsiz */
  .yan-sutun { position: static; }
  .icerik-satir .detay-basi { text-align: center; }
  .icerik-satir .detay-kunye { justify-content: center; }
}

/* ---------------------------------------------------------------
   Liste sayfalarinda yan sutun
   Ana sutun daraldi: 4'lu izgaralar 3'e, galeri 3'ten 2'ye iniyor.
---------------------------------------------------------------- */
.icerik-satir > .ana-sutun { min-width: 0; }

.icerik-satir .izgara-4 { grid-template-columns: repeat(3, 1fr); }
.icerik-satir .izgara-6 { grid-template-columns: repeat(4, 1fr); }
.icerik-satir .galeri-izgara { grid-template-columns: repeat(2, 1fr); }

/* Kategori vitrini dar sutunda da dengeli dursun */
.icerik-satir .vitrin-kart { grid-template-columns: 1fr 1fr; }
.icerik-satir .vitrin-govde { padding: 20px; }
.icerik-satir .vitrin-govde h2 { font-size: 21px; }

@media (max-width: 1240px) {
  .icerik-satir .izgara-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  /* Tek sutuna dusunce izgaralar eski genisligine donuyor */
  .icerik-satir .izgara-4 { grid-template-columns: repeat(3, 1fr); }
  .icerik-satir .galeri-izgara { grid-template-columns: repeat(2, 1fr); }
  .icerik-satir .vitrin-kart { grid-template-columns: 1.25fr 1fr; }
}

@media (max-width: 760px) {
  .icerik-satir .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .icerik-satir .galeri-izgara { grid-template-columns: 1fr; }
  .icerik-satir .vitrin-kart { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Gomulu video oynatici
   Haber sayfasinda görselin yerini alır; oran korunarak ölçekleniyor.
---------------------------------------------------------------- */
.video-cerceve {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 24px auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: #000;
}
.video-cerceve iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Yan sütun varken sayfa genişliğini aşmasın */
.icerik-satir .video-cerceve { max-width: none; margin-left: 0; margin-right: 0; }

/* Haber gövdesinin içine gömülen video */
.detay-govde .video-cerceve { margin: 22px 0; }

/* ---------------------------------------------------------------
   Makine cevirisi gostergeleri
---------------------------------------------------------------- */

/* Ceviri beklenirken metin hafifce soluyor: kullanici bir sey
   oldugunu gorsun ama sayfa ziplamasin */
.ceviri-bekliyor {
  opacity: .45;
  transition: opacity .25s ease;
}

.ceviri-notu {
  margin: 14px 0 18px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #cbd2dc;
  background: rgba(201, 162, 39, .10);
  border-left: 3px solid var(--altin, #c9a227);
  border-radius: 3px;
}
.ceviri-notu b { color: var(--altin-acik, #e5c458); }

/* ---------------------------------------------------------------
   Sehir secici
   IP ile bulunan sehir her zaman dogru olmuyor (operatorun cikis
   noktasi baska ilde olabiliyor), ziyaretci sehri kendi secebiliyor.
---------------------------------------------------------------- */

.sehir-secilebilir {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.sehir-secilebilir:hover { color: var(--altin, #c9a227); }

.sehir-listesi {
  position: absolute;
  z-index: 60;
  margin-top: 6px;
  min-width: 150px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: #14181f;
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.sehir-listesi button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  font-size: 13px;
  color: #e7ebf1;
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.sehir-listesi button:hover { background: rgba(201, 162, 39, .16); }
.sehir-listesi button.etkin { color: var(--altin, #c9a227); font-weight: 700; }