@charset "utf-8";
/* ============================================
   HABER318 MODERN THEME
   ============================================ */

/* --- CSS Variables --- */
:root {
  --primary: #dc0000;
  --primary-dark: #b30000;
  --primary-light: #ff2020;
  --dark: #1b1b2f;
  --dark-light: #2d2d44;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --white: #ffffff;
  --font: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --max-width: 1200px;
  --transition: all 0.2s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gray-800); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; }
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }
.clearfloat { clear: both; display: block; }

/* --- Layout Container --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* --- Top Bar --- */
#header { background: var(--white); position: relative; }
div#header div#panel {
  background: var(--dark);
  width: 100%;
  height: auto;
  padding: 6px 16px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div#header div#panel ul#uye,
div#header ul#topLink {
  position: static;
  display: flex;
  align-items: center;
  gap: 0;
}
ul#topLink li, ul#uye li {
  float: none;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
ul#topLink li a, ul#uye li a {
  font-size: 12px;
  padding: 0 12px;
  color: rgba(255,255,255,0.8);
  border-right: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  transition: var(--transition);
}
ul#topLink li a:hover, ul#uye li a:hover {
  color: #fff;
}
ul#topLink li:last-child a, ul#uye li:last-child a {
  border: 0;
}
ul#topLink li a i, ul#uye li a i { margin-right: 4px; }

/* --- Logo Area --- */
.logo {
  width: 100%;
  height: auto;
  float: none;
  padding: 0;
  text-align: center;
  background: var(--white);
}
.logo a { display: block; }
.logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Header Info Bar (Date + Social + Currency in one row) --- */
.header-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  gap: 16px;
}

/* --- Date & Social --- */
.saat {
  width: auto;
  float: none;
  font-size: 13px;
  margin: 0;
  padding: 0;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#TarihSaat {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 13px;
  white-space: nowrap;
}
.sosyal {
  width: auto;
  height: auto;
  font-size: 12px;
  margin: 0;
  color: var(--gray-600);
  display: flex;
  gap: 8px;
}
.sosyal a {
  color: var(--gray-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  font-size: 12px;
  font-weight: 500;
  transition: var(--transition);
}
.sosyal a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.sosyal img { width: 16px; height: 16px; vertical-align: middle; }

/* --- Currency Widget --- */
.doviz {
  float: none;
  width: auto;
  height: auto;
  background: var(--white);
  margin: 0;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: none;
  flex-shrink: 0;
}
.doviz ul {
  width: auto;
  height: auto;
  display: flex;
  justify-content: flex-end;
  gap: 0;
}
.doviz ul li {
  list-style: none;
  float: none;
  width: auto;
  height: auto;
  color: var(--gray-700);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 8px 14px;
  border-right: 1px solid var(--gray-100);
  text-align: center;
  border-radius: 0;
  gap: 6px;
}
.doviz ul li:last-child { border-right: 0; }
.kur {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.kurdegisim { margin: 0; display: flex; align-items: center; }
.kurdegisim img { width: 20px; height: 14px; }
.kurfark {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font);
}

/* --- Header Ad --- */
.ustreklam {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  max-height: 90px;
  text-align: center;
  padding: 8px 0;
}
.ustreklamic {
  background: transparent;
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
}
.reklamlogoyan {
  float: none;
  margin: 8px auto;
  width: 100%;
  max-width: 468px;
  height: auto;
  text-align: center;
  overflow: hidden;
}

/* --- Main Navigation --- */
.menu {
  width: 100%;
  height: auto;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 8px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.menu ul { display: flex; align-items: center; }
.menu ul li {
  float: none;
  margin: 0;
  list-style: none;
}
.menu ul li a {
  padding: 12px 18px;
  background: transparent;
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  text-shadow: none;
  text-decoration: none;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}
.menu ul li a:hover {
  color: var(--primary);
  background: var(--gray-50);
  border-bottom-color: var(--primary);
}
.menu ul li a i { margin-right: 4px; }

/* --- Search --- */
.arama {
  float: none;
  width: auto;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
}
.arama form { display: flex; align-items: center; }
.arama input.text {
  width: 180px;
  padding: 8px 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: var(--transition);
  margin: 0;
}
.arama input.text:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(220,0,0,0.1);
}
.arama button.submit {
  cursor: pointer;
  height: 36px;
  width: 40px;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  transition: var(--transition);
}
.arama button.submit:hover { background: var(--primary-dark); }

/* --- Category Navigation (Red Bar) --- */
.menubg {
  width: 100%;
  margin-top: 0;
  background: var(--primary);
}
.menubg ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 2px 8px rgba(220,0,0,0.3);
  padding: 0 8px;
}
.menubg ul li {
  list-style: none;
  float: none;
}
.menubg ul li a {
  padding: 11px 18px;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  border-right: 1px solid rgba(255,255,255,0.15);
  transition: var(--transition);
}
.menubg ul li a:hover {
  background: rgba(0,0,0,0.15);
  color: #fff;
}
.menubg ul li:last-child a { border-right: 0; }

/* --- Breaking News (Son Dakika) --- */
#SonHaber {
  width: 100%;
  margin: 16px auto;
  padding: 0 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
#SonHaber div.manset {
  overflow: hidden;
  position: relative;
  width: 220px;
  min-width: 220px;
  float: none;
  margin: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
#SonHaber div.manset:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
#SonHaber div.manset img {
  cursor: pointer;
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
}
#SonHaber div.manset span.spot {
  display: none;
  overflow: hidden;
  line-height: 20px;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#SonHaber div.manset:hover span.spot,
#SonHaber div.manset span.spot.active {
  opacity: 1;
}
#SonHaber div.manset a {
  color: #fff;
  text-decoration: none;
}
#SonHaber div.manset a span.baslik {
  display: block;
  color: var(--gray-800);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  padding: 10px;
  height: 56px;
  overflow: hidden;
  text-align: left;
  width: 100%;
  margin: 0;
  background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
#main-row {
  display: flex;
  gap: 20px;
  padding: 16px;
}

/* --- Sidebar --- */
.sidebar1 {
  float: none;
  width: 320px;
  min-width: 320px;
  background-color: var(--white);
  margin: 0;
  order: 2;
}
.sidebar1 div.modul {
  width: 100%;
  padding: 0 0 16px;
  margin-bottom: 16px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.sidebar1 div.modul div.mHead {
  position: relative;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  text-shadow: none;
  background: var(--gray-50);
  border: none;
  border-bottom: 2px solid var(--primary);
  box-sizing: border-box;
  filter: none;
}
.sidebar1 div.modul div.mBody {
  position: relative;
  width: 100%;
  padding: 8px 0;
  border: none;
  box-sizing: border-box;
}
.sidebar1 div.modul div.mHead span.linkler {
  position: absolute;
  top: 13px;
  right: 12px;
}
.sidebar1 div.modul div.mHead span.linkler a {
  font-size: 12px;
  color: var(--gray-500);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.sidebar1 div.modul div.mHead span.linkler a:hover,
.sidebar1 div.modul div.mHead span.linkler a.aktif {
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
}
.sidebar1 div.modul div.mHead span.yazarlarTum {
  position: absolute;
  top: 13px;
  right: 50px;
}
.sidebar1 div.modul div.mHead span.yazarlarTum a {
  font-size: 12px;
  color: var(--primary);
}
.sidebar1 div.modul div.mHead span.yazarPrev,
.sidebar1 div.modul div.mHead span.yazarNext {
  cursor: pointer;
}

/* --- Sidebar News List --- */
ul.sagHaber {
  width: 100%;
  margin: 0;
}
ul.sagHaber li {
  margin: 0;
  border-top: none;
  border-bottom: 1px solid var(--gray-100);
  overflow: hidden;
  transition: var(--transition);
}
ul.sagHaber li:last-child { border-bottom: 0; }
ul.sagHaber li:hover { background: var(--gray-50); }
ul.sagHaber li .haber.pasif { display: none; }
ul.sagHaber li .haber a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  transition: var(--transition);
}
ul.sagHaber li .haber a:hover { color: var(--primary); }
ul.sagHaber li .haberEx {
  margin: 0;
  display: none;
  background: var(--gray-50);
  height: auto;
  min-height: 66px;
  padding: 8px;
  overflow: hidden;
}
ul.sagHaber li .haberEx.aktif { display: block; }
ul.sagHaber li .haberEx img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  float: left;
  margin-right: 10px;
  border-radius: var(--radius-sm);
}
ul.sagHaber li .haberEx div.yazi {
  float: left;
  width: calc(100% - 96px);
  height: auto;
  margin: 0;
}
ul.sagHaber li .haberEx div.yazi a {
  color: var(--gray-800);
  text-decoration: none;
}
ul.sagHaber li .haberEx div.yazi div.baslik {
  height: auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
ul.sagHaber li .haberEx div.yazi div.baslik h2 {
  margin: 0;
  font-size: 13px;
}
ul.sagHaber li .haberEx div.yazi div.icerik {
  font-size: 12px;
  margin: 4px 0 0;
  line-height: 16px;
  color: var(--gray-600);
}

/* --- Sidebar Haber Liste (En Çok Okunanlar vb.) --- */
ul.haberListe { padding: 0; }
ul.haberListe li {
  border-bottom: 1px solid var(--gray-100);
  padding: 0;
}
ul.haberListe li:last-child { border: 0; }
ul.haberListe li a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--gray-700);
  text-decoration: none;
  transition: var(--transition);
  line-height: 1.5;
}
ul.haberListe li a:hover {
  background: var(--gray-50);
  color: var(--primary);
  padding-left: 20px;
}

/* --- Sidebar Authors --- */
#yazarListe { position: relative; overflow: hidden; }
#yazarlar li {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
}
#yazarlar li img {
  width: 50px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
#yazarlar li div.ic { flex: 1; }
#yazarlar li span.yazarAd {
  display: block;
  font-weight: 700;
  font-size: 13px;
}
#yazarlar li span.yazarAd a { color: var(--gray-800); }
#yazarlar li span.makale {
  display: block;
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 2px;
}
#yazarlar li span.makale a { color: var(--gray-600); }
#yazarlar li span.tarih {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* --- Namaz Vakitleri --- */
#namaz {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0;
}
#namaz th {
  background: #478921;
  color: #fff;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
#namaz td {
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  color: var(--gray-800);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.content {
  flex: 1;
  min-width: 0;
  background-color: var(--white);
  margin: 0;
  width: auto;
  float: none;
  order: 1;
}

/* --- Manset Slider --- */
#mansetler {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: auto;
}
#manset {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  float: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
#manset #mansetResim {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
#manset img {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: var(--gray-200);
}
#manset img.aktif { display: block; }
#manset a#link {
  color: #fff;
  text-decoration: none;
}
#manset div.mansetSpot {
  display: none;
  z-index: 3;
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  padding: 0 16px;
  color: #fff;
}
#manset div.mansetSpot div.baslik {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0;
  background: rgba(0,0,0,0.65);
  padding: 14px 18px;
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
#manset div.mansetSpot div.kategori {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 8px;
  background: var(--primary);
  padding: 4px 14px;
  width: auto;
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#manset ul#mansetNum {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 5;
  width: 100%;
}
#manset ul#mansetNum li {
  flex: 1;
  height: auto;
  float: none;
  margin: 0;
  list-style: none;
}
#manset ul#mansetNum li a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 10px 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-600);
  background: rgba(255,255,255,0.95);
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  border-right: 1px solid var(--gray-200);
  transition: var(--transition);
  filter: none;
}
#manset ul#mansetNum li:last-child a { border-right: 0; }
#manset ul#mansetNum li a:hover,
#manset ul#mansetNum li a.aktif {
  background: var(--primary);
  color: #fff;
  text-shadow: none;
}
#manset ul#mansetNum li span { display: none; }
#manset a.tum {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 6;
  width: auto;
  height: auto;
  padding: 10px 16px;
  color: var(--gray-800);
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,0.95);
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  transition: var(--transition);
}
#manset a.tum:hover { background: var(--primary); color: #fff; }

/* --- Icerik manset (kategori sayfası) --- */
div#icerik div#manset { margin: 0 0 16px; height: auto; }
div#icerik div#manset img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
div#icerik div#manset div.mansetSpot { bottom: 50px; width: calc(100% - 32px); }
div#icerik div#manset div.mansetSpot div.baslik { font-size: 18px; padding: 10px 14px; }
div#icerik div#manset ul#mansetNum { width: 100%; }
div#icerik div#manset ul#mansetNum li { flex: 1; }
div#icerik div#manset ul#mansetNum li a {
  width: 100%; height: auto; padding: 10px 0;
  font-weight: 700; background: rgba(255,255,255,0.95);
  color: var(--gray-600); text-shadow: none; text-align: center;
}
div#icerik div#manset ul#mansetNum li a:hover,
div#icerik div#manset ul#mansetNum li a.aktif {
  background: var(--primary); color: #fff;
}

/* --- News Cards --- */
div.haberler {
  width: 100%;
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
div.haberler div.haber {
  position: relative;
  width: calc(33.333% - 11px);
  background: var(--white);
  height: auto;
  margin: 0;
  float: none;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}
div.haberler div.haber:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--gray-300);
}
div.haberler div.haber a {
  color: var(--gray-800);
  text-decoration: none;
}
div.haberler div.haber a:hover { color: var(--primary); }
div.haberler div.haber img {
  padding: 0;
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
div.haberler div.haber span.baslik {
  display: block;
  margin: 0;
  padding: 12px 12px 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
div.haberler div.haber span.baslik h1 { font-size: 14px; }
div.haberler div.haber span.icerik {
  display: block;
  margin: 0;
  padding: 0 12px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-600);
}
div.haberler div.haber a.kategori {
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 8px;
  left: auto;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
div.haberler div.haber span.tarih {
  display: block;
  padding: 0 12px 10px;
  font-size: 11px;
  color: var(--gray-400);
}

/* --- Featured News (haber2) --- */
div.haberler div.haber2 {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 140px;
  border-bottom: none;
  background: var(--white);
  padding: 0;
  margin: 0;
  float: none;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: stretch;
  transition: var(--transition);
}
div.haberler div.haber2:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
div.haberler div.haber2 a {
  color: var(--gray-800);
  text-decoration: none;
  display: flex;
  align-items: flex-start;
}
div.haberler div.haber2 a:hover { color: var(--primary); }
div.haberler div.haber2 img {
  padding: 0;
  width: 240px;
  min-width: 240px;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  float: none;
  border-radius: var(--radius) 0 0 var(--radius);
}
div.haberler div.haber2 span.baslik {
  float: none;
  display: block;
  width: auto;
  margin: 0;
  padding: 16px 16px 4px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
}
div.haberler div.haber2 span.baslik h1 { font-size: 18px; }
div.haberler div.haber2 span.icerik {
  float: none;
  display: block;
  width: auto;
  margin: 0;
  padding: 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-600);
}
div.haberler div.haber2 a.kategori {
  position: absolute;
  display: inline-block;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
}
div.haberler div.haber2 span.tarih {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 11px;
  color: var(--gray-400);
}
div.haberler div.haber2 span.yorum {
  position: absolute;
  bottom: 12px;
  left: 260px;
  font-size: 11px;
  color: var(--gray-600);
}

/* --- Video Gallery --- */
#videoGaleri {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: var(--dark);
  margin: 16px 0;
  padding: 0 0 16px;
  border-radius: var(--radius);
}
#videoGaleri h2 {
  font-size: 18px;
  color: #fff;
  padding: 16px;
  font-weight: 700;
}
#videoGaleri a.tum {
  position: absolute;
  top: 17px;
  right: 70px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-decoration: none;
}
#videoGaleri a.tum:hover { color: #fff; }
#videoGaleri a.videoPrev,
#videoGaleri a.videoNext {
  position: absolute;
  top: 18px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
#videoGaleri a.videoPrev { right: 40px; }
#videoGaleri a.videoNext { right: 16px; }
#videoGaleri a.videoPrev:hover,
#videoGaleri a.videoNext:hover { color: #fff; }
#videoGaleri ul { margin: 0 16px; display: flex; gap: 12px; }
#videoGaleri ul li {
  position: relative;
  float: none;
  margin: 0;
  width: 200px;
  min-width: 200px;
}
#videoGaleri ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
#videoGaleri ul li img.resim {
  width: 100%;
  height: 120px;
  object-fit: cover;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
#videoGaleri ul li:hover img.resim { border-color: var(--primary); }
#videoGaleri ul li span.baslik {
  display: none;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  padding: 10px;
  background: rgba(0,0,0,0.7);
  text-align: center;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
}
#videoGaleri ul li span.baslik2 {
  display: block;
  height: auto;
  max-height: 40px;
  overflow: hidden;
  font-size: 13px;
  margin: 8px 0 0;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
}
#videoGaleri ul li span.play {
  display: block;
  position: absolute;
  top: auto;
  bottom: 55px;
  right: 8px;
  color: #fff;
  padding: 3px 8px;
  background: rgba(0,0,0,0.6);
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* --- Photo Gallery --- */
#fotoGaleri {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: var(--primary);
  margin: 16px 0;
  padding: 0 0 16px;
  border-radius: var(--radius);
}
#fotoGaleri h2 {
  font-size: 18px;
  color: #fff;
  padding: 16px;
  font-weight: 700;
}
#fotoGaleri a.tum {
  position: absolute;
  top: 17px;
  right: 70px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  text-decoration: none;
}
#fotoGaleri a.galeriPrev,
#fotoGaleri a.galeriNext {
  position: absolute;
  top: 18px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
#fotoGaleri a.galeriPrev { right: 40px; }
#fotoGaleri a.galeriNext { right: 16px; }
#fotoGaleri ul { margin: 0 16px; display: flex; gap: 12px; }
#fotoGaleri ul li {
  position: relative;
  float: none;
  margin: 0;
  width: 200px;
  min-width: 200px;
}
#fotoGaleri ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
#fotoGaleri ul li img.resim {
  width: 100%;
  height: 120px;
  object-fit: cover;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
#fotoGaleri ul li:hover img.resim { border-color: #fff; }
#fotoGaleri ul li span.baslik {
  display: none;
  z-index: 2;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 120px;
  padding: 10px;
  background: rgba(0,0,0,0.6);
  text-align: center;
  border-radius: var(--radius-sm);
}
#fotoGaleri ul li span.baslik2 {
  display: block;
  height: auto;
  max-height: 40px;
  overflow: hidden;
  font-size: 13px;
  margin: 8px 0 0;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
}
#fotoGaleri ul li span.play {
  display: block;
  position: absolute;
  bottom: 55px;
  right: 8px;
  color: #fff;
  padding: 3px 8px;
  background: rgba(0,0,0,0.5);
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* --- Category Tabs --- */
div.katTab {
  margin: 20px 0;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
div.katTab ul.kat {
  display: flex;
  flex-wrap: wrap;
}
div.katTab ul.kat li {
  cursor: pointer;
  display: inline-block;
  padding: 12px 20px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--gray-400);
  transition: var(--transition);
  flex: 1;
  text-align: center;
}
div.katTab ul.kat li.standart { background: var(--gray-300) !important; color: var(--gray-700); }
div.katTab ul.kat li.aktif { color: #fff; }
div.katTab div.tabs {
  padding: 16px;
  background: var(--white);
}
div.katTab div.tabs div.tab { display: none; }
div.katTab div.tabs div.tab.aktif { display: block; }
div.katHaber {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  gap: 16px;
}
div.katHaber div.sol {
  width: 55%;
}
div.katHaber div.sol img.haber {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: none;
}
div.katHaber div.sol img.haber.aktif { display: block; }
div.katHaber div.sol div.kisaIcerik {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-600);
}
div.katHaber div.sol div.kisaIcerik.aktif { display: block; }
div.katHaber div.sag {
  width: 45%;
}
div.katHaber div.sag ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
div.katHaber div.sag ul li:last-child { border: 0; }
div.katHaber div.sag ul li a {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
  transition: var(--transition);
}
div.katHaber div.sag ul li a:hover {
  color: var(--primary);
  padding-left: 4px;
}
a.tumKat {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* --- Reklam Areas --- */
.reklam { overflow: hidden; }
.reklam.blok {
  width: 100%;
  margin: 8px auto;
  max-height: 400px;
  text-align: center;
}
.reklam.full {
  width: 100%;
  margin: 12px 0;
  text-align: center;
}

/* ============================================
   DETAIL PAGE
   ============================================ */
div#icerik { padding: 0; }
div#icerik ul#crumbs {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 16px;
}
div#icerik ul#crumbs li span a {
  color: var(--gray-500);
  transition: var(--transition);
}
div#icerik ul#crumbs li span a:hover { color: var(--primary); }
div#icerik ul#crumbs li + li::before {
  content: "›";
  color: var(--gray-400);
  margin-right: 8px;
}
div.sayfaIc {
  padding: 0;
}
div.sayfaIc h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--gray-800);
}
div.kIcerik {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.content2 {
  padding: 0;
  margin: 0;
  width: 100%;
  float: none;
}
.content2 div.resim {
  margin-bottom: 16px;
}
.content2 div.resim img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.content2 div.ekstra {
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 16px;
}
.content2 div.ekstra div.info {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.content2 div.ekstra div.info span.hit { margin-right: 16px; }
.content2 div.ekstra div.info b { color: var(--primary); }
.content2 div.ekstra div.paylas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.content2 a.sosyal2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}
.content2 a.sosyal2.facebook { background: #1877f2; }
.content2 a.sosyal2.twitter { background: #1da1f2; }
.content2 a.sosyal2.google { background: #ea4335; }
.content2 a.sosyal2.yorum { background: var(--gray-700); }
.content2 a.sosyal2:hover { opacity: 0.85; transform: translateY(-1px); }
.content2 p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 16px;
  color: var(--gray-700);
}
.content2 .imga {
  padding: 0;
  width: 300px;
  float: left;
  margin: 0 16px 12px 0;
  border-radius: var(--radius);
}
div.yBoyut {
  float: right;
  display: flex;
  gap: 4px;
}
div.yBoyut span.font {
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
div.yBoyut span.font:hover { background: var(--gray-100); }
div.etiket {
  padding: 12px 0;
  font-size: 13px;
  color: var(--gray-600);
  border-top: 1px solid var(--gray-100);
  margin-top: 16px;
}
div.etiket acronym a {
  display: inline-block;
  padding: 3px 10px;
  margin: 3px;
  background: var(--gray-100);
  border-radius: 20px;
  font-size: 12px;
  color: var(--gray-700);
  transition: var(--transition);
}
div.etiket acronym a:hover { background: var(--primary); color: #fff; }

/* --- Comments --- */
div.alan {
  padding: 16px 0;
  margin-top: 16px;
}
div.alan h4 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: var(--radius);
  margin-bottom: 16px;
  border-left: 4px solid var(--primary);
}
#yorum { padding: 0; }
#yorumForm-kapsa {
  padding: 16px;
  background: var(--gray-50);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
#yorumForm-kapsa div.label {
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--gray-700);
}
#yorumForm-kapsa input[type="text"],
#yorumForm-kapsa textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  transition: var(--transition);
  background: var(--white);
}
#yorumForm-kapsa input[type="text"]:focus,
#yorumForm-kapsa textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,0,0,0.1);
}
#yorumForm-kapsa textarea { min-height: 100px; resize: vertical; }
#yorumForm-kapsa button.button {
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
#yorumForm-kapsa button.button:hover { background: var(--primary-dark); }

div.yorum_listesi {
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
}
div.yorum_listesi span.ad {
  font-weight: 700;
  color: var(--gray-800);
}
div.yorum_listesi span.tarih {
  font-size: 12px;
  color: var(--gray-400);
}

/* ============================================
   FOOTER
   ============================================ */
.footer { position: relative; clear: both; }
div#footer {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  height: auto;
  background: var(--dark);
  padding: 32px 24px 20px;
  margin: 0 auto;
}
div#footer img.logos {
  position: absolute;
  top: 24px;
  right: 24px;
  border-radius: var(--radius-sm);
  max-height: 50px;
  background: #fff;
  padding: 6px;
}
div#footer div.copy {
  color: rgba(255,255,255,0.6);
  margin: 0;
  font-size: 13px;
}
div#footer div.linkler {
  margin: 20px 0 0;
}
div#footer div.linkler ul { display: flex; flex-wrap: wrap; gap: 8px; }
div#footer div.linkler ul li {
  display: inline-block;
  padding: 0;
}
div#footer div.linkler ul li a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: var(--transition);
}
div#footer div.linkler ul li a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
div#footer div.yazi {
  margin: 20px 0 0;
  color: rgba(255,255,255,0.5);
  width: auto;
  max-width: 700px;
  line-height: 1.6;
  font-size: 13px;
}
div#footer div.yazi a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
div#footer div.yazi a:hover { color: #fff; }
div#footer ul.sosyale {
  position: absolute;
  top: auto;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 12px;
}
div#footer ul.sosyale li {
  display: inline-block;
  padding: 0;
  font-size: 24px;
}
div#footer ul.sosyale li a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: var(--transition);
}
div#footer ul.sosyale li a:hover { color: #fff; }

/* ============================================
   ALERT BOXES
   ============================================ */
.hata, .uyari, .tamam, .bilgi {
  position: relative;
  margin: 16px 0;
  padding: 16px 16px 16px 50px;
  border-radius: var(--radius);
  color: var(--gray-800);
  line-height: 1.5;
  font-size: 14px;
}
.hata { background: #fef2f2; border-left: 4px solid #ef4444; }
.uyari { background: #fffbeb; border-left: 4px solid #f59e0b; }
.tamam { background: #f0fdf4; border-left: 4px solid #22c55e; }
.bilgi { background: #eff6ff; border-left: 4px solid #3b82f6; }
.hata .x, .uyari .x, .tamam .x, .bilgi .x {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  opacity: 0.5;
}

/* ============================================
   PAGES
   ============================================ */
/* Sayfalar genel */
div.sayfaIc2 {
  padding: 16px;
}
/* İletişim */
form#iletisim input[type="text"],
form#iletisim textarea,
form#iletisim select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  margin-bottom: 8px;
  transition: var(--transition);
}
form#iletisim input:focus,
form#iletisim textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,0,0,0.1);
}
form#iletisim button, form#iletisim input[type="submit"] {
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- Galeriler --- */
ul.galeriListe li {
  position: relative;
  float: left;
  margin: 0 8px 8px 0;
}
ul.galeriListe li img {
  border-radius: var(--radius-sm);
}
ul.galeriListe li span.baslik {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .container { max-width: 100%; }
  #main-row {
    flex-direction: column;
    padding: 12px;
  }
  .sidebar1 {
    width: 100%;
    min-width: 100%;
    order: 2;
  }
  .content {
    width: 100%;
    order: 1;
  }
  div.haberler div.haber {
    width: calc(50% - 8px);
  }
  div.haberler div.haber2 img {
    width: 200px;
    min-width: 200px;
  }
  #SonHaber { flex-wrap: nowrap; overflow-x: auto; }
  #SonHaber div.manset { min-width: 180px; }
  div.katHaber { flex-direction: column; }
  div.katHaber div.sol, div.katHaber div.sag { width: 100%; }
}

@media (max-width: 768px) {
  div#header div#panel {
    flex-direction: column;
    height: auto;
    padding: 8px 12px;
    gap: 4px;
  }
  .menu {
    flex-wrap: wrap;
    position: static;
  }
  .menu ul { flex-wrap: wrap; }
  .menu ul li a { padding: 10px 12px; font-size: 13px; }
  .arama { width: 100%; margin-top: 4px; }
  .arama input.text { flex: 1; }
  .menubg ul { flex-wrap: wrap; }
  .menubg ul li a { padding: 8px 12px; font-size: 13px; }
  .header-info-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .saat { flex-direction: column; gap: 4px; }
  .sosyal { flex-wrap: wrap; }
  .doviz { width: 100%; }
  .doviz ul { flex-wrap: wrap; justify-content: center; }
  #manset div.mansetSpot div.baslik { font-size: 16px; }
  div.sayfaIc h2 { font-size: 20px; }
  div.haberler {
    gap: 12px;
  }
  div.haberler div.haber {
    width: 100%;
  }
  div.haberler div.haber2 {
    flex-direction: column;
  }
  div.haberler div.haber2 img {
    width: 100%;
    min-width: 100%;
    height: 200px;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  div.haberler div.haber2 span.yorum { left: 16px; }
  .content2 .imga { width: 100%; float: none; margin: 0 0 12px; }
  div#footer { padding: 24px 16px; }
  div#footer ul.sosyale { position: static; margin-top: 16px; }
  div#footer img.logos { position: static; margin-top: 16px; }
  div.katTab ul.kat li { padding: 10px 12px; font-size: 12px; }
}

@media (max-width: 480px) {
  .logo img { max-height: 60px; }
  .menu ul li a { padding: 8px 10px; font-size: 12px; }
  #manset ul#mansetNum li a { font-size: 11px; padding: 8px 0; }
  #manset div.mansetSpot div.baslik { font-size: 14px; padding: 8px 12px; }
  div.haberler div.haber img { height: 180px; }
  #videoGaleri ul li { min-width: 160px; }
  #fotoGaleri ul li { min-width: 160px; }
}

/* --- Tipsy tooltip override --- */
.tipsy { font-family: var(--font); font-size: 12px; }
.tipsy-inner { border-radius: var(--radius-sm); padding: 4px 10px; }

/* Puan durumu tabloları */
#puanDurumu table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#puanDurumu table th {
  background: var(--dark);
  color: #fff;
  padding: 8px 6px;
  font-size: 11px;
}
#puanDurumu table td {
  padding: 6px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 12px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }