/* ==========================================================================
   Cizre Psikoloji — Ana Stil Dosyası
   Psk. Dan. Hasret BİRGİN
   ========================================================================== */

/* --- 1. Değişkenler (renkler, fontlar, ölçüler) ------------------------- */
:root {
  --bordo:        #5d2b37;
  --bordo-acik:   #964452;
  --koyu:         #2b0224;
  --krem:         #eee4d8;
  --krem-acik:    #f7f2ec;
  --altin:        #e0b252;
  --metin:        #767676;
  --metin-koyu:   #313131;
  --beyaz:        #ffffff;
  --cizgi:        #e6ded6;

  --font:         "Exo", Arial, Helvetica, sans-serif;
  --font-alt:     "Montserrat", Arial, sans-serif;

  --genislik:     1400px;
  --header-h:     70px;
  --radius:       10px;
  --golge:        0 4px 20px rgba(43, 2, 36, .07);
  --gecis:        .25s ease;
}

/* --- 2. Sıfırlama ------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  /* Yumuşak kaydırma js/main.js içinde yapılıyor (hızı ayarlanabilsin diye) */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--metin);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--bordo); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--bordo-acik); }

h1, h2, h3, h4, h5 {
  font-family: var(--font);
  color: var(--metin-koyu);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 15px;
}

p { margin: 0 0 15px; }
ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* Klavye ile gezinenler için görünür odak */
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; }

/* --- 3. Yardımcı sınıflar ---------------------------------------------- */
.kapsayici {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.bolum { padding: 80px 0; }
.bolum--krem { background: var(--krem-acik); }

/* Bölüm başlığı: üstte küçük soluk yazı, altta büyük başlık, altında çizgi */
.bolum-baslik { text-align: center; margin-bottom: 50px; }
.bolum-baslik .ust {
  display: block;
  font-size: 14px;
  color: var(--metin);
  letter-spacing: .5px;
  margin-bottom: 5px;
}
.bolum-baslik h2 {
  font-size: 30px;
  color: var(--metin-koyu);
  margin: 0 0 20px;
}
.bolum-baslik .cizgi {
  width: 100%;
  max-width: 1200px;
  height: 1px;
  margin: 0 auto;
  background: var(--cizgi);
  position: relative;
}
.bolum-baslik .cizgi::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  width: 190px;
  height: 3px;
  background: var(--bordo);
}

.gizli-metin {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 4. Üst menü (header) ---------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 2px 12px rgba(43, 2, 36, .07);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}

/* Üç sütun: marka solda, menü tam ortada, sosyal ikonlar sağda.
   Üst çubuk sayfanın tamamına yayılır ki ikonlar sağ kenarda dursun. */
.header .kapsayici {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  max-width: none;
  padding: 0 40px;
}

.marka { display: flex; align-items: center; gap: 14px; justify-self: start; }
.marka__logo img { height: 56px; width: auto; }
.marka__ad {
  font-size: 17px;
  color: var(--metin-koyu);
  font-weight: 400;
  white-space: nowrap;
}
.marka__ad::before {
  content: "|";
  color: var(--cizgi);
  margin-right: 10px;
}
.marka__ad strong { color: var(--bordo); font-weight: 600; }

/* Dar ekranda ünvanın kısa hali gösterilir */
.ad-kisa { display: none; }

.header nav { justify-self: center; }

.menu { display: flex; align-items: center; margin: 0; }
.menu li { position: relative; }

/* Öğeler arasındaki kısa dikey çizgi */
.menu li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: #d3c7bc;
}

.menu a {
  display: block;
  padding: 4px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--metin-koyu);
  line-height: 1.4;
}
/* Üzerine gelince ve bulunulan bölümde marka bordosu */
.menu a:hover,
.menu a.aktif { color: #5d2b37; }

/* Sosyal ikonlar her zaman en sağda, aralarında ince dikey çizgi */
.sosyal { display: flex; align-items: center; justify-self: end; }
.sosyal a { position: relative; display: flex; padding: 0 15px; opacity: .85; transition: opacity var(--gecis); }
.sosyal a:last-child { padding-right: 0; }

/* İki ikon arasındaki kısa dikey çizgi */
.sosyal a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: #d3c7bc;
}

.sosyal a:hover { opacity: 1; }
.sosyal img { width: 22px; height: 22px; }

/* Mobil menü düğmesi */
.menu-dugme {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
}
.menu-dugme span {
  display: block;
  height: 2px;
  background: var(--bordo);
  transition: transform var(--gecis), opacity var(--gecis);
}
.menu-dugme.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-dugme.acik span:nth-child(2) { opacity: 0; }
.menu-dugme.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 5. Üst görseller (hero) ------------------------------------------- */
.hero { padding: 20px 0 0; }
.hero img { width: 100%; border-radius: var(--radius); }
.hero__ayrac {
  max-width: var(--genislik);
  margin: 30px auto 0;
  height: 1px;
  background: var(--cizgi);
}
.tanitim { padding: 30px 0 60px; }
.tanitim img { width: 100%; border-radius: var(--radius); }

/* --- 6. Hizmet kartları (kaydırmalı) ----------------------------------- */
.kaydirma { position: relative; }

.kartlar {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  /* kaydırma çubuğunu gizle */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kartlar::-webkit-scrollbar { display: none; }

/* Fareyle sürüklenebilir olduğu belli olsun */
.kartlar { cursor: grab; touch-action: pan-y pinch-zoom; }
.kartlar.cekiliyor { cursor: grabbing; }
.kartlar.cekiliyor .kart img { transform: none; }
.kartlar.cekiliyor,
.kartlar.cekiliyor * { user-select: none; }

/* Tarayıcının kendi görsel sürükleme davranışı kapatılır */
.kart img { -webkit-user-drag: none; user-select: none; }

.kart {
  position: relative;
  flex: 0 0 calc(25% - 18px);
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--golge);
  isolation: isolate;
}
.kart img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .6s ease;
}
.kart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(43, 2, 36, .92) 0%, rgba(43, 2, 36, .75) 35%, rgba(43, 2, 36, .05) 70%);
}
.kart:hover img { transform: scale(1.05); }

.kart__ic { padding: 25px; color: rgba(255, 255, 255, .92); }
.kart__no {
  display: inline-block;
  background: var(--krem);
  color: var(--bordo);
  font-size: 14px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.kart__ic h3 {
  color: var(--beyaz);
  font-size: 21px;
  margin-bottom: 12px;
}
.kart__ic p { font-size: 14px; line-height: 1.6; margin: 0; }

/* Sağ / sol okları */
.ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--beyaz);
  box-shadow: var(--golge);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bordo);
  font-size: 20px;
  z-index: 5;
  transition: background var(--gecis), color var(--gecis);
}
.ok:hover { background: var(--bordo); color: var(--beyaz); }
.ok--sol  { left: -21px; }
.ok--sag  { right: -21px; }
.ok[disabled] { opacity: .3; cursor: default; }
.ok[disabled]:hover { background: var(--beyaz); color: var(--bordo); }

/* --- 7. Terapi bölümü --------------------------------------------------- */
.terapi__izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.terapi h2 { font-size: 28px; margin-bottom: 30px; }
.terapi h3 {
  font-size: 22px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cizgi);
}
.terapi h3 strong { color: var(--bordo); font-weight: 600; }
.terapi__metin p { font-size: 14px; line-height: 1.8; }
.terapi__metin p strong { color: var(--metin-koyu); font-weight: 600; }
.terapi__gorsel { margin-top: 30px; border-radius: var(--radius); overflow: hidden; }

/* --- 8. Akordeon (açılır kapanır başlıklar) ---------------------------- */
.akordeon { border-top: 1px solid var(--cizgi); }
.akordeon__oge { border-bottom: 1px solid var(--cizgi); }

.akordeon__baslik {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 5px;
  text-align: left;
  font-size: 16px;
  color: var(--metin-koyu);
  transition: color var(--gecis);
}
.akordeon__baslik:hover { color: var(--bordo); }
.akordeon__baslik .no {
  font-size: 30px;
  color: var(--bordo);
  font-weight: 400;
  line-height: 1;
  min-width: 26px;
}
.akordeon__baslik .yazi { flex: 1; }
/* İnce chevron ok — metin karakteri yerine kenarlıkla çizilir */
.akordeon__baslik .isaret {
  font-size: 0;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 1.6px solid #9a9a9a;
  border-bottom: 1.6px solid #9a9a9a;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--gecis);
}
.akordeon__oge.acik .isaret { transform: rotate(-135deg) translate(-3px, -3px); }

.akordeon__govde {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.akordeon__oge.acik .akordeon__govde { grid-template-rows: 1fr; }
.akordeon__govde > div { overflow: hidden; }
.akordeon__govde p,
.akordeon__govde ol { font-size: 14px; line-height: 1.8; padding-inline: 5px; }
.akordeon__govde > div > *:first-child { padding-top: 5px; }
.akordeon__govde > div > *:last-child  { padding-bottom: 20px; margin-bottom: 0; }
.akordeon__govde ol { padding-left: 22px; list-style: decimal; }
.akordeon__govde ol li { margin-bottom: 8px; }
.akordeon__govde ol li strong { color: var(--metin-koyu); font-weight: 600; }

/* --- SSS bölümü ---------------------------------------------------------
   Dış açık gri kart, içinde beyaz soru kutusu, arkada soluk "SSS" yazısı. */
.sss { padding: 40px 0 100px; }

.sss__kart {
  position: relative;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 120px 50px 75px;  /* üstte filigranın sığması için boşluk */
  overflow: hidden;
}

/* Filigran, başlığın tam arkasında ortalanır */
.sss__filigran {
  position: absolute;
  top: 120px;                               /* başlık satırının ortasına denk gelir */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 170px;
  font-weight: 600;
  color: rgba(93, 43, 55, .045);
  line-height: 1;
  letter-spacing: 8px;
  pointer-events: none;
  user-select: none;
}

.sss__baslik { position: relative; text-align: center; margin-bottom: 40px; }
.sss__baslik h2 {
  font-size: 24px;
  font-weight: 400;
  color: #242424;
  margin: 0 0 6px;
}
.sss__baslik p { font-size: 14px; color: var(--metin); margin: 0; }

.sss__ic {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: var(--beyaz);
  border-radius: 10px;
  padding: 0 18px;
}

/* SSS akordeonu: üst çizgi yok, satırlar arasında ince ayırıcı */
.sss .akordeon { border-top: 0; }
.sss .akordeon__oge { border-bottom: 1px solid rgba(0, 0, 0, .106); }
.sss .akordeon__oge:last-child { border-bottom: 0; }
.sss .akordeon__baslik {
  padding: 21px 0;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--metin);
}
.sss .akordeon__baslik:hover { color: var(--bordo); }
.sss .akordeon__govde p,
.sss .akordeon__govde ol { padding-inline: 0; font-size: 15.5px; }

/* --- 9. Psikoblog ------------------------------------------------------- */
.blog { text-align: center; }
.blog__logo { height: 95px; width: auto; margin: 0 auto 26px; }
.blog__slogan {
  font-size: 30px;
  color: var(--metin-koyu);
  margin-bottom: 50px;
}

.blog__izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;
}

.yazi-kart {
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--beyaz);
  transition: box-shadow var(--gecis), transform var(--gecis);
  display: flex;
  flex-direction: column;
}
.yazi-kart:hover { box-shadow: var(--golge); transform: translateY(-4px); }

.yazi-kart__gorsel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }

.yazi-kart__tarih {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--beyaz);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  line-height: 1.1;
  box-shadow: var(--golge);
}
.yazi-kart__tarih .gun { display: block; font-size: 17px; color: var(--metin-koyu); font-weight: 500; }
.yazi-kart__tarih .ay  { display: block; font-size: 11px; color: var(--metin); text-transform: uppercase; }

.yazi-kart__ic { padding: 26px 24px 28px; text-align: center; }
.yazi-kart__ic h3 { font-size: 21px; margin-bottom: 12px; line-height: 1.35; }
.yazi-kart__ic h3 a { color: var(--metin-koyu); }
.yazi-kart__ic h3 a:hover { color: var(--bordo); }
.yazi-kart__ic p { font-size: 15px; line-height: 1.65; margin: 0; }

.yazi-kart__tarih { padding: 7px 11px; }
.yazi-kart__tarih .gun { font-size: 18px; }
.yazi-kart__tarih .ay  { font-size: 11.5px; }

/* --- 10. Alt bilgi (footer) -------------------------------------------- */
.footer { border-top: 1px solid var(--cizgi); padding: 55px 0 0; }
.footer__izgara {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, auto);
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}
.footer__marka { display: flex; align-items: center; gap: 16px; }
.footer__marka img { height: 60px; width: auto; }
.footer__marka span {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  color: var(--metin-koyu);
  line-height: 1.4;
}

/* Logo ile ad arasında dikey ayırıcı */
.footer__marka span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: #d3c7bc;
}

.iletisim-oge { position: relative; display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.iletisim-oge img { width: 30px; height: 30px; flex-shrink: 0; }

/* İletişim bilgileri arasında kısa dikey ayırıcı */
.iletisim-oge + .iletisim-oge::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: #d3c7bc;
}
.iletisim-oge a, .iletisim-oge span {
  color: var(--metin-koyu);
  font-weight: 500;
  white-space: nowrap;      /* adres tek satırda kalsın */
}
.iletisim-oge a:hover { color: var(--bordo); }
.footer__marka span { font-weight: 500; }

/* Adres satırı: normalde ortalı durur, yalnızca altına çalışma saati
   eklendiğinde üstten hizalanır. */
.iletisim-oge--adres { align-items: center; }
.iletisim-oge--adres:has(.calisma-saati) { align-items: flex-start; }
.iletisim-oge--adres > span { white-space: normal; line-height: 1.45; }

/* Çalışma saati — adresin hemen altında, daha küçük ve soluk */
.calisma-saati {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--metin);
  white-space: nowrap;
}
.calisma-saati img { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }

.footer__alt {
  margin-top: 45px;
  padding: 20px 0;
  border-top: 1px solid var(--cizgi);
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 13px;
}
.footer__telif { display: flex; align-items: center; gap: 10px; }
.footer__telif img { height: 34px; width: auto; }
.footer__yasal { display: flex; align-items: center; gap: 16px; }
.footer__yasal a {
  position: relative;
  color: var(--metin-koyu);
  font-size: 13px;
  font-weight: 500;
}
.footer__yasal a:hover { color: var(--bordo); }

/* Bağlantılar arasında kısa dikey çizgi */
.footer__yasal a + a::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: #d3c7bc;
}

/* Yukarı çık düğmesi */
.yukari {
  position: fixed;
  right: 25px; bottom: 25px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bordo);
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--golge);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis);
  z-index: 90;
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari:hover { background: var(--koyu); color: var(--beyaz); }

/* İnce yukarı chevron (dolu üçgen değil) */
.yukari { font-size: 0; }
.yukari::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.8px solid currentColor;
  border-left: 1.8px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}

/* --- 11. Blog yazı sayfası --------------------------------------------- */
.yazi-sayfa { padding: 45px 0 80px; }
.yazi-sayfa__ic { max-width: 820px; margin: 0 auto; }

/* Psikoblog başlığı ortada ve büyük durur */
.yazi-sayfa__logo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto 30px;
}

/* Logonun altındaki ayırıcı — ana sayfadaki bölüm çizgisiyle aynı */
.yazi-cizgi {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--cizgi);
  margin: 0 auto 34px;
}
.yazi-cizgi::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 190px;
  height: 3px;
  background: var(--bordo);
}

.yazi-sayfa__kapak {
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 32px;
}
.yazi-sayfa__kapak img { width: 100%; display: block; }

/* Geniş ekranda kapak görseli sağda durur, yazı yanından akar */
@media (min-width: 900px) {
  .yazi-sayfa__ic { max-width: 1160px; }

  .yazi-sayfa__kapak {
    float: right;
    width: 48%;
    margin: 6px 0 30px 45px;
  }

  /* Bu bölümler her zaman görselin altına iner */
  .yazi-sayfa .imza,
  .yazi-sayfa .paylas,
  .yazi-sayfa .yorumlar,
  .yazi-sayfa .geri-don,
  .yazi-sayfa .yazi-gorsel { clear: both; }

  .yazi-sayfa h1 { font-size: 38px; line-height: 1.25; }
}

.yazi-sayfa h1 { font-size: 32px; color: var(--metin-koyu); margin: 0 0 22px; }

/* Tarih ve yazar satırı kapak görselinin üstünde durur */
.yazi-sayfa__meta {
  font-size: 13.5px;
  color: var(--metin);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 30px;
}
.yazi-sayfa p { font-size: 16px; line-height: 1.85; }
.yazi-sayfa h2 { font-size: 24px; color: var(--bordo); font-weight: 600; margin: 35px 0 12px; }

/* Yazı içindeki ek görseller */
.yazi-sayfa__ic .yazi-sayfa__kapak + h1 { margin-top: 0; }
.yazi-sayfa .yazi-gorsel { border-radius: var(--radius); overflow: hidden; margin: 30px 0; }

.alinti {
  border-left: 4px solid var(--bordo);
  padding: 4px 0 4px 20px;
  margin: 25px 0;
}
.alinti p:last-child { margin-bottom: 0; }

.imza {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cizgi);
  font-size: 15px;
  color: var(--bordo);
  font-weight: 500;
}

.geri-don {
  display: inline-block;
  margin-top: 35px;
  font-size: 14px;
  color: var(--bordo);
}
.geri-don:hover { text-decoration: underline; }

/* --- Paylaşım düğmeleri ------------------------------------------------- */
.paylas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 10px;
  flex-wrap: wrap;
}
.paylas__etiket { font-size: 14px; color: var(--metin); margin-right: 4px; }

.paylas a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beyaz);
  transition: transform var(--gecis), opacity var(--gecis);
}
.paylas a:hover { transform: translateY(-2px); opacity: .88; color: var(--beyaz); }
.paylas a svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.paylas .pay-facebook { background: #1877f2; }
.paylas .pay-x        { background: #000000; }
.paylas .pay-whatsapp { background: #25d366; }
.paylas .pay-linkedin { background: #0a66c2; }
.paylas .pay-telegram { background: #229ed9; }

/* --- 11a. Dergi düzeni (yazı sayfası ikinci tasarımı) ------------------
   Solda kaydırmada takılı kalan başlık sütunu, sağda akan metin.        */
.dg { padding: 50px 0 80px; }
.dg__kapsayici { max-width: 1240px; margin: 0 auto; padding: 0 30px; }

.dg__marka {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 45px;
}

.dg__izgara {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}

/* Sol sütun */
.dg__yan { position: sticky; top: 100px; }

.dg__etiket {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bordo);
  border: 1px solid var(--krem);
  background: #faf7f4;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.dg__yan h1 {
  font-size: 32px;
  line-height: 1.25;
  color: var(--metin-koyu);
  margin: 0 0 20px;
  font-weight: 500;
}

.dg__cizgi { width: 48px; height: 3px; background: var(--bordo); margin-bottom: 20px; }

.dg__bilgi { font-size: 13.5px; color: var(--metin); line-height: 1.9; margin-bottom: 26px; }
.dg__bilgi strong { display: block; color: var(--metin-koyu); font-weight: 600; font-size: 14.5px; }

.dg__paylas { display: flex; flex-direction: column; gap: 9px; }
.dg__paylas > span {
  font-size: 12px;
  color: var(--metin);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dg__paylas a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  color: var(--metin-koyu);
  padding: 7px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.dg__paylas a:hover { background: #faf7f4; border-color: var(--krem); color: var(--bordo); }
.dg__paylas svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

/* Sağ sütun */
.dg__govde { min-width: 0; }

.dg__kapak { border-radius: 12px; overflow: hidden; margin-bottom: 34px; }
.dg__kapak img { width: 100%; display: block; }

.dg__govde p { font-size: 17px; line-height: 1.85; color: #3d3d3d; margin: 0 0 22px; }
.dg__govde h2 { font-size: 24px; color: var(--bordo); font-weight: 600; margin: 38px 0 14px; }

.dg__govde .alinti {
  border-left: 4px solid var(--bordo);
  background: #faf7f4;
  border-radius: 0 10px 10px 0;
  padding: 24px 26px 6px;
  margin: 32px 0;
}
.dg__govde .alinti p { font-size: 16.5px; }

.dg__govde .yazi-gorsel { border-radius: 10px; overflow: hidden; margin: 30px 0; }

.dg__imza {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--cizgi);
  color: var(--bordo);
  font-weight: 500;
  font-size: 15.5px;
}

@media (max-width: 980px) {
  .dg { padding: 35px 0 60px; }
  .dg__izgara { grid-template-columns: 1fr; gap: 30px; }
  .dg__yan { position: static; }
  .dg__yan h1 { font-size: 27px; }
  .dg__paylas { flex-direction: row; flex-wrap: wrap; }
  .dg__paylas > span { width: 100%; margin-bottom: 0; }
  .dg__govde p { font-size: 16px; }
  .dg__marka { max-width: 240px; margin-bottom: 32px; }
  .dg__kapsayici { padding: 0 18px; }
}

/* --- 11b. Yorumlar ------------------------------------------------------ */
.yorumlar {
  margin-top: 55px;
  padding-top: 40px;
  border-top: 1px solid var(--cizgi);
}
.yorumlar h2 {
  font-size: 22px;
  color: var(--metin-koyu);
  font-weight: 500;
  margin-bottom: 26px;
}

.yorum {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cizgi);
}
.yorum:last-of-type { border-bottom: 0; }

.yorum__harf {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--krem);
  color: var(--bordo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}
.yorum__govde { flex: 1; min-width: 0; }
.yorum__ust { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.yorum__ad { font-weight: 600; color: var(--metin-koyu); font-size: 15px; }
.yorum__tarih { font-size: 12.5px; color: var(--metin); }
.yorum__metin { font-size: 15px; line-height: 1.7; margin: 0; white-space: pre-line; }

/* Yazarın cevabı */
.yorum--cevap {
  margin-left: 60px;
  background: var(--krem-acik);
  border-radius: var(--radius);
  padding: 18px 20px;
  border-bottom: 0;
}
.yorum--cevap .yorum__harf { background: var(--bordo); color: var(--beyaz); }

.yorum-yok { color: var(--metin); font-size: 15px; margin-bottom: 10px; }

/* --- Yorum formu -------------------------------------------------------- */
.yorum-form { margin-top: 45px; }
.yorum-form h3 {
  font-size: 20px;
  color: var(--metin-koyu);
  font-weight: 500;
  margin-bottom: 8px;
}
.yorum-form__not { font-size: 13.5px; color: var(--metin); margin-bottom: 22px; }

.yorum-form__satir { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Dar ekranda alanlar alt alta iner */
@media (max-width: 640px) {
  .yorum-form__satir { grid-template-columns: 1fr; }
}
.yorum-form__alan { margin-bottom: 16px; }
.yorum-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--metin-koyu);
  margin-bottom: 6px;
}
.yorum-form input[type=text],
.yorum-form input[type=email],
.yorum-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--metin-koyu);
  background: var(--beyaz);
  box-sizing: border-box;
}
.yorum-form textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
.yorum-form input:focus, .yorum-form textarea:focus {
  outline: none;
  border-color: var(--bordo);
  box-shadow: 0 0 0 3px rgba(93, 43, 55, .1);
}

/* Ekran okuyucular dışında görünmeyen tuzak alan (spam için) */
.yorum-form__tuzak { position: absolute; left: -9999px; opacity: 0; height: 0; }

.yorum-form__dugme {
  background: var(--bordo);
  color: var(--beyaz);
  border: 0;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--gecis);
}
.yorum-form__dugme:hover { background: var(--koyu); }
.yorum-form__dugme[disabled] { opacity: .6; cursor: default; }

.yorum-form__sonuc {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.yorum-form__sonuc.gorunur { display: block; }
.yorum-form__sonuc.basarili { background: #eaf6f0; border: 1px solid #b9dfcd; color: #2e7d5b; }
.yorum-form__sonuc.hata     { background: #fbeceb; border: 1px solid #f0c5c1; color: #b3372f; }

/* --- 12. Basit metin sayfaları (KVKK, gizlilik) ------------------------ */
.metin-sayfa { padding: 60px 0 80px; }
.metin-sayfa__ic { max-width: 820px; margin: 0 auto; }
.metin-sayfa h1 { font-size: 32px; margin-bottom: 25px; }
.metin-sayfa h2 { font-size: 20px; color: var(--bordo); margin: 30px 0 10px; font-weight: 600; }
.metin-sayfa p, .metin-sayfa li { font-size: 15px; line-height: 1.8; }
.metin-sayfa ul { list-style: disc; padding-left: 22px; margin-bottom: 15px; }
.metin-sayfa li { margin-bottom: 6px; }

/* --- 13. Ekran genişliğine göre düzen ---------------------------------- */
@media (max-width: 1200px) {
  .kart { flex: 0 0 calc(33.333% - 16px); }
  .marka__ad { font-size: 15px; }
  .menu a { padding: 6px 11px; font-size: 14px; }
  .footer__izgara { grid-template-columns: 1fr 1fr 1fr; row-gap: 25px; }
}

@media (max-width: 1024px) {
  .terapi__izgara { grid-template-columns: 1fr; gap: 40px; }
  .kart { flex: 0 0 calc(50% - 12px); min-height: 460px; }
  .blog__izgara { grid-template-columns: repeat(2, 1fr); }
  .ok--sol { left: 5px; }
  .ok--sag { right: 5px; }
}

/* --- Mobil üst menü ----------------------------------------------------
   Açılır kapanır hamburger yok. Üst satırda logo, ad ve sosyal ikonlar;
   hemen altındaki ikinci satırda menü bağlantıları yan yana durur.       */
@media (max-width: 900px) {
  .menu-dugme { display: none; }

  .header { --header-h: auto; padding: 10px 0 0; display: block; }

  .header .kapsayici {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "marka  sosyal"
      "menu   menu";
    align-items: center;
    gap: 8px 12px;
    padding: 0 16px;
  }

  .marka  { grid-area: marka; }
  .sosyal { grid-area: sosyal; }

  .header nav {
    grid-area: menu;
    justify-self: stretch;
    border-top: 1px solid var(--cizgi);
    margin-top: 4px;
    /* Çok dar ekranlarda menü yana kaydırılabilir olsun */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header nav::-webkit-scrollbar { display: none; }

  .menu {
    justify-content: center;
    min-width: max-content;
    margin: 0 auto;
  }
  .menu a { padding: 11px 12px; font-size: 13px; white-space: nowrap; }
  .menu li + li::before { height: 13px; }

  .marka__ad { font-size: 13.5px; }
  .marka__ad::before { margin-right: 7px; }
  .marka__logo img { height: 44px; }

  html { scroll-padding-top: 110px; }
}

/* Çok dar ekranlarda ünvan kısalır ama görünmeye devam eder */
@media (max-width: 560px) {
  .ad-uzun { display: none; }
  .ad-kisa { display: inline; }

  .marka__ad { font-size: 12.5px; line-height: 1.3; }
  .marka__ad::before { margin-right: 6px; }
  .marka__logo img { height: 40px; }
  .menu a { padding: 11px 9px; font-size: 12px; }
  .sosyal a { padding: 0 11px; }
}

@media (max-width: 768px) {
  .bolum { padding: 38px 0; }
  .bolum-baslik { margin-bottom: 28px; }
  .bolum-baslik h2 { font-size: 25px; margin-bottom: 14px; }
  /* SSS'e kaydırıldığında altındaki Psikoblog bölümü ekrana girmesin */
  .sss { padding: 30px 0 120px; }
  .blog { padding-top: 55px; }
  .sss__kart { padding: 110px 32px 65px; }
  .sss__ic { padding: 0 18px; }
  .sss__filigran { font-size: 135px; top: 107px; letter-spacing: 4px; }
  .sss__baslik { margin-bottom: 34px; }
  .sss__baslik h2 { font-size: 22px; }
  .sss__baslik p { font-size: 13.5px; }
  .sss .akordeon__baslik { font-size: 16px; padding: 18px 0; line-height: 1.45; }
  .sss .akordeon__govde p,
  .sss .akordeon__govde ol { font-size: 14.5px; }
  .blog__slogan { font-size: 21px; }
  .blog__izgara { grid-template-columns: 1fr; }
  .footer__izgara { grid-template-columns: 1fr; }
  .footer__alt { flex-direction: column; align-items: flex-start; gap: 15px; }
  .yazi-sayfa h1 { font-size: 27px; }
  .terapi h2 { font-size: 24px; }

  /* Mobilde tek kart görünür, dikey durur ve ekranı aşmaz */
  .kart {
    flex: 0 0 100%;
    min-height: 0;
    height: min(65vh, 132vw);
  }
  .kart__ic { padding: 22px 20px; }
  .kart__ic h3 { font-size: 20px; margin-bottom: 10px; }
  .kart__ic p { font-size: 13px; line-height: 1.55; }
  .kart__no { font-size: 13px; margin-bottom: 10px; }
}

@media (max-width: 480px) {
  .kapsayici { padding: 0 15px; }
  .marka__logo img { height: 36px; }
  .sss__filigran { font-size: 75px; }
}

/* --- 14. Yazdırma ------------------------------------------------------ */
@media print {
  .header, .footer, .yukari, .paylas, .ok { display: none; }
  body { color: #000; }
}