/* =========================================================================
 * Pakize.Net — "Öğretmenini Seç" Hero Section
 * Tamamı #teacherHero altında namespace'lenmiştir; site Tailwind'iyle çakışmaz.
 * Tema: tamamen beyaz arka plan · siyah/gri tipografi · Poppins
 * =======================================================================*/

#teacherHero {
  --th-bg: #ffffff;             /* tamamen beyaz arka plan */
  --th-ink: #111111;            /* siyah — başlık, isim, vurgu metin */
  --th-ink-2: #6b6b6b;          /* gri — ikincil metin */
  --th-ink-3: #9aa0a6;          /* açık gri — etiket/placeholder */
  --th-line: #e7e7e4;           /* ince ayırıcı/border */
  --th-panel: #f3f2ef;          /* çok açık gri panel */
  --th-card: #fcfcfb;           /* kart yüzeyi */
  --th-accent: #111111;         /* monokrom vurgu (aktif nokta, çizgi) */
  --th-accent-soft: rgba(17, 17, 17, 0.06);

  --th-height: 500px;           /* seçim ekranı yüksekliği (istenen 500px) */
  --th-char-h: clamp(190px, 23vw, 290px);  /* karakter — küçültüldü, ~400px altı */
  --th-char-lift: 40px;         /* karakterleri dikey merkezden yukarı al (üst boşluğu azalt) */

  position: relative;
  width: 100%;
  min-height: var(--th-height);
  height: var(--th-height);
  overflow: hidden;
  background: var(--th-bg);
  color: var(--th-ink);
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  isolation: isolate;
  user-select: none;
  transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#teacherHero *,
#teacherHero *::before,
#teacherHero *::after { box-sizing: border-box; }

/* ---------- Arka plan katmanları (beyaz sabit) ---------- */
.th-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--th-bg); }
.th-bg-layer { position: absolute; inset: 0; background: var(--th-bg); }
.th-bg-b { opacity: 0; }

/* dekoratif ışıklar beyaz temada kapalı */
.th-glow { display: none; }

/* arka plan tamamen beyaz — desen/ızgara yok */
.th-grid { display: none; }
/* aktif karakter arkasında çok hafif nötr hale (beyazda derinlik) */
.th-stage-glow {
  position: absolute; left: 50%; top: 46%;
  width: 360px; height: 300px; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(17, 17, 17, 0.05) 0%, transparent 66%);
  filter: blur(12px);
}

/* ---------- Başlık ---------- */
.th-head {
  position: absolute; left: clamp(1rem, 4vw, 3.5rem); top: clamp(0.4rem, 1.4vh, 0.9rem);
  z-index: 5; width: fit-content; max-width: min(600px, 74%); pointer-events: none;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
}
.th-eyebrow {
  margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: none; color: var(--th-ink-2);
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.th-eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--th-ink); border-radius: 2px;
}
.th-title {
  margin: 0; font-weight: 800; font-style: italic; line-height: 1.0; color: var(--th-ink);
  font-size: clamp(1.2rem, 4.0vw, 2.0rem); letter-spacing: -0.01em;
}
/* Kelime kelime giriş animasyonu için kelime kutuları */
.th-title .th-word,
.th-subtitle .th-word {
  display: inline-block; will-change: transform, opacity;
}
/* Slogan — soldan sağa harf harf bold + italic dönüşümü */
.th-subtitle .th-letter {
  display: inline-block; transition: font-weight 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.th-subtitle .th-letter.is-strong {
  color: #000000;
}
.th-underline {
  display: block; width: 68px; height: 3px; margin: 0.85rem 0 0.7rem;
  border-radius: 3px; background: linear-gradient(90deg, var(--th-ink), transparent);
}
.th-subtitle {
   margin-top:5px;
    font-size: clamp(0.8rem, 2.0vw, 1.0rem);
    font-weight: 300;
    color: gray;
    width: 100%;
    max-width: none;
}

/* Slogan link hâli — bir tık küçük, başında >> işareti, tıklanabilir
   (th-head pointer-events: none olduğundan burada geri açılır) */
.th-subtitle-link {
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  font-size: clamp(0.72rem, 1.6vw, 0.88rem);
  transition: color 0.2s ease;
}
.th-subtitle-link::before { content: ">> "; font-weight: 600; }
.th-subtitle-link:hover { color: #000000; font-weight: 700; }

/* ---------- Sahne / karakter alanı ---------- */
.th-stage {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
}
.th-track {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}

.th-card {
  position: absolute; left: 50%;
  /* hero'nun dikey ortasında; --th-char-lift kadar hafif yukarıda */
  bottom: calc(50% - (var(--th-char-h) / 2) + var(--th-char-lift));
  width: clamp(140px, 16vw, 210px); height: var(--th-char-h);
  margin-left: calc(clamp(140px, 16vw, 210px) / -2);
  transform-origin: bottom center;
  cursor: pointer; will-change: transform, opacity, filter;
  outline: none;
}
.th-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 20px 26px rgba(17, 17, 17, 0.16));
  pointer-events: none;
}
/* seçim ekranında karakterler ortada "yüzer"; yer gölgesi gösterilmez.
   Detay ekranında (yerde duran figür) yeniden görünür. */
.th-card-pedestal {
  position: absolute; left: 50%; bottom: -6px; width: 78%; height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(17, 17, 17, 0.12) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.th-detail-media .th-card.is-active .th-card-pedestal { opacity: 1; }
.th-card:focus-visible {
  outline: 2px solid var(--th-ink); outline-offset: 6px; border-radius: 12px;
}

/* Görsel yüklenemezse placeholder rozet */
.th-card-fallback {
  position: absolute; inset: auto 0 12% 0; margin: 0 auto; width: 84px; height: 84px;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--th-panel);
  border: 1px solid var(--th-line); color: var(--th-ink);
  font-weight: 700; font-size: 1.4rem;
}
.th-card.img-error .th-card-img { display: none; }
.th-card.img-error .th-card-fallback { display: flex; }

/* ---------- Alt kontrol alanı ---------- */
.th-controls {
  position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 4vh, 2.2rem);
  z-index: 6; display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem); padding: 0 clamp(1rem, 4vw, 3.5rem);
}
.th-nav {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; color: var(--th-ink);
  border: 1px solid var(--th-line); cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(17, 17, 17, 0.25);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.th-nav svg { width: 22px; height: 22px; transition: transform 0.25s ease; }
.th-nav:hover { border-color: var(--th-ink); background: var(--th-panel); }
.th-prev:hover svg { transform: translateX(-3px); }
.th-next:hover svg { transform: translateX(3px); }
.th-nav:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }

.th-active-info {
  flex: 1 1 auto; max-width: 460px; text-align: center;
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  /* karakterin üstüne binen metin beyaz zeminde okunur kalsın */
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.95);
}
.th-active-branch {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--th-ink-2); font-weight: 600; margin-bottom: 0.25rem;
}
.th-active-name {
  margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.55rem); font-weight: 700; line-height: 1.1;
  color: var(--th-ink);
}
.th-active-desc {
  margin: 0.28rem 0 0; font-size: 0.85rem; font-weight: 400; color: var(--th-ink-2);
}

/* Sayfa noktaları */
.th-dots {
  position: absolute; left: 50%; bottom: -0.15rem; transform: translateX(-50%);
  display: flex; gap: 7px;
}
.th-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: rgba(17, 17, 17, 0.2); cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.th-dot.is-active { width: 20px; border-radius: 4px; background: var(--th-ink); }
.th-dot:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }

/* ---------- Detay paneli ---------- */
.th-detail {
  position: absolute; inset: 0; z-index: 8;
  display: grid; grid-template-columns: minmax(220px, 38%) 1fr;
  pointer-events: none; opacity: 0; visibility: hidden;
  background: var(--th-bg);
}
#teacherHero.is-detail .th-detail { pointer-events: auto; }

.th-detail-media {
  position: relative; align-self: end; justify-self: center;
  width: 100%; height: 100%;
}
/* Flip ile taşınan aktif görsel bu konteynıra oturur — küçültülüp yukarı/ortaya alındı */
.th-detail-media .th-card {
  position: absolute; left: 50%;
  bottom: clamp(28px, 7vh, 64px);
  width: clamp(160px, 20vw, 250px); height: clamp(230px, 38vh, 350px);
  margin-left: calc(clamp(160px, 20vw, 250px) / -2);
}

.th-detail-info {
  position: relative; align-self: stretch; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(0.8rem, 2vh, 1.3rem) clamp(1.1rem, 2.6vw, 2.2rem) 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--th-bg);
}
.th-detail-info::-webkit-scrollbar { width: 6px; }
.th-detail-info::-webkit-scrollbar-thumb { background: rgba(17, 17, 17, 0.16); border-radius: 3px; }

.th-d-row { display: flex; align-items: center; gap: 0.6rem; }
/* İlk satır (kategori + uygunluk) sağdaki geri butonuyla çakışmasın */
.th-detail-info > .th-d-row:first-child { padding-right: 3.4rem; }
.th-d-cat {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--th-ink-2);
}
.th-d-line { flex: 1 1 auto; height: 1px; background: var(--th-line); }
.th-d-avail {
  font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.th-d-avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.th-d-avail.available { color: #0f9d58; background: rgba(15, 157, 88, 0.1); }
.th-d-avail.limited   { color: #b7791f; background: rgba(183, 121, 31, 0.1); }
.th-d-avail.busy      { color: #c5372b; background: rgba(197, 55, 43, 0.1); }

.th-d-name { margin: 0.05rem 0 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.02; color: var(--th-ink); }
.th-d-sub  { margin: 0; font-size: 0.82rem; color: var(--th-ink-2); font-weight: 400; }
.th-d-edu  {
  margin: 0.05rem 0 0; font-size: 0.76rem; color: var(--th-ink-2);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.th-d-edu svg { width: 14px; height: 14px; color: var(--th-ink); flex: 0 0 auto; }

.th-d-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.1rem;
}
.th-d-stat {
  background: var(--th-card); border: 1px solid var(--th-line);
  border-radius: 9px; padding: 0.38rem 0.3rem; text-align: center;
}
.th-d-stat b { display: block; font-size: 0.95rem; font-weight: 700; color: var(--th-ink); line-height: 1.15; }
.th-d-stat span { font-size: 0.58rem; letter-spacing: 0.03em; color: var(--th-ink-3); text-transform: uppercase; }

.th-d-heading {
  margin: 0.3rem 0 0.02rem; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--th-ink-3); font-weight: 600;
}
.th-d-desc {
  margin: 0; font-size: 0.8rem; line-height: 1.42; color: var(--th-ink-2); font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.th-d-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.th-d-chip {
  font-size: 0.7rem; padding: 0.26rem 0.6rem; border-radius: 999px;
  background: var(--th-ink); color: #ffffff; border: 1px solid var(--th-ink);
}
.th-d-chip.plain { background: var(--th-panel); color: var(--th-ink); border-color: var(--th-line); }
.th-d-chip svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

.th-d-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.th-d-pack {
  background: var(--th-card); border: 1px solid var(--th-line);
  border-radius: 10px; padding: 0.45rem 0.55rem; transition: border-color 0.2s ease, background 0.2s ease;
}
.th-d-pack:hover { border-color: var(--th-ink); background: var(--th-panel); }
.th-d-pack strong { display: block; font-size: 0.78rem; color: var(--th-ink); line-height: 1.2; }
.th-d-pack em { font-style: normal; display: block; font-size: 0.64rem; color: var(--th-ink-3); margin: 0.05rem 0 0.15rem; }
.th-d-pack .price { font-size: 0.78rem; font-weight: 700; color: var(--th-ink); }

/* Butonlar panelin altına sabitlenir — içerik uzasa bile her zaman görünür */
.th-d-actions {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  position: sticky; bottom: 0; margin-top: auto;
  padding: 0.6rem 0 0.9rem; background: var(--th-bg);
}
.th-d-actions::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  background: linear-gradient(to top, var(--th-bg), transparent); pointer-events: none;
}
.th-btn {
  flex: 1 1 auto; min-width: 140px; border: none; cursor: pointer;
  padding: 0.62rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.th-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.th-btn-primary { background: var(--th-ink); color: #ffffff; }
.th-btn-primary:hover { transform: translateY(-1px); background: #000000; }
.th-btn-primary:hover svg { transform: translateX(3px); }
.th-btn-ghost { background: #ffffff; color: var(--th-ink); border: 1px solid var(--th-line); }
.th-btn-ghost:hover { border-color: var(--th-ink); background: var(--th-panel); }
.th-btn:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 2px; }

.th-back {
  position: absolute; top: clamp(0.8rem, 2.4vh, 1.4rem); right: clamp(0.9rem, 2.4vw, 1.6rem);
  z-index: 9; width: 42px; height: 42px; border-radius: 50%;
  background: #ffffff; border: 1px solid var(--th-line);
  color: var(--th-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -10px rgba(17, 17, 17, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.th-back:hover { background: var(--th-panel); border-color: var(--th-ink); transform: rotate(-90deg); }
.th-back:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }
.th-back svg { width: 20px; height: 20px; }

/* ---------- Durum sınıfları ---------- */
#teacherHero.is-detail { height: var(--th-height); }
#teacherHero.is-locked { cursor: progress; }

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  #teacherHero { --th-char-h: clamp(180px, 27vw, 270px); }
  .th-detail { grid-template-columns: minmax(180px, 34%) 1fr; }
  .th-d-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  #teacherHero {
    --th-height: 560px;
    --th-char-h: clamp(175px, 50vw, 250px);
    height: auto; min-height: var(--th-height);
  }
  .th-head { max-width: 88%; }
  .th-active-desc { display: none; }
  .th-nav { width: 44px; height: 44px; }

  /* Detay: tek sütun — görsel üstte, bilgiler altta, alan içinde kaydırılır */
  #teacherHero.is-detail { height: auto; min-height: var(--th-height); }
  .th-detail {
    grid-template-columns: 1fr; grid-template-rows: 44% 56%;
  }
  .th-detail-media { grid-row: 1; }
  .th-detail-media .th-card { height: 100%; width: clamp(160px, 46vw, 240px); margin-left: calc(clamp(160px, 46vw, 240px) / -2); }
  .th-detail-info {
    grid-row: 2; border-top: 1px solid var(--th-line);
  }
  .th-d-packages { grid-template-columns: 1fr; }
  .th-d-stats { grid-template-columns: repeat(2, 1fr); }
  /* mobilde geri butonu görsel alanında; ilk satırın sağ boşluğuna gerek yok */
  .th-detail-info > .th-d-row:first-child { padding-right: 0; }
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  #teacherHero, #teacherHero * { transition-duration: 0.001ms !important; }
  .th-card-img { filter: none !important; }
}