/* =========================================
   BLOG PAGE SPECIAL CSS (blog.css)
   ========================================= */

/* --- 1. Blog Hero Section --- */
.blog-hero {
  position: relative;
  width: 100%;
  /* Create a container that scales identically to the background image aspect ratio (1728 / 791 = 2.184) */
  /* 105px header approx + 120px gap = 225px */
  aspect-ratio: 1728 / 791;
  min-height: calc(225px + (100vw / (1728 / 791)));
  background-color: #111111;
  overflow: hidden;
  padding-top: 225px;
  /* Actual 120px visual gap below the header */
  /* Space for header via padding instead, making absolute placement easier */
}

/* Section 5: Şeritler (Marquee) */
.seritler-section {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  /* Dışarı taşmaları gizle */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
  margin-bottom: 200px;
}

.marquee-band {
  position: absolute;
  width: 120vw;
  /* Ekranı tam kesmesi için geniş verildi */
  left: -10vw;
  display: flex;
  white-space: nowrap;
  font-family: "Joyride 2.0", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  padding: 15px 0;
  overflow: hidden;
  text-transform: uppercase;
}

.marquee-content {
  display: flex;
  animation: scroll-left 25s linear infinite;
}

.marquee-content span {
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
}

.marquee-content i {
  font-size: 24px;
}

/* Dark Band Style */
.band-dark {
  background-color: #2a2a2a;
  /* Figma'daki koyu şerit rengine yakın */
  color: #555555;
  transform: rotate(3deg);
  z-index: 1;
}

.band-dark .marquee-content {
  animation-direction: normal;
  /* Sola doğru */
}

/* Yellow Band Style */
.band-yellow {
  background-color: #ffce00;
  color: #1e1e1e;
  transform: rotate(-2deg);
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  /* Derinlik hissi için */
}

.band-yellow .marquee-content {
  animation-direction: reverse;
  /* Sağa doğru kaysın (veya tam tersi, isteğe bağlı) */
}

/* Animasyon Keyframes */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Responsive Marquee */
@media (max-width: 991px) {
    .seritler-section {
        height: 250px;
        margin: 0;
    }

  .marquee-band {
    font-size: 24px;
    padding: 10px 0;
  }

  .marquee-content i {
    font-size: 18px;
  }
}

/* Base Cover Image */
.blog-hero-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 2;
  display: block;
}

/* BLOG Title */
.blog-hero-title {
  position: absolute;
  /* Responsive position: slightly above the 225px image start line */
  top: calc(225px - 1vw);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Joyride 2.0", sans-serif;
  /* Responsive sizing maxing out around 85px */
  font-size: clamp(40px, 6vw, 85px);
  line-height: 1;
  text-align: center;
  color: #ffce00;
  margin: 0;
  z-index: 3;
}

/* Dark bottom gradient overlay - derived from the user's Figma values but translated to 100% width */
.blog-hero-bottom-grad {
  position: absolute;
  width: 100%;
  height: 40%;
  /* Scales with parent height nicely */
  left: 0px;
  bottom: 0px;
  /* user's gradient angle rotated to straight down (180deg) for a responsive container */
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0) 0%,
    rgba(17, 17, 17, 0.56) 43%,
    #111111 80%
  );
  pointer-events: none;
  z-index: 5;
}

/* king 1 - Crown icon */
.hero-crown {
  position: absolute;
  top: -35px;
  /* Üst kısımdaki div'e bağlandı, yukarı taşırıyoruz (yüksekliğin ~yarısı) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* --- 2. Blog Grid Override --- */

.blog-grid-section {
  position: relative;
  z-index: 10;
  background-color: var(--clr-bg-dark);
}

.blog-post-card {
  width: 100%;
  /* Match Figma maximums natively */
  transition: opacity 0.3s ease;
}

.blog-post-card:hover {
  opacity: 0.95;
}

.bp-img-wrap {
    width: 100%;
    aspect-ratio: 1/0.6;
}

.bp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
  display: block;
}

/* Hover Zoom Effect */
.blog-post-card:hover .bp-hover-scale {
  transform: scale(1.05);
}

.bp-title {
  font-family: "Halenoir", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 19px;
  line-height: 22px;
  min-height: 44px;
  color: #ffffff;
  transition: color 0.3s ease;
}

.blog-post-card:hover .bp-title {
  color: var(--clr-accent) !important;
}

.bp-excerpt {
  font-family: "Halenoir", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 17px;
  color: #3a3a3a;
}
.bp-excerpt,
.bp-excerpt * {
    color: #3a3a3a !important;
}