/* ==================================================================
   YAZI TİPLERİ — kendi sunucumuzdan
   ==================================================================
   Önceden Google Fonts'tan çekiliyordu. İki dış bağlantı demekti
   (fonts.googleapis.com ve fonts.gstatic.com) ve ikisi de sayfanın
   çizilmesini bekletiyordu. Artık dosyalar sitenin kendi
   klasöründe: dış bağlantı yok, DNS ve TLS beklemesi yok.
   Ziyaretçinin tarayıcısı da Google'a bir istek atmıyor.

   Alt kümeler: latin + latin-ext. Türkçe harfler (ğ ş ı İ ç ö ü)
   latin-ext içinde; ikisi de gerekli.

   Bu blok elle yazılmadı, Google'ın kendi CSS'inden üretildi.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/varliklar/yazitipi/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/varliklar/yazitipi/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   ARTIDENT — web sitesi görünümü
   =====================================================================
   Renkler klinik yönetim panelindekilerle aynıdır (src/theme/colors.ts):
   kahve, altın, krem. İki yüzün de aynı klinik olduğu belli olsun diye.
   ===================================================================== */

:root {
  --krem: #F5EFE3;
  --fildisi: #FBF8F2;
  --kahve: #362419;
  --kahve-koyu: #241608;
  --bronz: #B5875A;
  --altin: #C9A15E;
  --komur: #2B2117;
  --cizgi: #E4D9C4;
  --soluk: #8A7C68;
  --yesil: #6F7D5C;
  --kirmizi: #9A4B3D;

  --genislik: 1180px;
  --yumusak: 14px;
  --golge: 0 18px 40px rgba(36, 22, 8, 0.10);
  --golge-hafif: 0 6px 18px rgba(36, 22, 8, 0.07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fildisi);
  color: var(--komur);
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.2;
  color: var(--kahve);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 16px; }

a { color: var(--kahve); text-decoration: none; }
a:hover { color: var(--bronz); }

img { max-width: 100%; display: block; }

.kapsayici {
  width: 100%;
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 22px;
}

.atla {
  position: absolute; left: -9999px; top: 0;
  background: var(--kahve); color: var(--fildisi);
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 200;
}
.atla:focus { left: 0; }

/* ------------------------------------------------------------------ */
/* Üst şerit                                                           */
/* ------------------------------------------------------------------ */
/* Üst şerit ve menü artık sayfanın akışında değil, içeriğin ÜSTÜNDE
   yüzüyor. Böylece video ekranın en tepesinden başlıyor ve menü onun
   üstünde bir çentik gibi duruyor — boydan boya bir bant değil. */
.ust-serit {
  position: absolute; top: 0; left: 0; right: 0; z-index: 101;
  background: transparent;
  color: #F0E6D5;
  font-size: 13px;
  padding-top: 4px;
  text-shadow: 0 1px 10px rgba(20, 12, 4, 0.7);
}
.ust-serit a { color: inherit; }
.ust-serit svg { stroke: rgba(240, 230, 213, 0.85); }
.ust-serit-ic {
  display: flex; align-items: center; gap: 22px;
  min-height: 40px; flex-wrap: wrap;
}
.ust-oge {
  display: inline-flex; align-items: center; gap: 7px;
  color: #D8CBB4; padding: 6px 0;
}
.ust-oge:hover { color: var(--altin); }
.ust-oge svg { width: 15px; height: 15px; stroke: var(--altin); flex: none; }
.ust-serit-sag { margin-left: auto; display: flex; gap: 12px; }
.ust-serit-sag a { color: #D8CBB4; display: inline-flex; }
.ust-serit-sag a:hover { color: var(--altin); }
.ust-serit-sag svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ */
/* Ana menü                                                            */
/* ------------------------------------------------------------------ */
/* Menü sabit duruyor ama kendisi görünmez: görünen şey içindeki
   yuvarlak kapsül. Kaydırınca yukarı çekilip biraz küçülüyor. */
.ust-menu {
  position: fixed; top: 46px; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 0;
  transition: top 0.28s ease;
}
.ust-menu.kaydirildi { top: 12px; }

.ust-menu-ic {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
  max-width: 1140px;
  padding: 0 26px;
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(36, 22, 8, 0.22);
  transition: min-height 0.28s ease, box-shadow 0.25s ease;
}

.marka { display: flex; flex-direction: column; line-height: 1.05; }
.marka-ad {
  font-family: Fraunces, Georgia, serif;
  font-size: 25px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--kahve);
}
.marka-alt {
  font-size: 9.5px; letter-spacing: 0.22em; color: var(--bronz);
  font-weight: 700; margin-top: 3px;
}

.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu > a:not(.dugme) {
  padding: 10px 13px; border-radius: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--komur);
  white-space: nowrap;
}
.menu > a:not(.dugme):hover { background: rgba(201, 161, 94, 0.13); color: var(--kahve); }
.menu > a.etkin { color: var(--bronz); }
.menu-randevu { margin-left: 10px; }

.menu-dugmesi {
  display: none; margin-left: auto;
  width: 44px; height: 40px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: var(--fildisi); cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.menu-dugmesi span {
  display: block; width: 19px; height: 2px; background: var(--kahve);
  border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-dugmesi[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugmesi[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ */
/* Düğmeler                                                            */
/* ------------------------------------------------------------------ */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-family: Manrope, sans-serif; font-size: 15px; font-weight: 700;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dugme svg { width: 17px; height: 17px; flex: none; }
.dugme:hover { transform: translateY(-1px); }
.dugme-altin { background: var(--altin); color: var(--kahve-koyu); box-shadow: 0 6px 16px rgba(201,161,94,0.35); }
.dugme-altin:hover { background: #d4ae70; color: var(--kahve-koyu); }
.dugme-cerceve { border-color: var(--kahve); color: var(--kahve); background: transparent; }
.dugme-cerceve:hover { background: var(--kahve); color: var(--fildisi); }
.dugme-acik { border-color: rgba(251,248,242,0.5); color: var(--fildisi); background: transparent; }
.dugme-acik:hover { background: var(--fildisi); color: var(--kahve); }
.dugme-whatsapp { background: #25D366; color: #08351A; box-shadow: 0 6px 16px rgba(37,211,102,0.3); }
.dugme-whatsapp:hover { background: #38dd75; color: #08351A; }
.dugme[disabled] { opacity: 0.55; cursor: default; transform: none; }

/* ------------------------------------------------------------------ */
/* Bölüm düzeni                                                        */
/* ------------------------------------------------------------------ */
/* Bölümlerin kendi zemini var: üst üste binen yuvarlak köşeler ancak
   böyle görünür (bkz. .bolum-yuvarlak). */
.bolum { padding: 84px 0; position: relative; background: var(--fildisi); }
.bolum-krem { background: var(--krem); }
.bolum-kahve { background: var(--kahve-koyu); color: #D8CBB4; }
.bolum-kahve h2, .bolum-kahve h3 { color: var(--fildisi); }

.bolum-basi { max-width: 720px; margin-bottom: 44px; }
.bolum-basi.ortala { margin-left: auto; margin-right: auto; text-align: center; }
.etiket {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.2em; color: var(--bronz); margin-bottom: 12px;
}
.bolum-kahve .etiket { color: var(--altin); }
.giris-metni { font-size: 17.5px; color: #5C5145; }
.bolum-kahve .giris-metni { color: #C4B69E; }

/* ------------------------------------------------------------------ */
/* Kahraman bölümü (ana sayfa üstü)                                    */
/* ------------------------------------------------------------------ */
/* Açılış bölümü ekranın tamamını kaplar: video tam ekran oynar, yazı
   onun üstünde ortalanır. Hem telefonda hem masaüstünde aynı davranış.
   100svh kullanılıyor çünkü telefonda 100vh adres çubuğunun altında
   kalıyor ve bölümün bir kısmı görünmüyor. */
.kahraman {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(201, 161, 94, 0.20), transparent 62%),
    linear-gradient(160deg, #2E1D10 0%, #241608 60%, #1C1105 100%);
  color: var(--fildisi);
  padding: 130px 0 120px;
  overflow: hidden;
}
.kahraman::after {
  content: ""; position: absolute; inset: auto -10% -55% 55%;
  height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,161,94,0.14), transparent 70%);
  pointer-events: none;
}
/* Yazı videonun üstünde, ortada. Az söz: video baskın öge olsun diye
   kahraman bölümünde yalnızca başlık, tek cümle ve iki düğme var. */
.kahraman-ic {
  position: relative; z-index: 1;
  display: block;
  text-align: center;
}
.kahraman-yazi { max-width: 940px; margin: 0 auto; }

/* Çalışma saatleri şeridi — kahraman bölümünün altında, üstüne binen kart */
/* Saat şeridi önce kahraman bölümünün üstüne biniyordu; açılış
   ekranında videonun altını kesiyordu. Artık bölüm bittikten sonra
   başlıyor — ilk ekranda yalnızca video var. */
.saat-serit-bolum {
  position: relative; z-index: 3; background: var(--fildisi);
  padding-top: 40px;
}
.saat-serit {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px;
  background: var(--kahve-koyu); color: #D8CBB4;
  border-radius: 18px; padding: 22px 28px; margin-top: 0;
  box-shadow: 0 22px 50px rgba(36, 22, 8, 0.28);
}
.saat-serit-baslik {
  font-size: 11px; letter-spacing: 0.16em; font-weight: 800;
  color: var(--altin); line-height: 1.5;
}
.saat-oge { display: flex; flex-direction: column; font-size: 13px; color: #B9A98E; }
.saat-oge b { color: var(--fildisi); font-size: 15.5px; font-weight: 600; }
.saat-serit-dugme { margin-left: auto; }
.saat-serit-not {
  font-size: 13px; color: var(--soluk); margin: 12px 4px 0; text-align: right;
}
/* Açılış başlığı: ince, ferah ve sakin.
   - Ağırlık 300 (gövde başlıkları 500). İnce kesit "premium" hissini
     taşıyan asıl şey.
   - opsz 144: Fraunces değişken bir yazı tipi; büyük punto için
     tasarlanmış hâli daha ince tırnaklı ve daha zarif.
   - Harf aralığı eksiden artıya alındı: ince harfler sıkışık dizilince
     ucuz görünüyor, hafif nefes almaları gerekiyor.
   - Satır aralığı biraz açıldı (1.08 -> 1.16). */
.kahraman h1 {
  color: var(--fildisi);
  margin-bottom: 24px;
  font-size: clamp(2.3rem, 6.6vw, 4.8rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  letter-spacing: 0.012em;
  line-height: 1.16;
  /* Gölge ince harfleri şişirmesin diye yumuşak ve geniş tutuldu. */
  text-shadow: 0 1px 3px rgba(20, 12, 4, 0.45), 0 2px 30px rgba(20, 12, 4, 0.6);
}
/* Vurgulu kısım da aynı incelikte kalsın; kalın görünürse denge bozulur.
   nowrap: "zaman" ile "ayıran" ayrı satırlara düşmesin — vurgulu ifade
   ikiye bölününce hem okunuşu hem görüntüsü bozuluyor. Satır sonu
   gerekiyorsa cümlenin başka bir yerinden verilir. */
.kahraman h1 em { font-weight: 300; white-space: nowrap; }
.kahraman h1 em { font-style: normal; color: var(--altin); }
.kahraman-metin {
  font-size: 19px; color: #E6DDCC; max-width: 620px; margin: 0 auto;
  text-shadow: 0 1px 8px rgba(20, 12, 4, 0.8), 0 1px 24px rgba(20, 12, 4, 0.5);
}
.kahraman-dugmeler {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px;
  justify-content: center;
}
/* Adres ve telefon üst şeritte, alt bilgide ve yüzen düğmelerde zaten
   var. Tam ekran görüntüyü daraltmasınlar diye burada gösterilmiyor. */
.kahraman-rozetler { display: none; }
.kahraman-rozetler span { display: inline-flex; align-items: center; gap: 7px; }
.kahraman-rozetler svg { width: 15px; height: 15px; stroke: var(--altin); }

.kahraman-kart {
  background: rgba(251, 248, 242, 0.06);
  border: 1px solid rgba(201, 161, 94, 0.28);
  border-radius: 18px; padding: 26px 26px 22px;
  backdrop-filter: blur(4px);
}
.kahraman-kart h3 { color: var(--altin); font-size: 15px; letter-spacing: 0.04em; margin-bottom: 16px; }
.saat-satiri {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed rgba(201,161,94,0.22);
  font-size: 14.5px; color: #D8CBB4;
}
.saat-satiri:last-of-type { border-bottom: none; }
.saat-satiri b { color: var(--fildisi); font-weight: 600; }
.kahraman-kart .dugme { width: 100%; margin-top: 16px; }

/* ------------------------------------------------------------------ */
/* Sayfa başlığı (iç sayfalar)                                         */
/* ------------------------------------------------------------------ */
/* Menü artık içeriğin üstünde yüzdüğü için iç sayfaların başlığı
   onun altında kalmasın diye üstten pay bırakılıyor. */
.sayfa-basi {
  background: linear-gradient(160deg, #2E1D10, #241608);
  color: var(--fildisi); padding: 150px 0 58px;
}
.sayfa-basi h1 { color: var(--fildisi); margin-bottom: 10px; }
.sayfa-basi p { color: #C4B69E; max-width: 680px; margin: 0; }
.kirinti { font-size: 13px; color: #9C8C74; margin-bottom: 14px; }
.kirinti a { color: #9C8C74; }
.kirinti a:hover { color: var(--altin); }

/* ------------------------------------------------------------------ */
/* Kartlar                                                             */
/* ------------------------------------------------------------------ */
.izgara { display: grid; gap: 22px; }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-2 { grid-template-columns: repeat(2, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }

.kart {
  background: var(--fildisi); border: 1px solid var(--cizgi);
  border-radius: var(--yumusak); padding: 26px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bolum-krem .kart { background: #fff; }
a.kart:hover { transform: translateY(-3px); box-shadow: var(--golge); border-color: var(--altin); }
.kart h3 { margin-bottom: 8px; }
.kart p { color: #5C5145; font-size: 15px; margin-bottom: 0; }

.kart-ikon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 161, 94, 0.15);
}
.kart-ikon svg { width: 24px; height: 24px; stroke: var(--bronz); }
/* Koyu zeminde duran kart (kahve rengi bölümler) */
.kart-koyu {
  background: rgba(251, 248, 242, 0.05);
  border-color: rgba(201, 161, 94, 0.25);
}
.kart-koyu h3 { color: var(--fildisi); }
.kart-koyu p { color: #C4B69E; }

/* Açık zeminde çalışma saati satırı */
.saat-acik {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px dashed var(--cizgi);
  font-size: 14.5px; color: #5C5145;
}
.saat-acik:last-of-type { border-bottom: none; }
.saat-acik b { color: var(--kahve); font-weight: 700; }

.kart-devam {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--bronz);
}
a.kart:hover .kart-devam { gap: 10px; }

/* Rakam şeridi */
.rakamlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.rakam { font-family: Fraunces, serif; font-size: 44px; color: var(--altin); line-height: 1; }
.rakam-etiket { font-size: 13px; letter-spacing: 0.12em; color: #B9A98E; margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* Hekim kartı                                                         */
/* ------------------------------------------------------------------ */
.hekim { text-align: center; }
.hekim-gorsel {
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 18px;
  object-fit: cover; border: 3px solid var(--altin);
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,161,94,0.15);
  font-family: Fraunces, serif; font-size: 38px; color: var(--bronz);
}
.hekim-unvan { color: var(--bronz); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.rozetler { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }
.rozet {
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: rgba(201, 161, 94, 0.16); color: #6B5539;
}

/* ------------------------------------------------------------------ */
/* Yorumlar                                                            */
/* ------------------------------------------------------------------ */
.yildizlar { display: inline-flex; gap: 2px; color: var(--altin); letter-spacing: 1px; }
.yorum-kart { display: flex; flex-direction: column; height: 100%; }
.yorum-metin { font-size: 15.5px; color: #4A4137; flex: 1; }
.yorum-alt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cizgi);
  font-size: 13.5px;
}
.yorum-ad { font-weight: 800; color: var(--kahve); }
.yorum-tarih { color: var(--soluk); }
.yorum-tedavi { font-size: 12.5px; color: var(--bronz); font-weight: 700; }
.bos-durum {
  grid-column: 1 / -1;         /* ızgarada tek başına kalınca ortalansın */
  border: 1px dashed var(--cizgi); border-radius: var(--yumusak);
  padding: 34px; text-align: center; color: var(--soluk);
}

/* ------------------------------------------------------------------ */
/* Sık sorulanlar                                                      */
/* ------------------------------------------------------------------ */
.soru {
  border: 1px solid var(--cizgi); border-radius: 12px;
  background: var(--fildisi); margin-bottom: 12px; overflow: hidden;
}
.soru[open] { border-color: var(--altin); }
.soru summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 20px;
  font-weight: 700; font-size: 16px; color: var(--kahve); position: relative;
}
.soru summary::-webkit-details-marker { display: none; }
.soru summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--bronz); font-weight: 400; line-height: 1;
}
.soru[open] summary::after { content: "–"; }
.soru-cevap { padding: 0 20px 18px; color: #5C5145; font-size: 15.5px; }

/* ------------------------------------------------------------------ */
/* Formlar                                                             */
/* ------------------------------------------------------------------ */
.form-kutu {
  background: #fff; border: 1px solid var(--cizgi);
  border-radius: 18px; padding: 30px; box-shadow: var(--golge-hafif);
}
.alan-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alan { margin-bottom: 16px; }
.alan-tam { grid-column: 1 / -1; }
.alan label {
  display: block; font-size: 13.5px; font-weight: 700;
  color: var(--kahve); margin-bottom: 6px;
}
.alan .zorunlu { color: var(--kirmizi); }
.alan input, .alan select, .alan textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--fildisi); color: var(--komur);
  font-family: Manrope, sans-serif; font-size: 15.5px;
}
.alan textarea { min-height: 120px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--altin); background: #fff;
  box-shadow: 0 0 0 3px rgba(201, 161, 94, 0.18);
}
.alan-ipucu { font-size: 12.5px; color: var(--soluk); margin-top: 5px; }

.onay { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #5C5145; }
.onay input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--altin); }

/* Robot tuzağı: insan görmez, doldurulursa form reddedilir. */
.tuzak { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.puan-secim { display: flex; gap: 6px; }
.puan-secim button {
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--fildisi);
  font-size: 20px; color: var(--cizgi); line-height: 1;
}
.puan-secim button.dolu { color: var(--altin); border-color: var(--altin); background: rgba(201,161,94,0.12); }

.form-sonuc { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 15px; display: none; }
.form-sonuc.gorunur { display: block; }
.form-sonuc.basarili { background: rgba(111, 125, 92, 0.14); color: #46523A; border: 1px solid rgba(111,125,92,0.4); }
.form-sonuc.hatali { background: rgba(154, 75, 61, 0.10); color: #7C3B2F; border: 1px solid rgba(154,75,61,0.35); }

/* ------------------------------------------------------------------ */
/* İletişim ve harita                                                  */
/* ------------------------------------------------------------------ */
.iletisim-izgara { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.iletisim-satir {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cizgi);
}
.iletisim-satir:last-child { border-bottom: none; }
.iletisim-satir svg { width: 20px; height: 20px; stroke: var(--bronz); flex: none; margin-top: 4px; }
.iletisim-satir h3 { font-size: 15px; margin-bottom: 2px; font-family: Manrope, sans-serif; font-weight: 800; }
.iletisim-satir p { margin: 0; color: #5C5145; font-size: 15px; }

.harita {
  width: 100%; height: 380px; border: 1px solid var(--cizgi);
  border-radius: var(--yumusak); overflow: hidden; background: var(--krem);
}
.harita iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Çağrı bandı */
.cagri {
  background: linear-gradient(140deg, #33210F, #241608);
  border-radius: 20px; padding: 46px 42px; color: var(--fildisi);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cagri h2 { color: var(--fildisi); margin-bottom: 6px; }
.cagri p { color: #C4B69E; margin: 0; max-width: 520px; }
.cagri-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }

/* Yazı gövdesi (tedavi ve metin sayfaları) */
.yazi { max-width: 760px; }
.yazi h2 { margin-top: 38px; }
.yazi h2:first-child { margin-top: 0; }
.yazi p { color: #4A4137; }
.yazi ul { color: #4A4137; padding-left: 20px; }
.yazi li { margin-bottom: 8px; }
.yan-kutu {
  background: var(--krem); border: 1px solid var(--cizgi);
  border-radius: var(--yumusak); padding: 24px; position: sticky; top: 100px;
}
.yan-kutu h3 { font-size: 17px; }
.yan-kutu .dugme { width: 100%; margin-top: 8px; }
.yazi-duzen { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }

/* ------------------------------------------------------------------ */
/* Alt bilgi                                                           */
/* ------------------------------------------------------------------ */
.alt-bilgi { background: var(--kahve-koyu); color: #B9A98E; padding: 62px 0 26px; margin-top: 0; }
.alt-bilgi-ic { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 36px; }
.alt-sutun h3 {
  color: var(--altin); font-family: Manrope, sans-serif;
  font-size: 12.5px; letter-spacing: 0.16em; font-weight: 800; margin-bottom: 16px;
}
.alt-sutun a { display: block; color: #B9A98E; font-size: 14.5px; padding: 5px 0; }
.alt-sutun a:hover { color: var(--altin); }
.alt-marka { color: var(--fildisi); margin-bottom: 10px; }
.alt-metin { font-size: 14px; color: #9C8C74; }
.alt-metin a { display: inline; }
.alt-acil { font-size: 13px; margin-top: 12px; }
.alt-dugme { margin-top: 8px; }
.alt-sosyal { display: flex; gap: 12px; margin-top: 14px; }
.alt-sosyal svg { width: 18px; height: 18px; }
.alt-saat { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.alt-saat b { color: #D8CBB4; font-weight: 600; }

.alt-serit {
  border-top: 1px solid rgba(201,161,94,0.16); margin-top: 44px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: #7E7159;
}
.alt-serit p { margin: 0; }
.alt-serit .uyari { max-width: 620px; }
.ekip-girisi { color: #7E7159; }
.ekip-girisi:hover { color: var(--altin); }

/* ------------------------------------------------------------------ */
/* Sabit iletişim düğmeleri                                            */
/* ------------------------------------------------------------------ */
.sabit-dugmeler {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
}
.sabit-dugme {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(36,22,8,0.28);
  transition: width 0.22s ease, border-radius 0.22s ease;
  overflow: hidden; white-space: nowrap;
}
.sabit-dugme svg { width: 24px; height: 24px; flex: none; }
.sabit-etiket { font-size: 14px; font-weight: 700; max-width: 0; opacity: 0; transition: max-width 0.22s ease, opacity 0.18s ease; }
.sabit-dugme:hover { width: 148px; border-radius: 26px; gap: 9px; }
.sabit-dugme:hover .sabit-etiket { max-width: 90px; opacity: 1; }
.sabit-whatsapp { background: #25D366; color: #08351A; }
.sabit-whatsapp svg { fill: #08351A; stroke: none; }
.sabit-telefon { background: var(--altin); color: var(--kahve-koyu); }
.sabit-telefon svg { stroke: var(--kahve-koyu); }

/* ------------------------------------------------------------------ */
/* Görünüme girince belirme                                            */
/* ------------------------------------------------------------------ */
/* Gizleme yalnızca JavaScript çalışıyorsa uygulanır (bkz. erken.js).
   Aksi hâlde içerik hiç görünmeyebilirdi. */
.js .beliren { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .beliren.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .beliren { opacity: 1; transform: none; transition: none; }
  .dugme:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Küçük ekranlar                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .yazi-duzen { grid-template-columns: 1fr; }
  .yan-kutu { position: static; }
  .iletisim-izgara { grid-template-columns: 1fr; gap: 28px; }
  .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .alt-bilgi-ic { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  .izgara-3 { grid-template-columns: repeat(2, 1fr); }
  .menu-dugmesi { display: flex; }
  .menu {
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--fildisi); border: 1px solid var(--cizgi);
    border-radius: 20px;
    padding: 12px 16px 18px; box-shadow: var(--golge);
    display: none;
  }
  .menu.acik { display: flex; }
  .menu > a:not(.dugme) { padding: 13px 10px; font-size: 16px; }
  .menu-randevu { margin: 8px 0 0; }
  .ust-oge-gizle-mobil { display: none; }
  .bolum { padding: 60px 0; }
  .cagri { padding: 34px 26px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .izgara-3, .izgara-2, .izgara-4 { grid-template-columns: 1fr; }
  .alan-izgara { grid-template-columns: 1fr; }
  .alt-bilgi-ic { grid-template-columns: 1fr; }
  .ust-serit-ic { gap: 14px; font-size: 12.5px; }
  .form-kutu { padding: 22px 18px; }
  .rakam { font-size: 36px; }
  .sabit-dugme:hover { width: 52px; border-radius: 50%; }
  .sabit-dugme:hover .sabit-etiket { max-width: 0; opacity: 0; }
}

/* =====================================================================
   HAREKET VE MEDYA
   =====================================================================
   Buradaki her şey "olmasa da olur" niteliğindedir: hareket kapalıyken
   ya da JavaScript çalışmazken sayfa aynen okunur, sadece sakin görünür.
   Dosyanın en altındaki "hareketi azalt" bloğu bunu garanti eder.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Sayfa geçişi — bağlantıya basınca sert sıçrama olmasın              */
/* ------------------------------------------------------------------ */
/* Destekleyen tarayıcıda sayfalar birbirine yumuşak geçer;
   desteklemeyen tarayıcı bu bloğu görmezden gelir. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: gecisCik 0.16s ease both; }
::view-transition-new(root) { animation: gecisGel 0.3s ease both; }

@keyframes gecisCik { to { opacity: 0; } }
@keyframes gecisGel { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ */
/* Okuma ilerlemesi — sayfanın neresinde olduğunuz belli olsun          */
/* ------------------------------------------------------------------ */
.ilerleme {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--bronz), var(--altin));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Menü kayınca incelir                                                */
/* ------------------------------------------------------------------ */
.marka-ad { transition: font-size 0.28s ease; }
.ust-menu.kaydirildi .ust-menu-ic { min-height: 58px; }
.ust-menu.kaydirildi .marka-ad { font-size: 22px; }

/* ------------------------------------------------------------------ */
/* Kahraman bölümü: video / fotoğraf katmanı                           */
/* ------------------------------------------------------------------ */
.kahraman-medya {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* Bu kutunun içindeki çizim/boyama dışarı taşmasın: tarayıcı sayfanın
     geri kalanını yeniden hesaplamak zorunda kalmaz, kaydırma akıcı olur. */
  contain: paint;
  background: #241608;
}
.kahraman-medya img,
.kahraman-medya video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Tek görsel/video kullanılıyorsa yavaş yakınlaşma sürekli döner. */
.kahraman-medya:not(.kaydirak) img,
.kahraman-medya:not(.kaydirak) video {
  animation: yavasYakinlas 30s ease-in-out infinite alternate;
}

/* ------------------------------------------------------------------ */
/* Dönen görsel/video akışı                                            */
/* ------------------------------------------------------------------ */
/* Yalnızca "opacity" ve "transform" değişiyor. Bu ikisini tarayıcı ekran
   kartında çiziyor; sayfanın yerleşimini yeniden hesaplamıyor. Zayıf bir
   telefonda bile takılma yapmamasının sebebi bu. */
.kaydirak .slayt {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.kaydirak .slayt.etkin { opacity: 1; }
/* Sadece görünen slayta "hazırlan" denir; hepsine birden denirse
   bellek boşuna dolar. */
.kaydirak .slayt.etkin,
.kaydirak .slayt.cikiyor { will-change: opacity; }

/* Kapak görseli ve video üst üste duruyor: video saydamken kapak
   görünüyor, video oynamaya başlayınca örtüyor. object-fit ikisine de
   uygulandığı için kırpma her tarayıcıda aynı. */
.kaydirak .slayt img,
.kaydirak .slayt video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kaydirak .slayt .slayt-kapak { z-index: 0; }
.kaydirak .slayt video { z-index: 1; }

/* Geniş ekranda yazı solda duruyor. Videodaki kişi de ortada kalınca
   ikisi üst üste biniyor ve yüz okunmuyor. Kadraj sağa kaydırılınca
   yazı boş alana, yüz de açık alana denk geliyor. */
@media (min-width: 1000px) {
  .kaydirak .slayt video,
  .kaydirak .slayt img { object-position: 68% center; }
}

/* Yavaş yakınlaşma yalnızca ekrandaki slaytta çalışır ve slayt
   değişince baştan başlar. */
.kaydirak .slayt.etkin img,
.kaydirak .slayt.etkin video {
  animation: yavasYakinlas var(--sure, 7s) ease-out both;
}

/* Çizimli akış: her slayt farklı renk ve farklı kompozisyon */
.slayt-cizim { background: linear-gradient(160deg, #2E1D10 0%, #241608 60%, #1C1105 100%); }
.cizim-2 { background: linear-gradient(200deg, #3A2A1B 0%, #241608 55%, #150C03 100%); }
.cizim-2 .kemer { right: auto; left: 2%; transform: translateY(-50%) scaleX(-1); }
.cizim-2 .leke-1 { right: auto; left: 6%; }
.cizim-2 .leke-2 { left: auto; right: 10%; }
.cizim-3 { background: radial-gradient(130% 100% at 32% 18%, #4A3826 0%, #241608 58%, #180E04 100%); }
.cizim-3 .kemer { width: min(38%, 440px); top: 40%; right: 6%; }
.cizim-3 .leke-3 { left: 22%; top: 18%; }

/* Çizimin "kendini çizmesi" her slayt ekrana geldiğinde tekrarlanır. */
.slayt-cizim .kemer .cizgi,
.slayt-cizim .kemer .nokta,
.slayt-cizim .kemer .dis { animation: none; }
.slayt-cizim.etkin .kemer .cizgi { animation: cizil 2.4s cubic-bezier(0.22, 0.68, 0.36, 1) forwards; }
.slayt-cizim.etkin .kemer .cizgi:nth-child(2) { animation-delay: 0.18s; }
.slayt-cizim.etkin .kemer .cizgi:nth-child(3) { animation-delay: 0.36s; }
.slayt-cizim.etkin .kemer .nokta { animation: noktaBelir 0.5s ease forwards 1.6s; }
.slayt-cizim.etkin .kemer .dis {
  animation: disBelir 0.6s cubic-bezier(0.22, 0.68, 0.36, 1) forwards;
  animation-delay: calc(0.9s + var(--s) * 0.08s);
}
/* Yazının okunabilmesi için görselin üstüne koyu bir perde çekilir.
   Perde SOLDA koyu, SAĞA doğru açılıyor: yazı okunur kalırken
   fotoğraftaki yüz ve gülümseme görünür. */
/* Perde artık soldan sağa değil, merkezden kenarlara koyulaşıyor:
   yazı ortada olduğu için okunurluk ortada gerekiyor, görüntünün
   kenarları da çerçevelenmiş görünüyor. Üst kısım menünün, alt kısım
   saat şeridinin arkası için ayrıca koyultuluyor. */
.medya-perde {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 95% at 50% 50%,
      rgba(24,14,5,0.18) 0%,
      rgba(24,14,5,0.32) 58%,
      rgba(24,14,5,0.56) 100%),
    linear-gradient(to bottom,
      rgba(24,14,5,0.50) 0%,
      rgba(24,14,5,0.05) 26%,
      rgba(24,14,5,0.10) 62%,
      rgba(24,14,5,0.70) 100%);
}
.kahraman-medyali::after { display: none; }

@keyframes yavasYakinlas {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* ------------------------------------------------------------------ */
/* Fotoğraf yokken gösterilen çizim                                    */
/* ------------------------------------------------------------------ */
.kahraman-cizim {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  color: var(--altin); pointer-events: none;
}
.leke {
  position: absolute; border-radius: 50%; filter: blur(46px);
  animation: suzul 20s ease-in-out infinite;
  will-change: transform;   /* bulanıklık her karede yeniden hesaplanmasın */
}
.leke-1 {
  width: 380px; height: 380px; top: -110px; right: 4%;
  background: radial-gradient(circle, rgba(201,161,94,0.40), transparent 70%);
}
.leke-2 {
  width: 280px; height: 280px; bottom: -90px; left: 8%;
  background: radial-gradient(circle, rgba(181,135,90,0.34), transparent 70%);
  animation-delay: -7s;
}
.leke-3 {
  width: 220px; height: 220px; top: 34%; left: 46%;
  background: radial-gradient(circle, rgba(232,203,150,0.20), transparent 70%);
  animation-delay: -13s;
}

@keyframes suzul {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(26px, -22px, 0) scale(1.07); }
  66%      { transform: translate3d(-20px, 18px, 0) scale(0.95); }
}

.kemer {
  position: absolute; right: 1%; top: 50%; transform: translateY(-50%);
  width: min(48%, 560px); opacity: 0.5;
}
.kemer .cizgi {
  stroke-dasharray: 760; stroke-dashoffset: 760;
  animation: cizil 2.4s cubic-bezier(0.22, 0.68, 0.36, 1) forwards;
}
.kemer .cizgi:nth-child(2) { animation-delay: 0.18s; }
.kemer .cizgi:nth-child(3) { animation-delay: 0.36s; }
.kemer .nokta { opacity: 0; animation: noktaBelir 0.5s ease forwards 1.6s; }
.kemer .dis {
  fill: none; opacity: 0;
  animation: disBelir 0.6s cubic-bezier(0.22, 0.68, 0.36, 1) forwards;
  animation-delay: calc(0.9s + var(--s) * 0.08s);
}

@keyframes cizil { to { stroke-dashoffset: 0; } }
@keyframes noktaBelir { to { opacity: 1; } }
@keyframes disBelir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Kahraman yazısının giriş sırası                                     */
/* ------------------------------------------------------------------ */
/* Yalnızca JavaScript varken gizlenir: kapalıysa her şey yerinde durur. */
.js .giris {
  opacity: 0;
  animation: girisBelir 0.85s cubic-bezier(0.22, 0.68, 0.36, 1) forwards;
}
.js .giris-1 { animation-delay: 0.05s; }
.js .giris-2 { animation-delay: 0.15s; }
.js .giris-3 { animation-delay: 0.27s; }
.js .giris-4 { animation-delay: 0.39s; }
.js .giris-5 { animation-delay: 0.51s; }

@keyframes girisBelir {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Aşağı kaydırma işareti */
.kaydir-isareti {
  position: absolute; left: 50%; bottom: 20px; z-index: 1;
  width: 25px; height: 40px; margin-left: -13px;
  border: 1.5px solid rgba(201, 161, 94, 0.45); border-radius: 13px;
}
.kaydir-isareti span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  margin-left: -2px; border-radius: 2px; background: var(--altin);
  animation: kaydirNokta 1.9s ease-in-out infinite;
}
@keyframes kaydirNokta {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(15px); opacity: 0.2; }
}

/* ------------------------------------------------------------------ */
/* Bölümlerin üst üste binen yuvarlak köşeleri                         */
/* ------------------------------------------------------------------ */
.bolum-yuvarlak {
  border-radius: 34px 34px 0 0;
  margin-top: -34px;
  z-index: 2;
}

/* ------------------------------------------------------------------ */
/* Görünüme girince beliren bölümler — yön çeşitleri                   */
/* ------------------------------------------------------------------ */
.js .beliren {
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.22, 0.68, 0.36, 1);
}
.js .beliren-sol { transform: translateX(-28px); }
.js .beliren-sag { transform: translateX(28px); }
.js .beliren-olcek { transform: scale(0.96); }
.js .beliren.gorundu { transform: none; }

/* Izgaralarda kartlar tek tek gelir (sırayı site.js veriyor). */
.js .beliren-liste { opacity: 1; transform: none; }
.js .beliren-liste > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.68, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.js .beliren-liste.gorundu > * { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Kartlar: fotoğraf ve hareket                                        */
/* ------------------------------------------------------------------ */
.kart-gorsel {
  display: block; margin: -26px -24px 18px; height: 176px;
  overflow: hidden; border-radius: 13px 13px 0 0; background: var(--krem);
}
.kart-gorsel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.36, 1);
}
a.kart:hover .kart-gorsel img { transform: scale(1.07); }
.kart-ikon { transition: background 0.3s ease, transform 0.3s ease; }
a.kart:hover .kart-ikon { background: rgba(201, 161, 94, 0.28); transform: translateY(-2px); }
.kart-devam { transition: gap 0.25s ease; }

/* Altın düğmenin üzerinden geçen ışık */
.dugme-altin { position: relative; overflow: hidden; }
.dugme-altin::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none;
}
.dugme-altin:hover::after { left: 130%; }

/* Sayı şeridi: rakamlar ekrana girince yukarı sayar (site.js). */
.rakam { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Tanıtım videosu                                                     */
/* ------------------------------------------------------------------ */
.video-kutu {
  position: relative; max-width: 940px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: #170D04; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.38);
}
.video-kutu .oynatici,
.video-kutu iframe { width: 100%; height: 100%; display: block; border: 0; }
.oynatici-yt { background: #170D04; }

.video-dugmesi {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(201, 161, 94, 0.94); color: var(--kahve-koyu);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.video-dugmesi svg { width: 34px; height: 34px; margin-left: 4px; }
.video-dugmesi:hover { transform: scale(1.07); background: var(--altin); }
.video-dugmesi::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(201, 161, 94, 0.45);
  animation: nabiz 2.6s ease-out infinite;
}
.video-kutu.oynuyor .video-dugmesi { display: none; }

@keyframes nabiz {
  0%   { transform: scale(0.9); opacity: 0.9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Galeri                                                              */
/* ------------------------------------------------------------------ */
.galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.galeri-kare {
  position: relative; padding: 0; border: none; cursor: zoom-in;
  border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--krem); display: block;
}
/* Mozaik hissi: her beş fotoğraftan biri geniş durur. */
.galeri-kare:nth-child(5n + 1) { grid-column: span 2; aspect-ratio: 8 / 5; }
.galeri-kare img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.36, 1);
}
.galeri-kare:hover img { transform: scale(1.06); }
.galeri-kare:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }
.galeri-yazi {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  color: #fff; font-size: 13px; text-align: left; font-weight: 600;
  background: linear-gradient(transparent, rgba(20, 12, 4, 0.8));
}

/* Büyüteç (fotoğrafa dokununca açılan ekran) */
/* "hidden" işareti display:flex kuralını yenemez — bu satır olmazsa
   büyüteç kapalıyken de ekranı kaplar. */
.buyutec[hidden] { display: none; }
.buyutec {
  position: fixed; inset: 0; z-index: 200; padding: 40px 20px;
  background: rgba(17, 10, 3, 0.94);
  display: flex; align-items: center; justify-content: center;
  animation: soluk 0.22s ease;
}
.buyutec-ic { margin: 0; text-align: center; }
.buyutec-ic img {
  max-width: min(92vw, 1200px); max-height: 78vh;
  border-radius: 12px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.buyutec-ic figcaption { color: #D8CBB4; font-size: 14px; margin-top: 14px; }
.buyutec-kapat, .buyutec-ok {
  position: absolute; background: rgba(251, 248, 242, 0.1); color: var(--fildisi);
  border: 1px solid rgba(251, 248, 242, 0.25); border-radius: 50%;
  width: 46px; height: 46px; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.buyutec-kapat:hover, .buyutec-ok:hover { background: rgba(251, 248, 242, 0.22); }
.buyutec-kapat { top: 20px; right: 20px; }
.buyutec-onceki { left: 20px; }
.buyutec-sonraki { right: 20px; }

@keyframes soluk { from { opacity: 0; } to { opacity: 1; } }

/* Tedavi sayfasındaki fotoğraf */
.yazi-gorsel { margin: 0 0 28px; border-radius: 16px; overflow: hidden; }
.yazi-gorsel img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------ */
/* Fotoğraf yerine geçen desenli kart başlıkları                       */
/* ------------------------------------------------------------------ */
/* Bunlar stok fotoğraf değil, çizimdir. Gerçek fotoğraf eklendiğinde
   yerlerini ona bırakırlar (bkz. web/olustur.mjs → tedaviKarti). */
.kart-desen {
  display: block; position: relative; overflow: hidden;
  margin: -26px -24px 18px; height: 152px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(135deg, #2E1D10 0%, #4A3826 100%);
}
.desen-1 { background: linear-gradient(135deg, #2E1D10, #4A3826); }
.desen-2 { background: linear-gradient(140deg, #33210F, #6B5539); }
.desen-3 { background: linear-gradient(125deg, #241608, #3F2E1E); }
.desen-4 { background: linear-gradient(150deg, #3A2A1B, #7A6244); }
.desen-5 { background: linear-gradient(130deg, #2A1A0C, #58432C); }

/* İnce nokta dokusu — düz renk yerine derinlik verir. */
.kart-desen::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201, 161, 94, 0.30) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.65;
}
/* Sol üstten gelen ışık */
.kart-desen::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 18% 8%, rgba(201, 161, 94, 0.38), transparent 62%);
}

.desen-ikon {
  position: absolute; right: -18px; bottom: -26px; z-index: 1;
  width: 148px; height: 148px; display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.36, 1);
}
.desen-ikon svg {
  width: 100%; height: 100%;
  stroke: rgba(251, 248, 242, 0.42); stroke-width: 1.1; fill: none;
}
a.kart:hover .desen-ikon { transform: translate(-8px, -8px) rotate(-5deg) scale(1.06); }

/* Tedavi sayfasının başlığındaki filigran */
.sayfa-basi-bantli { position: relative; overflow: hidden; }
.sayfa-bant {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 300px; height: 300px; z-index: 0; pointer-events: none;
}
.sayfa-bant .desen-ikon {
  position: static; width: 100%; height: 100%; transform: none;
}
.sayfa-bant .desen-ikon svg {
  stroke: rgba(201, 161, 94, 0.22); stroke-width: 0.9;
  animation: filigranSuzul 9s ease-in-out infinite;
}
.sayfa-basi-bantli .kapsayici { position: relative; z-index: 1; }

@keyframes filigranSuzul {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-2deg); }
}

/* ------------------------------------------------------------------ */
/* Klinik çizimleri (fotoğraf yokken görünen bölüm)                    */
/* ------------------------------------------------------------------ */
.panel { text-align: left; overflow: hidden; }
.panel-cizim {
  margin: -26px -24px 20px; height: 190px;
  background: linear-gradient(150deg, #2E1D10, #241608);
  color: var(--altin);
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px 13px 0 0; position: relative; overflow: hidden;
}
.panel-cizim::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 15%, rgba(201, 161, 94, 0.22), transparent 60%);
}
.panel-cizim svg {
  width: 86%; height: auto; position: relative; z-index: 1;
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.36, 1);
}
.panel:hover .panel-cizim svg { transform: scale(1.04); }

/* ------------------------------------------------------------------ */
/* Kahraman bölümüne ince doku                                         */
/* ------------------------------------------------------------------ */
/* Düz renkli koyu zeminler ekranda "yassı" görünüyor; çok hafif bir
   tanecik dokusu derinlik veriyor. Dosya indirilmiyor: doku SVG olarak
   sayfanın içinde üretiliyor. */
/* Not: burada bilerek "mix-blend-mode" kullanılmıyor. Karışım kipi, altta
   bir şey her oynadığında tüm katmanın yeniden boyanmasına yol açıyor ve
   zayıf telefonlarda kaydırmayı takılmalı hâle getiriyordu. */
.kahraman::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0.22;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Çocuk diş hekimliği bölümü                                          */
/* ------------------------------------------------------------------ */
.cocuk-madde {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 15.5px; color: #5C5145; line-height: 1.65;
}
.cocuk-madde:last-of-type { border-bottom: none; }
.cocuk-madde b { color: var(--kahve); display: block; font-size: 16px; }
.cocuk-madde::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--altin);
}

.cocuk-hekim {
  font-size: 15px; color: #5C5145; margin: 18px 0 0;
  padding-left: 22px; border-left: 3px solid var(--altin);
}
.cocuk-hekim a { color: var(--bronz); font-weight: 700; }

/* Tedavi sayfasında "bu sayfayı gözden geçiren" satırı */
.yan-hekim {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--cizgi);
  font-size: 14.5px;
}
.yan-hekim-etiket {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--soluk); margin-bottom: 4px;
}
.yan-hekim a { color: var(--bronz); font-weight: 700; }

.cocuk-cizim {
  display: flex; align-items: center; justify-content: center;
  color: var(--bronz);
  background: linear-gradient(150deg, #FFFDF8, var(--krem));
  border: 1px solid var(--cizgi); border-radius: 20px;
  padding: 26px;
}
.cocuk-cizim svg {
  width: 100%; max-width: 300px; height: auto;
  animation: cocukSuzul 6s ease-in-out infinite;
}
@keyframes cocukSuzul {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1.5deg); }
}

@media (max-width: 860px) {
  .cocuk-bolum { grid-template-columns: 1fr; }
  /* Telefonda çizim yazıdan önce gelmesin; önce ne anlattığımız okunsun. */
  .cocuk-cizim { order: 2; }
  .cocuk-cizim svg { max-width: 210px; animation: none; }
}

/* ------------------------------------------------------------------ */
/* Yorumlar yüklenirken görünen iskelet                                */
/* ------------------------------------------------------------------ */
.iskelet {
  height: 208px; border-radius: var(--yumusak); border: 1px solid var(--cizgi);
  background: linear-gradient(100deg, var(--krem) 28%, #FFFDF8 46%, var(--krem) 64%);
  background-size: 220% 100%;
  animation: parla 1.5s linear infinite;
}
@keyframes parla {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* ------------------------------------------------------------------ */
/* Küçük ekranlarda medya                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .galeri { grid-template-columns: repeat(2, 1fr); }
  .galeri-kare:nth-child(5n + 1) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .kemer { width: 76%; opacity: 0.3; top: auto; bottom: -8%; right: -14%; transform: none; }
}

/* Telefonda akıcılık: bulanıklık efektleri en pahalı işlerdir.
   Görünüş neredeyse aynı kalıyor, kaydırma belirgin biçimde rahatlıyor. */
@media (max-width: 860px) {
  /* Telefonda üst şerit gizleniyor: dar ekranda iki satıra taşıp
     görüntünün üstünü kaplıyordu. Adres, telefon ve e-posta alt
     bilgide ve yüzen düğmelerde zaten var. */
  .ust-serit { display: none; }
  .ust-menu { top: 12px; }
  .ust-menu-ic { backdrop-filter: none; background: rgba(251, 248, 242, 0.97); padding: 0 16px; min-height: 62px; }
  .kahraman-kart { backdrop-filter: none; background: rgba(36, 22, 8, 0.55); }

  /* ----------------------------------------------------------------
     Telefonda kahraman bölümü ikiye ayrılır:
       ÜST  — videodaki yüz için açık alan, perde neredeyse şeffaf
       ALT  — yazı ve düğmeler, altlarında koyu zemin
     Masaüstünde yazı solda / yüz sağda duruyordu; dar ekranda yan yana
     yer olmadığı için aynı ayrım dikeyde yapılıyor. Yoksa metin
     görüntünün üstünü boydan boya kapatıyor.
     ---------------------------------------------------------------- */
  /* Telefonda da video tam ekran. Önceden bölüm ikiye ayrılıyordu
     (üstte video, altta yazı); artık masaüstüyle aynı davranış. */
  .kahraman { padding: 110px 0 96px; }
  .kahraman-medya { inset: 0; height: auto; }

  /* Yüz ekranın üst yarısına denk gelsin: yazı ortada olduğu için
     yüzün biraz yukarıda durması ikisinin üst üste binmesini azaltıyor. */
  .kaydirak .slayt video,
  .kaydirak .slayt img { object-position: 50% 30%; }

  /* Telefonda yazı bloğu ne kadar kısaysa videodan o kadar çok
     görünüyor. Başlık, paragraf ve düğmeler bu yüzden sıkıştırıldı. */
  .kahraman h1 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); margin-bottom: 14px; }
  .kahraman-metin { font-size: 15.5px; line-height: 1.5; }

  /* Düğmeler alt alta iki satır yerine yan yana tek satır. */
  .kahraman-dugmeler { margin-top: 22px; gap: 10px; }
  .kahraman-dugmeler .dugme { padding: 12px 16px; font-size: 14px; }
}

@media (max-width: 620px) {
  /* Saat şeridi telefonda alt alta yerleşsin. */
  .saat-serit { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 0; padding: 20px; }
  .saat-oge { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .saat-serit-dugme { margin-left: 0; width: 100%; }
  .saat-serit-not { text-align: center; }

  .leke { animation: none; filter: blur(38px); will-change: auto; }
  .kahraman::before { display: none; }
  .bolum-yuvarlak { border-radius: 26px 26px 0 0; margin-top: -26px; }
  .galeri { grid-template-columns: 1fr; }
  .galeri-kare, .galeri-kare:nth-child(5n + 1) { grid-column: auto; aspect-ratio: 4 / 3; }
  .buyutec-ok { width: 40px; height: 40px; }
  .buyutec-onceki { left: 8px; }
  .buyutec-sonraki { right: 8px; }
  .kaydir-isareti { bottom: 14px; }
}

/* ------------------------------------------------------------------ */
/* "Hareketi azalt" ayarı açıksa                                       */
/* ------------------------------------------------------------------ */
/* Bu ayarı açan kişiler çoğunlukla hareketten rahatsız olduğu için
   açar (baş dönmesi, migren). Sayfa aynen çalışır, hiçbir şey oynamaz. */
@media (prefers-reduced-motion: reduce) {
  .kahraman-medya img,
  .kahraman-medya video,
  .leke, .kemer .cizgi, .kemer .nokta, .kemer .dis,
  .js .giris, .kaydir-isareti span, .video-dugmesi::after, .iskelet,
  .sayfa-bant .desen-ikon svg, .cocuk-cizim svg {
    animation: none !important;
  }
  .js .giris { opacity: 1; }
  .kemer .cizgi { stroke-dashoffset: 0; }
  .kemer .nokta, .kemer .dis { opacity: 1; }
  .js .beliren-liste > * { opacity: 1; transform: none; transition: none; }
  .ilerleme { display: none; }
  /* Dönen akış durur; ilk görsel sabit kalır. */
  .kaydirak .slayt { transition: none; }
  .kaydirak .slayt.etkin img,
  .kaydirak .slayt.etkin video { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==================================================================
   HASTA REHBERİ
   ==================================================================
   Rehber, halkın Google'a yazdığı diş sorularının cevaplandığı
   bölümdür. Her sorunun kendi sayfası vardır.
   ------------------------------------------------------------------ */

/* Soru sayfasının en üstündeki doğrudan cevap. Google öne çıkan kutuya
   ve yapay zekâ araçları cevaplarına bu paragrafı alıyor; bu yüzden
   görsel olarak da ilk okunan yer olması isteniyor. */
.kisa-cevap {
  font-size: 18.5px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--kahve);
  background: var(--krem);
  border-left: 4px solid var(--altin);
  border-radius: 0 var(--yumusak) var(--yumusak) 0;
  padding: 20px 22px;
  margin-bottom: 30px;
}

/* Sayfa sonundaki "bu muayenenin yerini tutmaz" notu. */
.yazi-uyari {
  margin-top: 34px;
  padding: 16px 18px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--fildisi);
  color: var(--soluk);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Rehber liste sayfası --- */
.rehber-grup {
  margin: 44px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cizgi);
}
.rehber-grup:first-child { margin-top: 0; }

.rehber-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.rehber-kart {
  display: block;
  background: var(--fildisi);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  padding: 22px 22px 18px;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rehber-kart:hover,
.rehber-kart:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--golge-hafif);
  border-color: var(--altin);
}
.rehber-kart h3 {
  font-size: 17.5px;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--kahve);
}
.rehber-kart p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5C5145;
  margin-bottom: 12px;
}
.rehber-devam {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronz);
}

@media (max-width: 640px) {
  .kisa-cevap { font-size: 17px; padding: 17px 18px; }
  .rehber-liste { grid-template-columns: 1fr; }
}

/* --- Hekim kartı: ilgi alanı / tedavi listesi ayrımı ------------------
   İki hekim de bütün tedavileri uyguluyor. Rozetler "özellikle
   ilgilendiği" alanlardır; altındaki liste uyguladığı tedavilerin
   tamamıdır. İkisinin görsel olarak da ayrılması gerekiyor, yoksa
   rozetler "sadece bunlar" diye okunuyor. */
.hekim-bolum {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cizgi);
  text-align: left;
}
.hekim-etiket {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 9px;
}
.hekim-not {
  font-size: 14px;
  color: #5C5145;
  margin: 10px 0 0;
  font-style: italic;
}
.hekim-bolum .hekim-not {
  margin: 0 0 10px;
  font-style: normal;
  font-weight: 600;
  color: var(--kahve);
}
.hekim-tedaviler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.hekim-tedaviler a {
  color: var(--bronz);
  border-bottom: 1px solid transparent;
}
.hekim-tedaviler a:hover,
.hekim-tedaviler a:focus-visible { border-bottom-color: var(--bronz); }
.hekim-tedaviler a:not(:last-child)::after {
  content: "·";
  color: var(--cizgi);
  margin-left: 10px;
}

/* Bölüm başlığı — h1'den doğrudan kart başlıklarına (h3) atlanmasın
   diye eklenen ara başlıklar. Sayfayı hem okunur hem de arama motoru
   ve ekran okuyucu için sıralı yapıyor. */
.bolum-basligi {
  font-size: 22px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cizgi);
}

/* ==================================================================
   GİRİŞ BANDI — kahraman bölümünün hemen altı
   ==================================================================
   Açılış ekranında yalnızca slogan var; kliniğin ne yaptığını anlatan
   cümle ve randevu düğmeleri buraya alındı. Kaydıran kişi ilk bunu
   görüyor, video ise ilk ekranda kapanmamış oluyor.
   ------------------------------------------------------------------ */
/* Alt boşluk bilerek geniş: bir sonraki bölüm (.bolum-yuvarlak)
   yuvarlak köşe etkisi için 34px yukarı biniyor ve üstünde ne varsa
   kapatıyor. Düğmeler bu yüzden yarım görünüyordu. */
.giris-bandi {
  padding: 60px 0 92px;
  text-align: center;
  background: var(--fildisi);
}
.giris-bandi-metin {
  max-width: 680px;
  margin: 0 auto 26px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--kahve);
}
.giris-bandi-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 620px) {
  .giris-bandi { padding: 44px 0 76px; }
  .giris-bandi-metin { font-size: 18px; margin-bottom: 22px; }
}

/* ==================================================================
   YAZI İÇİ LİSTE ve KÜNYE SATIRI
   ==================================================================
   Liste: "ne yapılmalı", "nelerden kaçınılmalı" gibi bölümler madde
   madde yazılıyor. Hem okunması kolay hem de Google öne çıkan cevap
   kutusunda bu tür sorulara listeleri tercih ediyor.
   ------------------------------------------------------------------ */
.yazi-liste {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.yazi-liste li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  line-height: 1.65;
}
.yazi-liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--altin);
}

/* Yazının hemen başındaki "kim gözden geçirdi, ne zaman" satırı. */
.yazi-kunye {
  font-size: 13.5px;
  color: var(--soluk);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cizgi);
}
.yazi-kunye a { color: var(--bronz); font-weight: 600; }