/* ==========================================================================
   About us — panacheeducation.com/home tasarımının birebir karşılığı
   Sadece .about-page gövdesi altında geçerlidir; ana sayfa stilleri etkilenmez.
   Referans ölçüm viewport'u: 1920px
   ========================================================================== */

.about-page{
  --ab-red:#DF3131;
  --ab-red-deep:#D31816;
  /* Koyu zemin için: --ab-red-deep orada 3.26, --ab-red 3.85 veriyor.
     sections.css'teki --sc-red-text-dk ile aynı ton (koyu bantta 5.06). */
  --ab-red-dk:#E85B5B;
  /* Açık bantta küçük kırmızı metin için (eyebrow): #DF3131 4.31 ile AA'yı
     geçmiyor. sections.css'teki --sc-red-text ile aynı ton. */
  --ab-red-text:#C41414;
  --ab-ink:#05244F;
  --ab-muted:#405A7B;
  --ab-dark:#0E1A2B;
  --ab-light:#F8F9FA;
  --ab-grey:#E6E9ED;
  --ab-rule:rgba(223,49,49,.55);

  --caslon:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --cormorant:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --isans:"Instrument Sans","Manrope","Helvetica Neue",Arial,sans-serif;

  /* bölüm iç boşluğu: 1920'de 120px */
  --ab-gut:var(--gut);
}

.about-page .ab-wrap{width:100%;padding-inline:var(--ab-gut)}

/* Ortak tipografi yardımcıları ------------------------------------------- */
.about-page .ab-serif-title{
  font-family:var(--cormorant);font-weight:700;color:var(--ab-ink);
  line-height:.95;margin:0}
.about-page .ab-body{
  font-family:var(--caslon);font-weight:400;color:var(--ab-ink);
  font-size:clamp(16px,1.25vw,24px);line-height:1.3;margin:0}
.about-page .ab-dot{color:var(--ab-red)}

/* Eyebrow — sections.css'teki .sc-eyebrow ile birebir aynı ölçü ve renk.
   Sayfa kendi bileşen setini koruyor ama tipografi sitenin geri kalanıyla
   aynı (denetim D1). */
.about-page .ab-eyebrow{font-family:var(--cormorant);font-weight:700;
  font-size:clamp(15px,1.15vw,22px);letter-spacing:.06em;line-height:1;
  color:var(--ab-red-text);margin:0 0 15px;text-transform:uppercase}
.about-page .about-hero .ab-eyebrow,
.about-page .ab-why .ab-eyebrow,
.about-page .ab-experience .ab-eyebrow{color:var(--ab-red-dk)}

/* TEK bölüm başlığı muamelesi. Önceden burada 7 ayrı muamele vardı (serif-büyük,
   serif-karışık, ağır sans-ortalı, ağır sans-sola, küçük serif...). Hepsi
   .sc-h2 ile aynı ölçeğe indirildi: Cormorant 700 / clamp(28px,2.7vw,52px). */
/* Sabit <br> yerine dengeli kırılım: sütun genişliği değişse de başlık
   2 satırda kalır. */
.about-page .ab-intro h2{text-wrap:balance}
.about-page .ab-intro h2,
.about-page .ab-why h2,
.about-page .ab-approach h2,
.about-page .ab-experience h2,
.about-page .ab-borders h2{
  font-family:var(--cormorant);font-weight:700;color:var(--ab-ink);
  font-size:clamp(28px,2.7vw,52px);line-height:.98;letter-spacing:0;
  text-align:start;margin:0 0 clamp(16px,1.4vw,27px)}
.about-page .ab-why h2,
.about-page .ab-experience h2{color:#fff}

/* TEK alt başlık muamelesi — sections.css'teki .sc-split h3 ile aynı.
   .ab-audience h3 eskiden 42px kırmızı Cormorant'tı; o ölçüde kendi başına bir
   bölüm başlığı gibi duruyordu, oysa iki sütunlu liste karşılaştırması.
   .ab-audience__claim ("One vision.") HARİÇ: o bir başlık değil, bölümün
   görsel çıpası — kendi 84px'lik ölçeğini koruyor. */
.about-page .ab-audience__cols > div:not(.ab-audience__claim) > h3,
.about-page .ab-approach__item h3{
  font-family:var(--isans);font-weight:700;color:var(--ab-ink);
  font-size:clamp(14px,1.04vw,20px);letter-spacing:.09em;text-transform:uppercase;
  line-height:1.2;margin:0 0 clamp(12px,1.05vw,20px)}
/* CTA bandında başlık 23px'te kalıyor: büyük metin sayılmıyor, koyu zeminde
   --ab-red 3.85 veriyor. */
.about-page .cta .ab-dot{color:var(--ab-red-dk)}

/* ---------- 1. hero ------------------------------------------------------ */
.about-hero{position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--ab-dark);min-height:clamp(340px,27.6vw,530px)}
.about-hero__art{position:absolute;inset:0;z-index:0;
  background:url("../img/about-hero.webp") center center/cover no-repeat}
.about-hero__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,26,43,.55) 0%,rgba(14,26,43,.25) 45%,rgba(14,26,43,0) 72%)}
.about-hero__inner{position:relative;z-index:1;width:100%;
  padding-block:clamp(48px,4vw,70px);
  padding-inline:var(--ab-gut)}
.about-hero h1{font-family:var(--cormorant);font-weight:600;color:#fff;
  font-size:clamp(32px,3vw,57.5px);line-height:1;margin:0 0 14px;letter-spacing:0}
.about-hero p{font-family:var(--caslon);color:#fff;
  font-size:clamp(15px,1.25vw,24px);line-height:1.25;margin:0;max-width:740px}

/* ---------- 2. intro (more than an educational consultancy) -------------- */
.ab-intro{background:#fff;padding-block:clamp(44px,3.6vw,68px)}
/* Metin sütunu 780->900fr: başlık ortak .sc-h2 ölçeğine (40px @1499) çıkınca
   eski genişlikte 3 satıra kırılıyordu. Görsel sütun buna karşılık daralıyor. */
.ab-intro__grid{display:grid;grid-template-columns:minmax(0,900fr) minmax(0,850fr);
  gap:clamp(20px,1vw,19px);align-items:start}
.about-page .ab-intro__copy > p + p{margin-top:1.15em}
.ab-intro__media{margin:0}
.ab-intro__media img{width:100%;height:auto;display:block}

/* ---------- 3. why panache (koyu bant) ----------------------------------- */
.ab-why{background:var(--ab-dark);color:#fff;padding-block:clamp(40px,3.2vw,60px)}
.ab-why__inner{padding-inline:var(--ab-gut)}
.ab-why__cols{display:grid;grid-template-columns:minmax(0,456fr) minmax(0,584fr);
  gap:clamp(24px,5.6vw,108px);align-items:center}
.ab-why__cols > div + div{position:relative}
.ab-why__cols > div + div::before{content:"";position:absolute;
  left:calc(-1 * clamp(12px,2.8vw,54px));top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.45)}
.ab-why h2 .q{color:var(--ab-red)}
.ab-why p{font-family:var(--caslon);font-size:clamp(15px,1.25vw,24px);line-height:1.3;color:#fff;margin:0}

/* ---------- 4. audiences (students / schools / one vision) --------------- */
.ab-audience{position:relative;background:var(--ab-light);
  padding-block:clamp(40px,3.2vw,60px);overflow:hidden}
.ab-audience__bg{position:absolute;inset:0;z-index:0;opacity:.22;
  background:url("../img/about-audience-bg.webp") center center/cover no-repeat}
.ab-audience__inner{position:relative;z-index:1;
  padding-inline:var(--ab-gut)}
.ab-audience__cols{display:grid;grid-template-columns:minmax(0,503fr) minmax(0,633fr) minmax(0,614fr);
  gap:clamp(24px,2.5vw,48px);align-items:start}
.ab-audience__cols > div + div{position:relative}
.ab-audience__cols > div + div::before{content:"";position:absolute;
  left:calc(-1 * clamp(12px,1.25vw,24px));top:0;bottom:0;width:1px;background:rgba(5,36,79,.16)}
.ab-audience p{font-family:var(--caslon);font-size:clamp(15px,1.25vw,24px);
  line-height:1.3;color:var(--ab-ink);margin:0 0 clamp(14px,1.05vw,20px)}
.ab-audience ul{list-style:none;margin:0;padding:0 0 0 1.55em}
.ab-audience li{position:relative;font-family:var(--caslon);
  font-size:clamp(15px,1.25vw,24px);line-height:1.3;color:var(--ab-ink)}
.ab-audience li + li{margin-top:.08em}
.ab-audience li::before{content:"•";position:absolute;left:-.85em;color:var(--ab-ink)}
.ab-audience__claim h3{font-family:var(--isans);font-weight:700;color:var(--ab-ink);
  font-size:clamp(38px,4.37vw,84px);line-height:.95;margin:0}
.ab-audience__claim p{font-family:var(--isans);font-weight:700;color:var(--ab-red);
  font-size:clamp(19px,1.875vw,36px);line-height:1.1;margin:clamp(8px,.7vw,13px) 0 0}
.ab-audience__claim .rule{display:block;width:clamp(48px,3.75vw,72px);height:3px;
  background:var(--ab-red);margin-top:clamp(6px,.5vw,9px)}

/* ---------- 5. the panache approach (gri bant) --------------------------- */
.ab-approach{background:var(--ab-grey);padding-block:clamp(44px,3.6vw,68px)}
.ab-approach h2 em{font-style:normal;color:var(--ab-red)}
.ab-approach__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.1vw,60px);
  margin-top:clamp(22px,2vw,38px)}
.ab-approach__item .rule{display:block;width:clamp(38px,3.2vw,62px);height:3px;
  background:var(--ab-red);margin:0 0 clamp(12px,1vw,19px)}
.ab-approach__item p{font-family:var(--caslon);font-size:clamp(15px,1.09vw,21px);
  line-height:1.3;color:var(--ab-muted);margin:0}

/* ---------- 6. experience & expertise (koyu bant) ------------------------ */
.ab-experience{background:var(--ab-dark);color:#fff;padding-block:clamp(40px,3.1vw,59px)}
.ab-experience__inner{padding-inline:var(--ab-gut)}
.ab-experience__grid{display:grid;grid-template-columns:minmax(0,890fr) minmax(0,933fr);
  gap:clamp(28px,2.6vw,50px);align-items:start}
.ab-experience__lead{font-family:var(--caslon);font-size:clamp(15px,1.25vw,24px);
  line-height:1.3;color:#fff;margin:0;max-width:535px}
.ab-experience__stats{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,1.7vw,32px);padding-inline-start:clamp(16px,2vw,38px);
  border-inline-start:1px solid var(--ab-rule)}
.ab-experience__stat + .ab-experience__stat{padding-inline-start:clamp(14px,1.6vw,30px);
  border-inline-start:1px solid var(--ab-rule)}
.ab-experience__stat svg{width:clamp(56px,5.2vw,100px);height:auto;display:block;
  stroke:var(--ab-red);fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  margin:0 0 clamp(12px,1.1vw,21px)}
.ab-experience__stat .num{font-family:var(--isans);font-weight:700;color:var(--ab-red);
  font-size:clamp(30px,3.75vw,72px);line-height:1;display:block;margin:0 0 clamp(6px,.6vw,11px)}
.ab-experience__stat p{font-family:var(--caslon);font-size:clamp(15px,1.09vw,21px);
  line-height:1.3;color:#fff;margin:0}

/* ---------- 7. expertise without borders --------------------------------- */
.ab-borders{background:var(--ab-light);padding-block:clamp(40px,3.3vw,64px)}
.ab-borders__inner{padding-inline:var(--ab-gut)}
.ab-borders__cols{display:grid;
  grid-template-columns:minmax(0,620fr) minmax(0,480fr) minmax(0,640fr);
  gap:clamp(24px,3.1vw,60px);align-items:center;margin-top:clamp(22px,2vw,38px)}
.ab-borders p{font-family:var(--caslon);font-size:clamp(15px,1.25vw,24px);
  line-height:1.3;color:var(--ab-ink);margin:0}
.ab-borders__note{position:relative;padding-inline-start:clamp(16px,1.6vw,31px)}
.ab-borders__note::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--ab-red)}
.ab-crests{display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(8px,.9vw,17px);flex-wrap:nowrap;margin:0;padding:0;list-style:none}
.ab-crests img{height:clamp(38px,4vw,76px);width:auto;object-fit:contain}

/* ---------- 8. cta — ana sayfadaki .cta bileşeninin about tipografisi ---- */
.about-page .cta{padding:clamp(48px,4.3vw,82px) 0 clamp(40px,3.6vw,68px)}
.about-page .cta h2{font-family:var(--caslon);font-weight:400;
  font-size:clamp(22px,2.05vw,40px);line-height:1.28;margin:0 0 clamp(13px,1.1vw,21px)}
.about-page .cta p{font-family:var(--caslon);font-weight:400;color:#fff;
  font-size:clamp(15px,1.25vw,24px);line-height:1.3;max-width:760px;
  margin:0 auto clamp(24px,2.1vw,40px)}
/* Dokunma hedefi (denetim B4): padding em tabanlı olduğu için 390px'te buton
   33px'e iniyordu. Masaüstünde doğal yükseklik zaten 44px'in üstünde, yani
   min-height yalnızca mobilde devreye giriyor — desktop görünümü değişmiyor. */
.about-page .cta .btn-red{font-family:var(--caslon);font-weight:400;
  font-size:clamp(15px,1.25vw,24px);letter-spacing:.02em;padding:.42em 1.6em;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1040px){
  .ab-approach__grid{grid-template-columns:repeat(2,1fr);gap:40px 32px}
  .ab-audience__cols{grid-template-columns:1fr 1fr;gap:32px}
  .ab-audience__claim{grid-column:1 / -1;padding-top:8px}
  .ab-audience__cols > .ab-audience__claim::before{display:none}
  .ab-experience__grid{grid-template-columns:1fr;gap:34px}
  .ab-experience__stats{padding-inline-start:0;border-inline-start:0}
  .ab-borders__cols{grid-template-columns:1fr 1fr;gap:32px}
  .ab-crests{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:900px){
  .about-hero{min-height:0}
  .about-hero__art::after{background:linear-gradient(180deg,rgba(14,26,43,.72) 0%,rgba(14,26,43,.5) 60%,rgba(14,26,43,.72) 100%)}
  .ab-intro__grid{grid-template-columns:1fr;gap:28px}
  .ab-intro__media{order:-1}
  .ab-why__cols{grid-template-columns:1fr;gap:24px}
  .ab-why__cols > div + div{padding-top:24px}
  .ab-why__cols > div + div::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .ab-audience__cols{grid-template-columns:1fr;gap:34px}
  .ab-audience__cols > div + div{padding-top:34px}
  .ab-audience__cols > div + div::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .ab-experience__stats{grid-template-columns:1fr;gap:28px}
  .ab-experience__stat + .ab-experience__stat{padding-inline-start:0;border-inline-start:0;
    padding-top:28px;border-top:1px solid var(--ab-rule)}
  .ab-borders__cols{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .ab-approach__grid{grid-template-columns:1fr;gap:34px}
  .ab-crests img{height:42px}
}