/* JFS Clinic — EN DESTEK sayfalarının ekleri (paketler, doktorlar, iletişim, hasta hikâyeleri; 2026-10-02).
   ornek.css + tedavi.css + kategori.css ÜSTÜNE gelir; o dosyalara dokunulmaz, burada yalnız YENİ sınıf var.
   Kural: MOBIL-KART-KURALI.md — önce 390 px, satır içi düzen stili yok, sabit height yok, yatay taşma yok.
   Kullanım kılavuzu: _destek-iskelet.html başındaki yorum. */

/* ---------- Kısa hero (görselsiz: iletişim, liste sayfaları) ---------- */
.hero.hero-kisa { min-height: 0; display: block;
  background: radial-gradient(120% 90% at 0% 0%, #51427A 0%, transparent 60%), radial-gradient(90% 80% at 100% 100%, #3F3460 0%, transparent 60%), var(--bg); }
.hero.hero-kisa::after { display: none; }
.hero.hero-kisa .wrap { margin-top: 0; padding-top: calc(var(--s9) + var(--s4)); padding-bottom: var(--s7); }
.hero.hero-kisa h1 { font-size: clamp(38px, 9.5vw, 72px); }

/* ---------- Künye şeridi ("… in brief") ---------- */
.kunye { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  border-radius: var(--r-card); overflow: hidden; background: var(--line-dark); border: 1px solid var(--line-dark); }
.kunye li { min-width: 0; padding: var(--s4); background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; }
.kunye b { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 6vw, 30px); line-height: 1.05; color: var(--gold-pale); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.kunye span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.light .kunye { background: var(--line-light); border-color: var(--line-light); }
.light .kunye li { background: #fff; }
.light .kunye b { color: var(--ink); }
.light .kunye span { color: var(--ink-soft); }
.hero .kunye { margin-top: var(--s6); }

/* ---------- Kart ızgarası (paket, kanal, ilgili sayfa) — .kart ornek.css'ten ---------- */
.d-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.d-izgara > * { min-width: 0; }
article.kart:hover { transform: none; }           /* içinde iki buton olan kart tıklanır yüzey değil */
.kart-ic h3 { font-size: clamp(22px, 5.4vw, 26px); }
.d-meta { margin: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; color: #9A7426; }
.d-fiyat { margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); }
.d-fiyat b { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.d-fiyat small { font-size: 13px; color: var(--ink-soft); }
.kart .noktali { margin: var(--s2) 0; }
.kart .noktali li { font-size: 14px; color: var(--ink-soft); text-align: left; hyphens: manual; }
.d-btnlar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s3); }
.d-btnlar .btn { flex: 1 1 140px; min-height: 48px; padding: 0 var(--s3); font-size: 14px; }
.kart .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(45, 37, 69, .3); }
/* Kart butonları: her kartta aynı düzen — üstte Get my quote, altta tek satır rehber butonu (krem zemin, ok; hover'da mürdüm dolgu) */
.d-btnlar .btn { flex-basis: 100%; white-space: nowrap; }
.d-btnlar .btn-gold { order: -1; }
.d-btnlar .btn-ghost { background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(45, 37, 69, .14); transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.d-btnlar .btn-ghost::after { content: "→"; font-size: 16px; line-height: 1; color: #9A7426; transition: transform .25s var(--ease), color .25s var(--ease); }
.d-btnlar .btn-ghost:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink), 0 10px 24px -12px rgba(45, 37, 69, .55); }
.d-btnlar .btn-ghost:hover::after { color: var(--gold-pale); transform: translateX(3px); }
.kart .etiketler { margin-top: 0; }
.kart .etiket, .ckart .etiket { background: var(--cream); color: #7A5A1A; }

/* ---------- Karşılaştırma tablosu ekleri (tablo tedavi.css .cizelge; mobilde kart olur) ---------- */
table.cizelge td.d-tutar { font-family: var(--serif); font-size: 19px; color: var(--ink); white-space: nowrap; font-variant-numeric: lining-nums; }
table.cizelge td.d-tutar::before { font-family: var(--sans); }
table.cizelge td.d-tutar small { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); white-space: normal; }
table.cizelge td a { color: #7A5A1A; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hekim kartı (liste: kategori.css .cerrahlar/.ckart; profil: ornek.css .cerrah) ---------- */
.ckart > div { min-width: 0; }
.ckart .etiketler { margin: 4px 0 8px; }
.ckart .etiket { font-size: 11.5px; }
.cerrah .btn-row { margin-top: var(--s4); }

/* ---------- Hikâye / video kartı (S1, profil videosu) ---------- */
.d-filtre { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.d-filtre a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pill);
  border: 1px solid var(--line-dark); font-size: 14px; font-weight: 600; color: var(--muted); transition: transform .2s var(--ease); }
.d-filtre a:hover { transform: translateY(-1px); color: var(--gold-pale); }
.d-filtre small { opacity: .7; }
.hkart { display: grid; gap: var(--s3); align-content: start; }
.hkart .vkart { max-width: none; }
.hkart .vkart-alt { display: none; }          /* ad/işlem kartın altında yazılı; düğmenin aria-label'ı korur */
.d-izgara.d-video { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.hkart .vkart-oynat { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.hkart-ic { display: grid; gap: 6px; }
.hkart-ic h3 { font-size: clamp(19px, 5vw, 24px); overflow-wrap: anywhere; }
.hkart-ic .etiket { justify-self: start; }
.hkart-ic blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(16px, 4.2vw, 19px); overflow-wrap: anywhere; line-height: 1.3; }
.hkart-ic .link-arrow { min-height: 40px; font-size: 14px; }
.deep .hkart-ic blockquote { color: #EEEBF4; }

/* ---------- İletişim kanalları ---------- */
.kanal { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4);
  border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: var(--shadow-light); }
.kanal svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--cream); color: #9A7426; }
.kanal b { display: block; font-size: 16px; }
.kanal span { display: block; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---------- Son çağrı (ornek.css .son-kutu üstüne) ---------- */
.son-kutu h2 { font-size: clamp(30px, 7vw, 52px); }
.son-kutu p:not(.eyebrow) { color: var(--muted); max-width: 60ch; }

/* ============ Tablet ============ */
@media (min-width: 700px) {
  .kunye { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .d-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-izgara.d-video { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ Masaüstü ============ */
@media (min-width: 1024px) {
  .d-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .d-izgara.d-video { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero.hero-kisa .hero-ic { max-width: 820px; }
}

/* Hekim fotoğrafı (600x756 dikey) 4:3 karta ortadan kırpılınca baş kesiliyordu ("Other specialists" kartları).
   doktor_foto.py başın tepesini her fotoğrafta %8,5'e oturtuyor → pencereyi üste yasla, yüz ortada kalır. */
.kart img[src*="/img/doctors/"] { object-position: 50% 4%; }

/* Yasal sayfalar (privacy-policy, cookie-policy): uzun "[to be confirmed: …]" etiketi metin içinde satır kırar.
   .durum varsayılanı nowrap'tır; düzyazıda tek satır kalınca mobilde sayfayı 1100px'e genişletiyordu. */
.okuma .durum, .cizelge-not .durum { display: inline; white-space: normal; line-height: 1.7; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.okuma .durum::before, .cizelge-not .durum::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }

/* Paket fiyat görselleri (paket-gorsel/tasarim): fiyat yazısı resmin içinde, 4:3 kırpma yazıyı keser */
.kart img.fiyat-gorsel { aspect-ratio: 12 / 7; }

/* Mobil: hasta/video kartları dar ekranda tek sütun, metin sola yaslı (2026-10-06) */
@media (max-width: 479px) {
  .d-izgara.d-video { grid-template-columns: minmax(0, 1fr); }
  .hkart-ic, .hkart-ic p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}

/* ---------- Yayın listesi (hekim profili): başlık + dergi tek akış, flex sütuna bölmez ---------- */
.yayin-dergi { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(154, 116, 38, .12); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }

/* ---------- Hekim profili: uzun özgeçmişte fotoğraf kaydırmayla birlikte iner (yalnız masaüstü) ----------
   align-self: start → metin kısa olan bloklarda (our-doctors, paket) görünüm değişmez, metin yine ortada. */
@media (min-width: 1024px) {
  .cerrah-foto { align-self: start; position: sticky; top: 104px; }
}

/* ---------- Hekim profili listeleri: madde içi link/italik/parantez tek metin akışı ----------
   ornek.css'teki .cerrah li flex'i her satır içi parçayı ayrı sütuna bölüyordu; nokta mutlak konumlu. */
.cerrah li { display: block; position: relative; padding-left: calc(6px + var(--s2)); }
.cerrah li::before { position: absolute; left: 0; top: 0; }

/* ---------- Hekim profili: liste içi linkler metinden ayırt edilsin (makale adı, tedavi sayfası) ----------
   Altın alt çizgi + dış kaynakta ↗ işareti; yeni sekmede açıldığını da söyler. */
.cerrah li a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.cerrah li a:hover, .cerrah li a:focus-visible { color: #7A5A1A; text-decoration-color: #7A5A1A; }
.cerrah li a[target="_blank"]::after { content: "\2009↗"; font-weight: 600; color: #9A7426; text-decoration: none; display: inline-block; }