body {
          background-color: #f8f9fa;
          font-family: sans-serif;
      }

      /* Üst Buton Grubu */
      .nav-tabs-custom .btn {
          border-radius: 0;
          border: 1px solid #dee2e6;
          padding: 8px 30px;
          font-size: 14px;
      }

      .btn-red {
          background-color: #e31c2d;
          color: white;
          border: 1px solid #e31c2d;
      }

      .btn-red:hover {
          background-color: #c41220;
          color: white;
      }

      /* Kart Stilleri */
      .custom-card {
          border: none;
          border-radius: 12px;
          overflow: hidden;
          transition: transform 0.2s;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
          height: 100%;
      }

      .custom-card:hover {
          transform: translateY(-5px);
      }

      .custom-card img {
          height: 230px;
          ;
          object-fit: cover;
      }

      .card-title-text {
          font-size: 0.95rem;
          font-weight: 700;
          color: #333;
          padding: 15px;
          line-height: 1.3;
      }

      /* Ana Banner */
      .main-banner-card {
          border-radius: 15px;
          border: 1px solid #eee;
          background: white;
      }

      .banner-footer {
          padding: 15px;
          font-weight: 700;
          font-size: 1.1rem;
          color: #000000;
          /* Banka mavisi tonu */
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          align-items: center;
      }


      /* Görseldeki Özel Tab Stili */
      .custom-tab-group {
          border: 1px solid #dee2e6;
          border-radius: 4px;
          overflow: hidden;
          background: white;
      }

      .custom-tab-group .nav-link {
          color: #333;
          background: none;
          border: none;
          border-radius: 0;
          padding: 8px 25px;
          font-weight: 500;
          font-size: 14px;
          border-right: 1px solid #dee2e6;
      }

      /* Son butondaki çizgiyi kaldır */
      .custom-tab-group li:last-child .nav-link {
          border-right: none;
      }

      /* Aktif sekme rengi (Görseldeki Kırmızı) */
      .custom-tab-group .nav-link.active {
          background-color: #e31c2d !important;
          color: white !important;
      }

      .custom-tab-group .nav-link:hover:not(.active) {
          background-color: #f8f9fa;
      }



      /* Hero Banner Bölümü */
      .detail-banner {
          width: 100%;
          /* max-height: 450px; */
          object-fit: cover;
      }

      @media (max-width:767px) {
          .detail-banner {
              height: 155px;
          }
      }

      /* Başlık Stili */
      .campaign-title {
          color: #003057;
          /* Koyu lacivert/mavi tonu */
          font-weight: 700;
          font-size: 1.75rem;
          margin-top: 2rem;

      }

      /* Kırmızı Buton (Ziraat Tarzı) */
      .btn-red-action {
          background-color: #e31c2d;
          color: white;
          border-radius: 50px;
          padding: 12px 35px;
          font-weight: 600;
          border: none;
          transition: 0.3s;
      }

      .btn-red-action:hover {
          background-color: #c41220;
          color: white;
          transform: scale(1.02);
      }

      /* Bilgi Çubuğu (2. görseldeki mavi bar benzeri) */
      .info-bar {
          background-color: #4169e1;
          color: white;
          border-radius: 8px;
          padding: 15px;
          font-weight: 500;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          margin-top: 2rem;
      }

      /* Koşullar Kutusu (Gri çerçeveli yapı) */
      .terms-box {
          border: 1px solid #eee;
          border-radius: 15px;
          padding: 30px;
          background-color: #fcfcfc;
          margin-top: 2rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      }

      .terms-title {
          color: #000000;
          /* Görseldeki kahverengimsi başlık rengi */
          font-weight: 700;
          margin-bottom: 20px;
      }

      /* Liste Maddeleri */
      .custom-list {
          list-style: none;
          padding-left: 0;
      }

      .custom-list li {
          position: relative;
          padding-left: 25px;
          margin-bottom: 10px;
          font-size: 0.95rem;
      }

      .custom-list li::before {
          content: "•";
          position: absolute;
          left: 0;
          color: #333;
          font-weight: bold;
      }

      /* Yeşil Check İkonu (2. görsel için) */
      .check-list li::before {
          content: "\f26e";
          /* Bootstrap Icons check */
          font-family: bootstrap-icons;
          color: #28a745;
          font-weight: bold;
      }


   /* Swiper Konteynırı */
.mySwiper {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

/* Görselin En-Boy Oranını Koru */
.mySwiper .swiper-slide img {
    width: 100%;
    height: auto; /* Yüksekliği otomatiğe aldık */
    aspect-ratio: 16 / 5; /* Masaüstü oranı */
    object-fit: cover;
    display: block;
}

/* Mobilde Görsel Oranını Değiştir (Daha kareye yakın) */
@media (max-width: 768px) {
    .mySwiper .swiper-slide img {
        aspect-ratio: 4 / 3; /* Mobilde görselin daha fazla görünmesini sağlar */
        height: 155PX /* Mobilde minimum bir yükseklik tanımladık */
    }
    
    /* Okları görselin içine, daha küçük yerleştirelim */
    .swiper-button-next, .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
        background-color: rgba(255,255,255,0.8);
        border-radius: 50%;
        top: 40% !important; /* Okları görselin üzerine çeker */
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 14px !important;
    }
}

/* Alt Çizgiyi Kökten Çözen Kısım */
.main-banner-card a, 
.main-banner-card a:hover, 
.main-banner-card a:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

.banner-footer {
    border-top: 1px solid #eee;
    background: #fff;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
}