/* ==========================================================
   MOBILE / TABLET STYLES
   Tüm mobil ve tablet'e özel kurallar bu dosyadadır.
   style.css masaüstü/temel tasarımı, bu dosya ise responsive
   davranışı ve mobil navigasyonu (hamburger menü) yönetir.
   ========================================================== */

/* ---------- Hamburger menü butonu ---------- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 10px;
    z-index: 1100;
}
.hamburger span {
    width: 26px;
    height: 2px;
    background: var(--gold-500);
    border-radius: 2px;
    transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobil menü paneli (her ekran genişliğinde varsayılan olarak gizli) ---------- */
.mobile-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: rgba(6, 10, 26, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(212, 175, 55, 0.2);
    padding: 100px 30px 40px;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    color: var(--off-white);
    font-size: 16px;
    text-align: center;
}
.mobile-nav a:hover { background: rgba(212,175,55,0.12); color: var(--gold-300); }
.mobile-nav .lang-switch { display: flex; justify-content: center; margin-top: 20px; }

.nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none; transition: var(--transition); z-index: 1040;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

/* ==========================================================
   RESPONSIVE KIRILMA NOKTALARI
   ========================================================== */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .about-grid, .contact-grid { grid-template-columns: 1fr; }
    .about-visual { height: 280px; }
    .about-text, .about-text h2, .about-text p, .about-text .section-eyebrow { text-align: center; }
    .about-points { justify-content: center; }
    .about-points li { justify-content: center; }
}

@media (max-width: 860px) {
    .main-nav { display: none; }
    .lang-switch { display: none; }
    .lang-dropdown { display: flex; }
    .hamburger { display: flex; }
    .hero-arrow { display: none; }

    .grid-3, .grid-4, .testimonial-track { grid-template-columns: minmax(0, 1fr); }
    .booking-form { grid-template-columns: minmax(0, 1fr); }
    .booking-form .field-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .hero-stats { gap: 30px; }
    .section { padding: 70px 0; }
    .booking-card { padding: 24px; }

    /* İletişim kartındaki ikon + metin satırlarını ortala (kurumsal, temiz görünüm) */
    .contact-info-item { flex-direction: column; text-align: center; gap: 8px; }
    .fleet-specs { flex-wrap: wrap; }

    /* Slider (arka plan görsel geçişi) sadece bir ekran boyu kadar yer kaplasın,
       rezervasyon formuna kadar aşağı uzamasın */
    .hero { min-height: auto; }
    .hero-slider { inset: 0 0 auto 0; height: 100svh; }
}

@media (max-width: 480px) {
    .booking-form .field-row-2 { grid-template-columns: minmax(0, 1fr); }
    .field input[type="date"], .field input[type="time"] { font-size: 13.5px; padding: 13px 10px; }
    .hero-stats { flex-direction: column; gap: 20px; }
    .hero { padding: 130px 0 70px; }
    .whatsapp-float { width: 54px; height: 54px; font-size: 24px; bottom: 18px; right: 18px; }
    .email-float { width: 54px; height: 54px; font-size: 22px; bottom: 82px; right: 18px; }
    .container { padding: 0 18px; }
    .hero-cta { flex-direction: column; width: 100%; }
    .hero-cta .glass-btn { width: 100%; }
    .logo-img { height: 30px; }
    .logo-text { font-size: 18px; }
    .site-header.scrolled .logo-img { height: 26px; }
    .site-header.scrolled .logo-text { font-size: 16px; }
}