/* Altın Kariyer Akademi — mobil/tablet responsive düzeltmeleri.
   styles.css (dondurulmuş Tailwind derlemesi) SONRASINDA yüklenir; yalnızca
   media-query içinde override yapar, böylece masaüstü (>=1024px) görünüm hiç
   değişmez. Yeni Tailwind utility class'ı gerektiren düzeltmeler burada
   elle CSS olarak yazılır. */

/* ─────────────────────────────────────────────────────────────
   Referans logoları — sürekli kayan marquee (mobil + masaüstü)
   ───────────────────────────────────────────────────────────── */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: aka-marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ─────────────────────────────────────────────────────────────
   Yatay slider (her boyutta kaydırmalı) — eğitmen şeridi vb.
   ───────────────────────────────────────────────────────────── */
.hslider {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -.25rem;
  padding: .25rem .25rem 1rem;
}
.hslider::-webkit-scrollbar { display: none; }
.hslider > * {
  flex: 0 0 210px;
  scroll-snap-align: start;
}
@media (max-width: 639px) {
  .hslider > * { flex: 0 0 62%; }
}

/* Kategori kartındaki ok yalnızca mobil liste görünümünde görünür */
.cat-card__arrow { display: none; }
@keyframes aka-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   TABLET (<=1023px) — dikey ritmi biraz sıkılaştır
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .pt-16 { padding-top: 3rem; }
  .pb-20 { padding-bottom: 3.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   MOBİL (<=639px) — asıl düzeltmeler
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* 1) Sistemik çift yatay boşluk.
     .frame-rails (px-4=16px) + iç section (px-6=24px) = kenar başına 40px.
     Dış sarmalayıcıyı 12px'e, çerçeveli section'ları 16px'e indir → ~28px. */
  .frame-rails { padding-left: .75rem; padding-right: .75rem; }
  .frame-rails > section,
  .frame-rails > section.border-x { padding-left: 1rem; padding-right: 1rem; }

  /* full-bleed koyu bantların iç sarmalayıcısı (frame-rails dışında) */
  section > .mx-auto.max-w-\[1240px\] { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* 2) Dikey ritim — masaüstü ölçekli büyük boşlukları küçült */
  .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
  .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .py-14 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .py-12 { padding-top: 2rem; padding-bottom: 2rem; }
  .pt-16 { padding-top: 2.5rem; }
  .pt-12 { padding-top: 2rem; }
  .pt-10 { padding-top: 1.75rem; }
  .pb-20 { padding-bottom: 3rem; }
  .pb-14 { padding-bottom: 2.25rem; }
  .pb-10 { padding-bottom: 1.75rem; }

  /* stacked grid'lerde nefesi azalt (hero, FAQ, video bandı vb.) */
  .gap-12 { gap: 2rem; }
  .gap-10 { gap: 1.75rem; }
  .mb-12 { margin-bottom: 2rem; }
  .mb-10 { margin-bottom: 1.75rem; }

  /* 3) Katalog kategori filtresi — mobilde yatay kaydırılabilir tek sıra */
  #cat-filter > .flex {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #cat-filter > .flex::-webkit-scrollbar { display: none; }
  #cat-filter .cat-chip { flex: 0 0 auto; }

  /* 4) Koyu mezun bandındaki 9:16 dikey posteri makul boyutta tut */
  #vt .ring-gold {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 5) Eğitimler / eğitmenler — mobilde yatay kaydırmalı (swipe) tek sıra.
     Grid'i flex'e çevir; kartlar tam genişlik yerine dar olsun ki sonraki
     kart kenardan görünsün. */
  .hscroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem 4px;
  }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
  .hscroll.hscroll--sm > * { flex: 0 0 46%; }

  /* 6) Kategoriler ("İlgi alanına göre keşfet") — mobilde tek sütun,
     satır tipi liste: küçük görsel + başlık/alt başlık + ok. */
  .cat-grid { grid-template-columns: 1fr; gap: .5rem; }
  .cat-card { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; }
  .cat-card__text { order: 1; flex: 1 1 auto; min-width: 0; }
  .cat-card__img {
    order: 0;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin-top: 0;
    border-radius: 12px;
  }
  .cat-card__arrow { display: block; order: 2; flex: 0 0 auto; opacity: .5; }
}

/* ─────────────────────────────────────────────────────────────
   Derlemede (dondurulmuş styles.css) bulunmayan utility class'ları.
   Bu class'lar Blade'de kullanılıyor ama derlemeye girmemiş; tanımlı
   olmadıkları için başlıklar 16px'e düşüyordu. Tasarımın doğru render
   olması için elle tanımlandı — tüm breakpoint'lerde geçerli.
   ───────────────────────────────────────────────────────────── */
.aspect-\[16\/7\]{aspect-ratio:16/7}
.gap-0{gap:0}
.gap-y-1{row-gap:.25rem}
.group:hover .group-hover\:scale-\[1\.02\]{transform:scale(1.02)}
.h-20{height:5rem}
.h-8{height:2rem}
.leading-\[1\.03\]{line-height:1.03}
.max-w-\[62ch\]{max-width:62ch}
.max-w-\[900px\]{max-width:900px}
.text-\[16px\]{font-size:16px}
.text-\[clamp\(1\.3rem\2c 2\.6vw\2c 1\.9rem\)\]{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.text-\[clamp\(1\.4rem\2c 2\.6vw\2c 2rem\)\]{font-size:clamp(1.4rem,2.6vw,2rem)}
.text-\[clamp\(1\.4rem\2c 3vw\2c 2\.1rem\)\]{font-size:clamp(1.4rem,3vw,2.1rem)}
.text-\[clamp\(1\.5rem\2c 2\.6vw\2c 2\.1rem\)\]{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.text-\[clamp\(1\.5rem\2c 2\.8vw\2c 2\.2rem\)\]{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.2rem\)\]{font-size:clamp(1.5rem,3vw,2.2rem)}
.text-\[clamp\(1\.6rem\2c 3\.2vw\2c 2\.4rem\)\]{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.text-\[clamp\(1\.6rem\2c 3vw\2c 2\.4rem\)\]{font-size:clamp(1.6rem,3vw,2.4rem)}
.text-\[clamp\(1\.9rem\2c 4vw\2c 3rem\)\]{font-size:clamp(1.9rem,4vw,3rem)}
.text-\[clamp\(1rem\2c 1\.5vw\2c 1\.15rem\)\]{font-size:clamp(1rem,1.5vw,1.15rem)}
.text-\[clamp\(2\.2rem\2c 5vw\2c 3\.8rem\)\]{font-size:clamp(2.2rem,5vw,3.8rem)}
.text-\[clamp\(2rem\2c 4\.5vw\2c 3\.2rem\)\]{font-size:clamp(2rem,4.5vw,3.2rem)}
.text-\[clamp\(2rem\2c 4\.5vw\2c 3\.4rem\)\]{font-size:clamp(2rem,4.5vw,3.4rem)}
@media (min-width:768px){
  .md\:aspect-auto{aspect-ratio:auto}
  .md\:grid-cols-\[0\.8fr_1\.2fr\]{grid-template-columns:0.8fr 1.2fr}
  .md\:grid-cols-\[1\.15fr_0\.85fr\]{grid-template-columns:1.15fr 0.85fr}
  .md\:grid-cols-\[1fr_0\.9fr\]{grid-template-columns:1fr 0.9fr}
  .md\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}
}
@media (min-width:1024px){
  .lg\:grid-cols-\[0\.8fr_1\.2fr\]{grid-template-columns:0.8fr 1.2fr}
  .lg\:grid-cols-\[0\.9fr_1\.1fr\]{grid-template-columns:0.9fr 1.1fr}
  .lg\:grid-cols-\[1\.5fr_0\.5fr\]{grid-template-columns:1.5fr 0.5fr}
  .lg\:grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}
  .lg\:top-\[84px\]{top:84px}
}

/* ─────────────────────────────────────────────────────────────
   Tam ekran mobil menü (yalnızca <1024px; masaüstünde .lg:hidden ile gizli)
   ───────────────────────────────────────────────────────────── */
body.menu-open { overflow: hidden; }

@media (max-width: 1023px) {
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 14px 20px 24px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s cubic-bezier(.16,1,.3,1),
                transform .3s cubic-bezier(.16,1,.3,1),
                visibility .3s;
  }
  .mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mobile-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin-bottom: 1.5rem;
  }
  .mobile-nav__links {
    display: flex;
    flex-direction: column;
  }
  .mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eae7e1;
    font-family: Archivo, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    font-size: 1.6rem;
    line-height: 1.1;
    color: #16130e;
    transition: color .2s;
  }
  .mobile-nav__link:hover { color: #7e6438; }
  .mobile-nav__foot { margin-top: auto; padding-top: 2rem; }
}