/* ------------------------------------------------------------------
   Code Pilates — eğitim kartı v8 (708 onaylı tasarım)
   Tek bileşen: Eğitmenlik Eğitimi + Workshop, masaüstü + mobil.

   Değişmez kurallar
   · "Bilgi ve kayıt" şeridi HER kartta aynı yükseklikte (--cpv8-cta-h).
     Erken kayıt mesajı bu şeridi büyütmez; kendi ayrılmış satırında durur
     (--cpv8-erken-h) ve o satır erken kayıt olmasa da yer tutar, böylece
     bütün kartlarda CTA aynı hizaya oturur.
   · Hover ve focus yalnız gölge, kenarlık rengi ve 2 px transform değiştirir;
     kutu ölçüsünü etkileyen hiçbir özellik (border-width, padding, font-weight)
     durum değiştirmez. Komşu kartlar kıpırdamaz.
   · Fotoğraf çerçevesi sabit oran (2:3); her eğitmen aynı ölçekte görünür.
------------------------------------------------------------------ */
.cpne-grid--v8{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.cpv8__ic{
  /* Eski kart katmanları .cpne-card'a display:grid'i 5 kimlik ağırlığında ve
     !important ile dayatıyor; onunla dövüşmüyoruz. Kartın içine kendi
     sarmalayıcımızı koyup bütün satır ve sütunları kaplatıyoruz. Bu sınıfı
     hiçbir eski kural tanımıyor, dolayısıyla çakışma da yok. */
  grid-column:1/-1 !important;
  grid-row:1/-1 !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100%;
  --cpv8-ink:#103d47;
  --cpv8-ink2:#2d5a66;
  --cpv8-ink3:#587680;
  --cpv8-line:#e3edf1;
  --cpv8-line2:#eef3f5;
  --cpv8-bg:#f4f7f8;
  --cpv8-acc:#4BA8CE;
  --cpv8-acc-d:#17627f;
  --cpv8-acc-t:#e8f4f9;
  --cpv8-kirmizi:#c8372d;
  --cpv8-cta-h:44px;      /* CTA şeridi — ASLA değişmez */
  --cpv8-erken-h:22px;    /* erken kayıt satırı — her kartta yer tutar */
  --cpv8-foto-w:150px;
  --cpv8-bosluk:14px;

  position:relative;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  min-width:0;
  color:var(--cpv8-ink);
  font-variant-numeric:tabular-nums;
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.cpv8__ic *{box-sizing:border-box}

/* --- tıklanabilirlik ---------------------------------------------------
   Kartın tamamı tıklanır: şeffaf bir bağlantı kartı kaplar. Klavyede tek
   durak olsun diye o bağlantı tabindex="-1"; odak CTA'ya gelir. CTA ile
   eğitmen adı bu örtünün ÜSTÜNDE durur — iç içe bağlantı yoktur. */
.cpv8__link{
  position:absolute; inset:0; z-index:1;
  border-radius:inherit;
  text-decoration:none;
  font-size:0; color:transparent;
}
.cpv8__link:focus-visible{
  outline:3px solid var(--cpv8-acc-d);
  outline-offset:2px;
}
/* Hover'da kart YERINDEN OYNAMAZ. 2 px kalkma, imlec kartin kenarina yakinken
   kartin imlecten kacip geri gelmesine, yani titremeye yol aciyordu. Premium
   his golge ve kenarlik rengiyle veriliyor; kutu olcusu hic degismiyor. */
.cpv8:hover{
  border-color:#bcdcea;
  box-shadow:0 12px 30px rgba(16,61,71,.13);
}
.cpv8:focus-within{
  border-color:#cfe4ec;
  box-shadow:0 10px 26px rgba(16,61,71,.10);
}
.cpv8:hover .cpv8__cta,
.cpv8:focus-within .cpv8__cta{
  background:#d7ecf6;
}
@media (prefers-reduced-motion:reduce){
  .cpv8__ic{transition:none}
  .cpv8__cta{transition:none}
}

/* --- üst gövde: sol üç bölge + sağ sütun ------------------------------- */
.cpv8__govde{
  display:flex;
  flex:1 1 auto;
  gap:var(--cpv8-bosluk);
  min-width:0;
}
.cpv8__sol{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-self:stretch;
  min-width:0;
}
/* 1 — ülke, şehir, çizgi */
.cpv8__b1{flex:0 0 auto;min-width:0;padding-bottom:12px}
.cpv8__ulke{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:600; letter-spacing:.13em; line-height:1.22;
  color:var(--cpv8-ink2);
  min-width:0;
}
.cpv8__ulke span{min-width:0;overflow-wrap:anywhere}
.cpv8__bayrak{flex:0 0 auto;display:block;width:23px;height:auto;border-radius:2px}
.cpv8__sehir{
  margin-top:4px;
  font-size:var(--cpv8-sehir-fs,42px);
  font-weight:800; letter-spacing:-.035em; line-height:1;
  color:var(--cpv8-acc);
  overflow-wrap:anywhere;
}
.cpv8__cizgi{
  margin-top:7px;
  width:58px; height:3px; border-radius:2px;
  background:var(--cpv8-acc);
}
/* 2 — eğitim adı + tarih. İKİ BÖLGENİN TAM ORTASI (708 · K3) */
.cpv8__b2{
  margin:auto 0;
  min-width:0;
  padding-left:11px;
  border-left:2px solid var(--cpv8-acc);
}
.cpv8__baslik{
  margin:0;
  font-size:var(--cpv8-baslik-fs,22px);
  font-weight:650; letter-spacing:-.018em; line-height:1.14;
  color:var(--cpv8-ink);
  overflow-wrap:break-word;
}
.cpv8__tarih{margin:17px 0 0;line-height:1}
.cpv8__gun{
  display:block;
  font-size:17px; font-weight:800; letter-spacing:-.005em; line-height:1.08;
  color:var(--cpv8-ink);
  white-space:nowrap;
}
.cpv8__ayyil{
  display:block; margin-top:3px;
  font-size:13px; font-weight:800; letter-spacing:-.005em; line-height:1.2;
  color:var(--cpv8-acc-d);
}
/* 3 — katılım biçimi (ve workshoplarda saat) */
 /* --- alt satır: katılım biçimi solda, erken kayıt SAĞDA --------------- */
.cpv8__alt{
  flex:0 0 auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; min-height:26px; margin-top:16px; min-width:0;
}
.cpv8__b3{
  flex:1 1 auto; min-width:0; margin:0; padding:0;
  font-size:16px; font-weight:600; line-height:1.3;
  color:var(--cpv8-ink2);
  overflow-wrap:break-word;
}
.cpv8__b3 .cpv8__saat{
  display:block; margin-top:3px;
  font-size:13px; font-weight:500; color:var(--cpv8-ink3);
}
.cpv8__cec{
  display:inline-flex; align-items:center; margin-top:7px;
  padding:3px 9px; border-radius:999px;
  background:var(--cpv8-acc-t); color:var(--cpv8-acc-d);
  font-size:11px; font-weight:600; letter-spacing:.02em; line-height:1.3;
}
/* sağ sütun: dil + fotoğraf + ad/unvan */
.cpv8__sag{
  flex:0 0 var(--cpv8-foto-w);
  width:var(--cpv8-foto-w);
  display:flex; flex-direction:column; align-items:flex-end;
  min-width:0;
}
.cpv8__dil{
  min-height:20px;
  font-size:11px; font-weight:500; line-height:1.2;
  color:var(--cpv8-ink3);
  text-align:right;
}
.cpv8__kisi{
  margin:8px 0 0; width:100%;
  display:flex; flex-direction:column; text-align:center;
}
.cpv8__cerceve{
  display:block; width:100%;
  aspect-ratio:150/208;
  overflow:hidden; border-radius:10px;
  background:var(--cpv8-bg);
}
.cpv8__foto{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 6%;
  transform:scale(var(--cpv8-yakin,1));
  transform-origin:50% 10%;
}
/* Portreler farkli mesafelerden cekilmis; kurucunun karesi daha genis oldugu
   icin yuz kucuk kaliyordu. Cerceve ayni, yalniz goruntu yakinlastiriliyor. */
.cpv8[data-cp-educator="Barış Özdemir"]{--cpv8-yakin:1.16}
.cpv8__fotoyok{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:150/208; border-radius:10px;
  background:linear-gradient(180deg,#eef6fa 0%,#e2eff5 100%);
  color:var(--cpv8-acc-d);
  font-size:28px; font-weight:600; letter-spacing:.02em;
}
.cpv8__adblok{display:block;min-width:0}
.cpv8__ad{
  display:block; margin-top:9px;
  font-size:12.5px; font-weight:700; line-height:1.2;
  color:var(--cpv8-ink);
  overflow-wrap:anywhere;
}
.cpv8__unvan{
  display:block; margin-top:3px;
  font-size:10.5px; font-weight:450; line-height:1.3;
  color:var(--cpv8-ink3);
  overflow-wrap:anywhere;
}

/* eğitmen adı kaynakta bağlantıysa bağlantı kalır; görünüm değişmez */
.cpv8 a.cpv8__ad--bag{
  position:relative; z-index:2;
  text-decoration:none !important; color:var(--cpv8-ink) !important;
}
.cpv8 a.cpv8__ad--bag:hover{text-decoration:underline !important;text-underline-offset:2px}
.cpv8__ad--bag:focus-visible{outline:2px solid var(--cpv8-acc-d);outline-offset:2px;border-radius:3px}

/* eski betiklerin okudugu gorunmez govde kopyasi — ekranda yer kaplamaz */
.cpv8__uyum{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  z-index:0 !important;
  visibility:hidden !important;
}

/* --- erken kayıt satırı: her kartta yer tutar, CTA'yı İTMEZ ------------ */
.cpv8__erken{
  flex:0 1 auto; max-width:56%;
  display:block;
  min-height:var(--cpv8-erken-h);
  margin:0;
  font-size:12.5px; font-weight:700; line-height:1.25;
  color:var(--cpv8-kirmizi);
  text-align:right; text-wrap:balance;
}
.cpv8__erken--bos{visibility:hidden}
.cpv8__kivilcim{
  display:inline-block; width:12px; height:12px;
  margin-right:5px; vertical-align:-1px;
}

/* --- CTA: SABİT yükseklik, bütün kartlarda birebir aynı ---------------- */
.cpv8 a.cpv8__cta{text-decoration:none !important;color:var(--cpv8-acc-d) !important}
.cpv8__cta:focus-visible{outline:3px solid var(--cpv8-acc-d);outline-offset:2px}
.cpv8__cta{
  position:relative; z-index:2;
  -webkit-tap-highlight-color:transparent;
  flex:0 0 var(--cpv8-cta-h);
  height:var(--cpv8-cta-h);
  margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:0 16px;
  background:var(--cpv8-acc-t);
  color:var(--cpv8-acc-d);
  border-radius:9px;
  font-size:13.5px; font-weight:600; letter-spacing:-.002em; line-height:1;
  white-space:nowrap;
  transition:background-color .22s ease;
}
.cpv8__ok{flex:0 0 auto;display:block;width:14px;height:14px}

/* --- başlık puntosu: sınıfla taşınır (satır içi stil siteye ulaşmıyor) --- */
.cpv8--p1{--cpv8-baslik-fs:20.5px}
.cpv8--p2{--cpv8-baslik-fs:19px}
.cpv8--p3{--cpv8-baslik-fs:17.5px}
.cpv8--p4{--cpv8-baslik-fs:16px}
.cpv8--p5{--cpv8-baslik-fs:15px}

/* --- SERTLEŞTİRME -------------------------------------------------------
   Sitenin kendi sıfırlama kuralları (p / figure / span için margin ve
   line-height) benim sınıf kurallarımı yeniyordu: eğitim adıyla tarih
   birbirine yapışıyor, eğitmen adı fotoğrafın içine giriyordu. Burada
   düzenin bağlı olduğu ölçüler !important ile yeniden söyleniyor. */
.cpv8 .cpv8__baslik{
  margin:0 !important; line-height:1.14 !important;
  /* Sitenin kendi baslik kurallari h3'u 22 px'e sabitliyordu; ada gore
     kuculen punto bu yuzden hic uygulanmiyordu. */
  font-size:var(--cpv8-baslik-fs,22px) !important;
  /* Tarihler kartlar arasinda ayni hizaya otursun diye baslik en az iki
     satirlik yer tutar; tek satirlik adlarda da tarih ayni yerde baslar. */
  min-height:calc(var(--cpv8-baslik-fs,22px) * 1.14 * 2);
}
.cpv8 .cpv8__tarih{margin:17px 0 0 !important;line-height:1 !important}
.cpv8 .cpv8__gun{margin:0 !important;line-height:1.08 !important}
.cpv8 .cpv8__ayyil{margin:3px 0 0 !important;line-height:1.2 !important}
.cpv8 .cpv8__b1{margin:0 !important}
.cpv8 .cpv8__b2{margin:auto 0 !important}
.cpv8 .cpv8__b3{margin:0 !important;padding:0 !important}
.cpv8 .cpv8__alt{margin:16px 0 0 !important}
.cpv8 .cpv8__kisi{margin:8px 0 0 !important}
.cpv8 .cpv8__ad{margin:9px 0 0 !important;text-align:center}
.cpv8 .cpv8__unvan{margin:2px 0 0 !important;text-align:center}
.cpv8 .cpv8__erken{
  margin:0 !important; color:var(--cpv8-kirmizi) !important;
  display:block !important; text-align:right !important;
}
.cpv8 .cpv8__cta{margin:6px 0 0 !important}

/* ------------------------------------------------------------------
   MOBİL — küçültülmüş masaüstü değil, kendi düzeni.
   Sıra: şehir → eğitim adı → tarih → eğitmen → katılım → CTA → erken kayıt
------------------------------------------------------------------ */
@media (max-width:640px){
  .cpne-grid--v8{grid-template-columns:minmax(0,1fr);gap:14px}
  .cpv8{--cpv8-sehir-fs:34px;--cpv8-baslik-fs:20px;padding:15px}
  .cpv8__govde{display:contents}
  .cpv8__sol{display:contents}
  .cpv8__b1{order:1}
  .cpv8__b1{padding-bottom:0}
  .cpv8 .cpv8__b2{order:2;margin:12px 0 0 !important;padding-left:10px}
  .cpv8__sag{
    order:3; flex:0 0 auto; width:100%;
    display:flex; flex-direction:row; align-items:center; gap:12px;
    margin-top:14px !important; padding-top:13px;
    border-top:1px solid var(--cpv8-line2);
  }
  .cpv8__dil{
    order:3; min-height:0; margin-left:auto; text-align:right;
    font-size:11.5px; color:var(--cpv8-ink3); white-space:nowrap;
  }
  .cpv8 .cpv8__kisi{
    order:2; flex-direction:row; align-items:center; gap:11px;
    width:auto; margin:0 !important; text-align:left; min-width:0;
  }
  .cpv8__cerceve,.cpv8__fotoyok{
    flex:0 0 56px; width:56px; aspect-ratio:1/1;
    border-radius:50%;
  }
  .cpv8__foto{object-position:50% 8%}
  .cpv8__fotoyok{font-size:17px}
  .cpv8__adblok{min-width:0}
  .cpv8 .cpv8__ad{margin:0 !important;font-size:13px}
  .cpv8__unvan{font-size:11px}
  .cpv8__alt{display:contents}
  .cpv8 .cpv8__b3{order:4;margin:12px 0 0 !important;padding:0;font-size:15.5px}
  .cpv8 .cpv8__erken{
    order:6; margin:10px 0 0 !important; max-width:100%;
    text-align:left !important;
  }
  .cpv8 .cpv8__cta{order:5;margin:14px 0 0 !important}
}
@media (max-width:400px){
  .cpv8{--cpv8-sehir-fs:31px;--cpv8-baslik-fs:19px}
  .cpv8__b3{font-size:15px}
}
/* tablet: iki sütun */
@media (min-width:641px) and (max-width:1100px){
  .cpne-grid--v8{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (min-width:641px) and (max-width:820px){
  .cpv8{--cpv8-sehir-fs:36px;--cpv8-foto-w:132px}
}
/* RC16.261: mobile-only language and early-registration hierarchy.
   Extra grid scope outranks previous mobile patches without altering desktop. */
@layer cpCardStability {
  @media (max-width:640px) {
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__dil {
      grid-column:1 / -1 !important; grid-row:1 !important;
      display:flex !important; flex-direction:row !important;
      align-items:baseline !important; justify-content:flex-end !important;
      justify-self:end !important; gap:4px !important;
      width:max-content !important; max-width:100% !important;
      white-space:nowrap !important; font-size:12px !important;
      line-height:1.35 !important; margin:0 !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__dil-etiket {
      display:inline !important; font-weight:500 !important;
      text-transform:none !important; color:#5a7076 !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__dil-deger {
      display:inline !important; text-transform:uppercase !important;
      color:#197c96 !important; font-weight:700 !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__sol {
      /* RC16.263: location starts beside the language, not below it. */
      grid-row:1 / 3 !important;
      align-self:start !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__b1 {
      padding-top:0 !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__b2 {
      margin:24px 0 0 !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__ulke {
      max-width:calc(100% - 14px) !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__dil {
      font-size:clamp(10px,2.65vw,12px) !important;
      max-width:56% !important;
    }
    /* RC16.264: keep portrait and centered caption together, higher on mobile.
       One figure owns both elements; variable course text cannot split them. */
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__ic {
      grid-template-columns:minmax(0,1fr) clamp(108px,32vw,136px) !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__kisi {
      display:flex !important; flex-direction:column !important;
      grid-column:2 !important; grid-row:2 / 4 !important;
      align-self:start !important; align-items:center !important;
      width:100% !important; min-width:0 !important; gap:6px !important;
      margin:12px 0 0 !important; padding:0 !important;
      text-align:center !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__cerceve,
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__fotoyok {
      align-self:center !important; width:100% !important;
      flex:0 0 auto !important; margin:0 !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__adblok {
      align-self:center !important; width:100% !important;
      max-width:100% !important; margin:0 !important;
      text-align:center !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__ad,
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__unvan {
      text-align:center !important; white-space:normal !important;
      margin:0 !important; overflow-wrap:normal !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__unvan {
      margin-top:3px !important;
    }
    .cpne-feed .cpne-grid .cpne-card.cpv8 .cpv8__erken:not(.cpv8__erken--bos) {
      grid-column:1 / -1 !important; grid-row:4 !important;
      justify-self:start !important; justify-content:flex-start !important;
      text-align:start !important; width:fit-content !important;
      max-width:100% !important; min-height:0 !important;
      margin:4px 0 -4px !important; padding:6px 9px !important;
      box-sizing:border-box !important; border-inline-start:3px solid #b32632 !important;
      border-radius:4px !important; background:#fff3f3 !important;
      color:#b32632 !important; font-size:13px !important;
      font-weight:600 !important; line-height:1.35 !important;
      white-space:normal !important; overflow-wrap:normal !important;
    }
  }
}