/* Dr.vel site prototipi. Görsel yön D: nane logo. */

:root,
[data-yon="d"] {
  --wa: #1E7A4C;
  --hata: #A3261B;
  --baslik-harf: 0;
  --zemin: #FFFFFF;
  --yuzey: #EEF5F2;
  --metin: #1F2B28;
  --soluk: #55635F;
  --ana: #1F2B28;
  --ana-uzerinde: #FFFFFF;
  --ikincil-kenar: #3D7466;
  --vurgu: #3D7466;
  --motif: #8AB7AB;
  --cizgi: #DCE6E2;
  --koyu: #1F2B28;
  --koyu-metin: #FFFFFF;
  --koyu-soluk: #CFE3DC;
  --font-baslik: "Cormorant Garamond", Georgia, serif;
  --font-metin: "Manrope", system-ui, sans-serif;
  --baslik-kalinlik: 600;
  --dugme-kose: 999px;
  --form-vurgu: #1F2B28;
  --form-secili: #EEF5F2;
  --motif-opak: 0.35;
  /* Üst alan ve ana sayfa açılışı geniş durur: logo ve açılış yazısı sol kenara, menü sağ kenara yakın. */
  --yan: clamp(1.25rem, 3.2vw, 4rem);
  --genis: 110rem;
}


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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Klavyeyle gelinen öğe mobil eylem çubuğunun altında kalmasın. */
@media (max-width: 959px) { html { scroll-padding-bottom: 6rem; } }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-metin);
  font-size: 1.125rem;
  line-height: 1.6;
  /* Mobilde alt eylem çubuğu içeriği örtmesin. */
  padding-bottom: 5.5rem;
}
@media (min-width: 960px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; }
/* Koyu bölümlerde nane halka (6.6:1); koyu bölümdeki beyaz formda yine koyu yeşil. */
:is(.alt, .basvuru, .yontem--one, .ozet--one) :focus-visible { outline-color: var(--motif); }
.basvuru .form :focus-visible { outline-color: var(--vurgu); }
/* Giriş sahnesinde düğmeler fotoğrafın üstünde: koyu halka beyaz haleyle her karede seçilir. */
.yolculuk :focus-visible { outline-color: var(--metin); box-shadow: 0 0 0 8px #FFFFFF; }

h1, h2, h3 {
  font-family: var(--font-baslik);
  font-weight: var(--baslik-kalinlik);
  letter-spacing: var(--baslik-harf);
  line-height: 1.2;
  margin: 0;
}

.kap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.kap--dar { width: min(100% - 2.5rem, 46rem); }

/* Prototip şeridi */
.prototip {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; justify-content: center;
  padding: 0.5rem 1rem; background: #FFF3C4; color: #3D3300; font: 600 0.875rem/1.4 system-ui, sans-serif; text-align: center;
}

/* Üst alan */
.ust { background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
.ust__ic { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; width: min(100% - 2 * var(--yan), var(--genis)); }
.ust__logo { display: flex; align-items: center; min-height: 2.75rem; width: 9.5rem; }
.ust__menu { display: none; gap: 1.75rem; align-items: center; }
.ust__menu > a:not(.dugme) { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-weight: 600; color: var(--soluk); }
.ust__menu > a:not(.dugme):hover { color: var(--metin); }
/* "İçeriğe geç": klavyeyle ilk Tab'da görünür. */
.atla { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 40; padding: 0.6rem 1rem; border-radius: 0.5rem; background: var(--zemin); color: var(--metin); font-weight: 700; }
.atla:focus { top: 0.5rem; }
@media (min-width: 960px) {
  .ust__logo { width: 11.5rem; }
  .ust__menu { display: flex; margin-inline-start: auto; }
}

.logo--d { display: block; }

/* Düğmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.4rem; border-radius: var(--dugme-kose, 0.6rem);
  font: 700 1rem/1.2 var(--font-metin); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background-color 0.15s, color 0.15s;
}
.dugme--ana { background: var(--ana); color: var(--ana-uzerinde); }
.dugme--ana:hover { filter: brightness(1.12); }
.dugme--ikincil { border-color: var(--ikincil-kenar); color: var(--metin); background: transparent; }
.dugme--ikincil:hover { background: var(--yuzey); }
.dugme--wa { background: var(--wa); color: #FFFFFF; }
.dugme--kucuk { min-height: 2.75rem; padding: 0 1rem; }
.dugme--genis { width: 100%; }
.ikon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* WhatsApp simgesi koyu düğmede logonun nane yeşiliyle */
.dugme--ana[data-olay="whatsapp_click"] .ikon { stroke: var(--motif); }

/* Giriş */
.giris { padding-top: 2.5rem; overflow: hidden; }
.giris__ic { display: grid; gap: 2rem; align-items: center; }
.giris__baslik { font-size: clamp(2.25rem, 7vw, 3.75rem); max-width: 16ch; }
.giris__baslik .satir { display: block; }
.giris__ozet { margin: 1.25rem 0 0; max-width: 34rem; color: var(--soluk); font-size: 1.2rem; }
.giris__eylem { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.giris__eylem .dugme { flex: 1 1 14rem; }
.giris__motif { justify-self: center; width: min(52vw, 15rem); }
@media (min-width: 960px) {
  .giris { padding-top: 4.5rem; }
  .giris__ic { grid-template-columns: 1.4fr 1fr; }
  .giris__eylem .dugme { flex: 0 0 auto; }
  .giris__motif { width: 20rem; }
}
@media (max-width: 959px) {
  .giris__motif { order: -1; width: 6.5rem; justify-self: start; }
}

.meander { display: block; width: 100%; height: 2.125rem; margin-top: 2.5rem; overflow: visible; }
.meander path { fill: none; stroke: var(--motif); stroke-width: 1.5; stroke-linecap: square; }

/* Bölümler */
.bolum { padding-block: 3.5rem; }
.bolum--yuzey { background: var(--yuzey); }
.bolum__baslik { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
.bolum__giris { max-width: 40rem; color: var(--soluk); margin: 0.75rem 0 0; }
@media (min-width: 960px) { .bolum { padding-block: 5rem; } }

/* Yöntemler: öne çıkan yöntem geniş, diğer ikisi sıralı */
.yontemler { display: grid; gap: 1rem; margin-top: 2rem; }
.yontem { padding: 1.5rem 0; border-top: 1px solid var(--cizgi); }
.yontem h3 { font-size: 1.4rem; }
.yontem p { margin: 0.5rem 0 0.75rem; max-width: 38rem; color: var(--soluk); }
.yontem--one {
  padding: 1.75rem; border: 0; border-radius: 1rem; background: var(--koyu); color: var(--koyu-metin);
}
.yontem--one h3 { font-size: clamp(1.6rem, 4vw, 2rem); }
.yontem--one p { color: var(--koyu-soluk); }
.metin-baglanti { font-weight: 700; text-underline-offset: 0.25em; text-decoration-thickness: 1.5px; text-decoration-color: var(--motif); }
@media (min-width: 960px) {
  .yontemler { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; column-gap: 3rem; }
  .yontem--one { grid-row: span 2; padding: 2.5rem; }
}

/* Süreç: gerçek bir sıra olduğu için numaralı */
.surec { list-style: none; counter-reset: adim; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.surec li { counter-increment: adim; position: relative; padding-inline-start: 3.5rem; }
.surec li::before {
  content: counter(adim); position: absolute; inset-inline-start: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--motif);
  display: grid; place-items: center; font: 700 1rem/1 var(--font-metin); color: var(--vurgu);
}
.surec p { margin: 0.35rem 0 0; color: var(--soluk); }
@media (min-width: 960px) {
  .surec { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .surec li { padding-inline-start: 0; padding-top: 3.5rem; }
}

.yer-tutucu {
  margin: 1rem 0 0; padding: 1.25rem; border: 1.5px dashed var(--cizgi); border-radius: 0.75rem;
  color: var(--soluk); max-width: 40rem;
}
.yer-tutucu--koyu { border-color: #4A5A80; color: var(--koyu-soluk); margin: 0; }

/* SSS */
.sss { margin-top: 1.5rem; border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.5rem; padding: 0.75rem 0; font-weight: 700;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font: 400 1.6rem/1 var(--font-metin); color: var(--vurgu); flex: none; }
.sss details[open] summary::after { content: "−"; }
.sss__yanit { overflow: hidden; }
.sss__yanit p { margin: 0 0 1.25rem; color: var(--soluk); max-width: 40rem; }

/* Başvuru */
.basvuru { background: var(--koyu); color: var(--koyu-metin); padding-block: 3.5rem; }
.basvuru .bolum__baslik { color: var(--koyu-metin); }
.basvuru__ic { display: grid; gap: 2rem; }
.basvuru__metin p { color: var(--koyu-soluk); max-width: 30rem; }
@media (min-width: 960px) {
  .basvuru { padding-block: 5rem; }
  .basvuru__ic { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
}

.form { background: #FFFFFF; color: var(--form-vurgu, #202C48); border-radius: 1rem; padding: 1.5rem; display: grid; gap: 1.1rem; }
.alan { margin: 0; padding: 0; border: 0; display: grid; gap: 0.35rem; }
.alan > label, .alan > legend { font-weight: 700; font-size: 1rem; padding: 0; }
.alan input[type="text"], .alan input[type="tel"], .alan input[type="email"], .alan select {
  min-height: 3rem; padding: 0 0.85rem; border: 1.5px solid #8A93A6; border-radius: 0.6rem;
  font: 1.0625rem var(--font-metin); color: var(--form-vurgu, #202C48); background: #FFFFFF; width: 100%;
}
.alan textarea {
  min-height: 5.5rem; padding: 0.65rem 0.85rem; border: 1.5px solid #8A93A6; border-radius: 0.6rem; resize: vertical;
  font: 1.0625rem/1.45 var(--font-metin); color: var(--form-vurgu, #202C48); background: #FFFFFF; width: 100%;
}
.alan [aria-invalid="true"] { border-color: #A3261B; }
.alan__hata { margin: 0; color: #A3261B; font-size: 0.95rem; font-weight: 600; }
.secenekler { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.secenek {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem;
  border: 1.5px solid #8A93A6; border-radius: 0.6rem; font-weight: 600; cursor: pointer;
}
/* Uzun izin cümleleri alt alta, metin kutunun içinde kayar */
.secenekler--alt-alta { flex-direction: column; }
.secenekler--alt-alta .secenek { padding-block: 0.6rem; line-height: 1.35; }
.alan__istege-bagli { font-weight: 400; color: #4A5468; }
.secenek:has(input:checked) { border-color: var(--form-vurgu, #202C48); background: var(--form-secili, #EEF0F5); }
.secenek input, .onay input { width: 1.25rem; height: 1.25rem; accent-color: var(--form-vurgu, #202C48); margin: 0; flex: none; }
.onay { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.975rem; line-height: 1.45; color: #3D4A46; }
.onay input { margin-top: 0.15rem; }
/* Onay metinleri: aydınlatma bilgisi ve isteğe bağlı pazarlama izni başvurudan ayrı, taslak olarak işaretli */
.onay-metinleri { display: grid; gap: 0.75rem; padding: 1rem; border: 1px dashed #D7B4AE; border-radius: 0.75rem; background: #FFFBFA; }
.basvuru .onay-metinleri .rozet { margin: 0; justify-self: start; }
.alan--izin { gap: 0.5rem; }
.alan--izin > legend { font-size: 0.975rem; }
.alan__aciklama { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #3D4A46; }
.form__sonuc { padding: 1rem; border-radius: 0.6rem; background: #E7F3EC; color: #14532F; }
.form__hata { margin: 0; padding: 1rem; border-radius: 0.6rem; background: #FCE8E6; color: #5C1A12; display: grid; gap: 0.5rem; justify-items: start; }
.form__hata[hidden] { display: none; }
.form__hata p { margin: 0; }
.form__hata-baslik { font-weight: 700; font-size: 1.05rem; }
.form__hata-wa { margin-top: 0.25rem; }
.alan--tuzak { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__sonuc p { margin: 0; }
.form__sonuc-baslik { font-weight: 700; font-size: 1.1rem; }

/* Alt alan */
.alt { background: var(--koyu); color: var(--koyu-metin); padding-block: 2.5rem 3rem; border-top: 1px solid #33433F; }
.alt__ic { display: grid; gap: 1.5rem; }
.alt__logo { width: 10rem; }
.alt__baglantilar { display: flex; flex-wrap: wrap; column-gap: 1.5rem; margin-top: 1rem; }
.alt__baglantilar a, .alt__cerez { color: var(--koyu-soluk); min-height: 2.75rem; display: inline-flex; align-items: center; }
.alt__cerez { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 960px) { .alt__ic { grid-template-columns: auto 1fr; gap: 4rem; } }
/* Mobilde boşluğu gövde yerine alt bilgi bırakır: sayfa sonunda koyu alt bilgi ile eylem çubuğu arasında beyaz şerit kalmaz. */
@media (max-width: 959px) {
  body { padding-bottom: 0; }
  .alt { padding-bottom: calc(3rem + 4.1rem + env(safe-area-inset-bottom)); }
}

/* Mobil alt eylem çubuğu */
.eylem-cubugu {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--yuzey); box-shadow: 0 -2px 12px rgb(31 43 40 / 0.12);
}
.eylem-cubugu .dugme { padding: 0 0.5rem; min-height: 2.9rem; }
@media (min-width: 960px) { .eylem-cubugu { display: none; } }
.cerez-acik .eylem-cubugu { visibility: hidden; }
/* Çerez penceresi kısayken (olcum.js ölçer) çubuk pencerenin hemen üstünde görünür kalır: ziyaretçi seçim yapmadan da
   WhatsApp, arama ve başvuruya ulaşır. Tercihler açılıp pencere uzayınca çubuk yine gizlenir. */
.cerez-acik.cerez-cubuklu .eylem-cubugu { visibility: visible; bottom: var(--cerez-yukseklik, 0px); padding-bottom: 0.6rem; }
/* Mobil menü açıkken eylem çubuğu menü bağlantılarını örtmesin. */
html:has(.menu-mobil[open]) .eylem-cubugu { visibility: hidden; }

/* Çerez onay penceresi: alt kenarda durur, sayfayı kilitlemez. Reddet ve kabul aynı görünür ağırlıkta. */
.cerez {
  position: fixed; inset: auto 0 0 0; z-index: 30; max-height: 85vh; overflow-y: auto;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: #FFFFFF; color: var(--metin);
  border-top: 1px solid var(--cizgi); box-shadow: 0 -4px 24px rgb(31 43 40 / 0.18);
}
.cerez[hidden], .cerez__tercihler[hidden], .alt__cerez[hidden] { display: none; }
/* Tercih yoksa satır içi betik html'e cerez-acik ekler: pencere olcum.js'i beklemeden ilk boyamada görünür. */
.cerez-acik .cerez[hidden] { display: block; }
.cerez__ic { display: grid; gap: 0.75rem; max-width: 40rem; }
.cerez__baslik { margin: 0; font-size: 1.4rem; }
.cerez .rozet { margin: 0; justify-self: start; }
.cerez__metin { margin: 0; font-size: 0.975rem; line-height: 1.5; }
.cerez__metin a { font-weight: 700; color: inherit; text-underline-offset: 0.2em; text-decoration-color: var(--motif); }
.cerez__tercihler { display: grid; gap: 0.75rem; justify-items: start; }
.cerez .alan > .onay { font-weight: 400; }
.cerez__eylem { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cerez__ayar {
  grid-column: 1 / -1; min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 1rem var(--font-metin); color: var(--metin);
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--motif);
}
/* Küçük telefonda çerez penceresi ilk ekranın yarısından fazlasını kaplamasın; düğmeler değişmez. */
@media (max-width: 480px) { .cerez { padding-top: 0.75rem; } .cerez__ic { gap: 0.5rem; } .cerez__baslik { font-size: 1.2rem; } .cerez__metin { font-size: 0.875rem; line-height: 1.45; } }
@media (min-width: 960px) {
  .cerez {
    inset: auto auto 1.5rem 1.5rem; width: min(30rem, 100% - 3rem); padding: 1.5rem;
    border: 1px solid var(--cizgi); border-radius: 1rem;
  }
}

/* Açılış animasyonunun başlangıç durumu (yalnızca JS ve hareket izni varken) */
/* CSS ile ilk boyamada başlar; içerik JavaScript'i beklemediği için en büyük içerik (LCP) gecikmez. */
@keyframes giris-yukari { from { opacity: 0; transform: translateY(var(--giris-y, 28px)); } }
@keyframes giris-motif { from { opacity: 0; transform: scale(0.9) rotate(-10deg); } }
@keyframes cizgi-ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hareket .giris__baslik .satir { animation: giris-yukari 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hareket .giris__baslik .satir:nth-child(2) { animation-delay: 0.12s; }
.hareket .giris__baslik .satir:nth-child(3) { animation-delay: 0.24s; }
.hareket .giris__baslik .satir:nth-child(4) { animation-delay: 0.36s; }
.hareket .giris__ozet { --giris-y: 12px; animation: giris-yukari 0.6s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hareket .giris__eylem { --giris-y: 12px; animation: giris-yukari 0.6s 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hareket .giris__motif { animation: giris-motif 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hareket .meander--ciz path { stroke-dasharray: 1; animation: cizgi-ciz 2.2s 0.5s ease-in-out both; }
.hareket .meander--ciz path:first-child { animation-duration: 0.9s; animation-delay: 0.2s; }
.hareket .meander--ciz image { animation: giris-motif 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .hareket * { animation: none !important; transition: none !important; } }
.istege-bagli { font-weight: 400; color: var(--soluk); }
.aydinlatma { margin: 0; font-size: 0.95rem; color: #3D4A46; }

/* Yön D: nane logo. Giriş nane sisi bir panelde, monogram soluk filigran olarak durur.
   Cormorant'ın küçük x-yüksekliği için başlıklar biraz büyütülür. */
[data-yon="d"] .giris__ic {
  position: relative; overflow: hidden; background: var(--yuzey);
  border-radius: 1.5rem; padding: 2.25rem 1.25rem;
}
[data-yon="d"] .giris__metin { position: relative; }
[data-yon="d"] .giris__motif { position: absolute; inset-inline-end: -3.5rem; top: -2.5rem; width: 14rem; opacity: var(--motif-opak); }
[data-yon="d"] .giris__baslik { font-size: clamp(2.6rem, 8.5vw, 4.4rem); line-height: 1.04; max-width: 13em; }
[data-yon="d"] .bolum__baslik { font-size: clamp(2.1rem, 5.5vw, 3rem); }
[data-yon="d"] .yontem h3 { font-size: 1.65rem; }
@media (min-width: 960px) {
  [data-yon="d"] .giris__ic { padding: 4rem; grid-template-columns: 1fr; }
  [data-yon="d"] .giris__motif { width: 26rem; inset-inline-end: -4rem; top: -4rem; }
}

/* =====================================================================
   İç sayfalar ve ortak gezinme (Yön D için tasarlandı; renk ve yazılar
   yönün belirteçlerinden gelir). Ana sayfayı yalnızca menü ve altbilgi
   bağlantıları etkiler.
   ===================================================================== */

/* Üst alan: geçerli sayfa ve mobil menü. Ana sayfada yolculuk sahnesinin üstünde durur. */
.ust { position: relative; z-index: 5; }
.ust__menu > a[aria-current="page"] {
  color: var(--metin); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--motif); text-underline-offset: 0.45em;
}
.menu-mobil > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--ikincil-kenar);
  border-radius: var(--dugme-kose, 0.6rem); font-weight: 700; font-size: 1rem;
}
.menu-mobil > summary::-webkit-details-marker { display: none; }
.menu-mobil[open] > summary { background: var(--yuzey); }
.menu-mobil__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  padding: 0.25rem 1.25rem 1.25rem; background: var(--zemin);
  border-bottom: 1px solid var(--cizgi); box-shadow: 0 18px 32px rgb(31 43 40 / 0.14);
  /* Tedaviler listesi açılınca uzun menü ekranın içinde kayar. */
  max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain;
}
.menu-mobil__panel a {
  display: flex; align-items: center; min-height: 3.25rem; text-decoration: none;
  font-weight: 600; border-bottom: 1px solid var(--cizgi);
}
.menu-mobil__panel a:last-child { border-bottom: 0; }
.menu-mobil__panel a[aria-current="page"] { color: var(--vurgu); }
@media (min-width: 960px) { .menu-mobil { display: none; } }

/* Prototip işaretleri: tasarımın parçası değil, yayından önce kalkar */
.rozet {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.85rem 0 0;
  padding: 0.25rem 0.7rem; border-radius: 999px; background: #FFF3C4; color: #3D3300;
  font: 600 0.8125rem/1.4 system-ui, sans-serif;
}
.rozet::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #9A7A00; flex: none; }
.rozet--hukuk { background: #FCE8E6; color: #5C1A12; }
.rozet--hukuk::before { background: #A3261B; }
/* Koyu kartlarda rozet kendi metin rengini korur. */
.yontem--one .rozet { color: #3D3300; }
.yontem--one .rozet--hukuk { color: #5C1A12; }

/* Sayfa başı */
.yol ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; font-size: 0.95rem; color: var(--soluk); }
.yol li { display: inline-flex; align-items: center; }
.yol li + li::before { content: "/"; margin: 0 0.6rem; color: var(--soluk); }
.yol a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--soluk); text-underline-offset: 0.25em; }
.yol a:hover { color: var(--metin); }
.sayfa-bas { padding-block: 0.75rem 0; }
.sayfa-bas__baslik { margin-top: 0.75rem; font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1.05; max-width: 19ch; }
.sayfa-bas__ozet { margin: 1.25rem 0 0; max-width: 38rem; color: var(--soluk); font-size: 1.2rem; }
.sayfa-bas__eylem { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.sayfa-bas__eylem .dugme { flex: 1 1 14rem; }
.sayfa-bas .meander { margin-top: 2rem; }
@media (min-width: 960px) {
  .sayfa-bas__eylem .dugme { flex: 0 0 auto; }
  .sayfa-bas .meander { margin-top: 3rem; }
}

/* Öncelikli sayfa için panel başlığı: ana sayfadaki nane sisi panelin küçük kardeşi */
.sayfa-bas--panel .sayfa-bas__ic {
  position: relative; overflow: hidden; margin-top: 0.5rem; padding: 2rem 1.25rem 2.25rem;
  background: var(--yuzey); border-radius: 1.5rem;
}
.sayfa-bas--panel .sayfa-bas__metin { position: relative; }
.sayfa-bas__motif { position: absolute; inset-inline-end: -3rem; top: -2.25rem; width: 11.5rem; opacity: var(--motif-opak, 0.35); pointer-events: none; }
@media (min-width: 960px) {
  .sayfa-bas--panel .sayfa-bas__ic { padding: 3.5rem 4rem; }
  .sayfa-bas__motif { width: 22rem; inset-inline-end: -3rem; top: -3.5rem; }
}

/* Okuma sütunu: bölümler ince çizgiyle ayrılır, her biri ayrı bant değildir */
.icerik { padding-block: 2.5rem 3.5rem; }
.icerik__bolum { scroll-margin-top: 1rem; }
.icerik > * + .icerik__bolum { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--cizgi); }
.icerik h2 { font-size: clamp(1.95rem, 5vw, 2.6rem); }
.icerik h3 { margin-top: 1.75rem; }
.icerik p, .icerik li { max-width: 42rem; }
.icerik p { margin: 0.85rem 0 0; }
.icerik ul { margin: 0.85rem 0 0; padding-inline-start: 1.25rem; }
.icerik li + li { margin-top: 0.4rem; }
.icerik li::marker { color: var(--vurgu); }
.icerik li[dir="rtl"] { margin-inline-start: 1.25rem; }
.icerik .metin-baglanti { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.5rem; }
.icerik .surec h3, .icerik .sss h3 { margin-top: 0; }
.icerik .sss { margin-top: 1.25rem; }
.icerik p a { color: var(--vurgu); text-underline-offset: 0.2em; }
.icerik .not { padding: 1rem 1.25rem; border-radius: 0.9rem; background: var(--yuzey); }
@media (min-width: 960px) { .icerik { padding-block: 3.5rem 5rem; } }

/* Uzun sayfa: geniş ekranda yanda sabit "Bu sayfada" listesi */
.makale { display: grid; gap: 1.5rem; padding-top: 2rem; }
.makale .icerik { padding-top: 0; min-width: 0; }
.icindekiler { border: 1px solid var(--cizgi); border-radius: 1rem; padding: 0 1rem; }
.icindekiler > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 3rem; font-weight: 700;
}
.icindekiler > summary::-webkit-details-marker { display: none; }
.icindekiler > summary::after { content: "+" / ""; font: 400 1.5rem/1 var(--font-metin); color: var(--vurgu); }
.icindekiler[open] > summary::after { content: "−" / ""; }
.icindekiler ol { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.icindekiler a {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 0;
  color: var(--soluk); font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none;
}
.icindekiler a:hover { color: var(--metin); text-decoration: underline; text-decoration-color: var(--motif); }
@media (min-width: 1100px) {
  .makale { grid-template-columns: 14rem minmax(0, 46rem); gap: 5rem; align-items: start; padding-top: 3.5rem; }
  .icindekiler { position: sticky; top: 1.5rem; border: 0; border-inline-start: 2px solid var(--cizgi); border-radius: 0; padding: 0; padding-inline-start: 1.25rem; }
  .icindekiler > summary { min-height: 2.25rem; color: var(--metin); }
}

/* Terimler */
.terimler { margin: 1.25rem 0 0; border-top: 1px solid var(--cizgi); }
.terimler > div { display: grid; gap: 0.25rem; padding: 1rem 0; border-bottom: 1px solid var(--cizgi); }
.terimler dt { font-weight: 700; }
.terimler dd { margin: 0; color: var(--soluk); }
@media (min-width: 760px) { .terimler > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }

/* Karşılaştırma tablosu: dar ekranda her satır etiketli bir bloğa dönüşür */
.tablo-kap { margin-top: 1.5rem; }
.tablo { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.tablo caption { text-align: start; color: var(--soluk); font-size: 0.95rem; padding-bottom: 0.75rem; }
.tablo th, .tablo td { text-align: start; vertical-align: top; padding: 0.9rem 1rem; border-bottom: 1px solid var(--cizgi); }
.tablo thead th { background: var(--yuzey); font-size: 0.95rem; }
.tablo tbody th { font-weight: 700; }
@media (max-width: 819px) {
  .tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tablo, .tablo caption, .tablo tbody, .tablo tr, .tablo th, .tablo td { display: block; }
  .tablo tr { margin-bottom: 0.9rem; padding: 0.25rem 1.1rem 0.5rem; border: 1px solid var(--cizgi); border-radius: 1rem; }
  .tablo tbody th { padding: 0.85rem 0 0.6rem; font: var(--baslik-kalinlik) 1.45rem/1.2 var(--font-baslik); }
  .tablo td { padding: 0.55rem 0; border: 0; }
  .tablo td::before { content: attr(data-etiket); display: block; font-size: 0.875rem; font-weight: 700; color: var(--soluk); }
}

/* Dikey adımlar (işlem günü gibi sıralı anlatımlar) */
.surec--dikey { gap: 0; margin-top: 1.5rem; }
.surec--dikey li { padding-bottom: 1.75rem; }
.surec--dikey li::after { content: ""; position: absolute; inset-inline-start: 1.2rem; top: 2.9rem; bottom: 0.5rem; width: 1.5px; background: var(--cizgi); }
.surec--dikey li:last-child { padding-bottom: 0; }
.surec--dikey li:last-child::after { display: none; }
.surec--dikey p { color: var(--metin); }
@media (min-width: 960px) {
  .surec--dikey { grid-template-columns: 1fr; gap: 0; }
  .surec--dikey li { padding-inline-start: 3.5rem; padding-top: 0; }
}

/* "İşlemi kim yapar?" ve bilgi kutuları */
@media (min-width: 960px) { .kim { padding: 2.25rem 2.5rem; } }
.bilgi-notu { display: grid; gap: 0.75rem; margin-top: 2.75rem; }
.bilgi-notu p { margin: 0; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--motif); background: var(--yuzey); border-radius: 0.75rem; border-start-start-radius: 0; border-end-start-radius: 0; font-size: 1rem; max-width: none; }

/* Diğer yöntemler: karşılaştırma bağlamında iki yönteme bağlantı */
.diger { display: grid; gap: 0.75rem; margin-top: 2.75rem; }
.diger__etiket { margin: 0; font-weight: 700; }
.diger__etiket a { color: var(--vurgu); font-weight: 600; text-underline-offset: 0.2em; }
.diger > a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 0.9rem 1.25rem; border: 1.5px solid var(--cizgi); border-radius: 1rem;
  text-decoration: none; font-weight: 700;
}
.diger > a:hover { border-color: var(--ikincil-kenar); }
.diger > a::after { content: "→" / ""; color: var(--vurgu); font-weight: 400; }
.diger small { display: block; margin-top: 0.15rem; color: var(--soluk); font-weight: 400; font-size: 0.95rem; }
@media (min-width: 760px) { .diger { grid-template-columns: 1fr 1fr; } .diger__etiket { grid-column: 1 / -1; } }

/* Kaynaklar */

/* Yöntemler sayfası: üç yöntemin özeti (öne çıkan yöntem koyu panelde) */
.ozetler { display: grid; gap: 1rem; margin-top: 1.25rem; }
.ozet { padding: 1.25rem 0 0.25rem; border-top: 1px solid var(--cizgi); }
.ozet h2 { font-size: clamp(1.7rem, 4.5vw, 2.1rem); }
.ozet p { color: var(--soluk); }
.ozet--one { padding: 1.75rem; border: 0; border-radius: 1.25rem; background: var(--koyu); color: var(--koyu-metin); }
.ozet--one p { color: var(--koyu-soluk); }
.ozet--one .metin-baglanti { color: var(--koyu-metin); }
@media (min-width: 960px) {
  .ozetler { grid-template-columns: 1.25fr 1fr; column-gap: 3rem; }
  .ozet--one { grid-row: span 2; padding: 2.5rem; }
}

/* Sık sorulan sorular sayfası: grup başlığı solda sabit, sorular sağda açık */
.gruplar-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.gruplar-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem;
  border: 1.5px solid var(--cizgi); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1rem;
}
.gruplar-nav a:hover { border-color: var(--ikincil-kenar); }
.soru-grubu { scroll-margin-top: 1rem; }
.gruplar-nav + .soru-grubu { margin-top: 2.5rem; }
.soru-grubu + .soru-grubu { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--cizgi); }
.soru { padding: 1.25rem 0; }
.soru + .soru { border-top: 1px dashed var(--cizgi); }
.soru h3 { margin-top: 0; }
.soru p { margin-top: 0.5rem; }
@media (min-width: 960px) {
  .soru-grubu { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; }
  .soru-grubu__bas { position: sticky; top: 1.5rem; align-self: start; }
  .soru:first-child { padding-top: 0; }
}

/* Hakkımızda: çalışma ilkeleri */
.ilkeler { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ilkeler li { max-width: 42rem; padding-block: 1.1rem; padding-inline: 1.25rem 0; border-inline-start: 3px solid var(--motif); }
.ilkeler li + li { margin-top: 0.75rem; }
.ilkeler strong { display: block; }

/* İletişim */
.iletisim-izgara { display: grid; gap: 1rem; }
.iletisim-izgara { margin-top: 0.5rem; }
.iletisim-izgara > section { padding-top: 1.25rem; border-top: 2px solid var(--motif); scroll-margin-top: 1rem; }
.iletisim-izgara > section + section { margin-top: 1.25rem; }
.iletisim-izgara h2 { font-size: 1.85rem; }
.iletisim-izgara .yer-tutucu { margin-top: 0.75rem; }
.harita-yeri { display: grid; place-items: center; min-height: 10rem; margin-top: 1rem; border-radius: 0.9rem; background: var(--yuzey); color: var(--soluk); font-size: 1rem; text-align: center; padding: 1rem; }
.hizli-iletisim { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.hizli-iletisim .dugme { flex: 1 1 14rem; }
@media (min-width: 960px) {
  .iletisim-izgara { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .iletisim-izgara > section + section { margin-top: 0; }
  .hizli-iletisim .dugme { flex: 0 0 auto; }
}
.basvuru__metin h3 { margin-top: 1.75rem; font-size: 1.45rem; color: var(--koyu-metin); }
.basvuru__metin .basvuru__alt-baslik { font-size: 1.15rem; margin-bottom: 0; }
.basvuru__adimlar { margin: 0.6rem 0 0; padding-inline-start: 1.25rem; display: grid; gap: 0.55rem; color: var(--koyu-soluk); max-width: 30rem; line-height: 1.5; }
.basvuru .rozet { margin-top: 0.75rem; color: #3D3300; }
.basvuru .rozet--hukuk { color: #5C1A12; }

/* Yasal metin yer tutucusu */
.yasal-bekliyor { margin-top: 1.25rem; padding: 1.75rem 1.5rem; border: 2px dashed #C9B45A; border-radius: 1.25rem; background: #FFFBEA; color: #3D3300; max-width: 42rem; }
.yasal-bekliyor p { margin: 0; color: inherit; }
.yasal-bekliyor__baslik { font-weight: 700; font-size: 1.2rem; }
.yasal-bekliyor p + p { margin-top: 0.6rem; }

/* Altbilgi: sayfa bağlantıları */
.alt__sayfalar { display: flex; flex-wrap: wrap; column-gap: 1.5rem; margin-top: 1.25rem; }
.alt__sayfalar a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--koyu-metin); text-decoration: none; font-weight: 600; }
.alt__sayfalar a:hover { text-decoration: underline; }
.alt__baglantilar { flex-wrap: wrap; }
.alt__telefon { margin: 0; }
.alt__eposta { margin: 0 0 0.75rem; }
.alt__randevu { margin: 0.5rem 0 0; color: var(--koyu-soluk); }
:is(.alt__telefon, .alt__eposta) a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--koyu-metin); font-weight: 700; font-size: 1.125rem; text-decoration: none; overflow-wrap: anywhere; }
:is(.alt__telefon, .alt__eposta) a:hover { text-decoration: underline; }
.iletisim-numara { margin: 0 0 1rem; }
.iletisim-numara a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.5rem; font-weight: 700; color: var(--metin); text-decoration: none; overflow-wrap: anywhere; }
.iletisim-numara a:hover { text-decoration: underline; }
.alt__sosyal { margin-top: 0.5rem; }
.alt__sosyal a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--koyu-metin); font-weight: 600; text-decoration: none; }
.alt__sosyal a:hover { text-decoration: underline; }
.alt__sosyal .ikon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Yön D: altbilgideki yer tutucu çerçevesi grafit zemine uygun renkte */
[data-yon="d"] .yer-tutucu--koyu { border-color: #56706A; }
.metin-baglanti--blok { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1rem; }

/* =====================================================================
   Saç yolculuğu (ana sayfa açılışı ve /yolculuk/): kare dizisi + canvas.
   Sahne yapışkan (sticky) durur; uzun kaydırma alanı yalnızca hareketli sürümde (html.yolculuk-hareketli).
   Başlıklar, uyarılar ve düğmeler canvas dışında, HTML.
   ===================================================================== */
/* Video kendi alanında durur, yazılar ve düğmeler onun yanında (yatay ekran) ya da altında (dikey ekran); ikisi üst üste
   binmez. Videonun yazılara bakan kenarı nane zemine yavaşça karışır (--kenar maskesi), sert bir çerçeve görünmez.
   Başlık kaydırırken yerinde kalır; kaydırınca yalnızca sahne yazısı değişir. */
.yolculuk { --kaydirma: 5; position: relative; background: var(--yuzey); color: var(--metin); }
.yolculuk-hareketli .yolculuk { height: calc(100vh * (1 + var(--kaydirma))); height: calc(100svh * (1 + var(--kaydirma))); }
.yolculuk__sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.yolculuk__kapak, .yolculuk__kapak img, .yolculuk__tuval {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.yolculuk__kapak, .yolculuk__tuval { -webkit-mask-image: var(--kenar); mask-image: var(--kenar); }
.yolculuk__kapak img { object-fit: cover; object-position: 50% calc(var(--dikey, 0.5) * 100%); }
.yolculuk__tuval { opacity: 0; }
.yolculuk--hazir .yolculuk__tuval { opacity: 1; }
.yolculuk--hazir .yolculuk__kapak { visibility: hidden; }

.yolculuk__katman {
  position: absolute; inset: 0; pointer-events: none; display: grid; gap: 0.75rem;
  padding: 1.25rem max(1.25rem, env(safe-area-inset-left)) calc(1.25rem + env(safe-area-inset-bottom));
}
.yolculuk__katman a { pointer-events: auto; }

.yolculuk__giris { grid-area: giris; max-width: 36rem; }
/* Ana sayfada başlık aynı zamanda .giris__baslik (ortak açılış stilleri); yolculuk ölçüleri onu geçersiz kılar. */
.yolculuk .yolculuk__baslik {
  font-family: var(--font-baslik); font-weight: 600; color: var(--metin); max-width: none;
  font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.04; margin: 0; text-wrap: balance;
}
.yolculuk__ozet { margin: 0.75rem 0 0; color: #33423E; font-size: 1.1rem; max-width: 30rem; }

/* Sahne başlıkları: hepsi DOM'da, yalnızca etkin olan görünür */
.yolculuk__sahneler { grid-area: sahne; list-style: none; margin: 0; padding: 0; display: grid; }
.yolculuk__sahneler li {
  grid-area: 1 / 1; justify-self: start; align-self: end; max-width: 30rem;
  color: var(--vurgu); font-weight: 700; font-size: 1.05rem; opacity: 0; transition: opacity 0.25s;
}
.yolculuk__sahneler li.etkin { opacity: 1; }
.yolculuk:not(.yolculuk--basladi) .yolculuk__sahneler li { opacity: 0; }

.yolculuk__eylem { grid-area: eylem; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.yolculuk__eylem .dugme { flex: 0 1 auto; }
.yolculuk__ikincil { background: #FFFFFF; color: #1F2B28; border-color: #FFFFFF; }

.yolculuk__cubuk { grid-area: cubuk; height: 3px; border-radius: 2px; background: rgb(31 43 40 / 0.14); overflow: hidden; }
.yolculuk__cubuk span { display: block; height: 100%; width: 100%; background: var(--vurgu); transform-origin: left; transform: scaleX(0); }
html:not(.yolculuk-hareketli) .yolculuk__cubuk { display: none; }

/* "Animasyonu geç": uzun kaydırma alanını atlayıp sahneden sonraki bölüme geçer (yalnızca hareketli sürümde).
   Sahne yazısıyla aynı satırda, karşı kenarda durur; satırı büyütmez. Dokunma alanı görünen yazıdan geniştir. */
.yolculuk__atla {
  grid-area: sahne; justify-self: end; align-self: end; position: relative; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0.25rem; color: var(--vurgu); font-size: 0.8rem; font-weight: 700;
  line-height: 1.3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.yolculuk__atla::after { content: ""; position: absolute; inset: -0.85rem -0.6rem; }
.yolculuk__atla .ikon { width: 0.95rem; height: 0.95rem; flex: none; }
.yolculuk__sahneler li { max-width: min(30rem, calc(100% - 10.5rem)); }
html:not(.yolculuk-hareketli) .yolculuk__atla { display: none; }

/* Ana sayfa: sahne üst alanın altından başlar (üst alan sahnenin üstünde durur); ilk görünümde düğmeler ekranın
   içinde kalır. Prototip şeridi varken düğmeler şeridin yüksekliği kadar yukarıda durur. */
.yolculuk--ana { margin-top: calc(-4.5rem - 1px); }
body:has(> .prototip) .yolculuk--ana .yolculuk__katman { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }

@media (min-width: 960px) {
  .yolculuk__katman { padding: 2rem max(var(--yan), (100% - var(--genis)) / 2) 2rem; }
  body:has(> .prototip) .yolculuk--ana .yolculuk__katman { padding-bottom: 4.5rem; }
  .yolculuk__eylem .dugme { flex: 0 0 auto; }
}

/* Yatay ekran: yazılar solda, video sağda kendi panelinde, ekranın kenarına yaslı. Kare panelin içinde videonun oranında
   (≈ 4:5, --kutu) durur, dış kenarla arasında --kayma kadar pay kalır: yüz yazılara yaklaşır. Bu pay karenin dış kenar
   sütunuyla doldurulur (tuvalde aynı sütun uzatılır, kapakta aynı gri geçiş), görüntü kenardan kopmaz; kaydırınca pay
   kapanır, yakın planlar paneli kaplar. Yazılara en az 38rem kalır. Arapçada (sağdan sola) panel ile yazılar yer değiştirir. */
@media (min-aspect-ratio: 1/1) {
  .yolculuk {
    --kutu: min(80.4vh, 52vw); --kayma: max(0px, min(14vw, 30vh, 100vw - 80.4vh - 38rem));
    --panel: calc(var(--kutu) + var(--kayma)); --dikey: 0.3;
    --kenar: linear-gradient(var(--kenar-yon, to right), transparent, rgb(0 0 0 / 0.08) calc(var(--kutu) * 0.05),
      rgb(0 0 0 / 0.3) calc(var(--kutu) * 0.12), rgb(0 0 0 / 0.62) calc(var(--kutu) * 0.2), rgb(0 0 0 / 0.88) calc(var(--kutu) * 0.28),
      #000 calc(var(--kutu) * 0.36));
  }
  @supports (height: 1svh) {
    .yolculuk { --kutu: min(80.4svh, 52vw); --kayma: max(0px, min(14vw, 30svh, 100vw - 80.4svh - 38rem)); }
  }
  [dir="rtl"] .yolculuk { --kenar-yon: to left; }
  .yolculuk__kapak, .yolculuk__tuval { inset-inline-start: auto; width: var(--panel); }
  .yolculuk__kapak { background: linear-gradient(#C0C0C0, #C7C7C7 17%, #CCCCCC 33%, #D0CDCE 50%, #C8C8C8 67%, #B8B8B8); }
  .yolculuk__kapak img { inset-inline-start: auto; inset-inline-end: var(--kayma); width: calc(100% - var(--kayma)); }
  .yolculuk__katman {
    padding-inline-end: calc(var(--panel) + clamp(2rem, 4vw, 4.5rem));
    grid-template-rows: 1fr auto auto 1fr auto auto;
    grid-template-areas: "." "giris" "eylem" "." "sahne" "cubuk";
  }
  .yolculuk--ana .yolculuk__katman { padding-top: calc(4.5rem + 1px + 2rem); }
  .yolculuk .yolculuk__baslik { font-size: clamp(2.4rem, min(5.6vw, 8vh), 4.4rem); }
  .yolculuk__eylem { margin-top: 1.75rem; }
}

/* Dikey ekran (telefon): video üstte, yazılar altında. Video alanı yazılardan kalan yüksekliği alır; alt kenarı nane
   zemine yavaşça karışır. Sahne yazısı ve ilerleme çubuğu bu geçiş bölgesinde, videonun hemen altında durur. Ana
   sayfada açılışta üst alan videonun tepesini örter; kaydırınca üst alan gider ve video ekranın tepesine dayanır. */
@media (max-aspect-ratio: 1/1) {
  .yolculuk {
    --kaydirma: 4.5;
    --kenar: linear-gradient(to bottom, #000 62%, rgb(0 0 0 / 0.8) 72%, rgb(0 0 0 / 0.42) 84%, rgb(0 0 0 / 0.12) 93%, transparent);
  }
  .yolculuk__sahne { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .yolculuk__kapak, .yolculuk__tuval { position: relative; inset: auto; grid-area: 1 / 1; }
  .yolculuk__katman {
    position: relative; inset: auto; grid-area: 2 / 1; margin-top: -3.25rem; gap: 0.6rem;
    grid-template-areas: "sahne" "cubuk" "giris" "eylem";
  }
  .yolculuk .yolculuk__sahneler li { font-size: 0.85rem; }
  .yolculuk .yolculuk__baslik { font-size: clamp(1.75rem, 9vw, 2.8rem); }
  .yolculuk__ozet { margin-top: 0.5rem; font-size: 0.95rem; }
  .yolculuk__eylem { margin-top: 0.4rem; }
  .yolculuk__eylem .dugme { flex: 1 1 auto; padding-inline: 1rem; }
}
/* Kısa telefon ekranı (iPhone SE gibi): yazılar küçülür, video alanına yer kalır. */
@media (max-aspect-ratio: 1/1) and (max-height: 740px) {
  .yolculuk .yolculuk__baslik { font-size: 1.85rem; }
  .yolculuk__ozet { font-size: 0.875rem; }
  .yolculuk__eylem .dugme { min-height: 2.75rem; }
}

/* Yolculuk sayfasının hareketsiz sürümü (ana sayfada sahne sabit giriş görseli olarak kalır) */
.sade { display: none; padding-block: 3rem; }
.yolculuk-sade .yolculuk--sayfa { display: none; }
.yolculuk-sade .sade { display: block; }
.sade__liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.sade__liste li { display: grid; gap: 0.5rem; font-weight: 700; }
.sade__liste img { width: 100%; height: auto; border-radius: 0.75rem; }


/* =====================================================================
   Diller: dil seçici ve sağdan sola (Arapça) ayarları. Yön bağımsız kurallar mantıksal özelliklerle yazıldı.
   ===================================================================== */
.dil-secici { position: relative; margin-inline-start: auto; }
.dil-secici > summary {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.6rem;
  border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700; color: var(--metin);
}
.dil-secici > summary::-webkit-details-marker { display: none; }
.dil-secici > summary:hover, .dil-secici[open] > summary { background: var(--yuzey); }
.dil-secici .ikon { width: 1.2rem; height: 1.2rem; }
.dil-secici__liste {
  position: absolute; inset-inline-end: 0; top: calc(100% + 0.35rem); z-index: 25; min-width: 11rem; margin: 0; padding: 0.4rem;
  list-style: none; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 0.9rem; box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}
.dil-secici__liste a {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; border-radius: 0.6rem;
  color: var(--metin); text-decoration: none; font-weight: 600;
}
.dil-secici__liste a:hover { background: var(--yuzey); }
.dil-secici__liste a[aria-current] { color: var(--vurgu); }
@media (min-width: 960px) { .dil-secici { margin-inline-start: 0.75rem; } }

/* Logo üslubu: menü, alt bilgideki sayfa bağlantıları ve yolculuk sahne etiketleri logodaki gibi büyük harf, geniş
   aralıklı tırnaklı yazı. Paragraflar, düğmeler ve form okunurluk için sade yazıda kalır. */
.ust__menu > a:not(.dugme), .mega__dugme, .menu-mobil > summary, .menu-mobil__panel a, .mega-mobil__dugme, .alt__sayfalar a, .yolculuk__sahneler li {
  font-family: var(--font-baslik); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
}
.ust__menu > a:not(.dugme), .mega__dugme, .menu-mobil > summary { font-size: 1.05rem; }
.menu-mobil__panel a, .yolculuk__sahneler li { font-size: 1.1rem; }
/* Arapça harfler bitişik yazılır: harf aralığı yok */
html[lang="ar"] :is(.ust__menu > a:not(.dugme), .mega__dugme, .mega-mobil__dugme, .mega__ad, .mega-mobil__ad, .mega__incele, .menu-mobil > summary, .menu-mobil__panel a, .alt__sayfalar a, .yolculuk__sahneler li) { letter-spacing: 0; }
/* Büyük harfli menü tablet ve küçük dizüstü genişliğinde tek satırda kalsın (960–1099 px: logo ve aralıklar biraz daralır). */
.ust__menu > a { white-space: nowrap; }
/* Logo sıkışmaz; 960–1199 px'te "Sık sorulanlar" üst menüden çıkar (mobil menüde, alt bilgide ve blogda duruyor). */
.ust__logo { flex: none; }
@media (min-width: 960px) and (max-width: 1199px) {
  .ust__menu > a.ust__ikincil { display: none; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  :root { --yan: 1.25rem; }
  .ust__ic { gap: 0.75rem; }
  .ust__logo { width: 10rem; }
  .ust__menu { gap: 1rem; }
  .ust__menu > a:not(.dugme), .mega__dugme { font-size: 0.95rem; }
  .ust__menu .dugme--kucuk { padding: 0 0.85rem; }
}
/* Dar telefonlarda "MENÜ" düğmesi logoyu sıkıştırmasın. */
@media (max-width: 419px) {
  .ust__ic { gap: 0.5rem; }
  .menu-mobil > summary { padding: 0 0.8rem; gap: 0.4rem; }
  .dil-secici > summary { padding: 0 0.4rem; }
}
/* İki satıra kayan menü ve alt bilgi bağlantıları birbirine karışmasın. */
.menu-mobil__panel a, .alt__sayfalar a { line-height: 1.3; padding-block: 0.4rem; }

[dir="rtl"] .diger > a::after { content: "←" / ""; }
[dir="rtl"] .yolculuk__cubuk span { transform-origin: right; }
/* Telefon numarası sağdan sola sayfada da soldan sağa yazılır (+966 50 …), alan hizası sayfaya uyar. */
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }
/* Arapça harfler birbirine bağlıdır; harf aralığı bağlantıyı bozar. Yazı tiplerimizde Arapça harf yok: Latin harfler
   (Dr.vel, FUE) aynı kalır, Arapça harfler cihazın Arapça yazı tipiyle yazılır (ek indirme yok). */
html[lang="ar"] {
  --baslik-harf: 0;
  --font-baslik: "Cormorant Garamond", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --font-metin: "Manrope", system-ui, "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
html[lang="ar"] body { line-height: 1.75; }

/* =====================================================================
   Tüm tedaviler menüsü (tools/site/tedaviler.mjs). Masaüstünde "Tedaviler" düğmesi başlığın altında tam genişlikte
   görselli kart paneli açar; telefonda mobil menünün içinde iki sütunlu görselli liste açılır. Görseller yalnızca
   menü açılınca yüklenir (kapalı <details> içindeki loading="lazy" görseller indirilmez).
   ===================================================================== */
.mega > summary, .mega-mobil > summary { list-style: none; cursor: pointer; }
.mega > summary::-webkit-details-marker, .mega-mobil > summary::-webkit-details-marker { display: none; }
.mega__dugme { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; color: var(--soluk); white-space: nowrap; }
.mega__dugme:hover, .mega[open] > .mega__dugme { color: var(--metin); }
.mega__ok { width: 1rem; height: 1rem; flex: none; transition: transform 0.2s; }
.mega[open] .mega__ok, .mega-mobil[open] .mega__ok { transform: rotate(180deg); }
.mega__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--zemin);
  border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); box-shadow: 0 24px 48px rgb(31 43 40 / 0.16);
  max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain;
}
.mega__ic { padding-block: 1.25rem 1.75rem; }
.mega__grup {
  margin: 1.25rem 0 0.6rem; font: 700 0.8rem/1.2 var(--font-metin); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vurgu);
}
.mega__grup:first-child { margin-top: 0; }
.mega__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.mega__kart {
  display: flex; align-items: center; gap: 0.9rem; min-height: 4.75rem; padding: 0.45rem; padding-inline-end: 0.9rem;
  border-radius: 0.9rem; background: var(--yuzey); color: var(--metin); text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.mega__kart:hover { background: #FFFFFF; box-shadow: 0 6px 18px rgb(31 43 40 / 0.1); }
.mega__kart[aria-current] { box-shadow: inset 0 0 0 2px var(--motif); }
.mega__kart img, .mega-mobil__kart img { flex: none; object-fit: cover; background: var(--cizgi); }
.mega__kart img { width: 3.9rem; height: 3.9rem; border-radius: 0.65rem; }
.mega__metin, .mega-mobil__metin { display: grid; gap: 0.2rem; min-width: 0; }
.mega__ad { font: 600 1rem/1.2 var(--font-baslik); text-transform: uppercase; letter-spacing: 0.05em; }
/* Uzun Almanca bileşik sözcükler kartın dışına taşmasın: hece yerinden bölünür. */
.mega__ad, .menu-mobil__panel .mega-mobil__kart { hyphens: manual; overflow-wrap: anywhere; }
.mega__incele { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vurgu); }
@media (max-width: 1099px) { .mega__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mega__ok, .mega__kart { transition: none; } }

.mega-mobil__dugme { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; border-bottom: 1px solid var(--cizgi); line-height: 1.3; padding-block: 0.4rem; }
.mega-mobil__ic { padding: 0.75rem 0 1rem; border-bottom: 1px solid var(--cizgi); }
.mega-mobil__ic .mega__grup { margin-top: 1rem; }
.mega-mobil__ic .mega__grup:first-child { margin-top: 0; }
.mega-mobil__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.menu-mobil__panel .mega-mobil__kart {
  display: flex; align-items: center; gap: 0.6rem; min-height: 3.5rem; padding: 0.35rem; padding-inline-end: 0.5rem;
  border: 0; border-radius: 0.75rem; background: var(--yuzey); color: var(--metin);
  font: 600 0.9rem/1.2 var(--font-baslik); letter-spacing: 0.03em; text-transform: uppercase;
}
.menu-mobil__panel .mega-mobil__kart[aria-current] { box-shadow: inset 0 0 0 2px var(--motif); }
.mega-mobil__kart img { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; }
html[lang="ar"] .menu-mobil__panel .mega-mobil__kart { letter-spacing: 0; }

/* =====================================================================
   Blog (tools/site/blog.mjs): ana sayfa, kategori sayfaları ve yazılar. Kartlar görselsiz; bütün kart başlıktaki
   bağlantıyla tıklanır. Bilimsel blog harf dizini, merak edilenler konu dizini taşır.
   ===================================================================== */
.blog { padding-block: 2rem 3.5rem; }
.blog-gezinme { margin-top: 0; }
.blog-gezinme a[aria-current] { background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.blog-bolum { margin-top: 3rem; scroll-margin-top: 1rem; }
.blog-bolum + .blog-bolum { padding-top: 3rem; border-top: 1px solid var(--cizgi); }
.blog-bolum__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; }
.blog-bolum__bas h2 { font-size: clamp(1.95rem, 5vw, 2.6rem); }
.blog-bolum__bas .metin-baglanti { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--vurgu); font-weight: 700; text-underline-offset: 0.2em; }
.blog-bolum__ozet { margin: 0.5rem 0 0; max-width: 42rem; color: var(--soluk); }
.blog-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .blog-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .blog .blog-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-kart {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.35rem 1.4rem;
  border: 1.5px solid var(--cizgi); border-radius: 1rem; background: var(--zemin); transition: border-color 0.15s, box-shadow 0.15s;
}
.blog-kart:hover { border-color: var(--ikincil-kenar); box-shadow: 0 8px 22px rgb(31 43 40 / 0.08); }
.blog-kart:focus-within { border-color: var(--ikincil-kenar); }
.blog-kart__ust { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vurgu); }
.blog-kart__ust time { color: var(--soluk); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.blog-kart__baslik { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.blog-kart__baslik a { color: var(--metin); text-decoration: none; }
.blog-kart__baslik a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-kart__baslik a:hover { text-decoration: underline; text-decoration-color: var(--motif); text-underline-offset: 0.2em; }
.blog-kart__ozet { margin: 0; color: var(--soluk); font-size: 1rem; }
.blog-bos { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-radius: 0.9rem; background: var(--yuzey); color: var(--soluk); }
.harf-dizini { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.75rem; }
.harf-dizini a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  border: 1.5px solid var(--cizgi); border-radius: 0.6rem; font: var(--baslik-kalinlik) 1.35rem/1 var(--font-baslik);
  color: var(--metin); text-decoration: none;
}
.harf-dizini a:hover { border-color: var(--ikincil-kenar); }
.blog-harf { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.blog-harf h2 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.blog-harf__baslik { display: flex; align-items: center; gap: 1rem; }
.blog-harf__baslik::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.yazi-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0.75rem 0 0; color: var(--soluk); font-size: 0.95rem; }
.yazi-ust a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--vurgu); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; text-underline-offset: 0.2em; }
.yazi-ust > * + *::before { content: "·"; margin-inline-end: 1rem; color: var(--motif); }
.yazi-ust + .sayfa-bas__baslik { margin-top: 0.25rem; }
.ilgili-yazilar { margin-top: 3rem; padding-top: 2.75rem; border-top: 1px solid var(--cizgi); }
.ilgili-yazilar h2 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.ilgili-yazilar .blog-kart__baslik { font-size: 1.3rem; }
.icerik .blog-liste li + li { margin-top: 0; }
.icerik .blog-liste p { max-width: none; }
html[lang="ar"] :is(.blog-kart__ust, .yazi-ust a) { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .blog-kart { transition: none; } }
/* Yazının başındaki "Kısaca" kutusu */
.kisaca { margin: 0 0 2.75rem; padding: 1.25rem 1.5rem 1.4rem; border-radius: 1rem; background: var(--yuzey); border-inline-start: 3px solid var(--motif); }
.kisaca__baslik { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vurgu); }
.icerik .kisaca ul { margin-top: 0.6rem; }
.icerik .kisaca li { max-width: none; }
html[lang="ar"] .kisaca__baslik { letter-spacing: 0; }

/* Site içi arama kutusu (tools/site/ortak/arama.html): JavaScript yoksa gizli kalır. */
.arama { position: relative; max-width: 46rem; }
.arama__etiket { display: block; margin-bottom: 0.5rem; font-weight: 700; }
.arama__kutu {
  display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem; padding: 0.35rem 0.4rem; padding-inline-start: 1.1rem;
  border: 1.5px solid var(--cizgi); border-radius: 999px; background: var(--zemin); box-shadow: 0 10px 26px rgb(31 43 40 / 0.07);
}
.arama__kutu:focus-within { border-color: var(--ikincil-kenar); }
.arama__ikon { width: 1.35rem; height: 1.35rem; flex: none; color: var(--vurgu); }
.arama__girdi { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--metin); }
.arama__girdi:focus { outline: none; }
.arama__girdi::-webkit-search-cancel-button { cursor: pointer; }
.arama__dugme { min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: var(--ana); color: var(--ana-uzerinde); font: 700 1rem/1 var(--font-metin); cursor: pointer; }
.arama__dugme:hover { background: var(--vurgu); }
.arama__durum { margin: 0.6rem 0 0; min-height: 1.5em; color: var(--soluk); font-size: 0.95rem; }
.arama__durum:empty { min-height: 0; margin: 0; }
.arama__sonuclar { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.arama__sonuclar a {
  display: grid; gap: 0.15rem; min-height: 2.75rem; padding: 0.8rem 1.1rem; border: 1.5px solid var(--cizgi); border-radius: 0.9rem;
  background: var(--zemin); color: var(--metin); text-decoration: none;
}
.arama__sonuclar a:hover, .arama__sonuclar a:focus-visible { border-color: var(--ikincil-kenar); }
.arama__tur { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vurgu); }
.arama__baslik { font: var(--baslik-kalinlik) 1.3rem/1.2 var(--font-baslik); }
.arama__aciklama { color: var(--soluk); font-size: 0.95rem; }
html[lang="ar"] .arama__tur { letter-spacing: 0; }
.blog .arama { margin: 0 auto 2.5rem; }

/* Blog ana sayfası: öne çıkan yazı */
.blog-one {
  position: relative; display: grid; gap: 0.75rem; margin-bottom: 2.5rem; padding: 1.75rem 1.5rem 2rem;
  border-radius: 1.25rem; background: var(--yuzey); border-top: 4px solid var(--motif);
}
.blog-one__etiket { margin: 0; font: 700 0.85rem/1.2 var(--font-metin); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vurgu); }
.blog-one__baslik { margin: 0; font: var(--baslik-kalinlik) clamp(1.9rem, 5vw, 2.75rem)/1.1 var(--font-baslik); max-width: 26ch; }
.blog-one__baslik a { color: var(--metin); text-decoration: none; }
.blog-one__baslik a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-one__baslik a:hover { text-decoration: underline; text-decoration-color: var(--motif); text-underline-offset: 0.15em; }
.blog-one__ozet { margin: 0; max-width: 46rem; color: var(--soluk); font-size: 1.1rem; }
html[lang="ar"] .blog-one__etiket { letter-spacing: 0; }
@media (min-width: 960px) { .blog-one { padding: 2.5rem 3rem 2.75rem; } }

/* Bilimsel blog: harf dizini, konu süzgeci ve terim kartları */
.harf-dizini__bos { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; font: var(--baslik-kalinlik) 1.35rem/1 var(--font-baslik); color: var(--cizgi); }
.harf-dizini a.harf-dizini__soluk { opacity: 0.45; }
.suzgec { margin-top: 1.25rem; }
.suzgec__dugme {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1rem;
  border: 1.5px solid var(--cizgi); border-radius: 999px; background: var(--zemin); color: var(--metin);
  font: 600 1rem/1.2 var(--font-metin); cursor: pointer;
}
.suzgec__dugme span { font-weight: 700; color: var(--vurgu); }
.suzgec__dugme:hover { border-color: var(--ikincil-kenar); }
.suzgec__dugme[aria-pressed="true"] { background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.suzgec__dugme[aria-pressed="true"] span { color: var(--koyu-soluk); }
.suzgec__durum { margin: 1.25rem 0 0; color: var(--soluk); }
.blog-kart--terim { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.45rem; align-content: start; }
.blog-kart--terim > :not(.blog-kart__harf) { grid-column: 2; }
.blog-kart__harf {
  grid-row: span 3; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: var(--vurgu); color: var(--zemin); font: var(--baslik-kalinlik) 1.35rem/1 var(--font-baslik);
}
.blog-kart__konu {
  justify-self: start; margin: 0; padding: 0.2rem 0.7rem; border: 1px solid var(--motif); border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vurgu);
}
html[lang="ar"] .blog-kart__konu { letter-spacing: 0; }
.blog-kart[hidden], .blog-harf[hidden] { display: none; }

/* Ana sayfa: arama ve sekme bandı (yolculuğun hemen altında) */
.kesfet { padding-block: 2.5rem 2rem; border-bottom: 1px solid var(--cizgi); }
.kesfet__baslik { font-size: clamp(1.6rem, 4vw, 2.1rem); text-align: center; margin-bottom: 1.25rem; }
.kesfet .arama { margin-inline: auto; }
.kesfet .arama__etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sekmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.sekmeler a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 1.5px solid var(--cizgi); border-radius: 999px;
  font: 600 0.95rem/1.2 var(--font-baslik); letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin); text-decoration: none;
}
.sekmeler a:hover { border-color: var(--ikincil-kenar); background: var(--yuzey); }
html[lang="ar"] .sekmeler a { letter-spacing: 0; }

/* Ana sayfa: planlamada bakılan etkenler */
.etkenler { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .etkenler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .etkenler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etken { padding: 1.4rem 1.5rem 1.5rem; border: 1.5px solid var(--cizgi); border-radius: 1rem; background: var(--zemin); }
.etken p { margin: 0.5rem 0 0; color: var(--soluk); }

/* Ana sayfa: sık sorulanlar geniş ekranda iki sütun */
@media (min-width: 960px) {
  .sss--iki { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; border-top: 0; align-items: start; }
  .sss--iki details:nth-child(-n+2) { border-top: 1px solid var(--cizgi); }
}

/* Ana sayfa: kaydırmalı yazı şeridi (bilimsel blog). JavaScript yoksa yatay kaydırılır; düğmeler gizli kalır. */
.serit { position: relative; }
.serit__liste {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 22rem); grid-template-columns: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem;
  padding: 0.25rem 0.25rem 1rem; margin-inline: -0.25rem; scrollbar-width: thin;
}
@media (min-width: 760px) { .blog .serit__liste, .serit__liste { grid-template-columns: none; } }
.serit__liste > li { scroll-snap-align: start; }
.serit__liste:focus-visible { outline: 3px solid var(--motif); outline-offset: 2px; }
.serit__dugme {
  position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-top: -1.875rem; border: 1.5px solid var(--cizgi); border-radius: 50%;
  background: var(--zemin); color: var(--metin); box-shadow: 0 6px 16px rgb(31 43 40 / 0.12); cursor: pointer;
}
.serit__dugme:hover { border-color: var(--ikincil-kenar); }
.serit__dugme .ikon { width: 1.25rem; height: 1.25rem; }
.serit__dugme--geri { inset-inline-start: -0.75rem; }
.serit__dugme--ileri { inset-inline-end: -0.75rem; }
html[dir="rtl"] .serit__dugme .ikon { transform: scaleX(-1); }
.serit__dugme:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 759px) { .serit__dugme { display: none; } }

/* Ekran dışındaki ana sayfa bölümleri ilk açılışta çizilmez (kaydırma ve açılış hızlı kalır). */
.kutuphane, #planlama, #bilgi-merkezi, #blogdan, #sss { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@media (min-width: 1100px) { #blogdan .blog-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .sekmeler { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -1.25rem; padding: 0.25rem 1.25rem 0.5rem; scrollbar-width: none; }
  .sekmeler::-webkit-scrollbar { display: none; }
  .sekmeler a { flex: none; }
}
.alt__saat { margin: 0 0 0.75rem; color: var(--koyu-soluk); }
.alt__saat span { font-weight: 700; color: var(--koyu-metin); }

/* Ana sayfa: şehir dışından ve yurt dışından gelenler için kıvrımlı yol. Telefonda soldan inen kıvrımlı çizgi,
   geniş ekranda ortadan inen çizginin iki yanında sırayla adımlar. Çizgi CSS arka planındaki SVG'dir. */
.rota { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative; display: grid; gap: 1.25rem; }
.rota::before {
  content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; inset-inline-start: 0.4rem; width: 2.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 120'%3E%3Cpath d='M18 0 C34 20 34 40 18 60 C2 80 2 100 18 120' fill='none' stroke='%238AB7AB' stroke-width='2' stroke-dasharray='5 6'/%3E%3C/svg%3E") repeat-y center top / 2.25rem 7.5rem;
}
.rota__adim { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.rota__ikon {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--zemin); border: 1.5px solid var(--motif); color: var(--vurgu);
}
.rota__ikon .ikon { width: 1.5rem; height: 1.5rem; }
.rota__kutu { padding: 1rem 1.25rem 1.15rem; border: 1.5px solid var(--cizgi); border-radius: 1rem; background: var(--zemin); }
.rota__no { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vurgu); }
.rota__kutu h3 { margin-top: 0.2rem; }
.rota__kutu p { margin: 0.4rem 0 0; color: var(--soluk); }
.rota-notu { margin: 1.75rem 0 0; padding: 1rem 1.25rem; border-radius: 0.9rem; background: var(--zemin); border-inline-start: 3px solid var(--motif); max-width: 46rem; }
@media (min-width: 960px) {
  .rota { gap: 0.25rem; }
  .rota::before { inset-inline-start: calc(50% - 1.125rem); }
  .rota__adim { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: 1.5rem; }
  .rota__adim .rota__ikon { grid-column: 2; grid-row: 1; margin-top: 0.75rem; }
  .rota__adim:nth-child(odd) .rota__kutu { grid-column: 1; grid-row: 1; text-align: end; }
  .rota__adim:nth-child(odd) .rota__kutu h3::after { margin-inline-start: auto; }
  .rota__adim:nth-child(even) .rota__kutu { grid-column: 3; grid-row: 1; }
}
html[lang="ar"] .rota__no { letter-spacing: 0; }
#rota { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
/* Sayfa içi bağlantıyla (ör. #basvuru) kaydırmadan önce main.js bölümleri bir kez çizdirir; yoksa tahmini boylar yüzünden
   kaydırma hedefi kayar. */
html.bolumler-cizili .kutuphane, html.bolumler-cizili #planlama, html.bolumler-cizili #bilgi-merkezi,
html.bolumler-cizili #blogdan, html.bolumler-cizili #sss, html.bolumler-cizili #rota { content-visibility: visible; }
@media (min-width: 960px) { .rota__adim + .rota__adim { margin-top: -3.5rem; } }

/* Kart, adım, soru ve alt bölüm başlıkları açıklama metninden ilk bakışta ayrılsın (kullanıcı 20 Ekim: "açıklama mı başlık
   mı seçilmiyor"). Cormorant'ın x-yüksekliği küçük olduğu için punto büyük; altında logodaki nane tonunda kısa bir çizgi. */
:is(.surec, .etken, .rota__kutu, .soru, .icerik__bolum) h3, .ilkeler strong {
  font: var(--baslik-kalinlik) clamp(1.65rem, 1.45rem + 0.6vw, 1.85rem)/1.15 var(--font-baslik);
}
:is(.surec, .etken, .rota__kutu, .soru, .icerik__bolum, .yontem) h3::after, .ilkeler strong::after {
  content: ""; display: block; width: 2.5rem; height: 2px; margin-top: 0.55rem; border-radius: 2px; background: var(--motif);
}
:is(.surec, .etken, .rota__kutu) p { margin-top: 0.75rem; }

/* =====================================================================
   Dil önerisi (site/assets/js/dil.js; teknik SEO işi, 20 Ekim 2026). Ziyaretçi başka dile yönlendirilmez; tarayıcının
   dili sitedeki başka bir dilse küçük, kapatılabilir bir öneri çıkar. Sabit konumlu: yerleşimi kaydırmaz. Çerez
   penceresi, mobil menü ya da sayfa başındaki iletişim düğmeleri (ana sayfada yolculuk sahnesi) ekrandayken görünmez
   (dil.js hidden verir); telefonda alt eylem çubuğunun üstünde durur, iletişim düğmelerini örtmez.
   Konum sayfanın yönüne, metin yönü önerilen dile göredir (Arapça öneri Latin sayfada da sağdan sola yazılır).
   ===================================================================== */
.dil-onerisi {
  position: fixed; z-index: 15; left: 0.75rem; right: 0.75rem; bottom: calc(4.1rem + 0.5rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.25rem; padding-block: 0.35rem; padding-inline: 1rem 0.35rem;
  background: var(--koyu); color: var(--koyu-metin); border-radius: 0.9rem; box-shadow: 0 8px 24px rgb(31 43 40 / 0.25);
  font: 400 0.95rem/1.45 var(--font-metin);
}
.dil-onerisi__metin { flex: 1; margin: 0; padding-block: 0.4rem; }
.dil-onerisi__git {
  color: var(--koyu-metin); font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--motif); text-underline-offset: 0.2em;
}
.dil-onerisi__kapat {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--koyu-metin); cursor: pointer;
}
.dil-onerisi__kapat:hover { background: rgb(255 255 255 / 0.12); }
.dil-onerisi__kapat .ikon { width: 1.25rem; height: 1.25rem; }
.dil-onerisi :focus-visible { outline-color: var(--motif); }
.dil-onerisi[lang="ar"] { line-height: 1.7; }
.dil-onerisi[hidden], .cerez-acik .dil-onerisi, html:has(.menu-mobil[open]) .dil-onerisi { display: none; }
@media (min-width: 960px) {
  .dil-onerisi { left: auto; right: 1.5rem; bottom: 1.5rem; width: max-content; max-width: min(28rem, calc(100% - 3rem)); }
  [dir="rtl"] .dil-onerisi { right: auto; left: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .dil-onerisi { animation: dil-onerisi-gir 0.3s ease-out both; }
  @keyframes dil-onerisi-gir { from { opacity: 0; transform: translateY(0.75rem); } }
}

/* =====================================================================
   Üzerine gelince öne çıkma (kullanıcı 21 Ekim: "fareyi götürünce büyüsün, öne çıksın; başlıklarda da").
   Kartlar biraz büyüyüp gölgelenir, düğmeler ve menü başlıkları hafifçe büyür, kart başlığının altındaki
   nane çizgisi uzar. Yalnızca transform ve gölge değişir: komşu öğeler itilmez, satırlar kaymaz.
   Dokunmatik ekranda (hover yok) ve "hareketi azalt" tercihinde hiç çalışmaz.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.etken, .rota__kutu, .blog-kart, .blog-one, .mega__kart, .yontem--one, .ozet--one, .diger > a, .arama__sonuclar a) {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.15s, background-color 0.15s;
  }
  :is(.etken, .rota__kutu, .blog-kart, .blog-one, .diger > a, .arama__sonuclar a):hover {
    position: relative; z-index: 1; transform: translateY(-4px) scale(1.02);
    border-color: var(--ikincil-kenar); box-shadow: 0 14px 32px rgb(31 43 40 / 0.12);
  }
  .mega__kart:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgb(31 43 40 / 0.14); }
  :is(.yontem--one, .ozet--one):hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 18px 40px rgb(31 43 40 / 0.28); }

  /* Kart başlıkları: alttaki çizgi uzar. */
  :is(.surec, .etken, .rota__kutu, .soru, .icerik__bolum, .yontem) h3::after, .ilkeler strong::after { transition: width 0.3s ease; }
  :is(.surec li, .etken, .rota__kutu, .soru, .icerik__bolum, .yontem):hover h3::after, .ilkeler li:hover strong::after { width: 4.5rem; }

  /* Düğmeler, hap bağlantılar ve dil seçici */
  :is(.dugme, .gruplar-nav a, .sekmeler a, .harf-dizini a, .suzgec__dugme, .serit__dugme, .arama__dugme, .secenek, .dil-secici > summary) {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background-color 0.15s, color 0.15s, border-color 0.15s;
  }
  :is(.dugme, .gruplar-nav a, .sekmeler a, .harf-dizini a, .suzgec__dugme, .serit__dugme, .arama__dugme, .secenek, .dil-secici > summary):hover {
    transform: scale(1.05);
  }
  :is(.dugme--ana, .dugme--wa, .arama__dugme):hover { box-shadow: 0 8px 20px rgb(31 43 40 / 0.18); }

  /* Üst menü başlıkları (Tedaviler, Blog, Hakkımızda, SSS, İletişim) */
  :is(.ust__menu > a:not(.dugme), .mega__dugme) { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s; }
  :is(.ust__menu > a:not(.dugme), .mega__dugme):hover { transform: scale(1.08); }
}