/* 05.11.2025 Mustafa - Calisan ornekten uyarlanan final cozum */

/* 1. Arka plan resmini ve koyu katmani ekle (Mobile-first) */
.hero.boxshadow {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/assets/image/arkaplan_liveorten.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

/* 2. Okunabilirlik icin metin renklerini beyaza cevir */
.hero.boxshadow .two-g-text {
  color: #FFFFFF !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* 9. Mobil Cihazlar Icin Responsive Ayarlar (768px ve alti) */
@media (max-width: 768px) {
    .hero.boxshadow {
        background-attachment: scroll; /* Mobilde parallax sorun cikarabilir, normale cevir */
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Iki beyaz kutunun alt alta gelmesini sagla */
    .hero__box > div[style*="display: flex"] {
        flex-direction: column;
    }

    /* Yazilari mobil icin kucult */
    h1[style*="font-size: 22px"] {
        font-size: 18px !important;
    }
    h1[style*="font-size: 22px"] span {
        font-size: 2.2em !important;
    }
    h2[style*="font-size: 42px"] {
        font-size: 30px !important;
    }

    /* Alttaki resim ve yazi bolumunu duzenle */
    div[style*="justify-content: space-around"] {
        flex-direction: column;
        text-align: center;
    }

    div[style*="justify-content: space-around"] > div[style*="position: relative"] {
        bottom: 0 !important; /* Dikey kaydirmayi mobilde iptal et */
        margin-top: 20px;
        text-align: center !important;
    }

    div[style*="justify-content: space-around"] h2 {
        font-size: 30px !important;
        text-align: center !important;
    }
}

/* 10. Sadece COK GENIS EKRANLAR icin tam ekran yuksekligi (1600px ve ustu) */
@media (min-width: 1600px) {
    .hero.boxshadow {
        min-height: 100vh;
    }
}

/* 11. Kucuk PC Ekranlari Icin Ayarlar (769px - 1599px arasi) */
@media (min-width: 769px) and (max-width: 1599px) {
    .hero.boxshadow {
        min-height: 100vh; /* Resmin dikeyde de tam gorunmesi icin yeterli yukseklik */
        padding-top: 80px; /* Icerik icin daha fazla bosluk */
        padding-bottom: 80px;
    }
}