/* ══════════════════════════════════════════════════════════════
   MODE ACADEMY AFRICA — DESIGN TOKENS
   Values derived from the approved reference designs.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* colour */
  --afr-bg:#FBF8F4;
  --afr-bg-alt:#F6F2EB;
  --afr-surface:#FFFFFF;
  --afr-soft:#F6F4F1;
  --afr-navy:#0A1A33;
  --afr-navy-80:rgba(10,26,51,.80);
  --afr-navy-60:rgba(10,26,51,.60);
  --afr-text:#6B6B6B;
  --afr-orange:#E8891A;
  --afr-orange-d:#D07A12;
  --afr-gold:#D9A441;
  --afr-green:#2F6B4F;
  --afr-border:rgba(10,26,51,.10);
  --afr-border-2:rgba(10,26,51,.17);
  --afr-tint-o:rgba(232,137,26,.10);
  /* Accent ink for TEXT on a light ground. --afr-orange is a fill colour: at
     small uppercase sizes it lands around 2.4:1 on the cream background, which
     is below the readable floor. Fills keep the orange; accent text uses this. */
  --afr-accent-ink:#A35F0A;

  /* spacing */
  --afr-s1:4px; --afr-s2:8px; --afr-s3:12px; --afr-s4:16px; --afr-s5:24px;
  --afr-s6:32px; --afr-s7:48px; --afr-s8:64px; --afr-s9:96px;

  /* radius — one consistent family */
  --afr-r-s:8px; --afr-r-m:14px; --afr-r-l:20px; --afr-r-xl:28px; --afr-r-f:999px;

  /* shadow — three tiers only */
  --afr-sh1:0 1px 2px rgba(10,26,51,.04), 0 2px 8px rgba(10,26,51,.03);
  --afr-sh2:0 2px 6px rgba(10,26,51,.05), 0 12px 32px rgba(10,26,51,.06);
  --afr-sh3:0 4px 12px rgba(10,26,51,.06), 0 26px 64px rgba(10,26,51,.10);

  /* typography */
  --afr-font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --afr-t-eyebrow:12px; --afr-t-sm:14px; --afr-t-body:16px; --afr-t-lede:18px;
  --afr-t-h4:17px; --afr-t-h3:23px;
  --afr-t-h2:clamp(30px,3.5vw,50px);
  --afr-t-h1:clamp(40px,6.2vw,84px);

  /* motion */
  --afr-d1:200ms; --afr-d2:400ms; --afr-d3:700ms; --afr-d4:900ms;
  --afr-ease:cubic-bezier(.16,1,.3,1);
  --afr-ease-s:cubic-bezier(.4,0,.2,1);

  /* layout */
  --afr-wrap:1320px;
  --afr-gut:clamp(20px,4vw,56px);
  --afr-hh:88px;
}

/* ══════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════ */
/* Scoped base. `.afr` sits on the header, footer, drawer and the home <main>,
   so none of this can reach page bodies that are still styled by the legacy
   sheet. `body.afr-body` is added only on pages rebuilt with these components.

   The scope goes inside :where() on purpose. These were bare element selectors
   in the reference; wrapping them in a plain `.afr ` would lift them to class
   specificity and let the reset win over the component rules that are supposed
   to override it (`.trio{margin-top}`, `.rule{height}` …). :where() adds the
   scope at zero specificity, so the cascade stays exactly as designed. */
:where(.afr),:where(.afr) *,:where(.afr) *::before,:where(.afr) *::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--afr-hh) + 16px);-webkit-text-size-adjust:100%}
.afr{
  font-family:var(--afr-font);font-size:var(--afr-t-body);line-height:1.65;
  color:var(--afr-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.afr-body{margin:0;background:var(--afr-bg);overflow-x:hidden}
:where(.afr) :is(h1,h2,h3,h4){color:var(--afr-navy);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0}
:where(.afr) h1{font-size:var(--afr-t-h1);letter-spacing:-.035em;line-height:1.02}
:where(.afr) h2{font-size:var(--afr-t-h2);letter-spacing:-.03em}
:where(.afr) h3{font-size:var(--afr-t-h3)}
:where(.afr) h4{font-size:var(--afr-t-h4)}
:where(.afr) p{margin:0}
:where(.afr) a{color:inherit;text-decoration:none}
:where(.afr) :is(img,video,canvas,svg){display:block;max-width:100%}
:where(.afr) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(.afr) :is(ul,ol){margin:0;padding:0;list-style:none}
:where(.afr) :focus-visible{outline:2px solid var(--afr-orange);outline-offset:3px;border-radius:var(--afr-r-s)}
.afr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.afr-skip{position:absolute;left:var(--afr-s5);top:-60px;z-index:200;background:var(--afr-navy);color:#fff;
  padding:12px 20px;border-radius:var(--afr-r-f);font-size:14px;transition:top var(--afr-d1)}
.afr-skip:focus{top:12px}

/* layout primitives */
.afr-wrap{width:100%;max-width:var(--afr-wrap);margin-inline:auto;padding-inline:var(--afr-gut)}
.afr-section{padding-block:clamp(72px,9vw,124px);position:relative;overflow:hidden}
.afr-section--alt{background:var(--afr-bg-alt)}

/* ══════════════════════════════════════════════════════════════
   DECOR — circuit lines · dot grids
   ══════════════════════════════════════════════════════════════ */
.afr-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.afr-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(10,26,51,.11) 1px,transparent 1px);
  background-size:26px 26px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 46%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 72% 62% at 50% 46%,#000,transparent 76%);
}
.afr-circuit{position:absolute}
.afr-circuit path{fill:none;stroke:var(--afr-gold);stroke-width:1;opacity:.34}
.afr-circuit circle{fill:var(--afr-orange);opacity:.5}
.afr-drift{animation:drift 24s linear infinite}
.afr-drift-y{animation:drifty 20s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
@keyframes drifty{from{transform:translateY(-14px)}to{transform:translateY(14px)}}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · HEADER
   ══════════════════════════════════════════════════════════════ */
.afr-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,248,244,.76);backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid transparent;
  transition:border-color var(--afr-d2),background var(--afr-d2);
}
.afr-header.afr-stuck{border-bottom-color:var(--afr-border);background:rgba(251,248,244,.95)}
.afr-header__in{display:flex;align-items:center;gap:var(--afr-s6);height:var(--afr-hh)}

/* Logo — the real Mode Academy artwork, the same file the TR site uses. It is
   authored white for a dark header, so on the cream ground it is inked with a
   mask: the element paints the brand navy and the PNG supplies the shape, which
   keeps the colour exact instead of approximating it with filters. Browsers
   without mask support fall back to the image itself, darkened. */
.afr-logo{display:flex;align-items:center;gap:12px;flex:none}
.afr-logo__img{
  display:block;width:206px;height:32px;flex:none;
  background:url("../cinematic/logo.png") no-repeat left center/contain;
  filter:brightness(0);
}
@supports ((-webkit-mask-image:url("a")) or (mask-image:url("a"))){
  .afr-logo__img{
    background:var(--afr-navy);filter:none;
    -webkit-mask:url("../cinematic/logo.png") no-repeat left center/contain;
    mask:url("../cinematic/logo.png") no-repeat left center/contain;
  }
}
.afr-logo__edition{
  font:700 13px/1 var(--afr-font);letter-spacing:.18em;color:var(--afr-orange);
  padding:5px 9px;border:1px solid var(--afr-orange);border-radius:var(--afr-r-s);
  align-self:center;flex:none
}

.afr-nav{display:flex;align-items:center;gap:var(--afr-s6);margin-inline:auto}
.afr-nav a{
  position:relative;font-size:13.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--afr-navy);padding:9px 2px;transition:color var(--afr-d1) var(--afr-ease-s);
}
.afr-nav a:hover{color:var(--afr-orange)}
.afr-nav a[aria-current="page"]{color:var(--afr-orange)}
.afr-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--afr-orange);border-radius:2px}
.afr-nav a[aria-current="page"]::before{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:5px;margin-left:-2.5px;background:var(--afr-orange);border-radius:50%}

.afr-header__end{display:flex;align-items:center;gap:var(--afr-s4);flex:none;margin-left:auto}
.afr-lang{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--afr-r-f);
  font-size:13px;font-weight:500;color:var(--afr-navy);transition:background var(--afr-d1)}
.afr-lang:hover{background:rgba(10,26,51,.05)}
.afr-lang svg{width:17px;height:17px;stroke:var(--afr-navy);fill:none;stroke-width:1.5}
.afr-lang i{font-style:normal;font-size:10px;opacity:.5}

.afr-burger{display:none;width:46px;height:46px;border:1px solid var(--afr-border-2);border-radius:var(--afr-r-f);
  align-items:center;justify-content:center;flex:none}
.afr-burger b{display:block;width:17px;height:1.5px;background:var(--afr-navy);position:relative;transition:var(--afr-d2) var(--afr-ease)}
.afr-burger b::before,.afr-burger b::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--afr-navy);transition:var(--afr-d2) var(--afr-ease)}
.afr-burger b::before{top:-5.5px}.afr-burger b::after{top:5.5px}
.afr-burger[aria-expanded="true"] b{background:transparent}
.afr-burger[aria-expanded="true"] b::before{top:0;transform:rotate(45deg)}
.afr-burger[aria-expanded="true"] b::after{top:0;transform:rotate(-45deg)}

.afr-drawer{
  position:fixed;inset:var(--afr-hh) 0 0;z-index:99;background:var(--afr-bg);
  padding:var(--afr-s7) var(--afr-gut) var(--afr-s8);display:flex;flex-direction:column;
  overflow-y:auto;transform:translateY(-10px);opacity:0;visibility:hidden;
  transition:opacity var(--afr-d2) var(--afr-ease),transform var(--afr-d2) var(--afr-ease),visibility var(--afr-d2);
}
.afr-drawer.afr-open{transform:none;opacity:1;visibility:visible}
.afr-drawer a{font-size:21px;font-weight:500;color:var(--afr-navy);min-height:56px;display:flex;align-items:center;border-bottom:1px solid var(--afr-border)}
.afr-drawer .afr-btn{margin-top:var(--afr-s6);justify-content:center;border-bottom:0}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · BUTTON
   ══════════════════════════════════════════════════════════════ */
.afr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 28px;border-radius:var(--afr-r-f);
  font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform var(--afr-d1) var(--afr-ease-s),background var(--afr-d1),box-shadow var(--afr-d1),
             color var(--afr-d1),border-color var(--afr-d1);
}
.afr-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none;
  transition:transform var(--afr-d2) var(--afr-ease)}
.afr-btn:hover{transform:translateY(-2px)}
.afr-btn:hover svg:last-child{transform:translateX(5px)}
.afr-btn--primary{background:var(--afr-navy);color:#fff;box-shadow:var(--afr-sh2)}
.afr-btn--primary:hover{background:#112746;box-shadow:var(--afr-sh3)}
.afr-btn--accent{background:var(--afr-orange);color:#fff;box-shadow:0 6px 20px rgba(232,137,26,.26)}
.afr-btn--accent:hover{background:var(--afr-orange-d);box-shadow:0 10px 28px rgba(232,137,26,.32)}
.afr-btn--ghost{background:var(--afr-surface);border:1px solid var(--afr-border-2);color:var(--afr-navy)}
.afr-btn--ghost:hover{border-color:var(--afr-navy)}
.afr-btn--text{min-height:44px;padding:0;text-transform:none;letter-spacing:0;font-size:15px;color:var(--afr-orange);gap:9px}
.afr-btn--text:hover{transform:none;color:var(--afr-orange-d)}
.afr-btn--text svg{width:14px;height:14px}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · SECTION HEADING
   ══════════════════════════════════════════════════════════════ */
.afr-eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:var(--afr-s5);
  font-size:var(--afr-t-eyebrow);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--afr-orange);
}
.afr-eyebrow::before{content:"";width:30px;height:1px;background:currentColor;flex:none}
.afr-eyebrow--c{justify-content:center}
.afr-eyebrow--c::after{content:"";width:30px;height:1px;background:currentColor;flex:none}
/* display:block is not in the reference: the card variant is authored as a
   <span>, so width/height were ignored and the gradient rule never rendered
   there. The <div> usages are unaffected. */
.afr-rule{display:block;width:64px;height:3px;border-radius:3px;margin-top:var(--afr-s5);
  background:linear-gradient(90deg,var(--afr-orange),var(--afr-gold) 52%,var(--afr-green))}
.afr-rule--s{width:52px;height:2px}
.afr-rule--c{margin-inline:auto}
.afr-lede{font-size:var(--afr-t-lede);line-height:1.7;max-width:58ch;margin-top:var(--afr-s5)}
.afr-head-c{text-align:center;max-width:820px;margin-inline:auto}
.afr-head-c .afr-lede{margin-inline:auto}
.afr-head-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.afr-head-split .afr-lede{margin-top:0}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · ICON TILE
   ══════════════════════════════════════════════════════════════ */
.afr-tile{
  width:46px;height:46px;flex:none;border-radius:var(--afr-r-m);
  background:var(--afr-soft);border:1px solid var(--afr-border);display:grid;place-items:center;
  transition:background var(--afr-d1),border-color var(--afr-d1),transform var(--afr-d1) var(--afr-ease-s);
}
.afr-tile svg{width:22px;height:22px;fill:none;stroke:var(--afr-navy);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.afr-tile--lg{width:56px;height:56px;border-radius:var(--afr-r-l)}
.afr-tile--lg svg{width:26px;height:26px}
.afr-tile--accent svg{stroke:var(--afr-orange)}
:is(.afr-card,.afr-strip__i,.afr-gain__i,.afr-road__i):hover .afr-tile{background:var(--afr-surface);border-color:var(--afr-gold);transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.afr-hero{position:relative;padding-block:clamp(40px,5vw,72px) 0;overflow:hidden}
.afr-hero__grid{
  /* Sahne sütunu genişletildi: hero görseli artık gerçek bir sahne, daha
     büyük görünmesi isteniyor. Metin sütunu başlığı taşımaya yetiyor. */
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,64px);align-items:center;position:relative;z-index:2;
}
.afr-hero__hi{
  display:flex;align-items:center;gap:14px;margin-bottom:var(--afr-s6);
  font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--afr-navy-60);
}
.afr-hero__hi svg{width:24px;height:10px;stroke:var(--afr-orange);fill:none;stroke-width:1.5;flex:none}
.afr-hero h1 span{display:block}
.afr-hero__l2 .afr-o{color:var(--afr-orange)}
.afr-hero__l2 .afr-g{color:var(--afr-green)}
.afr-hero__sub{font-size:19px;line-height:1.62;margin-top:var(--afr-s6);max-width:34ch}
.afr-hero__btns{display:flex;flex-wrap:wrap;gap:var(--afr-s4);margin-top:var(--afr-s7)}

.afr-hero__stage{position:relative}
.afr-hero__media{
  position:relative;border-radius:var(--afr-r-xl);overflow:hidden;
  aspect-ratio:16/11;background:var(--afr-soft);
}
.afr-hero__media>video,.afr-hero__media>canvas,.afr-hero__media>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Sahne görseli <picture> içinde geldiği için yukarıdaki >img seçicisine
   takılmıyor; konumlandırmayı burada yapıyoruz. Canvas DOM'da sonra geldiği
   ve o da absolute olduğu için görselin üstünde kalıyor. */
.afr-hero__media>picture{position:absolute;inset:0}
.afr-hero__media>picture>img{display:block;width:100%;height:100%;object-fit:cover}

/* Sahne, metin sütununun tam boyuna uzansın: görselin üstü "MODE Africa'ya
   hoş geldiniz" satırıyla, altı "MODE Africa'yı Keşfet" butonuyla hizalanıyor.
   Ölçüldü: görsel 479px'ten 651px'e çıkıyor (+%36).
   1040px altında ızgara zaten tek sütuna düşüyor ve ray gizleniyor, o yüzden
   kural yalnızca üstünde geçerli. */
@media (min-width:1041px){
  .afr-hero__grid{align-items:stretch}
  .afr-hero__stage{display:flex}
  .afr-hero__media{aspect-ratio:auto;height:100%;min-height:0;flex:1}
}
.afr-hero__scrim{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,rgba(251,248,244,.94) 0%,rgba(251,248,244,.46) 32%,rgba(251,248,244,0) 60%);
}
/* Ray görselin ALT bandında, yatay olarak duruyor.
   Önce sağdaydı: sahnenin kalabalık tarafına (robot kolu, paneller, rover)
   biniyordu ve kutudan 12px taşıp "ARTIFICIAL INTELLIGENCE" kırpılıyordu.
   Sonra sola alındı; ama sahne tam yüksekliğe çıkarılınca kutu kareye
   yaklaştı, object-fit:cover yanlardan %28,7 kırpmaya başladı ve soldaki boş
   şerit yok olup yazılar kıtanın üstüne düşüyordu.
   Görselin detay haritası ölçüldü: ALT %17'lik bant tüm genişlik boyunca boş
   (kenar yoğunluğu 0–3), yani yatay kırpmadan etkilenmiyor. Ray bu yüzden
   burada — ölçümde görselin %89,8–97,5 dikey aralığına oturuyor. */
.afr-hero__rail{
  position:absolute;left:4%;right:4%;bottom:3.5%;
  z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;align-items:end;
}
.afr-hero__rail li{position:relative;padding-left:16px;font-size:11px;letter-spacing:.10em;text-transform:uppercase;line-height:1.5;color:var(--afr-navy-60)}
/* Dar sütunda uzun etiket ("Artificial Intelligence") sarabilsin. */
.afr-hero__rail b{overflow-wrap:break-word}
.afr-hero__rail b{display:block;color:var(--afr-navy);font-weight:600}
.afr-hero__rail li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--afr-orange)}

.afr-cue{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:var(--afr-s7);position:relative;z-index:2;min-height:44px}
.afr-cue__m{width:22px;height:34px;border:1px solid var(--afr-border-2);border-radius:var(--afr-r-f);position:relative}
.afr-cue__m::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:6px;margin-left:-1px;
  background:var(--afr-navy-60);border-radius:2px;animation:wheel 1.9s var(--afr-ease-s) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
.afr-cue span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--afr-navy-60)}
.afr-cue svg{width:14px;height:8px;stroke:var(--afr-orange);fill:none;stroke-width:1.5}

/* roadmap strip — 4 items, matches reference */
.afr-strip{
  position:relative;z-index:3;margin-top:clamp(36px,4.5vw,64px);
  background:var(--afr-surface);border:1px solid var(--afr-border);border-radius:var(--afr-r-xl);
  box-shadow:var(--afr-sh2);padding:var(--afr-s6) clamp(24px,3vw,44px);
  display:grid;grid-template-columns:minmax(190px,1.05fr) repeat(4,minmax(0,1fr)) auto;
  gap:var(--afr-s5);align-items:center;
}
.afr-strip__lead .afr-k{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--afr-orange)}
.afr-strip__lead h2{font-size:22px;margin-top:8px;line-height:1.26;letter-spacing:-.02em}
.afr-strip__lead em{font-style:normal;color:var(--afr-orange)}
.afr-strip__i{display:flex;align-items:center;gap:13px;padding-left:var(--afr-s5);border-left:1px solid var(--afr-border);min-width:0}
.afr-strip__i b{display:block;color:var(--afr-navy);font-size:14.5px;font-weight:600;line-height:1.34}
.afr-strip__i small{font-size:13px;color:var(--afr-text);line-height:1.4}
.afr-strip__i--soon b{color:var(--afr-navy)}
.afr-strip__go{
  width:52px;height:52px;flex:none;border-radius:50%;background:var(--afr-navy);display:grid;place-items:center;
  transition:transform var(--afr-d1) var(--afr-ease-s),background var(--afr-d1);
}
.afr-strip__go svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8}
.afr-strip__go:hover{transform:translateY(-2px) scale(1.05);background:var(--afr-orange)}

/* ══════════════════════════════════════════════════════════════
   ROADMAP
   ══════════════════════════════════════════════════════════════ */
.afr-road{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--afr-s5);margin-top:var(--afr-s8);position:relative}
.afr-road::before{content:"";position:absolute;top:34px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--afr-border-2) 12%,var(--afr-border-2) 88%,transparent)}
.afr-road__i{text-align:center;position:relative}
.afr-road__d{
  width:68px;height:68px;margin:0 auto var(--afr-s5);border-radius:50%;
  background:var(--afr-surface);border:1px solid var(--afr-border);display:grid;place-items:center;
  position:relative;z-index:2;box-shadow:var(--afr-sh1);
  transition:transform var(--afr-d2) var(--afr-ease),border-color var(--afr-d2),box-shadow var(--afr-d2);
}
.afr-road__d svg{width:27px;height:27px;fill:none;stroke:var(--afr-navy);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.afr-road__i:hover .afr-road__d{transform:translateY(-5px);border-color:var(--afr-orange);box-shadow:var(--afr-sh2)}
.afr-road__i--now .afr-road__d{background:var(--afr-navy);border-color:var(--afr-navy)}
.afr-road__i--now .afr-road__d svg{stroke:#fff}
.afr-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--afr-r-f);margin-bottom:10px}
.afr-badge--now{background:var(--afr-tint-o);color:var(--afr-orange)}
.afr-badge--next{background:rgba(10,26,51,.06);color:var(--afr-navy-60)}
.afr-road__i h3{font-size:17px}
.afr-road__i p{font-size:14px;margin-top:7px;line-height:1.6}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · FEATURE CARD
   ══════════════════════════════════════════════════════════════ */
.afr-card{
  position:relative;overflow:hidden;background:var(--afr-surface);
  border:1px solid var(--afr-border);border-radius:var(--afr-r-xl);
  padding:clamp(28px,3vw,44px);box-shadow:var(--afr-sh1);
  transition:box-shadow var(--afr-d2) var(--afr-ease),transform var(--afr-d2) var(--afr-ease);
}
.afr-card:hover{box-shadow:var(--afr-sh2);transform:translateY(-3px)}
.afr-card__glow{position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,137,26,.11),transparent 68%)}
.afr-card h3{margin-top:var(--afr-s5)}
.afr-card p{margin-top:var(--afr-s4);font-size:15.5px}
.afr-card__foot{margin-top:var(--afr-s6)}
.afr-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--afr-s5);margin-top:var(--afr-s8)}

/* trust trio — appears exactly once on the page */
.afr-trio{display:flex;flex-wrap:wrap;gap:var(--afr-s5);margin-top:var(--afr-s6)}
.afr-trio li{display:flex;align-items:center;gap:11px;font-size:13.5px;line-height:1.35;color:var(--afr-navy)}
.afr-trio svg{width:19px;height:19px;fill:none;stroke:var(--afr-orange);stroke-width:1.5;flex:none}
.afr-trio span{max-width:15ch}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · PROGRAM CARD
   ══════════════════════════════════════════════════════════════ */
.afr-grid-a{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--afr-s5);margin-top:var(--afr-s8)}
.afr-prog{
  position:relative;display:block;border-radius:var(--afr-r-l);overflow:hidden;aspect-ratio:16/10;
  box-shadow:var(--afr-sh1);transition:box-shadow var(--afr-d2) var(--afr-ease),transform var(--afr-d2) var(--afr-ease);
}
.afr-prog:hover{box-shadow:var(--afr-sh3);transform:translateY(-4px)}
.afr-prog__img{position:absolute;inset:0;transition:transform var(--afr-d4) var(--afr-ease)}
.afr-prog:hover .afr-prog__img{transform:scale(1.06)}
.afr-prog::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,14,28,.90),rgba(6,14,28,.46) 44%,rgba(6,14,28,.12))}
.afr-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transform:translateX(-100%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transition:opacity var(--afr-d1)}
:is(.afr-prog,.afr-media):hover .afr-sweep{opacity:1;animation:sweep 900ms var(--afr-ease)}
@keyframes sweep{to{transform:translateX(100%)}}
.afr-prog__body{position:absolute;inset:auto 0 0 0;z-index:3;padding:var(--afr-s5);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--afr-s4)}
.afr-prog__body h3{color:#fff;font-size:19px;line-height:1.28}
.afr-level{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--afr-gold);margin-top:9px}
.afr-prog__tile{position:absolute;left:var(--afr-s5);top:var(--afr-s5);z-index:3;width:42px;height:42px;border-radius:var(--afr-r-s);
  background:rgba(255,255,255,.95);display:grid;place-items:center}
.afr-prog__tile svg{width:20px;height:20px;fill:none;stroke:var(--afr-orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.afr-circ-arrow{width:38px;height:38px;flex:none;border-radius:50%;background:#fff;display:grid;place-items:center;
  transition:transform var(--afr-d1) var(--afr-ease-s)}
.afr-circ-arrow svg{width:15px;height:15px;stroke:var(--afr-orange);fill:none;stroke-width:2}
.afr-prog:hover .afr-circ-arrow{transform:translateX(4px)}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · MEDIA / VIDEO CARD
   ══════════════════════════════════════════════════════════════ */
.afr-media{
  position:relative;display:block;border-radius:var(--afr-r-l);overflow:hidden;background:var(--afr-soft);
  box-shadow:var(--afr-sh1);transition:box-shadow var(--afr-d2) var(--afr-ease),transform var(--afr-d2) var(--afr-ease);
}
.afr-media:hover{box-shadow:var(--afr-sh3);transform:translateY(-4px)}
.afr-media__img{position:absolute;inset:0;transition:transform var(--afr-d4) var(--afr-ease)}
.afr-media:hover .afr-media__img{transform:scale(1.05)}
.afr-media__prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;
  transition:opacity var(--afr-d2) var(--afr-ease-s)}
.afr-media.afr-previewing .afr-media__prev{opacity:1}
.afr-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(6,14,28,.88),rgba(6,14,28,.24) 54%,rgba(6,14,28,.10))}
.afr-media__in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--afr-s5)}
.afr-media--lg{aspect-ratio:16/9}
.afr-media--sm{aspect-ratio:16/10}
.afr-media h3{color:#fff;font-size:19px;line-height:1.28}
.afr-media--lg h3{font-size:clamp(20px,2.1vw,27px)}
.afr-tag{
  position:absolute;left:var(--afr-s5);top:var(--afr-s5);z-index:4;
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--afr-r-f);
  background:rgba(10,26,51,.60);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.afr-tag svg{width:12px;height:12px;fill:none;stroke:var(--afr-gold);stroke-width:1.8}
.afr-meta{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--afr-gold);margin-top:9px}
.afr-watch{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--afr-gold)}
.afr-watch svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform var(--afr-d2) var(--afr-ease)}
.afr-media:hover .afr-watch svg{transform:translateX(4px)}
.afr-play{
  position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1.5px solid var(--afr-gold);
  transition:transform var(--afr-d2) var(--afr-ease),background var(--afr-d2),opacity var(--afr-d2);
}
.afr-play::after{content:"";width:0;height:0;margin-left:4px;
  border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.afr-media:hover .afr-play{transform:translate(-50%,-50%) scale(1.09);background:rgba(232,137,26,.85)}
.afr-media.afr-previewing .afr-play{opacity:0}
.afr-play--s{width:54px;height:54px}
.afr-play--s::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}

/* ══════════════════════════════════════════════════════════════
   SPLIT LAYOUT
   ══════════════════════════════════════════════════════════════ */
.afr-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,80px);align-items:center}
.afr-stack{display:grid;gap:var(--afr-s5)}
.afr-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--afr-s5)}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · GAIN STRIP + METRIC ITEM
   ══════════════════════════════════════════════════════════════ */
.afr-gain{
  background:var(--afr-surface);border:1px solid var(--afr-border);border-radius:var(--afr-r-xl);
  box-shadow:var(--afr-sh2);overflow:hidden;margin-top:var(--afr-s8);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.afr-gain__i{display:flex;gap:var(--afr-s4);padding:clamp(26px,3vw,38px);border-right:1px solid var(--afr-border)}
.afr-gain__i:last-child{border-right:0}
.afr-gain__i b{display:block;color:var(--afr-navy);font-size:15.5px;font-weight:600;line-height:1.35;margin-bottom:7px}
.afr-gain__i p{font-size:14px;line-height:1.6}

/* Metric item — component is defined and ready. Intentionally unused:
   the reference screens carried contradictory figures (220+ vs 120+ projects,
   35+ vs 15+ published), so no statistics are shown until real numbers exist.
   To enable: <div class="metrics"><div class="metric"><b>500</b><span>Students</span></div></div> */
.afr-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--afr-s5);margin-top:var(--afr-s7)}
.afr-metric{background:var(--afr-surface);border:1px solid var(--afr-border);border-radius:var(--afr-r-l);
  padding:var(--afr-s5) var(--afr-s6);box-shadow:var(--afr-sh1)}
.afr-metric b{display:block;font-size:34px;font-weight:600;color:var(--afr-navy);letter-spacing:-.03em;line-height:1}
.afr-metric span{display:block;font-size:13px;margin-top:6px}

/* ══════════════════════════════════════════════════════════════
   STUDENT WORK — filter + gallery
   ══════════════════════════════════════════════════════════════ */
.afr-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--afr-s7)}
.afr-filter{
  min-height:44px;padding:0 22px;border-radius:var(--afr-r-f);
  border:1px solid var(--afr-border);background:var(--afr-surface);color:var(--afr-navy);
  font-size:13px;font-weight:500;letter-spacing:.05em;
  display:inline-flex;align-items:center;gap:9px;
  transition:background var(--afr-d1),color var(--afr-d1),border-color var(--afr-d1);
}
.afr-filter:hover{border-color:var(--afr-navy)}
.afr-filter[aria-pressed="true"]{background:var(--afr-navy);border-color:var(--afr-navy);color:#fff}
.afr-filter i{width:6px;height:6px;border-radius:50%;background:var(--afr-orange);opacity:0;transition:opacity var(--afr-d1)}
.afr-filter[aria-pressed="true"] i{opacity:1}
/* grid-auto-flow:dense — geniş (span 2) kart satırın kalan tek sütununa
   sığmayınca grid'de delik bırakıyordu; dense sonraki dar kartı o boşluğa
   çekiyor, son satırda tek başına kalan kart da kalmıyor.
   .afr-work__i flex + kartın %100 genişliği — geniş kartın yanındaki dar kart
   satır yüksekliğine (431px) uzasın: hücre 431px, kart 232px kaldığı için
   altında ~200px ölü boşluk oluşup kartlar havada duruyordu. */
.afr-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));grid-auto-flow:dense;gap:var(--afr-s5);margin-top:var(--afr-s6)}
.afr-work__i{grid-column:span 1;display:flex}
.afr-work__i>.afr-media{width:100%}
.afr-work__i--w{grid-column:span 2}
.afr-work__i.afr-hide{display:none}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · COMMUNITY CARD
   ══════════════════════════════════════════════════════════════ */
.afr-comm{
  background:var(--afr-surface);border:1px solid var(--afr-border);border-radius:var(--afr-r-l);
  overflow:hidden;box-shadow:var(--afr-sh1);display:flex;flex-direction:column;height:100%;
  transition:box-shadow var(--afr-d2) var(--afr-ease),transform var(--afr-d2) var(--afr-ease);
}
.afr-comm:hover{box-shadow:var(--afr-sh2);transform:translateY(-4px)}
.afr-comm__h{display:flex;align-items:center;gap:11px;padding:var(--afr-s4) var(--afr-s5)}
.afr-comm__av{width:32px;height:32px;flex:none;border-radius:50%;background:var(--afr-navy);
  display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;letter-spacing:-.4px}
.afr-comm__u{font-size:13.5px;font-weight:500;color:var(--afr-navy)}
.afr-comm__ig{margin-left:auto;width:19px;height:19px;stroke:var(--afr-navy-60);fill:none;stroke-width:1.5}
.afr-comm__t{position:relative;aspect-ratio:1;overflow:hidden;background:var(--afr-soft)}
.afr-comm__t .afr-media__img{transition:transform var(--afr-d4) var(--afr-ease)}
.afr-comm:hover .afr-comm__t .afr-media__img{transform:scale(1.05)}
.afr-comm__t .afr-play{border-color:var(--afr-orange);background:rgba(255,255,255,.72)}
.afr-comm__t .afr-play::after{border-left-color:var(--afr-orange)}
.afr-comm:hover .afr-comm__t .afr-play{background:var(--afr-orange)}
.afr-comm:hover .afr-comm__t .afr-play::after{border-left-color:#fff}
.afr-comm__b{padding:var(--afr-s5);display:flex;flex-direction:column;gap:var(--afr-s4);flex:1}
.afr-comm__b p{font-size:14.5px;color:var(--afr-navy);line-height:1.55}
.afr-comm__l{margin-top:auto;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--afr-orange);
  display:inline-flex;align-items:center;gap:7px;min-height:44px}
.afr-comm__l svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ══════════════════════════════════════════════════════════════
   COMPONENT · CIRCULAR SLIDER CONTROLS
   ══════════════════════════════════════════════════════════════ */
.afr-viewport{overflow:hidden;margin-top:var(--afr-s8)}
.afr-track{display:flex;gap:var(--afr-s5);transition:transform var(--afr-d3) var(--afr-ease)}
.afr-track>*{flex:0 0 calc((100% - var(--afr-s5) * 2) / 3);min-width:0}
.afr-rail{display:flex;align-items:center;justify-content:space-between;gap:var(--afr-s5);margin-top:var(--afr-s6)}
.afr-dots-n{display:flex;align-items:center;gap:10px}
.afr-dot{
  width:12px;height:12px;border-radius:50%;padding:0;position:relative;
  border:1px solid var(--afr-border-2);background:transparent;
  transition:background var(--afr-d2) var(--afr-ease),border-color var(--afr-d2),transform var(--afr-d2);
}
.afr-dot::before{content:"";position:absolute;inset:-16px}      /* 44px touch target */
.afr-dot[aria-current="true"]{background:var(--afr-orange);border-color:var(--afr-orange);transform:scale(1.16)}
.afr-ctrls{display:flex;gap:10px}
.afr-ctrl{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--afr-border-2);background:var(--afr-surface);
  display:grid;place-items:center;
  transition:background var(--afr-d1),border-color var(--afr-d1),transform var(--afr-d1) var(--afr-ease-s);
}
.afr-ctrl svg{width:15px;height:15px;stroke:var(--afr-navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.afr-ctrl:hover{background:var(--afr-navy);border-color:var(--afr-navy);transform:translateY(-2px)}
.afr-ctrl:hover svg{stroke:#fff}
.afr-ctrl:disabled{opacity:.32;pointer-events:none}

/* ══════════════════════════════════════════════════════════════
   FINAL CTA — the only deep navy surface on the page
   ══════════════════════════════════════════════════════════════ */
.afr-cta{position:relative;overflow:hidden;background:var(--afr-navy);border-radius:var(--afr-r-xl);
  padding:clamp(44px,6vw,84px) clamp(28px,5vw,80px);text-align:center;box-shadow:var(--afr-sh3)}
.afr-cta h2{color:#fff}
.afr-cta .afr-eyebrow{color:var(--afr-gold);justify-content:center}
.afr-cta .afr-eyebrow::after{content:"";width:30px;height:1px;background:currentColor;flex:none}
.afr-cta p{color:rgba(255,255,255,.74);font-size:17px;max-width:56ch;margin:var(--afr-s5) auto 0}
.afr-cta__row{display:flex;flex-wrap:wrap;gap:var(--afr-s4);justify-content:center;margin-top:var(--afr-s7)}
.afr-cta .afr-btn--ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.afr-cta .afr-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.afr-cta__d{position:absolute;inset:0;opacity:.3;pointer-events:none}
.afr-cta__d path{fill:none;stroke:var(--afr-gold);stroke-width:1;opacity:.55}
.afr-cta__d circle{fill:var(--afr-orange)}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.afr-footer{background:var(--afr-bg-alt);border-top:1px solid var(--afr-border);
  padding-block:clamp(56px,7vw,96px) var(--afr-s6);margin-top:clamp(72px,9vw,124px)}
.afr-footer__g{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(150px,1fr));gap:var(--afr-s7) var(--afr-s6)}
.afr-footer__brand p{font-size:14.5px;max-width:35ch;margin-top:var(--afr-s5);line-height:1.7}
.afr-footer h4{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--afr-navy);margin-bottom:var(--afr-s5)}
.afr-footer li a{font-size:14.5px;display:inline-flex;align-items:center;min-height:38px;transition:color var(--afr-d1)}
.afr-footer li a:hover{color:var(--afr-orange)}
.afr-socials{display:flex;gap:10px;margin-top:var(--afr-s6)}
.afr-social{width:44px;height:44px;border-radius:50%;border:1px solid var(--afr-border);display:grid;place-items:center;
  transition:background var(--afr-d1),border-color var(--afr-d1),transform var(--afr-d1) var(--afr-ease-s)}
.afr-social svg{width:17px;height:17px;stroke:var(--afr-navy);fill:none;stroke-width:1.5}
.afr-social:hover{background:var(--afr-navy);border-color:var(--afr-navy);transform:translateY(-2px)}
.afr-social:hover svg{stroke:#fff}
.afr-legal{display:flex;flex-wrap:wrap;gap:var(--afr-s5);justify-content:space-between;align-items:center;
  margin-top:var(--afr-s8);padding-top:var(--afr-s5);border-top:1px solid var(--afr-border);font-size:13px}
.afr-legal ul{display:flex;flex-wrap:wrap;gap:var(--afr-s5)}

/* ══════════════════════════════════════════════════════════════
   ASSET PLACEHOLDERS — swap for real WebP/AVIF
   ══════════════════════════════════════════════════════════════ */
.afr-ph{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 22% 18%,rgba(232,137,26,.30),transparent 58%),
    radial-gradient(110% 90% at 82% 82%,rgba(217,164,65,.26),transparent 60%),
    linear-gradient(140deg,#16233d,#22344f 48%,#101c33)}
.afr-ph::before{content:"";position:absolute;inset:0;opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.44) 1px,transparent 1px);background-size:19px 19px}
.afr-ph--b{background:
    radial-gradient(120% 90% at 78% 20%,rgba(47,107,79,.34),transparent 58%),
    radial-gradient(110% 90% at 18% 84%,rgba(232,137,26,.24),transparent 60%),
    linear-gradient(140deg,#101f33,#1d3348 50%,#0b1626)}
.afr-ph--c{background:
    radial-gradient(120% 90% at 50% 12%,rgba(217,164,65,.34),transparent 56%),
    linear-gradient(160deg,#1a2035,#2a2f47 46%,#131728)}
.afr-ph--l{background:
    radial-gradient(120% 90% at 25% 20%,rgba(232,137,26,.20),transparent 58%),
    radial-gradient(110% 90% at 80% 80%,rgba(217,164,65,.20),transparent 60%),
    linear-gradient(140deg,#F2EDE5,#FBF8F4 52%,#EDE7DE)}
.afr-ph--l::before{background-image:radial-gradient(rgba(10,26,51,.16) 1px,transparent 1px);opacity:.5}

/* ══════════════════════════════════════════════════════════════
   MOTION SYSTEM
   ══════════════════════════════════════════════════════════════ */
[data-afr-rv]{opacity:0;transition:opacity var(--afr-d3) var(--afr-ease),transform var(--afr-d3) var(--afr-ease),filter var(--afr-d3) var(--afr-ease)}
[data-afr-rv="up"]{transform:translateY(26px)}
[data-afr-rv="fade"]{transform:none}
[data-afr-rv="scale"]{transform:scale(.98);filter:blur(5px);transition-duration:var(--afr-d4)}
[data-afr-rv="mask"]{clip-path:inset(0 0 100% 0);opacity:1;transition:clip-path var(--afr-d4) var(--afr-ease)}
[data-afr-rv].afr-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
[data-afr-px],[data-afr-depth]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important}
  [data-afr-rv]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  [data-afr-px],[data-afr-depth]{transform:none!important}
  .afr-drift,.afr-drift-y,.afr-cue__m::after{animation:none!important}
  .afr-media__prev{display:none}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
  .afr-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--afr-s6)}
  .afr-strip__lead{grid-column:1/-1}
  .afr-strip__i:nth-of-type(odd){padding-left:0;border-left:0}
  .afr-strip__go{grid-column:1/-1;justify-self:start}
  .afr-track>*{flex-basis:calc((100% - var(--afr-s5)) / 2)}
}
@media (max-width:1040px){
  :root{--afr-hh:76px}
  .afr-nav,.afr-header__end .afr-lang,.afr-header__end .afr-btn{display:none}
  .afr-logo{gap:9px}
  .afr-logo__img{width:158px;height:25px}
  .afr-logo__edition{font-size:11px;padding:4px 7px;letter-spacing:.14em}
  .afr-burger{display:flex}
  .afr-hero__grid{grid-template-columns:1fr;gap:var(--afr-s7)}
  .afr-hero__rail{display:none}
  .afr-hero__scrim{background:linear-gradient(to top,rgba(251,248,244,.5),rgba(251,248,244,0) 58%)}
  .afr-split,.afr-head-split{grid-template-columns:1fr;align-items:start}
  .afr-head-split .afr-lede{margin-top:var(--afr-s5)}
  .afr-work__i--w{grid-column:span 1}
  .afr-gain__i{border-right:0;border-bottom:1px solid var(--afr-border)}
  .afr-gain__i:last-child{border-bottom:0}
  .afr-footer__g{grid-template-columns:1fr 1fr}
  .afr-footer__brand{grid-column:1/-1}
}
/* Narrow phones: the lockup, the cart and the burger have to share ~335px of
   usable width, so both parts of the logo step down once more. */
@media (max-width:480px){
  .afr-header__in{gap:var(--afr-s4)}
  .afr-logo{gap:7px}
  .afr-logo__img{width:120px;height:19px}
  .afr-logo__edition{font-size:10px;padding:3px 6px;letter-spacing:.1em}
}
@media (max-width:760px){
  .afr-strip{grid-template-columns:1fr;padding:var(--afr-s5);row-gap:var(--afr-s5)}
  .afr-strip__i{padding-left:0;border-left:0;border-top:1px solid var(--afr-border);padding-top:var(--afr-s5)}
  .afr-hero__media{aspect-ratio:4/3}
  .afr-row2{grid-template-columns:1fr}
  .afr-track>*{flex-basis:100%}
  .afr-road::before{display:none}
  .afr-road{gap:var(--afr-s6)}
  .afr-comm__t{aspect-ratio:4/3}
  .afr-footer__g{grid-template-columns:1fr}
  .afr-legal{flex-direction:column;align-items:flex-start;gap:var(--afr-s4)}
  .afr-play{width:58px;height:58px}
  .afr-play::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}
}

/* ══════════════════════════════════════════════════════════════
   LARAVEL BRIDGE
   Everything below is NOT in the reference design file. It is the
   thin layer that lets the same components carry real CMS data:
   course thumbnails, auth state, cart badge, language menu.
   ══════════════════════════════════════════════════════════════ */

/* Real images inside the placeholder frames. `.afr-ph` stays as the
   fallback gradient when a record has no thumbnail. */
.afr-prog__img>img,.afr-media__img>img,.afr-comm__t>.afr-media__img>img{
  width:100%;height:100%;object-fit:cover;display:block
}

/* ── header extras ──────────────────────────────────────────── */
.afr-iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--afr-r-f);color:var(--afr-navy);
  transition:background var(--afr-d1)
}
.afr-iconbtn:hover{background:rgba(10,26,51,.05)}
.afr-iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
.afr-iconbtn__n{
  position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--afr-r-f);
  background:var(--afr-orange);color:#fff;font-size:11px;font-weight:600;line-height:1
}
.afr-coin{width:auto;padding:0 14px;gap:7px;font-size:13.5px;font-weight:600}

/* language menu (the design's "EN ▾" button, made functional) */
.afr-lang-wrap{position:relative}
.afr-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:150px;z-index:120;
  background:var(--afr-surface);border:1px solid var(--afr-border);
  border-radius:var(--afr-r-m);box-shadow:var(--afr-sh3);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--afr-d1),transform var(--afr-d1),visibility var(--afr-d1)
}
.afr-lang-menu.afr-open{opacity:1;visibility:visible;transform:none}
.afr-lang-menu a{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;
  border-radius:var(--afr-r-s);font-size:14px;color:var(--afr-navy);
  transition:background var(--afr-d1)
}
.afr-lang-menu a:hover{background:var(--afr-soft)}
.afr-lang-menu a[aria-current="true"]{color:var(--afr-orange);font-weight:600}
.afr-lang-menu b{font-size:11px;font-weight:600;letter-spacing:.08em;opacity:.55;width:20px}

/* signed-in user menu */
.afr-user{position:relative;flex:none}
.afr-user__btn{
  display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;
  border:1px solid var(--afr-border);border-radius:var(--afr-r-f);
  transition:border-color var(--afr-d1)
}
.afr-user__btn:hover{border-color:var(--afr-border-2)}
.afr-user__av{width:34px;height:34px;border-radius:50%;object-fit:cover}
.afr-user__btn i{font-style:normal;font-size:10px;color:var(--afr-navy-60)}
.afr-user__menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:230px;z-index:120;
  background:var(--afr-surface);border:1px solid var(--afr-border);
  border-radius:var(--afr-r-m);box-shadow:var(--afr-sh3);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--afr-d1),transform var(--afr-d1),visibility var(--afr-d1)
}
.afr-user__menu.afr-open{opacity:1;visibility:visible;transform:none}
.afr-user__head{padding:10px 12px 12px;border-bottom:1px solid var(--afr-border);margin-bottom:6px}
.afr-user__head b{display:block;color:var(--afr-navy);font-size:14.5px;font-weight:600}
.afr-user__head span{font-size:12.5px;color:var(--afr-text)}
.afr-user__menu a{
  display:flex;align-items:center;gap:11px;min-height:42px;padding:0 12px;
  border-radius:var(--afr-r-s);font-size:14px;color:var(--afr-navy);
  transition:background var(--afr-d1)
}
.afr-user__menu a:hover{background:var(--afr-soft)}
.afr-user__menu a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.afr-user__menu hr{border:0;border-top:1px solid var(--afr-border);margin:6px 0}
.afr-user__menu .afr-danger{color:#B4372A}

/* the drawer needs the auth block too */
.afr-drawer__u{display:flex;align-items:center;gap:12px;padding-bottom:var(--afr-s5);border-bottom:1px solid var(--afr-border)}
.afr-drawer__u img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.afr-drawer__u b{display:block;color:var(--afr-navy);font-size:15px}
.afr-drawer__u span{font-size:12.5px}

body.afr-body .ma-vid-modal{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:var(--afr-gut);
  background:rgba(10,26,51,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity var(--afr-d2) var(--afr-ease)
}
body.afr-body .ma-vid-modal.is-open{display:flex;opacity:1}
body.afr-body .ma-vid-modal__inner{
  position:relative;width:100%;max-width:1000px;aspect-ratio:16/9;
  background:#000;border-radius:var(--afr-r-l);overflow:hidden;
  box-shadow:var(--afr-sh3);transform:scale(.97);
  transition:transform var(--afr-d2) var(--afr-ease)
}
body.afr-body .ma-vid-modal.is-open .ma-vid-modal__inner{transform:scale(1)}
body.afr-body .ma-vid-modal__inner iframe,
body.afr-body .ma-vid-modal__inner video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block
}
body.afr-body .ma-vid-modal__close{
  position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;line-height:1;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background var(--afr-d1),border-color var(--afr-d1)
}
body.afr-body .ma-vid-modal__close:hover{background:var(--afr-orange);border-color:var(--afr-orange)}

/* Below the reference's 900px breakpoint the nav, language button and CTA move
   into the drawer. The wrapper the language menu needs must go with its button,
   and the drawer gets its own language row (the reference had none — its
   switcher was decorative; a real multilingual site cannot lose it on mobile). */
@media (max-width:900px){
  .afr-header__end .afr-lang-wrap{display:none}
}
.afr-drawer__lang{display:flex;gap:10px;margin-top:var(--afr-s5);padding-top:var(--afr-s5);border-top:1px solid var(--afr-border)}
.afr-drawer__lang a{
  flex:1;justify-content:center;min-height:48px;border:1px solid var(--afr-border);
  border-radius:var(--afr-r-f);font-size:14px;font-weight:600;letter-spacing:.06em
}
.afr-drawer__lang a[aria-current="true"]{background:var(--afr-orange);border-color:var(--afr-orange);color:#fff}

/* Accent text on light grounds uses the darker accent ink. The eyebrow inside
   the navy CTA panel keeps the gold — it already has a more specific rule. */
.afr-eyebrow{color:var(--afr-accent-ink)}
.afr-strip__lead .afr-k{color:var(--afr-accent-ink)}
.afr-btn--text{color:var(--afr-accent-ink)}
.afr-btn--text:hover{color:#7E4806}
/* The active nav item was orange-on-cream (~2.5:1). The underline and dot
   already carry the state, so the label takes the readable ink and the
   indicator keeps the orange. The logo wordmark stays orange: it is a brand
   mark, not running text. */
.afr-nav a[aria-current="page"]{color:var(--afr-accent-ink)}

/* ══════════════════════════════════════════════════════════════
   AI PROGRAMMES — #afrAiProgrammes  (Phase 1)
   ══════════════════════════════════════════════════════════════ */
.afr-ai-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--afr-s5);
  margin-top:var(--afr-s8);
  align-items:stretch;
}

/* Base card — plain border fallback for older Safari */
.afr-ai-card{
  position:relative;overflow:hidden;
  border-radius:var(--afr-r-xl);
  border:1.5px solid var(--afr-border);
  background:var(--afr-surface);
  box-shadow:var(--afr-sh2);
  transition:box-shadow var(--afr-d2) var(--afr-ease),transform var(--afr-d2) var(--afr-ease);
}
/* Gradient border upgrade for modern browsers */
@supports ((background-clip:border-box) or (-webkit-background-clip:border-box)){
  .afr-ai-card{
    border-color:transparent;
    background:
      linear-gradient(var(--afr-surface),var(--afr-surface)) padding-box,
      linear-gradient(135deg,rgba(217,164,65,.40) 0%,rgba(47,107,79,.28) 60%,rgba(10,26,51,.14) 100%) border-box;
  }
}
.afr-ai-card:hover{box-shadow:var(--afr-sh3);transform:translateY(-3px)}

.afr-ai-card__inner{
  padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:var(--afr-s5);height:100%;
}
.afr-ai-card__badges{display:flex;flex-wrap:wrap;gap:8px}
.afr-ai-card .afr-tile{align-self:flex-start}
.afr-ai-card h3{font-size:var(--afr-t-h3);margin:0}
.afr-ai-card p{font-size:15.5px;line-height:1.65;flex:1;margin:0}
.afr-ai-card .afr-btn{align-self:flex-start;margin-top:auto}

/* Flagship card — stronger gradient border + ambient glow */
.afr-ai-card--flagship{
  border:1.5px solid var(--afr-orange); /* plain-border fallback for Safari */
}
@supports ((background-clip:border-box) or (-webkit-background-clip:border-box)){
  .afr-ai-card--flagship{
    border-color:transparent;
    background:
      linear-gradient(var(--afr-surface),var(--afr-surface)) padding-box,
      linear-gradient(135deg,var(--afr-orange) 0%,var(--afr-gold) 50%,var(--afr-green) 100%) border-box;
  }
}
.afr-ai-card--flagship h3{font-size:clamp(21px,2vw,27px)}
.afr-ai-card__glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:var(--afr-r-xl);
  box-shadow:0 0 44px rgba(232,137,26,.13),0 0 88px rgba(217,164,65,.07);
}
.afr-ai-card--flagship .afr-ai-card__inner{position:relative;z-index:1}

/* Flagship badge */
.afr-ai-badge{
  display:inline-block;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--afr-r-f);
}
.afr-ai-badge--flagship{
  background:linear-gradient(90deg,var(--afr-orange),var(--afr-gold));
  color:#fff;
}

/* ── Roadmap: active step emphasis ──────────────────────────── */
.afr-road__i--now .afr-road__d{
  animation:afrNowPulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes afrNowPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(232,137,26,.20),0 0 0 7px rgba(232,137,26,.08),var(--afr-sh2)}
  50%  {box-shadow:0 0 0 6px rgba(232,137,26,.24),0 0 0 13px rgba(232,137,26,.06),var(--afr-sh3)}
}
/* Explicit rule: animated box-shadow is not reliably caught by the global
   animation-duration override in the prefers-reduced-motion block above. */
@media (prefers-reduced-motion:reduce){
  .afr-road__i--now .afr-road__d{animation:none!important}
}
/* Dim non-active steps so the AI step reads as "current" */
.afr-road__i:not(.afr-road__i--now){opacity:.55;transition:opacity var(--afr-d2) var(--afr-ease)}
.afr-road__i:not(.afr-road__i--now):hover,.afr-road__i:not(.afr-road__i--now):focus-within{opacity:1}

/* ── AI grid responsive ─────────────────────────────────────── */
@media (max-width:1040px){
  .afr-ai-grid{grid-template-columns:1fr 1fr}
  .afr-ai-card--flagship{grid-column:1/-1}
}
@media (max-width:760px){
  .afr-ai-grid{grid-template-columns:1fr}
  .afr-ai-card--flagship{grid-column:auto}
}

/* ══════════════════════════════════════════════════════════════
   FAZ 2 · 3B KART EĞİMİ + BÖLÜM PERDESİ
   ══════════════════════════════════════════════════════════════ */

/* ── 3B kart eğimi ────────────────────────────────────────────
   JS yalnızca iki özel değer yazar (--afr-rx / --afr-ry); dönüşümün
   kendisi burada durur. Böylece inline transform yazılmadığı için
   kartların mevcut :hover kaldırma efektiyle çakışma olmuyor. */
[data-afr-tilt]{--afr-rx:0deg;--afr-ry:0deg}

/* Öznitelik seçicisi eklendiği için bu kurallar mevcut .afr-prog:hover /
   .afr-ai-card:hover kurallarından daha özgül (0,3,0 > 0,2,0) — sıraya
   bağlı değiller. Kaldırma değerleri oradakiyle birebir aynı tutuldu ki
   tilt'siz kartlarla aynı hissi versinler. */
.afr-prog[data-afr-tilt]:hover{
  transform:perspective(900px) rotateX(var(--afr-rx)) rotateY(var(--afr-ry)) translateY(-4px);
}
.afr-ai-card[data-afr-tilt]:hover{
  transform:perspective(900px) rotateX(var(--afr-rx)) rotateY(var(--afr-ry)) translateY(-3px);
}

/* İşaretçi hareket ederken transform geçişi kapalı — açık kalırsa eğim
   imleci gecikmeli takip edip lastik gibi hissettiriyor. Ayrılışta sınıf
   kalkar, kartın kendi geçişi açıyı yumuşakça sıfıra döndürür. */
[data-afr-tilt].afr-tilting{transition:box-shadow var(--afr-d2) var(--afr-ease)}

/* ── Bölüm perdesi ────────────────────────────────────────────
   Güvenli varsayılan: perde katmanı YALNIZCA JS armed sınıfını
   eklediğinde var olur. Script çalışmazsa hiçbir örtü oluşmaz ve
   içerik her koşulda görünür kalır. */
.afr-wipe-armed::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--afr-bg);
  transform:translateY(0);
}
.afr-section--alt.afr-wipe-armed::before{background:var(--afr-bg-alt)}
.afr-wipe-go::before{
  transform:translateY(-101%);
  transition:transform var(--afr-d4) var(--afr-ease);
}

@media (prefers-reduced-motion:reduce){
  .afr-prog[data-afr-tilt]:hover,
  .afr-ai-card[data-afr-tilt]:hover{transform:none}
  .afr-wipe-armed::before{display:none}
}

/* ══════════════════════════════════════════════════════════════
   FAZ 3 · DEVRE NABIZLARI
   afr-circuit dekoratif bir SVG (canvas değil). İzler üzerinde akan
   nabız noktalarını JS ekler; script çalışmazsa SVG statik kalır.
   ══════════════════════════════════════════════════════════════ */
.afr-circuit__p circle{
  fill:var(--afr-orange);
  filter:drop-shadow(0 0 3px rgba(232,137,26,.55));
}
/* İzler biraz daha okunur olsun — nabızlar üzerinde yürüyor. */
[data-afr-pulse] path{opacity:.42}

@media (prefers-reduced-motion:reduce){
  .afr-circuit__p{display:none}
}

/* ══════════════════════════════════════════════════════════════
   BÖLÜM SAHNE DEKORU
   Aynı sahne görseli her bölümde çok düşük opaklıkta, büyük ölçekli
   bir imza olarak yineleniyor — fotoğrafı tekrar tekrar basmak yerine
   tek bir hafif varyant (61 KB WebP) tarayıcı önbelleğinden geliyor.
   ::before perdeye ait olduğu için burada ::after kullanılıyor.
   ══════════════════════════════════════════════════════════════ */
.afr-section[data-afr-art]::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(52vw,660px);aspect-ratio:3/2;
  background:url("img/afr-africa-decor-1100.webp") center/contain no-repeat;
  opacity:.13;
}
/* Bölüm bölüm farklı köşe: aynı görselin tekrarı gibi okunmasın. */
.afr-section[data-afr-art="tr"]::after{right:-6%;top:-4%}
.afr-section[data-afr-art="bl"]::after{left:-8%;bottom:-6%;transform:scaleX(-1)}
.afr-section[data-afr-art="br"]::after{right:-8%;bottom:-6%}
.afr-section[data-afr-art="tl"]::after{left:-6%;top:-4%;transform:scaleX(-1)}

/* İçerik her zaman dekorun üstünde kalsın. */
.afr-section[data-afr-art]>.afr-wrap{position:relative;z-index:1}

@media (max-width:760px){
  /* Mobilde hem görsel gürültüyü hem boyayı azalt. */
  .afr-section[data-afr-art]::after{width:78vw;opacity:.09}
}