/**
 * ============================================================================
 * [MODÜL: MOBILE — App-Like Mobil Deneyim]
 * Youthside ATS — Profile UI
 * ============================================================================
 * Amaç: Mobil cihazlarda (≤768px) uygulama kalitesinde bir deneyim sunar.
 *        Tüm responsive override'lar bu dosyada toplanır.
 *
 * Mimar Notu (Ferhat Cengiz):
 *   "Mobile-First" değil, zaten mevcut Tailwind responsive yapısını koruyoruz.
 *   Ancak Tailwind'in kapsamadığı custom component'lar için override'lar burada.
 *   Touch hedefleri minimum 44x44px (Apple HIG & WCAG 2.5.5).
 *
 *   Hero Tasarım Kararı:
 *   Önceki tasarımda hero 60vh (yaklaşık 500px) yüksekliğindeydi. Mobil
 *   ekranda bu, görünür alanın tamamını kaplar ve içerik için yer bırakmaz.
 *   LinkedIn/Instagram tarzı "cover → profil kartı" yaklaşımı benimsendi:
 *     - Cover foto: 180px (kompakt, dekoratif)
 *     - Logo: cover'ın sol-altında overlay (native app hissi)
 *     - Bilgiler + Butonlar: hero'dan çıktı, alttaki beyaz kart bölümünde
 *
 * DRY Notu: Tailwind'in built-in responsive class'ları ile çakışmaz.
 *           Sadece custom CSS class'ları için extra responsive kurallar.
 * ============================================================================
 */

/* ===========================================================================
 * ── MOBIL BOTTOM NAVIGATION BAR (App-Like) ──
 * Neden: Mobilde "uygulama gibi" his vermek için sabit alt navigasyon.
 *        Instagram/Twitter tarzı bottom tab bar.
 * =========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface-light);
  border-top: 1px solid #f3f4f6;
  z-index: var(--z-sticky);
  display: none; /* Sadece mobilde göster */
  padding: 0.5rem 0;
  padding-bottom: calc(
    0.5rem + env(safe-area-inset-bottom)
  ); /* iPhone notch güvenli alan */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.dark .mobile-bottom-nav {
  background: var(--color-surface-dark);
  border-top-color: #374151;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

/* ── Bottom Nav Item ───────────────────────────────────────── */
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.375rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted-light);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  min-width: 56px;
}

.dark .bottom-nav-item {
  color: var(--color-text-muted-dark);
}

.bottom-nav-item:active {
  color: var(--color-primary);
}

.bottom-nav-item.active {
  color: var(--color-primary);
}

.bottom-nav-item .material-symbols-outlined {
  font-size: 1.4rem;
}

/* ===========================================================================
 * ── MOBIL HERO SECTION (Yeniden Tasarlandı) ──
 *
 * Tasarım Kararı:
 *   Eski: 60vh hero → mobilde tüm ekranı kaplıyor, kullanıcı scroll yapmadan
 *         içeriğe ulaşamıyor. Kötü UX.
 *
 *   Yeni: LinkedIn/Instagram tarzı "cover strip" yaklaşımı:
 *     1. Cover fotoğraf → sadece 180px yüksekliğinde, dekoratif bir şerit
 *     2. Şirket logosu → cover'ın sol-altına yerleşik (negatif margin ile
 *        kart içine sarkıyor, native app hissi)
 *     3. Şirket adı, açıklama, meta bilgileri, CTA butonları → hero'nun altında
 *        beyaz bir "profil kartı" bölümünde gösteriliyor
 *     4. Tab bar → bilgilerin hemen altında, scroll gerektirmeden erişilebilir
 *
 * Bu yaklaşımın avantajları:
 *   - İlk görünür alanda şirket adı + buton görülür (above the fold)
 *   - Fotoğraf sadece kimlik/marka için kullanılır, içeriği bloklamaz
 *   - Küçük ekranlarda (375px) bile rahat okunur
 * =========================================================================== */

@media (max-width: 768px) {
  /* ── 1. Hero container: sadece cover foto yüksekliğinde ── */
  .hero-section {
    height: 180px !important;
    min-height: 180px !important;
    overflow: visible !important; /* Logo aşağıya sarkacak */
    position: relative;
  }

  /* ── 2. Logo: Cover'ın sol-altına overlay ── */
  /*
   * Neden translateY(-50%)?
   * Logo'nun yarısı cover foto içinde, yarısı dışarıda kalır.
   * Bu "LinkedIn tarzı" geçiş efekti profesyonel apps'lerde yaygın.
   * Cover foto overflow:visible ile logoyu kesmez.
   */
  .hero-logo {
    position: absolute !important;
    bottom: 0 !important;
    left: 1rem !important;
    transform: translateY(50%) !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 1rem !important;
    border: 3px solid white !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    z-index: 20 !important;
  }

  /* ── 3. Hero içindeki desktop layout'u gizle ── */
  /*
   * Desktop'ta şirket bilgileri hero içinde, fotoğrafın üzerinde görünüyor.
   * Mobilde bu bilgiler hero'dan çıkarıldı ve "profil kartı" alanına taşındı.
   * Hero'nun içindeki flex container'ı gizleyerek bu bölümlerin görünmesini engelle.
   */
  .hero-section > div.relative.z-10 > div.flex {
    display: none !important;
  }

  /* ── 4. Tab bar: Hero içinde kalır ama alta yapışık ── */
  .profile-tabs {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    margin: 0;
    padding: 0.375rem 0.5rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: none !important; /* Tab bar aşağıya taşındı — hero içinde gizle */
  }

  /* ── 5. Mobil Profil Kartı — Hero'nun altına eklenen içerik alanı ── */
  /*
   * Hero'nun altındaki main content alanına üstten padding ekliyoruz.
   * Logo'nun yarısı (36px) + logo border (3px) + boşluk = ~56px.
   * Bu sayede profil kartındaki içerik logoyla çakışmaz.
   */
  .hero-section + main > div:first-child,
  main > div:first-child {
    padding-top: 0 !important;
  }
}

/* ── Mobil Profil Başlık Kartı ──────────────────────────────
 * Neden: Hero içinde olan şirket bilgileri mobilde hero'nun hemen
 * altına bir kart olarak render edilir.
 * Bu kart hero'dakini mirror'lar: JS ile DOM manipülasyon gerekmez,
 * CSS ile "gizle/göster" yaklaşımı tercih edildi (DRY).
 * ─────────────────────────────────────────────────────────── */
.mobile-profile-header {
  display: none; /* Desktop'ta gizli */
}

@media (max-width: 768px) {
  .mobile-profile-header {
    display: block;
    background: white;
    padding: 0 1rem 0.75rem 1rem; /* Üst padding yok — logo kendi negatif margin'ini yönetiyor */
    border-bottom: 1px solid #f3f4f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .dark .mobile-profile-header {
    background: var(--color-surface-dark);
    border-bottom-color: #374151;
  }

  /*
   * [LOGO OVERLAY]
   * Neden margin-top: negatif?
   *   Hero section overflow:hidden olduğu için logo hero içinde absolute
   *   pozisyonlanırken kırpılıyordu. Çözüm: logo mobile-profile-header
   *   içine taşındı ve negatif margin-top (-36px = yüksekliğin yarısı)
   *   ile hero cover fotoğrafının üstüne "sarkıyor" efekti yaratıldı.
   *   Bu teknik LinkedIn ve Instagram'ın mobil profil tasarımını birebir taklit eder.
   */
  .mobile-profile-logo {
    width: 72px;
    height: 72px;
    margin-top: -36px; /* Yarısı hero cover'a gömülü */
    margin-bottom: 0.625rem;
    background: white;
    border-radius: 1rem;
    border: 3px solid white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    flex-shrink: 0;
    /*
     * Neden position: relative + z-index?
     * Hero-section DOM'da önce gelir → stacking order'da logo'nun üstüne biner.
     * "position: relative" yeni bir stacking context açar,
     * "z-index: 10" herodan üste çıkartır → logo tam görünür olur.
     */
    position: relative;
    z-index: 10;
  }

  .dark .mobile-profile-logo {
    background: #1f2937;
    border-color: #1f2937;
  }

  .mobile-profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ===========================================================================
 * ── MOBIL MAIN CONTENT ──
 * =========================================================================== */
@media (max-width: 768px) {
  /* Neden: İçerik alanı alt nav bar'ın arkasına girmemeli */
  main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  /* Neden: Section spacingleri mobilde daha kompakt */
  .content-section {
    margin-bottom: var(--space-xl) !important;
  }

  /* Neden: Metin okunabilirliği — mobilde satır aralığı artırılır */
  .prose p {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
  }

  /* Neden: Reklam banner'ı mobilde daha kısa */
  .promo-banner {
    height: auto !important;
    min-height: 200px;
  }

  .promo-banner h4 {
    font-size: 1.25rem !important;
  }

  /* Neden: Bento grid yığılı düzene geçmeli */
  .bento-grid {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .bento-item-large,
  .bento-item-tall,
  .bento-item-wide {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 200px !important;
  }
}

/* ===========================================================================
 * ── MOBIL SIDEBAR INFO CARDS ──
 * Neden: Desktop'ta sağ kolon olan bilgiler, mobilde içerik altına taşınır.
 *        Tailwind grid zaten bunu yapar, ama iç padding ayarları burada.
 * =========================================================================== */
@media (max-width: 768px) {
  .sidebar-card {
    border-radius: var(--radius-xl) !important;
  }
}

/* ===========================================================================
 * ── MOBIL COOKIE CONSENT PANEL ──
 * Neden: Mobilde bottom nav bar var (80px). Cookie panel bottom:0'da açılırsa
 * bottom nav'ın arkasına gömülür. Bu yüzden mobilde bottom nav yüksekliği
 * kadar yukarıdan başlar.
 * =========================================================================== */
@media (max-width: 768px) {
  .cookie-consent {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    /* Padding: safe area altı zaten nav bar tarafından sağlanıyor */
  }
}

/* ===========================================================================
 * ── MOBIL DESKTOP STICKY BAR GİZLE ──
 * Neden: Masaüstü sticky bar mobilde gereksiz, bottom-nav zaten var.
 * =========================================================================== */
@media (max-width: 768px) {
  #sticky-bar {
    display: none !important;
  }
}

/* ===========================================================================
 * ── MOBIL ERİŞİLEBİLİRLİK BUTONU KONUMU ──
 * Neden: Bottom nav ile çakışmaması için yukarı taşınır.
 * =========================================================================== */
@media (max-width: 768px) {
  .accessibility-btn {
    bottom: calc(80px + env(safe-area-inset-bottom) + 1rem) !important;
  }
}

/* ===========================================================================
 * ── GENEL MOBİL İYİLEŞTİRMELER ──
 * =========================================================================== */
@media (max-width: 768px) {
  /* Neden: Tüm butonlara minimum dokunma alanı */
  button,
  a[role="button"],
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Neden: Tap highlight'ı kaldır — native app hissi */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}