/* ===========================================================================
   YARDIM MERKEZI (oyuneks.com/yardim) - Plan epik dc623905, YM-1 (28.09.2026)

   SSS sayfasinin gorsel dili uzerine kurulu: css/kurumsal-sekmeler.css (--ku* renk
   tokenlari, acik/koyu tema) + css/sss.css (.ssSayfa, .ssHero, .ssArama, .ssBolumIkon,
   .ssCta, .ssButon). Bu dosya yalniz yardim merkezine ozgu parcalari ekler (.yrd*).
   Makale sayfasi GEO duzeni: soru (H1) -> "Kisa cevap" kutusu -> govde -> "Bilmen
   gerekenler" -> son guncelleme; yanda kategorinin diger sorulari.
   =========================================================================== */
.yrdSayfa { padding-top: 8px; }

/* ---- Ana sayfa: kategori izgarasi ------------------------------------------ */
.yrdKategoriIzgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 32px; }
.yrdKategoriKart {
    background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; box-shadow: var(--kuKartGolge);
    padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.yrdKategoriBaslik { display: flex; align-items: center; gap: 12px; }
.yrdKategoriMetin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yrdKategoriMetin h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.25; margin: 0; }
.yrdSayfa .yrdKategoriMetin h2 a { color: var(--kuBaslik); }
.yrdSayfa .yrdKategoriMetin h2 a:hover { color: var(--kuNane); }
.yrdKategoriMetin span { font-size: 11.5px; color: var(--kuUcuncul); }
.yrdKategoriAciklama { font-size: 13px; color: var(--kuUcuncul); margin: 0; line-height: 1.5; }
.yrdKisaListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.yrdKisaListe li { border-top: 1px solid var(--kuInceKenar); }
.yrdSayfa .yrdKisaListe a { display: block; padding: 9px 0; font-size: 13.5px; line-height: 1.45; color: var(--kuGovde); }
.yrdSayfa .yrdKisaListe a:hover { color: var(--kuNane); }
.yrdSayfa a.yrdTumu { font-size: 13px; font-weight: 700; margin-top: auto; }

/* ---- Arama sonuclari ---------------------------------------------------------- */
.yrdAramaSonuclar { padding-top: 24px; }
.yrdSoruListe { list-style: none; margin: 0; padding: 0; background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; overflow: hidden; }
.yrdSoruListe li { padding: 14px 18px; border-top: 1px solid var(--kuInceKenar); display: flex; flex-direction: column; gap: 4px; }
.yrdSoruListe li:first-child, .yrdSoruListe li[hidden] + li:not([hidden]) { border-top: 0; }
.yrdSayfa .yrdSoruListe a { font-size: 15px; font-weight: 700; color: var(--kuBaslik); }
.yrdSayfa .yrdSoruListe a:hover { color: var(--kuNane); }
.yrdSoruKategori { font-size: 11.5px; color: var(--kuNane); font-weight: 700; }
.yrdSoruOzet { font-size: 13px; color: var(--kuUcuncul); line-height: 1.5; }
.yrdAramaBos { padding: 28px 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--kuUcuncul); }
.yrdAramaBos strong { color: var(--kuBaslik); font-size: 15px; }

/* ---- Kategori ve makale sayfalari: ana kolon + yan kolon ------------------ */
.yrdSayfaBaslik { display: flex; gap: 16px; align-items: flex-start; padding: 28px 0 8px; }
.yrdSayfaBaslik h1 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--kuBaslik); margin: 6px 0 8px; }
.yrdSayfaBaslik p { font-size: 14px; color: var(--kuUcuncul); margin: 0; max-width: 760px; }
.yrdIcerikIzgara { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding-top: 24px; align-items: start; }
.yrdAna { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.yrdOzetKart { background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.yrdOzetKart h2 { font-size: 17px; font-weight: 800; line-height: 1.35; margin: 0; }
.yrdSayfa .yrdOzetKart h2 a { color: var(--kuBaslik); }
.yrdSayfa .yrdOzetKart h2 a:hover { color: var(--kuNane); }
.yrdOzetKart p { font-size: 14px; line-height: 1.6; color: var(--kuGovde); margin: 0; }
.yrdSayfa a.yrdDevam { font-size: 13px; font-weight: 700; }

.yrdYan { position: sticky; top: calc(var(--ssSekmeAlt, 49px) + 16px); display: flex; flex-direction: column; gap: 14px; }
.yrdYanKutu { background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; padding: 16px 18px; }
.yrdYanBaslik { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--kuUcuncul); margin-bottom: 8px; }
.yrdYanListe { list-style: none; margin: 0; padding: 0; }
.yrdYanListe li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--kuInceKenar); }
.yrdYanListe li:first-child { border-top: 0; }
.yrdSayfa .yrdYanListe a { display: block; padding: 8px 0; font-size: 13px; line-height: 1.4; color: var(--kuGovde); }
.yrdSayfa .yrdYanListe a:hover { color: var(--kuNane); }
.yrdYanListe li.aktif > a { color: var(--kuNane); font-weight: 700; }
.yrdYanListe .mono { font-size: 11px; color: var(--kuUcuncul); }
.yrdYanSorular { max-height: 60vh; overflow-y: auto; }

/* ---- Makale -------------------------------------------------------------------- */
.yrdMakale { background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 16px; box-shadow: var(--kuKartGolge); padding: 28px 32px; }
.yrdSayfa .yrdMakale .ssEtiket a { color: var(--kuNane); }
h1.yrdSoru { font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; color: var(--kuBaslik); margin: 8px 0 18px; }
.yrdKisaCevap {
    background: var(--kuNaneZemin); border: 1px solid var(--kuNaneKenar); border-left: 4px solid var(--kuNane);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 22px;
}
.yrdKisaCevapEtiket { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--kuNane); margin-bottom: 6px; }
.yrdKisaCevap p { font-size: 16px; line-height: 1.6; color: var(--kuMetin); margin: 0; font-weight: 600; }

.yrdGovde { font-size: 15px; line-height: 1.7; color: var(--kuGovde); }
.yrdGovde h2 { font-size: 20px; font-weight: 800; color: var(--kuBaslik); margin: 26px 0 10px; letter-spacing: -.3px; }
.yrdGovde h3 { font-size: 17px; font-weight: 800; color: var(--kuBaslik); margin: 20px 0 8px; }
.yrdGovde p { margin: 0 0 12px; }
.yrdGovde ol, .yrdGovde ul { margin: 0 0 14px; padding-left: 22px; }
.yrdGovde li { margin-bottom: 6px; }
.yrdGovde strong { color: var(--kuMetin); }
.yrdGovde table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14px; }
.yrdGovde th, .yrdGovde td { border: 1px solid var(--kuKenar); padding: 8px 10px; text-align: left; vertical-align: top; }
.yrdGovde th { background: var(--kuNaneZemin); color: var(--kuBaslik); font-weight: 800; }

.yrdBilgiler { margin-top: 22px; border-top: 1px solid var(--kuInceKenar); padding-top: 18px; }
.yrdBilgiler h2 { font-size: 17px; font-weight: 800; color: var(--kuBaslik); margin: 0 0 10px; }
.yrdBilgiler ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.yrdBilgiler li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--kuGovde); }
.yrdBilgiler li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--kuNane); }

.yrdGuncelleme { margin-top: 22px; font-size: 12.5px; color: var(--kuUcuncul); }
.yrdOnSon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.yrdSayfa .yrdOnSon a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--kuKenar); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--kuBaslik); line-height: 1.4; }
.yrdSayfa .yrdOnSon a:hover { border-color: var(--kuNane); color: var(--kuNane); }
.yrdOnSon a span { font-size: 11px; font-weight: 700; color: var(--kuUcuncul); text-transform: uppercase; letter-spacing: .4px; }
.yrdOnSon .yrdSonraki { grid-column: 2; text-align: right; }

.yrdCta { margin-top: 40px; }

/* ---- Duyarli ------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .yrdKategoriIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .yrdIcerikIzgara { grid-template-columns: minmax(0, 1fr); }
    .yrdYan { position: static; }
    .yrdYanSorular { max-height: none; }
    .yrdMakale { padding: 20px 18px; }
    h1.yrdSoru { font-size: 23px; }
    .yrdSayfaBaslik h1 { font-size: 24px; }
}
@media (max-width: 575.98px) {
    .yrdKategoriIzgara { grid-template-columns: minmax(0, 1fr); }
    .yrdOnSon { grid-template-columns: 1fr; }
    .yrdOnSon .yrdSonraki { grid-column: 1; text-align: left; }
    .yrdKisaCevap p { font-size: 15px; }
}