/* ============================================
   ADAGEN Medical Dictionary — Responsive Styles
   Uses the site's own design tokens (tokens.css) —
   follows [data-bs-theme="dark"], not OS prefers-color-scheme.
   ============================================ */

/* --- En Çok Merak Edilenler — arama kutusu ile A-Z indeksi arasında,
   yalnızca filtresiz "Tüm" görünümünde; dictionary.js gizler/gösterir. --- */
.sozluk-featured {
  margin: 0 auto 2.5rem;
}

.sozluk-featured[hidden] {
  display: none;
}

.sozluk-featured-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* --- A-Z Navigator (Hub Page) — arama kutusunun altında tek satır --- */
.sozluk-navigator {
  margin: 0 auto 2rem;
  max-width: 100%;
}

.sozluk-letters {
  display: grid;
  grid-template-columns: repeat(27, minmax(0, 1fr));
  gap: 0.25rem;
}

.sozluk-letter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.4rem 0.1rem;
  min-width: 0;
  border-radius: var(--adagen-radius-sm);
  text-decoration: none;
  color: var(--adagen-text);
  background: var(--adagen-surface);
  border: 1px solid var(--adagen-border);
  transition: background var(--adagen-dur-fast) var(--adagen-ease-out),
              border-color var(--adagen-dur-fast) var(--adagen-ease-out),
              color var(--adagen-dur-fast) var(--adagen-ease-out);
  cursor: pointer;
  line-height: 1.1;
}

.sozluk-letter-char {
  font-weight: 600;
  font-size: 0.9rem;
}

.sozluk-letter:hover {
  background: var(--adagen-surface-raised);
  border-color: var(--adagen-blue-600);
}

.sozluk-letter:focus-visible {
  outline: 2px solid var(--adagen-blue-600);
  outline-offset: 2px;
}

.sozluk-letter.active {
  background: var(--adagen-blue-600);
  color: var(--adagen-text-on-dark);
  border-color: var(--adagen-blue-600);
}

.sozluk-letter.is-empty {
  opacity: 0.4;
}

.letter-count {
  font-size: 0.7rem;
  opacity: 0.75;
  font-weight: 400;
}

/* --- Search Bar --- */
.sozluk-search-wrapper {
  position: relative;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Anasayfadaki .adagen-glossary-search (custom.css) ile aynı pill stili —
   ikon + gölge + odak halkası; buradaki fark yalnızca gönder düğmesinin
   yokluğu (arama JS ile anında filtreler, sayfa yeniden yüklenmez). */
.sozluk-search-box {
  display: flex;
  align-items: center;
  gap: var(--adagen-space-2);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border: 1px solid var(--adagen-border-strong);
  border-radius: var(--adagen-radius-pill);
  background: var(--adagen-surface);
  box-shadow: var(--adagen-shadow-card);
  transition: border-color var(--adagen-dur-fast) var(--adagen-ease-out),
    box-shadow var(--adagen-dur-fast) var(--adagen-ease-out);
}

.sozluk-search-box:focus-within {
  border-color: var(--adagen-blue-600);
  box-shadow: var(--adagen-ring);
}

.sozluk-search-box > i {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: var(--adagen-blue-600);
}

.sozluk-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.6rem 0.25rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--adagen-text);
  font-size: var(--adagen-fs-body, 1rem);
}

.sozluk-search-input::placeholder {
  color: var(--adagen-text-muted);
}

.sozluk-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--adagen-surface);
  border: 2px solid var(--adagen-border);
  border-top: none;
  border-radius: 0 0 var(--adagen-radius-md) var(--adagen-radius-md);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--adagen-shadow-md);
  display: none;
}

.search-result-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--adagen-border);
  cursor: pointer;
  transition: background var(--adagen-dur-fast) ease;
}

.search-result-item:hover {
  background: var(--adagen-bg-subtle);
}

.search-result-item a {
  display: block;
  text-decoration: none;
  color: var(--adagen-text);
}

.no-results {
  padding: 1rem;
  text-align: center;
  color: var(--adagen-text-muted);
  font-size: 0.875rem;
}

/* --- Terms List (Hub Page Cards) --- */
.sozluk-terms-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 0;
}

/* Kart dili — /hizmetler-ve-testler/genetik-testler ".adagen-bento-card"
   ile aynı: kenarlıksız, yumuşak gölge, hover'da kalkma + gölge artışı +
   köşede beliren ok. Kartın tamamı tıklanabilir; başlık düz metindir. */
.sozluk-term-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--adagen-surface);
  background-image: var(--adagen-card-tint);
  border: 0;
  border-radius: var(--adagen-radius-card);
  box-shadow: var(--adagen-shadow-card);
  padding: 1.5rem;
  cursor: pointer;
  transition: transform var(--adagen-dur-base) var(--adagen-ease-out),
              box-shadow var(--adagen-dur-base) var(--adagen-ease-out);
}

.sozluk-term-card:hover,
.sozluk-term-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--adagen-elevation-4);
}

.sozluk-term-card:focus-visible {
  outline: 2px solid var(--adagen-blue-600);
  outline-offset: 2px;
}

/* hover'da köşede beliren ok — bento kartla birebir aynı işaretleme */
.sozluk-term-card::after {
  content: "\f105"; /* la-angle-right */
  font-family: "Line Awesome Free";
  font-weight: 900;
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  color: var(--adagen-blue-400);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--adagen-dur-base) var(--adagen-ease-out),
              transform var(--adagen-dur-base) var(--adagen-ease-out);
}

.sozluk-term-card:hover::after,
.sozluk-term-card:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.sozluk-term-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
  font-weight: var(--adagen-font-weight-semibold);
  letter-spacing: var(--adagen-tracking-tight);
  color: var(--adagen-text);
  /* köşedeki ok başlığın üstüne binmesin */
  padding-inline-end: 1.5rem;
}

.term-preview {
  color: var(--adagen-text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

/* "Detay" — düğme değil, metin bağlantısı; JS'siz/arama motoru erişimi için
   kartın altında kalan tek gerçek <a> */
.term-modal-btn {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  color: var(--adagen-link);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--adagen-dur-fast) ease;
}

.term-modal-btn:hover {
  color: var(--adagen-link-hover);
  text-decoration: underline;
}

.term-modal-btn:focus-visible {
  outline: 2px solid var(--adagen-blue-600);
  outline-offset: 2px;
  border-radius: var(--adagen-radius-sm);
}

/* --- Modal --- */
.sozluk-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sozluk-modal[hidden] { display: none; }

.sozluk-modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(11, 54, 88, 0.5);
  cursor: pointer;
}

.sozluk-modal-content {
  position: relative;
  background: var(--adagen-surface);
  border-radius: var(--adagen-radius-lg);
  padding: 2rem;
  /* Masaüstünde 16:9 sabit çerçeve, içerik kutunun içinde kayar; mobilde
     dikey ekranı doğal biçimde doldursun (bkz. .adagen-sonuc-modal-panel,
     aynı kural 2026-09-09'da tüm modallara genişletildi). */
  max-width: min(92vw, 900px);
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--adagen-shadow-xl);
  animation: slideUp var(--adagen-dur-base) ease;
}

@media (max-width: 575.98px) {
  .sozluk-modal-content {
    max-width: 100%;
    aspect-ratio: auto;
    max-height: min(88vh, 900px);
  }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.sozluk-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2rem; height: 2rem;
  border: none;
  background: transparent;
  color: var(--adagen-text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--adagen-radius-sm);
  transition: background var(--adagen-dur-fast) ease;
}

.sozluk-modal-close:hover,
.sozluk-modal-close:focus {
  background: var(--adagen-bg-subtle);
  outline: 2px solid var(--adagen-blue-600);
  outline-offset: 2px;
}

/* Modal bölümleri — başlık bir önceki bölümün metnine yapışmasın */
.sozluk-modal-content .sozluk-section {
  margin-bottom: 1.75rem;
}

.sozluk-modal-content .sozluk-section:last-of-type {
  margin-bottom: 0;
}

.sozluk-modal-content .sozluk-section > h3 {
  margin-top: 0;
}

.sozluk-modal-content .sozluk-section > h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  font-weight: var(--adagen-font-weight-semibold);
  color: var(--adagen-blue-600);
  border-bottom: 1px solid var(--adagen-border);
  padding-bottom: 0.5rem;
}

.sozluk-modal-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--adagen-border);
  display: flex;
  justify-content: flex-end;
}

/* "Tam Sayfayı Aç" — düğme değil, metin bağlantısı */
.sozluk-modal-footer a,
.sozluk-modal-link {
  display: inline-block;
  padding: 0;
  font-size: 0.875rem;
  background: none;
  border: none;
  color: var(--adagen-link);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--adagen-dur-fast) ease,
              transform var(--adagen-dur-fast) ease;
}

.sozluk-modal-footer a:hover,
.sozluk-modal-link:hover {
  color: var(--adagen-link-hover);
  text-decoration: underline;
}

.sozluk-modal-footer a:focus-visible,
.sozluk-modal-link:focus-visible {
  outline: 2px solid var(--adagen-blue-600);
  outline-offset: 2px;
  border-radius: var(--adagen-radius-sm);
}

/* ============================================
   Term Detail Page (verified adagen-term-* classes)
   ============================================ */

.adagen-sozluk-term {
  background: var(--adagen-bg);
  color: var(--adagen-text);
}

/* Terim başlığı — genel .inner-page-hero h1 kuralının (custom.css) %20
   küçültülmüş hâli. Katalog terim adları ("Ailesel Meme Kanserine yatkınlık /
   Fankoni anemisi, kompleman grup N" gibi) diğer sayfa başlıklarından çok
   daha uzun olabiliyor; orijinal ölçekte satır taşmasına yol açıyordu.
   Yalnızca sözlük terim sayfasına özgü — diğer sayfaların başlıkları etkilenmez. */
.adagen-sozluk-term-hero .title-container h1,
.adagen-sozluk-term-hero .title-container .h1 {
  font-size: clamp(1.52rem, 1.28vw + 0.8rem, 2.4rem);
}

/* Uzun terim adları tek satıra zorlanmasın — custom.css'teki masaüstü
   nowrap kuralını bu sayfada geçersiz kılar, doğal sarmaya izin verir. */
@media (min-width: 992px) {
  .adagen-sozluk-term-hero .title-container h1,
  .adagen-sozluk-term-hero .title-container .h1 {
    white-space: normal;
  }
}

/* Katalogda tek başlıkta birleştirilmiş diğer sendrom/hastalık adları
   (bkz. Dictionary::COMPOUND_NAME_MAP) H1'de artık görünmüyor — bilgi
   kaybolmasın diye burada, H1'in hemen altında, küçük punto ile listelenir. */
.adagen-term-related-names {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--adagen-text-muted);
}

.adagen-term-body {
  /* Genişlik artık .col-lg-9'dan geliyor (test-hazirlik-rehberi.html ile
     aynı yapı) — burada ayrıca bir max-width sabiti yok; olsaydı grid'i
     çift daraltırdı. */
  padding: 2rem 1rem;
}

.adagen-term-header {
  margin-bottom: 2rem;
}

/* Ayırıcı çizgi ve alt boşluk yalnızca Doktor Onaylı rozeti gerçekten
   varsa gösterilir — rozet yoksa (data-v-if kaldırır) başlık boş kalır ve
   çizgi tek başına asılı kalırdı. */
.adagen-term-header:has(.adagen-term-review) {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--adagen-border);
}

.adagen-term-header h1 {
  margin: 0 0 1rem 0;
  color: var(--adagen-blue-600);
}

.adagen-term-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--adagen-text-muted);
}

.adagen-term-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--adagen-success);
  color: var(--adagen-text-on-dark);
  border-radius: var(--adagen-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

.adagen-term-review-by {
  font-weight: 500;
  color: var(--adagen-text-secondary);
}

.adagen-term-review-date {
  color: var(--adagen-text-muted);
}

.adagen-term-section {
  margin-bottom: 1.5rem;
}

.adagen-term-section-title {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  font-weight: var(--adagen-font-weight-semibold);
  color: var(--adagen-blue-600);
}

/* Alt başlıklar — "Tanım" bölüm başlığının küçük kardeşi.
   İçerikte "### Etiket" olarak yazılır, mdToHtml() <h3> üretir. */
.adagen-term-subtitle {
  font-size: 1rem;
  font-weight: var(--adagen-font-weight-semibold);
  color: var(--adagen-blue-600);
  margin: 0 0 0.25rem;
}

/* Her alt başlık bloğu ayırıcı çizgiyle kapanır (mdToHtml sarmalar) */
.adagen-term-block {
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--adagen-border);
}

.adagen-term-block > :last-child {
  margin-bottom: 0;
}

.adagen-term-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.adagen-term-subtitle + p {
  margin-top: 0;
}

.adagen-term-related-other {
  color: var(--adagen-text-secondary);
  font-size: 0.9rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--adagen-border);
}

/* İlişkili terimler — sözlük ana sayfasındaki kart dilinin ızgara hâli.
   Kartın tamamı tıklanabilir: bağlantı ::after ile kartı kaplar (JS gerekmez).
   Masaüstünde (≥992px, .col-lg-9 genişliği) 3 kolon; tablette 2, mobilde 1. */
.sozluk-terms-list.adagen-related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

@media (min-width: 992px) {
  .sozluk-terms-list.adagen-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Bu kartlarda JS yok — tıklanabilirlik ::after ile kartı kaplayan gerçek
   bağlantı üzerinden sağlanır. Kalkma/gölge/ok efekti üst taraftaki
   .sozluk-term-card kurallarından miras kalır (saf CSS :hover/:focus-within). */
.adagen-related-grid .term-modal-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.adagen-related-grid .sozluk-term-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--adagen-elevation-4);
}

.adagen-related-grid .sozluk-term-card:focus-within::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 767px) {
  .sozluk-terms-list.adagen-related-grid {
    grid-template-columns: 1fr;
  }
}

.adagen-term-text,
.adagen-term-definition {
  line-height: var(--adagen-leading-body);
  color: var(--adagen-text);
}

.adagen-term-references {
  background: var(--adagen-bg-subtle);
  padding: 1.5rem;
  border-radius: var(--adagen-radius-lg);
  margin-top: 2rem;
}

.adagen-term-reference-list {
  margin: 0;
  padding-left: 1.5rem;
  list-style: decimal;
}

.adagen-term-reference {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.adagen-term-reference a {
  color: var(--adagen-link);
  text-decoration: none;
}

.adagen-term-reference a:hover {
  color: var(--adagen-link-hover);
  text-decoration: underline;
}

.adagen-term-reference-type {
  font-size: 0.8rem;
  color: var(--adagen-text-muted);
  margin-left: 0.5rem;
}

.adagen-term-references-empty {
  color: var(--adagen-text-muted);
  font-style: italic;
}

.adagen-term-footer {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--adagen-border);
}

/* Terimler arası gezinme — üç mavi düğme, temanın .btn-primary dili */
.adagen-term-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.adagen-term-nav-btn {
  flex: 0 1 auto;
  min-width: 8rem;
  text-align: center;
}

@media (max-width: 575px) {
  .adagen-term-nav {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

@media (max-width: 1199px) {
  .sozluk-terms-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Harf şeridi dar ekranda kaydırma yerine satırlara bölünür */
@media (max-width: 991px) {
  .sozluk-letters {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }
  .sozluk-terms-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .sozluk-letters {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .sozluk-letter {
    padding: 0.5rem 0.15rem;
  }
}

@media (max-width: 576px) {
  .sozluk-search-wrapper { margin-bottom: 1.5rem; }
  .sozluk-terms-list { grid-template-columns: 1fr; }
  .sozluk-modal-content { padding: 1.5rem; max-height: 95vh; }
  .adagen-term-header h1 { font-size: 1.5rem; }
  .adagen-term-review { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .adagen-term-body { padding: 1.5rem 1rem; }
}

/* ============================================
   Accessibility
   ============================================ */

@media (prefers-contrast: more) {
  .sozluk-letter, .term-modal-btn, .sozluk-modal-close, .adagen-term-nav-btn {
    border-width: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sozluk-letter, .sozluk-term-card, .term-modal-btn, .sozluk-modal-content {
    transition: none;
  }
  @keyframes slideUp {
    from, to { transform: none; opacity: 1; }
  }
}

/* --- İçe aktarılan terim içeriği (Markdown -> HTML) ---
   import-dictionary.php'deki mdToHtml() bu yapıları üretir:
   tablo, alıntı, madde listesi ve [n] atıf üst simgesi.
   Yeni bir yapı eklenirse buraya karşılığı da eklenmelidir. */

.adagen-term-text > :last-child,
.adagen-term-definition > :last-child {
  margin-bottom: 0;
}

/* Veri tabloları — dar ekranda kendi içinde kaydırılır */
.sozluk-tablo {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--adagen-space-3) 0;
  font-size: var(--adagen-fs-small);
  -webkit-overflow-scrolling: touch;
}

.sozluk-tablo th,
.sozluk-tablo td {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--adagen-border);
  text-align: start;
  vertical-align: top;
}

.sozluk-tablo th {
  background: var(--adagen-bg-subtle);
  font-weight: var(--adagen-font-weight-semibold);
  color: var(--adagen-text);
  white-space: nowrap;
}

.sozluk-tablo tbody tr:nth-child(even) td {
  background: var(--adagen-bg-subtle);
}

/* Uyarı / vurgu alıntıları */
.adagen-term-text blockquote,
.adagen-term-definition blockquote {
  margin: var(--adagen-space-3) 0;
  padding: 0.9rem 1.1rem;
  /* Nötr kenarlık — temanın kendi alıntı kalıbı (blog.css) ile aynı;
     marka rengiyle vurgulanmış yan şerit bilinçli olarak kullanılmadı. */
  border-inline-start: 3px solid var(--adagen-border);
  background: var(--adagen-bg-subtle);
  color: var(--adagen-text-secondary);
}

.adagen-term-text blockquote p:last-child,
.adagen-term-definition blockquote p:last-child {
  margin-bottom: 0;
}

.adagen-term-text ul,
.adagen-term-definition ul {
  padding-inline-start: 1.35rem;
  margin-bottom: var(--adagen-space-3);
}

.adagen-term-text li,
.adagen-term-definition li {
  margin-bottom: 0.4rem;
}

/* "bkz. X terimi" çapraz gönderme bağlantısı.
   import-dictionary.php'deki bkzBaglantilari() üretir; karşılığı olmayan
   gönderme düz metin kalır, bu yüzden her .sozluk-bkz gerçek bir sayfaya gider. */
.sozluk-bkz {
  color: var(--adagen-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.sozluk-bkz:hover,
.sozluk-bkz:focus-visible {
  color: var(--adagen-link-hover);
}