/**********************************************
 * CLARA SECTION (Responsive Media Queries)
 **********************************************/

/* Genel Clara Section Ayarları */
.clara-section {
    margin-top: 108px; /* Bir önceki div ile arası boşluk */
    width: 100%;
    position: relative;
  }
  
  /* Clara Image */
  .clara-image {
    width: 100%;
    height: 638px; /* Varsayılan yükseklik */
    position: relative;
    overflow: hidden;
  }
  
  .clara-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Yazılar */
  .clara-text {
    position: absolute;
    bottom: 80px; /* Varsayılan alt boşluk */
    right: 74px; /* Varsayılan sağ boşluk */
    text-align: right;
  }
  
  .clara-title {
    color: rgba(255, 255, 255, 0.9);
    font-family: "Noto Serif JP", serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 105px;
    margin: 0;
  }
  
  .clara-subtitle {
    margin-top: 8px;
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: 3px;
  }
  
  /* Media Queries */
  @media (max-width: 767px) {
    .clara-image {
      height: 400px; /* 767px altı için yükseklik */
    }
  
    .clara-text {
      bottom: 60px; /* Alt boşluk azaltıldı */
      right: 40px; /* Sağ boşluk azaltıldı */
    }
  
    .clara-title {
      font-size: 40px; /* Yazı boyutu küçüldü */
      line-height: 60px;
    }
  
    .clara-subtitle {
      font-size: 18px; /* Alt yazı küçüldü */
      line-height: 40px;
      letter-spacing: 2px;
    }
  }
  
  @media (max-width: 480px) {
    .clara-image {
      height: 167px; /* 480px altı için yükseklik */
    }
  
    .clara-text {
      bottom: 20px; /* Yazılar daha aşağıda */
      right: 20px; /* Sağ boşluk azaldı */
    }
  
    .clara-title {
      font-size: 16px; /* Clara yazısı küçültüldü */
      line-height: 10px; /* Line-height güncellendi */
    }
  
    .clara-subtitle {
      font-size: 8px; /* Alt yazı küçültüldü */
      line-height: 10px; /* Line-height güncellendi */
      letter-spacing: 2px;
    }
  }
  
  @media (max-width: 350px) {
    .clara-image {
      height: 167px; /* Daha küçük cihazlar için uyumlu */
    }
  
    .clara-text {
      bottom: 10px; /* Daha az alt boşluk */
      right: 10px; /* Sağdan daha az boşluk */
    }
  
    .clara-title {
      font-size: 12px; /* Clara yazısı daha küçük */
      line-height: 8px;
    }
  
    .clara-subtitle {
      font-size: 6px; /* Alt yazı daha küçük */
      line-height: 8px;
      letter-spacing: 1px;
    }
  }