/* Kurs sekmesi icerigi — gorsel duzeni (Cember 17 → 21 → 22)
 *
 * KAPSAM BILEREK DARDIR: yalnizca kurs sekmeleri + admin editor onizlemesi ve yalnizca
 * `course-overview.js`'in ELE ALMADIGI sayfalar. Global secici yazilmaz;
 * scripts/test-course-content-styles.js bunu makineyle dogrular.
 *
 * Asagidaki sayilar TAHMIN DEGIL: canli referans galeriden (dinamik kurs sayfasi,
 * course-overview.js) 2026-10-01'de olculmustur — gap 22px, kart padding 10px,
 * radius 14px, kart fonu #f8f9fc, galeri gorseli 440px + object-fit:contain,
 * gorsel tavani min(100%, 600px). Amac: statik sayfalar ayni dizayn diliyle gorunsun.
 *
 * Siniflari `src/services/legacy-overview-layout.js` RENDER aninda ekler; DB'ye yazilmaz,
 * admin editorunde icerik ham ve duzenlenebilir kalir.
 */

/* --- Ortak gorsel tavani: hicbir gorsel kabini asmaz, asiri buyuk duramaz.
 * `width: auto` KULLANILMAZ — o, gorseli dogal boyutuna cikarir (199px rozet 420px olurdu). */
:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview) img {
  max-width: min(100%, 600px);
  height: auto;
}

/* --- Baslik nefes payi: Mimar istegi "en az 2 <br> kadar bosluk".
 * Yalnizca dikey margin — metin yeniden akmaz. */
:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  :is(h1, h2, h3, h4) {
  margin-top: 36px;
}

/* --- 1-4 gorsel: esit yukseklikte, ortalanmis, bosluklu sira.
 * Esit yukseklik, farkli en-boy oranlarina ragmen hizali bir gorunum verir. */
:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  .uv-ov-media {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: center;
  margin: 28px auto;
  padding: 0 16px;
}

:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  .uv-ov-media img {
  height: clamp(200px, 26vw, 320px);
  width: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 9px;
}

/* --- 5+ gorsel: kartli grid. Referans galerinin olculeri birebir kullanilir. */
:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  .uv-ov-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 22px;
  margin: 28px 0;
  padding: 0 16px;
}

:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  .uv-ov-gallery-item {
  padding: 10px;
  border-radius: 14px;
  background: #f8f9fc;
}

:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  .uv-ov-gallery-item img {
  width: 100%;
  height: clamp(220px, 30vw, 400px);
  max-width: none;
  object-fit: contain;
  border-radius: 9px;
}

/* --- "Basari Hikayeleri" CTA kutusu: galeri bolumunun onune tasinir (bkz. legacy-overview-layout.js).
 * Ustteki metne de alttaki "Egitimimizden kareler" basligina da yapismamasi icin nefes payi. */
:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  .alert-success {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* --- Icerikteki <table> ve <iframe> (Cember 28).
 * Olculdu (2026-10-02, animasyon kursu): videolar 144px genisligindeki bir tablonun icindeydi,
 * hucre 71px kaliyor ve iframe 40x23 piksele dusuyordu — yani video pratikte gorunmuyordu.
 * Tablolar tam genislige acilir, iframe'ler 16:9 oraniyla ortalanir. */
:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  table {
  width: 100% !important;
  max-width: 100%;
  table-layout: auto;
}

:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  :is(td, th) {
  width: auto !important;
  /* vertical-align BILEREK verilmez (Cember 29): Cember 28'de eklenen `top` degeri, gorsel
   * hucresi uzun oldugunda metni hucrenin tepesine yapistiriyordu ve altinda 741px bosluk
   * kaliyordu. Tarayici varsayilani `middle` korunur. */
}

:is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
  iframe {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 22px auto;
  border-radius: 9px;
}

/* --- Mobil: tek sutun, daha alcak gorseller. */
@media (max-width: 767px) {
  :is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
    .uv-ov-gallery {
    grid-template-columns: 1fr;
  }

  :is(#tab-info, #tab-additional-content2, #tab-additional-content3, .jodit-wysiwyg):not(.uv-course-overview)
    .uv-ov-media img {
    height: auto;
    max-height: 240px;
  }
}