/* JFS Clinic — EN tedavi sayfalarının ORTAK iki hareketli SVG eskiz katmanı (FAZ 0, 2026-10-01;
   kaynak: onaylı Tummy Tuck pilotunun tummy-tuck-sema.css'i). Sınıf/id adları (.tt-hero, #tt-se)
   pilottan kaldı ve TÜM sayfalarda aynen kullanılır — yeniden adlandırma SVG üreticilerini de bozar.
   SEMA 1 ".tt-hero": eskiz-<bolge>.webp SVG'nin İÇİNE gömülü + 4 renkli işaret/etiket (döngü 10 sn).
     Etiket t0'ları 1.6 / 3.1 / 4.0 / 5.2 sn SÖZLEŞMEDİR (aşağıdaki hs-satir0..3 mobil liste kareleri
     bunlara göre); başka t0 kullanan sayfa kendi <style>'ında hs-satirN'yi ezer.
     Mobil kırpmada gövdenin yatay odak noktası sayfaya özgüdür: figürde style="--tt-odak:-68.75%"
     (= görseldeki odak x / 1600, eksi işaretli). Verilmezse -50% (ortası).
   SEMA 2 "#tt-se": eskiz-kesit.webp üstüne 4 adımlı "How it's done" paneli (döngü 16 sn: 4×3 sn
     adım + ~4 sn kapanış — kesit fotoğrafı bölge eskizine çapraz geçer, "After healing" etiketi).
     4 adım sözleşmedir; farklı adım sayısı sayfanın <style>'ında kendi zamanlamasını taşır.
   Üretici kalıbı: siteler/jfsclinic/arastirma/sema-kaynak/eskiz_ortak.py + <slug>_sema.py.
   Renkler ornek.css değişkenlerinden (--bg #2D2545, --gold #D0A448, --cream #F3EFE8) — ayrı hex yok.
   Her iki panel kendi SVG'si içinde `prefers-reduced-motion` karşılar; bu dosyadaki `.se-*`
   zamanlama kuralları (adım listesi + ilerleme çubuğu, SVG'nin DIŞINDA yaşıyor) aşağıda AYRICA
   susturulur — yoksa SVG durur ama liste/ilerleme çubuğu dönmeye devam eder. */

/* ============================================================ SEMA 1 — hero eskizi */
.tt-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 1600 / 900;
  background: var(--bg, #2D2545);
  box-shadow: var(--shadow-dark);
}
.tt-hero .hero-sema {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tt-hero .hero-sema svg { width: 100%; height: 100%; }

/* JFS işareti, sol üstte, kırpma sarmalayıcısının (.tt-crop) DIŞINDA — mobil yakınlaştırmadan
   etkilenmesin diye figürün kendisine sabitlenmiştir. */
.tt-hero .tt-logo {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 140px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

/* Gövde, 1600x900 kaynağın sağ ~39%'unda (x753-1374) duruyor — geniş 16:9 kutuda masaüstünde
   sorun değil, ama dar mobil ekranda gövde küçük bir şeride sıkışıyordu. v3 (2026-10-01): zemin
   fotoğraf artık ayrı bir <img> DEĞİL, hero SVG'nin İÇİNE <image> olarak gömülü (bkz. eskiz_
   ortak.py hero_svg(resim=...)) — tek öğe, TEK viewBox, TEK preserveAspectRatio. .tt-crop bu
   TEK öğeyi (.hero-sema > svg) taşıyan sarmalayıcı; eskiden iki ayrı kutu (img + svg) aynı
   transformu alıyordu ve teoride hizalı olması gerekiyordu ama pratikte mobilde kesi çizgisi
   görselden kaymış görünüyordu — şimdi görsel ve çizgiler AYNI svg koordinat sisteminde
   olduğu için kayma matematiksel olarak imkânsız. Masaüstünde no-op (inset:0). */
.tt-hero .tt-crop { position: absolute; inset: 0; }
.tt-hero .tt-crop .hero-sema {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Mobilde (≤640px) sol etiket şeridi görsel genişliğinin yarısına sıkışır ve okunmaz olur —
   pilleri gizleyip aynı dört cümleyi görselin ALTINA düz liste olarak düşürüyoruz. Çizgiler
   (kesi/doku/göbek/ok) görselde kalır, yalnız kutulu etiketler kapanır. */
.tt-hero-liste { display: none; }
@media (max-width: 640px) {
  .tt-hero { aspect-ratio: 3 / 4; }
  /* .tt-crop'u kaynak oranında (1600/900) tutup konteyner yüksekliğine göre genişlet — bu onu
     konteynerden GENİŞ yapar (dar/uzun kutu içinde yatay bir 16:9 şerit). left:50% + translateX
     odak noktası tekniği: gövdenin kutu içindeki konumu (v3 govde merkezi x1100/1600 = %68.75)
     konteynerin yatay ortasına denk gelsin diye kutuyu kaydırır — artık .tt-crop TEK çocuk
     (svg, görsel+çizgiler aynı viewBox'ta) taşıdığı için kayma riski yok. */
  .tt-hero .tt-crop {
    inset: auto;
    top: 0;
    left: 50%;
    height: 100%;
    width: auto;
    aspect-ratio: 1600 / 900;
    transform: translateX(var(--tt-odak, -50%));
  }
  .tt-hero .tt-logo { width: 90px; top: 10px; left: 10px; }
  .tt-hero .hero-sema .hs-etiket { display: none; }
  /* Etiket kutuları kapanınca onlara giden altın bağlantı çizgileri (hs-ok) de kapanır —
     yoksa görselin solunda hiçbir şeye işaret etmeyen "yetim" çizgiler kalır. Anatomik
     çizim çizgileri (hs-ok taşımayan hs-alt/hs-cizgi yolları) etkilenmez, görselde kalır. */
  .tt-hero .hero-sema .hs-ok { display: none; }
  .tt-hero-liste {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
  }
  .tt-hero-liste li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: .75rem;
    background: var(--panel, #3F3460);
    border: 1px solid var(--line-dark, rgba(241, 217, 149, .18));
    color: var(--text, #F3EFE8);
    font: 500 14px/1.4 var(--sans, Manrope, Arial, sans-serif);
  }
  .tt-hero-liste li b {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--gold, #D0A448);
    color: var(--ink, #2D2545);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================ SEMA 2 — süreç paneli (4 adım) */
.se-panel {
  --se-sonuk: .55;
  margin: 0;
  padding: var(--s5, 24px);
  border-radius: 1.25rem;
  background: var(--panel, #3F3460);
  border: 1px solid var(--gold, #D0A448);
  box-shadow: var(--shadow-dark);
}
.se-panel .se-bas { margin: 0 0 var(--s4, 16px); }
.se-panel .se-ust {
  margin: 0 0 .25rem;
  font: 700 12px/1 var(--sans, Manrope, Arial, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-pale, #F1D995);
}
.se-panel .se-baslik {
  display: block;
  font: 600 clamp(20px, 3.4vw, 28px) / 1.25 var(--serif, Georgia, serif);
  color: var(--text, #F3EFE8);
}
.se-sahne {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1600 / 900;
  background: var(--bg, #2D2545);
}
.se-sahne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.se-sahne .se-img-kesit { opacity: 1; }
.se-sahne .se-img-govde { opacity: 0; }
.se-katman { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.se-katman svg { width: 100%; height: 100%; }

/* Döngü sonu kapanış karesi: kesit fotoğrafı ~1 sn'de gövde eskizine geçer, nötr bir etiketle. */
.se-kapanis {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: .5rem 1.15rem;
  border-radius: 999px;
  background: rgba(45, 37, 69, .92);
  border: 1px solid var(--gold, #D0A448);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
}
.se-kapanis span {
  display: block;
  white-space: nowrap;
  font: 700 13px/1 var(--sans, Manrope, Arial, sans-serif);
  letter-spacing: .02em;
  color: #fff;
}

.se-ilerleme {
  margin-top: .6rem;
  height: 4px;
  border-radius: 999px;
  background: var(--line-dark, rgba(241, 217, 149, .18));
  overflow: hidden;
}
.se-ilerleme i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold, #D0A448);
  transform-origin: left;
  transform: scaleX(0);
}

.se-adimlar {
  list-style: none;
  margin: var(--s4, 16px) 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
@media (min-width: 860px) {
  .se-adimlar { grid-template-columns: repeat(4, 1fr); gap: .75rem; }
}
.se-adim {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .8rem;
  border-radius: .85rem;
  background: var(--panel-2, #372D53);
  opacity: var(--se-sonuk);
  transition: opacity .25s var(--ease, ease);
}
.se-adim .se-no {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--gold, #D0A448);
  color: var(--ink, #2D2545);
  font: 800 13px/26px var(--sans, Manrope, Arial, sans-serif);
  text-align: center;
}
.se-adim b {
  display: block;
  font: 600 14px/1.3 var(--sans, Manrope, Arial, sans-serif);
  color: var(--text, #F3EFE8);
}
.se-adim em {
  display: block;
  margin-top: .15rem;
  font: 400 13px/1.4 var(--sans, Manrope, Arial, sans-serif);
  font-style: normal;
  color: var(--muted, #D9D4E7);
}

/* ---- adım zamanlaması (eskiz kalıbının çıktısı temeli; pilot tummy_tuck_sema.py, 2026-10-01'de elle genişletildi —
   adım sayısı değişirse betik yeniden çalıştırılıp bu blok yenilenir): 4 adım × 3 sn = 12 sn
   + ~4 sn kapanış karesi (kesit → gövde eskizi çapraz geçişi) = 16 sn toplam döngü, #tt-se'ye
   kapalı. Adım yüzdeleri eski 12 sn tabanından (×0.75) 16 sn tabanına ölçeklendi; mutlak saniye
   zamanlaması (adım başına 3 sn) DEĞİŞMEDİ, yalnız payda büyüdü. */
#tt-se .se-sahne g, #tt-se .se-sahne path, #tt-se .se-adim, #tt-se .se-ilerleme i, #tt-se .se-sahne .se-img, #tt-se .se-kapanis {animation-duration:16s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
@keyframes tt-se-g1{0%,0%{opacity:0}2.19%{opacity:1}70.5%{opacity:1}74.25%,75%,100%{opacity:0}}
@keyframes tt-se-c1{0%,0%{stroke-dashoffset:1}8.75%{stroke-dashoffset:0}75%,100%{stroke-dashoffset:0}}
@keyframes tt-se-s1{0%,0%{opacity:0}1.88%,16.88%{opacity:1}18.75%,75%,100%{opacity:0}}
@keyframes tt-se-a1{0%,0%{opacity:var(--se-sonuk);transform:none}1.56%,17.19%{opacity:1;transform:translateY(-2px)}18.75%,75%,100%{opacity:var(--se-sonuk);transform:none}}
#tt-se .se-sahne .se-adim-1{animation-name:tt-se-g1}
#tt-se .se-sahne .se-adim-1 path[pathLength]{animation-name:tt-se-c1}
#tt-se .se-sahne .se-sadece-1{animation-name:tt-se-s1}
#tt-se .se-adim:nth-child(1){animation-name:tt-se-a1}
#tt-se .se-adim:nth-child(1) .se-no{animation:tt-se-no1 16s ease-in-out infinite}
@keyframes tt-se-no1{0%,0%{box-shadow:0 0 0 rgba(208,164,72,0)}1.56%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}9.38%{box-shadow:0 0 18px 5px rgba(241,217,149,1)}17.19%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}18.75%,75%,100%{box-shadow:0 0 0 rgba(208,164,72,0)}}
@keyframes tt-se-g2{0%,18.75%{opacity:0}20.94%{opacity:1}70.5%{opacity:1}74.25%,75%,100%{opacity:0}}
@keyframes tt-se-c2{0%,18.75%{stroke-dashoffset:1}27.5%{stroke-dashoffset:0}75%,100%{stroke-dashoffset:0}}
@keyframes tt-se-s2{0%,18.75%{opacity:0}20.63%,35.63%{opacity:1}37.5%,75%,100%{opacity:0}}
@keyframes tt-se-a2{0%,18.75%{opacity:var(--se-sonuk);transform:none}20.31%,35.94%{opacity:1;transform:translateY(-2px)}37.5%,75%,100%{opacity:var(--se-sonuk);transform:none}}
#tt-se .se-sahne .se-adim-2{animation-name:tt-se-g2}
#tt-se .se-sahne .se-adim-2 path[pathLength]{animation-name:tt-se-c2}
#tt-se .se-sahne .se-sadece-2{animation-name:tt-se-s2}
#tt-se .se-adim:nth-child(2){animation-name:tt-se-a2}
#tt-se .se-adim:nth-child(2) .se-no{animation:tt-se-no2 16s ease-in-out infinite}
@keyframes tt-se-no2{0%,18.75%{box-shadow:0 0 0 rgba(208,164,72,0)}20.31%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}28.13%{box-shadow:0 0 18px 5px rgba(241,217,149,1)}35.94%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}37.5%,75%,100%{box-shadow:0 0 0 rgba(208,164,72,0)}}
@keyframes tt-se-g3{0%,37.5%{opacity:0}39.69%{opacity:1}70.5%{opacity:1}74.25%,75%,100%{opacity:0}}
@keyframes tt-se-c3{0%,37.5%{stroke-dashoffset:1}46.25%{stroke-dashoffset:0}75%,100%{stroke-dashoffset:0}}
@keyframes tt-se-s3{0%,37.5%{opacity:0}39.38%,54.38%{opacity:1}56.25%,75%,100%{opacity:0}}
@keyframes tt-se-a3{0%,37.5%{opacity:var(--se-sonuk);transform:none}39.06%,54.69%{opacity:1;transform:translateY(-2px)}56.25%,75%,100%{opacity:var(--se-sonuk);transform:none}}
#tt-se .se-sahne .se-adim-3{animation-name:tt-se-g3}
#tt-se .se-sahne .se-adim-3 path[pathLength]{animation-name:tt-se-c3}
#tt-se .se-sahne .se-sadece-3{animation-name:tt-se-s3}
#tt-se .se-adim:nth-child(3){animation-name:tt-se-a3}
#tt-se .se-adim:nth-child(3) .se-no{animation:tt-se-no3 16s ease-in-out infinite}
@keyframes tt-se-no3{0%,37.5%{box-shadow:0 0 0 rgba(208,164,72,0)}39.06%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}46.88%{box-shadow:0 0 18px 5px rgba(241,217,149,1)}54.69%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}56.25%,75%,100%{box-shadow:0 0 0 rgba(208,164,72,0)}}
@keyframes tt-se-g4{0%,56.25%{opacity:0}58.44%{opacity:1}70.5%{opacity:1}74.25%,75%,100%{opacity:0}}
@keyframes tt-se-c4{0%,56.25%{stroke-dashoffset:1}65%{stroke-dashoffset:0}75%,100%{stroke-dashoffset:0}}
@keyframes tt-se-s4{0%,56.25%{opacity:0}58.13%,73.13%{opacity:1}75%,100%{opacity:0}}
@keyframes tt-se-a4{0%,56.25%{opacity:var(--se-sonuk);transform:none}57.81%,73.44%{opacity:1;transform:translateY(-2px)}75%,100%{opacity:var(--se-sonuk);transform:none}}
#tt-se .se-sahne .se-adim-4{animation-name:tt-se-g4}
#tt-se .se-sahne .se-adim-4 path[pathLength]{animation-name:tt-se-c4}
#tt-se .se-sahne .se-sadece-4{animation-name:tt-se-s4}
#tt-se .se-adim:nth-child(4){animation-name:tt-se-a4}
#tt-se .se-adim:nth-child(4) .se-no{animation:tt-se-no4 16s ease-in-out infinite}
@keyframes tt-se-no4{0%,56.25%{box-shadow:0 0 0 rgba(208,164,72,0)}57.81%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}65.63%{box-shadow:0 0 18px 5px rgba(241,217,149,1)}73.44%{box-shadow:0 0 10px 3px rgba(208,164,72,.85)}75%,100%{box-shadow:0 0 0 rgba(208,164,72,0)}}
@keyframes se-bar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
#tt-se .se-ilerleme i{animation-name:se-bar;animation-timing-function:linear}
@keyframes se-taban{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
#tt-se .se-sahne .se-taban path[pathLength]{animation:se-taban 1.6s ease-out 1 both}

/* ---- kapanış karesi (75%–100% = son ~4 sn): kesit fotoğrafı gövde eskizine ~1 sn'de çapraz
   geçer, "After healing" etiketi görünür, 100%'de döngü başa sarılırken anlık olarak kesite
   döner (4 adımın SVG katmanı zaten 75%'e kadar kendi içinde söner, bkz. yukarıdaki g1-g4). */
#tt-se .se-sahne .se-img-kesit{animation-name:tt-se-img-kesit}
@keyframes tt-se-img-kesit{0%,75%{opacity:1}81.25%{opacity:0}100%{opacity:0}}
#tt-se .se-sahne .se-img-govde{animation-name:tt-se-img-govde}
@keyframes tt-se-img-govde{0%,75%{opacity:0}81.25%{opacity:1}100%{opacity:1}}
#tt-se .se-kapanis{animation-name:tt-se-kapanis}
@keyframes tt-se-kapanis{0%,75%{opacity:0}82%{opacity:1}96%{opacity:1}100%{opacity:0}}

/* SVG'lerin kendi içindeki path/etiket animasyonları kendi <style>'larında zaten
   `prefers-reduced-motion: reduce`'u karşılıyor (iki dosyada da var). Burada SADECE bu CSS
   dosyasının ürettiği DIŞ animasyonlar (adım listesi opaklığı + ilerleme çubuğu + numara
   parlaması + kapanış çapraz geçişi) durur — sahne tüm rozet/çizgileriyle BİTMİŞ halde kesit
   fotoğrafında sabit kalır (gövde eskizine HİÇ geçmez, "anatomik kesit durgun kalır"), dört
   adım kartı da eşit (opacity:1) okunur halde gösterilir (yalnız biri "aktif" diye öne çıkmaz,
   animasyonsuz hiyerarşi kurmak yapaylık olurdu); ilerleme çubuğu tam dolu durur. */
@media (prefers-reduced-motion: reduce) {
  #tt-se .se-sahne g,
  #tt-se .se-sahne path,
  #tt-se .se-adim,
  #tt-se .se-adim .se-no,
  #tt-se .se-ilerleme i,
  #tt-se .se-sahne .se-img,
  #tt-se .se-kapanis {
    animation: none !important;
  }
  #tt-se .se-sahne .se-adim-1,
  #tt-se .se-sahne .se-adim-2,
  #tt-se .se-sahne .se-adim-3,
  #tt-se .se-sahne .se-adim-4 { opacity: 1; }
  #tt-se .se-sahne .se-adim-1 path[pathLength],
  #tt-se .se-sahne .se-adim-2 path[pathLength],
  #tt-se .se-sahne .se-adim-3 path[pathLength],
  #tt-se .se-sahne .se-adim-4 path[pathLength] { stroke-dashoffset: 0; }
  #tt-se .se-sahne .se-sadece-1,
  #tt-se .se-sahne .se-sadece-2,
  #tt-se .se-sahne .se-sadece-3,
  #tt-se .se-sahne .se-sadece-4 { opacity: 0; }
  #tt-se .se-adim { opacity: 1; transform: none; }
  #tt-se .se-adim .se-no { box-shadow: none !important; }
  #tt-se .se-ilerleme i { transform: scaleX(1); }
  #tt-se .se-sahne .se-img-kesit { opacity: 1 !important; }
  #tt-se .se-sahne .se-img-govde { opacity: 0 !important; }
  #tt-se .se-kapanis { opacity: 0 !important; }
}

/* Telefonda kesi şeması dar sütunda 270px kalıyordu: ekran genişliğine (16px kenar boşluğu) taşı. */
@media (max-width: 640px) {
  .tt-hero { width: calc(100vw - 32px); max-width: none; margin-left: calc(50% - 50vw + 16px); margin-right: 0; }
}

/* Satır kareleri (hs-satirN) SVG içindeki heN zamanlamasıyla AYNI yüzdeler; satır kaybolmaz, sönük (.38) bekler.
   Mobil v4 (kullanıcı 2026-10-01: "mobilde parlama ve yazılar görünmüyor"). Kutulu etiketler dar ekrana
   sığmaz, gizli kalır; onların yerine (1) işaretin yanında numaralı, kendi renginde parlayan rozet
   (.hs-pin, eskiz_ortak.hero_svg üretir) ve (2) görselin ÜSTÜNDE, logonun altında aynı renkli numaralı
   açıklama listesi. Liste satırları çizimle aynı sırada belirir: SVG içindeki he0..he3 keyframe'leri
   belge genelidir, aynı adla (10 sn döngü) kullanılır. */
@media (max-width: 640px) {
  .tt-hero .hero-sema .hs-pin { display: inline; }
  .tt-hero .tt-hero-liste {
    position: absolute; z-index: 2; top: 46px; left: 10px; right: 10px; margin: 0;
    gap: 5px; padding: 8px 10px; border-radius: 12px;
    background: rgba(45, 37, 69, .74); border: 1px solid rgba(241, 217, 149, .22);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .tt-hero .tt-hero-liste li {
    padding: 0; border: 0; background: none; align-items: center; gap: 8px;
    font: 600 12.5px/1.3 var(--sans, Manrope, Arial, sans-serif);
    animation: 10s ease-out infinite both;
  }
  .tt-hero .tt-hero-liste li.hs-r1 { --r: #FF7A93; animation-name: hs-satir0; }
  .tt-hero .tt-hero-liste li.hs-r2 { --r: #4FE3CF; animation-name: hs-satir1; }
  .tt-hero .tt-hero-liste li.hs-r3 { --r: #FFFFFF; animation-name: hs-satir2; }
  .tt-hero .tt-hero-liste li.hs-r4 { --r: #C6B8E9; animation-name: hs-satir3; }
  .tt-hero .tt-hero-liste li b {
    width: 20px; height: 20px; font-size: 11px; background: #3F3460; color: #F3EFE8;
    border: 2px solid var(--r); box-shadow: 0 0 8px 1px var(--r);
    animation: hs-liste-nabiz 2.6s ease-in-out infinite;
  }
}
@keyframes hs-satir0 { 0%, 19.5% { opacity: .38; } 24%, 88% { opacity: 1; } 96%, 100% { opacity: .38; } }
@keyframes hs-satir1 { 0%, 34.5% { opacity: .38; } 39%, 88% { opacity: 1; } 96%, 100% { opacity: .38; } }
@keyframes hs-satir2 { 0%, 43.5% { opacity: .38; } 48%, 88% { opacity: 1; } 96%, 100% { opacity: .38; } }
@keyframes hs-satir3 { 0%, 55.5% { opacity: .38; } 60%, 88% { opacity: 1; } 96%, 100% { opacity: .38; } }
@keyframes hs-liste-nabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .tt-hero .tt-hero-liste li, .tt-hero .tt-hero-liste li b { animation: none !important; opacity: 1; }
}

/* Kesit paneli büyütme (kullanıcı 2026-10-01: "üstüne tıklayınca büyüsün, mobilde görünmüyor").
   Dokununca panel tam ekran olur; telefon dik tutuluyorsa sahne 90° döner ve ekranın uzun kenarına
   yayılır (video tam ekranı gibi) — etiketler ~2,2 kat büyür. Animasyon kesilmez: aynı DOM, yalnız
   sınıf değişir. JS: tedavi.js [data-buyut]. */
.se-sahne { cursor: zoom-in; }
.se-buyut {
  position: absolute; left: 8px; bottom: 8px; z-index: 3; min-height: 0; line-height: 1;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  background: rgba(45, 37, 69, .86); border: 1px solid var(--gold, #D0A448); color: var(--gold-pale, #F1D995);
  font: 700 10px/1 var(--sans, Manrope, Arial, sans-serif); cursor: pointer;
  box-shadow: 0 0 7px rgba(208, 164, 72, .45); animation: hs-liste-nabiz 2.6s ease-in-out infinite;
}
.se-buyut svg { width: 11px; height: 11px; }
.se-kapat {
  position: fixed; top: 12px; right: 12px; z-index: 1002; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--gold, #D0A448); background: rgba(45, 37, 69, .92); color: #fff;
  font: 400 28px/1 var(--sans, Manrope, Arial, sans-serif); cursor: pointer;
}
.se-panel.se-tam {
  position: fixed; inset: 0; z-index: 1001; margin: 0; border-radius: 0; border: 0;
  overflow: auto; background: #221B35; display: flex; flex-direction: column; justify-content: center;
}
.se-panel.se-tam .se-sahne { cursor: zoom-out; }
.se-panel.se-tam .se-buyut { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  .se-panel.se-tam .se-bas, .se-panel.se-tam .se-ilerleme, .se-panel.se-tam .se-adimlar { display: none; }
  .se-panel.se-tam .se-sahne {
    position: fixed; left: 50%; top: 50%; margin: 0;
    width: calc(100dvh - 32px); max-width: calc((100vw - 24px) * 16 / 9);
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
body.se-kilit { overflow: hidden; }

/* Mobil: "Tap to enlarge" etiketi okunur ve dokunulur boyutta (2026-10-06) */
@media (max-width: 767px) {
  .se-buyut { min-height: 40px; padding: 8px 12px; font-size: 12px; left: 6px; bottom: 6px; }
  .se-buyut svg { width: 13px; height: 13px; }
}