/*
Theme Name: Satınalma Akademisi
Theme URI: https://satinalma-akademi.com
Description: Satınalma Akademisi için Kadence alt teması. Renkler, yazı tipleri ve düğmeler Özelleştir panelinden yönetilir. Burada yalnızca Özelleştir'de karşılığı olmayan bileşenler bulunur.
Author: Satınalma Akademisi
Template: kadence
Version: 2.5.26
Text Domain: satinalma-akademi
*/

/* ============================================================
   1. RENKLER
   Değerler burada tanımlı DEĞİL. Hepsi Kadence'ın palet
   ayarından geliyor: Özelleştir > Renkler ve Yazı Tipleri > Palet
   Oradan bir rengi değiştirdiğinde site genelinde değişir.

   palette1  turuncu, ana eylem          palette6  açık mavi
   palette2  turuncu koyu, hover         palette7  kart zemini
   palette3  derin lacivert, başlıklar   palette8  sayfa zemini
   palette4  metin                       palette9  beyaz
   palette5  marka mavisi, bağlantılar   palette13 kiremit, uyarı
   ============================================================ */
:root{
  /* Kod etiketleri (SA-106) icin; markanin omurgasi kodlar oldugu icin bilincli tercih */
  --sa-kod-yazi: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sa-turuncu:      var(--global-palette1);
  --sa-turuncu-koyu: var(--global-palette2);
  --sa-derin:        var(--global-palette3);
  --sa-metin:        var(--global-palette4);
  --sa-mavi-koyu:    var(--global-palette5);
  --sa-mavi:         var(--global-palette6);
  --sa-kart:         var(--global-palette7);
  --sa-zemin:        var(--global-palette8);
  --sa-beyaz:        var(--global-palette9);
  --sa-kiremit:      var(--global-palette13);

  --sa-cizgi:      color-mix(in srgb, var(--global-palette6) 34%, white);
  --sa-cizgi-ince: color-mix(in srgb, var(--global-palette6) 18%, white);
  --sa-gri:        color-mix(in srgb, var(--global-palette4) 68%, white);

  --sa-golge:     0 1px 2px rgba(27,46,60,.06), 0 8px 24px -16px rgba(27,46,60,.30);
  --sa-golge-ust: 0 2px 6px rgba(27,46,60,.09), 0 16px 36px -20px rgba(27,46,60,.40);
  --sa-yuvarlak:  10px;
}

/* ============================================================
   2. KÜÇÜK METİN BİLEŞENLERİ
   Bunların Özelleştir'de karşılığı yok.
   ============================================================ */
.sa-etiket{
  font-family: var(--sa-kod-yazi);
  /* Bölüm etiketi. Ana sayfada 20px denendi ve tutuldu; tüm sayfalarda
     aynı olsun diye ölçü buradan veriliyor. */
  font-size: 20px; letter-spacing: .15em; text-transform: uppercase;
  display: block; line-height: 1.25;
}
@media (max-width: 640px){ .sa-etiket{ font-size: 16px; } }
.sa-kod{
  font-family: var(--sa-kod-yazi);
  font-size: .88em; font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. EĞİTİM KARTI
   Sitenin en çok tekrar eden nesnesi. Katalogda, ana sayfada,
   sertifika içeriğinde hep aynı kart görünür.
   ============================================================ */
.sa-kart{
  background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  /* height:100% ızgara satırıyla döngüye giriyor ve kartlar taşıyordu.
     Izgara zaten stretch ediyor, yüksekliği tarayıcıya bırakıyoruz. */
  box-sizing: border-box;
  box-shadow: var(--sa-golge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sa-kart:hover{
  transform: translateY(-3px);
  box-shadow: var(--sa-golge-ust);
  border-color: var(--sa-mavi);
}
.sa-kart__ust{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sa-kart__kod{ font-family:var(--sa-kod-yazi); font-size:13px; color: var(--sa-gri); letter-spacing:.04em; }
.sa-kart__ad{ font-size:19px; font-weight:700; color: var(--sa-derin); line-height:1.28; margin:0; }
.sa-kart__kim{ font-size:15px; color: var(--sa-gri); margin:0; }
.sa-kart__rozetler{ display:flex; flex-wrap:wrap; gap:6px; }
.sa-kart__alt{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--sa-cizgi-ince);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.sa-kart__fiyat{ font-size:20px; font-weight:700; color: var(--sa-derin); font-variant-numeric: tabular-nums; }
.sa-kart__fiyat small{ display:block; font-size:12px; font-weight:400; color: var(--sa-gri); }
.sa-kart__tarih{ font-family:var(--sa-kod-yazi); font-size:13px; color: var(--sa-mavi-koyu); }

/* Aynı eğitimin diğer veriliş biçimleri.
   Kartın kendi biçimi bu satırda geçmiyor; yalnızca "bu eğitim ayrıca
   şu biçimlerde de var" bilgisi veriliyor. Kart bir bağlantı olduğu
   için burada iç bağlantı yok. */
.sa-kart__digerleri{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--sa-cizgi-ince);
  display:flex; flex-wrap:wrap; gap:3px 16px;
}
.sa-kart__bicim{ font-size:12.5px; color: var(--sa-gri); font-variant-numeric: tabular-nums; }
.sa-kart__bicim b{ font-weight:600; color: var(--sa-metin); margin-right:5px; }

/* ============================================================
   4. ROZETLER
   Format, süre, seviye ve sertifika bilgisi için.
   ============================================================ */
.sa-rozet{
  display:inline-block; font-family:var(--sa-kod-yazi);
  font-size:11.5px; letter-spacing:.04em; line-height:1.5;
  padding:3px 8px; border-radius:5px;
  border:1px solid var(--sa-cizgi); color: var(--sa-gri); background: var(--sa-zemin);
  white-space:nowrap;
}
.sa-rozet--canli{     color: var(--sa-mavi-koyu); border-color: var(--sa-mavi-koyu); background:transparent; }
.sa-rozet--online{    color:#1E7A54; border-color:#1E7A54; background:transparent; }
.sa-rozet--kurumsal{  color: var(--sa-derin); border-color: var(--sa-cizgi); }
.sa-rozet--sertifika{ color: var(--sa-turuncu-koyu); border-color: var(--sa-turuncu); background:transparent; }
.sa-rozet--uyari{     color: var(--sa-kiremit); border-color: var(--sa-kiremit); background:transparent; }

/* ============================================================
   5. IZGARA YARDIMCILARI
   WPBakery sütunlarının yetmediği yerler için.
   ============================================================ */
.sa-izgara{ display:grid; gap:22px; }
.sa-izgara--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.sa-izgara--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.sa-izgara--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .sa-izgara--3, .sa-izgara--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .sa-izgara--2, .sa-izgara--3, .sa-izgara--4{ grid-template-columns: 1fr; } }

/* ============================================================
   6. KARŞILAŞTIRMA TABLOSU
   Sertifika programları ve format karşılaştırması için.
   ============================================================ */
.sa-tablo-sar{
  overflow-x:auto; border:1px solid var(--sa-cizgi); border-radius: var(--sa-yuvarlak);
  background: var(--sa-beyaz); box-shadow: var(--sa-golge);
}
.sa-tablo{ border-collapse:collapse; width:100%; min-width:640px; font-size:15px; }
.sa-tablo thead th{
  background: var(--sa-kart); color: var(--sa-derin); font-size:14px; text-align:left;
  padding:13px 15px; border-bottom:1px solid var(--sa-cizgi); white-space:nowrap;
}
.sa-tablo tbody th{ text-align:left; padding:12px 15px; font-weight:600; color: var(--sa-derin); border-bottom:1px solid var(--sa-cizgi-ince); white-space:nowrap; }
.sa-tablo tbody td{ padding:12px 15px; border-bottom:1px solid var(--sa-cizgi-ince); vertical-align:top; }
.sa-tablo tbody tr:last-child td, .sa-tablo tbody tr:last-child th{ border-bottom:0; }

/* ============================================================
   7. WPBAKERY DÜZELTMESİ
   WPBakery her bloğa sabit bir alt boşluk ekliyor. Boşluğu
   satırın kendi Tasarım Seçenekleri panelinden vermek daha doğru.
   ============================================================ */
.wpb_content_element{ margin-bottom: 0; }

/* ============================================================
   8. HAREKET TERCİHİ
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .sa-kart{ transition: none; }
  .sa-kart:hover{ transform: none; }
}

/* ============================================================
   9. EĞİTİM TAKVİMİ  —  [sa_takvim]
   Satır düzeni burada tanımlı, çünkü Özelleştir'de karşılığı yok.
   Renkler yine paletten geliyor, turuncuyu değiştirince bu da değişir.
   ============================================================ */
.sa-takvim{ border-top: 1px solid var(--sa-cizgi); }

.sa-takvim__satir{
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) auto auto 92px;
  gap: 18px; align-items: center;
  padding: 15px 6px;
  border-bottom: 1px solid var(--sa-cizgi-ince);
  text-decoration: none;
  transition: background-color .16s ease;
}
.sa-takvim__satir:hover{ background: var(--sa-zemin); }

.sa-takvim__tarih{
  font-family: var(--sa-kod-yazi);
  font-size: 13px; font-weight: 500; color: var(--sa-derin);
  font-variant-numeric: tabular-nums;
}
.sa-takvim__tarih em{
  display: block; font-style: normal;
  font-size: 10.5px; letter-spacing: .07em; color: var(--sa-gri);
}

.sa-takvim__ad{ font-size: 15px; font-weight: 600; color: var(--sa-derin); line-height: 1.35; }
.sa-takvim__ad i{
  display: block; font-style: normal;
  font-family: var(--sa-kod-yazi);
  font-size: 11.5px; letter-spacing: .04em; font-weight: 400; color: var(--sa-gri);
}

.sa-takvim__format{
  justify-self: end; white-space: nowrap;
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; padding: 3px 7px; border-radius: 4px;
  border: 1px solid var(--sa-mavi-koyu); color: var(--sa-mavi-koyu);
}

.sa-takvim__fiyat{
  text-align: right;
  font-family: var(--sa-kod-yazi);
  font-size: 13.5px; color: var(--sa-derin); font-variant-numeric: tabular-nums;
}

.sa-takvim__dugme{
  text-align: center; padding: 8px 0; border-radius: 7px;
  background: var(--sa-turuncu); color: var(--sa-beyaz);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  transition: background-color .16s ease;
}
.sa-takvim__satir:hover .sa-takvim__dugme{ background: var(--sa-turuncu-koyu); }

.sa-takvim__tumu{
  display: inline-block; margin-top: 18px;
  font-family: var(--sa-kod-yazi);
  font-size: 12.5px; color: var(--sa-mavi-koyu);
  border-bottom: 1px solid var(--sa-mavi-koyu); padding-bottom: 2px; text-decoration: none;
}
.sa-takvim__bos{
  padding: 26px 6px; margin: 0;
  color: var(--sa-gri); font-size: 15px;
  border-bottom: 1px solid var(--sa-cizgi-ince);
}

@media (max-width: 900px){
  .sa-takvim__satir{ grid-template-columns: 130px minmax(0,1fr) 92px; row-gap: 10px; }
  .sa-takvim__fiyat{ grid-column: 1 / 2; text-align: left; }
  .sa-takvim__dugme{ grid-column: 3 / 4; }
}
@media (max-width: 560px){
  .sa-takvim__satir{ grid-template-columns: 1fr auto; }
  .sa-takvim__ad{ grid-column: 1 / -1; }
  .sa-takvim__format{ grid-column: 1 / 2; }
  .sa-takvim__fiyat{ grid-column: 1 / 2; }
  .sa-takvim__dugme{ grid-column: 2 / 3; padding: 8px 16px; }
}

/* ============================================================
   10. FOTOĞRAF ŞERİDİ
   Yan yana duran görsellerin aynı yükseklikte kalması için.
   Yüksekliği satırın Tasarım Seçenekleri'nden değil buradan alır,
   çünkü WPBakery'de görsel yüksekliği ayarı yok.
   ============================================================ */
.sa-serit-gorsel img{
  width: 100%; height: 170px; object-fit: cover;
  border-radius: var(--sa-yuvarlak); display: block;
}
@media (max-width: 767px){ .sa-serit-gorsel img{ height: 200px; } }

/* ============================================================
   11. RAKAM BLOĞU
   "13 / YIL" gibi rakam + etiket ikilisi için.
   Rakam [sa_sayi] kısa koduyla kendiliğinden geliyor.
   ============================================================ */
.sa-sayi b{
  display: block;
  font-family: var(--sa-kod-yazi);
  font-size: 30px; font-weight: 500; line-height: 1;
  color: var(--sa-turuncu); font-variant-numeric: tabular-nums;
}
.sa-sayi span{
  display: block; margin-top: 7px;
  font-family: var(--sa-kod-yazi);
  font-size: 10px; letter-spacing: .11em; line-height: 1.45;
  color: var(--sa-gri); text-transform: uppercase;
}

/* ============================================================
   12. ANA SAYFA BİLEŞENLERİ
   Bu kurallar burada duruyor, sayfanın içinde değil. Sebebi şu:
   WPBakery, sayfayı editörde her kaydettiğinde sayfanın CSS'ini
   panellerdeki değerlerden yeniden üretiyor. Elle eklenmiş kurallar
   o sırada siliniyor. Buradaki kurallar silinmiyor.
   Panelden yönetilen şeyler (zemin, boşluk, çerçeve, köşe) sayfada
   kalmaya devam ediyor; burada yalnızca panelde karşılığı olmayanlar var.
   ============================================================ */

/* Büyük görsellerin yuvarlak köşesi ve gölgesi */
.sa-hero-gorsel img{
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 22px 50px -26px rgba(27,46,60,.55);
}

/* Sertifika şeridi: çizginin üstündeki turuncu nokta */
.sa-hat-adim{ position: relative; }
.sa-hat-adim::before{
  content: ""; position: absolute; top: -7px; left: 15px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sa-turuncu);
}

/* Öğrenme süreci: koyu zeminde açık mavi nokta */
.sa-surec-adim{ position: relative; }
.sa-surec-adim::before{
  content: ""; position: absolute; top: -6px; left: 15px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #A9C6DB;
}

/* Yol kartları */
.sa-yolkart{ transition: box-shadow .18s ease; }
.sa-yolkart:hover{ box-shadow: var(--sa-golge-ust); }

/* Turuncu düğmenin üzerine gelince koyulaşması */
.sa-dg-turuncu .vc_general:hover{
  background-color: var(--sa-turuncu-koyu) !important;
  border-color: var(--sa-turuncu-koyu) !important;
}

/* --- Küçük ekran düzeltmeleri ---
   Buradaki !important yalnızca WPBakery'nin kendi satır içi kuralını
   geçmek için var ve sadece 767px altında çalışıyor.
   Masaüstü değerleri panelden yönetilmeye devam ediyor. */
@media (max-width: 767px){
  .sa-baslik-xl{ font-size: 34px !important; }
  .sa-baslik-l { font-size: 26px !important; }

  .sa-hero-metin, .sa-ilke-giris, .sa-surec-giris{ padding-right: 0 !important; }
  .sa-ilke-giris, .sa-surec-giris{ margin-bottom: 28px !important; }

  .sa-hat-adim, .sa-surec-adim{ margin-bottom: 26px !important; }
  .sa-hat-adim:last-child, .sa-surec-adim:last-child{ margin-bottom: 0 !important; }

  .sa-yolkart{ margin-left: 0 !important; margin-right: 0 !important; }
  .sa-yolkart--koyu{ margin-top: 18px !important; }
}

/* ============================================================
   13. REFERANS LOGO ŞERİDİ  —  [sa_logolar]
   ============================================================ */
.sa-logolar{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 980px){ .sa-logolar{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px){ .sa-logolar{ grid-template-columns: repeat(3, 1fr); } }
.sa-logo{
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--sa-cizgi-ince); border-radius: 8px; background: var(--sa-beyaz);
}
.sa-logo img{
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
  filter: grayscale(1); opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.sa-logo:hover img{ filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce){ .sa-logo img{ transition: none; } }

/* ============================================================
   14. SERTİFİKA SEKMESİ İÇERİĞİ
   Sekmelerin kendisi WPBakery'nin Tabs bileşeni. Buradaki kurallar
   yalnızca sekmenin içindeki düzen için.
   ============================================================ */
.sa-sert{ display: grid; grid-template-columns: 5fr 7fr; gap: 34px; align-items: start; }
.sa-sert__baslik{ font-size: 21px; font-weight: 700; color: var(--sa-derin); margin: 0 0 8px; line-height: 1.25; }
.sa-sert__ozet{ font-size: 14.5px; color: var(--sa-gri); margin: 0 0 18px; }

.sa-sert__knc{ margin: 0 0 20px; display: grid; gap: 12px; }
.sa-sert__knc > div{ display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 12px; align-items: baseline; }
.sa-sert__knc dt{
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-sert__knc dd{ margin: 0; font-size: 14px; color: var(--sa-derin); font-weight: 600; }

.sa-sert__et{
  display: block; margin-bottom: 12px;
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-sert__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-sert__liste li{
  display: flex; gap: 10px; align-items: baseline;
  border: 1px solid var(--sa-cizgi-ince); border-radius: 8px;
  padding: 10px 12px; background: var(--sa-zemin);
}
.sa-sert__liste i{
  font-style: normal; font-family: var(--sa-kod-yazi);
  font-size: 11.5px; color: var(--sa-turuncu-koyu); white-space: nowrap;
}
.sa-sert__liste em{ font-style: normal; font-size: 13.5px; color: var(--sa-derin); line-height: 1.35; }
.sa-sert__liste li.sinav{ background: transparent; border-style: dashed; }
.sa-sert__liste li.sinav i{ color: var(--sa-mavi-koyu); }

/* CPPM'in iki satın alma yolu */
.sa-yollar{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sa-yol{ border: 1px solid var(--sa-cizgi); border-radius: 10px; padding: 18px; background: var(--sa-beyaz); }
.sa-yol--onerilen{ border-color: var(--sa-turuncu); }
.sa-yol__et{
  display: block; margin-bottom: 8px;
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-yol--onerilen .sa-yol__et{ color: var(--sa-turuncu-koyu); }
.sa-yol__ad{ font-size: 15px; font-weight: 700; color: var(--sa-derin); margin: 0 0 6px; }
.sa-yol__ac{ font-size: 13.5px; color: var(--sa-gri); margin: 0 0 12px; }
.sa-yol .sa-sert__liste{ grid-template-columns: 1fr; gap: 6px; }

@media (max-width: 900px){
  .sa-sert{ grid-template-columns: 1fr; gap: 24px; }
  .sa-sert__liste{ grid-template-columns: 1fr; }
  .sa-yollar{ grid-template-columns: 1fr; }
}

/* ============================================================
   15. KATILIMCI YORUMU
   ============================================================ */
.sa-yorum{
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
  box-shadow: var(--sa-golge);
}
.sa-yorum__tirnak{
  font-family: var(--sa-kod-yazi);
  font-size: 26px; line-height: 1; color: var(--sa-turuncu); display: block;
}
.sa-yorum__metin{ font-size: 15px; color: var(--sa-metin); line-height: 1.6; margin: 0; }
.sa-yorum__kim{
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sa-cizgi-ince);
  font-family: var(--sa-kod-yazi);
  font-size: 11.5px; letter-spacing: .04em; color: var(--sa-gri); line-height: 1.6;
}
.sa-yorum__kim b{ display: block; font-weight: 500; color: var(--sa-mavi-koyu); }

/* Sekme yüksekliği sabit kalsın ki sekme değişince sayfa oynamasın */
.vc_tta.vc_tta-tabs.sa-sertifika-sekme .vc_tta-panel-body{ min-height: 400px; }
@media (max-width: 900px){ .vc_tta.vc_tta-tabs.sa-sertifika-sekme .vc_tta-panel-body{ min-height: 0; } }

/* ============================================================
   16. BİLGİ MERKEZİ KARTLARI  —  [sa_yazilar]
   ============================================================ */
.sa-yazilar{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .sa-yazilar{ grid-template-columns: 1fr; } }

.sa-yazi{
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); overflow: hidden; box-sizing: border-box;
  box-shadow: var(--sa-golge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sa-yazi:hover{ transform: translateY(-3px); box-shadow: var(--sa-golge-ust); border-color: var(--sa-mavi); }
.sa-yazi__gorsel{ display: block; background: var(--sa-kart); aspect-ratio: 16/9; overflow: hidden; }
.sa-yazi__gorsel img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-yazi__govde{ display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.sa-yazi__et{
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--sa-turuncu-koyu);
}
.sa-yazi__ad{ font-size: 17px; font-weight: 700; color: var(--sa-derin); line-height: 1.32; }
.sa-yazi__tarih{
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sa-cizgi-ince);
  font-family: var(--sa-kod-yazi);
  font-size: 11.5px; color: var(--sa-gri);
}
@media (prefers-reduced-motion: reduce){ .sa-yazi{ transition: none; } .sa-yazi:hover{ transform: none; } }

/* ============================================================
   17. EĞİTİM KARTI IZGARASI  —  [sa_egitimler]
   Kartın kendisi 3. bölümde tanımlı, burada yalnızca bağlantı
   hâline gelmesi için gereken düzeltmeler ve ızgara var.
   ============================================================ */
.sa-egitimler{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px){ .sa-egitimler{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .sa-egitimler{ grid-template-columns: 1fr; } }

a.sa-kart{ text-decoration: none; }
a.sa-kart .sa-kart__ad{ display: block; }
.sa-bos{ color: var(--sa-gri); font-size: 15px; }

/* ============================================================
   18. TEKLİF SAYFASI YAN KUTUSU
   ============================================================ */
.sa-yankutu{
  background: var(--sa-zemin); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 24px;
}
.sa-yankutu__et{
  display: block; margin-bottom: 12px;
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-yankutu__et + .sa-adimlar{ margin-bottom: 24px; }
.sa-yankutu .sa-adimlar:last-child{ margin-bottom: 0; }

.sa-adimlar{ margin: 0; padding: 0; list-style: none; counter-reset: sa-adim; display: grid; gap: 12px; }
.sa-adimlar li{
  position: relative; padding-left: 34px;
  font-size: 14.5px; color: var(--sa-metin); line-height: 1.55;
}
.sa-adimlar li::before{
  counter-increment: sa-adim; content: counter(sa-adim);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sa-turuncu); color: var(--sa-beyaz);
  font-family: var(--sa-kod-yazi); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.sa-adimlar--nokta li::before{
  content: ""; width: 7px; height: 7px; top: 9px; left: 7px;
  background: var(--sa-mavi); border-radius: 50%;
}
.sa-adimlar b{ color: var(--sa-derin); font-weight: 600; }

/* Koyu zeminde adım listesi */
.sa-adimlar--acik li{ color: #dbe6ee; }
.sa-adimlar--acik b{ color: var(--sa-beyaz); }

/* Formun sayfa diliyle uyumlu durması için */
.sa-form input[type="text"], .sa-form input[type="email"], .sa-form input[type="tel"],
.sa-form input[type="number"], .sa-form select, .sa-form textarea{
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  color: var(--sa-metin); background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: 8px;
}
.sa-form input:focus, .sa-form select:focus, .sa-form textarea:focus{
  outline: 2px solid var(--sa-mavi); outline-offset: 1px; border-color: var(--sa-mavi);
}
.sa-form label{ display: block; font-size: 14px; color: var(--sa-derin); font-weight: 600; margin-bottom: 6px; }
.sa-form p{ margin: 0 0 18px; }
.sa-form input[type="submit"]{
  background: var(--sa-turuncu); color: var(--sa-beyaz);
  border: 0; border-radius: 8px; padding: 13px 26px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .16s ease;
}
.sa-form input[type="submit"]:hover{ background: var(--sa-turuncu-koyu); }

/* ============================================================
   19. ALTBİLGİ
   Sütunların içeriği Görünüm > Bileşenler'den (Footer 1-4)
   düzenleniyor. Burada yalnızca görünüm var.
   ============================================================ */
.sa-dip-baslik{
  display: block; margin-bottom: 14px;
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sa-turuncu);
}
.sa-dip-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sa-dip-liste a{ font-size: 14.5px; text-decoration: none; line-height: 1.45; }
.sa-dip-liste a:hover{ text-decoration: underline; }

.sa-dip-ozet{ font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; max-width: 34ch; }
.sa-dip-iletisim{
  margin: 0; font-family: var(--sa-kod-yazi);
  font-size: 13px; line-height: 1.9;
}
.sa-dip-iletisim a{ text-decoration: none; }
.sa-dip-iletisim a:hover{ text-decoration: underline; }

/* Altbilgideki eski metin bileşeni ortalanmış ve çok büyük başlıklarla
   yazılmıştı. İçeriğe dokunmadan görünümünü sıraya sokuyoruz. */
.site-footer .widget_text h4{
  font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.7;
  text-align: left !important; margin: 0 0 2px;
}
.site-footer .widget_text h4 strong{ font-weight: 600; }
.site-footer .widget_text img{ margin: 12px 0 0; max-width: 110px; height: auto; }
.site-footer .widget_text p{ margin: 0; }
@media (max-width: 1024px){
  .site-footer .widget_text h4{ font-size: 13.5px; }
}

/* ============================================================
   20. TUTOR LMS PANELİ
   Panel artık sitenin başlığı ve altbilgisi içinde açılıyor
   (bkz. tutor/dashboard.php). Buradaki kurallar Tutor'un tam
   ekran için yazılmış düzenini sayfa içine oturtuyor ve
   renklerini bizim palete çekiyor.
   ============================================================ */
.sa-panel-alan{ background: var(--sa-zemin); }

.tutor-dashboard-layout.sa-panel{
  display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 28px;
  min-height: 0; height: auto;
  padding: 40px 0 64px;
}
.tutor-dashboard-layout.sa-panel .tutor-dashboard-sidebar{
  position: static; width: auto; height: auto; min-height: 0;
  background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: var(--sa-yuvarlak);
  padding: 14px; align-self: start;
}
.tutor-dashboard-layout.sa-panel .tutor-dashboard-main{
  min-width: 0; background: transparent;
}
.tutor-dashboard-layout.sa-panel .tutor-dashboard-body{
  padding: 0; background: transparent; height: auto; overflow: visible;
}

/* Tutor'un kendi logosu ve üst başlığı sitede zaten var, gizleniyor */
.tutor-dashboard-layout.sa-panel .tutor-dashboard-header,
.tutor-dashboard-layout.sa-panel .tutor-dashboard-sidebar-logo,
.tutor-dashboard-layout.sa-panel .tutor-dashboard-sidebar .tutor-site-logo{ display: none !important; }

/* Sol menü bizim tipografimize gelsin */
.tutor-dashboard-layout.sa-panel .tutor-dashboard-permalinks a{
  border-radius: 8px; font-size: 15px;
}
.tutor-dashboard-layout.sa-panel .tutor-dashboard-permalinks .active a,
.tutor-dashboard-layout.sa-panel .tutor-dashboard-permalinks a[aria-current="page"]{
  background: var(--sa-zemin); color: var(--sa-derin);
}

@media (max-width: 900px){
  .tutor-dashboard-layout.sa-panel{ grid-template-columns: 1fr; gap: 18px; padding-top: 24px; }
  .tutor-dashboard-layout.sa-panel .tutor-dashboard-sidebar{ position: static; }
}

/* Tutor panelinin kendi renkleri bizim palete çekiliyor.
   Değişkenleri panelin kökünde ezdiğimiz için eklenti
   güncellendiğinde de geçerli kalıyor. */
.tutor-dashboard-layout.sa-panel,
.sa-panel-alan .tutor-dashboard-layout{
  --tutor-color-primary:            var(--sa-turuncu);
  --tutor-color-primary-hover:      var(--sa-turuncu-koyu);
  --tutor-color-primary-rgb:        239, 92, 38;
  --tutor-actions-brand-primary:    var(--sa-turuncu);
  --tutor-actions-brand-secondary:  var(--sa-turuncu-koyu);
  --tutor-border-brand:             var(--sa-turuncu);
  --tutor-brand-500:                var(--sa-turuncu);
  --tutor-brand-600:                var(--sa-turuncu-koyu);
  --tutor-color-secondary:          var(--sa-mavi-koyu);
  --tutor-body-color:               var(--sa-metin);
  --tutor-color-black:              var(--sa-derin);
}
/* İstatistik kutularındaki mor, turkuaz ve sarı rakamlar tek dile geliyor */
.sa-panel .tutor-dashboard-info-card .tutor-fs-4,
.sa-panel [class*="tutor-statistic"] .tutor-fs-4,
.sa-panel .tutor-dashboard-page h3[class*="tutor-color"]{
  color: var(--sa-derin) !important;
}
.sa-panel .tutor-btn-primary{
  background-color: var(--sa-turuncu) !important;
  border-color: var(--sa-turuncu) !important;
}
.sa-panel .tutor-btn-primary:hover{
  background-color: var(--sa-turuncu-koyu) !important;
  border-color: var(--sa-turuncu-koyu) !important;
}

/* ============================================================
   21. GİRİŞ VE KAYIT
   ============================================================ */
.sa-giris-kutu{
  max-width: 460px; background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: var(--sa-yuvarlak);
  padding: 32px; box-shadow: var(--sa-golge);
}
.sa-giris-kutu .tutor-login-wrap{ box-shadow: none; padding: 0; }

/* ============================================================
   22. BULUNAMAYAN SAYFA
   ============================================================ */
.sa-404-alan{ background: var(--sa-zemin); }
.sa-404{ padding: 80px 0 96px; max-width: 760px; }
.sa-404__et{ color: var(--sa-turuncu); font-size: 14px; letter-spacing: .2em; margin-bottom: 16px; }
.sa-404__baslik{ font-size: 40px; line-height: 1.1; color: var(--sa-derin); margin: 0 0 16px; }
.sa-404__metin{ font-size: 17px; color: var(--sa-gri); line-height: 1.65; margin: 0 0 28px; max-width: 54ch; }

.sa-404__arama{ display: flex; gap: 10px; margin-bottom: 40px; max-width: 520px; }
.sa-404__arama input[type="search"]{
  flex: 1; padding: 13px 16px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--sa-cizgi); border-radius: 8px; background: var(--sa-beyaz); color: var(--sa-metin);
}
.sa-404__arama input[type="search"]:focus{ outline: 2px solid var(--sa-mavi); outline-offset: 1px; }
.sa-404__arama button{
  background: var(--sa-turuncu); color: var(--sa-beyaz); border: 0; border-radius: 8px;
  padding: 13px 26px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .16s ease;
}
.sa-404__arama button:hover{ background: var(--sa-turuncu-koyu); }

.sa-404__kapilar{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .sa-404__kapilar{ grid-template-columns: 1fr; } .sa-404__baslik{ font-size: 30px; } }
.sa-404__kapilar a{
  display: block; text-decoration: none; padding: 18px 20px;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); box-shadow: var(--sa-golge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sa-404__kapilar a:hover{ transform: translateY(-2px); box-shadow: var(--sa-golge-ust); border-color: var(--sa-mavi); }
.sa-404__kapilar b{ display: block; font-size: 16px; color: var(--sa-derin); margin-bottom: 4px; }
.sa-404__kapilar span{ display: block; font-size: 14px; color: var(--sa-gri); line-height: 1.5; }
@media (prefers-reduced-motion: reduce){ .sa-404__kapilar a{ transition: none; } .sa-404__kapilar a:hover{ transform: none; } }

/* ============================================================
   23. EĞİTİM DETAY SAYFASI
   Şablon: woocommerce/single-product.php
   ============================================================ */
.sa-egitim{ background: var(--sa-beyaz); }

/* Üstte kendi boşluğumuzu koymuyoruz: ürün sayfalarında gövdeye
   content-vertical-padding-show sınıfı geliyor ve Kadence zaten
   32px bırakıyor. İkisi üst üste binince başlıkla ilk satır arası
   81px oluyordu, sitenin geri kalanı ~32px. */
.sa-egitim__ust{ padding: 0 0 28px; }
.sa-egitim__kod{
  display: block; margin-bottom: 12px;
  font-family: var(--sa-kod-yazi);
  font-size: 12.5px; letter-spacing: .08em; color: var(--sa-gri);
}
.sa-egitim__baslik{
  font-size: 36px; line-height: 1.13; color: var(--sa-derin);
  margin: 0 0 14px; max-width: 24ch;
}
.sa-egitim__vaat{ font-size: 17px; line-height: 1.65; color: var(--sa-gri); max-width: 60ch; }
.sa-egitim__vaat p{ margin: 0 0 10px; }

/* format anahtarı */
.sa-fmt-anahtar{ display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.sa-fmt{
  display: block; text-decoration: none; min-width: 168px;
  border: 1px solid var(--sa-cizgi); border-radius: 10px;
  padding: 11px 15px; background: var(--sa-beyaz);
  transition: border-color .16s ease, background-color .16s ease;
}
.sa-fmt:hover{ border-color: var(--sa-mavi); }
.sa-fmt--secili{
  border: 2px solid var(--sa-turuncu); padding: 10px 14px;
  background: color-mix(in srgb, var(--sa-turuncu) 6%, white);
}
.sa-fmt i{
  display: block; font-style: normal;
  font-family: var(--sa-kod-yazi);
  font-size: 11px; letter-spacing: .05em; color: var(--sa-gri); margin-bottom: 3px;
}
.sa-fmt--secili i{ color: var(--sa-turuncu-koyu); }
.sa-fmt b{ display: block; font-size: 14px; color: var(--sa-derin); line-height: 1.3; }
.sa-fmt span{
  display: block; margin-top: 4px;
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--sa-gri);
}
.sa-fmt-not, .sa-fmt-tek{
  font-family: inherit;
  font-size: 12.5px; color: var(--sa-gri); margin: 12px 0 0; letter-spacing: .02em;
}
.sa-fmt-tek{ font-size: 14px; font-family: inherit; }

/* gövde: içerik + karar sütunu */
.sa-egitim__govde{
  display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 40px;
  padding-bottom: 48px; align-items: start;
}
/* min-width:0 şart: bu blok ızgara (grid) hücresinin içinde duruyor ve
   ızgara hücresinin varsayılan alt sınırı "içeriğin en dar hâli". İçeride
   geniş bir görsel/video olduğunda hücre o genişliğe kadar şişiyor, dar
   ekranda satırlar ekranın dışında kalıyor ve üst kapsayıcı overflow'u
   kestiği için kaydırarak da ulaşılamıyordu. */
.sa-egitim__icerik{ max-width: 760px; min-width: 0; font-size: 16px; line-height: 1.75; color: var(--sa-metin); }
.sa-egitim__icerik h2, .sa-egitim__icerik h3{ color: var(--sa-derin); margin: 32px 0 12px; }
.sa-egitim__icerik h2{ font-size: 23px; } .sa-egitim__icerik h3{ font-size: 19px; }
.sa-egitim__icerik > *:first-child{ margin-top: 0; }
.sa-egitim__icerik ul{ padding-left: 0; list-style: none; display: grid; gap: 9px; margin: 0 0 22px; }
.sa-egitim__icerik li{ position: relative; padding-left: 22px; }
.sa-egitim__icerik li::before{
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sa-turuncu);
}

/* karar kartı */
.sa-karar{
  position: sticky; top: 20px;
  border: 1px solid var(--sa-cizgi); border-radius: 12px;
  background: var(--sa-beyaz); box-shadow: var(--sa-golge); padding: 22px;
}
.sa-karar__rozet{
  display: inline-block; margin-bottom: 14px;
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 10.5px; padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--sa-mavi-koyu); color: var(--sa-mavi-koyu);
}
.sa-karar__fiyat{ font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 27px; color: var(--sa-derin); line-height: 1.15; }
.sa-karar__fiyat .woocommerce-Price-amount{ font-size: 26px; }
.sa-karar__fiyat del{ opacity: .5; font-size: 17px; }
.sa-karar__fiyat small{ display: block; margin-top: 6px; font-family: var(--sa-metni, inherit); font-size: 11.5px; color: var(--sa-gri); }
.sa-karar__teklif b{ display: block; font-size: 20px; color: var(--sa-derin); }
.sa-karar__teklif span{ display: block; margin-top: 5px; font-size: 12.5px; color: var(--sa-gri); line-height: 1.5; }
.sa-karar__et{
  display: block; margin: 20px 0 10px;
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-karar__dgm{
  display: block; text-align: center; text-decoration: none;
  background: var(--sa-turuncu); color: var(--sa-beyaz);
  font-weight: 700; font-size: 14.5px; padding: 13px; border-radius: 9px; margin-top: 14px;
  transition: background-color .16s ease;
}
.sa-karar__dgm:hover{ background: var(--sa-turuncu-koyu); color: var(--sa-beyaz); }
.sa-karar__dgm--cerceve{
  background: transparent; color: var(--sa-derin);
  border: 2px solid var(--sa-derin); padding: 11px;
}
.sa-karar__dgm--cerceve:hover{ background: var(--sa-derin); color: var(--sa-beyaz); }
.sa-karar__sert{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sa-cizgi-ince); }
.sa-karar__sert a{
  display: block; text-decoration: none; padding: 5px 0;
  font-family: inherit;
  font-size: 13px; color: var(--sa-mavi-koyu);
}
.sa-karar__sert a:hover{ text-decoration: underline; }

/* Tek başına satılmayan program adımı (SA-604): fiyat kutusunun yerini
   ne olduğunu anlatan sakin bir panel alıyor. */
.sa-karar__parca{
  margin-bottom: 18px; padding: 16px 18px;
  background: var(--sa-zemin); border-radius: 10px;
  border-left: 3px solid var(--sa-mavi);
}
.sa-karar__parca b{
  display: block; margin-bottom: 6px;
  font-size: 15px; font-weight: 700; color: var(--sa-derin);
}
.sa-karar__parca p{
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sa-metin);
}

/* WooCommerce formunu sayfanın diline çekiyoruz */
.sa-karar .variations{ margin: 0; }
.sa-karar .variations th{ display: none; }
.sa-karar .variations td{ display: block; padding: 0; }
.sa-karar .variations select{
  width: 100%; padding: 12px 14px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--sa-cizgi); border-radius: 8px; background: var(--sa-beyaz); color: var(--sa-metin);
}
.sa-karar .reset_variations{ font-size: 12px; color: var(--sa-gri); }
.sa-karar .quantity{ display: none; }
.sa-karar .single_add_to_cart_button{
  display: block; width: 100%; text-align: center;
  background: var(--sa-turuncu); color: var(--sa-beyaz);
  border: 0; border-radius: 9px; padding: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  margin-top: 14px; transition: background-color .16s ease;
}
.sa-karar .single_add_to_cart_button:hover{ background: var(--sa-turuncu-koyu); }
.sa-karar .woocommerce-variation-price{ margin: 14px 0 0; font-family: inherit; font-variant-numeric: tabular-nums; }
.sa-karar .woocommerce-variation-availability{ font-size: 12.5px; color: var(--sa-gri); }

/* sayfa sonundaki ikinci karar şeridi */
.sa-egitim__alt{
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--sa-zemin); border: 1px solid var(--sa-cizgi);
  border-radius: 12px; padding: 24px 28px; margin-bottom: 56px;
}
.sa-egitim__alt-et{
  display: block; margin-bottom: 5px;
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-egitim__alt strong{ font-size: 19px; color: var(--sa-derin); }
.sa-egitim__alt .sa-karar__dgm{ margin-top: 0; padding: 13px 28px; }

@media (max-width: 900px){
  .sa-egitim__govde{ grid-template-columns: 1fr; gap: 28px; }
  .sa-karar{ position: static; }
  .sa-egitim__baslik{ font-size: 27px; }
  .sa-fmt{ min-width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .sa-fmt, .sa-karar__dgm, .sa-karar .single_add_to_cart_button{ transition: none; }
}

/* --- 24. YAKINDA İŞARETİ ------------------------------------------ */
.sa-kart__fiyat--yakinda {
	color: var(--global-palette6);
	font-weight: 600;
	letter-spacing: .02em;
}
.sa-fmt span:only-of-type { opacity: 1; }

/* --- 25. EĞİTİM RENKLERİ ------------------------------------------
   Her eğitimin kendi rengi var. Kod nerede geçiyorsa o renkte yazılıyor;
   renk `--sa-egitim-renk` değişkeniyle PHP tarafından taşınıyor.
   Değişken yoksa hiçbir şey bozulmuyor, marka lacivertine düşüyor.
------------------------------------------------------------------- */
.sa-kart__kod,
.sa-egitim__kod,
.sa-fmt i,
.sa-takvim__ad i{
  color: var(--sa-egitim-renk, var(--sa-gri));
  font-weight: 600;
}

/* karttaki ince renk şeridi */
.sa-kart{ position: relative; }
.sa-kart::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--sa-egitim-renk, var(--sa-cizgi));
  border-radius: 10px 10px 0 0;
  opacity: .85;
}
.sa-kart:hover::before{ opacity: 1; }

/* takvim satırında soldaki renk çizgisi */
.sa-takvim__satir{ box-shadow: inset 3px 0 0 var(--sa-egitim-renk, transparent); }

/* eğitim detayında kodun altındaki çizgi */
.sa-egitim__kod{
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--sa-egitim-renk, var(--sa-cizgi));
}

/* Seçili format kutusu marka turuncusunda kalıyor: "buradasınız" işareti
   bütün eğitimlerde aynı olsun, eğitim rengiyle karışmasın. */

/* APS bordosu: uluslararası sertifika ailesinin kendi rengi */
:root{ --sa-aps: #7B2929; }

/* ============================================================
   26. SERTİFİKA PROGRAMI KARTLARI
   [sa_programlar] ve [sa_program_ekleri]
   ============================================================ */
.sa-programlar{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px){ .sa-programlar{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .sa-programlar{ grid-template-columns: 1fr; } }

.sa-prog{
  position: relative; display: flex; flex-direction: column; gap: 10px;
  box-sizing: border-box; text-decoration: none;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 24px 22px 20px;
  box-shadow: var(--sa-golge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sa-prog::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--sa-egitim-renk, var(--sa-cizgi));
  border-radius: 10px 10px 0 0;
}
.sa-prog:hover{ transform: translateY(-3px); box-shadow: var(--sa-golge-ust); border-color: var(--sa-mavi); }
.sa-prog__ust{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-prog__kod{
  font-family: var(--sa-kod-yazi); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; color: var(--sa-egitim-renk, var(--sa-derin));
}
.sa-prog__ad{ font-size: 17px; font-weight: 700; color: var(--sa-derin); line-height: 1.3; }
.sa-prog__ozet{ font-size: 14.5px; color: var(--sa-gri); line-height: 1.5; }
.sa-prog__bilgi{
  font-size: 13px; color: var(--sa-gri);
  padding-top: 12px; border-top: 1px solid var(--sa-cizgi-ince); margin-top: 4px;
}
.sa-prog__alt{ margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sa-prog__fiyat{ font-size: 19px; font-weight: 700; color: var(--sa-derin); font-variant-numeric: tabular-nums; }
/* Alınış yolları.
   Program birden fazla yolla alınabiliyorsa hepsi kartın içinde,
   adıyla ve fiyatıyla listeleniyor. Tek yol varsa yukarıdaki
   .sa-prog__alt yeterli, bu blok hiç çıkmıyor. */
.sa-prog__yollar{
  margin-top: auto; padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.sa-prog__yol{
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 3px 12px;
  padding-top: 8px; border-top: 1px solid var(--sa-cizgi-ince);
}
.sa-prog__yol:first-child{ padding-top: 0; border-top: 0; }
.sa-prog__yol b{ font-size: 14px; font-weight: 600; color: var(--sa-derin); line-height: 1.3; }
.sa-prog__yol i{
  font-style: normal; font-size: 17px; font-weight: 700; color: var(--sa-derin);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sa-prog__yol i .sa-kdv{ font-size: 11.5px; font-weight: 400; color: var(--sa-gri); }
/* Yolun notu: "Kendi hızınızda" ya da "Ön koşul: CPP sertifikası" */
.sa-prog__yol em{
  grid-column: 1 / -1; font-style: normal;
  font-size: 12.5px; color: var(--sa-gri); line-height: 1.4;
}

.sa-rozet--ulusal{ border-color: var(--sa-mavi-koyu); color: var(--sa-mavi-koyu); }
.sa-rozet--global{ border-color: var(--sa-aps); color: var(--sa-aps); }

/* koşula bağlı ek adımlar */
.sa-ekler{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px){ .sa-ekler{ grid-template-columns: 1fr; } }
.sa-ek{
  display: flex; flex-direction: column; gap: 9px; box-sizing: border-box;
  text-decoration: none; background: var(--sa-zemin);
  border: 1px solid var(--sa-cizgi); border-left: 3px solid var(--sa-egitim-renk, var(--sa-cizgi));
  border-radius: var(--sa-yuvarlak); padding: 20px 22px;
  transition: background-color .18s ease, border-color .18s ease;
}
.sa-ek:hover{ background: var(--sa-beyaz); border-color: var(--sa-mavi); border-left-color: var(--sa-egitim-renk, var(--sa-mavi)); }
.sa-ek__kod{ font-family: var(--sa-kod-yazi); font-size: 12.5px; color: var(--sa-egitim-renk, var(--sa-gri)); letter-spacing: .04em; }
.sa-ek__ad{ font-size: 16px; font-weight: 700; color: var(--sa-derin); line-height: 1.3; }
.sa-ek__ozet{ font-size: 14px; color: var(--sa-gri); line-height: 1.5; }
.sa-ek__kosul{
  font-size: 13px; color: var(--sa-metin); line-height: 1.5;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi-ince);
  border-radius: 6px; padding: 9px 11px;
}
.sa-ek:hover .sa-ek__kosul{ background: var(--sa-zemin); }
.sa-ek__kosul b{
  display: block; font-family: var(--sa-kod-yazi); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--sa-gri); margin-bottom: 3px;
}
.sa-ek__fiyat{ margin-top: auto; padding-top: 10px; font-size: 17px; font-weight: 700; color: var(--sa-derin); font-variant-numeric: tabular-nums; }

/* program sayfası ek blokları */
.sa-prog__veren{ font-size: 14px; color: var(--sa-gri); margin: 0 0 4px; }
.sa-fmt em{ display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: var(--sa-gri); }
.sa-prog-kapsam{ margin: 0 0 34px; }
.sa-prog-kapsam h2{ font-size: 23px; margin: 0 0 8px; }
.sa-prog-kapsam h3{ font-size: 18px; margin: 26px 0 10px; }
.sa-prog-kapsam__not{ font-size: 14px; color: var(--sa-gri); margin: 0 0 18px; }
.sa-prog-sinav{ list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.sa-prog-sinav li{
  display: flex; align-items: baseline; gap: 12px; padding: 11px 14px;
  background: var(--sa-zemin); border: 1px solid var(--sa-cizgi-ince); border-radius: 8px;
  font-size: 15px;
}
.sa-prog-sinav__kod{
  font-family: var(--sa-kod-yazi); font-size: 12.5px; font-weight: 600;
  color: var(--sa-egitim-renk, var(--sa-gri)); flex: none;
}
.sa-prog-onkosul{
  margin-top: 20px; padding: 14px 16px; font-size: 14.5px; line-height: 1.55;
  background: var(--sa-zemin); border-left: 3px solid var(--sa-turuncu); border-radius: 0 8px 8px 0;
}
.sa-prog-onkosul b{
  display: block; font-family: var(--sa-kod-yazi); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--sa-gri); margin-bottom: 4px;
}

/* ------------------------------------------------------------------
   Paket (bundle) kayıt formu — karar sütununda
   Program ürünleri kapsadıkları eğitimleri form içinde de listeliyor.
   Eğitim listesi zaten sayfanın gövdesinde durduğu için buradaki
   tekrarı sadeleştiriyoruz: görseller kalkıyor, tarih seçimleri kalıyor.
------------------------------------------------------------------- */
.sa-karar .bundled_product_images,
.sa-karar .bundled_product_image,
.sa-karar .woocommerce-product-gallery__image{ display: none !important; }

.sa-karar .bundled_product{
  padding: 12px 0; border-bottom: 1px solid var(--sa-cizgi-ince); margin: 0;
}
.sa-karar .bundled_product:first-child{ padding-top: 0; }
.sa-karar .bundled_product_title{
  font-size: 14px; font-weight: 600; color: var(--sa-derin);
  margin: 0 0 8px; line-height: 1.35;
}
.sa-karar .bundled_product_title .amount,
.sa-karar .bundled_product_title del,
.sa-karar .bundled_product_title ins{ display: none; }
.sa-karar .bundled_item_cart_content .quantity{ display: none; }
.sa-karar .bundled_product_excerpt,
.sa-karar .bundled_product_description{ display: none; }
.sa-karar .bundle_price{ margin: 14px 0 0; }
.sa-karar .bundle_button{ margin-top: 12px; }
.sa-karar .bundle_error{ font-size: 13px; color: var(--sa-turuncu-koyu); }

/* kod etiketleri satır atlamasın */
.sa-kart__kod, .sa-prog__kod, .sa-ek__kod, .sa-egitim__kod, .sa-fmt i{ white-space: nowrap; }

/* fiyatın yanındaki KDV notu */
.sa-kdv{
  font-size: .62em; font-weight: 500; letter-spacing: .02em;
  color: var(--sa-gri); white-space: nowrap;
}
.sa-takvim__fiyat .sa-kdv{ display: block; font-size: 11px; }

/* ============================================================
   27. BİLGİ KARTLARI
   Sertifika rehberi gibi anlatım sayfalarında, dört beş maddeyi
   yan yana koymak için. İçeriği düz HTML olarak metin bloğunda
   duruyor, panelden düzenlenebiliyor.
   ============================================================ */
.sa-bilgi-izgara{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px){ .sa-bilgi-izgara{ grid-template-columns: 1fr; } }
.sa-bilgi{
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 24px 26px;
  border-top: 4px solid var(--sa-bilgi-renk, var(--sa-mavi));
  box-sizing: border-box;
}
.sa-bilgi h3{ font-size: 19px; color: var(--sa-derin); margin: 0 0 10px; line-height: 1.3; }
.sa-bilgi p{ font-size: 15px; color: var(--sa-metin); line-height: 1.65; margin: 0 0 10px; }
.sa-bilgi p:last-child{ margin-bottom: 0; }
.sa-bilgi__et{
  display: inline-block; font-family: var(--sa-kod-yazi); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--sa-bilgi-renk, var(--sa-gri)); margin-bottom: 8px;
}
.sa-bilgi a{ color: var(--sa-mavi-koyu); font-weight: 600; }
.sa-bilgi--global{ --sa-bilgi-renk: var(--sa-aps); }
.sa-bilgi--ulusal{ --sa-bilgi-renk: var(--sa-derin); }
.sa-bilgi--basari{ --sa-bilgi-renk: var(--sa-turuncu); }
.sa-bilgi--katilim{ --sa-bilgi-renk: var(--sa-mavi); }

/* Koyu zeminde öne çıkarılan cümle */
.sa-alinti{
  margin: 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--sa-turuncu);
  font-size: 21px; line-height: 1.45; font-weight: 600;
  color: var(--sa-beyaz);
}
.sa-alinti small{
  display: block; margin-top: 14px;
  font-family: var(--sa-kod-yazi); font-size: 11px; font-weight: 400;
  letter-spacing: .11em; text-transform: uppercase; color: #A9C6DB;
}
@media (max-width: 820px){ .sa-alinti{ font-size: 18px; margin-top: 24px; } }

/* ============================================================
   28. EĞİTİM MÜFREDATI
   Künye şeridi, kimler için ve açılır kapanır ders programı.
   İçerik sa-icerik.php'den geliyor, sayfada elle yazılmıyor.
   ============================================================ */
.sa-kunye{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--sa-cizgi-ince);
  border-top: 1px solid var(--sa-cizgi-ince); border-bottom: 1px solid var(--sa-cizgi-ince);
  margin: 0 0 30px;
}
@media (max-width: 620px){ .sa-kunye{ grid-template-columns: 1fr; } }
.sa-kunye > div{ background: var(--sa-beyaz); padding: 16px 18px; }
.sa-kunye b{
  display: block; font-size: 20px; font-weight: 700; color: var(--sa-derin);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.sa-kunye span{ display: block; margin-top: 5px; font-size: 12.5px; color: var(--sa-gri); line-height: 1.4; }

.sa-kimin{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0 0 32px; }
@media (max-width: 760px){ .sa-kimin{ grid-template-columns: 1fr; gap: 22px; } }
.sa-kimin h4{
  font-family: var(--sa-kod-yazi); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sa-gri);
  margin: 0 0 12px;
}
.sa-kimin ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sa-kimin li{ position: relative; padding-left: 19px; font-size: 15px; color: var(--sa-metin); line-height: 1.5; }
.sa-kimin li::before{
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sa-egitim-renk, var(--sa-turuncu));
}

.sa-mufredat{ margin: 34px 0 0; }
.sa-mufredat__baslik{ font-size: 23px; color: var(--sa-derin); margin: 0 0 6px; }
.sa-mufredat__ozet{ font-size: 14px; color: var(--sa-gri); margin: 0 0 18px; }

.sa-modul{ border-bottom: 1px solid var(--sa-cizgi-ince); }
.sa-modul summary{
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 2px; cursor: pointer; list-style: none;
}
.sa-modul summary::-webkit-details-marker{ display: none; }
.sa-modul summary::marker{ content: ""; }
.sa-modul summary:hover .sa-modul__ad{ color: var(--sa-egitim-renk, var(--sa-mavi-koyu)); }
.sa-modul summary:focus-visible{ outline: 2px solid var(--sa-mavi-koyu); outline-offset: 2px; }
.sa-modul__no{
  flex: none; width: 26px; font-family: var(--sa-kod-yazi); font-size: 12px;
  color: var(--sa-egitim-renk, var(--sa-gri)); font-variant-numeric: tabular-nums;
}
.sa-modul__ad{ flex: 1; font-size: 16.5px; font-weight: 700; color: var(--sa-derin); line-height: 1.35; }
.sa-modul__sayi{ flex: none; font-size: 12.5px; color: var(--sa-gri); }
.sa-modul[open] .sa-modul__ad{ color: var(--sa-egitim-renk, var(--sa-mavi-koyu)); }
.sa-modul__alt{
  margin: 0 0 16px 40px; padding: 0; list-style: none; display: grid; gap: 7px;
}
.sa-modul__alt li{ position: relative; padding-left: 16px; font-size: 14.5px; color: var(--sa-metin); line-height: 1.5; }
.sa-modul__alt li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sa-mavi);
}

/* ============================================================
   29. İNDİRME KUTUSU
   Download Manager'ın kendi görünümü yerine ev formatı. Eklentinin
   CSS'ini yüklemiyoruz; kutuyu burada kuruyoruz.
   ============================================================ */
.sa-egitim__icerik .w3eden,
.sa-egitim__icerik .wpdm-package-description ~ *,
.sa-egitim__icerik [class*="wpdm"]{ max-width: 100%; }

.sa-egitim__icerik .wpdm_icon{
  width: 34px !important; height: 34px !important;
  flex: none; object-fit: contain;
}
.sa-egitim__icerik .package-title{
  font-size: 16px !important; font-weight: 700; color: var(--sa-derin);
  margin: 0; line-height: 1.35; flex: 1 1 auto; min-width: 0;
}
.sa-egitim__icerik .package-title a{ color: inherit; text-decoration: none; }
.sa-egitim__icerik .wpdm-download-link{
  display: inline-block; flex: none;
  background: var(--sa-turuncu); color: var(--sa-beyaz) !important;
  border: 0; border-radius: 8px; padding: 11px 20px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color .16s ease;
}
.sa-egitim__icerik .wpdm-download-link:hover{ background: var(--sa-turuncu-koyu); color: var(--sa-beyaz) !important; }

/* WPDM paket kutusu: tam genişlik satır düzeni */
.sa-egitim__icerik .link-template-default,
.sa-egitim__icerik .wpdm-front{
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
  width: 100%; box-sizing: border-box;
  background: var(--sa-zemin); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 16px 20px; margin: 0 0 12px;
}
@media (max-width: 620px){
  .sa-egitim__icerik .link-template-default,
  .sa-egitim__icerik .wpdm-front{ flex-wrap: wrap; gap: 12px; }
  .sa-egitim__icerik .wpdm-download-link{ width: 100%; text-align: center; }
}
.sa-dosya-not{ font-size: 14px; color: var(--sa-gri); margin: 0 0 14px; }
.sa-egitim__icerik .img-48, .sa-egitim__icerik .mr-3{ display: flex; align-items: center; }

/* eğitim özet listesi (video saati, şablon, test sayısı) */
.sa-egitim__icerik .sa-icerik-liste{
  list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px;
}
.sa-egitim__icerik .sa-icerik-liste li{
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.5; color: var(--sa-metin);
}
.sa-egitim__icerik .sa-icerik-liste li::before{
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--sa-egitim-renk, var(--sa-mavi-koyu));
}

/* videonun yanından taşınan özet bölümü: kimin için başlıklarıyla aynı format */
.sa-egitim__icerik .sa-alt-baslik{
  font-family: var(--sa-kod-yazi); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sa-gri);
  margin: 0 0 12px; padding-top: 34px;
}
/* Sayfanın ilk başlığı yukarıdan boşluk almasın. WPBakery bütün
   satırları tek bir sarmalayıcıya koyduğu için ilk satırı hedefliyoruz. */
.sa-egitim__icerik .vc_row:first-child .sa-alt-baslik,
.sa-egitim__icerik > .sa-alt-baslik:first-child{ padding-top: 0; }

/* Numaralı süreç listesi. İçerik alanının genel madde işareti kuralı
   aynı ağırlıkta olduğu için burada tekrar tanımlanıyor. */
.sa-egitim__icerik .sa-adimlar{
  counter-reset: sa-adim; list-style: none; padding-left: 0;
  display: grid; gap: 13px; margin: 0 0 22px;
}
.sa-egitim__icerik .sa-adimlar li{ padding-left: 36px; }
.sa-egitim__icerik .sa-adimlar li::before{
  counter-increment: sa-adim; content: counter(sa-adim);
  position: absolute; left: 0; top: 4px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--sa-egitim-renk, var(--sa-mavi-koyu)); color: var(--sa-beyaz);
  font-family: var(--sa-kod-yazi); font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sa-egitim__icerik .sa-adimlar b{ color: var(--sa-derin); font-weight: 600; }

/* ============================================================
   30. SERTİFİKALI PROFESYONELLER DUVARI
   Bu sayfa bir onur listesi. CPPM sahibi kartlar APS bordosuyla
   ayrılıyor; süzgeç, arama ve sayaç tema tarafından ekleniyor.
   ============================================================ */
.sa-duvar-ara{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--sa-cizgi-ince);
}
.sa-duvar-suzgec{ display: flex; gap: 8px; flex-wrap: wrap; }
.sa-duvar-dgm{
  display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer;
  background: var(--sa-beyaz); color: var(--sa-metin);
  border: 1px solid var(--sa-cizgi); border-radius: 30px;
  padding: 8px 15px; font-family: inherit; font-size: 14px; line-height: 1;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.sa-duvar-dgm i{
  font-style: normal; font-family: var(--sa-kod-yazi);
  font-size: 10.5px; color: var(--sa-gri);
}
.sa-duvar-dgm:hover{ border-color: var(--sa-mavi); }
.sa-duvar-dgm:focus-visible{ outline: 2px solid var(--sa-turuncu); outline-offset: 2px; }
.sa-duvar-dgm[aria-pressed="true"]{
  background: var(--sa-derin); border-color: var(--sa-derin); color: var(--sa-beyaz);
}
.sa-duvar-dgm[aria-pressed="true"] i{ color: #A9C6DB; }
/* CPPM süzgeci seçiliyken bordoya dönüyor */
.sa-duvar-dgm[data-anahtar="cppm"][aria-pressed="true"]{
  background: var(--sa-aps); border-color: var(--sa-aps);
}
.sa-duvar-dgm[data-anahtar="cppm"][aria-pressed="true"] i{ color: #E7C3C3; }

.sa-duvar-ara input{
  flex: 1 1 240px; max-width: 320px;
  padding: 10px 14px; font-size: 15px; font-family: inherit;
  color: var(--sa-metin); background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: 8px;
}
.sa-duvar-ara input:focus{ outline: 2px solid var(--sa-mavi); outline-offset: 1px; border-color: var(--sa-mavi); }
.sa-duvar-sayac{
  margin-left: auto;
  font-family: var(--sa-kod-yazi); font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--sa-gri);
}
.sa-duvar-bos{ font-size: 15px; color: var(--sa-gri); margin: 0; }

.sa-duvar{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 18px; margin: 0;
}
.sa-kisi{
  position: relative; overflow: hidden;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 20px 12px 16px;
  text-align: center; box-sizing: border-box;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sa-kisi:hover{ box-shadow: var(--sa-golge-ust); transform: translateY(-2px); }

.sa-kisi img,
.sa-kisi .sa-kisi__bas{
  width: 108px; height: 108px; border-radius: 8px;
  display: block; margin: 0 auto 13px; background: var(--sa-zemin);
}
.sa-kisi img{ object-fit: cover; object-position: top center; }
.sa-kisi .sa-kisi__bas{
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sa-kod-yazi); font-size: 22px; color: var(--sa-mavi-koyu);
  border: 1px dashed var(--sa-cizgi); box-sizing: border-box;
}
.sa-kisi b{ display: block; font-size: 14.5px; font-weight: 600; color: var(--sa-derin); line-height: 1.35; }
.sa-kisi span{ display: block; margin-top: 5px; font-size: 12.5px; color: var(--sa-gri); line-height: 1.4; }
.sa-kisi i{
  display: inline-block; margin-top: 11px; font-style: normal;
  font-family: var(--sa-kod-yazi); font-size: 9.5px; letter-spacing: .1em;
  color: var(--sa-mavi-koyu); border: 1px solid var(--sa-cizgi);
  border-radius: 20px; padding: 3px 10px;
}

/* CPPM: iki sertifikalı profesyoneller */
.sa-kisi--cppm{ border-color: color-mix(in srgb, var(--sa-aps) 34%, white); }
.sa-kisi--cppm::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--sa-aps);
}
.sa-kisi--cppm img,
.sa-kisi--cppm .sa-kisi__bas{
  box-shadow: 0 0 0 2px var(--sa-beyaz), 0 0 0 4px var(--sa-aps);
}
.sa-kisi--cppm img{ border-radius: 8px; }
.sa-kisi--cppm .sa-kisi__bas{ border-color: color-mix(in srgb, var(--sa-aps) 40%, white); color: var(--sa-aps); }
.sa-kisi--cppm i{ color: var(--sa-beyaz); background: var(--sa-aps); border-color: var(--sa-aps); }

@media (max-width: 520px){
  .sa-duvar{ grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
  .sa-kisi img, .sa-kisi .sa-kisi__bas{ width: 86px; height: 86px; }
  .sa-duvar-sayac{ margin-left: 0; }
}

/* ============================================================
   31. KURUCUMUZ SAYFASI
   ============================================================ */
.sa-portre{
  display: block; width: auto; max-width: 100%;
  max-height: 300px; height: auto;
  margin: 0 0 0 auto;
  /* Fotoğrafın beyaz zemini JPEG'e gömülü; çarpma karışımı onu
     arka planla eritiyor, kesme yapmaya gerek kalmıyor. */
  mix-blend-mode: multiply;
}
@media (max-width: 820px){ .sa-portre{ margin: 24px auto 0; max-height: 260px; } }

.sa-gorevler{
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--sa-cizgi-ince);
}
.sa-gorevler li{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px; padding: 15px 0;
  border-bottom: 1px solid var(--sa-cizgi-ince);
}
.sa-gorevler b{ font-size: 15.5px; font-weight: 600; color: var(--sa-derin); line-height: 1.4; }
.sa-gorevler span{ font-size: 14.5px; color: var(--sa-metin); line-height: 1.55; }
@media (max-width: 700px){
  .sa-gorevler li{ grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   32. KATILIMCI GÖRÜŞLERİ DUVARI
   Yorumlar farklı uzunlukta; sütun düzeni boşluk bırakmıyor.
   ============================================================ */
.sa-yorumlar-duvar{ columns: 3; column-gap: 22px; }
.sa-yorumlar-duvar .sa-yorum{ break-inside: avoid; margin: 0 0 22px; }
@media (max-width: 1000px){ .sa-yorumlar-duvar{ columns: 2; } }
@media (max-width: 640px){ .sa-yorumlar-duvar{ columns: 1; } }

/* WPBakery metin kutusu, HTML blokların arasına boş paragraf koyuyor;
   kart içlerinde bunlar boşluk yaratmasın. */
.sa-yorumlar-duvar p:empty,
.sa-duvar p:empty,
.sa-bilgi-izgara p:empty,
.sa-bilgi p:empty{ display: none; }

/* Oranı korunan video kutusu */
.sa-video{ position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--sa-yuvarlak); overflow: hidden; background: var(--sa-derin); }
.sa-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   33. ÖĞRENME MODELİ SAYFASI
   Sekme içi iki sütun ve sayfanın altındaki düz metin özeti.
   Özet şeridi bilinçli olarak açık duruyor: sekmede gizli kalan
   metni hem arama motoru hem de sayfayı yazdıran görsün diye.
   ============================================================ */
.sa-model-ic{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 28px; align-items: start; }
.sa-model-ic > p{ margin: 0; }
@media (max-width: 780px){ .sa-model-ic{ grid-template-columns: 1fr; gap: 18px; } }

.sa-ozet-serit{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; }
.sa-ozet-serit > div{ border-top: 2px solid var(--sa-cizgi); padding-top: 14px; }
.sa-ozet-serit h4{
  font-family: var(--sa-kod-yazi); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sa-turuncu);
  margin: 0 0 8px;
}
.sa-ozet-serit b{ display: block; font-size: 16px; color: var(--sa-derin); margin-bottom: 6px; line-height: 1.3; }
.sa-ozet-serit p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--sa-metin); }
@media (max-width: 900px){ .sa-ozet-serit{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; } }
@media (max-width: 540px){ .sa-ozet-serit{ grid-template-columns: 1fr; } }

/* Sekme yüksekliği sabit kalsın ki sekme değişince sayfa zıplamasın */
.vc_tta.vc_tta-tabs.sa-model-sekme .vc_tta-panel-body{ min-height: 190px; }
@media (max-width: 900px){ .vc_tta.vc_tta-tabs.sa-model-sekme .vc_tta-panel-body{ min-height: 0; } }

/* Koyu zeminde sayılar */
.sa-sayi--acik b{ color: var(--sa-turuncu); }
.sa-sayi--acik span{ color: #A9C6DB; }

/* ============================================================
   34. REFERANS DUVARI
   Tek duvar, üstte sektör düğmeleri. Düğmeleri tema üretiyor.
   ============================================================ */
.sa-ref-filtre{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sa-ref-dgm{
  display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer;
  background: var(--sa-beyaz); color: var(--sa-metin);
  border: 1px solid var(--sa-cizgi); border-radius: 30px;
  padding: 8px 15px; font-family: inherit; font-size: 14px; line-height: 1;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.sa-ref-dgm i{
  font-style: normal; font-family: var(--sa-kod-yazi);
  font-size: 10.5px; color: var(--sa-gri);
}
.sa-ref-dgm:hover{ border-color: var(--sa-mavi); }
.sa-ref-dgm:focus-visible{ outline: 2px solid var(--sa-turuncu); outline-offset: 2px; }
.sa-ref-dgm[aria-pressed="true"]{
  background: var(--sa-derin); border-color: var(--sa-derin); color: var(--sa-beyaz);
}
.sa-ref-dgm[aria-pressed="true"] i{ color: #A9C6DB; }

.sa-ref-sayac{
  margin: 0 0 26px; font-family: var(--sa-kod-yazi);
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--sa-gri);
}

.sa-ref-baslik{
  font-family: var(--sa-kod-yazi) !important; font-size: 11px !important; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sa-gri) !important;
  margin: 0 0 14px !important; padding-top: 26px;
  border-top: 1px solid var(--sa-cizgi-ince);
}
.sa-ref-grup:first-of-type .sa-ref-baslik{ padding-top: 0; border-top: 0; }
.sa-ref-grup[hidden]{ display: none !important; }

.sa-ref-duvar .sa-logolar{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px; align-items: center;
}
.sa-ref-duvar .sa-logo{
  display: flex; align-items: center; justify-content: center;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi-ince);
  border-radius: 8px; padding: 14px 16px; height: 84px; box-sizing: border-box;
}
.sa-ref-duvar .sa-logo img{
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
}
@media (max-width: 560px){
  .sa-ref-duvar .sa-logolar{ grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
  .sa-ref-duvar .sa-logo{ height: 68px; padding: 10px; }
}

/* Yan yana duran düğme çifti */
.sa-dgm-yanyana .vc_btn3-container{
  display: inline-block; vertical-align: top;
  margin: 0 12px 12px 0;
}
.sa-dgm-yanyana .vc_btn3-container:last-child{ margin-right: 0; }

/* ============================================================
   35. MENÜ
   Açılan alt menü açık zeminde; koyu kutu sitenin geri kalanına
   göre ağır kalıyordu. Ölçüler Özelleştir'deki tipografi ayarını
   ezmesin diye yalnızca renk ve boşluk veriliyor.
   ============================================================ */
.header-navigation .sub-menu,
.header-navigation ul ul{
  background: var(--sa-beyaz) !important;
  border: 1px solid var(--sa-cizgi);
  border-top: 3px solid var(--sa-turuncu);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--sa-golge-ust);
  padding: 6px 0;
  overflow: hidden;
}
.header-navigation .sub-menu li > a,
.header-navigation ul ul li > a{
  color: var(--sa-derin) !important;
  background: transparent !important;
  font-size: 14px;
  padding: 9px 20px;
  border: 0 !important;
  transition: background-color .14s ease, color .14s ease;
}
.header-navigation .sub-menu li > a:hover,
.header-navigation .sub-menu li > a:focus,
.header-navigation .sub-menu li.current-menu-item > a{
  color: var(--sa-turuncu) !important;
  background: var(--sa-zemin) !important;
}

/* Hesap bağlantıları: menünün sonunda, gövdeden ince bir çizgiyle ayrı.
   Bu blok YALNIZCA masaüstü menü çubuğu içindir. Mobil çekmecenin zemini
   koyu olduğu için oraya renk dayatmıyoruz; Özelleştir'deki çekmece
   yazı rengi neyse öğeler onu alsın. */
.header-navigation .sa-menu-hesap > a{
  font-size: .82em;
  color: var(--sa-gri) !important;
}
.header-navigation .sa-menu-hesap > a:hover{ color: var(--sa-turuncu) !important; }
.header-navigation .sa-menu-hesap--vurgu > a{
  color: var(--sa-derin) !important;
  border: 1px solid var(--sa-cizgi); border-radius: 30px;
  padding-top: .35em; padding-bottom: .35em;
}
.header-navigation .sa-menu-hesap--vurgu > a:hover{
  border-color: var(--sa-turuncu); color: var(--sa-turuncu) !important;
}
/* Menü çubuğu daraldığında hesap bağlantıları YALNIZCA masaüstü
   başlıktan kalkar. Mobil çekmecedeki kopyaları görünmeye devam eder;
   görünümleri hemen aşağıdaki blokta ayrıca ayarlanıyor. */
@media (max-width: 1024px){
  .header-navigation .sa-menu-hesap{ display: none; }
}

/* Mobil çekmece (Kadence drawer): hesap bağlantıları menünün altında,
   ince bir çizgiyle ayrılmış, normal puntoda; "Kayıt Ol" dolu düğme. */
.mobile-navigation .sa-menu-hesap > a{
  padding-top: .8em; padding-bottom: .8em;
}
.mobile-navigation #mobile-menu > li:not(.sa-menu-hesap) + .sa-menu-hesap{
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--sa-cizgi-ince, #e3e9ee);
}
.mobile-navigation .sa-menu-hesap--vurgu > a{
  display: inline-block;
  margin: 10px 0 6px;
  padding: .7em 1.7em;
  border: 0; border-radius: 30px;
  background: var(--sa-turuncu);
  color: var(--sa-beyaz) !important;
  font-weight: 600;
}
.mobile-navigation .sa-menu-hesap--vurgu > a:hover{
  background: var(--sa-turuncu-koyu);
  color: var(--sa-beyaz) !important;
}

/* Ana menü puntosu. Özelleştir'deki tipografi ayarı 17px veriyordu;
   uzun başlıklarla satır dolduğu için 15px'e çekildi. */
.header-navigation .primary-menu-container > ul.menu > li > a{
  font-size: 15px;
}

/* ============================================================
   36. TUTOR LMS RENKLERİ
   Tutor'un ana rengi zaten marka mavimize ayarlıydı; metin, ikincil
   renk ve çizgi hâlâ eklentinin kendi grileriydi ve eğitim sayfaları
   sitenin geri kalanına göre soğuk kalıyordu. Değişkenleri tek yerden
   markaya çekiyoruz, böylece Tutor güncellenince de bozulmuyor.
   ============================================================ */
:root,
.tutor-wrap,
.tutor-course-details-page,
.tutor-dashboard{
  --tutor-color-primary:        var(--sa-mavi-koyu);
  --tutor-color-primary-hover:  var(--sa-derin);
  --tutor-color-primary-rgb:    70, 103, 129;
  --tutor-color-secondary:      var(--sa-derin);
  --tutor-body-color:           var(--sa-metin);
  --tutor-color-subdued:        var(--sa-gri);
  --tutor-color-muted:          var(--sa-gri);
  --tutor-border-color:         var(--sa-cizgi-ince);
  --tutor-color-gray-10:        var(--sa-zemin);
  --tutor-color-gray-20:        var(--sa-kart);
}

/* Turuncu bizde eylem rengi: Tutor'un ana düğmeleri de öyle olsun */
.tutor-wrap .tutor-btn-primary,
.tutor-course-details-page .tutor-btn-primary,
.tutor-dashboard .tutor-btn-primary{
  background-color: var(--sa-turuncu);
  border-color: var(--sa-turuncu);
}
.tutor-wrap .tutor-btn-primary:hover,
.tutor-course-details-page .tutor-btn-primary:hover,
.tutor-dashboard .tutor-btn-primary:hover{
  background-color: var(--sa-turuncu-koyu);
  border-color: var(--sa-turuncu-koyu);
}

/* Başlıklar sitenin başlık yazı tipiyle aynı olsun */
.tutor-course-details-title,
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3,
.tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3{
  color: var(--sa-derin);
}

/* Menü küçülünce başlıktaki düğme büyük kalıyordu */
.site-header-item .header-button.button{
  font-size: 13px;
  padding: 12px 22px;
}

/* Menü kalemleri asla iki satıra bölünmesin */
.header-navigation .primary-menu-container > ul.menu > li > a,
.header-navigation .sa-menu-hesap > a{ white-space: nowrap; }
.header-navigation .primary-menu-container > ul.menu{ flex-wrap: nowrap; }

/* Dar dizüstü ekranlarında menü tek satırda kalsın diye kademeli daralma */
@media (max-width: 1400px){
  .header-navigation .primary-menu-container > ul.menu > li > a{
    font-size: 14px; padding-left: 7px; padding-right: 7px;
  }
  .site-header-item .header-button.button{ padding: 11px 18px; }
}
@media (max-width: 1200px){
  .header-navigation .primary-menu-container > ul.menu > li > a{
    font-size: 13px; padding-left: 6px; padding-right: 6px;
  }
  .site-header-item .header-button.button{ padding: 10px 15px; }
}

/* ============================================================
   37. EĞİTİM SAYFASI KÜNYE ŞERİDİ (Tutor)
   ============================================================ */
.sa-kurs-kunye{
  margin: 0 0 26px; padding: 0 0 4px;
  border-left: 3px solid var(--sa-egitim-renk, var(--sa-mavi));
  padding-left: 18px;
}
.sa-kurs-kunye__ust{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sa-kurs-kunye__kod{
  font-family: var(--sa-kod-yazi); font-size: 13px; letter-spacing: .06em;
  color: var(--sa-egitim-renk, var(--sa-mavi-koyu)); font-weight: 500;
}
.sa-kurs-kunye__bag{
  margin-left: auto; font-size: 13.5px; color: var(--sa-mavi-koyu);
  text-decoration: none; border-bottom: 1px solid var(--sa-cizgi);
}
.sa-kurs-kunye__bag:hover{ color: var(--sa-turuncu); border-color: var(--sa-turuncu); }
.sa-kurs-kunye .sa-kunye{ margin-bottom: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px){ .sa-kurs-kunye .sa-kunye{ grid-template-columns: 1fr; } }
.sa-kurs-kunye__kime{
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sa-metin);
}
.sa-kurs-kunye__kime b{ color: var(--sa-derin); font-weight: 600; }
@media (max-width: 600px){
  .sa-kurs-kunye__bag{ margin-left: 0; }
}

/* ============================================================
   38. EĞİTİM KLİPLERİ
   Videolar sayfasındaki duvar ve ürün sayfasındaki şerit aynı kartı
   kullanıyor. Kapak görselleri YouTube'dan geliyor.
   ============================================================ */
.sa-klip-suzgec{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.sa-klip-dgm{
  display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer;
  background: var(--sa-beyaz); color: var(--sa-metin);
  border: 1px solid var(--sa-cizgi); border-radius: 30px;
  padding: 7px 14px; font-family: var(--sa-kod-yazi); font-size: 12.5px; line-height: 1;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.sa-klip-dgm i{ font-style: normal; font-size: 10px; color: var(--sa-gri); }
.sa-klip-dgm:hover{ border-color: var(--sa-egitim-renk, var(--sa-mavi)); }
.sa-klip-dgm:focus-visible{ outline: 2px solid var(--sa-turuncu); outline-offset: 2px; }
.sa-klip-dgm[aria-pressed="true"]{
  background: var(--sa-egitim-renk, var(--sa-derin));
  border-color: var(--sa-egitim-renk, var(--sa-derin));
  color: var(--sa-beyaz);
}
.sa-klip-dgm[aria-pressed="true"] i{ color: rgba(255,255,255,.7); }

.sa-klipler{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px; margin: 0;
}
.sa-klip{
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.sa-klip:hover{ box-shadow: var(--sa-golge-ust); transform: translateY(-2px); }
.sa-klip[hidden]{ display: none !important; }
.sa-klip__kapak{
  display: block; position: relative; aspect-ratio: 16 / 9;
  background: var(--sa-derin); overflow: hidden;
}
.sa-klip__kapak img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Oynat işareti */
.sa-klip__kapak::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; transform: translate(-40%, -50%);
  border-left: 17px solid var(--sa-beyaz);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.sa-klip__alt{ display: block; padding: 14px 16px 16px; border-top: 3px solid var(--sa-egitim-renk, var(--sa-mavi)); }
.sa-klip__kod{
  display: block; font-family: var(--sa-kod-yazi); font-size: 11px;
  letter-spacing: .08em; color: var(--sa-egitim-renk, var(--sa-mavi-koyu)); margin-bottom: 6px;
}
.sa-klip__ad{ display: block; font-size: 15px; font-weight: 600; color: var(--sa-derin); line-height: 1.4; }
.sa-klip__tarih{
  display: block; margin-top: 8px; font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .06em; color: var(--sa-gri);
}
.sa-klip-bos{ font-size: 15px; color: var(--sa-gri); margin: 18px 0 0; }

/* Ürün sayfasındaki şerit */
.sa-klip-serit{ margin: 34px 0 0; }
.sa-klip-serit .sa-klipler{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.sa-klip-tumu{
  display: inline-block; margin-top: 16px; font-size: 14px;
  color: var(--sa-mavi-koyu); border-bottom: 1px solid var(--sa-cizgi);
  text-decoration: none;
}
.sa-klip-tumu:hover{ color: var(--sa-turuncu); border-color: var(--sa-turuncu); }

/* Siteye yüklenmiş klip: kartın içinde oynuyor */
.sa-klip--dosya{ cursor: default; }
.sa-klip--dosya:hover{ transform: none; }
.sa-klip__kapak video{ width: 100%; height: 100%; object-fit: cover; display: block; background: var(--sa-derin); }
.sa-klip--dosya .sa-klip__kapak::after{ content: none; }

/* ============================================================
   41. TAM GENİŞLİK SATIRLARI
   WPBakery, "satırı ekrana yay" seçeneğindeki satırların kenar
   boşluklarını sayfa yüklendikten SONRA JavaScript ile hesaplıyor.
   İlk çizimde satır dar, JavaScript çalışınca genişliyor ve
   içerik yerinden oynuyor (layout shift). LiteSpeed JavaScript'i
   ertelediğinde bu daha da belirginleşiyor.

   Aynı hesabı burada CSS ile yapıyoruz; ilk çizimde yerleşim
   son hâlinde oluyor, JavaScript geç çalışsa da hiçbir şey
   kımıldamıyor. --sa-kaydirma değeri functions.php'deki küçük
   betikten geliyor (kaydırma çubuğunun genişliği).
   ============================================================ */
/* Kaydırma çubuğunun genişliği. @property sayesinde değer kökte
   hesaplanır (100% = pencere, 100vw = pencere + çubuk), aşağıya
   piksel olarak iner. Desteklemeyen tarayıcılarda functions.php'deki
   betik aynı değeri yazar. */
@property --sa-kaydirma {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
:root{ --sa-kaydirma: calc(100vw - 100%); }

.vc_row[data-vc-full-width]{
  --sa-tasma: calc((100vw - var(--sa-kaydirma) - 100%) / 2);
  --sa-tasma-eksi: calc((100% + var(--sa-kaydirma) - 100vw) / 2);
  position: relative;
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;
  left: auto !important;
  right: auto !important;
  margin-left: var(--sa-tasma-eksi) !important;
  margin-right: var(--sa-tasma-eksi) !important;
  opacity: 1 !important;
}

.vc_row[data-vc-full-width]:not([data-vc-stretch-content]){
  padding-left: var(--sa-tasma) !important;
  padding-right: var(--sa-tasma) !important;
}

/* ============================================================
   42. GİRİŞ VE KAYIT FORMLARI
   Tutor'un form şablonları normal sayfalara gömüldüğünde
   eklentinin kendi stil dosyası yüklenmiyor ve alanlar çıplak
   kalıyor. Formu burada baştan biçimliyoruz; eklentinin CSS'i
   gelse de gelmese de aynı görünüyor.
   ============================================================ */
.sa-giris-kutu,
.sa-kayit-kutu{
  max-width: 460px; background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: var(--sa-yuvarlak);
  padding: 32px; box-shadow: var(--sa-golge);
}
.sa-kayit-kutu{ max-width: 560px; }

.sa-giris-kutu .tutor-login-wrap,
.sa-giris-kutu .tutor-card,
.sa-kayit-kutu .tutor-card{ box-shadow: none; padding: 0; border: 0; background: none; }
.sa-kayit-kutu .tutor-p-8{ padding: 0; }

/* Alan kutuları */
.sa-giris-kutu .tutor-form-control,
.sa-kayit-kutu .tutor-form-control,
.sa-giris-kutu input[type="text"],
.sa-giris-kutu input[type="email"],
.sa-giris-kutu input[type="password"],
.sa-kayit-kutu input[type="text"],
.sa-kayit-kutu input[type="email"],
.sa-kayit-kutu input[type="password"]{
  width: 100%; box-sizing: border-box; display: block;
  height: 48px; padding: 0 14px; margin: 0;
  font-family: inherit; font-size: 15.5px; color: var(--sa-derin);
  background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.sa-giris-kutu .tutor-form-control::placeholder,
.sa-kayit-kutu .tutor-form-control::placeholder,
.sa-giris-kutu input::placeholder,
.sa-kayit-kutu input::placeholder{ color: var(--sa-gri); opacity: 1; }

.sa-giris-kutu .tutor-form-control:focus,
.sa-kayit-kutu .tutor-form-control:focus,
.sa-giris-kutu input:focus,
.sa-kayit-kutu input:focus{
  outline: none; border-color: var(--sa-mavi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-mavi) 18%, transparent);
}

/* Alan aralıkları ve etiketler */
.sa-giris-kutu .tutor-input-field,
.sa-kayit-kutu .tutor-input-field,
.sa-kayit-kutu .tutor-form-group{ margin: 0 0 16px; }
.sa-giris-kutu .tutor-mb-7,
.sa-giris-kutu .tutor-mb-8,
.sa-kayit-kutu .tutor-mb-8{ margin-bottom: 16px !important; }

.sa-kayit-kutu .tutor-block,
.sa-giris-kutu label:not(.tutor-form-check-label){
  display: block; margin: 0 0 7px;
  font-size: 13.5px; font-weight: 600; color: var(--sa-derin);
}

/* Parolayı göster düğmesi alanın içinde dursun */
.sa-giris-kutu .tutor-password-field,
.sa-kayit-kutu .tutor-password-field{ position: relative; }
.sa-giris-kutu .tutor-password-field .tutor-btn,
.sa-kayit-kutu .tutor-password-field .tutor-btn{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 6px; background: none; border: 0; color: var(--sa-gri);
}

/* Onay kutuları */
.sa-giris-kutu .tutor-form-check,
.sa-kayit-kutu .tutor-form-check,
.sa-giris-kutu .tutor-input-wrapper{
  display: flex; align-items: center; gap: 9px; margin: 0;
}
.sa-giris-kutu input[type="checkbox"],
.sa-kayit-kutu input[type="checkbox"]{
  width: 18px; height: 18px; margin: 0; flex: none;
  border: 1px solid var(--sa-cizgi); border-radius: 4px;
  accent-color: var(--sa-turuncu); cursor: pointer;
}
.sa-giris-kutu .tutor-label,
.sa-kayit-kutu .tutor-label,
.sa-giris-kutu .tutor-form-check-label,
.sa-kayit-kutu .tutor-form-check-label{
  font-size: 14px; color: var(--sa-metin); margin: 0; font-weight: 400; cursor: pointer;
}

/* Satır: oturumu açık tut + parolamı unuttum */
.sa-giris-kutu .tutor-flex.tutor-justify-between{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 20px;
}

/* Düğmeler */
.sa-giris-kutu .tutor-btn-primary,
.sa-kayit-kutu .tutor-btn-primary,
.sa-giris-kutu button[type="submit"],
.sa-kayit-kutu button[type="submit"]{
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; padding: 0 22px;
  font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1;
  color: var(--sa-beyaz); background: var(--sa-turuncu);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background .15s;
}
.sa-giris-kutu .tutor-btn-primary:hover,
.sa-kayit-kutu .tutor-btn-primary:hover,
.sa-giris-kutu button[type="submit"]:hover,
.sa-kayit-kutu button[type="submit"]:hover{ background: var(--sa-turuncu-koyu); }

/* Metin bağlantısı görünümündeki düğmeler */
.sa-giris-kutu .tutor-btn-link,
.sa-giris-kutu .tutor-btn-link-gray,
.sa-kayit-kutu .tutor-btn-link{
  display: inline; width: auto; min-height: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  font-size: 14px; font-weight: 600; color: var(--sa-mavi-koyu);
  text-decoration: none;
}
.sa-giris-kutu .tutor-btn-link:hover,
.sa-giris-kutu .tutor-btn-link-gray:hover{ text-decoration: underline; }

/* Alt satır: hesabınız yok mu? */
.sa-giris-kutu .tutor-flex.tutor-justify-center,
.sa-kayit-kutu .tutor-flex.tutor-justify-center{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sa-cizgi-ince);
  font-size: 14.5px; color: var(--sa-metin);
}

/* Hata ve uyarılar */
.sa-giris-kutu .tutor-login-error,
.sa-kayit-kutu .tutor-alert{
  margin: 0 0 16px; padding: 12px 14px; border-radius: 8px;
  font-size: 14px; line-height: 1.5;
  color: var(--sa-aps); background: color-mix(in srgb, var(--sa-aps) 8%, white);
  border: 1px solid color-mix(in srgb, var(--sa-aps) 24%, white);
}
.sa-giris-kutu .tutor-login-error:empty,
.sa-kayit-kutu .tutor-alert:empty{ display: none; }

/* Parola gücü göstergesi */
.sa-kayit-kutu .tutor-password-strength-checker{ margin: -8px 0 16px; font-size: 13px; }

@media (max-width: 560px){
  .sa-giris-kutu, .sa-kayit-kutu{ padding: 22px; }
}

/* ============================================================
   43. TAKVİM: FİLTRELER, SABİT SÜTUNLAR, TAKVİME EKLE
   ------------------------------------------------------------
   Satır artık bağlantı değil, kapsayıcı: içinde hem "Kayıt"
   düğmesi hem de "takvime ekle" menüsü var. Satırın tamamına
   tıklanabilirlik, arkaya gerilen görünmez bir bağlantıyla
   sağlanıyor. Sütun genişlikleri sabit; fiyatın basamak sayısı
   değişince format rozeti yerinden oynamıyor.
   ============================================================ */

.sa-takvim__ustbaslik{
  margin: 0 0 14px;
  font-family: var(--sa-kod-yazi);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sa-turuncu);
}

/* --- Filtre çubuğu --- */
.sa-takvim__filtre{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 0 6px 16px;
}
.sa-takvim__filtre-alan{ display: flex; flex-direction: column; gap: 5px; }
.sa-takvim__filtre-alan > span{
  font-family: var(--sa-kod-yazi);
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sa-gri);
}
.sa-takvim__filtre select{
  min-width: 220px; max-width: 100%;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--sa-cizgi);
  background: var(--sa-beyaz); color: var(--sa-derin);
  font-size: 14px; line-height: 1.3;
}
.sa-takvim__filtre select:focus-visible{
  outline: 2px solid var(--sa-mavi); outline-offset: 1px;
}
.sa-takvim__sifirla{
  background: none; border: 0; cursor: pointer; padding: 9px 2px;
  font-size: 13px; color: var(--sa-mavi-koyu);
  border-bottom: 1px solid var(--sa-mavi-koyu);
}
.sa-takvim__sayac{
  margin: 0 0 9px auto; font-size: 13px; color: var(--sa-gri);
}

/* --- Satır --- */
.sa-takvim__satir{
  position: relative;
  grid-template-columns: 150px minmax(0,1fr) 118px 150px 112px;
}
.sa-takvim__satir[hidden]{ display: none; }

/* Eğitim adı satırın bağlantısı. Ad hem arama motoru hem ekran okuyucu
   için gerçek bağlantı metni; ::after ile satırın tamamı tıklanabilir
   kalıyor, ayrıca boş bir örtü bağlantısına gerek kalmıyor. */
a.sa-takvim__ad{ text-decoration: none; position: static; }
a.sa-takvim__ad::after{
  content: ""; position: absolute; inset: 0; border-radius: 6px;
}
a.sa-takvim__ad:focus-visible::after{
  outline: 2px solid var(--sa-mavi); outline-offset: -2px;
}
a.sa-takvim__ad:hover{ color: var(--sa-mavi-koyu); }

/* Fiyatın yanındaki KDV notu — alt satıra değil, yanına */
.sa-takvim__fiyat{ white-space: nowrap; }
.sa-takvim__fiyat .sa-kdv{ display: inline; font-size: 11px; }

/* --- Eylem sütunu: Kayıt düğmesi + takvime ekle --- */
.sa-takvim__eylem{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.sa-takvim__eylem .sa-takvim__dugme{
  flex: 1 1 auto; text-decoration: none; display: block;
}

.sa-takvim__ekle{ position: relative; flex: none; }
.sa-takvim__ekle > summary{
  list-style: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--sa-cizgi);
  display: grid; place-items: center;
  font-size: 15px; line-height: 1; color: var(--sa-mavi-koyu);
  background: var(--sa-beyaz);
}
.sa-takvim__ekle > summary::-webkit-details-marker{ display: none; }
.sa-takvim__ekle > summary:hover{ border-color: var(--sa-mavi); }
.sa-takvim__ekle > summary:focus-visible{ outline: 2px solid var(--sa-mavi); outline-offset: 1px; }

.sa-takvim__ekle-menu{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: flex; flex-direction: column; min-width: 168px;
  background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi); border-radius: 9px;
  box-shadow: var(--sa-golge-ust);
  overflow: hidden;
}
.sa-takvim__ekle-menu > a,
.sa-takvim__ekle-menu > button{
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 10px 14px;
  font-size: 13.5px; color: var(--sa-derin); text-decoration: none;
  font-family: inherit;
}
.sa-takvim__ekle-menu > a:hover,
.sa-takvim__ekle-menu > button:hover{ background: var(--sa-zemin); }
.sa-takvim__ekle-menu > a + button{ border-top: 1px solid var(--sa-cizgi-ince); }

@media (max-width: 900px){
  .sa-takvim__satir{ grid-template-columns: 130px minmax(0,1fr) 112px; }
  .sa-takvim__eylem{ grid-column: 3 / 4; }
  .sa-takvim__filtre select{ min-width: 0; width: 100%; }
  .sa-takvim__filtre-alan{ flex: 1 1 220px; }
  .sa-takvim__sayac{ margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 560px){
  .sa-takvim__satir{ grid-template-columns: 1fr auto; }
  .sa-takvim__eylem{ grid-column: 2 / 3; }
}

/* ============================================================
   44. FİYAT GÖSTERİMİNİN TUTARLILIĞI
   ------------------------------------------------------------
   Sitenin her yerinde aynı biçim: tutarın hemen yanında "+ KDV".
   WooCommerce'in kendi eki de aynı yazıyı kullanıyor; buradaki
   kurallar o ekin alt satıra düşmesini engelliyor.
   ============================================================ */

.woocommerce-price-suffix{
  white-space: nowrap;
  font-size: .62em; font-weight: 500; letter-spacing: .02em;
  color: var(--sa-gri);
  margin-left: .25em;
}
.price, .woocommerce-Price-amount{ white-space: nowrap; }
.summary .price, .sa-karar .price{ text-wrap: nowrap; }

/* ============================================================
   45. EĞİTİM KARTLARINDA SABİT DÜZEN
   ------------------------------------------------------------
   İsim tek satıra sığsa da iki satır yer kaplıyor; böylece
   yan yana duran kartlarda çizgi, fiyat ve tarih aynı hizada
   başlıyor. Alt blok her zaman dikey: fiyat, kişi başı, tarih.
   ============================================================ */

.sa-kart__ad{ min-height: 2.56em; }

.sa-kart__alt{
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
}
.sa-kart__fiyat{ white-space: nowrap; }
.sa-kart__fiyat .sa-kdv{ display: inline; }
.sa-kart__tarih{ margin-top: 2px; }

/* Yıl da göründüğü için tarih sütunu bir miktar genişledi */
.sa-takvim__satir{ grid-template-columns: 178px minmax(0,1fr) 118px 150px 112px; }
@media (max-width: 900px){
  .sa-takvim__satir{ grid-template-columns: 150px minmax(0,1fr) 112px; }
}
@media (max-width: 560px){
  .sa-takvim__satir{ grid-template-columns: 1fr auto; }
}

/* Kart tarihinin altındaki açıklama: yanda birden çok tarih seçilebiliyor,
   karttaki tek tarihin "ilk uygun tarih" olduğu yazıyla söyleniyor. */
.sa-kart__tarih small{
  display: block; margin-top: 3px;
  font-family: var(--sa-govde-yazi, inherit);
  font-size: 11px; font-weight: 400; letter-spacing: .01em;
  color: var(--sa-gri);
}

/* ============================================================
   46. KARŞILAŞTIRMA TABLOSU (KURUMSAL SAYFA)
   ------------------------------------------------------------
   Kurumsal sayfada olduğumuz için kurumsal sütun açık zeminde
   ve turuncu başlıkla öne çıkıyor; açık eğitim sütunu gri
   zeminde geri plana çekiliyor. Tablo, WPBakery metin bloğunun
   içinde düz HTML olarak duruyor: yalnızca bir sarmalayıcı div
   ve bir sınıf eklendi, hücreler panelden düzenlenebilir.
   Dar ekranda tablo yatay kayıyor; böylece sütun başlıkları
   CSS'e kopyalanmıyor, tek doğru kaynak sayfanın kendisi.
   ============================================================ */
.sa-kiyas-sar{
  margin: 4px 0 22px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sa-beyaz, #ffffff);
  border: 1px solid var(--sa-cizgi-ince, #e3e9ee);
  box-shadow: 0 10px 28px rgba(27, 46, 60, .09);
}
table.sa-kiyas{
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.5;
}
table.sa-kiyas th,
table.sa-kiyas td{
  border: 0;
  border-bottom: 1px solid var(--sa-cizgi-ince, #e8edf1);
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  background: none;
}
table.sa-kiyas tr:last-child td{ border-bottom: 0; }

/* Sütun genişlikleri: etiket dar, kurumsal sütun en geniş */
table.sa-kiyas th:first-child,
table.sa-kiyas td:first-child{ width: 20%; }
table.sa-kiyas th:nth-child(2),
table.sa-kiyas td:nth-child(2){ width: 33%; }

/* Başlık satırı */
table.sa-kiyas thead th{
  font-family: var(--sa-baslik-yazi, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--sa-cizgi, #d7e0e7);
}

/* İlk sütun: satır etiketi */
table.sa-kiyas tbody td:first-child{
  font-weight: 600;
  color: var(--sa-derin, #1b2e3c);
}

/* Etiket sütunu da hafifçe tonlu; böylece tablodaki tek beyaz
   alan kurumsal sütun oluyor. */
table.sa-kiyas th:first-child,
table.sa-kiyas td:first-child{ background: rgba(27, 46, 60, .028); }

/* İkinci sütun: açık eğitim — geri planda */
table.sa-kiyas th:nth-child(2),
table.sa-kiyas td:nth-child(2){
  background: rgba(27, 46, 60, .062);
  color: var(--sa-gri, #6b7c89);
}

/* Üçüncü sütun: kurumsal — öne çıkan */
table.sa-kiyas th:nth-child(3),
table.sa-kiyas td:nth-child(3){
  background: var(--sa-beyaz, #ffffff);
  color: var(--sa-derin, #1b2e3c);
  font-weight: 500;
  border-left: 1px solid rgba(239, 92, 38, .22);
}
table.sa-kiyas thead th:nth-child(3){
  color: var(--sa-turuncu, #ef5c26);
  box-shadow: inset 0 3px 0 var(--sa-turuncu, #ef5c26);
}

/* Satır üzerine gelince kurumsal sütun bir tık daha belirginleşiyor */
table.sa-kiyas tbody tr:hover td:nth-child(3){
  background: rgba(239, 92, 38, .05);
}

@media (max-width: 680px){
  .sa-kiyas-sar{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.sa-kiyas{ min-width: 540px; font-size: 14px; }
  table.sa-kiyas th,
  table.sa-kiyas td{ padding: 11px 13px; }
}

/* ============================================================
   47. TEKLİF FORMU
   Kurumsal teklif sayfasındaki form. Kısa alanlar geniş ekranda
   iki sütuna geçiyor, dar ekranda tek sütuna düşüyor.
   Contact Form 7 kendi otomatik paragraflamasını uyguladığı için
   her alan formda .sa-alan kutusuna sarılıyor; ızgaranın hücresi
   o kutu, içindeki paragraflar değil.
   Alan adlarına dokunulmuyor; burada yalnızca görünüm var.
   ============================================================ */
.sa-form--genis{ max-width: 900px; }

.sa-form-izgara{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px){
  .sa-form-izgara{ grid-template-columns: 1fr; }
}

.sa-form .sa-alan{ margin-bottom: 18px; min-width: 0; }
.sa-form .sa-alan p{ margin: 0; }

.sa-form-etiket{
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 600; color: var(--sa-derin);
}

/* Etiketin yanındaki küçük "gerekli" işareti */
.sa-form-zorunlu{
  margin-left: 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sa-gri);
}

/* Alanın altındaki açıklama */
.sa-form-ipucu{
  display: block; margin-top: 7px;
  font-size: 13px; line-height: 1.5; color: var(--sa-gri);
}

/* Radyo düğmeleri tek satırda yan yana */
.sa-form .wpcf7-radio{ display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 2px; }
.sa-form .wpcf7-radio .wpcf7-list-item{ margin: 0; }
.sa-form .wpcf7-list-item label{
  display: inline-flex; align-items: center;
  margin: 0; font-weight: 400; font-size: 15px; color: var(--sa-metin);
}
.sa-form input[type="radio"],
.sa-form input[type="checkbox"]{
  width: auto; margin: 0 7px 0 0; accent-color: var(--sa-turuncu);
}

/* KVKK onay satırı */
.sa-form-onay{ margin-bottom: 20px; font-size: 14px; color: var(--sa-gri); }
.sa-form-onay p{ margin: 0; }
.sa-form-onay .wpcf7-list-item{ margin: 0; }
.sa-form-onay a{ color: var(--sa-turuncu); }

/* ============================================================
   48. YAZI SAYFALAMASI  —  [sa_yazilar sayfali="evet"]
   Bilgi Merkezi'ndeki yazı listesinin altındaki sayfa bağlantıları.
   ============================================================ */
.sa-sayfalama{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 28px;
}
.sa-sayfalama__oge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--sa-derin); background: var(--sa-beyaz);
  border: 1px solid var(--sa-cizgi-ince); border-radius: 8px;
  transition: border-color .16s ease, color .16s ease;
}
a.sa-sayfalama__oge:hover{
  border-color: var(--sa-turuncu); color: var(--sa-turuncu);
}
.sa-sayfalama__oge--simdiki{
  background: var(--sa-turuncu); border-color: var(--sa-turuncu);
  color: var(--sa-beyaz); cursor: default;
}
.sa-sayfalama__ok{ font-weight: 500; color: var(--sa-gri); }
.sa-sayfalama__ara{ padding: 0 4px; color: var(--sa-gri); }

@media (max-width: 480px){
  .sa-sayfalama__oge{ min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
}


/* ============================================================
   49. SANAL STÜDYO  —  [sa_studyo]
   Çevrim içi eğitimlerin nasıl çekildiğini anlatan blok.
   Aynı bileşen dört yerde kullanılıyor, o yüzden ölçüler
   sayfaya değil bileşene bağlı.
   ============================================================ */
.sa-studyo{
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center;
  gap: 30px; margin: 26px 0;
  background: var(--sa-zemin); border: 1px solid var(--sa-cizgi);
  border-radius: var(--sa-yuvarlak); padding: 26px;
}
@media (max-width: 860px){
  .sa-studyo{ grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}
.sa-studyo__gorsel{ margin: 0; }
.sa-studyo__gorsel img{
  display: block; width: 100%; height: auto;
  border-radius: 8px; border: 1px solid var(--sa-cizgi);
  box-shadow: var(--sa-golge);
}
.sa-studyo__metin{ display: flex; flex-direction: column; gap: 10px; }
/* Etiket bileşenin içinde bir tık küçük duruyor; sayfa başlıklarıyla
   yarışmasın diye. */
.sa-studyo__metin .sa-etiket{ font-size: 14px; }
.sa-studyo__metin h3{
  font-size: 21px; font-weight: 700; color: var(--sa-derin);
  line-height: 1.3; margin: 0;
}
.sa-studyo__metin p{
  font-size: 15.5px; line-height: 1.65; color: var(--sa-metin); margin: 0;
}

/* Tek satırlık hâli: çevrim içi eğitim sayfalarında, künyenin üstünde */
.sa-studyo-satir{
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 22px; padding: 12px 14px;
  background: var(--sa-zemin); border: 1px solid var(--sa-cizgi);
  border-left: 3px solid var(--sa-turuncu);
  border-radius: 8px;
}
.sa-studyo-satir__gorsel{ flex: 0 0 132px; }
.sa-studyo-satir__gorsel img{
  display: block; width: 100%; height: auto;
  border-radius: 5px; border: 1px solid var(--sa-cizgi);
}
.sa-studyo-satir__metin{ font-size: 14.5px; line-height: 1.55; color: var(--sa-metin); }
@media (max-width: 560px){
  .sa-studyo-satir{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .sa-studyo-satir__gorsel{ flex: 0 0 auto; width: 100%; max-width: 260px; }
}


/* ============================================================
   50. ÜYE KODU  —  [sa_uye_kod]
   Derneğe tanımlı indirim kuponunu gösteren kutu. Kodun
   okunaklı ve kopyalanabilir olması tek amaç: elle yazarken
   harf atlamak indirimi kaçırmanın en sık sebebi.
   ============================================================ */
.sa-uye-kod{
  display: flex; flex-direction: column; gap: 10px;
  margin: 22px 0; padding: 18px 20px;
  background: var(--sa-zemin);
  border: 1px solid var(--sa-cizgi);
  border-left: 3px solid var(--sa-turuncu);
  border-radius: 8px;
}
.sa-uye-kod__ust{
  font-family: var(--sa-kod-yazi); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sa-turuncu);
}
.sa-uye-kod__kutu{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-uye-kod__kod{
  font-family: var(--sa-kod-yazi); font-size: 21px; font-weight: 600;
  letter-spacing: .12em; color: var(--sa-derin);
  background: var(--sa-beyaz); border: 1px dashed var(--sa-cizgi);
  border-radius: 6px; padding: 8px 16px; user-select: all;
}
.sa-uye-kod__kopya{
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--sa-beyaz); background: var(--sa-turuncu);
  border: 0; border-radius: 30px; padding: .55em 1.3em;
  transition: background .15s ease;
}
.sa-uye-kod__kopya:hover{ background: var(--sa-turuncu-koyu, var(--sa-turuncu)); }
.sa-uye-kod__kopya--oldu{ background: var(--sa-mavi-koyu); }
.sa-uye-kod__not{ font-size: 14.5px; line-height: 1.6; color: var(--sa-metin); }
@media (max-width: 480px){
  .sa-uye-kod__kod{ font-size: 18px; }
  .sa-uye-kod__kopya{ width: 100%; }
}

/* ============================================================
   51. SEKMELER  —  WPBakery (vc_tta_tabs)
   Sitede beş yerde sekme var: /sertifika/, /ana-sayfa/,
   /american-purchasing-society/, /egitimler/ ve /ogrenme-modeli/.

   ÇÖZÜLEN SORUN — MOBİLDE SEKMELER KAYBOLUYORDU. WPBakery 768 pikselin
       altında sekme çubuğunu tamamen gizliyor
       (.vc_tta-tabs-container { display:none }) ve bileşeni
       akordiyona çeviriyor: her panel kendi başlığını taşıyor.
       Sonuç, telefonda ikinci seçeneğin ilk panelin bin
       piksellik gövdesinin altında kalması. Kullanıcı orayı
       görmediği için tek seçenek varmış gibi duruyordu.
       Telefon yatay tutulunca 768 aşılıyor ve çubuk geri
       geliyordu — hatanın "bazen oluyor" görünmesinin sebebi bu.

       Aşağıdaki kural çubuğu mobilde de açıyor, panellerin
       içindeki kopya başlıkları gizliyor ve sekmeleri tam
       genişlikte, sığmayınca alt satıra kayacak şekilde
       diziyor. WPBakery'nin kendi JS'i değişmiyor; tıklama ve
       panel değiştirme eskisi gibi çalışıyor.

       DİKKAT: .vc_tta-panel-title hem panelin içinde hem sekme
       çubuğunda kullanılıyor (çubuktakiler kopya). Bu yüzden
       gizleme kuralı .vc_tta-panels ile sınırlanmak zorunda —
       aksi halde sekme yazıları da kaybolur.

   RENKLERE DOKUNULMUYOR. 2.5.25'te seçili sekme lacivert
   yapılmıştı; o kaldırıldı. Sekme renkleri WPBakery'nin kendi
   varsayılanında (seçili #f8f8f8, seçili olmayan beyaz, yazı
   gri) ve WPBakery arayüzündeki renk ayarında bırakıldı.
   Aşağıda yalnızca yerleşim var — renk, çerçeve, yazı rengi
   ve kalınlığı bilerek belirtilmiyor ki panelden yapılan
   değişiklik geçerli olsun.

   Sekmelerin kendisi (kaç tane, ne yazdığı, sırası, rengi)
   WPBakery arayüzünden düzenlenmeye devam ediyor.
   ============================================================ */

/* --- Mobilde sekme çubuğu görünmeye devam etsin --- */
@media (max-width: 767px){

  .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-container{ display: block; }

  /* Panellerin içindeki kopya başlıklar (akordiyon kalıntısı) */
  .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-panels .vc_tta-panel-title{ display: none; }

  .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list{
    display: flex; flex-wrap: wrap; align-items: stretch;
    gap: 8px; margin: 0 0 16px; padding: 0;
  }
  .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list > .vc_tta-tab{
    flex: 1 1 140px; margin: 0; float: none;
  }
  .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list > .vc_tta-tab > .vc_tta-panel-title{
    margin: 0; height: 100%;
  }
  /* Yan yana duran sekmeler eşit yükseklikte kalsın: uzun
     yazılı olan iki satıra düşünce diğerleri de uzuyor. */
  .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list > .vc_tta-tab > .vc_tta-panel-title > a{
    display: flex; align-items: center; justify-content: center;
    height: 100%; text-align: center;
    /* 17 punto dar telefonlarda çok kırılıyor, 15'e çekildi */
    padding: 11px 12px; font-size: 15px; line-height: 1.35;
  }
}