/* ============================================================
 * Modül şablonları (helpers/modul_templates/*) — Edunex teması üstü
 * Temanın main.css'ine dokunulmaz. Renkler temanın --tj-* değişkenlerinden.
 * Plan: plan/fazlar/F02_modul_sablonlari.md (F2-T5)
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. Sarmalayıcı (ModulTasarimSar) ve genel
 * ------------------------------------------------------------ */
.modul-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; }
.modul-wrap + .modul-wrap { margin-top: 80px; }
@media (max-width: 991px) { .modul-wrap + .modul-wrap { margin-top: 56px; } }
/* Panelde zemin rengi/görseli verilmiş modül: içerik kenara yapışmasın */
.modul-wrap[style*="background"] { border-radius: 24px; padding-inline: clamp(20px, 4vw, 48px); }
.modul-wrap[style*="background"]:not([style*="padding-top"]) { padding-top: 48px; }
.modul-wrap[style*="background"]:not([style*="padding-bottom"]) { padding-bottom: 48px; }

.modul-wrap.modul-has-bg,
.modul-wrap.modul-has-overlay { position: relative; isolation: isolate; overflow: hidden; }
.modul-wrap > .modul-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.modul-wrap.modul-has-bg > .modul-inner,
.modul-wrap.modul-has-overlay > .modul-inner { position: relative; z-index: 1; }

.modul-align-left { text-align: left; }
.modul-align-center { text-align: center; }
.modul-align-right { text-align: right; }
.modul-align-center .sec-heading { margin-inline: auto; }

/* Koyu tema: temanın lacivert zemini, açık yazı */
.modul-tema-koyu { background-color: #272f54; color: rgba(255, 255, 255, 0.82); }
.modul-tema-koyu :is(h1, h2, h3, h4, h5, h6, .sec-title, .title, .name, .tj-fs-h5, .tj-fs-h6, strong) { color: #fff; }
.modul-tema-koyu .sec-subtitle { color: #fff; background-color: rgba(255, 255, 255, 0.1); }
.modul-tema-koyu .tema-icerik,
.modul-tema-koyu .desc,
.modul-tema-koyu p { color: rgba(255, 255, 255, 0.78); }
.modul-tema-koyu .tema-icerik a { color: #fff; }

@media (max-width: 767px) { .modul-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .modul-hide-desktop { display: none !important; } }

.modul-fit-cover img { object-fit: cover !important; }
.modul-fit-contain img { object-fit: contain !important; background-color: transparent; }
.modul-fit-fill img { object-fit: fill !important; }
.modul-fit-cover [style*="background-image"] { background-size: cover !important; }
.modul-fit-contain [style*="background-image"] { background-size: contain !important; background-repeat: no-repeat; background-position: center; }
.modul-fit-fill [style*="background-image"] { background-size: 100% 100% !important; }

/* Sayfa modül ızgarası (SayfaModulleriRender) */
.tema-modul-izgara > [class*="col"] > .modul-wrap + .modul-wrap { margin-top: 30px; }
@media (min-width: 992px) { .tema-modul-izgara > .tema-kolon-5 { flex: 0 0 20%; max-width: 20%; } }  /* panelde 1/5 genişlik */

.tema-modul { position: relative; }
.tema-modul-baslik { margin-bottom: 40px; }
.tema-modul-baslik .sec-title { margin-bottom: 0; }
.tema-modul-baslik .sec-title span { color: var(--tj-color-theme-primary); }
.tema-modul-baslik .desc { margin-top: 14px; color: var(--tj-color-text-body); font-size: 17px; line-height: 1.7; }
.tema-modul-baslik .desc > :last-child { margin-bottom: 0; }
.tema-modul-baslik.sec-heading-center { max-width: 720px; }
@media (max-width: 767px) { .tema-modul-baslik { margin-bottom: 28px; } }

.tema-modul-buton { margin-top: 28px; }
.tema-kart-link, .tema-kart-link:hover { color: inherit; text-decoration: none; }

/* Temanın koyu zemin için tasarlanmış özellik kartı: sayfa içinde açık zemin varyantı */
.tema-modul .tj-feature-card {
  display: block;
  background-color: #fff;
  border: 1px solid var(--tj-color-border-3);
  box-shadow: 0 15px 30px var(--tj-color-shadow-1);
  backdrop-filter: none;
}
.tema-modul .tj-feature-card .tj-feature-icon { margin-bottom: 26px; background-color: var(--tj-color-theme-primary); }
.tema-modul .tj-feature-card .title { color: var(--tj-color-heading-primary); }
.tema-modul .tj-feature-card p { color: var(--tj-color-text-body); }
.modul-tema-koyu .tema-modul .tj-feature-card { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.modul-tema-koyu .tema-modul .tj-feature-card p { color: rgba(255, 255, 255, 0.72); }
.modul-tema-koyu .tema-modul .tj-feature-card .title { color: #fff; } /* üstteki açık zemin kuralı (0,3,0) koyu temadaki başlığı eziyordu */

/* ------------------------------------------------------------
 * 2. Kart (kart_grid)
 * ------------------------------------------------------------ */
.tema-kart {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--tj-color-border-3); border-radius: 18px; overflow: hidden;
  box-shadow: 0 15px 30px var(--tj-color-shadow-1); color: var(--tj-color-text-body);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.tema-kart--link:hover { transform: translateY(-6px); box-shadow: 0 30px 60px var(--tj-color-shadow-2); color: var(--tj-color-text-body); }
.tema-kart__gorsel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tj-color-theme-bg-10); }
.tema-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tema-kart--link:hover .tema-kart__gorsel img { transform: scale(1.05); }
.tema-kart__gorsel .tema-gorsel-yok { height: 100%; }
.tema-kart__govde { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 24px 26px 28px; }
.tema-kart__baslik { display: block; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-sbold); }
.tema-kart__metin { display: block; font-size: 15px; line-height: 1.6; }
.tema-kart__ok {
  align-self: flex-start; margin-top: auto; padding-top: 12px; font-size: 20px; color: var(--tj-color-theme-primary);
  transition: transform 0.3s ease;
}
.tema-kart--link:hover .tema-kart__ok { transform: translateX(6px); }

/* ------------------------------------------------------------
 * 3. Alıntı (alintilar)
 * ------------------------------------------------------------ */
.tema-alinti {
  position: relative; margin: 0; padding: clamp(28px, 5vw, 56px); border-radius: 24px;
  background: var(--tj-color-theme-bg-10); border: 1px solid var(--tj-color-border-3);
}
.tema-alinti__ikon {
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--tj-color-theme-primary); color: #fff; font-size: 26px; margin-bottom: 22px;
}
.tema-alinti__metin {
  margin: 0; font-family: var(--tj-ff-heading); font-size: clamp(21px, 2.6vw, 30px); line-height: 1.45;
  font-weight: var(--tj-fw-medium); color: var(--tj-color-heading-primary);
}
.tema-alinti__yazar { margin-top: 20px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-theme-primary); }
.tema-alinti__yazar::before { content: "— "; }
.tema-alinti__yazar a { color: inherit; }
.modul-tema-koyu .tema-alinti { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }

/* ------------------------------------------------------------
 * 4. Çağrı bandı ve tek özellik (cta_banner, tek_ozellik — tj-promo-card)
 * ------------------------------------------------------------ */
.tema-cta, .tema-ozellik { padding: 30px; padding-inline-start: clamp(24px, 4vw, 48px); }
.tema-cta--gorselsiz { padding-block: clamp(30px, 5vw, 56px); }
.tema-cta .tj-promo-content > :last-child,
.tema-ozellik .tj-promo-content > :last-child { margin-bottom: 0; }
.tema-cta .tj-btn-primary, .tema-ozellik .tj-btn-primary { margin-top: 10px; }
.tema-ozellik .desc.tema-icerik { font-size: 16px; }
@media (max-width: 767px) {
  .tema-cta, .tema-ozellik { flex-direction: column-reverse; align-items: stretch; padding: 20px; }
  .tema-cta .tj-promo-img, .tema-ozellik .tj-promo-img { width: 100%; aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------
 * 5. Ekip ve formlar
 * ------------------------------------------------------------ */
.tema-ekip-sosyal { margin-top: 14px; }
.tema-ekip-sosyal a { width: 36px; height: 36px; font-size: 15px; }

.tema-form-sade { padding: 0; background: transparent; border: 0; box-shadow: none; }
.tema-form-sade .form-input input,
.tema-form-sade .form-input textarea { background-color: #fff; }
.tema-onay { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 22px; padding-left: 0; } /* Bootstrap .form-check girintisi: kutu diğer onay kutularıyla hizalı */
.tema-onay .form-check-input { flex: 0 0 auto; margin-top: 4px; margin-left: 0; float: none; }
.tema-onay .form-check-label { font-size: 14px; line-height: 1.55; color: var(--tj-color-text-body); }
.tema-onay a, .tema-onay button { color: var(--tj-color-theme-primary); text-decoration: underline; background: none; border: 0; padding: 0; }
.tema-modul .form-input .cf-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); }
.tema-modul .form-input .form-control[type="file"] { padding: 12px 14px; border-radius: 10px; }
.tema-modul .form-text { display: block; margin-top: 6px; color: var(--tj-color-text-body-3); font-size: 13px; }

/* Form sonuç modalı */
.tema-sonuc-modal .modal-content { border: 0; border-radius: 20px; }
.tema-sonuc-modal .modal-body { padding: 40px 32px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tema-sonuc-modal__ikon {
  display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%;
  font-size: 30px; color: #1f9d63; background: rgba(31, 157, 99, 0.12);
}
.tema-sonuc-modal__metin { margin: 0 0 12px; color: var(--tj-color-text-body); }
.tema-sonuc-modal h3 { margin: 0; }
.tema-sonuc-modal--hata .tema-sonuc-modal__ikon { color: #d93a2b; background: rgba(217, 58, 43, 0.1); }

/* ------------------------------------------------------------
 * 6. Slider (galeri_slider, sertifikalar, urun_listesi — Swiper, js/moduller-tema.js)
 * ------------------------------------------------------------ */
.tema-slider .swiper { overflow: hidden; }
/* Temanın .tj-course-slider sınıfı KULLANILMAZ: main.js onu kendi ayarlarıyla Swiper olarak başlatıyor (çift başlatma). */
.tema-slider .tema-paket-slider { padding: 20px; margin: -20px; }
.tema-paket-slider .tj-course-item { box-shadow: 0 10px 20px var(--tj-color-shadow-1); }
.tema-slider .swiper-slide { height: auto; }
.tema-slider .swiper-slide > * { height: 100%; }
/* urun_listesi grid: aynı satırdaki paket kartları eşit boyda (başlık satır sayısı farklı olsa da) */
.tema-modul .row > .col > .tj-course-item { height: 100%; }
.tema-slider__kontrol { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.tema-slider__onceki,
.tema-slider__sonraki {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--tj-color-border-3); background: #fff; color: var(--tj-color-heading-primary); font-size: 18px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.tema-slider__onceki:hover,
.tema-slider__sonraki:hover { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: #fff; }
.tema-slider__onceki.swiper-button-disabled,
.tema-slider__sonraki.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
.tema-slider__noktalar { display: flex; gap: 8px; width: auto !important; position: static !important; }
.tema-slider__noktalar .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 !important; opacity: 1; background: var(--tj-color-border-3); transition: width 0.3s, background-color 0.3s; }
.tema-slider__noktalar .swiper-pagination-bullet-active { width: 26px; border-radius: 6px; background: var(--tj-color-theme-primary); }
.tema-slider__kontrol.swiper-pagination-lock,
.tema-slider__noktalar.swiper-pagination-lock { display: none; }

/* ------------------------------------------------------------
 * 7. Galeri kartı (galeri_slider)
 * ------------------------------------------------------------ */
.tema-galeri-kart { position: relative; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tj-color-theme-bg-10); }
.tema-galeri-kart img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tema-galeri-kart:hover img { transform: scale(1.05); }
.tema-galeri-kart__yazi {
  position: absolute; inset: auto 0 0 0; padding: 40px 20px 16px; color: #fff; font-size: 15px; font-weight: var(--tj-fw-medium);
  background: linear-gradient(0deg, rgba(15, 19, 33, 0.78), rgba(15, 19, 33, 0));
}

/* ------------------------------------------------------------
 * 8. Harita ve iFrame
 * ------------------------------------------------------------ */
.tema-harita { width: 100%; max-width: 100%; border-radius: 20px; overflow: hidden; background: var(--tj-color-theme-bg-10); }
.tema-harita iframe { display: block; width: 100%; height: 100%; border: 0; }
.tema-harita-kart { height: 100%; }
.tema-harita-kart__adres { margin-bottom: 18px; color: var(--tj-color-text-body); line-height: 1.65; }
.tema-harita-kart__adres > :last-child { margin-bottom: 0; }
@media (max-width: 991px) { .tema-harita { max-height: 360px; } }

.tema-iframe { width: 100%; max-width: 100%; }
.tema-iframe iframe { border: 0; width: 100%; }
.tema-iframe:not(.ratio) iframe { height: 100%; }
.tema-iframe--kart { border-radius: 20px; overflow: hidden; border: 1px solid var(--tj-color-border-3); box-shadow: 0 15px 30px var(--tj-color-shadow-1); background: #fff; }
.tema-iframe--sade { border-radius: 0; }

/* ------------------------------------------------------------
 * 9. İstatistik (istatistik)
 * ------------------------------------------------------------ */
.tema-modul .tj-counter-item { height: 100%; border: 0; border-radius: 18px; padding: 30px 26px; }
.tema-modul .tj-counter-item { container-type: inline-size; }
/* Sayı + ek ("12.500+") bölünmez; boyut kart genişliğine göre (temanın sabit 80px'i dört kolonda sığmıyordu) */
.tema-modul .tj-counter-item .counter-number { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; font-size: clamp(36px, 22cqi, 72px); }
.tema-sayac-aciklama { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--tj-color-text-body); }
.tema-bilgi-karti { text-align: left; }
.tema-bilgi-karti__sayi {
  display: block; margin-bottom: 14px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold);
  font-size: clamp(36px, 4vw, 48px); line-height: 1; color: var(--tj-color-theme-primary);
}

/* ------------------------------------------------------------
 * 10. Bağlantı listesi (link_listesi — tema-dosya satırı tema-ozel.css'te)
 * ------------------------------------------------------------ */
.tema-dosya__aciklama { letter-spacing: 0; font-size: 14px; line-height: 1.5; margin-top: 2px; }
.tema-dosya__ikon img { width: 24px; height: 24px; object-fit: contain; }

/* ------------------------------------------------------------
 * 11. Logolar (marka_logolari)
 * ------------------------------------------------------------ */
.tema-logo-serit { overflow: hidden; }
.tema-logo-serit .tj-client-item img { max-height: 56px; width: auto; }
.tema-logolar__oge {
  display: flex; align-items: center; justify-content: center; height: 100px; padding: 16px;
  border: 1px solid var(--tj-color-border-3); border-radius: 16px; background: #fff;
}
.tema-logolar__oge a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tema-logolar__oge img { max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.tema-logolar__oge:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------
 * 12. Koyu panel (mavi_panel)
 * ------------------------------------------------------------ */
.tema-koyu-panel {
  padding: clamp(28px, 5vw, 64px); border-radius: 30px; background: #272f54; color: rgba(255, 255, 255, 0.8);
  position: relative; overflow: hidden; isolation: isolate;
}
.tema-koyu-panel::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 62, 195, 0.45), rgba(114, 62, 195, 0));
}
.tema-koyu-panel__giris { max-width: 760px; margin-bottom: 36px; }
.tema-koyu-panel__giris .sec-subtitle { color: #fff; background-color: rgba(255, 255, 255, 0.1); }
.tema-koyu-panel__giris .tema-icerik { color: rgba(255, 255, 255, 0.82); }
.tema-koyu-panel__giris .tema-icerik :is(h2, h3, h4, strong) { color: #fff; }
.tema-koyu-panel__gorsel { border-radius: 20px; overflow: hidden; }
.tema-koyu-panel__gorsel img { width: 100%; height: auto; display: block; }
/* Koyu zeminde akordiyon okunur kalsın: kartlar beyaz kalır, gölge koyu zemine göre */
.tema-koyu-panel .tj-faq-3 .tj-accordion-item { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18); }
/* Panelin beyaz metin rengi beyaz kartlara miras kalmasın (tema .tj-accordion-content'e renk vermiyor → gövde görünmüyordu) */
.tema-koyu-panel .tj-faq-3 .tj-accordion-item { color: var(--tj-color-text-body); }

/* ------------------------------------------------------------
 * 13. Pasta grafik (pasta_grafik)
 * ------------------------------------------------------------ */
.tema-pasta { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tema-pasta svg { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.tema-pasta__dilim1,
.tema-pasta__dilim2 { transition: stroke-dasharray 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.tema-pasta__dilim2 { transition-delay: 0.9s; }
.tema-pasta.pg--go .tema-pasta__dilim1 { stroke-dasharray: var(--pg-uz1) var(--pg-cevre); }
.tema-pasta.pg--go .tema-pasta__dilim2 { stroke-dasharray: var(--pg-uz2) var(--pg-cevre); }
.tema-pasta__lejant { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.tema-pasta__lejant li { display: inline-flex; align-items: center; gap: 8px; color: var(--tj-color-text-body); }
.tema-pasta__lejant strong { color: var(--tj-color-heading-primary); }
.tema-pasta__nokta { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .tema-pasta__dilim1, .tema-pasta__dilim2 { transition: none; }
}

/* ------------------------------------------------------------
 * 14. Sertifika (sertifikalar)
 * ------------------------------------------------------------ */
.tema-sertifika {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--tj-color-border-3); border-radius: 18px; box-shadow: 0 15px 30px var(--tj-color-shadow-1);
}
.tema-sertifika__gorsel { display: block; aspect-ratio: 4 / 3; padding: 16px; background: var(--tj-color-theme-bg-10); }
.tema-sertifika__gorsel img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
a.tema-sertifika__gorsel:hover img { transform: scale(1.04); }
.tema-sertifika__govde { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; flex: 1 1 auto; }
.tema-sertifika__govde h3 { margin: 0; }
.tema-sertifika__govde p { margin: 0; font-size: 15px; line-height: 1.6; }
.tema-sertifika__govde .tj-text-btn { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.tema-sertifika--yatay { flex-direction: row; align-items: stretch; }
.tema-sertifika--yatay .tema-sertifika__gorsel { flex: 0 0 220px; aspect-ratio: auto; }
@media (max-width: 575px) {
  .tema-sertifika--yatay { flex-direction: column; }
  .tema-sertifika--yatay .tema-sertifika__gorsel { flex-basis: auto; aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------
 * 15. Video (video)
 * ------------------------------------------------------------ */
.tema-video { background: var(--tj-color-theme-bg-10); }
.tema-video img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.tema-video .tema-gorsel-yok { aspect-ratio: 16 / 9; }
.tema-video .video-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform 0.3s ease; }
.tema-video .video-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.tema-video--yerel video { display: block; width: 100%; max-width: 100%; height: auto; background: #000; }
.tema-video > a.tema-lb { display: block; }

/* ------------------------------------------------------------
 * 16. Yan akordiyon (yan_akordiyon) — yatay şerit, mobilde dikey
 * ------------------------------------------------------------ */
.tema-serit { display: flex; gap: 12px; height: clamp(420px, 42vw, 540px); }
.tema-serit__oge {
  position: relative; flex: 0 0 84px; min-width: 0; overflow: hidden; isolation: isolate;
  border-radius: 20px; background: #272f54; color: #fff;
  transition: flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1), flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tema-serit__oge.acik { flex: 1 1 auto; }
.tema-serit__oge--gorselsiz { background: linear-gradient(160deg, #723ec3, #272f54); }
.tema-serit__zemin {
  position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 0.8s ease;
}
.tema-serit__oge.acik .tema-serit__zemin { transform: scale(1); }
.tema-serit__oge::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(15, 19, 33, 0.85) 0%, rgba(15, 19, 33, 0.25) 60%, rgba(15, 19, 33, 0.35) 100%);
}
.tema-serit__tetik {
  position: absolute; inset: 0; z-index: 2; width: 100%; padding: 24px 0; border: 0; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer;
}
.tema-serit__oge.acik .tema-serit__tetik { pointer-events: none; opacity: 0; }
.tema-serit__etiket {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: calc(100% - 70px); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 18px;
}
.tema-serit__ikon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); font-size: 16px; transition: background-color 0.3s;
}
.tema-serit__tetik:hover .tema-serit__ikon,
.tema-serit__tetik:focus-visible .tema-serit__ikon { background: var(--tj-color-theme-primary); }
.tema-serit__tetik:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 20px; }
.tema-serit__panel {
  position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(22px, 3vw, 36px);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.tema-serit__oge.acik .tema-serit__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0.25s, 0.25s, 0s; }
.tema-serit__kart { max-width: 560px; }
.tema-serit__baslik { color: #fff; margin-bottom: 10px; }
.tema-serit__metin { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.tema-serit__metin > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .tema-serit { flex-direction: column; height: auto; }
  .tema-serit__oge, .tema-serit__oge.acik { flex: 0 0 auto; }
  .tema-serit__oge { min-height: 72px; }
  .tema-serit__oge.acik { min-height: 340px; }
  .tema-serit__tetik { flex-direction: row; padding: 0 20px; }
  .tema-serit__etiket { writing-mode: horizontal-tb; transform: none; max-height: none; max-width: calc(100% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .tema-serit__oge, .tema-serit__zemin, .tema-serit__panel { transition: none; }
}

/* ------------------------------------------------------------
 * 17. Zaman tüneli (zaman_tuneli)
 * ------------------------------------------------------------ */
.tema-zaman { list-style: none; margin: 0; padding: 0; position: relative; }
.tema-zaman__nokta {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--tj-color-theme-primary); box-shadow: 0 0 0 6px var(--tj-color-theme-bg-9);
}
.tema-zaman__tarih {
  display: inline-block; padding: 4px 12px; border-radius: 30px; font-size: 14px; font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-theme-primary); background: var(--tj-color-theme-bg-9);
}
.tema-zaman__kart {
  background: #fff; border: 1px solid var(--tj-color-border-3); border-radius: 18px;
  box-shadow: 0 15px 30px var(--tj-color-shadow-1); padding: 22px 24px;
}
.tema-zaman__baslik { margin: 10px 0 6px; }
.tema-zaman__kart > .tema-zaman__baslik:first-child { margin-top: 0; }
.tema-zaman__metin { font-size: 15px; line-height: 1.65; color: var(--tj-color-text-body); }
.tema-zaman__metin > :last-child { margin-bottom: 0; }
.tema-zaman__gorsel { display: block; width: 100%; max-width: 100%; height: auto; margin-top: 16px; border-radius: 12px; }

/* Dikey: sol çizgi */
.tema-zaman--dikey { padding-left: 40px; }
.tema-zaman--dikey::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--tj-color-border-3); }
.tema-zaman--dikey .tema-zaman__oge { position: relative; }
.tema-zaman--dikey .tema-zaman__oge + .tema-zaman__oge { margin-top: 24px; }
.tema-zaman--dikey .tema-zaman__nokta { left: -40px; top: 26px; }
@media (min-width: 992px) { .tema-zaman--dikey .tema-zaman__kart { max-width: 760px; } }

/* Yatay: üst çizgi, taşarsa kaydırılır */
.tema-zaman--yatay {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 24px;
  overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x proximity;
}
.tema-zaman--yatay::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: var(--tj-color-border-3); }
.tema-zaman--yatay .tema-zaman__oge { position: relative; padding-top: 44px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.tema-zaman--yatay .tema-zaman__nokta { left: 0; top: 0; }
.tema-zaman--yatay .tema-zaman__tarih { align-self: flex-start; }
.tema-zaman--yatay .tema-zaman__kart { flex: 1 1 auto; }
@media (max-width: 767px) {
  .tema-zaman--yatay { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-left: 40px; }
  .tema-zaman--yatay::before { left: 8px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .tema-zaman--yatay .tema-zaman__oge { padding-top: 0; }
  .tema-zaman--yatay .tema-zaman__nokta { left: -40px; top: 4px; }
}

/* Koyu tema uyumları (kartlar beyaz kalır, çizgiler açık) */
.modul-tema-koyu .tema-zaman::before { background: rgba(255, 255, 255, 0.2); }
.modul-tema-koyu :is(.tema-kart, .tema-sertifika, .tema-zaman__kart) :is(h3, .tema-kart__baslik) { color: var(--tj-color-heading-primary); }
.modul-tema-koyu :is(.tema-kart, .tema-sertifika, .tema-zaman__kart) p { color: var(--tj-color-text-body); }

/* Bot tuzagi (iletisim_formu honeypot): ekran okuyucu ve klavye disi, gorsel olarak gizli */
.tema-bal { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }