/* ===========================================================================
   makale.css — konu rehberleri ve SSS sayfaları
   style.css'in üstüne biner: aynı jetonlar, farklı düzen.
   Bu sayfalarda canvas sahnesi YOK; hız ve okunabilirlik önceliklidir.
   =========================================================================== */

.makale-govde { padding-top: 0; }

/* -------------------------------------------------------------- 1. ZEMİN */
.makale-zemin {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90vw 60vh at 78% -12%, rgba(216,180,95,.10), transparent 60%),
    radial-gradient(70vw 50vh at 8% 108%, rgba(216,180,95,.06), transparent 60%);
}

/* --------------------------------------------------------- 2. SAYFA BAŞI */
.makale-basi {
  position: relative; z-index: 10;
  padding: clamp(120px, 17vh, 180px) clamp(18px, 4vw, 46px) clamp(34px, 5vw, 54px);
  border-bottom: 1px solid var(--cizgi);
}
.kirinti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 26px; padding: 0; list-style: none;
  font-size: 12.5px; color: var(--sis-2);
}
.kirinti li { display: flex; align-items: center; gap: 8px; }
.kirinti li + li::before { content: "/"; color: rgba(139,163,150,.4); }
.kirinti a { color: var(--sis); transition: color .3s; }
.kirinti a:hover { color: var(--aksan); }

.makale-basi h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 6.2vw, 62px);
  line-height: 1.06; letter-spacing: -.028em;
  margin: 0 0 22px; max-width: 20ch;
}
.makale-ozet {
  font-size: clamp(16px, 2vw, 19.5px);
  line-height: 1.66; color: var(--ink-2);
  max-width: 66ch; margin: 0;
}
.makale-ozet b { color: var(--ink); font-weight: 600; }

.makale-kimlik {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 28px;
  font-size: 12.5px; color: var(--sis-2);
}
.makale-kimlik img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; object-position: center 10%;
  border: 1px solid var(--cizgi-kuv);
}
.makale-kimlik b { color: var(--ink-2); font-weight: 600; }
.makale-kimlik a { color: var(--aksan); }

/* ------------------------------------------------------------- 3. DÜZEN */
.makale-duzen {
  position: relative; z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  gap: clamp(30px, 5vw, 66px);
  max-width: var(--kap); margin: 0 auto;
  padding: clamp(44px, 6vw, 70px) clamp(18px, 4vw, 46px) 40px;
  align-items: start;
}
/* Izgara öğelerinin varsayılan min-width:auto değeri, içindeki geniş tablonun
   min-content genişliğini sütuna dayatıyor ve sayfayı yatayda taşırıyordu.
   min-width:0 ile sütun daralabilir; tablo kendi kabında kayar. */
.makale-duzen > * { min-width: 0; }
@media (max-width: 940px) { .makale-duzen { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- 4. İÇİNDEKİLER */
.icindekiler {
  position: sticky; top: 96px;
  padding: 22px 20px;
  border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kutu);
}
.icindekiler h2 {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sis-2); margin: 0 0 14px; font-weight: 500; font-family: var(--sans);
}
.icindekiler ol { list-style: none; margin: 0; padding: 0; counter-reset: ic; }
.icindekiler li { counter-increment: ic; }
.icindekiler a {
  display: block; padding: 7px 0 7px 26px; position: relative;
  font-size: 13.5px; line-height: 1.45; color: var(--sis);
  transition: color .3s;
}
.icindekiler a::before {
  content: counter(ic, decimal-leading-zero);
  position: absolute; left: 0; top: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--sis-2);
}
.icindekiler a:hover, .icindekiler a.aktif { color: var(--aksan-ac); }
.icindekiler a.aktif::before { color: var(--aksan); }
@media (max-width: 940px) {
  .icindekiler { position: static; order: -1; }
}

/* --------------------------------------------------------------- 5. METİN */
.makale { max-width: 74ch; }
.makale section { scroll-margin-top: 92px; }
.makale h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.16; letter-spacing: -.016em;
  margin: clamp(50px, 6vw, 70px) 0 18px;
}
.makale section:first-of-type h2 { margin-top: 0; }
.makale h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(18px, 2.3vw, 22px);
  margin: 34px 0 12px;
}
.makale p { margin: 0 0 18px; color: var(--ink-2); }
.makale p b, .makale li b { color: var(--ink); font-weight: 600; }
.makale a:not(.dugme) {
  color: var(--aksan);
  border-bottom: 1px solid rgba(var(--aksan-rgb), .34);
  transition: color .3s, border-color .3s;
}
.makale a:not(.dugme):hover { color: var(--aksan-ac); border-color: var(--aksan-ac); }

.makale ul, .makale ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.makale ul li, .makale ol li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--ink-2);
}
.makale ul li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--aksan); opacity: .8;
}
.makale ol { counter-reset: sira; }
.makale ol li { counter-increment: sira; }
.makale ol li::before {
  content: counter(sira) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--aksan);
}

/* kısa cevap kutusu: motorların doğrudan alıntılayacağı özet */
.kisa-cevap {
  margin: 0 0 30px;
  padding: 22px 24px;
  border-left: 2px solid var(--aksan);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(100deg, rgba(var(--aksan-rgb), .09), transparent 70%);
}
.kisa-cevap p { margin: 0; color: var(--ink); font-size: 16.5px; line-height: 1.62; }
.kisa-cevap p + p { margin-top: 12px; }

/* uyarı kutusu */
.not-kutu {
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--kutu);
  font-size: 14.5px; color: var(--ink-2);
}
.not-kutu b { display: block; margin-bottom: 6px; color: var(--aksan-ac); }
.not-kutu.uyari-kutu { border-color: rgba(var(--uyari-rgb), .28); }
.not-kutu.uyari-kutu b { color: var(--uyari); }
.not-kutu p:last-child { margin-bottom: 0; }

/* tablo */
.tablo-sar { overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch; }
.makale table {
  width: 100%; min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.makale th, .makale td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}
.makale th {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aksan); font-weight: 600;
  border-bottom-color: var(--cizgi-kuv);
}
.makale td { color: var(--ink-2); }
.makale tbody tr:hover td { background: var(--parlak); }

/* ----------------------------------------------------------------- 6. SSS */
.sss-liste { margin: 0 0 30px; }
.sss-liste details {
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--kutu);
  margin-bottom: 10px;
  transition: border-color .4s;
}
.sss-liste details[open] { border-color: var(--cizgi-kuv); }
.sss-liste summary {
  list-style: none; cursor: pointer;
  padding: 17px 46px 17px 20px; position: relative;
  font-family: var(--serif); font-size: 17.5px; font-weight: 500;
  color: var(--ink); line-height: 1.4;
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.6px solid var(--aksan); border-bottom: 1.6px solid var(--aksan);
  transform: rotate(45deg);
  transition: transform .35s var(--yumusak);
}
.sss-liste details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sss-liste .sss-cevap { padding: 0 20px 18px; }
.sss-liste .sss-cevap p { margin: 0 0 12px; font-size: 15px; }
.sss-liste .sss-cevap p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- 7. SAYFA SONU */
.makale-son {
  margin-top: clamp(56px, 7vw, 80px);
  padding-top: 30px; border-top: 1px solid var(--cizgi);
}
.yazar-kart {
  display: grid; grid-template-columns: 88px 1fr; gap: 20px;
  align-items: start;
  padding: 24px; border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kutu);
}
.yazar-kart img {
  width: 88px; height: 88px; border-radius: 14px;
  object-fit: cover; object-position: center 12%;
}
.yazar-kart h2 {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  margin: 0 0 6px;
}
.yazar-kart p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.yazar-kart .yazar-baglar { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
@media (max-width: 560px) {
  .yazar-kart { grid-template-columns: 1fr; }
  .yazar-kart img { width: 72px; height: 72px; }
}

.ilgili { margin-top: 34px; }
.ilgili h2 {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sis-2); margin: 0 0 14px; font-family: var(--sans); font-weight: 500;
}
.ilgili-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.ilgili-izgara a {
  display: block; padding: 16px 18px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--kutu);
  font-family: var(--serif); font-size: 16.5px;
  transition: border-color .4s, background .4s, transform .4s var(--yumusak);
}
.ilgili-izgara a:hover {
  border-color: var(--cizgi-kuv); background: var(--kutu-uzeri);
  transform: translateY(-3px);
}
.ilgili-izgara span {
  display: block; font-family: var(--sans); font-size: 12.5px;
  color: var(--sis-2); margin-top: 4px;
}

/* Sorumluluk metni yasal olarak sayfada durmalı ama sayfanın görsel
   diline hükmetmemeli: kutusu kaldırıldı, künye yazısı boyutuna indirildi. */
.sorumluluk {
  margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--cizgi);
  font-size: 11px; color: var(--sis-2); line-height: 1.6;
  opacity: .72;
}
.sorumluluk b { color: var(--sis); font-weight: 600; }
.sorumluluk a { color: var(--sis); border-bottom: 1px solid var(--cizgi); }

/* ------------------------------------------------------------ 8. VİDEOLAR */
.video-kap {
  position: relative; z-index: 10;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 46px) 60px;
}
.video-izgara {
  list-style: none; margin: 0 0 clamp(46px, 6vw, 70px); padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  /* Shorts (3:4) ve normal video (16:9) kartları aynı satırda karışıyor;
     stretch yerine start ile her kart kendi boyunda kalır. */
  align-items: start;
}
.video-kart {
  display: flex; flex-direction: column;
  border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kutu);
  overflow: hidden;
  transition: border-color .4s, transform .45s var(--yumusak), box-shadow .5s;
}
.video-kart:hover {
  border-color: var(--cizgi-kuv);
  transform: translateY(-4px);
  box-shadow: 0 26px 54px -34px var(--golge);
}

/* kapak: tıklanana kadar YouTube'dan script/iframe yüklenmez */
.video-kapak {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: #05100a; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden;
}
.video-kapak img {
  /* hqdefault 480x360 (4:3) gelir; object-fit: cover 16:9 kutuda siyah
     bantları zaten kırpar, ayrıca ölçeklemek metni kenardan kesiyordu. */
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .7s var(--yumusak), filter .5s;
  filter: saturate(.94) brightness(.88);
}
.video-kart:hover .video-kapak img { transform: scale(1.07); filter: saturate(1) brightness(1); }

/* Shorts: kaynak 9:16 olduğu için hqdefault'ta yanlara dolgu gelir.
   Kartı dikey yapıp içeriği bir miktar yakınlaştırınca dolgu büyük ölçüde
   kadraj dışında kalır. hqdefault 13 KB; oardefault 200 KB olduğu için
   sayfa hızı adına küçük olan tercih edildi. */
.video-kart.dikey .video-kapak { aspect-ratio: 3 / 4; }
.video-kart.dikey .video-kapak img { transform: scale(1.18); }
.video-kart.dikey:hover .video-kapak img { transform: scale(1.24); }
/* Shorts 9:16 çekilir; oynatıcı da o oranda olsun ki siyah bant kalmasın. */
.video-kart.dikey .video-cerceve { aspect-ratio: 9 / 16; }
.video-oynat {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--girdi);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .35s, border-color .35s, transform .4s var(--yay);
}
.video-oynat::after {
  content: ""; position: absolute; left: 21px; top: 17px;
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
.video-kart:hover .video-oynat {
  background: rgba(var(--aksan-rgb), .82);
  border-color: transparent; transform: scale(1.08);
}
.video-kart:hover .video-oynat::after { border-left-color: var(--dugme-ink); }
.video-rozet {
  position: absolute; right: 10px; top: 10px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(var(--perde), .72); border: 1px solid rgba(255,255,255,.16);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}

.video-cerceve { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-govde { padding: 16px 18px 18px; }
.video-govde h3 {
  font-family: var(--serif); font-weight: 500; font-size: 17.5px;
  line-height: 1.32; margin: 0 0 8px;
}
.video-govde h3 a { color: inherit; transition: color .3s; }
.video-govde h3 a:hover { color: var(--aksan-ac); }
.video-ust {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0;
  font-size: 12.5px; color: var(--sis-2);
}
.video-etiket { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.video-etiket span {
  font-size: 11px; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--cizgi); color: var(--sis);
}

/* kanal ve sosyal çağrılar */
.kanal-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px;
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid rgba(var(--aksan-rgb), .3); border-radius: 18px;
  background: linear-gradient(120deg, rgba(var(--aksan-rgb), .1), var(--kutu-koyu));
  margin-bottom: clamp(24px, 3vw, 34px);
}
.kanal-cta h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 6px; }
.kanal-cta p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 52ch; }

.sosyal-cta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.sosyal-blok {
  display: block; padding: 22px 20px;
  border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kutu);
  transition: border-color .4s, background .4s, transform .4s var(--yumusak);
}
.sosyal-blok:hover {
  border-color: var(--cizgi-kuv); background: var(--kutu-uzeri);
  transform: translateY(-4px);
}
.sosyal-ad {
  display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--aksan); margin-bottom: 8px;
}
.sosyal-blok b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: 6px; }
.sosyal-blok p { margin: 0; font-size: 13.5px; color: var(--sis); }

/* ---------------------------------------------------------- 9. MOBİL */
@media (max-width: 820px) {
  .makale-zemin { opacity: .7; }
  .icindekiler, .sss-liste details, .not-kutu, .yazar-kart, .ilgili-izgara a {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--kutu-duz);
  }
  .makale-basi { padding-top: 108px; }
  .makale-basi h1 { max-width: none; }
  .makale h2 { margin-top: 44px; }
  .makale p, .makale ul li, .makale ol li { font-size: 15.5px; }
  .kisa-cevap { padding: 18px 18px; }
  .kisa-cevap p { font-size: 15.5px; }
  .sss-liste summary { font-size: 16px; padding: 15px 42px 15px 16px; }
  .sss-liste .sss-cevap { padding: 0 16px 16px; }
  .makale table { font-size: 13.5px; }
  .makale th, .makale td { padding: 10px 11px; }

  /* videolar: iki sütun, sade yüzey */
  .video-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .video-kart, .sosyal-blok, .kanal-cta { background: var(--kutu-duz); box-shadow: none; }
  .video-oynat {
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .video-oynat::after { left: 15px; top: 12px; border-width: 8px 0 8px 12px; }
  .video-govde { padding: 12px 13px 14px; }
  .video-govde h3 { font-size: 14.5px; line-height: 1.3; }
  .video-ust { font-size: 11.5px; }
  .video-etiket { display: none; }
  .video-rozet { font-size: 9px; padding: 2px 7px; right: 7px; top: 7px; }
  .video-kap { padding-top: 32px; }
  .kanal-cta { padding: 20px 18px; }
  .kanal-cta h2 { font-size: 19px; }
}

/* ==========================================================================
   10. FİDAN'IN ASİSTANI (sohbet)
   ========================================================================== */
.asistan-kap { position: relative; z-index: 10; padding: clamp(30px, 4vw, 46px) clamp(18px, 4vw, 46px) 70px; }

.sohbet-kutu {
  border: 1px solid var(--cizgi-kuv); border-radius: 22px;
  background: var(--kutu-koyu);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px var(--golge);
}

.sohbet-basi {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cizgi);
  background: linear-gradient(100deg, rgba(var(--aksan-rgb), .1), transparent 70%);
}
.sohbet-basi img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: 62% 20%;
  border: 1px solid rgba(var(--aksan-rgb), .4);
}
.sohbet-basi b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.sohbet-basi i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--sis-2);
  margin-top: 2px;
}
.sohbet-canli {
  margin-left: auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--canli); box-shadow: 0 0 0 4px rgba(var(--canli-rgb), .14);
}

/* ------------------------------------------------------------------ akış */
.sohbet-akis {
  /* dvh: mobilde klavye açılınca görünür alan küçülür, kutu da onunla
     birlikte küçülsün ki giriş alanı klavyenin altında kalmasın. */
  height: min(58vh, 520px);
  height: min(58dvh, 520px);
  min-height: 300px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 20px 8px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--aksan-rgb), .4) transparent;
}
.sohbet-akis::-webkit-scrollbar { width: 6px; }
.sohbet-akis::-webkit-scrollbar-thumb { background: rgba(var(--aksan-rgb), .4); border-radius: 99px; }

.balon { max-width: 88%; animation: balonGir .35s var(--yumusak) both; }
@keyframes balonGir { from { opacity: 0; transform: translateY(8px); } }
.balon.kullanici { align-self: flex-end; }
.balon-ad {
  display: block; margin: 0 0 6px 2px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--aksan);
}
.balon-govde {
  padding: 14px 18px; border-radius: 16px;
  border: 1px solid var(--cizgi);
  background: var(--kutu-koyu);
  font-size: 15.5px; line-height: 1.62; color: var(--ink-2);
}
.balon.kullanici .balon-govde {
  background: linear-gradient(150deg, rgba(var(--aksan-rgb), .18), rgba(var(--aksan-rgb), .07));
  border-color: rgba(var(--aksan-rgb), .34);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.balon.asistan .balon-govde { border-bottom-left-radius: 5px; }
.balon.acil .balon-govde { border-color: rgba(var(--acil-rgb), .55); background: rgba(var(--acil-rgb), .12); color: var(--ink); }
.balon.hata .balon-govde { border-style: dashed; }
.balon-govde p { margin: 0 0 10px; }
.balon-govde p:last-child { margin-bottom: 0; }
.balon-govde b { color: var(--ink); font-weight: 600; }
.balon-govde a { color: var(--aksan); border-bottom: 1px solid rgba(var(--aksan-rgb), .4); }
.balon-govde ul { margin: 8px 0 10px; padding: 0; list-style: none; }
.balon-govde li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.balon-govde li::before {
  content: ""; position: absolute; left: 2px; top: .65em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--aksan); opacity: .8;
}

/* yazıyor göstergesi */
.balon.yaziyor .balon-govde { display: flex; gap: 5px; padding: 18px; }
.nokta {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aksan);
  opacity: .35; animation: zipla 1.2s infinite;
}
.nokta:nth-child(2) { animation-delay: .18s; }
.nokta:nth-child(3) { animation-delay: .36s; }
@keyframes zipla { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ürün kartları */
.sohbet-urunler { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); display: grid; gap: 8px; }
.sohbet-urun {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 13px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--cizgi); border-radius: 13px;
  background: var(--kutu-koyu);
  transition: border-color .35s, background .35s, transform .35s var(--yumusak);
}
.sohbet-urun:hover {
  border-color: rgba(var(--aksan-rgb), .5); background: var(--kutu-uzeri);
  transform: translateX(3px);
}
.sohbet-urun img, .sohbet-urun-bos {
  width: 56px; height: 56px; border-radius: 9px; object-fit: cover;
  background: #fff; display: block;
}
.sohbet-urun-bos { background: var(--parlak-2); }
.sohbet-urun-metin i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--aksan); margin-bottom: 3px;
}
.sohbet-urun-metin b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 15px; line-height: 1.3; color: var(--ink);
}
.sohbet-urun-metin em { display: block; font-style: normal; font-size: 12.5px; color: var(--sis); margin-top: 3px; }
.sohbet-urun-ok { color: var(--sis-2); font-size: 14px; }
.sohbet-urun:hover .sohbet-urun-ok { color: var(--aksan); }
.sohbet-urun-not { margin: 4px 0 0; font-size: 11.5px; color: var(--sis-2); line-height: 1.5; }

/* ------------------------------------------------------------- çipler ve giriş */
.sohbet-cipler {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 20px 4px;
}
.sohbet-cipler[hidden] { display: none; }
.sohbet-cipler button {
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--cizgi);
  background: var(--kutu-koyu); color: var(--ink-2);
  font-family: var(--sans); font-size: 12.5px;
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--yumusak);
}
.sohbet-cipler button:hover {
  border-color: rgba(var(--aksan-rgb), .5); color: var(--ink);
  background: rgba(var(--aksan-rgb), .12); transform: translateY(-2px);
}

.sohbet-form {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--cizgi);
  margin-top: 10px;
}
.sohbet-form textarea {
  flex: 1; resize: none; overflow-y: auto;
  min-height: 48px; max-height: 160px;
  padding: 13px 16px; border-radius: 14px;
  border: 1px solid var(--cizgi);
  background: var(--girdi); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  transition: border-color .3s, background .3s;
}
.sohbet-form textarea::placeholder { color: var(--sis-2); }
.sohbet-form textarea:focus {
  outline: none; border-color: rgba(var(--aksan-rgb), .6); background: var(--girdi-odak);
}
.sohbet-gonder {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: linear-gradient(140deg, var(--aksan-ac), var(--aksan));
  display: grid; place-items: center;
  transition: transform .3s var(--yay), opacity .3s, box-shadow .3s;
  box-shadow: 0 12px 28px -14px rgba(var(--aksan-rgb), .9);
}
.sohbet-gonder svg {
  width: 21px; height: 21px; fill: none; stroke: var(--dugme-ink);
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.sohbet-gonder:hover:not(:disabled) { transform: scale(1.06); }
.sohbet-gonder:disabled { opacity: .45; cursor: not-allowed; }


/* ------------------------------------------------------- ne yapar/yapmaz */
.asistan-nasil { margin-top: clamp(44px, 6vw, 68px); }
.asistan-nasil h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 3vw, 28px); margin: 0 0 22px;
}
.asistan-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.asistan-ikili > div {
  padding: 22px; border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kutu-hafif);
}
.asistan-ikili h3 {
  margin: 0 0 12px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--aksan); font-family: var(--sans); font-weight: 600;
}
.asistan-ikili ul { list-style: none; margin: 0; padding: 0; }
.asistan-ikili li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
}
.asistan-ikili li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--aksan); opacity: .8;
}
.asistan-ikili > div:last-child h3 { color: var(--uyari); }
.asistan-ikili > div:last-child li::before { background: var(--uyari); }

@media (max-width: 820px) {
  /* MOBİLDE SOHBET UYGULAMA GİBİ DAVRANIR.
     Sayfanın kendisi kaydırılmaz; kutu, üst bardan sayfa sonuna kadar olan
     alanı doldurur ve YALNIZCA mesaj akışı kaydırılır. Klavye açılınca dvh
     küçüldüğü için kutu da küçülür, giriş alanı hep görünür kalır ve
     hiçbir şey yukarı aşağı zıplamaz. */
  .makale-govde:has(.sohbet-kutu) .asistan-kap { padding-bottom: 24px; }
  .sohbet-kutu {
    display: flex; flex-direction: column;
    height: calc(100dvh - 168px);
    min-height: 380px;
    max-height: none;
  }
  .sohbet-akis {
    flex: 1 1 auto;
    height: auto; max-height: none; min-height: 0;
    overscroll-behavior: contain;
  }
  .sohbet-cipler { flex: none; }
  .sohbet-form { flex: none; }
}

@media (max-width: 620px) {
  /* Sohbet mobilde sayfanın merkezi: başlık alanı kısalır, kutu ekranı
     doldurur, giriş alanı alta yapışır. */
  .makale-govde .makale-basi { padding: 96px 16px 22px; }
  .makale-govde .makale-basi h1 { font-size: clamp(28px, 8vw, 34px); margin-bottom: 12px; }
  .makale-govde .makale-ozet { font-size: 14.5px; line-height: 1.6; }
  .asistan-kap { padding: 18px 12px 48px; }

  .sohbet-kutu, .asistan-ikili > div {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--kutu-duz);
  }
  .sohbet-kutu { border-radius: 18px; }
  .sohbet-akis { padding: 16px 13px 6px; gap: 12px; }
  .balon { max-width: 95%; }
  .balon-ad { font-size: 9.5px; margin-bottom: 5px; }
  .balon-govde { font-size: 15px; padding: 12px 14px; line-height: 1.58; }
  .sohbet-basi { padding: 12px 14px; gap: 11px; }
  .sohbet-basi img { width: 38px; height: 38px; }
  .sohbet-basi b { font-size: 15.5px; }
  .sohbet-basi i { font-size: 10.5px; }

  .sohbet-cipler { padding: 10px 12px 2px; gap: 6px; }
  .sohbet-cipler button { font-size: 12px; padding: 6px 11px; }

  .sohbet-form { padding: 10px 10px 12px; gap: 8px; margin-top: 8px; }
  .sohbet-form textarea { min-height: 44px; padding: 11px 14px; border-radius: 12px; }
  .sohbet-gonder { width: 44px; height: 44px; }

  .sohbet-urun { grid-template-columns: 46px 1fr auto; gap: 10px; padding: 9px 12px 9px 9px; }
  .sohbet-urun img, .sohbet-urun-bos { width: 46px; height: 46px; }
  .sohbet-urun-metin b { font-size: 14px; }
  .sohbet-urun-metin i { font-size: 9px; }
  .sohbet-urunler { margin-top: 12px; padding-top: 12px; }
}

/* eylem satırı: her asistan mesajının altında ürün ve WhatsApp bağlantısı */
.sohbet-eylem {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--cizgi);
}
.sohbet-eylem:first-child { margin-top: 0; }
.sohbet-urunler + .sohbet-eylem { border-top: 0; padding-top: 4px; margin-top: 10px; }
.se-urun, .se-wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 99px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: transform .3s var(--yay), box-shadow .3s, background .3s, border-color .3s;
}
.se-urun {
  border: 1px solid rgba(var(--aksan-rgb), .45);
  color: var(--aksan-ac); background: rgba(var(--aksan-rgb), .1);
}
.se-urun:hover { background: rgba(var(--aksan-rgb), .2); transform: translateY(-2px); }
.se-wa {
  border: 0; color: #06281a;
  background: linear-gradient(100deg, #7ff0b4, #25d366);
  box-shadow: 0 12px 26px -14px rgba(37, 211, 102, .8);
}
.se-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(37, 211, 102, .9); }
.se-wa svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 620px) {
  .sohbet-eylem { gap: 6px; }
  .se-urun, .se-wa { padding: 9px 14px; font-size: 12.5px; flex: 1 1 auto; justify-content: center; }
}

/* Asistan sayfasında özet paragrafı yok; başlık alanı ona göre kısalır. */
.makale-govde:has(.sohbet-kutu) .makale-basi { padding-bottom: clamp(24px, 3vw, 34px); }
.makale-govde:has(.sohbet-kutu) .makale-basi h1 { margin-bottom: 0; }

/* ==========================================================================
   11. TAM EKRAN ASİSTAN KATMANI
   Ana sayfada sohbeti ayrı bir sayfaya gitmeden açar. Asistan sayfasının
   kendisinde bu katman yoktur; oradaki kutu sayfanın parçasıdır.
   ========================================================================== */
html.katman-acik, html.katman-acik body { overflow: hidden; }

.asistan-katman { position: fixed; inset: 0; z-index: 90; }
.asistan-katman[hidden] { display: none; }

.ak-perde {
  position: absolute; inset: 0;
  background: rgba(var(--perde), .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .26s var(--yumusak);
}
.asistan-katman.gorunur .ak-perde { opacity: 1; }

.ak-panel {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(14px, 3vw, 36px);
  pointer-events: none;
}
.ak-panel > .sohbet-kutu {
  pointer-events: auto;
  width: min(100%, 760px);
  height: min(100%, 780px);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .28s var(--yumusak), transform .32s var(--yay);
  box-shadow: 0 60px 120px -50px var(--golge);
}
.asistan-katman.gorunur .ak-panel > .sohbet-kutu {
  opacity: 1; transform: none;
}
.ak-panel .sohbet-akis {
  flex: 1 1 auto; height: auto; max-height: none; min-height: 0;
}
.ak-panel .sohbet-cipler, .ak-panel .sohbet-form { flex: none; }

.ak-kapat {
  margin-left: 12px; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--cizgi); background: none;
  color: var(--sis); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--yay);
}
.ak-kapat:hover {
  color: var(--ink); border-color: var(--cizgi-kuv);
  background: var(--parlak-2); transform: rotate(90deg);
}
.ak-kapat svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round;
}

@media (max-width: 820px) {
  /* mobilde katman ekranı tamamen kaplar */
  .ak-panel { padding: 0; }
  .ak-panel > .sohbet-kutu {
    width: 100%; height: 100dvh; max-height: none;
    border-radius: 0; border-left: 0; border-right: 0;
    transform: translateY(24px);
  }
  .ak-perde { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Hareket azaltma tercihinde balon giriş animasyonu kapanır; aksi hâlde
   "both" dolgusu yüzünden balon opaklık 0'da takılı kalabiliyor. */
@media (prefers-reduced-motion: reduce) {
  .balon { animation: none; }
  .ak-panel > .sohbet-kutu { opacity: 1; transform: none; }
  .ak-perde { opacity: 1; }
}

/* Rehber sayfalarındaki ürün tablosunda ad, doğrudan dogalmarkam.com'daki
   kendi ürün sayfasına gider. Okur adı arayıp bulmak zorunda kalmasın. */
.makale-govde .urun-bag {
  border-bottom: 1px solid rgba(var(--aksan-rgb), .34);
  text-decoration: none;
}
.makale-govde .urun-bag b { color: var(--ink); font-weight: 600; transition: color .35s; }
.makale-govde .urun-bag::after {
  content: ' ↗'; font-size: .82em; color: var(--aksan-ac);
  white-space: nowrap; letter-spacing: 0;
}
.makale-govde .urun-bag:hover { border-bottom-color: var(--aksan); }
.makale-govde .urun-bag:hover b { color: var(--aksan-ac); }

/* Rehberin sonundaki ürün çağrısı: okuru ana sayfaya değil, doğrudan o
   rehberin anlattığı ürünün kendi sayfasına götürür. */
.makale-govde .urun-cagri {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px;
}
.makale-govde .urun-cagri .dugme {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 99px;
  border: 1px solid var(--cizgi-kuv);
  font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: border-color .4s, color .4s, filter .4s, transform .4s var(--yay);
}
.makale-govde .urun-cagri .dugme:hover { transform: translateY(-2px); border-color: var(--aksan); }
.makale-govde .urun-cagri .birincil {
  border-color: transparent;
  background: linear-gradient(120deg, var(--aksan), var(--aksan-ac));
  color: #17150f;
}
.makale-govde .urun-cagri .birincil:hover { filter: brightness(1.06); color: #17150f; }
@media (max-width: 560px) { .makale-govde .urun-cagri { flex-direction: column; } }

/* ====================================================== BİTKİ MONOGRAFİLERİ */
/* Monografiler uzun referans metinleridir: okurun aradığı satırı bulabilmesi
   biçimin ilk işi. Bu yüzden kimlik tablosu, üst simge kaynak numaraları ve
   katlanan kaynakça listesi ayrı ayrı ele alındı. */

.makale-latin {
  margin: -10px 0 18px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--aksan-ac);
  letter-spacing: .01em;
}

/* Bilimsel sınıflandırma tablosu: iki sütun, sol sütun etiket. */
.makale-govde .kimlik-tablo th {
  width: 38%; white-space: nowrap;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sis); font-weight: 600;
  vertical-align: top;
}
.makale-govde .kimlik-tablo td { font-size: 15px; }
@media (max-width: 560px) {
  .makale-govde .kimlik-tablo th { width: 42%; white-space: normal; font-size: 11px; }
}

/* Kaynak numaraları. Gövde metninin akışını bozmasın diye küçük ve soluk. */
.kaynak-no {
  font-size: .64em; font-weight: 600; line-height: 0;
  vertical-align: super;
  color: var(--aksan-ac); opacity: .85;
  margin-left: .5px; letter-spacing: .02em;
}

/* Kaynakça: 30-140 arası girdi olabiliyor, bu yüzden katlanmış duruyor. */
.kaynak-katla { margin-top: 6px; }
.kaynak-katla > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 99px;
  border: 1px solid var(--cizgi-kuv);
  font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; list-style: none;
  transition: border-color .4s, color .4s;
}
.kaynak-katla > summary::-webkit-details-marker { display: none; }
.kaynak-katla > summary::after { content: '▾'; font-size: 11px; opacity: .7; }
.kaynak-katla[open] > summary::after { content: '▴'; }
.kaynak-katla > summary:hover { border-color: var(--aksan); color: var(--ink); }
.kaynak-liste {
  margin: 20px 0 0; padding-left: 1.6em;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.kaynak-liste li { margin-bottom: 9px; }
.kaynak-liste li::marker { color: var(--aksan-ac); font-size: .86em; }

/* Bitkiyi içeren ürünlerin listesi. */
.makale-govde .urun-liste { list-style: none; padding: 0; margin: 18px 0 0; }
.makale-govde .urun-liste li { padding-left: 0; margin-bottom: 11px; }
.makale-govde .urun-liste li::before { content: none; }

/* ------------------------------------------------------------ dizin sayfası */
.monografi-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  margin-top: 26px;
}
.monografi-kart {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 21px 18px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--kutu);
  text-decoration: none;
  transition: border-color .45s, transform .5s var(--yay), box-shadow .5s;
}
.monografi-kart:hover {
  border-color: var(--aksan); transform: translateY(-3px);
  box-shadow: 0 22px 46px -32px var(--golge);
}
.mk-ad { font-family: var(--serif); font-size: 19.5px; color: var(--ink); }
.mk-latin { font-size: 13px; color: var(--aksan-ac); }
.mk-ozet {
  margin-top: 4px; font-size: 13.5px; line-height: 1.62; color: var(--ink-2);
}
.mk-alt {
  margin-top: auto; padding-top: 12px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sis);
}
.monografi-dizin { max-width: none; }
@media (max-width: 560px) {
  .monografi-izgara { grid-template-columns: 1fr; }
}

/* Monografinin başındaki kısa cevap kutusu. Etiketli satırlar hem okuru hem
   makineyi doğrudan cevaba götürüyor; monografinin gövdesi aşağıda duruyor. */
.makale-govde .cevap-dl { margin: 0; display: grid; gap: 0; }
.makale-govde .cevap-dl dt {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aksan-ac); font-weight: 600;
  margin-top: 18px;
}
.makale-govde .cevap-dl dt:first-child { margin-top: 0; }
.makale-govde .cevap-dl dd {
  margin: 6px 0 0; font-size: 15.5px; line-height: 1.66; color: var(--ink);
}
.makale-govde .cevap-not {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--cizgi);
  font-size: 13px; line-height: 1.6; color: var(--sis);
}