/* ==========================================================================
   Eğitim detay (single-product) — kaynak: _zip/Eğitim Detay.dc.html
   Yükleme sırası: armor → tokens → base → components → chrome → BU DOSYA.
   Tüm kurallar .ses-app kapsamındadır; inline stil YOKTUR.
   ========================================================================== */

/* Sekme panelleri `hidden` ile kapanır (chrome.js). Hiçbir yerde inline
   display kullanılmaz — `[hidden]` inline display'e kaybeder. */
.ses-app [hidden] { display: none; }

/* --- 1) Sayfa başlığı ---------------------------------------------------- */
.ses-app .ses-pd-head {
  background: var(--ses-sky);
  border-bottom: 1px solid var(--ses-border);
}
.ses-app .ses-pd-head__inner { padding-top: 26px; padding-bottom: 44px; }

.ses-app .ses-pd-head__crumbs { margin-bottom: 20px; font-size: 13.5px; }
.ses-app .ses-pd-head__crumbs a { font-weight: 600; }
.ses-app .ses-breadcrumb__current { font-weight: 700; color: var(--ses-navy); }

.ses-app .ses-pd-head__grid {
  display: grid;
  grid-template-columns: 7.5fr 4.5fr;
  gap: 56px;
  align-items: end;
}
.ses-app .ses-pd-head__text { min-width: 0; }
.ses-app .ses-pd-head__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ses-app .ses-pd-head__chip { height: 30px; padding: 0 13px; font-size: 12.5px; }

.ses-app .ses-pd-head__title { margin-bottom: 14px; }
.ses-app .ses-pd-head__short { font-size: 17px; line-height: 1.65; max-width: 640px; }
.ses-app .ses-pd-head__short p + p { margin-top: 12px; }

/* E-Devlet kartı — kırmızı üst bant + beyaz plaka */
.ses-app .ses-edevlet-card {
  border: 1px solid var(--ses-border);
  border-radius: var(--ses-r-mid);
  background: var(--ses-white);
  box-shadow: 0 12px 30px -14px rgba(11, 49, 84, .2);
  overflow: hidden;
}
.ses-app .ses-edevlet-card__band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--ses-red);
}
.ses-app .ses-edevlet-card__plate {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--ses-r-btn);
  background: var(--ses-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ses-app .ses-edevlet-card__plate img { height: 26px; width: auto; display: block; }
.ses-app .ses-edevlet-card__lines { min-width: 0; }
.ses-app .ses-edevlet-card__title {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ses-white);
}
.ses-app .ses-edevlet-card__sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
}
.ses-app .ses-edevlet-card__body { padding: 16px 20px 18px; }
.ses-app .ses-edevlet-card__body p { font-size: 14px; line-height: 1.7; color: var(--ses-muted); }
.ses-app .ses-edevlet-card__body strong { color: var(--ses-navy); font-weight: 800; }

/* --- 2) Gövde ızgarası --------------------------------------------------- */
.ses-app .ses-pd-body { padding-top: 40px; }
.ses-app .ses-pd-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 388px;
  gap: 48px;
  align-items: start;
}
.ses-app .ses-pd-main { min-width: 0; }

.ses-app .ses-pd-notices:not(:empty) { margin-bottom: 20px; }
.ses-app .ses-pd-notices .woocommerce-message,
.ses-app .ses-pd-notices .woocommerce-info,
.ses-app .ses-pd-notices .woocommerce-error {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--ses-border);
  border-radius: var(--ses-r-btn);
  background: var(--ses-faint);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ses-text);
  list-style: none;
}
.ses-app .ses-pd-notices .woocommerce-error { border-color: var(--ses-red); background: var(--ses-red-soft); }
.ses-app .ses-pd-notices a { color: var(--ses-blue); font-weight: 700; }

/* --- 3) Görsel çerçevesi (kare; bulanık kopya + kırpılmamış ön plan) ----- */
.ses-app .ses-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--ses-r-panel);
  overflow: hidden;
  background: var(--ses-sky);
  box-shadow: var(--ses-shadow-frame);
}
.ses-app .ses-figure__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: blur(34px) saturate(1.06);
  transform: scale(1.2);
}
.ses-app .ses-figure__veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .18);
}
.ses-app .ses-figure__main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.ses-app .ses-figure__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ses-icon-dim);
}

/* --- 4) Sekmeler --------------------------------------------------------- */
.ses-app .ses-tabs { margin-top: 32px; }
.ses-app .ses-tabs__list {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--ses-border);
}
.ses-app .ses-tab {
  height: 52px;
  padding: 0 20px;
  background: transparent;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .005em;
  color: var(--ses-muted);
  box-shadow: inset 0 -3px 0 transparent;
  transition: color var(--ses-t-btn) var(--ses-ease), box-shadow var(--ses-t-btn) var(--ses-ease);
}
/* (0,3,0) — armor'ın buton hover nötrleyicisini yener. */
.ses-app .ses-tab:hover,
.ses-app .ses-tab:focus { background: transparent; color: var(--ses-navy); }
.ses-app .ses-tab[aria-selected="true"] {
  color: var(--ses-navy);
  box-shadow: inset 0 -3px 0 var(--ses-blue);
}

.ses-app .ses-tabpanel { padding-top: 28px; }
.ses-app .ses-tabpanel:focus-visible { outline: 3px solid var(--ses-blue-light); outline-offset: 4px; }
.ses-app .ses-tabpanel__sub { margin-top: 40px; }
.ses-app .ses-tabpanel .ses-h2--panel { margin-bottom: 16px; font-size: 24px; }

/* Uzun açıklama (WooCommerce) — paragraf, liste ve alt başlık korunur. */
.ses-app .ses-prose { max-width: 720px; font-size: 16px; line-height: 1.8; color: var(--ses-muted); }
.ses-app .ses-prose > * + * { margin-top: 16px; }
.ses-app .ses-prose p { text-wrap: pretty; }
.ses-app .ses-prose :is(h2, h3, h4) {
  margin-top: 28px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ses-navy);
}
.ses-app .ses-prose :is(ul, ol) {
  padding-left: 22px;
  list-style: revert;
  display: grid;
  gap: 8px;
}
.ses-app .ses-prose li { line-height: 1.7; }
.ses-app .ses-prose strong { color: var(--ses-navy); font-weight: 800; }
.ses-app .ses-prose a { color: var(--ses-blue); font-weight: 700; }
.ses-app .ses-prose a:hover { color: var(--ses-blue-dark); }
.ses-app .ses-prose img { height: auto; border-radius: var(--ses-r-btn); }
.ses-app .ses-prose table td,
.ses-app .ses-prose table th { padding: 10px 12px; border: 1px solid var(--ses-border); }

/* Kayıttan sertifikaya dört adım */
.ses-app .ses-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.ses-app .ses-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--ses-border);
  border-radius: 14px;
  background: var(--ses-white);
}
.ses-app .ses-step--final { border-color: var(--ses-border-cream); background: var(--ses-cream); }
.ses-app .ses-step__num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--ses-r-sm);
  background: var(--ses-ice);
  border: 1.5px solid var(--ses-border-strong);
  /* Buz zemin üstünde --ses-blue 4.27:1 kalıyor (14px için AA sınırı 4.5).
     Koyu marka mavisi 5.6:1 verir. */
  color: var(--ses-blue-dark);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ses-app .ses-step__num--solid {
  background: var(--ses-blue);
  border-color: var(--ses-blue);
  color: var(--ses-on-blue);
}
.ses-app .ses-step--final .ses-step__num {
  background: var(--ses-white);
  border-color: var(--ses-border-cream);
  color: var(--ses-navy);
}
.ses-app .ses-step__text { min-width: 0; }
.ses-app .ses-step__title { display: block; font-size: 15.5px; font-weight: 800; color: var(--ses-navy); }
.ses-app .ses-step__desc {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ses-muted);
}

/* --- 5) Sertifika sekmesi ------------------------------------------------ */
.ses-app .ses-cert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ses-app .ses-cert__badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 10px 10px;
  border-radius: 11px;
  background: var(--ses-red);
  color: var(--ses-white);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 18px;
}
.ses-app .ses-cert__plate {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ses-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ses-app .ses-cert__plate img { height: 20px; width: auto; display: block; }
.ses-app .ses-cert__lead { margin-bottom: 18px; font-size: 16px; line-height: 1.75; }
.ses-app .ses-cert .ses-ticks li { font-size: 15.5px; }

/* Sarmalayıcı KESİN oran taşır; align-items:start ızgarada height:100% aksi
   halde çözülmez ve görsel görünmez. */
.ses-app .ses-cert__figure {
  border: 1px solid var(--ses-border);
  border-radius: var(--ses-r-mid);
  background: var(--ses-ice);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.ses-app .ses-cert__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* --- 6) SSS sekmesi ------------------------------------------------------ */
.ses-app .ses-faq-cards { display: flex; flex-direction: column; gap: 10px; }
.ses-app .ses-faq-card {
  border: 1px solid var(--ses-border);
  border-radius: 14px;
  background: var(--ses-white);
  padding: 18px 20px;
}
.ses-app .ses-faq-card__q { margin-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--ses-navy); }
.ses-app .ses-faq-card__a { font-size: 15px; line-height: 1.65; color: var(--ses-muted); }

/* --- 7) Yapışkan satın alma paneli -------------------------------------- */
.ses-app .ses-buy {
  position: sticky;
  top: var(--ses-sticky-top);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ses-app .ses-buy__card {
  border: 1px solid var(--ses-border);
  border-radius: var(--ses-r-panel);
  background: var(--ses-white);
  box-shadow: var(--ses-shadow-sticky);
  padding: 24px;
}
.ses-app .ses-buy__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 2px;
}
.ses-app .ses-buy__discount {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 13px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: var(--ses-red);
  color: var(--ses-white);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.ses-app .ses-buy__amounts {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ses-app .ses-price--xl { font-size: 36px; line-height: 1.05; letter-spacing: -.025em; }
.ses-app .ses-buy__amounts .ses-price--old { font-size: 17px; }
/* WooCommerce fiyat markup'ı token tipografisine uyar. */
.ses-app .ses-buy__amounts .woocommerce-Price-amount { font: inherit; color: inherit; }
.ses-app .ses-buy__amounts del { text-decoration: none; font-size: 17px; font-weight: 600; color: var(--ses-muted); }
.ses-app .ses-buy__amounts del .woocommerce-Price-amount { text-decoration: line-through; }
.ses-app .ses-buy__amounts ins { text-decoration: none; background: none; }
.ses-app .ses-buy__tax { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--ses-muted); }

.ses-app .ses-buy__form { margin-top: 20px; }
.ses-app .ses-buy__add { gap: 10px; font-size: 16.5px; }
.ses-app .ses-buy__now { margin-top: 10px; height: 52px; border-radius: var(--ses-r-btn-lg); font-size: 16px; }
.ses-app .ses-buy__stock { margin-top: 20px; }

/* Değişken/harici ürünlerde WooCommerce'in kendi formu — turuncu CTA'ya uyarlanır. */
.ses-app .ses-buy__woo { margin-top: 20px; }
.ses-app .ses-buy__woo .quantity { display: none; }
.ses-app .ses-buy__woo button.button,
.ses-app .ses-buy__woo .single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: var(--ses-r-btn-lg);
  background: var(--ses-orange);
  color: var(--ses-on-orange);
  font-size: 16.5px;
  font-weight: 800;
}
.ses-app .ses-buy__woo button.button:hover,
.ses-app .ses-buy__woo button.button:focus,
.ses-app .ses-buy__woo .single_add_to_cart_button:hover,
.ses-app .ses-buy__woo .single_add_to_cart_button:focus {
  background: var(--ses-orange-hover);
  color: var(--ses-on-orange);
}
.ses-app .ses-buy__woo .variations td { padding: 6px 0; }
.ses-app .ses-buy__woo select { width: 100%; height: 48px; padding: 0 12px; }

/* WhatsApp CTA — <a> olduğu için buton nötrleyicisinden etkilenmez. */
.ses-app .ses-buy__wa {
  margin-top: 14px;
  width: 100%;
  height: 52px;
  border-radius: var(--ses-r-btn-lg);
  border: 1px solid var(--ses-border);
  background: var(--ses-faint);
  color: var(--ses-navy);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 220ms var(--ses-ease), background 220ms var(--ses-ease);
}
.ses-app .ses-buy__wa:hover,
.ses-app .ses-buy__wa:focus { border-color: var(--ses-whatsapp); background: var(--ses-ice); color: var(--ses-navy); }
.ses-app .ses-buy__wa svg { flex: 0 0 auto; }

.ses-app .ses-buy__hours {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ses-muted);
  text-align: center;
}

.ses-app .ses-buy__trust {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ses-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ses-app .ses-buy__trust-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ses-text);
}
.ses-app .ses-buy__trust-row svg { flex: 0 0 auto; }

/* Kurumsal ekip kartı */
.ses-app .ses-corp {
  border: 1px solid var(--ses-border);
  border-radius: var(--ses-r-panel);
  background: var(--ses-ice);
  padding: 22px 24px;
}
.ses-app .ses-corp__title { margin-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--ses-navy); }
.ses-app .ses-corp__text { margin-bottom: 14px; font-size: 14px; line-height: 1.65; color: var(--ses-muted); }
.ses-app .ses-corp__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ses-blue);
}
.ses-app .ses-corp__link:hover { color: var(--ses-blue-dark); }

/* --- 8) Benzer eğitimler ------------------------------------------------- */
.ses-app .ses-related__eyebrow { color: var(--ses-navy); }
.ses-app .ses-related__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 10px;
  border-radius: var(--ses-r-pill);
  background: var(--ses-orange);
  vertical-align: middle;
}
.ses-app .ses-related .ses-section-head__text { gap: 10px; }
.ses-app .ses-related__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ses-blue);
}
.ses-app .ses-related__all:hover { color: var(--ses-blue-dark); }

/* --- 9) Kırılma noktaları ------------------------------------------------ */
@media (max-width: 1239px) {
  /* Tek kolona inince fiyat/satın alma paneli GÖRSELİN HEMEN ALTINA girer.
     Önce panel tüm içeriğin sonuna düşüyordu: uzun açıklamalı bir eğitimde
     fiyat 10.234px aşağıda kalıyor, ziyaretçi 10 metre kaydırmadan fiyatı ya
     da "Sepete Ekle"yi göremiyordu.

     `.ses-pd-main` `display:contents` yapılır → çocukları (bildirimler, görsel,
     sekmeler) doğrudan flex öğesi olur ve `order` ile panelin arasına
     yerleşebilir. Masaüstünde (≥1240px) iki kolonlu yapışkan düzen aynen kalır. */
  .ses-app .ses-pd-body__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Taban kural `align-items: start` veriyor. Grid'de bu yalnız dikey
       hizadır; SÜTUN yönlü flex'te çapraz eksen YATAY olduğu için öğeler
       genişliğe yayılmaz, içeriklerine göre büzülür/büyür. `.ses-tabs`
       böylece en geniş çocuğuna (yatay kayan sekme şeridi) göre 720px'e
       çıkıp sayfayı 369px taşırıyordu. */
    align-items: stretch;
  }
  .ses-app .ses-pd-main { display: contents; }
  .ses-app .ses-pd-notices { order: 1; }
  .ses-app .ses-figure { order: 2; }
  .ses-app .ses-buy { order: 3; }
  .ses-app .ses-tabs { order: 4; }

  /* `display:contents` ile bu öğeler DOĞRUDAN flex öğesi olur ve varsayılan
     `min-width:auto` devreye girer: `.ses-tabs` en geniş çocuğuna (yatay
     kayan sekme şeridi) göre 720px'e büyüyüp sayfayı 369px taşırıyordu.
     Flex öğesinin küçülebilmesi için min-width açıkça sıfırlanır. */
  .ses-app .ses-pd-notices,
  .ses-app .ses-figure,
  .ses-app .ses-tabs,
  .ses-app .ses-buy { min-width: 0; }

  .ses-app .ses-buy {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .ses-app .ses-pd-head__grid { gap: 32px; }
}

@media (max-width: 939px) {
  .ses-app .ses-pd-head__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .ses-app .ses-buy { grid-template-columns: minmax(0, 1fr); }
  .ses-app .ses-cert { grid-template-columns: minmax(0, 1fr); }
  .ses-app .ses-cert__figure { max-width: 420px; }

  /* Sekmeler yatay kaydırılır. */
  .ses-app .ses-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ses-app .ses-tabs__list::-webkit-scrollbar { display: none; }
  .ses-app .ses-tab { flex: 0 0 auto; }

  .ses-app[data-page="single-product"] .ses-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ses-app .ses-pd-head__inner { padding-top: 20px; padding-bottom: 32px; }
  .ses-app .ses-pd-head__title { font-size: 32px; }
  .ses-app .ses-pd-head__short { font-size: 16px; }
  .ses-app .ses-pd-body { padding-top: 28px; }
  .ses-app .ses-tabpanel .ses-h2--panel { font-size: 21px; }
  .ses-app .ses-tab { padding: 0 14px; font-size: 14.5px; }
  .ses-app .ses-steps { grid-template-columns: minmax(0, 1fr); }
  .ses-app .ses-buy__card { padding: 20px; }
  .ses-app .ses-price--xl { font-size: 30px; }
  .ses-app .ses-related .ses-section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .ses-app[data-page="single-product"] .ses-grid--4 { grid-template-columns: minmax(0, 1fr); }
}