/* ==========================================================================
   İnteryağ Petrol Ürünleri — 2026 Demo
   Garix (index-2) şablonu üzerine marka uyarlaması
   ========================================================================== */

:root {
  --theme-color: #e30613;
  --theme-color-rgb: 227, 6, 19;
  --sec-color: #ffd100;
  --sec-color-rgb: 255, 209, 0;
  --title-color: #0b1c33;
  --body-color: #5b6980;
  --smoke-color: #f4f6fa;
  --secondary-color: #eef2f8;
  --border-color: #e4e9f2;
  --iy-dark: #0b1c33;
  --iy-dark-2: #112544;
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Şablon başlıkları capitalize ediyor; Türkçe metinlerde "1993'Ten" gibi
   hatalı büyük harfe yol açtığı için kapatıyoruz. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.sec-title,
.widget_title,
.hero-title,
.counter-block__heading,
.service-block__title,
.blog-title,
.vs-btn {
  text-transform: none;
}

/* --- Hero ---------------------------------------------------------------- */
.hero-bg::before {
  background: linear-gradient(90deg, #06101f 30%, rgba(6, 16, 31, 0.35) 78%, rgba(6, 16, 31, 0.1) 100%);
  opacity: 0.94;
}

.hero-inner {
  position: relative;
  overflow: hidden;
  min-height: 760px;
}

@media (max-width: 991px) {
  .hero-inner {
    min-height: 600px;
  }
}

.hero-inner > .container {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 56px;
  line-height: 1.12;
  margin-bottom: 18px;
}

@media (max-width: 1399px) {
  .hero-title {
    font-size: 48px;
  }
}

@media (max-width: 1199px) {
  .hero-title {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 34px;
    line-height: 1.2;
  }
}

/* Hero üstü rozet */
.hero-rozet {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 209, 0, 0.55);
  border-left: 4px solid var(--sec-color);
  color: #fff;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 9px 20px;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}

.hero-rozet i {
  color: var(--sec-color);
}

@media (max-width: 575px) {
  .hero-rozet {
    font-size: 12px;
    letter-spacing: 0.6px;
    padding: 8px 14px;
    margin-bottom: 18px;
  }
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Hero sağdaki marka logosu — daha önce ürün ambalajı görselinin durduğu alan.
   Marka logoları koyu lacivert olduğu için hero fotoğrafının üzerinde açık
   renkli bir plaka üzerine yerleştiriliyor. */
.hero-logo {
  /* .hero-inner > .container position: relative olduğu için plaka container'a
     göre konumlanıyor. Mutlak konum container'ın padding kutusuna göre
     hesaplandığından, sütun içeriğiyle aynı hizaya gelmesi için container'ın
     yatay padding'i (.75rem) kadar içeri alınıyor.
     Slider oku sağda 30px boşluk + 50px genişlik kaplıyor; container'ın sağ
     kenarı oka yaklaştığında (ör. 1280 px altı) max() plakayı okun soluna
     kaydırıyor. (100vw - 100%) / 2 = container'ın sağındaki boşluk. */
  position: absolute;
  right: max(.75rem, calc(96px - (100vw - 100%) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  max-width: 340px;
  z-index: 1;
  pointer-events: none;
}

.hero-logo__plaka {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 4px solid var(--theme-color);
  padding: 34px 38px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
}

.hero-logo__plaka img {
  width: 100%;
  max-height: 96px;
  object-fit: contain;
}

.hero-logo__plaka img + img {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--border-color);
}

@media (max-width: 1399px) {
  .hero-logo {
    width: 26%;
    max-width: 280px;
  }

  .hero-logo__plaka {
    padding: 26px 28px;
  }
}

/* Metin sütunu bu genişliğin altında hero'nun tamamını kapladığı için
   logo plakası gizleniyor (ürün görselinde de aynı davranış vardı). */
@media (max-width: 1199px) {
  .hero-logo {
    display: none;
  }
}

/* --- Hero slider okları --------------------------------------------------- */
.hero--layout2 .slick-arrow {
  --pos-x: 30px;
  --icon-size: 50px;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white-color);
  backdrop-filter: blur(2px);
}

.hero--layout2 .slick-arrow:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: var(--white-color);
}

@media (max-width: 1199px) {
  .hero--layout2 .slick-arrow {
    --icon-size: 40px;
    --pos-x: 14px;
  }
}

/* --- Yetkili distribütör şeridi ------------------------------------------ */
.deger-serit {
  position: relative;
  margin-top: -70px;
  z-index: 3;
}

@media (max-width: 991px) {
  .deger-serit {
    margin-top: 0;
    padding-top: 60px;
  }
}

.deger-kart {
  background-color: #fff;
  box-shadow: 0 12px 40px rgba(11, 28, 51, 0.1);
  padding: 34px 28px;
  height: 100%;
  border-bottom: 4px solid transparent;
  transition: all 0.35s ease;
}

.deger-kart:hover {
  border-bottom-color: var(--theme-color);
  transform: translateY(-6px);
}

.deger-kart__ikon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sec-color);
  color: var(--title-color);
  font-size: 26px;
  margin-bottom: 22px;
}

.deger-kart__baslik {
  font-size: 22px;
  margin-bottom: 8px;
}

.deger-kart__metin {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 26px;
}

/* --- Marka kartları ------------------------------------------------------ */
.marka-kart {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--border-color);
  padding: 34px 30px 30px;
  height: 100%;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
}

.marka-kart:hover {
  box-shadow: 0 18px 45px rgba(11, 28, 51, 0.12);
  border-color: transparent;
  transform: translateY(-6px);
}

.marka-kart__logo {
  height: 86px;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.marka-kart__logo img {
  max-height: 78px;
  max-width: 190px;
  width: auto;
  object-fit: contain;
}

.marka-kart__baslik {
  font-size: 24px;
  margin-bottom: 12px;
}

.marka-kart__metin {
  font-size: 15px;
  line-height: 27px;
  margin-bottom: 18px;
}

.marka-kart__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.marka-kart__liste li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  margin-bottom: 7px;
  color: var(--body-color);
}

.marka-kart__liste li::before {
  content: "\f058";
  font-family: var(--icon-font);
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--theme-color);
  font-size: 14px;
}

.marka-kart__alt {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--border-color);
  padding-top: 18px;
}

.marka-kart__alt img {
  max-height: 34px;
  max-width: 110px;
  width: auto;
  opacity: 0.9;
}

/* Yanında açıklama/logo kalmadıysa "İncele" sağda hizalı kalsın */
.marka-kart__alt > .marka-kart__link:only-child {
  margin-left: auto;
}

.marka-kart__link {
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--title-color);
  white-space: nowrap;
}

.marka-kart__link i {
  margin-left: 8px;
  color: var(--theme-color);
  transition: transform 0.3s ease;
  display: inline-block;
}

.marka-kart__link:hover {
  color: var(--theme-color);
}

.marka-kart__link:hover i {
  transform: translateX(5px);
}

/* --- Kendi markalarımız (koyu zemin) ------------------------------------- */
.oz-marka {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 36px 32px;
  height: 100%;
  transition: all 0.35s ease;
}

.oz-marka:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 209, 0, 0.5);
  transform: translateY(-6px);
}

.oz-marka__logo {
  background-color: #fff;
  padding: 18px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  min-height: 88px;
  min-width: 210px;
}

.oz-marka__logo img {
  max-height: 52px;
  max-width: 190px;
  width: auto;
}

.oz-marka__baslik {
  color: #fff;
  font-size: 24px;
  margin-bottom: 6px;
}

.oz-marka__ust {
  display: block;
  color: var(--sec-color);
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.oz-marka__metin {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 27px;
  margin-bottom: 18px;
}

.oz-marka__liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oz-marka__liste li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin-bottom: 6px;
}

.oz-marka__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  background-color: var(--sec-color);
}

/* --- Dönüm noktaları (zaman çizelgesi) ----------------------------------- */
.zaman {
  position: relative;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.zaman::before {
  content: "";
  position: absolute;
  left: 92px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--theme-color), rgba(227, 6, 19, 0.15));
}

@media (max-width: 575px) {
  .zaman::before {
    left: 8px;
  }
}

.zaman__oge {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding-bottom: 26px;
}

.zaman__yil {
  flex: 0 0 76px;
  text-align: right;
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 22px;
  color: var(--title-color);
  line-height: 30px;
}

.zaman__nokta {
  position: absolute;
  left: 86px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid var(--theme-color);
}

.zaman__metin {
  padding-left: 20px;
  font-size: 16px;
  line-height: 30px;
  color: var(--body-color);
  margin: 0;
}

.zaman__oge--onemli .zaman__yil {
  color: var(--theme-color);
}

.zaman__oge--onemli .zaman__nokta {
  background-color: var(--theme-color);
  box-shadow: 0 0 0 5px rgba(227, 6, 19, 0.15);
}

.zaman__oge--onemli .zaman__metin {
  color: var(--title-color);
  font-weight: 500;
}

@media (max-width: 575px) {
  .zaman__oge {
    flex-direction: column;
    gap: 2px;
    padding-left: 32px;
  }

  .zaman__yil {
    text-align: left;
    flex: none;
  }

  .zaman__nokta {
    left: 2px;
  }

  .zaman__metin {
    padding-left: 0;
  }
}

/* --- Marka logo şeridi --------------------------------------------------- */
.brand-block {
  border-color: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 0 20px;
}

.brand-block img {
  max-height: 62px;
  max-width: 170px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.35s ease;
}

.brand-block:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* --- Header: beyaz zemin ------------------------------------------------- */
.header-bottom {
  background-color: var(--white-color);
  box-shadow: 0 1px 0 var(--border-color);
}

.header-layout1 .main-menu > ul > li > a {
  color: var(--title-color);
}

.header-layout1 .main-menu > ul > li > a:hover,
.header-layout1 .main-menu > ul > li.active > a {
  color: var(--theme-color);
}

.header-layout1 .menu-style1 > ul > li > a::before,
.header-layout1 .menu-style1 > ul > li.active > a::before {
  background-color: var(--theme-color);
}

.header-bottom .vs-icon.style3 {
  background-color: var(--smoke-color);
  color: var(--title-color);
}

.header-bottom .vs-btn.style2 {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.header-bottom .vs-btn.style2::before,
.header-bottom .vs-btn.style2::after {
  background-color: var(--title-color);
}

.header-bottom .vs-menu-toggle {
  background-color: var(--theme-color);
  color: var(--white-color);
}

/* --- Header / logo ------------------------------------------------------- */
.header-logo img,
.footer-logo img,
.mobile-logo img,
.preloader-inner img {
  width: 190px;
  height: auto;
}

.mobile-logo img,
.footer-logo img {
  width: 200px;
}

@media (max-width: 575px) {
  .header-logo img {
    width: 145px;
  }
}

.header-top .header-info_label {
  font-size: 14px;
}

.header-ust-linkler a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-family: var(--title-font);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 18px;
}

.header-ust-linkler a:hover {
  color: var(--sec-color);
}

/* --- Hakkımızda görsel bloğu --------------------------------------------- */
.about-logo img {
  width: 105px;
  height: auto;
}

.about-img .img1,
.about-img .img2 {
  width: 360px;
  height: 370px;
  object-fit: cover;
}

@media (max-width: 575px) {
  .about-img .img1,
  .about-img .img2 {
    width: 100%;
    height: auto;
  }

  .about-img .img2 {
    display: none;
  }
}

/* --- Teklif formu -------------------------------------------------------- */
.app-content .call-block {
  font-size: 26px;
}

.form-style1 .form-messages {
  color: var(--body-color);
}

.form-not {
  font-size: 13px;
  line-height: 22px;
  color: var(--body-color);
  margin: 10px 0 0;
}

/* --- Bayilik CTA --------------------------------------------------------- */
.bayilik-kutu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Şablonun tam kırmızı örtüsü yerine koyu, daha kurumsal bir örtü */
.bayilik-alan .overlay {
  background: linear-gradient(90deg, rgba(11, 28, 51, 0.95) 25%, rgba(11, 28, 51, 0.75) 100%);
  opacity: 1;
}

/* --- Footer: siyah zemin ------------------------------------------------- */
.footer--layout1 {
  background-color: #0a0a0c;
}

.footer--layout1 .overlay {
  display: none;
}

.copyright-wrap.style2 {
  background-color: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Widget başlıklarının altındaki kayan noktalı bar yerine düz çizgi */
.footer-widget .widget_title::before {
  width: 60px;
  height: 2px;
  border-radius: 0;
  background-color: var(--sec-color);
}

.footer-widget .widget_title::after {
  display: none;
}

.footer-sube {
  margin-bottom: 26px;
}

.footer-sube__baslik {
  color: var(--sec-color);
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.footer-communicate__text {
  align-items: flex-start;
}

.footer-servis-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-servis-liste li {
  margin-bottom: 10px;
}

.footer-servis-liste a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}

.footer-servis-liste a:hover {
  color: var(--sec-color);
}

.footer-servis-liste i {
  color: var(--theme-color);
  margin-right: 8px;
}

/* --- WhatsApp yüzen buton ------------------------------------------------ */
.wa-buton {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 45;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s ease;
}

.wa-buton:hover {
  color: #fff;
  transform: scale(1.08);
}

/* --- Küçük düzeltmeler --------------------------------------------------- */
.sec-title {
  letter-spacing: -0.4px;
}

/* --- Ürün grubu kartları (görselli) -------------------------------------- */
/* Slick slaytlarını eşit yüksekliğe zorla */
.service-carousel .slick-track {
  display: flex;
  align-items: stretch;
}

.service-carousel .slick-slide {
  height: auto;
}

.urun-kart {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(11, 28, 51, 0.1);
  height: calc(100% - 30px);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.urun-kart:hover {
  box-shadow: 0 18px 45px rgba(11, 28, 51, 0.16);
  transform: translateY(-6px);
}

.urun-kart__gorsel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--smoke-color);
}

.urun-kart__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.urun-kart:hover .urun-kart__gorsel img {
  transform: scale(1.07);
}

.urun-kart__govde {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.urun-kart__baslik {
  font-size: 22px;
  margin-bottom: 10px;
}

.urun-kart__baslik a {
  color: var(--title-color);
}

.urun-kart__baslik a:hover {
  color: var(--theme-color);
}

.urun-kart__metin {
  font-size: 15px;
  line-height: 27px;
  margin-bottom: 18px;
}

.urun-kart__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--title-color);
}

.urun-kart__link i {
  margin-left: 8px;
  color: var(--theme-color);
  display: inline-block;
  transition: transform 0.3s ease;
}

.urun-kart__link:hover {
  color: var(--theme-color);
}

.urun-kart__link:hover i {
  transform: translateX(5px);
}

.counter-block__number {
  white-space: nowrap;
}

.call-block2 {
  bottom: 100px;
}

@media (max-width: 1399px) {
  .call-block2 {
    display: none;
  }
}

/* --- Sticky header: siyah üst bant ve menü birlikte sabitlenir ---------- */
.vs-header.header-layout1 {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Şablonun scroll-yönüne göre gizle/göster eden eski sticky mekanizması
   devre dışı — menü artık her zaman, üstteki siyah bantla birlikte sabit. */
.will-sticky .sticky-active,
.will-sticky .sticky-active.active {
  position: static;
  top: auto;
  box-shadow: none;
}

/* --- Butonlar: kırmızı yerine siyah zemin ------------------------------- */
:root {
  --btn-color: #14161c;
}

.vs-btn,
.vs-btn.style13,
.vs-btn.style14,
.vs-btn.style15,
.vs-btn.style16,
.icon-btn,
.header-bottom .vs-btn.style2,
.header-bottom .vs-menu-toggle,
.will-sticky .sticky-active.active .vs-btn,
.will-sticky .sticky-active.active .vs-menu-toggle {
  background-color: var(--btn-color);
}

.icon-btn {
  border-color: var(--btn-color);
}

.icon-btn:hover {
  background-color: var(--btn-color);
  border-color: var(--btn-color);
}

.scroll-btn i {
  background-color: var(--btn-color);
}

.scroll-btn:before {
  border-color: var(--btn-color);
}

.scroll-btn:focus i,
.scroll-btn:hover i {
  background-color: var(--btn-color);
}

.vs-btn:hover,
.will-sticky .sticky-active.active .vs-btn:hover,
.will-sticky .sticky-active.active .vs-menu-toggle:hover {
  background-color: var(--btn-color);
}

/* --- İletişim sayfası: koyu zeminli şube bilgisi kutusu ------------------ */
.iletisim-kutu {
  background-color: var(--iy-dark);
  padding: 36px 34px;
}

.iletisim-kutu .sec-title,
.iletisim-kutu .sec-subtitle {
  color: var(--white-color);
}

.iletisim-kutu .footer-map {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- İletişim sayfası: satış & pazarlama takımı kartları ----------------- */
.takim-kart {
  background-color: var(--sec-color);
  padding: 20px 22px;
  height: 100%;
}

.takim-kart__unvan {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--title-color);
  margin-bottom: 2px;
}

.takim-kart__bolge {
  font-size: 13px;
  color: var(--title-color);
  opacity: 0.7;
  margin-bottom: 14px;
  min-height: 18px;
}

.takim-kart__isim {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--title-color);
  margin-bottom: 6px;
}

.takim-kart__iletisim a {
  display: block;
  font-size: 13px;
  color: var(--title-color);
  line-height: 22px;
  word-break: break-word;
}

.takim-kart__iletisim a:hover {
  color: var(--theme-color);
}

/* --- Breadcrumb: kurumsal ve iletişim gibi iç sayfalarda daha ince üst
   alan — şablonun 170px üst boşluk + 64px başlık + 128px alt boşluk
   kombinasyonu sayfada gereksiz yer kaplıyordu. Bu kural tüm ekran
   genişliklerinde style.css'teki media-query varyantlarının önüne geçer
   çünkü interyag.css onlardan sonra yükleniyor. */
.breadcumb-wrapper {
  padding-top: 64px;
  padding-bottom: 28px;
}

.breadcumb-title {
  margin-bottom: 10px;
  font-size: 30px;
}

.breadcumb-menu-wrap {
  margin-top: 0;
}

/* --- Haber kartları (Bizden Haberler) ------------------------------------ */
.haber-kart {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(11, 28, 51, 0.1);
  margin-bottom: 30px;
  overflow: hidden;
  transition: all 0.35s ease;
}

.haber-kart:hover {
  box-shadow: 0 18px 45px rgba(11, 28, 51, 0.16);
}

.haber-kart__logo {
  height: 100%;
  min-height: 220px;
  background-color: var(--smoke-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.haber-kart__logo img {
  max-height: 90px;
  max-width: 70%;
  width: auto;
  object-fit: contain;
}

.haber-kart__govde {
  padding: 32px 34px;
}

.haber-kart__tarih {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--theme-color);
  margin-bottom: 14px;
}

.haber-kart__baslik {
  font-size: 23px;
  margin-bottom: 14px;
}

.haber-kart__metin {
  font-size: 15px;
  line-height: 27px;
  margin-bottom: 14px;
}

.haber-kart__metin:last-child {
  margin-bottom: 0;
}

/* Fotoğraflı haber kapağı (arşiv haberleri) */
.haber-kart__gorsel {
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  background-color: var(--smoke-color);
}

.haber-kart__gorsel img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.haber-kart:hover .haber-kart__gorsel img {
  transform: scale(1.05);
}

/* Haber içi foto galerisi */
.haber-kart__galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}

.haber-kart__galeri a {
  display: block;
  overflow: hidden;
  line-height: 0;
}

.haber-kart__galeri img {
  width: 100%;
  height: 74px;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.haber-kart__galeri a:hover img {
  opacity: 0.85;
  transform: scale(1.08);
}

@media (max-width: 991px) {
  .haber-kart__gorsel,
  .haber-kart__gorsel img {
    min-height: 230px;
    max-height: 300px;
  }
}