/* JFS Clinic — EN tedavi sayfalarının ORTAK ekleri (ornek.css üstüne). FAZ 0 (2026-10-01):
   onaylı Tummy Tuck pilotunun tummy-tuck.css'i aynen ortaklaştırıldı; tedaviye özgü kural YOK.
   Sayfaya özgü bir ayar gerekirse sayfanın kendi <style>'ında kalır, buraya yazılmaz.
   Kural: MOBIL-KART-KURALI.md. Önce 390 px, satır içi düzen stili yok, sabit height yok.
   ornek.js/ornek.css DEĞİŞTİRİLMEDİ — bu dosya yalnız yeni sınıflar ekler. */

/* ---------- Noktalı liste (adaylık / dahil listeleri) ---------- */
.noktali { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.noktali li { display: flex; gap: 10px; font-size: 15px; }
.noktali li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 9px; flex: none; }
.light .noktali li { color: var(--ink-soft); }
.deep .noktali li { color: var(--muted); }

/* ---------- Teknik karşılaştırma tablosu + yeni tablolar (iyileşme/paket) ---------- */
.cizelge-sarma { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: thin; }
table.cizelge { width: 100%; min-width: 660px; border-collapse: collapse; background: #fff; color: var(--ink); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-light); }
table.cizelge caption { caption-side: top; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9A7426; padding: var(--s3) var(--s4) 0; }
table.cizelge th, table.cizelge td { padding: 12px 16px; text-align: left; font-size: 14px; line-height: 1.45; border-bottom: 1px solid var(--line-light); vertical-align: top; }
table.cizelge thead th { background: var(--cream); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9A7426; white-space: nowrap; }
table.cizelge tbody tr:last-child td { border-bottom: 0; }
table.cizelge tbody th { font-family: var(--serif); font-size: 17px; font-weight: 500; white-space: nowrap; }
table.cizelge tbody tr:hover { background: var(--cream); }
.cizelge-not { margin: var(--s3) 0 0; font-size: 13px; color: var(--ink-soft); }
.deep .cizelge-not { color: var(--muted); }

/* Teknik tablosu: ikon + "en çok seçilen" satırı */
.cizelge-ikon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; color: #9A7426; }
.cizelge-on { background: #FBF4E2; }
.cizelge-on:hover { background: #FBF4E2; }
.cizelge-rozet { display: inline-block; margin-left: 8px; white-space: nowrap; background: var(--gold-metal); color: #2D2545; font-weight: 700; }

/* Paket tablosu: dahil / teyit bekliyor rozetleri */
table.cizelge.cizelge-paket tbody th { white-space: normal; font-family: var(--sans); font-size: 14px; font-weight: 600; }
.durum { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.durum-ok { background: rgba(31, 175, 90, .12); color: #1C8A49; }
.durum-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1FAF5A; }
.durum-bekliyor { background: rgba(154, 116, 38, .1); color: #9A7426; }
.durum-bekliyor::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C79A3D; }
/* Teklifte netleşen kalem (müşteri cevabı bekleyen yer; data-tbc ile izlenir, tbc_excel.py sayar) */
/* Nötr görünüm (2026-10-08): bekleyen kalem vurgu renginde değil, normal metin gibi okunur; data-tbc izi korunur */
.durum-teklif { background: none; color: inherit; padding: 0; font-size: inherit; font-weight: inherit; white-space: normal; }
.durum-teklif::before { content: none; }

/* İyileşme hafta hafta tablosu */
table.cizelge.cizelge-hafta tbody th { white-space: normal; font-family: var(--sans); font-size: 14px; font-weight: 700; }
.cizelge-hafta td.cizelge-bekliyor { color: inherit; font-style: normal; }

/* Aralara giren fotoğraf (konsültasyon / iyileşme / İzmir / aday) — metin akışının içinde, altyazılı */
.gorsel-ara { margin: 0; }
.gorsel-ara .ga-cerceve { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-light); }
/* Odak üstte: kare/dikey kaynak 16:9'a ortadan kırpılınca baş kesiliyordu; 16:9 kaynakta etkisiz. */
.gorsel-ara img:not(.marka-filigran) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.gorsel-ara figcaption { margin-top: var(--s2); font-size: 13px; font-style: italic; color: var(--ink-soft); }
.deep .gorsel-ara figcaption { color: var(--muted); }

/* JFS marka filigranı — yalnız gerçek fotoğraf kareleri (eskiz/sema/video kapağı DEĞİL) */
.marka-filigran { position: absolute; top: 14px; right: 16px; width: 44px; height: auto; opacity: .55; pointer-events: none; }
@media (max-width: 699px) { .marka-filigran { width: 32px; top: 10px; right: 12px; } }

/* Foto + metin iki sütun: masaüstünde yan yana (~45/55), mobilde metnin akışı içinde alt alta */
.foto-metin { display: grid; gap: var(--s4); margin: var(--s6) 0; }
.foto-metin .fm-metin { margin: 0; display: grid; gap: var(--s3); }
@media (min-width: 1024px) {
  .foto-metin { grid-template-columns: 45fr 55fr; gap: var(--s7); align-items: center; }
  .foto-metin.ters { grid-template-columns: 55fr 45fr; }
  .foto-metin.ters .fm-foto { order: 2; }
}

/* Eskiz altı küçük başlık (SEMA 1 / SEMA 2 ortak) */
.eskiz-alt { margin: var(--s3) 0 0; font-size: 13px; font-style: italic; color: var(--ink-soft); text-align: center; }
.deep .eskiz-alt { color: var(--muted); }

/* "More patient stories" ayraç kartı (video şeridinde) — ornek.css'te karşılığı yok */
.serit-ayrac {
  flex: 0 0 72%; max-width: 200px; aspect-ratio: 9 / 16; border-radius: var(--r-card);
  background: var(--panel-2); border: 1px solid var(--line-dark); display: flex;
  align-items: center; justify-content: center; text-align: center; padding: var(--s4);
}
.serit-ayrac span { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--gold-pale); }
@media (min-width: 1024px) { .serit-ayrac { flex-basis: 272px; max-width: none; } }

/* ---------- İyileşme aracı (tedaviye özel — ornek.js'in #iyilesme/#vki eşleşmesiyle çakışmasın diye yeni sınıflar) ---------- */
.rec-gunler { display: flex; justify-content: space-between; gap: 4px; margin-bottom: var(--s3); }
.rec-gunler button {
  flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-light); background: var(--cream); cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--ink-soft); transition: transform .2s var(--ease);
}
.rec-gunler button:hover { transform: translateY(-1px); }
.rec-gunler button[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.rec-surgu { width: 100%; accent-color: var(--gold); margin: 0 0 var(--s4); height: 28px; }
.rec-baslik { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.rec-baslik .deger { font-family: var(--serif); font-size: 44px; line-height: 1; }
.rec-izgara { display: grid; gap: var(--s3); margin-top: var(--s4); }
.rec-hucre { background: var(--cream); border-radius: 14px; padding: var(--s4); animation: yuksel .4s var(--ease); }
.rec-hucre h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9A7426; }
.rec-hucre p { margin: 0; font-size: 15px; }
.rec-enerji { margin-top: var(--s4); }
.rec-enerji-ust { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rec-enerji-cubuk { height: 10px; border-radius: 5px; background: var(--cream); overflow: hidden; }
.rec-enerji-cubuk i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #E7A77F, #E9C877, #8BC7A8); transform-origin: 0 50%; transition: transform .6s var(--ease); }

/* ---------- Fiyat kartı (tutar) ---------- */
.fiyat-tutar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); margin: var(--s4) 0; }
.fiyat-tutar b { font-family: var(--serif); font-size: clamp(34px, 8vw, 48px); font-weight: 500; color: var(--gold-pale); line-height: 1; font-variant-numeric: lining-nums; }
.fiyat-tutar small { font-size: 13px; color: var(--muted); }
.fiyat-alt { font-size: 14px; color: var(--muted); }
.stat .fiyat-mini { display: block; margin-top: var(--s2); font-size: 13px; font-weight: 600; color: var(--gold-pale); }

/* ============ Tablet ============ */
@media (min-width: 700px) {
  .rec-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.cizelge { min-width: 0; }
}

/* ============ Masaüstü ============ */
@media (min-width: 1024px) {
  .cizelge-sarma { margin: 0; padding: 0; }
}

/* Paket kartı mobilde 692px'e şişiyordu: "dahil" tablosunun min-content genişliği tek sütunlu
   grid'i esnetiyordu. Sütunu minmax(0,1fr) ile sınırla; tablo hücreleri satır kırsın. */
.paket { grid-template-columns: minmax(0, 1fr); }
.paket > * { min-width: 0; }
.paket table { width: 100%; table-layout: fixed; }
.paket td, .paket th { overflow-wrap: anywhere; white-space: normal; }
@media (min-width: 700px) { .paket { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Masaüstünde paket görseli tablo kadar uzun sütuna geriliyordu (~590x1300): 4:3 fotoğrafın
   yalnız %21-57'si görünüyor, yüz kesiliyordu. Görsel kendi oranında kalır ve sütunda yapışkan
   durur; overflow:clip köşeyi kırpar ama (hidden'ın aksine) sticky'yi öldürmez. */
@media (min-width: 700px) {
  .paket { overflow: clip; }
  .paket-gorsel { min-height: 0; aspect-ratio: auto; align-self: start; position: sticky; top: 72px; }
  .paket-gorsel img { height: auto; aspect-ratio: auto; object-fit: contain; display: block; }
  .paket-gorsel::after { background: linear-gradient(90deg, transparent 55%, var(--panel)), linear-gradient(180deg, transparent 60%, var(--panel)); }
}

/* 8 günlük yolculuk: masaüstünde 5+3 yerine 4 üstte 4 altta. */
@media (min-width: 1024px) {
  .gunler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gun:nth-child(4n)::before { right: 0; }
}

/* Gövde metni iki yana yaslı (kullanıcı 2026-10-01). Dar ekranda boşluk nehri olmasın diye heceleme açık;
   ortalanmış öğeler, kartlar ve tablolar etkilenmez. */
main .sec p:not(.eyebrow):not(.kucuk), main .noktali li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
main .gun-kart p, main .tkart p, main figcaption, main .cizelge td, main .cizelge th, main [class*="ortala"] p { text-align: left; hyphens: manual; }

/* "How soon" — ilk mesajdan ameliyata 4 adım (klinik 2026-10-01: ~1 hafta). Rozet altın parlar, nabız ≤%5. */
.adimlar { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); counter-reset: none; }
.adimlar > li { display: flex; gap: var(--s3); align-items: flex-start; min-width: 0; padding: var(--s4); border-radius: var(--r-card); background: rgba(255, 255, 255, .7); border: 1px solid var(--line-light); }
.adimlar > li > div { min-width: 0; }
.adimlar > li > b { flex: none; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--gold-metal); color: var(--ink); font-weight: 800; font-size: 15px; box-shadow: 0 0 12px 2px rgba(208, 164, 72, .55); animation: adim-nabiz 3.2s ease-in-out infinite; }
.adimlar > li:nth-child(2) > b { animation-delay: .8s; }
.adimlar > li:nth-child(3) > b { animation-delay: 1.6s; }
.adimlar > li:nth-child(4) > b { animation-delay: 2.4s; }
.adimlar h3 { font-size: clamp(19px, 4.6vw, 22px); margin: 2px 0 6px; }
.adimlar p { margin: 0; text-align: left !important; hyphens: manual !important; }
/* Koyu bölümde (.sec, .light değil) beyaz kart açık yazıyı okunmaz yapıyordu (contact.html): koyu cam kart. */
.sec:not(.light) .adimlar > li { background: rgba(255, 255, 255, .06); border-color: var(--line-dark); }
.sec:not(.light) .adimlar h3 { color: #fff; }
.sec:not(.light) .adimlar p { color: #E7E3EF; }
@keyframes adim-nabiz { 0%, 100% { transform: scale(1); box-shadow: 0 0 10px 2px rgba(208, 164, 72, .45); } 50% { transform: scale(1.05); box-shadow: 0 0 18px 5px rgba(241, 217, 149, .9); } }
@media (prefers-reduced-motion: reduce) { .adimlar > li > b { animation: none; } }
@media (min-width: 700px) { .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .adimlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Mobilde tablo = kart (PLAN-EN-ICERIK §3 "mobilde kart görünümü"): yatay kaydırma yok,
   her satır bir kart, hücre etiketi thead'den (data-label). Paket tablosu ve haftalık matris (cizelge-hafta) kendi düzeninde kalır — matris kartta 30 satıra uzuyor. */
@media (max-width: 699px) {
  .cizelge-sarma:has(table.cizelge:not(.cizelge-paket):not(.cizelge-hafta)) { overflow: visible; margin: var(--s4) 0 0; padding: 0; }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) { min-width: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) caption { display: block; padding: 0 0 var(--s3); }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta), table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody, table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tr, table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) th, table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) td { display: block; width: auto; }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody tr { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-light); margin-bottom: var(--s3); overflow: hidden; }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody th { white-space: normal; padding: 14px 16px 8px; border-bottom: 1px solid var(--line-light); background: var(--cream); }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody td { padding: 10px 16px; }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9A7426; margin-bottom: 2px; }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody tr:last-child td { border-bottom: 1px solid var(--line-light); }
  table.cizelge:not(.cizelge-paket):not(.cizelge-hafta) tbody tr td:last-child { border-bottom: 0; }
}

/* Paket tablosu mobilde ekrana tam sığar (kullanıcı 2026-10-01: "mobilde yarım görünüyor"). Genel
   table.cizelge min-width:660px + sarmalayıcının negatif kenar boşluğu kartın dışına taşırıyordu.
   İki sütun: kalem esnek, durum sabit dar sütun; "[to be confirmed]" satır kırar. */
@media (max-width: 699px) {
  .paket .cizelge-sarma { margin: var(--s4) 0 0; padding: 0; overflow: visible; }
  .paket table.cizelge { min-width: 0; width: 100%; table-layout: fixed; }
  .paket table.cizelge thead th:last-child, .paket table.cizelge tbody td { width: 108px; padding-left: 4px; overflow-wrap: normal; word-break: normal; }
  .paket table.cizelge th, .paket table.cizelge td { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; }
  .paket table.cizelge th { padding-left: 12px; }
  table.cizelge.cizelge-paket tbody th { font-size: 13.5px; line-height: 1.35; }
  .paket .durum { white-space: normal; overflow-wrap: normal; word-break: normal; font-size: 11.5px; padding: 4px 8px; line-height: 1.2; }
  .paket .durum-ok { white-space: nowrap; }
}

/* Fiyat + randevu kartı (kullanıcı 2026-10-01): sayfanın başında, "At a glance"tan sonra; farklı görsel,
   doğal dil, iki yön — #contact formu ve paket fiyat sayfası. Fiyat cümlesi/butonu TR'de gizli. */
.plan-band { padding-top: 0; }
.plan-kart { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(150deg, #F7F1E6, #EFE4CF); color: var(--ink);
  border: 1px solid rgba(208, 164, 72, .55); box-shadow: 0 0 0 1px rgba(241, 217, 149, .15), 0 18px 48px rgba(0, 0, 0, .35), 0 0 28px rgba(208, 164, 72, .18); }
.plan-foto { margin: 0; }
.plan-foto .ga-cerceve { position: relative; overflow: hidden; height: 100%; border-radius: 0; }
.plan-foto img:not(.marka-filigran) { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 35% 40%; display: block; }
.plan-ic { padding: var(--s5); align-self: center; }
.plan-ic .eyebrow { color: #9A7426; }
.plan-ic h2 { color: var(--ink); font-size: clamp(26px, 6vw, 38px); }
.plan-ic h2 em { color: #9A7426; }
.plan-ic p:not(.eyebrow) { color: var(--ink-soft); margin: var(--s3) 0 var(--s4); }
.plan-ic .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(45, 37, 69, .3); }
@media (min-width: 860px) {
  .plan-kart { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .plan-foto img:not(.marka-filigran) { aspect-ratio: auto; min-height: 340px; }
  .plan-ic { padding: var(--s6) var(--s7) var(--s6) var(--s6); }
}

/* Hero fotoğrafı mobil/tablette kişiyi ORTALAR (kullanıcı 2026-10-02: "mobilde ortalı dursun"). Görsel başına
   değişir: sayfa <img class="hero-img" style="--hero-odak-x:NN%">. Değer = (kişi merkezi oranı f × görsel genişliği
   − kutu genişliği/2) / (görsel genişliği − kutu genişliği), 390 px'te ölçülür. Masaüstü (≥1024) ornek.css'teki
   70% kalır: orada metin solda, kişi sağda olmalı. */
@media (max-width: 1023px) {
  .hero .hero-img { object-position: var(--hero-odak-x, 38%) 20%; }
}

/* ============ Mobil okunabilirlik (2026-10-06) ============ */
@media (max-width: 767px) {
  table.cizelge thead th, table.cizelge tbody td[data-label]::before { font-size: 12px; }
  /* Haftalık matris yatay kayar: kaydırma ipucu satırı (tablonun üstünde, sola yapışık) */
  .cizelge-sarma:has(table.cizelge-hafta)::before {
    content: "Swipe sideways to see all weeks →"; display: block; position: sticky; left: 0; width: max-content;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #9A7426; padding: 0 0 8px;
  }
  html[lang="tr"] .cizelge-sarma:has(table.cizelge-hafta)::before { content: "Tüm haftalar için yana kaydırın →"; }
}

/* ---------- Tedavi sayfası fiyat kartları (#package; fiyat sayfası kartının küçük hâli) — arastirma/tedavi_fiyat_kart.py ---------- */
.tf-blok { margin-top: var(--s6); }
.tf-h { font-size: clamp(24px, 5.6vw, 32px); margin: 0 0 var(--s2); color: #fff; }
.tf-giris { margin: 0 0 var(--s4); color: #E7E3EF; max-width: 70ch; }
.tf-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.tf-izgara > * { min-width: 0; }
.tf-kart:hover { transform: none; }
.tf-kart .kart-ic { gap: 4px; }
.tf-kart h3 { font-size: clamp(20px, 5vw, 23px); margin: 2px 0 0; }
.tf-kart .d-meta { margin: 0; font-size: 12.5px; font-weight: 600; color: #9A7426; }
.tf-kart .d-fiyat { margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); }
.tf-kart .d-fiyat b { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.05; color: var(--ink); font-variant-numeric: lining-nums; }
.tf-kart .d-fiyat b.kisisel { font-size: 22px; }
.tf-kart .d-fiyat small { font-size: 12.5px; color: var(--ink-soft); }
.tf-kart .noktali { margin: var(--s2) 0; }
.tf-kart .noktali li { font-size: 14px; color: var(--ink-soft); text-align: left !important; hyphens: manual !important; }
.tf-kart .btn { margin-top: auto; min-height: 46px; font-size: 14px; }
@media (min-width: 700px) { .tf-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tf-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* >>> jfs:tedavi-menu-genis */
/* ÜRETİLİR (tedavi_menu_css.py) — elle düzenleme. Masaüstünde mobil menü düzeni, yalnız tedavi sayfaları. */
@media (min-width: 1024px) {
html .sm-burger {
display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
border: 1px solid rgba(208, 164, 72, .7); border-radius: 10px; background: rgba(45, 37, 69, .6); color: #F1D995;
}html .sm-burger:focus-visible,html .sm-kapat:focus-visible,html .sm-bas:focus-visible,html .sm-link:focus-visible,html .sm-cta:focus-visible,html .sm-dilchip:focus-visible,html .sm-wa-satir a:focus-visible,html .sm-logo:focus-visible { outline: 2px solid #F1D995; outline-offset: 2px; }html .sm-cizgi,html .sm-cizgi::before,html .sm-cizgi::after { display: block; width: 20px; height: 2px; background: #F1D995; position: relative; }html .sm-cizgi::before,html .sm-cizgi::after { content: ""; position: absolute; left: 0; }html .sm-cizgi::before { top: -6px; }html .sm-cizgi::after { top: 6px; }html header.top .top-actions { gap: 8px; }html header.top .toc-btn { min-height: 44px; }
html .sm-panel {
position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; background: #2D2545; color: #F3EFE8;
font-family: Manrope, system-ui, sans-serif; overflow: hidden;
}html .sm-panel[hidden] { display: none; }html body.sm-acik { overflow: hidden; }html .sm-ust { display: flex; align-items: center; justify-content: space-between; flex: none; height: 64px; padding: 0 16px; border-bottom: 1px solid rgba(208, 164, 72, .3); }html .sm-logo { display: inline-flex; align-items: center; min-height: 44px; }html .sm-logo img { height: 30px; width: auto; display: block; }html .sm-kapat {
width: 44px; height: 44px; padding: 0; cursor: pointer; border: 1px solid rgba(208, 164, 72, .7); border-radius: 10px;
background: rgba(45, 37, 69, .6); display: inline-flex; align-items: center; justify-content: center;
}html .sm-kapat span,html .sm-kapat span::before { display: block; width: 20px; height: 2px; background: #F1D995; position: relative; transform: rotate(45deg); }html .sm-kapat span::before { content: ""; position: absolute; left: 0; top: 0; transform: rotate(90deg); }html .sm-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }html .sm-link,html .sm-bas {
display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; box-sizing: border-box;
padding: 0; border: 0; border-bottom: 1px solid rgba(208, 164, 72, .22); background: none; color: #F3EFE8; text-align: left; cursor: pointer;
font: 600 18px/1.3 Manrope, system-ui, sans-serif; text-decoration: none;
}html .sm-link[aria-current="page"] { color: #F1D995; }html .sm-bas i { flex: none; width: 10px; height: 10px; margin-left: 12px; border-right: 2px solid #D0A448; border-bottom: 2px solid #D0A448; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }html .sm-bas[aria-expanded="true"] i { transform: rotate(-135deg) translateY(-3px); }html .sm-bas[aria-expanded="true"] { color: #F1D995; }html .sm-govde[hidden] { display: none; }html .sm-ana > .sm-govde { padding: 0 0 8px 14px; border-left: 2px solid rgba(208, 164, 72, .35); margin: 0 0 6px 4px; }html .sm-kat > .sm-bas,html .sm-tek,html .sm-ana > .sm-govde > .sm-link { font-size: 16px; min-height: 48px; font-weight: 600; }html .sm-kat > .sm-govde { padding: 2px 0 8px 12px; }html .sm-kat .sm-link,html .sm-ana > .sm-govde > .sm-govde .sm-link { font-size: 15px; min-height: 44px; font-weight: 500; color: #D9D4E7; border-bottom-color: rgba(208, 164, 72, .12); }html .sm-kat .sm-link[aria-current="page"] { color: #F1D995; font-weight: 700; }html .sm-alt { margin: 14px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #D0A448; }html .sm-cta {
display: flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 22px; border: 2px solid #D0A448; color: #F1D995;
font: 600 17px/1.2 Manrope, system-ui, sans-serif; text-decoration: none;
}html .sm-wa,html .sm-dil { margin-top: 24px; padding-top: 6px; border-top: 1px solid rgba(208, 164, 72, .22); }html .sm-wa-satir { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }html .sm-wa-satir a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; }html .sm-wa-satir img { display: block; height: 32px; width: auto; max-width: none; }html .sm-dil-satir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }html .sm-dilchip {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(208, 164, 72, .55);
font-size: 14px; font-weight: 600; color: #D9D4E7; text-decoration: none;
}html .sm-dilchip[aria-current="true"] { background: #D0A448; color: #100E0A; }
html .sm-dilsec { display: block; position: relative; flex: none; }html .sm-dilsec-btn {
display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px; cursor: pointer;
border: 1px solid rgba(208, 164, 72, .7); border-radius: 10px; background: rgba(45, 37, 69, .6); color: #F1D995;
font: 700 13px/1 Manrope, system-ui, sans-serif; letter-spacing: .04em;
}html .sm-dilsec-btn svg { width: 14px; height: 14px; flex: none; }html .sm-dilsec-btn i { width: 7px; height: 7px; border-right: 2px solid #D0A448; border-bottom: 2px solid #D0A448; transform: rotate(45deg) translateY(-2px); }html .sm-dilsec-btn:focus-visible,html .sm-dilsec-liste a:focus-visible { outline: 2px solid #F1D995; outline-offset: 2px; }html .sm-dilsec-liste {
display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; padding: 4px 0;
background: #2D2545; border: 1px solid rgba(208, 164, 72, .7); box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}html .sm-dilsec.acik .sm-dilsec-liste { display: block; }html .sm-dilsec-liste a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; font: 600 15px/1 Manrope, system-ui, sans-serif; color: #D9D4E7; text-decoration: none; }html .sm-dilsec-liste a[aria-current="true"] { background: #D0A448; color: #100E0A; }html body.sm-acik .sm-dilsec { display: none; }

/* masaüstünde tam ekran değil, sağa dayalı çekmece; sayfanın geri kalanı karartılır (kullanıcı kararı 2026-10-08) */
html .sm-panel { inset: 0 0 0 auto; width: min(440px, 100vw); border-left: 1px solid rgba(208, 164, 72, .3);
  box-shadow: 0 0 0 100vmax rgba(21, 16, 36, .55), -24px 0 60px -20px rgba(0, 0, 0, .6); }
html .sm-ust { padding: 0 24px; }
html .sm-nav { width: 100%; box-sizing: border-box; padding-left: 28px; padding-right: 28px; }
html header.top .toc-btn { min-height: 44px; }
}
/* <<< jfs:tedavi-menu-genis */