/* 
   INDEX PAGE - MOBILE RESPONSIVE FIXES
   Bu CSS sadece ana sayfa (index.php) için mobil düzeltmeleri içerir.
   Diğer sayfalar etkilenmez.
*/

/* ===================================
   MOBILE NAVBAR FIX
   =================================== */
@media (max-width: 767px) {

    /* Navbar container - daha kompakt yükseklik */
    nav#navbar {
        height: auto !important;
        min-height: 70px !important;
    }

    nav#navbar>div {
        height: 70px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Logo - biraz küçült */
    nav#navbar a.text-2xl {
        font-size: 1.35rem !important;
        letter-spacing: 0.15em !important;
    }

    /* Hamburger Menu Button - Düzeltildi */
    #mobile-menu-btn {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 0 !important;
    }

    /* Hamburger çizgileri - daha kalın ve belirgin */
    #mobile-menu-btn span {
        display: block !important;
        height: 2px !important;
        background-color: white !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        margin-bottom: 5px !important;
    }

    #mobile-menu-btn span:first-child {
        width: 24px !important;
    }

    #mobile-menu-btn span:nth-child(2) {
        width: 32px !important;
    }

    #mobile-menu-btn span:last-child {
        width: 24px !important;
        margin-bottom: 0 !important;
    }

    /* Hover efekti */
    #mobile-menu-btn:hover span {
        background-color: #d4af37 !important;
    }
}

/* ===================================
   MOBILE HERO SECTION FIX
   =================================== */
@media (max-width: 767px) {

    /* Hero Intro - Daha büyük ve etkileyici */
    .md\:hidden .min-h-\[50vh\] {
        min-height: 100vh !important;
        padding: 120px 24px 60px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Hero Title daha büyük */
    .md\:hidden .text-4xl.font-serif {
        font-size: 2.75rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }

    /* Hero subtitle */
    .md\:hidden .text-sm.text-gray-400 {
        font-size: 1rem !important;
        opacity: 0.8 !important;
        max-width: 280px !important;
        line-height: 1.6 !important;
    }

    /* Bounce animasyonu daha belirgin */
    .md\:hidden .animate-bounce {
        margin-top: 3rem !important;
        font-size: 1.5rem !important;
    }

    /* ===================================
       PILLAR CARDS FIX
       =================================== */

    /* Service Pillar kartları - Daha düzgün oranlar */
    /* Updated for new HTML structure (50vh/40vh) */
    .md\:hidden a.min-h-\[50vh\] {
        min-height: 50vh !important;
    }

    .md\:hidden a.min-h-\[40vh\] {
        min-height: 40vh !important;
    }

    .md\:hidden a.min-h-\[50vh\],
    .md\:hidden a.min-h-\[40vh\] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    /* Background görüntüler - Daha iyi görünürlük */
    .md\:hidden a.min-h-\[50vh\]>div:first-child,
    .md\:hidden a.min-h-\[40vh\]>div:first-child {
        opacity: 0.85 !important;
        filter: saturate(1.1) !important;
    }

    /* Content container - Daha fazla padding */
    .md\:hidden a .absolute.bottom-0.left-0.p-8 {
        padding: 32px !important;
        width: 100% !important;
    }

    /* Service titles */
    .md\:hidden a .text-3xl.font-serif {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Description text - Daha okunabilir */
    .md\:hidden a .text-sm.text-gray-300 {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    /* CTA Buttons - Daha büyük ve tıklanabilir */
    .md\:hidden a span.inline-block {
        padding: 16px 32px !important;
        font-size: 0.75rem !important;
        min-height: 52px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Number badges - Daha yumuşak */
    .md\:hidden a .text-\[60px\] {
        font-size: 80px !important;
        opacity: 0.08 !important;
    }

    /* ===================================
       FOOTER CTA SECTION FIX
       =================================== */

    .md\:hidden .p-12.text-center.bg-gray-900 {
        padding: 60px 24px !important;
        min-height: auto !important;
    }

    .md\:hidden .p-12 h3.text-2xl {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .md\:hidden .p-12 a.inline-block.w-full {
        padding: 18px 24px !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }

    /* Social links - Daha büyük */
    .md\:hidden .p-12 .flex.justify-center.gap-6 a i {
        font-size: 1.75rem !important;
    }

    /* ===================================
       GRADIENT OVERLAY IMPROVEMENTS
       =================================== */

    /* Gradient daha yumuşak geçiş */
    .md\:hidden a>div.bg-gradient-to-t {
        background: linear-gradient(to top,
                rgba(15, 23, 42, 0.98) 0%,
                rgba(15, 23, 42, 0.7) 40%,
                transparent 100%) !important;
    }

    /* ===================================
       SMOOTH SCROLLING & TOUCH
       =================================== */

    .md\:hidden.flex.flex-col {
        scroll-snap-type: y proximity;
        -webkit-overflow-scrolling: touch;
    }

    .md\:hidden.flex.flex-col>a,
    .md\:hidden.flex.flex-col>div {
        scroll-snap-align: start;
    }

    /* ===================================
       BORDER & SPACING REFINEMENTS
       =================================== */

    .md\:hidden a.border-t.border-white\/10 {
        border-top-width: 1px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* Left border accent daha kalın */
    .md\:hidden a .border-l-2 {
        border-left-width: 3px !important;
        padding-left: 16px !important;
    }
}

/* ===================================
   EXTRA SMALL DEVICES (< 375px)
   =================================== */
@media (max-width: 374px) {

    .md\:hidden .min-h-\[50vh\] {
        padding: 80px 16px 40px 16px !important;
    }

    .md\:hidden .text-4xl.font-serif {
        font-size: 2.25rem !important;
    }

    .md\:hidden a.min-h-\[50vh\],
    .md\:hidden a.min-h-\[40vh\] {
        min-height: 50vh !important;
    }

    .md\:hidden a .absolute.bottom-0.left-0.p-8 {
        padding: 24px !important;
    }

    .md\:hidden a .text-3xl.font-serif {
        font-size: 1.75rem !important;
    }
}

/* ===================================
   LANDSCAPE MOBILE FIX
   =================================== */
@media (max-width: 767px) and (orientation: landscape) {

    .md\:hidden .min-h-\[50vh\] {
        min-height: 100vh !important;
        padding-top: 100px !important;
    }

    .md\:hidden a.min-h-\[50vh\],
    .md\:hidden a.min-h-\[40vh\] {
        min-height: 100vh !important;
    }
}