@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
:root,
[data-theme=light] {
	--theme-bg: #f9f9f9;
	--theme-font-weight: 400;
	--theme-line-height: 1.5;
	--theme-color: #4c4c5c;
	--theme-font-size: 16px;
	--theme-font: "Poppins", sans-serif;
	--theme-white: #ffffff;
	--theme-danger: #dc3545;
	--theme-success: #198754;
	--theme-secondary: #6c757d;
	--theme-info: #0dcaf0;
	--theme-primary: #004B87;
	--theme-warning: #ffc107;
	--theme-dark: rgba(34, 37, 38, 1);
	--theme-light: #f8f9fa;
	--theme-border-color: #e7e9eb;
	--theme-border-radius: 0.3rem;
	--ratio: 1.1;
	--theme-primary-dark : #002D52;
}

/* =============================================
   1. KÖK (html) AYARLARI – REM HESAPLAMALARININ TEMELİ
   ============================================= */
html {
    /* Ana font büyüklüğü: Tüm rem hesaplamaları bu değeri baz alır */
    font-size: var(--theme-font-size);        /* Sizin değişkeniniz: 14px */

    /* Tarayıcının metni küçültmesini engelle (mobil yan çevirmede bile) */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Daha yumuşak iç link kaydırmaları (erişilebilirlik için) */
    scroll-behavior: smooth;

    /* Box model tutarlılığı – artık tüm elementler border-box kullanabilir */
    box-sizing: border-box;
}

/* =============================================
   2. BODY AYARLARI – MİRAS & TEMEL GÖRÜNÜM
   ============================================= */
body {
    /* Kısa sıfırlama */
    margin: 0;
    padding: 0;

    /* Arka plan – sizin değişkeninizden geliyor */
    background-color: var(--theme-bg);

    /* Font ailesi – değişkeninizde tanımlı */
    font-family: var(--theme-font);

    /* font-size burada YOK. html'den miras alır (14px). 
       Böylece body içindeki tüm yazılar başlangıçta 14px olur. */

    /* Kalınlık ve satır yüksekliği değişkenlerden */
    font-weight: var(--theme-font-weight);
    line-height: var(--theme-line-height);

    /* Metin rengi */
    color: var(--theme-color);

    /* macOS/iOS'ta daha net font render */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Daha okunaklı metin için hafif iyileştirme */
    text-rendering: optimizeLegibility;

    /* Ekranı tamamen dolduracak minimum yükseklik (footer'ı alta yapıştırmak için) */
    min-height: 100vh;
    min-height: 100dvh; /* Dinamik viewport height (mobil tarayıcı adres çubuğuyla uyumlu) */

    /* Taşan içeriği yatayda gizle (istenmeyen scroll'ları engeller) */
    overflow-x: hidden;
	
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "GRAD" 0;
}

a, img {
    -webkit-transition: all 0.2 ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
}
a {
    cursor: pointer;
    color: var(--theme-color);
    -webkit-transition-property: border, background, color;
    transition-property: border, background, color;
    -webkit-transition-duration: .05s;
    transition-duration: .05s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    background-color: transparent;
}
a:hover{
	color: var(--theme-primary);
}
::selection{
    background: var(--theme-primary);
    color: var(--theme-white);
}
/* Editör alanı ve Haber detay sayfası için */
blockquote {
    border-left: 5px solid #ee3124; /* Logonun kırmızısı veya koyu bir gri */
    background-color: #f9f9f9;
    padding: 15px 20px;
    margin: 20px 0;
    font-style: italic;
    position: relative;
}
.weather-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: white;
    mask-image: var(--icon-url);
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}
.weather-icon-lg {
    width: 60px;
    height: 60px;
}

.fivelex-gradient {
    overflow: hidden;
    background: linear-gradient(to top, #000000, #000000, #000000, rgba(34, 37, 38, .9), rgba(34, 37, 38, .6), rgba(34, 37, 38, 0));
    pointer-events: none;
    position: absolute;
    bottom: 0;
}
.manset-baslik {
    color: #ffffff;
    font-weight: 700;
	line-height: 1;
	letter-spacing: -1px;
	text-align: center;
    /* 0 yatay, 2px dikey, 5px yayılma ve %70 siyahlık */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
	font-variant: border-box;
    text-transform: uppercase;
}
.spot-metni {
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}


/* SLIDER CSS */
/* Fade modu için */
.manset-slider.fade-mode {
  display: block;         /* flex’i kapat */
  position: relative;
  width: 100%;
  height: 500px;          /* istediğin yükseklik */
}

.manset-slider.fade-mode .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*transition: opacity 0.6s ease;*/
  pointer-events: none;   /* pasif slidelar tıklanamaz */
}

.manset-slider.fade-mode .slide.active {
  opacity: 1;
  pointer-events: auto;
}
.manset-slider-container {
  width: 100%;
  max-width: 860px;
  position: relative;
  overflow: hidden;
}

.manset-slider {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
  touch-action: pan-y pinch-zoom; /* Dikey kaydırmaya izin ver, yatayı biz yöneteceğiz */
}



/* 3D Efektler için */
.manset-slider-container {
  perspective: 1200px; /* cube, coverflow, flip, cards için */
	overflow: hidden;
}

.slide {
  min-width: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.slide img {
  object-fit: cover;
  display: block;
  pointer-events: none; /* Tıklamayı slide div’ine bırak */
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}


/* OKLAR */
.slider-arrow-x {

  backdrop-filter: blur(8px);

  z-index: 10;
  transition: 0.3s;
}

.slider-arrow:hover {
  background: rgba(255,255,255,0.5);
}


/* BREAKING SLIDER */
.breaking-slider .slider-arrow{ background-color: var(--theme-danger); color: var(--theme-white); font-size: 12px; padding: 3px 7px;  top: 0; bottom: 0; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.breaking-slider .slider-arrow.prev{ right: 25px; }
.breaking-slider .slider-arrow.next{ right: 0; }




/* PROGRESS BAR */
.progress-bar-container {
	position: absolute;
	top: 0;
  width: 100%;
  height: 4px;
  z-index: 10;
	pointer-events: none;
	background-color: rgba(255,255,255,.5);
}

.progress-bar {
  height: 100%;
  background: var(--theme-primary);
  width: 0%;
  transition: width linear;
}

/* DOTLAR (NUMARALANDIRMA) */
/* --- DOT KONTEYNER (TÜM GENİŞLİK) --- */
.dots-container {
 	width: 100%;               /* slide genişliğine yay */
 	display: flex;
 	align-items: center;
 	justify-content: center;   /* numaraları ortala */
  	gap: 10px;
  	padding: 10px;           /* sağ-sol boşluk */
  	box-sizing: border-box;
	background-color: #000000;
}

/* --- NUMARALAR (SADE, EFEKTSİZ) --- */
.dot {
  flex-grow: 1;
  flex-basis: 0;
	height: 30px;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
	line-height: 1;
	background-color: rgba(255,255,255,0.1);
}

.dot.active {
  background: var(--theme-primary);
  color: #fff;
}

/* --- SAĞDAKİ LİNK --- */
.dots-container .all-news-link {
  color: #fff;
    padding: 5px 10px;
    font-size: 1rem;
    border-radius: 0.2rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--theme-dark);
  white-space: nowrap;
  transition: background 0.2s;
	text-align: center;
	
	height: 30px;
}

.dots-container .all-news-link:hover {
  background: var(--theme-primary);
  color: #fff;
}

@media (max-width: 768px) {
  .slide img {
    height: 300px;
  }
  .slide-content h2 {
    font-size: 1.4rem;
  }
  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
  }
}


/* Cube, flip, cards efektleri slide’ları absolute yapabilir */
.effect-cube .slide,
.effect-flip .slide,
.effect-cards .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.effect-cube .slide img,
.effect-flip .slide img,
.effect-cards .slide img {
  backface-visibility: hidden;
}

/* Coverflow ek gölgeler */
.effect-coverflow .slide::before,
.effect-coverflow .slide::after {
  content: '';
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 2;
}
.effect-coverflow .slide::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
}
.effect-coverflow .slide::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
}


.line__container {
    height: 8px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.video_news{
	position: relative;
	overflow: hidden;
}
.video_news::after{
	font-family: "Font Awesome 7 Free";
	font-size: 26px;
	content: "\f04b";
	position: absolute;
	top: 50%;
	left: 50%;
	color: rgba(255,255,255,1);
	transform: translate(-50%, -50%);
    background: rgba(227, 6, 19, 0.85);	
	font-weight: 900;
	z-index: 3;
	width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play_sm::after{
	font-size: 16px;
	width: 40px;
	height: 40px;
}

.video_news::before{
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
    @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }

.breaking-slider, .manset-slider-container { /* Senin sliderEl'inin parent'ı olan sınıf */
    width: 100%;           /* Bulunduğu alanı kaplamasını zorlar, limitsiz büyümesini engeller */
    max-width: 100vw;      /* Ekrandan taşmamasını garantiler */
    overflow: hidden;      /* İçerideki slaytların div'i patlatmasını önler */
    box-sizing: border-box;
}

.breaking-slider .slider { /* this.sliderEl (Örn: .slider-wrapper) */
    display: flex;
    box-sizing: border-box;
}

/* NAV MENÜ */
.nav-menu{}
.nav-menu ul{}
.nav-menu ul li{}
.nav-menu ul li a{ transition: color 0.2s; }
.nav-menu ul li a:hover, .nav-menu .active{ background-color: var(--theme-primary-dark); }

/* === BREADCRUMB: MODERN & HABERCİ === */
.breadcrumb-list {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.bc-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  color: #555;
}

.bc-item a {
  color: #e3000f;
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
}

.bc-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: #e3000f;
  transition: width 0.25s ease;
}

.bc-item a:hover {
  color: #b0000b;
}

.bc-item a:hover::after {
  width: 100%;
}

/* Ayraç */
.bc-item:not(:last-child)::after {
  content: "›";
  margin: 0 0.6rem;
  color: #aaa;
  font-size: 1.1rem;
  font-weight: 400;
}

/* Son öğe (aktif sayfa) – bağlantı değil */
.bc-item span[itemprop="name"]:only-child {
  color: #222;
  font-weight: 600;
}

.breadcrumb-list {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.breadcrumb-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.article-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.social-share--sticky {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    float: left;
    margin-left: -70px;
    margin-right: 0px;
    z-index: 5;
}
.share-btn {
  text-decoration: none;
  border: none;
  cursor: pointer;
	color: var(--theme-color);
}
.share-btn:hover {
	background-color: var(--theme-primary) !important;
	color: var(--theme-white);
}