/* ============================================================================
   Uzm. Psk. Buse Bozkurt — Tasarım Sistemi (2026)
   ----------------------------------------------------------------------------
   Yön, rakip ve referans analiziyle belirlendi:
   · Alma / Two Chairs gibi güncel terapi siteleri: sıcak krem zemin, serif
     başlık, 16-18px gövde, CSS Grid.
   · Yerel rakipler (serdaravsar, evrekapsikoloji): beyaz zemin, 14px gövde,
     jQuery/Bootstrap şablonu — okunabilirlik ve his olarak geride.
   Bu dosya eski şablonun (bootstrap + revolution + purple degrade) yerine
   geçer; tek başına ayakta durur, dış çerçeve gerektirmez.
   ========================================================================== */

/* ---------- 1. Tasarım belirteçleri ---------- */
:root {
  /* Zemin: saf beyaz değil — sıcak krem, göz yormaz, klinik soğukluğu kırar */
  --kagit: #F8F6F1;
  --kagit-2: #F1ECE3;
  --yuzey: #FFFFFF;
  --kum: #EBE4D8;

  /* Metin: saf siyah değil, sıcak koyu kahve-siyah */
  --murekkep: #2B2724;
  --murekkep-2: #574F48;
  --solgun: #857B72;

  /* Vurgu: derin adaçayı — sakinlik + güven; sağlık alanında yerleşik dil */
  --ana: #2F5D50;
  --ana-koyu: #24483E;
  --ana-acik: #E4EDE9;

  /* İkincil: kil — çocuk/ergen alanına sıcaklık katar, CTA'da dikkat çeker */
  --kil: #C0714E;
  --kil-acik: #F6E9E2;

  --whatsapp: #25D366;
  --cizgi: #E2DACE;
  --cizgi-koyu: #CFC4B4;

  /* Tipografi: Fraunces (yumuşak serif) + Figtree (samimi sans) */
  --f-baslik: "Fraunces", "Georgia", serif;
  --f-govde: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-tam: 999px;

  --golge-s: 0 1px 2px rgba(43, 39, 36, .06), 0 4px 12px rgba(43, 39, 36, .04);
  --golge-m: 0 2px 6px rgba(43, 39, 36, .06), 0 12px 32px rgba(43, 39, 36, .08);

  --en: 1180px;
  --nav-y: 76px;
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-govde);
  /* Rakipler 14px kullanıyor; 17px okunabilirlikte belirgin fark yaratır */
  font-size: 17px;
  line-height: 1.7;
  color: var(--murekkep-2);
  background: var(--kagit);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ana); text-decoration: none; }
a:hover { color: var(--ana-koyu); }
::selection { background: var(--ana-acik); color: var(--murekkep); }
:focus-visible { outline: 3px solid var(--ana); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--f-baslik);
  color: var(--murekkep);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.sarmal { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: 22px; }
.bolum { padding: clamp(56px, 8vw, 104px) 0; }
.bolum--kagit2 { background: var(--kagit-2); }
.bolum--koyu { background: var(--ana); color: #EAF1EE; }
.bolum--koyu h2, .bolum--koyu h3 { color: #FFFFFF; }

/* Bölüm başlığı: küçük etiket + başlık + açıklama */
.bolum-basi { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.bolum-basi.orta { margin-inline: auto; text-align: center; }
.etiket {
  display: inline-block;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ana); background: var(--ana-acik);
  padding: 6px 14px; border-radius: var(--r-tam); margin-bottom: 16px;
}
.bolum--koyu .etiket { color: #FFFFFF; background: rgba(255,255,255,.14); }
.bolum-basi p { color: var(--murekkep-2); font-size: 1.06rem; }
.bolum--koyu .bolum-basi p { color: #D5E3DE; }

/* ---------- 3. Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-govde); font-size: 1rem; font-weight: 600;
  padding: 14px 26px; border-radius: var(--r-tam); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn--ana { background: var(--ana); color: #FFFFFF; box-shadow: var(--golge-s); }
.btn--ana:hover { background: var(--ana-koyu); color: #FFFFFF; box-shadow: var(--golge-m); }
.btn--kil { background: var(--kil); color: #FFFFFF; }
.btn--kil:hover { background: #A85E3E; color: #FFFFFF; }
.btn--cizgi { background: transparent; border-color: var(--cizgi-koyu); color: var(--murekkep); }
.btn--cizgi:hover { border-color: var(--ana); color: var(--ana); }
.btn--wa { background: var(--whatsapp); color: #FFFFFF; }
.btn--wa:hover { background: #1EB855; color: #FFFFFF; }
.btn--genis { width: 100%; }

/* ---------- 4. Üst menü ---------- */
.ust {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 246, 241, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 20px; min-height: var(--nav-y); }
.marka { display: flex; align-items: center; gap: 12px; flex: none; }
.marka-ad {
  font-family: var(--f-baslik); font-size: 1.16rem; font-weight: 600;
  color: var(--murekkep); line-height: 1.15; letter-spacing: -.01em;
}
.marka-alt { display: block; font-family: var(--f-govde); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ana); }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
  padding: 9px 15px; border-radius: var(--r-tam); font-size: .97rem; font-weight: 500;
  color: var(--murekkep-2); transition: background .15s, color .15s;
}
.menu a:hover { background: var(--kagit-2); color: var(--murekkep); }
.menu a.aktif { background: var(--ana-acik); color: var(--ana-koyu); font-weight: 600; }
.ust-eylem { display: flex; align-items: center; gap: 10px; flex: none; }
.menu-dugme {
  display: none; background: none; border: 1.5px solid var(--cizgi-koyu);
  border-radius: var(--r-s); width: 44px; height: 42px; cursor: pointer; color: var(--murekkep);
}

/* ---------- 5. Kahraman (hero) ---------- */
.kahraman { position: relative; overflow: hidden; background: var(--kagit); }
.kahraman-ic {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 68px);
  align-items: center; padding: clamp(44px, 6vw, 84px) 0 clamp(52px, 7vw, 96px);
}
.kahraman h1 { margin-bottom: .35em; }
.kahraman-vurgu { color: var(--ana); font-style: italic; }
.kahraman-metin { font-size: 1.12rem; max-width: 46ch; margin-bottom: 30px; }
.kahraman-btnlar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.kahraman-guven { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.guven-oge { display: flex; flex-direction: column; gap: 2px; }
.guven-sayi { font-family: var(--f-baslik); font-size: 1.6rem; font-weight: 600; color: var(--ana); line-height: 1; }
.guven-yazi { font-size: .86rem; color: var(--solgun); }

.kahraman-gorsel { position: relative; }
.kahraman-gorsel img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  border-radius: 200px 200px var(--r-l) var(--r-l);
  box-shadow: var(--golge-m);
}
/* Fotoğrafın arkasındaki yumuşak leke — sıcaklık ve derinlik */
.kahraman-gorsel::before {
  content: ""; position: absolute; inset: -6% -8% 12% 6%;
  background: radial-gradient(circle at 70% 30%, var(--kum), transparent 68%);
  border-radius: 50%; z-index: -1;
}
.kahraman-rozet {
  position: absolute; left: -12px; bottom: 28px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-m);
  padding: 14px 18px; box-shadow: var(--golge-m); max-width: 230px;
}
.kahraman-rozet b { display: block; font-family: var(--f-baslik); color: var(--murekkep); font-size: 1rem; }
.kahraman-rozet span { font-size: .84rem; color: var(--solgun); }

/* ---------- 6. Kartlar ---------- */
.izgara { display: grid; gap: 20px; }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
/*
 * Blog listesi: dort sutun ve auto-FILL.
 *
 * auto-fit bos sutunlari siliyor; blogda tek yazi oldugunda o kart butun
 * genisligi yutup 1136x855'lik bir afise donuyordu (olculdu). auto-fill
 * bos sutunlari yerinde biraktigi icin kart normal boyutunda kaliyor ve
 * yazi eklendikce izgara kendiliginden doluyor.
 *
 * 250px esigi 1136px'lik kapta tam dort sutun veriyor (her biri 269px);
 * daralinca kendiliginden 3, 2 ve 1 sutuna iniyor.
 *
 * Ayri bir sinif: izgara--2 ve izgara--3 panel formlarinda da kullaniliyor,
 * oradaki auto-fit davranisini degistirmek istemedim.
 */
.izgara--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: 30px 28px; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.kart:hover { transform: translateY(-4px); box-shadow: var(--golge-m); border-color: var(--cizgi-koyu); }
.kart-ikon {
  width: 52px; height: 52px; border-radius: var(--r-m); margin-bottom: 18px;
  display: grid; place-items: center; background: var(--ana-acik); color: var(--ana);
  font-size: 1.35rem;
}
.kart--kil .kart-ikon { background: var(--kil-acik); color: var(--kil); }
.kart h3 { margin-bottom: .4em; }
.kart p { color: var(--murekkep-2); font-size: .98rem; }
.kart-liste { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.kart-liste li {
  font-size: .82rem; color: var(--ana-koyu); background: var(--ana-acik);
  padding: 5px 11px; border-radius: var(--r-tam);
}
.kart-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; font-size: .95rem; }

/* ---------- 7. Adımlar (süreç) ---------- */
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; counter-reset: adim; }
.adim { position: relative; padding-top: 26px; }
.adim::before {
  counter-increment: adim; content: counter(adim, decimal-leading-zero);
  font-family: var(--f-baslik); font-size: 2.5rem; font-weight: 600;
  color: var(--kum); line-height: 1; display: block; margin-bottom: 10px;
}
.adim h3 { font-size: 1.12rem; }
.adim p { font-size: .96rem; }

/* ---------- 8. Görüşler ---------- */
.gorus {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
}
.gorus-metin { font-family: var(--f-baslik); font-size: 1.08rem; line-height: 1.6; color: var(--murekkep); }
.gorus-metin::before { content: "“"; color: var(--kum); font-size: 2.6rem; line-height: 0; vertical-align: -.35em; margin-right: 4px; }
.gorus-kisi { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.gorus-harf {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--ana-acik); color: var(--ana-koyu); font-weight: 700; font-size: .95rem;
}
.gorus-kisi b { display: block; color: var(--murekkep); font-size: .95rem; font-weight: 600; }
.gorus-kisi span { font-size: .85rem; color: var(--solgun); }

/* ---------- 9. SSS ---------- */
.sss-liste { display: grid; gap: 12px; max-width: 820px; }
.sss-oge { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-m); overflow: hidden; }
.sss-oge[open] { border-color: var(--ana); }
.sss-oge summary {
  cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 600; color: var(--murekkep);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1.02rem;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after { content: "+"; color: var(--ana); font-size: 1.5rem; flex: none; line-height: 1; }
.sss-oge[open] summary::after { content: "−"; }
.sss-govde { padding: 0 24px 22px; color: var(--murekkep-2); }

/* ---------- 10. İletişim / CTA ---------- */
.cta-kutu {
  background: var(--ana); color: #EAF1EE; border-radius: var(--r-l);
  padding: clamp(34px, 5vw, 56px); display: grid; grid-template-columns: 1.3fr .7fr;
  gap: 32px; align-items: center;
}
.cta-kutu h2 { color: #FFFFFF; margin-bottom: .35em; }
.cta-kutu p { color: #D5E3DE; margin-bottom: 0; }
.cta-btnlar { display: flex; flex-direction: column; gap: 12px; }
.cta-btnlar .btn { background: #FFFFFF; color: var(--ana-koyu); }
.cta-btnlar .btn:hover { background: var(--kagit); color: var(--ana-koyu); }
.cta-btnlar .btn--wa { background: var(--whatsapp); color: #FFFFFF; }

/* ---------- 11. Alt bilgi ---------- */
.alt { background: var(--murekkep); color: #C9C1B9; padding: 60px 0 28px; }
.alt a { color: #C9C1B9; }
.alt a:hover { color: #FFFFFF; }
.alt-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.alt-marka .marka-ad { color: #FFFFFF; }
.alt-marka p { font-size: .92rem; margin-top: 12px; max-width: 32ch; }
.alt h4 { color: #FFFFFF; font-family: var(--f-govde); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.alt-baglar { display: flex; flex-direction: column; gap: 9px; font-size: .94rem; }
.alt-alt { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  padding-top: 22px; font-size: .86rem; color: #8E857C; }

/* ---------- 12. Yüzen iletişim ---------- */
.yuzen { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.yuzen a {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #FFFFFF; box-shadow: var(--golge-m); font-size: 1.3rem; transition: transform .15s;
}
.yuzen a:hover { transform: scale(1.07); color: #FFFFFF; }
.yuzen .wa { background: var(--whatsapp); }
.yuzen .tel { background: var(--ana); }

/* ---------- 13. Yardımcılar ---------- */
.gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ana); color: #fff; padding: 10px 18px; border-radius: var(--r-s); transition: top .2s; }
.atla:focus { top: 12px; color: #fff; }

/* ---------- 14. Duyarlılık ---------- */
@media (max-width: 980px) {
  .kahraman-ic { grid-template-columns: 1fr; }
  .kahraman-gorsel { order: -1; max-width: 420px; }
  .kahraman-gorsel img { aspect-ratio: 4 / 3.4; border-radius: var(--r-l); }
  .cta-kutu { grid-template-columns: 1fr; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
}
/* 980px altinda logo + 6 menu ogesi + CTA yan yana sigmiyordu (olcum: 889px
   ekranda 894px genislik). CTA gizlenir; yuzen butonlar ve sayfa ici CTA'lar
   ayni isi zaten goruyor. */
@media (max-width: 980px) {
  .ust-eylem .btn { display: none; }
  .menu a { padding: 9px 11px; font-size: .94rem; }
  .ust-ic { gap: 12px; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .menu { display: none; }
  /*
   * Menu dugmesi sag kenara YAPISIYOR.
   *
   * Otomatik bosluk yanlis ogedeydi: margin-left:auto .menu-dugme'ye
   * verilmisti, ama o .ust-eylem'in ICINDE ve .ust-eylem flex:none oldugu
   * icin tam icerigi kadar (44px) genisliyor — yutulacak bos alan yok.
   * Bosluk, baslik kabinin dogrudan cocugu olan .ust-eylem'de olmali.
   *
   * Masaustunde bu sorun gorunmuyordu: orada .menu akis icinde ve kendi
   * margin-left:auto'suyla bosluğu yutup .ust-eylem'i saga itiyor. Mobilde
   * .menu display:none oldugu icin o denge kayboluyor ve dugme markanin
   * dibine dusuyordu (olculdu: sag kenara 68px uzakta).
   *
   * Duzeltme bu media sorgusunun icinde kaliyor; masaustunde .ust-eylem'e
   * ikinci bir otomatik bosluk eklenirse bos alan paylasilir ve ortadaki
   * menu sola kayardi.
   */
  .ust-eylem { margin-left: auto; }
  .menu-dugme { display: grid; place-items: center; }
  .ust-eylem .btn { display: none; }
  .menu.acik {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: var(--nav-y);
    background: var(--yuzey); border-bottom: 1px solid var(--cizgi); padding: 12px 22px 18px; gap: 2px;
    box-shadow: var(--golge-m);
  }
  .menu.acik a { padding: 12px 14px; }
  .alt-izgara { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 15. Form alanları ---------- */
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: .88rem; font-weight: 600; color: var(--murekkep); margin-bottom: 6px; }
.alan input, .alan textarea, .alan select {
  width: 100%; font-family: var(--f-govde); font-size: 1rem; color: var(--murekkep);
  background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.alan input:focus, .alan textarea:focus {
  outline: none; border-color: var(--ana); box-shadow: 0 0 0 4px var(--ana-acik);
}
.alan textarea { resize: vertical; min-height: 96px; }
.form-bildirim { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-s); font-size: .95rem; }
.form-bildirim.basarili { background: var(--ana-acik); color: var(--ana-koyu); border: 1px solid var(--ana); }
.form-bildirim.hatali { background: #FBEAE5; color: #8C3A22; border: 1px solid #E0A28C; }

/* ---------- 16. Randevu çekmecesi ---------- */
.randevu-kutu {
  position: fixed; inset: 0; z-index: 200; background: rgba(43, 39, 36, .55);
  display: grid; place-items: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.randevu-kutu[hidden] { display: none; }
.randevu-ic {
  position: relative; background: var(--kagit); border-radius: var(--r-l);
  padding: 32px 30px; width: min(460px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--golge-m);
}
.randevu-ic h3 { margin-bottom: .25em; }
.randevu-kapat {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 1.8rem; line-height: 1; color: var(--solgun); cursor: pointer; padding: 4px 8px;
}
.randevu-kapat:hover { color: var(--murekkep); }

/* ---------- 17. Sayfa başlığı bandı (iç sayfalar) ---------- */
.sayfa-basi {
  background: var(--kagit-2); border-bottom: 1px solid var(--cizgi);
  padding: clamp(38px, 5vw, 64px) 0;
}
.kirinti { font-size: .88rem; color: var(--solgun); margin-bottom: 12px; }
.kirinti a { color: var(--solgun); }
.kirinti a:hover { color: var(--ana); }
.sayfa-basi h1 { margin-bottom: .3em; }
.sayfa-basi p { max-width: 62ch; color: var(--murekkep-2); }

/* ---------- 18. Yazı içeriği (blog / hakkımda) ---------- */
.yazi { max-width: 70ch; }
.yazi h2 { margin-top: 1.6em; }
.yazi h3 { margin-top: 1.4em; }
.yazi img { border-radius: var(--r-m); margin: 1.4em 0; }
.yazi ul, .yazi ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.yazi li { margin-bottom: .45em; }
.yazi blockquote {
  margin: 1.5em 0; padding: 18px 24px; border-left: 3px solid var(--ana);
  background: var(--ana-acik); border-radius: 0 var(--r-m) var(--r-m) 0;
  font-family: var(--f-baslik); font-size: 1.08rem; color: var(--murekkep);
}

/* --- Profil duzeni (hakkimda) ------------------------------------------- */
.profil-izgara { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.profil-yan { position: sticky; top: calc(var(--nav-y) + 20px); }
.profil-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: 22px; box-shadow: var(--golge-s);
}
.profil-kart img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--r-m); margin-bottom: 18px; }
.profil-kart h2 { font-size: 1.3rem; margin-bottom: 2px; }
.profil-unvan { font-size: .88rem; color: var(--solgun); margin-bottom: 18px; }
.bilgi-liste { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; }
.bilgi-liste li { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.bilgi-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.bilgi-liste b { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--solgun); font-weight: 600; }
.bilgi-liste span, .bilgi-liste a { font-size: .95rem; color: var(--murekkep-2); overflow-wrap: anywhere; }
.bilgi-liste a:hover { color: var(--ana); }

/* Uzmanlik / egitim listeleri: duz madde yerine onay isaretli satirlar */
.yazi ul.onayli { list-style: none; padding-left: 0; display: grid; gap: 2px; }
.yazi ul.onayli li { position: relative; padding: 7px 0 7px 30px; margin-bottom: 0; border-bottom: 1px solid var(--cizgi); }
.yazi ul.onayli li:last-child { border-bottom: none; }
.yazi ul.onayli li::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ana);
}

@media (max-width: 900px) {
  .profil-izgara { grid-template-columns: 1fr; }
  .profil-yan { position: static; max-width: 420px; }
}

/* Hakkimda govdesi panelden gelen HTML olabilir; oradaki duz listeler de
   ayni gorunumu alsin diye kapsayiciya gore de bicimlendiriyoruz. */
.yazi--profil ul { list-style: none; padding-left: 0; display: grid; gap: 2px; }
.yazi--profil ul li { position: relative; padding: 7px 0 7px 30px; margin-bottom: 0; border-bottom: 1px solid var(--cizgi); }
.yazi--profil ul li:last-child { border-bottom: none; }
.yazi--profil ul li::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ana);
}

/* --- Iletisim sayfasi ---------------------------------------------------- */
.iletisim-izgara { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px, 3.5vw, 44px); align-items: start; }
.form-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: clamp(24px, 3.4vw, 38px); box-shadow: var(--golge-s); }
.form-kutu h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: .3em; }
.form-not { color: var(--solgun); font-size: .93rem; margin-bottom: 24px; }
.iletisim-yan { display: grid; gap: 16px; }
.iletisim-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-m); padding: 24px; }
.iletisim-ikon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-s);
  background: var(--ana-acik); font-size: 1.15rem; margin-bottom: 14px; }
.iletisim-kart h3 { font-size: 1.08rem; margin-bottom: .35em; }
.iletisim-kart p { font-size: .96rem; color: var(--murekkep-2); margin-bottom: 0; }
.harita-kutu { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--cizgi); box-shadow: var(--golge-s); }
.harita-kutu iframe { display: block; width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }

/* Bal kupu: ekranda gorunmez ama ekran okuyucuya da yol acmayacak sekilde */
.balkupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .iletisim-izgara { grid-template-columns: 1fr; }
}

/* --- Blog ---------------------------------------------------------------- */
/*
 * Blog karti.
 *
 * Onceki halde her kart kendi metni kadar uzuyordu: uc kelimelik bir
 * baslikla on kelimelik bir baslik yan yana gelince "Yazinin devami"
 * baglantisi farkli yuksekliklere dusuyor, satir dagilmis gorunuyordu.
 * Baslik iki, ozet uc satirla sinirlandi; kartlarin ic ritmi artik ayni.
 *
 * Dinginken de hafif bir golge var. Onceden yalnizca cerceve vardi,
 * kartlar duz kutu gibi duruyor ve uzerine gelince aniden yukseliyordu;
 * simdi zaten kart gibi duruyorlar, hover bir kademe one aliyor.
 *
 * NOT: h2'deki overflow:hidden, karti bastan asagi tiklanabilir yapan
 * a::after katmanini KIRPMIYOR — o katmanin kapsayici blogu .yazi-kart
 * (position:relative), h2 degil. Olculdu: kartin hem ustunde hem altinda
 * elementFromPoint hala baglantiyi buluyor.
 */
.yazi-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--golge-s);
  transition: transform .18s, box-shadow .18s, border-color .18s; }
.yazi-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-m); border-color: var(--cizgi-koyu); }

.yazi-kart-gorsel { display: block; overflow: hidden; background: var(--kagit-2);
  border-bottom: 1px solid var(--cizgi); }
.yazi-kart-gorsel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .4s; }
.yazi-kart:hover .yazi-kart-gorsel img { transform: scale(1.04); }

.yazi-kart-govde { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

/* Tarih kucuk bir etiket: baslikla yarismasin ama okunakli kalsin. */
.yazi-kart-tarih { font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--solgun); }

.yazi-kart h2, .yazi-kart h3 { font-size: 1.08rem; margin: 0; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yazi-kart h2 a, .yazi-kart h3 a { color: var(--murekkep); }
.yazi-kart h2 a:hover, .yazi-kart h3 a:hover { color: var(--ana); }

/* flex:1 ozeti buyutuyor, boylece baglanti her kartta en altta hizalaniyor. */
.yazi-kart p { font-size: .92rem; line-height: 1.6; color: var(--murekkep-2); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Ok isaretlemeden CSS'e alindi ki uzerine gelince kayabilsin. */
.yazi-kart .kart-link { margin-top: 4px; color: var(--ana); font-size: .88rem; font-weight: 600; }
.yazi-kart .kart-link::after { content: "→"; transition: transform .18s; }
.yazi-kart:hover .kart-link::after { transform: translateX(4px); }

.sayfalama { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--cizgi); }
.sayfalama-bilgi { font-size: .92rem; color: var(--solgun); }

.bos-durum { text-align: center; max-width: 46ch; margin: 0 auto; padding: clamp(36px, 6vw, 72px) 0; }
.bos-durum h1, .bos-durum h2 { margin-bottom: .4em; }
.bos-durum p { color: var(--murekkep-2); margin-bottom: 24px; }

/* Yazi sayfasi */
.makale-ustbilgi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: .92rem; color: var(--solgun); margin-bottom: 0; }
.makale-gorsel { margin: 0 0 clamp(24px, 3vw, 40px); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--cizgi); }
/*
 * Yazi gorseli ekranin yarisindan fazlasini yemesin.
 *
 * 520px sabit sinir, 900 piksel yuksekligindeki bir ekranda gorselin
 * ekranin %58'ini kaplamasi demekti (olculdu); yazinin kendisi katlamanin
 * altinda kaliyor, sayfa "kocaman gorsel" gibi duruyordu. Sinir artik
 * ekran yuksekligine de bagli: buyuk ekranda 420px'i asmiyor, kucuk
 * ekranda %46'nin altinda kaliyor.
 */
.makale-gorsel img { width: 100%; height: auto; max-height: min(420px, 46vh);
  object-fit: cover; display: block; }
.makale-alt { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--cizgi); }
.makale-etiketler { display: flex; gap: 8px; flex-wrap: wrap; }
.makale-paylas { display: flex; gap: 14px; align-items: center; font-size: .92rem; color: var(--solgun); }
.makale-paylas a { color: var(--ana); font-weight: 600; }

/* Yorumlar */
.yorum-alani { max-width: 820px; }
.yorum-listesi { display: grid; gap: 14px; margin-top: 20px; }
.yorum { display: flex; gap: 14px; background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 20px; }
.yorum > div { flex: 1; }
.yorum p { font-size: .96rem; color: var(--murekkep-2); margin-bottom: 0; }
.yorum-basi { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.yorum-basi b { color: var(--murekkep); font-size: .98rem; }
.yorum-basi time { font-size: .84rem; color: var(--solgun); }
.yorum-yanit { margin-top: 14px; padding: 14px 16px; background: var(--ana-acik); border-radius: var(--r-s); }
.yorum-yanit b { display: block; color: var(--ana-koyu); font-size: .9rem; margin-bottom: 4px; }
.yorum-yanit p { color: var(--ana-koyu); font-size: .94rem; }

@media (max-width: 560px) {
  .sayfalama { flex-direction: column; }
  .makale-alt { flex-direction: column; align-items: flex-start; }
}

/* --- Konu sayfalari ------------------------------------------------------ */
.konu-izgara { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.konu-yan { position: sticky; top: calc(var(--nav-y) + 20px); display: grid; gap: 16px; }
.konu-diger { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-m); padding: 22px; }
.konu-diger h3 { font-size: 1.02rem; margin-bottom: 12px; }
.konu-diger ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.konu-diger li { border-bottom: 1px solid var(--cizgi); }
.konu-diger li:last-child { border-bottom: none; }
.konu-diger a { display: flex; gap: 10px; align-items: center; padding: 10px 0; font-size: .95rem; color: var(--murekkep-2); }
.konu-diger a:hover { color: var(--ana); }
.konu-kart { text-decoration: none; }
.konu-kart h2 { font-size: 1.16rem; margin-bottom: .4em; color: var(--murekkep); }
.konu-kart:hover h2 { color: var(--ana); }
.uyari-notu { max-width: 72ch; margin: 0 auto; text-align: center; font-size: .92rem;
  color: var(--solgun); background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 18px 22px; }

@media (max-width: 900px) {
  .konu-izgara { grid-template-columns: 1fr; }
  .konu-yan { position: static; }
}

/* Blog kartinin tamami tiklanabilir olsun: basliktaki baglanti kartin uzerini
   kapliyor. Boylece kart icinde ic ice baglanti olmadan her yer tiklanir. */
.yazi-kart { position: relative; }
.yazi-kart h2 a::after,
.yazi-kart h3 a::after { content: ""; position: absolute; inset: 0; }
.yazi-kart h2 a, .yazi-kart h3 a { text-decoration: none; }
.yazi-kart:focus-within { outline: 2px solid var(--ana); outline-offset: 3px; }

/* --- Uzman seridi -------------------------------------------------------- */
.uzman-serit { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-l); padding: clamp(22px, 3vw, 34px); box-shadow: var(--golge-s); }
.uzman-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: var(--r-m); display: block; }
.uzman-metin h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .35em; }
.uzman-metin p { color: var(--murekkep-2); font-size: .99rem; max-width: 62ch; margin-bottom: 20px; }
.uzman-baglar { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .uzman-serit { grid-template-columns: 1fr; }
  .uzman-foto { max-width: 220px; }
}

/* --- Kisa cevap blogu ---------------------------------------------------- */
.yazi .kisa-cevap {
  background: var(--ana-acik); border-left: 3px solid var(--ana);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  margin: 0 0 clamp(28px, 3.4vw, 40px);
}
.yazi .kisa-cevap h2 {
  margin: 0 0 .5em; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ana-koyu); font-family: var(--f-govde); font-weight: 600;
}
.yazi .kisa-cevap p { margin: 0; color: var(--murekkep); font-size: 1.02rem; line-height: 1.65; }