/* templates/edu.html icindeki <style> blogundan cikarildi.
   Inline CSS her sayfa yuklenisinde yeniden iniyordu; ayri dosya
   tarayicida onbellege alinabiliyor. Konum birebir korundu, yani
   kurallarin siralamasi (cascade) degismedi. */
/* Dorduncu beyaz kutu: "Transforming Dental Education" bolumu.
     Olculer diger kutularla ayni (radius 40px, ayni yan pay, ayni ust bosluk). */
  .edu-panel {
    background: #fff;
    border-radius: 40px;
    margin: var(--edu-block-gap) var(--edu-side) 0;
  }

  /* Ucuncu beyaz kutu; .edu-stage icinde, universite seridiyle ayni olculer */
  .middle-banner {
    background: #fff;
    border-radius: 40px;
    margin: var(--edu-block-gap) var(--edu-side) 0;
    padding: clamp(32px, 5vw, 56px) var(--edu-pad);
  }

  .middle-banner h2, .middle-banner .banner-title, .middle-banner h1 {
    margin: 0;
    font-size: clamp(20px, 3.2vw, 28px);
    line-height: 1.35;
    font-weight: 300;
    color: #0d0f2c;
  }

  /* base.html'deki global "b" agirligi degil, hero basligiyla ayni kontrast */
  .middle-banner h2 b, .middle-banner .banner-title b, .middle-banner h1 b {
    font-weight: 600;
  }

  .middle-banner li {
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 1.7;
    color: #666D7C;
  }

  /* ==========================================================================
     "Transforming Dental Education" paneli - bastan yazildi.
     Kart yukseklikleri en-boy oranindan geliyor; mutlak konumlandirma,
     yuzde yukseklik veya breakpoint'e ozel !important yok.
     ========================================================================== */
  .edu-showcase {
    --edu-gap: clamp(12px, 1.4vw, 18px);
    padding: clamp(28px, 4vw, 48px) var(--edu-pad);
  }

  .edu-showcase__title {
    display: inline-block;
    margin: 0 0 6px;
    font-size: clamp(20px, 3.2vw, 28px);
    line-height: 1.3;
    font-weight: 600;
    background: var(--cc-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Ceviri metnindeki <label style="font-weight:400"> inline stili yalnizca
     !important ile ezilebiliyor; msgid'e dokunmuyoruz. */
  .edu-showcase__title b,
  .edu-showcase__title label {
    font-weight: 600 !important;
  }

  .edu-showcase__lead {
    margin: 0 0 clamp(14px, 1.8vw, 20px);
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 1.6;
    font-weight: 400;
    color: #666D7C;
  }

  .edu-showcase__lead--spaced {
    margin-top: clamp(20px, 3vw, 32px);
  }

  .edu-grid {
    display: grid;
    gap: var(--edu-gap);
  }

  .edu-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 44/56: sag kolondaki iki gorselin toplam yuksekligi soldaki uzun gorselin
     yuksekligine denk gelsin diye. Oranlar gorsellerin kendi olculerinden. */
  .edu-grid--split {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  }

  /* Gorsel kartin kendisi: kutu + arka plan + kose yuvarlakligi zaten gorselin
     icinde. Kart yalnizca gorselin en-boy oranini tasiyor, yazi uzerine biniyor. */
  .edu-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #F4F5F7;
  }

  .edu-card > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .edu-card--practice   { aspect-ratio: 2146 / 1440; }
  .edu-card--diagnostic { aspect-ratio: 2142 / 1440; }
  .edu-card--workload   { aspect-ratio: 1912 / 1864; grid-row: 1 / span 2; }
  .edu-card--personal   { aspect-ratio: 2396 / 916; }
  .edu-card--fair       { aspect-ratio: 2398 / 864; }

  .edu-card__text {
    position: absolute;
    z-index: 2;
    margin: 0;
    padding: clamp(16px, 2.2vw, 28px);
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 1.45;
    font-weight: 600;
    color: #0B0B0F;
  }

  /* Ceviri metinlerinin icinde <b> var; tarayici varsayilani 700 yapmasin */
  .edu-card__text b {
    font-weight: 600;
  }

  .edu-card__text--top {
    top: 0;
    left: 0;
    max-width: min(100%, 36ch);
  }

  .edu-card__text--bottom {
    left: 0;
    bottom: 0;
    max-width: min(100%, 48ch);
    color: #fff;
  }

  .edu-card__text--center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 44ch);
    text-align: center;
    color: #fff;
  }

  .edu-card__text--left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: min(50%, 28ch);
  }

  /* Beyaz yazilar icin okunurluk perdesi */
  .edu-card--diagnostic::after,
  .edu-card--personal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .edu-card--diagnostic::after {
    background: linear-gradient(to top, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .14) 42%, rgba(0, 0, 0, 0) 72%);
  }

  .edu-card--personal::after {
    background: rgba(0, 0, 0, .34);
  }

  /* Tablet ve mobil: gorseller kendi oranlarini korur, izgara tek kolona iner */
  @media (max-width: 991px) {
    .edu-grid--split {
      grid-template-columns: minmax(0, 1fr);
    }

    .edu-card--workload {
      grid-row: auto;
    }
  }

  @media (max-width: 767px) {
    .edu-grid--pair {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Diger 4 bolumdeki (index.html, clinic sayfasi) gorsel-ustu baslik
       standardiyla ayni olcuye (13px/500) cekiyoruz; masaustunde 600
       agirlik/kismen daha buyuk clamp() degeri korunuyor. */
    .edu-card__text {
      font-size: var(--cc-body);
      font-weight: 500;
    }

    .edu-card__text b {
      font-weight: 500;
    }

    .edu-card__text--left {
      max-width: min(58%, 24ch);
      padding-left: 0;
    }

    /* Bu kartin masaustu en-boy orani (2398/864) dar ekranda karti o kadar
       kisaltiyordu ki 3 satirlik metin (Fully fair.../measurement.../powered...)
       kartin overflow:hidden'iyla kirpiliyordu. 16/9 denendi ama metin en-genis
       (EN) halinde hala ~174px tutuyor, kart ise 144px kaliyordu (ust+alttan
       tasma). 4/3 ile kart 192px oluyor ve metne yeterli pay birakiyor. */
    .edu-card--fair {
      aspect-ratio: 4 / 3;
    }
  }

  /* ==========================================================================
     "Expanding Beyond" bolumu
     DIKKAT: base.css bu sayfada iki kez yukleniyor (ikincisi demoRequest.html
     uzerinden, bu <style> blogundan SONRA) ve .product-list li, .product-item,
     .card-information, .products-img*, .products-modal-animation kurallarini
     kendi tasarimiyla eziyor. Bu yuzden tum kurallar .edu-scope altina alindi
     (ozgulluk 0,2,0 > 0,1,0); base.css'in !important kullandigi yerlerde de
     !important ile karsilik veriliyor.
     ========================================================================== */
  .edu-stage .edu-scope {
    background: #fff;
    border-radius: 40px;
    margin: var(--edu-block-gap) var(--edu-side) 0;
    padding: clamp(28px, 4vw, 48px) var(--edu-pad);
  }

  .edu-scope .edu-scope__title {
    margin: 0 0 6px;
    font-size: clamp(20px, 3.2vw, 28px);
    line-height: 1.3;
    font-weight: 300;
    color: #0d0f2c;
  }

  .edu-scope .edu-scope__title b {
    font-weight: 600;
    background: var(--cc-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .edu-scope .edu-scope__lead {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 1.6;
    font-weight: 400;
    color: #666D7C;
  }

  .edu-scope .product-content {
    min-width: 0;
    flex: 1;
  }

  .edu-scope .product-content h3 {
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 1.35;
    /* ortodontik-analiz.html'deki ile ayni agirlik - 700 diger sayfalardan
       daha kalin duruyordu. */
    font-weight: 600;
    color: #0B0B0F;
  }

  /* base.css bu secicide !important kullaniyor; ayni silahla karsilik */
  .edu-scope .product-item .product-content p,
  .edu-scope .product-item.active .product-content p {
    margin: 0;
    font-size: var(--cc-body) !important;
    line-height: 1.4;
    font-weight: 400 !important;
    color: #666D7C !important;
    /* Tek satira kirpiliyordu: metnin buyuk kismi (edu'da %89'u)
       gorunmuyordu ve acacak bir kontrol yoktu. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .edu-scope .card-information {
    display: block;
    min-width: 0;
    height: auto !important;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  /* base.css'te ID'li secici var (.card-information-text #productTitle) */
  .edu-scope .card-information-text #productTitle {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #0B0B0F;
  }

  @media (max-width: 991px) {
    .edu-scope .edu-scope__card {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ==========================================================================
     "How It Works" adim listesi
     Landing Page projesindeki uni-getstarted bileseninden birebir tasindi
     (app/components/UniversityDetail.vue + assets/scss/pages/_university-detail.scss).
     ========================================================================== */
  .edu-steps {
    background: #fff;
    border-radius: 40px;
    margin: var(--edu-block-gap, 30px) var(--edu-side, 20px) 0;
    padding: clamp(28px, 4vw, 58px) clamp(16px, 4vw, 60px) clamp(35px, 4vw, 64px);
  }

  .edu-steps__intro {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }

  .edu-steps__title {
    /* background-clip:text gradienti elemanin KUTUSUNA yayar. Blok h2'de kutu
       640px oldugu icin ortadaki yazi gradientin sadece orta bandini (mor)
       gosteriyordu; inline-block ile kutu yaziya oturuyor. */
    display: inline-block;
    margin: 0;
    font-size: var(--cc-h2);
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 600;
    background: var(--cc-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .edu-steps__subtitle {
    margin: .95rem 0 0;
    color: var(--cc-muted, #666D7C);
    font-size: 15px;
    line-height: 1.45;
  }

  .edu-steps__panel {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2.5rem;
    margin-top: 2.5rem;
  }

  .edu-steps__list {
    display: flex;
    flex-direction: column;
  }

  .edu-steps-step {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .edu-steps-step__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }

  .edu-steps-step__icon {
    width: 32px;
    height: 32px;
    display: block;
    transition: transform .25s ease;
  }

  .edu-steps-step.is-next .edu-steps-step__icon {
    transform: scale(1.05);
  }

  .edu-steps-step__connector {
    width: 2px;
    flex: 1;
    min-height: 70px;
    margin: 4px 0;
    background: rgba(179, 185, 194, .4);
    border-radius: 999px;
    transition: background .25s ease;
  }

  .edu-steps-step.is-done .edu-steps-step__connector {
    background: linear-gradient(180deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  }

  .edu-steps-step__body {
    min-width: 0;
  }

  .edu-steps-step__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #666D7C;
    transition: color .25s ease;
  }

  .edu-steps-step.is-done .edu-steps-step__title {
    color: var(--cc-ink, #0B0B0F);
  }

  .edu-steps-step.is-next .edu-steps-step__title {
    background: linear-gradient(135deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .edu-steps-step__description {
    display: block;
    margin-top: .35rem;
    max-width: 36ch;
    color: #666D7C;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .edu-steps-step.is-pending .edu-steps-step__description {
    color: #666D7C;
  }

  .edu-steps__visual {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .edu-steps__image {
    width: 100%;
    /* Izgara kolonu icinde; sabit 650px genis ekranda kolonu bos birakiyordu. */
    max-width: clamp(650px, 34vw, 900px);
    height: auto;
    display: block;
    transition: opacity .3s ease, transform .3s ease;
  }

  .edu-steps__image.is-swapping {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }

  @media (min-width: 992px) {
    .edu-steps {
      padding-left: clamp(40px, 8vw, 150px);
      padding-right: clamp(40px, 8vw, 150px);
    }

    .edu-steps__panel {
      grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    }
  }

  /* ---------- Webinar bolumu ---------- */
  .edu-webinar {
    background: #fff;
    border-radius: 40px;
    margin: var(--edu-block-gap, 30px) var(--edu-side, 20px) 0;
    padding: clamp(28px, 4vw, 58px) clamp(20px, 3vw, 44px) clamp(30px, 4vw, 56px);
  }

  .edu-webinar__intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  .edu-webinar__title {
    display: inline-block;
    margin: 0;
    font-size: clamp(20px, 3.2vw, 28px);
    line-height: 1.3;
    font-weight: 300;
    color: #0d0f2c;
  }

  /* base.html'de global bir "span" kurali var (display:block, font-size:1.25rem,
     margin-bottom:.5rem). Bildirilmis deger kalitimi ezdigi icin bu parca alt
     satira dusuyor ve 20px kaliyordu. */
  .edu-webinar__title span {
    display: inline-block;
    vertical-align: baseline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    background: var(--cc-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .edu-webinar__lead {
    margin: .9rem 0 0;
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 1.6;
    font-weight: 400;
    color: #666D7C;
  }

  .edu-webinar__lead b {
    color: #0B0B0F;
    font-weight: 500;
  }

  .edu-webinar__player {
    position: relative;
    /* Sabit 980px genis ekranda ortada dar bir ada birakiyordu; viewport ile
       buyuyor. Alt sinir eski deger: ~1400px altinda hicbir sey degismez. */
    max-width: clamp(980px, 70vw, 1500px);
    margin: clamp(20px, 3vw, 36px) auto 0;
  }

  .edu-webinar__player .edu-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
  }

  .btn-position {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .edu-video-btn {
    background-color: #fff;
    color: #0B0B0F;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  }

  /* ---------- Gradient CTA seridi ---------- */
  .edu-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 24px);
    /* Sayfa genisliginin %95'i, ortali */
    width: 83%;
    margin: var(--edu-block-gap, 30px) auto 0;
    padding: clamp(12px, 1.4vw, 16px) clamp(18px, 2.4vw, 30px);
    border-radius: 25px;
    background: var(--cc-brand);
    color: #fff;
  }

  .edu-cta__text {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    /* Kalin kisim (b) 600'de kaliyor, giris cumlesi bir kademe inceltildi */
    font-weight: 300;
  }

  @media (max-width: 767px) {
    .edu-cta {
      flex-direction: column;
      align-items: flex-start;
      padding: 20px;
    }
  }

  .edu-screen-text h3 {
    font-size: clamp(22px, 3.5vw, 28px);
    line-height: 1.3;
  }

  .edu-screen-text p {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.5;
  }

  .edu-screen-btn button {
    font-size: clamp(12px, 1.8vw, 14px);
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 2.5vw, 20px);
  }

  .edu-video-btn {
    font-size: clamp(12px, 1.8vw, 14px);
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 2.5vw, 20px);
  }

  /* ---------- Hero ve partner seridi: gri zemin uzerinde iki ayri beyaz kutu ---------- */
  /* Sayfa duzeni: kutular kenardan 20px, kutular arasi 30px */
  .edu-stage {
    --edu-side: 20px;
    --edu-block-gap: 30px;
    /* Kart ici yan bosluk: genis ekranda 150px, dar ekranda orantili kuculur */
    --edu-pad: clamp(20px, 10.5vw, 150px);
    background: #F5F6F8;
    padding-bottom: var(--edu-block-gap);
    margin-bottom: clamp(48px, 7vw, 90px);
  }

  /* Ustteki kutu tam genislikte, sadece alt koseleri yuvarlak */
  .edu-top {
    background: #fff;
    border-radius: 0 0 40px 40px;
    margin-bottom: 0;
  }

  #edu-hero {
    position: relative;
    /* Halkalar hero kutusunun kenarinda kirpilsin */
    overflow: hidden;
    /* Bosluk 0: 62px/85px olculeri dogrudan beyaz kutunun kenarlarindan
       sayilsin - Clinic/AILab/Angle hero'lariyla ayni referans. */
    padding: 0;
    --edu-mark: clamp(120px, 17vw, 205px);
  }

  /* Hero metni Clinic/AILab/Angle hero'lariyla ayni hizada: soldan tam 150px */
  #edu-hero .container {
    max-width: none;
    padding-left: 150px;
    padding-right: 150px;
  }

  /* Gorsel kolonu genisligini gorselden aliyor: onceki 7fr kolonda gorsel %78'de
     kalinca sagda olu bosluk olusuyordu. */
  .edu-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
  }

  /* Baslik ustte, paragraf altta: Clinic/AILab/Angle ile ayni standart —
     baslik ile aciklama arasi tam 300px. */
  .edu-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 300px;
    /* Baslik hero kutusunun ustunden 62px asagida */
    padding: 62px 0 clamp(8px, 2vw, 28px);
  }

  .edu-hero__title {
    margin: 0;
    color: var(--cc-ink, #0B0B0F);
    font-size: clamp(24px, 4.5vw, 34px);
    font-weight: 300;
    line-height: 1.3;
  }

  /* base.html'de global bir "span" kurali var (font-size:1.25rem, font-weight:500,
     margin-bottom:.5rem). Bildirilmis deger kalitimi ezdigi icin ikinci satir 20px'e
     dusuyordu; burada acikca basliktan devralmasini sagliyoruz. */
  .edu-hero__title .title-gradient {
    /* Sitedeki diger tum .title-gradient/gradyan-kalin kullanimlariyla
       ayni agirlik (600) - 700 diger 4 sayfadaki karsilik gelen basliklardan
       (Clinic/AILab/Angle hero'su, Education'in kendi edu-scope basligi)
       daha kalin duruyordu. */
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
  }

  .edu-hero__desc {
    margin: 0;
    color: #666D7C;
    font-size: 15px;
    line-height: 1.7;
    max-width: 52ch;
  }

  /* ---------- Hero slider ----------
     Slide'lar ayni grid hucresinde ust uste duruyor: yukseklik en uzun slide'a
     gore olusuyor, gecerken sayfa zipla-miyor. Pasif slide visibility:hidden
     oldugu icin sekme sirasindan ve erisilebilirlik agacindan da cikiyor. */
  .edu-slider {
    position: relative;
  }

  /* Slide'lar yan yana bir rayda duruyor; gecis ray'in kaydirilmasiyla
     oluyor, yani surukleme ile animasyon ayni hareketi paylasiyor.
     Ray'in yuksekligi en uzun slide'a gore olusur (align-items: stretch),
     bu yuzden slide degisirken sayfa zipla-maz. */
  .edu-slider__viewport {
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
  }

  .edu-slider__track {
    display: flex;
    align-items: stretch;
    transform: translate3d(0, 0, 0);
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }

  .edu-slide {
    /* position: relative sart: slide 2'nin rozeti (.edu-hero__mark) absolute
       ve negatif offsetli; konumlanmis ata olmadan #edu-hero'ya gore yerlesip
       hangi slide gorunurse gorunsun sag altta kaliyordu. */
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
  }

  .edu-slider.is-dragging .edu-slider__viewport {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Surukleme sirasinda gecis kapali: hareketi birebir izlesin */
  .edu-slider.is-dragging .edu-slider__track {
    transition: none;
  }

  /* Gorseller suruklenmeye calisilinca tarayicinin kendi "resmi tasi"
     davranisi devreye giriyordu */
  .edu-slide img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .edu-slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  /* --- 1. slide: tam genislikte gorsel, metin solda gorselin uzerinde --- */
  .edu-slide__media {
    position: relative;
  }

  .edu-slide__bg {
    display: block;
    width: 100%;
    height: auto;
  }

  .edu-slide__inner {
    position: absolute;
    left: 150px;
    top: 62px;
    bottom: 85px;
    z-index: 1;
    width: min(46%, 560px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }

  .edu-slide__title {
    margin: 0;
    color: #0d0f2c;
    font-size: clamp(24px, 4.5vw, 34px);
    font-weight: 300;
    line-height: 1.3;
  }

  /* Global "span" kurali (font-size:1.25rem; display:block) bu satiri
     bloklastirip buyutuyordu; baslikla ayni olcuye sabitliyoruz. */
  .edu-slide__title .title-gradient {
    display: inline;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    margin: 0;
  }

  .edu-slide__desc {
    margin: 0 0 22px;
    color: #666D7C;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 52ch;
  }

  .edu-slide__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .edu-login-or {
    display: inline;
    font-size: var(--cc-small);
    font-weight: 400;
    line-height: 1;
    margin: 0;
    color: #666D7C;
  }

  /* Gradyan yazi + gradyan cerceve: anasayfadaki .home-btn-two ile ayni yontem */
  .edu-login-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 1px solid #7640E8;
    border-radius: 10px;
    font-size: var(--cc-small);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    background: var(--cc-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: box-shadow .25s ease;
  }

  .edu-login-btn:hover {
    box-shadow: 0 6px 18px rgba(118, 64, 232, .18);
  }

  .edu-login-btn:focus-visible {
    outline: 2px solid #096DFF;
    outline-offset: 3px;
  }

  @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .edu-login-btn {
      border-color: transparent;
    }

    .edu-login-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: var(--cc-brand);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  /* --- Noktalar: gorseldeki gibi sol altta, icerikle ayni hizada --- */
  .edu-slider__dots {
    position: absolute;
    left: 150px;
    bottom: clamp(10px, 1.6vw, 22px);
    z-index: 2;
    display: flex;
    align-items: center;
    /* 18px: nokta 7px + gap 18px = merkezler arasi 25px. Dokunma
       hedefi 24px oldugu icin komsu hedefler cakismaz (bkz.
       .edu-slider__dot::before). 7px iken 10px cakisma vardi ve
       ortada yanlis nokta tetiklenebiliyordu. */
    gap: 18px;
  }

  .edu-slider__dot {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D7DAE1;
    cursor: pointer;
    transition: background .25s ease;
  }

  /* Dokunma hedefi: gorunen nokta 7px kaliyor, tiklanabilir alan
     24x24'e cikiyor (WCAG 2.5.8 AA tabani). 7px'lik bir hedefe
     parmakla isabet ettirmek pratikte mumkun degildi. */
  .edu-slider__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
  }

  .edu-slider__dot.is-active {
    background: var(--cc-brand);
  }

  .edu-slider__dot:focus-visible {
    outline: 2px solid #096DFF;
    outline-offset: 3px;
  }

  .edu-hero__visual {
    position: relative;
  }

  /* Gorsel kolonu tamamen dolduruyor; rozet gorselin kendi seffaf sag alt kosesine
     oturuyor. Buyuklugu tek yerden ayarlamak icin --edu-screen-w. */
  .edu-hero__screen {
    display: block;
    width: var(--edu-screen-w, 100%);
    height: auto;
    position: relative;
    z-index: 1;
  }

  /* Halka animasyonu Landing Page projesindeki RoleSection'dan (role__ring-line)
     birebir tasindi; renk color-mix yerine hazir rgba olarak yazildi.
     Kutuya transform vermiyoruz: transform stacking context yaratir ve halkalarin
     gorselin arkasinda kalmasi bozulurdu, bunun yerine negatif offset kullaniliyor. */
  /* Container'a degil hero kutusuna gore konumlaniyor: 150px'lik ic boslugun
     disina cikip sayfanin sag kenarina dayaniyor. */
  .edu-hero__mark {
    position: absolute;
    right: calc(var(--edu-mark) * -0.15);
    bottom: calc(var(--edu-mark) * -0.15);
    width: var(--edu-mark);
    height: var(--edu-mark);
    display: grid;
    place-items: center;
  }

  /* Kaynak projede %65'ti; logo daha belirgin olsun diye buyutuldu. Kutunun kose
     disinda kalan payi da 30%'dan 26%'ya cekildi ki dairenin kenari kirpilmasin. */
  .edu-hero__icon {
    position: relative;
    z-index: 2;
    width: 80%;
    height: auto;
    display: block;
  }

  /* Nabiz halkalari - demo modalindaki rozetin aynisi (Landing Page kaynakli).
     z-index 0: gorselin arkasindan geciyorlar, ikon onde kaliyor. */
  .edu-hero__pulse {
    position: absolute;
    inset: -8%;
    z-index: 0;
    display: block;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 98, 98, .22) 0%, rgba(118, 64, 232, .22) 55%, rgba(50, 145, 255, .22) 100%);
    opacity: 0;
    transform: scale(1.08);
    animation: edu-badge-pulse 6.5s cubic-bezier(.12, .46, .22, 1) infinite;
    animation-delay: var(--pulse-delay);
    pointer-events: none;
  }

  @keyframes edu-badge-pulse {
    0%   { opacity: 0;   transform: scale(1.02); }
    14%  { opacity: .45; }
    48%  { opacity: .18; }
    100% { opacity: 0;   transform: scale(1.5); }
  }

  @media (prefers-reduced-motion: reduce) {
    .edu-hero__pulse {
      animation: none;
      opacity: .3;
    }
  }

  /* Slide 2'nin metni de 1. slide ile ayni cerceveye oturuyor: ustten 62px,
     alttan 85px, soldan 150px. Akistan ciktigi icin gorsel kolonu acikca
     belirtiliyor (yoksa gorsel 1. kolona kayiyor). */
  @media (min-width: 992px) {
    .edu-slide--platform .edu-hero__text {
      position: absolute;
      left: 150px;
      top: 62px;
      bottom: 85px;
      width: min(52%, 560px);
      justify-content: space-between;
      gap: 24px;
      padding: 0;
    }

    .edu-slide--platform .edu-hero__visual {
      grid-column: 2;
    }
  }

  /* Sabit 150px yalnizca genis ekranda anlamli; tablette oransal, mobilde
     kucuk bir paya duser (Clinic/AILab/Angle hero'lariyla ayni kirilimlar). */
  @media (max-width: 1024px) {
    #edu-hero .container {
      padding-left: 8%;
      padding-right: 8%;
    }

    .edu-slide__inner,
    .edu-slider__dots {
      left: 8%;
    }
  }

  @media (max-width: 767px) {
    #edu-hero .container {
      padding-left: 16px;
      padding-right: 16px;
    }

    .edu-slider__dots {
      left: 16px;
    }
  }

  @media (max-width: 991px) {
    /* 1. slide: metin gorselin uzerine sigmiyor, normal akisa donup ustune geciyor */
    .edu-slide__inner {
      position: static;
      width: auto;
      padding: 4px 0 22px;
      gap: 18px;
      text-align: center;
    }

    .edu-slide--academy .edu-slide__media {
      display: flex;
      flex-direction: column;
    }

    .edu-slide__desc {
      margin-left: auto;
      margin-right: auto;
    }

    .edu-slide__actions {
      justify-content: center;
    }

    /* Hero normal akisa dondu ve ortali; CTA da giris butonlariyla ayni
       hizada, ortada dursun.

       Secici IKI sinifla yaziliyor: product-shared.css'teki
       ".home-main-buttons.hero-cta { justify-content: flex-start }"
       (0,2,0) ozgullukte. Tek sinifli ".edu-hero-cta" (0,1,0) onu
       yenemez - media query ozgulluge katki yapmaz. Ayni ozgullukte
       olunca kaynak sirasi belirler ve edu.css sonra yuklenir. */
    .home-main-buttons.edu-hero-cta {
      justify-content: center;
    }

    /* Noktalar akisa donunce viewport'un altina duser. #edu-hero'nun
       padding'i 0 ve .edu-top'un alt koseleri 40px yuvarlak oldugu icin
       noktalar tam kavisin basladigi yere denk gelip karttan tasmis gibi
       gorunuyordu; alt bosluk kavisin icinde kalmalarini sagliyor.
       "left" static konumda zaten yok sayiliyor, acikca sifirlaniyor. */
    .edu-slider__dots {
      position: static;
      left: auto;
      justify-content: center;
      margin-top: 16px;
      padding-bottom: 26px;
    }

    .edu-stage { margin-bottom: 60px; }

    .edu-hero__grid { grid-template-columns: 1fr; }

    .edu-hero__text {
      justify-content: flex-start;
      gap: clamp(24px, 5vw, 64px);
      text-align: center;
      padding-bottom: 0;
    }

    .edu-hero__desc {
      max-width: none;
      margin: 0 auto;
    }

    /* Tek kolona duserken gorsel ortalanip biraz daha genisleyebilir */
    .edu-hero__screen {
      --edu-screen-w: min(100%, 460px);
      margin: 0 auto;
    }
  }

  /* ---------- Partner seridi: kendi beyaz kutusu, kenarlarda gri pay ---------- */
  .edu-trust {
    background: #fff;
    border-radius: 40px;
    margin: var(--edu-block-gap) var(--edu-side) 0;
    padding: clamp(24px, 3.5vw, 40px) 0;
  }

  /* Ic hiza uc kutuda ayni olsun: .container burada 1320px'e sabitlenip
     icerigi digerlerinden ~30px daha iceri aliyordu. */
  .edu-trust .container {
    max-width: none;
    padding-left: var(--edu-pad);
    padding-right: var(--edu-pad);
  }

  @media (max-width: 991px) {
    .edu-trust__inner {
      flex-direction: column;
      text-align: center;
    }

    .edu-trust__text {
      max-width: none;
    }

    .edu-trust__marquee {
      width: 100%;
    }

    .edu-trust__logos {
      gap: clamp(20px, 6vw, 44px);
    }
  }

  .edu-video-btn{
    background-color: #fff;
    color: black;
    border-radius: 30px;
    text-align: center;
    border: none;
    background-color: #fff;
    font-weight: 700;
  }

  .how-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Responsive Media Queries */
  @media screen and (max-width: 768px) {
    .how-div {
      display: block;
    }
  }