/* templates/index.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. */
.feature-card {
 position: relative;
 display: block;
 width: 100%;
 border: 1px solid rgba(0,0,0,0.107);
 border-radius: 16px;
 overflow: hidden;
 box-sizing: border-box;
}

.feature-card img {
 width: 100%;
 height: auto;
 display: block;
}

.key-features-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 gap: 24px;
}

.key-features-grid .kf-tall {
 grid-column: 1;
 grid-row: 1 / span 2;
 border: none;
}

.key-features-grid .kf-top {
 grid-column: 2;
 grid-row: 1;
}

.key-features-grid .kf-bottom {
 grid-column: 2;
 grid-row: 2;
}

.key-features-grid .feature-card img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Tek sutuna gecis 991.98px yerine 768px: uc kart tablette (768-991)
   iki sutunda ~340px'er yer buluyor, bu kart icerigi icin rahat bir
   olcu. Onceki kirilimda tablette yatay alan bos kaliyor ve sayfa
   gereksiz uzuyordu. */
@media (max-width: 768px) {
 .key-features-grid {
   grid-template-columns: 1fr;
   grid-template-rows: auto;
 }

 .key-features-grid .kf-tall,
 .key-features-grid .kf-top,
 .key-features-grid .kf-bottom {
   grid-column: 1;
   grid-row: auto;
   margin-bottom: 20px;
 }

 .key-features-grid .feature-card img {
   height: auto;
 }
}

.feature-card-text,
.feature-card-text-2{
 position: absolute;
 color: black;
 padding: clamp(0.5rem, 2vw, 1rem);
}

.feature-card-text-3 {
 position: absolute;
 color: white;
 padding: clamp(0.5rem, 2vw, 1rem);
}

/* Yüzde bazlı konumlandırma - responsive */
.feature-card-text {
 top: 4%;
 left: 4%;
 transform: translate(0, 0);
}

.feature-card-text-2 {
 top: 20%;
 left: 4%;
 transform: translate(0, -50%);
}

.feature-card-text-3 {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
}

/* Font boyutlarını responsive yapın */
.feature-card-text h3,
.feature-card-text-2 h3,
.feature-card-text-3 h3 {
 font-size: var(--cc-body);
 margin-bottom: 0.5rem;
}

.feature-card-text p,
.feature-card-text-2 p,
.feature-card-text-3 p {
 font-size: var(--cc-body);
 color: #666D7C;
}

/* Dar ekranda sabit 17px/16px font + top:20%+translateY(-50%) kombosu
   metni kartin kendi ust sinirinin disina itip (overflow:hidden'a ragmen
   metnin bir kismini gorunmez/kirpik birakiyordu). Konumu sabit, guvenli
   bir bosluga cekip fontu kucultuyoruz. */
@media (max-width: 991.98px) {
 .feature-card-text-2 {
   top: 14px;
   transform: none;
 }

 .feature-card-text,
 .feature-card-text-2,
 .feature-card-text-3 {
   padding: 12px;
 }

 /* Kart 1 ve 2: metin gorselin UZERINDE duruyordu. Dar ekranda kart
    daralinca metin daha cok satira sarilip gorselin yogun bolgesine
    tasiyor, koyu metin acik gorsel uzerinde okunmuyordu.
    Akisa alindi: sablonda metin div'i gorselden once geldigi icin
    dogal olarak gorselin USTUNE yerlesiyor, binme kalmiyor.
    Kart 3'e dokunulmadi - beyaz metin koyu fotograf uzerinde okunur. */
 .feature-card-text,
 .feature-card-text-2 {
   position: static;
   transform: none;
   padding: 16px 16px 10px;
 }

 /* Metin akisa girdi; gorselin height:100%'i kart yuksekligini asip
    overflow:hidden ile kirpilmaya yol acabilirdi. */
 .key-features-grid .feature-card img {
   height: auto;
 }

 .feature-card-text h3,
 .feature-card-text-2 h3,
 .feature-card-text-3 h3 {
   font-size: var(--cc-body);
   font-weight: 500;
   margin-bottom: 4px;
   line-height: 1.3;
 }

 /* Cevirilerde baslik <b> ile sarilmis, tarayici varsayilan bold (700)
    uyguluyordu; mobilde daha zarif durmasi icin h3 ile ayni agirliga
    dusuruyoruz (masaustunde dokunmuyoruz). */
 .feature-card-text h3 b,
 .feature-card-text-2 h3 b,
 .feature-card-text-3 h3 b {
   font-weight: inherit;
 }

 .feature-card-text p,
 .feature-card-text-2 p,
 .feature-card-text-3 p {
   font-size: var(--cc-body);
   font-weight: 400;
   line-height: 1.4;
 }
}

.blog-carousel-wrapper {
 position: relative;
}

/* Make the homepage product menu stretch to match the preview card's
   natural height instead of leaving empty space below it. */
.home-products-list-col {
 display: flex;
 flex-direction: column;
}

.home-products-list {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 20px;
 margin-bottom: 0;
}

.home-products-list li {
 margin-bottom: 0;
}

/* Responsive improvements */
@media (max-width: 1200px) {
 .container {
   padding: 0 20px;
 }
 
 .all-container {
   padding: 0 15px;
 }
}

/* Hero basligi navbar logosuyla ayni sol cizgide dursun: navbar kenardan 150px,
   Bootstrap .container ise ortali/max-width'li oldugu icin genis ekranda baslik
   logodan ~150px iceride kaliyordu. Butonlar ve video ortali kompozisyonda kaldi. */
#home-main {
  /* Eskiden markup'ta <br> ile veriliyordu */
  padding-top: 80px;
}

/* Hero videosu monitor mockup'inin ekranina gomuluyor: mockup gorseli cerceve
   olarak kaliyor (bezel + stand + sol ustteki logo), video da ekranin logo
   altinda kalan 16:9 alanini bastan sona dolduruyor. */
.hero-screen {
  position: relative;
  width: 100%;
  /* Sabit 880px, genis ekranlarda monitoru ortada kucuk bir ada birakiyordu:
     2560px'lik bir ekranda saginda ve solunda ~840px'er bos alan kaliyordu.
     Artik viewport ile buyuyor. Alt sinir eski deger oldugu icin ~1467px'in
     altinda HICBIR SEY degismiyor; ust sinir 1500px, cunku mockup 16:9 ve
     daha genisi dikeyde ekrani asmaya basliyor. */
  max-width: clamp(880px, 60vw, 1500px);
  margin: 0 auto;
  /* Oynatici cubugunun tum olculeri kapsayicinin genisligine gore olceklenir */
  container-type: inline-size;
}

.hero-screen__frame {
  display: block;
  width: 100%;
  height: auto;
}

/* Ekran alani: mockup'in logo altinda kalan 16:9 bolgesi */
.hero-screen__stage {
  position: absolute;
  left: 0.48%;
  top: 5.22%;
  width: 98.96%;
  height: 80.02%;
  overflow: hidden;
  background: #fff;
}

.hero-screen__video {
  /* Genislik/yukseklik acik verilir: <video> replaced element oldugu icin
     left+right + width:auto kombinasyonunda tarayici kendi dogal genisligine
     donup right'i yok sayiyor, bu da sagdan/alttan tasmaya yol aciyordu. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  border: 0;
}

/* JS oynaticisi devredeyken tarayicinin kendi kontrol cubugu gizlenir */
.hero-screen.has-player .hero-screen__video::-webkit-media-controls {
  display: none !important;
}

.hero-screen__play {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 11.4cqw;
  min-width: 48px;
  max-width: 104px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 15, 44, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease, transform .2s ease;
}

.hero-screen__play svg {
  width: 42%;
  height: 42%;
  margin-left: 6%;
}

.hero-screen__play:hover {
  background: rgba(13, 15, 44, .65);
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-screen__play:focus-visible {
  outline: 3px solid #1977FF;
  outline-offset: 3px;
}

/* Oynatirken buton kayboluyor, duraklatinca geri geliyor */
.hero-screen.is-playing .hero-screen__play {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Oynatici cubugu: preview-image.webp'deki tasarimin HTML karsiligi.
   Olculer mockup'taki cubugun (2673x219 px) oranlarindan 880px'lik hero slotuna
   cevrildi: baslik %1.16 -> 11px, sure %0.81 -> 10px, ikon %1.5 -> 15px.
   (Onceki surumde cqw birimleriyle yazilmisti; tarayici bu birimleri font-size
   icinde uygulamayip degerleri dusurunce yazilar 16px'e cikiyordu.) ---------- */
.hero-player {
  --hp-ink: #101114;

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  padding: 13px 20px 10px;
  /* Ust kenarda yumusak gecis, ama baslik satirina gelmeden opaklasiyor:
     koyu bir video karesinin uzerinde baslik/sure okunur kalsin. */
  background: linear-gradient(180deg, rgba(243, 244, 246, 0) 0%, rgba(243, 244, 246, .90) 14%, #F2F3F5 34%, #F0F1F4 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hero-screen.has-player .hero-player {
  display: flex;
}

/* base.html'deki global span kurali (font-size:1.25rem; display:block) bu
   cubuktaki her span'i bloklastirip buyuttugu icin burada sifirlaniyor. */
.hero-player span {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

.hero-player__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* Secici ".hero-player X" olarak yaziliyor: yukaridaki ".hero-player span"
   reset'i (0,1,1) tek sinifli bir kuraldan (0,1,0) daha spesifik oldugu icin
   font-size'i "inherit"e cekip bu iki yaziyi 16px'e kadar buyutuyordu. */
.hero-player .hero-player__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hp-ink);
  letter-spacing: -0.01em;
}

.hero-player .hero-player__time {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: #666D7C;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Progress: gorunen cizgi iki div, uzerinde saydam bir range input.
   Boylece cizgi 3px kalirken tiklama/dokunma alani 14px oluyor ve
   klavye ile ok tuslariyla sarma bedava geliyor. */
.hero-player__bar {
  position: relative;
  height: 14px;
  margin-bottom: 6px;
}

.hero-player__track,
.hero-player__fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
}

.hero-player__track {
  width: 100%;
  background: #E1E4E9;
}

.hero-player__fill {
  /* Gradyan dolu kismin kendi genisligine yayilir: tasarimdaki cizgi de
     doldugu yer boyunca kirmizi -> mor -> mavi geciyor. */
  width: 0;
  background: var(--cc-brand);
}

.hero-player__seek {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  cursor: pointer;
}

/* Dokunma hedefi 118x11px'ti; WCAG 2.5.8 asgari 24x24 istiyor. Input
   gorunmez bir katman oldugu icin ust/alt tarafa 7px tasirmak isabet
   alanini 26px'e cikariyor, gorunur cubuga dokunmadan. */
.hero-player__seek {
  top: -7px;
  bottom: -7px;
  height: auto;
}

.hero-player__seek::-webkit-slider-runnable-track {
  height: 100%;
  background: none;
}

.hero-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: 2px;
  border: 0;
  border-radius: 50%;
  background: #7640E8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .15s ease;
}

.hero-player__seek::-moz-range-track {
  height: 100%;
  background: none;
}

.hero-player__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #7640E8;
  opacity: 0;
  transition: opacity .15s ease;
}

.hero-player__bar:hover .hero-player__seek::-webkit-slider-thumb,
.hero-player__seek:focus-visible::-webkit-slider-thumb {
  opacity: 1;
}

.hero-player__bar:hover .hero-player__seek::-moz-range-thumb,
.hero-player__seek:focus-visible::-moz-range-thumb {
  opacity: 1;
}

.hero-player__seek:focus-visible {
  outline: 2px solid #1977FF;
  outline-offset: 2px;
  border-radius: 4px;
}

.hero-player__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hero-player__group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-player__btn {
  /* Ikonlarin kendi width/height'i var (static/images/video-player setinden
     olceklendi), buton onlari sariyor. Renk tek yerden: currentColor. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-muted, #666D7C);
  cursor: pointer;
  border-radius: 4px;
}

/* Ikon kucuk ama dokunma alani buyuk: gorunumu bozmadan hedefi genisletiyor */
.hero-player__btn::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.hero-player__btn svg {
  display: block;
  overflow: visible;
}

.hero-player__btn:hover {
  color: #7640E8;
}

.hero-player__btn:focus-visible {
  outline: 2px solid #1977FF;
  outline-offset: 3px;
}

/* play/pause ve ses ikonlari duruma gore degisiyor */
.hero-player__btn--sound svg {
  fill: currentColor;
}

.hero-player__btn .i-pause,
.hero-player__btn .i-sound {
  display: none;
}

.hero-screen.is-playing .hero-player__btn .i-pause {
  display: block;
}

.hero-screen.is-playing .hero-player__btn .i-play {
  display: none;
}

.hero-screen.is-unmuted .hero-player__btn .i-sound {
  display: block;
}

.hero-screen.is-unmuted .hero-player__btn .i-muted {
  display: none;
}

/* Oynatma hizi menusu */
.hero-player__menu-wrap {
  position: relative;
  display: inline-flex;
}

.hero-player__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  min-width: 66px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(13, 15, 44, .18);
  z-index: 3;
}

.hero-player__menu[hidden] {
  display: none;
}

.hero-player__menu button {
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--hp-ink);
  font-size: var(--cc-small);
  text-align: left;
  cursor: pointer;
}

.hero-player__menu button:hover {
  background: #F2F3F5;
}

.hero-player__menu button[aria-current="true"] {
  font-weight: 700;
  color: #7640E8;
}

/* Dar ekranda ekran alani kuculdugu icin cubuk videonun yarisini kaplardi:
   baslik/sure satirini gizleyip yalnizca cizgi + kontrolleri birakiyoruz. */
@media (max-width: 600px) {
  .hero-player {
    padding: 8px 10px 7px;
  }

  .hero-player__head {
    display: none;
  }

  .hero-player__bar {
    height: 12px;
    margin-bottom: 4px;
  }

  .hero-player__group {
    gap: 14px;
  }
}

/* Tam ekran: monitor cercevesi degil, ekran alani buyuyor */
.hero-screen__stage:fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  /* Mobilde adres cubugu kayarken 100vh sabit kalir, oge ekrandan
     tasar. dvh dinamik yukseklik verir; desteklemeyen tarayici
     ustteki 100vh satirinda kalir. */
  height: 100vh;
  height: 100dvh;
  background: #000;
  container-type: inline-size;
}

.hero-screen__stage:fullscreen .hero-screen__video {
  object-fit: contain;
}

#home-main > .container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 150px;
  padding-right: 150px;
}

@media (max-width: 1024px) {
  #home-main > .container {
    padding-left: 8%;
    padding-right: 8%;
  }
}

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

@media (max-width: 992px) {
 #home-main .container .titles {
   /* Punto tek kaynaktan: homepage.css icindeki .titles clamp'i (max 34px).
      Buradaki eski clamp 2.5rem'e (40px) kadar cikip onu eziyordu. */
   text-align: center;
 }
 
 #home-main .container ul {
   text-align: center;
   padding: 0 20px;
 }
 
 .home-main-buttons {
   flex-direction: column;
   gap: 15px;
   align-items: center;
 }
 
 .home-btn {
   width: 100%;
   max-width: 300px;
   /* padding tek kaynaktan: homepage.css icindeki .home-btn (6px 9px) */
 }
 
 .section-two .row {
   flex-direction: column;
 }
 
 .section-two h2 {
   text-align: center;
   max-width: 100%;
   margin: 0 auto 20px;
 }
 
 .section-two p {
   text-align: center;
   max-width: 100%;
   margin: 0 auto;
 }
 
 .switch-btn {
   justify-content: center;
   margin-top: 20px !important;
   flex-wrap: wrap;
 }
 
 /* flex:1 iki butonu AYNI genislige zorluyordu; icerikleri esit
    olmadigi icin ("Advanced AI Capabilities" ~226px, "Key Features"
    ~150px) genis olan sikisip .cc-pill-btn'deki white-space:nowrap
    yuzunden kutusundan tasiyor, yandakinin uzerine biniyordu.
    Her buton kendi icerigi kadar olsun; sigmazsa kapsayicidaki
    flex-wrap alt satira indirir. */
 .advanced-btn, .key-features-btn {
   flex: 0 0 auto;
   min-width: 0;
   text-align: center;
   padding: 10px 15px;
   font-size: 14px;
 }
 
 .ai-content, .key-features-content {
   margin-bottom: 30px;
 }
 
 .ai-modal-div, .tooth-div, .analysis-list, .company-list {
   text-align: center;
 }
 
 .products-modal-animation h2 {
   font-size: clamp(1.5rem, 4vw, 2rem);
 }
 
 .product-list {
   margin-left: 0;
   padding: 0 20px;
 }
 
 .card-information {
   margin-top: 30px;
   padding: 20px;
 }
 
 .products-img {
   max-width: 100%;
   height: auto;
 }
}

@media (max-width: 768px) {
 .container {
   padding: 0 15px;
 }
 
 .switch-btn {
   flex-direction: column;
   gap: 10px;
 }
 
 .advanced-btn, .key-features-btn {
   width: 100%;
   min-width: auto;
 }
 
 .analysis-list {
   flex-direction: column !important;
   align-items: center;
 }
 
 .analysis-list .analysis-info {
   text-align: center;
 }

 .analysis-list .analysis-info p {
   width: 100% !important;
   max-width: 100% !important;
 }
 
 .tooth-div {
   flex-direction: column;
   align-items: center;
   text-align: center;
 }
 
 .tooth-div-text {
   margin-top: 15px;
 }
 
 .product-item {
   padding: 15px;
   margin-bottom: 15px;
 }
 
 .product-content h4 {
   font-size: 16px;
 }
 
 .product-content p {
   font-size: 14px;
 }
 
 .card-information-text {
   padding: 15px;
 }
 
 .card-information-text button {
   width: 100%;
   max-width: 200px;
 }
 
 .section-four-modal, .section-four-modal-two {
   padding: 20px;
   text-align: center;
 }
 
 .section-four-modal h2, .section-four-modal-two h2 {
   font-size: clamp(1.2rem, 4vw, 1.5rem);
   margin-bottom: 20px;
 }
 
 .demo-btn {
   width: 100%;
   max-width: 250px;
  font-size: 13px;

 }

}

@media (max-width: 576px) {
  /* Dort sekme ("CranioCatch Clinic/Angle/Edu/AILab") ~527px tutuyor ve
     dar ekranda iki satira dusuyordu. Marka adi dordunde de ayni ve
     bolum basliginda zaten geciyor; mobilde gizlenince ~250px kaliyor,
     tek satira siger.

     display:none DEGIL: ekran okuyucu tam adi okumaya devam etsin diye
     gorsel gizleme. Aksi halde sekmeler baglamsiz "Clinic" olurdu. */
  /* Gorsel gizleme (sr-only kalibi). Ilk denemede left/top verilmemisti;
     absolute oge butonun icinde akistaki yerinde kalip width:1px ile
     metni sikistirdi ve TASTI ("AILab" uzerine "Cranio" bindi).
     .cc-pill-btn position:relative oldugu icin left:-9999px ile ogeyi
     butonun disina cikariyoruz: hic yer kaplamaz, tasma olmaz.
     display:none DEGIL - metin DOM'da kalsin ki ekran okuyucu tam adi
     ("CranioCatch Clinic") okusun, sekme baglamsiz "Clinic" olmasin. */
  .tab-brand {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

 .feature-card-text, .feature-card-text-2 {
   padding: 8px;
 }

 .feature-card-text-3 {
   padding: 8px;
 }

 .all-container .row > div:first-child {
   margin-left: 0 !important;
   padding-left: 15px;
   padding-right: 15px;
 }
 
 video {
   margin-top: 20px;
 }
 
 .home-main-buttons {
   padding: 0 20px;
 }
 
 #blog-cards {
   padding: 0 10px;
 }
 
 .featured-blogs .container p {
   padding: 0 20px;
   line-height: 1.4;
 }
}

@media (max-width: 400px) {
 .switch-btn {
   padding: 10px;
 }
 
 .advanced-btn, .key-features-btn {
   font-size: 13px;
   padding: 8px 12px;
 }
}

/* Flex ve Grid düzenlemeler */
.home-main-buttons {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

.d-flex {
 display: flex;
}

.flex-wrap {
 flex-wrap: wrap;
}

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

.align-items-center {
 align-items: center;
}

.text-center {
 text-align: center;
}

/* Container max-width ayarları */
.container {
 max-width: 1200px;
 margin: 0 auto;
 width: 100%;
}


@media (min-width: 1200px) {
  .d-flex.gap-2.switch-btn {
    float: right;
    justify-content: flex-end;
  }
}

@media (max-width: 1199.98px) {
  .d-flex.gap-2.switch-btn {
    float: none;
    justify-content: center;
  }
}

/* Video responsive */
video {
 max-width: 100%;
 height: auto;
}

/* Görsel responsive */
img {
 max-width: 100%;
 height: auto;
}

/* How It Works section */
.how-it-works-section {
  background: #F5F6F8;
  padding: 30px 0 0;
  margin: 0;
}

/* Beyaz kart: diger bolumlerle ayni olculer */
.how-it-works-section > .container {
  position: relative;
  width: auto;
  max-width: none;
  margin: 0 20px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 10.5vw, 150px);
  border-radius: 40px;
  background: #fff;
  overflow: hidden;
}

/* Sag alt rozet: edu hero ve demo modalindaki animasyonun aynisi */
.hiw-badge {
  position: absolute;
  right: calc(var(--hiw-mark, clamp(120px, 16vw, 200px)) * -0.15);
  bottom: calc(var(--hiw-mark, clamp(120px, 16vw, 200px)) * -0.15);
  width: var(--hiw-mark, clamp(120px, 16vw, 200px));
  height: var(--hiw-mark, clamp(120px, 16vw, 200px));
  display: grid;
  place-items: center;
  z-index: 0;
  pointer-events: none;
}

.hiw-badge__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.02);
  animation: hiw-badge-pulse 6.5s cubic-bezier(.12, .46, .22, 1) infinite;
  animation-delay: var(--pulse-delay);
  pointer-events: none;
}

.hiw-badge__logo {
  position: relative;
  z-index: 1;
  width: 80%;
  height: auto;
  display: block;
}

@keyframes hiw-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) {
  .hiw-badge__pulse { animation: none; opacity: .3; }
}

/* Kartin icerigi rozetin uzerinde kalsin */
.hiw-top,
.hiw-panels {
  position: relative;
  z-index: 1;
}

/* Baslik solda, sekmeler sagda */
.hiw-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.hiw-header {
  margin: 0;
  text-align: left;
}

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

.hiw-header h2 b {
  font-weight: 600;
  background: var(--cc-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hiw-header p {
  font-size: var(--cc-body);
  color: #575C6B;
}

/* Sekme etiketi iki parca: marka + urun adi.
   base.html'de global span{font-size:1.25rem;display:block;font-weight:500}
   var; bu span'ler butonun kendi tipografisini devralmali. */
.tab-brand,
.tab-name {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.tab-brand {
  margin-right: .28em;
}


.hiw-tabs {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 5px;
  border: 1px solid #E9EAEE;
  border-radius: 14px;
  max-width: fit-content;
}

/* Sekme gorunumu artik base.css'teki paylasilan .cc-pill-btn bileseninden
   geliyor (padding/radius/renk/font-size tek yerden). */

.hiw-panel {
  display: none;
}

.hiw-panel.active {
  display: block;
  animation: hiwFadeIn 0.35s ease;
}

@keyframes hiwFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hiw-panel-intro {
  text-align: left;
  max-width: none;
  margin: 0 0 22px;
}

.hiw-panel-intro p {
  font-size: 14px;
  color: #666D7C;
}

.hiw-num {
  flex-shrink: 0;
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

/* Grid layout: used for single-flow modules (Orthodontics, AILab) */
.hiw-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.hiw-steps-grid .hiw-step-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.hiw-step-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #E9EAEE;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: none;
}

.hiw-step-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.hiw-step-card p {
  font-size: 14px;
  color: #666D7C;
  margin-bottom: 0;
}

/* Dual column layout: used for modules with a clinical + management flow (Clinic) */
.hiw-dual-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.hiw-column-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2d23b2;
  background: #f7f5ff;
  border: 1px solid #2d23b26d;
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

.hiw-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hiw-steps-list .hiw-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 26px;
  position: relative;
}

.hiw-steps-list .hiw-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  width: 2px;
  height: calc(100% - 30px);
  background: #e5e2f8;
}

.hiw-steps-list .hiw-step h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.hiw-steps-list .hiw-step p {
  font-size: 13.5px;
  color: #575C6B;
  margin-bottom: 0;
}

.hiw-closing-note {
  text-align: center;
  font-size: 13.5px;
  color: #575C6B;
  font-style: italic;
  margin: 28px auto 0;
  max-width: 620px;
}

.hiw-closing-note b {
  color: #2d23b2;
  font-style: normal;
}

.hiw-panel-cta {
  text-align: center;
  margin-top: 36px;
}

.hiw-panel-cta a {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hiw-panel-cta a:hover {
  opacity: 0.85;
  color: #ffffff;
}

@media (max-width: 768px) {
  .hiw-dual-columns {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hiw-steps-grid {
    grid-template-columns: 1fr;
  }

  .hiw-steps-grid .hiw-step-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .hiw-tabs {
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }
}

/* Why Us section: diger bolumlerle ayni gri sahne + beyaz 40px kart duzeni */
.why-us-section {
  background: #F5F6F8;
  padding: 30px 0;
  margin: 0;
}

.why-us-section .container {
  position: relative;
  width: auto;
  max-width: none;
  margin: 0 20px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 10.5vw, 150px);
  border-radius: 40px;
  background: #fff;
  overflow: hidden;
  z-index: 1;
}

.wu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.wu-header {
  text-align: left;
  max-width: 52ch;
}

.wu-header h2 {
  display: inline-block;
  margin: 0 0 6px;
  font-size: var(--cc-h2);
  font-weight: 600;
  line-height: 1.3;
  background: var(--cc-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wu-header h2 b {
  font-weight: 600;
}

.wu-header p {
  margin: 0;
  font-size: var(--cc-body);
  color: #666D7C;
}

.wu-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.071);
  border-radius: 24px;
  padding: 9px 7px;
  max-width: fit-content;
  flex: 0 0 auto;
  margin: 0;
}

/* Sekme gorunumu artik base.css'teki paylasilan .cc-pill-btn bileseninden
   geliyor (padding/radius/renk/font-size tek yerden). */

.wu-panel {
  display: none;
}

.wu-panel.active {
  display: block;
  animation: hiwFadeIn 0.35s ease;
}

.wu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.wu-card {
  background: #fff;
  border: 1px solid rgba(179, 185, 194, 0.4);
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.wu-icon-badge {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 98, 98, 0.05) 0%, rgba(118, 64, 232, 0.05) 55%, rgba(50, 145, 255, 0.05) 100%);
  border: 1px solid #7640E8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .wu-icon-badge {
    border-color: transparent;
  }

  .wu-icon-badge::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;
  }
}

.wu-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #7A6C9D;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wu-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.wu-card p {
  font-size: 14px;
  color: #575C6B;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wu-card {
    transition: none;
  }
}

@media (max-width: 1199.98px) {
  .wu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .wu-tabs {
    max-width: 100%;
  }

  .wu-grid {
    grid-template-columns: 1fr;
  }

  .why-us-section {
    padding: 50px 0;
  }
}

/* Gradient CTA seridi: edu sayfasindaki .edu-cta ile bire bir ayni tasarim */
.home-cta-stage {
  background: #F5F6F8;
  margin: 0;
  padding: 0 0 30px;
}

/* Bir onceki blok (doctor-cards / .doctor-experiences-stage) da gri sahne
   sistemine dahil ve bu ikisi kesintisiz bitisiyor; bu yuzden bu ikinci
   kullanim kendi ust gri payini kendisi olusturuyor, oncekinden pay almiyor. */
.home-cta-stage--top-frame {
  padding: 30px 0 0;
}

.edu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  width: 83%;
  margin: 0 auto;
  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;
  font-weight: 300;
}

.edu-cta__text b {
  font-weight: 600;
}

.edu-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 9px;
  background: transparent;
  color: #fff;
  font-size: var(--cc-small);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease;
}

.edu-cta__btn:hover {
  background: rgba(255, 255, 255, .16);
}

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

/* In the Press section: diger bolumlerle ayni gri sahne + beyaz 40px kart duzeni */
.press-section {
  background: #F5F6F8;
  padding: 0 0 30px;
  margin: 0;
}

.press-section .container {
  width: auto;
  max-width: none;
  margin: 0 20px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 10.5vw, 150px);
  border-radius: 40px;
  background: #fff;
}

.press-header {
  text-align: left;
  margin-bottom: 30px;
}

.press-header h2 {
  margin: 0 0 6px;
  font-size: var(--cc-h2);
  font-weight: 300;
  line-height: 1.3;
}

.press-header h2 b {
  font-weight: 600;
  background: var(--cc-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.press-header p {
  margin: 0;
  font-size: var(--cc-body);
  color: #666D7C;
}

.press-grid-wrapper {
  position: relative;
}

.press-grid-viewport {
  overflow: hidden;
}

.press-grid {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
  will-change: transform;
}

.press-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 3 * 24px) / 4);
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(179, 185, 194, 0.4);
  border-radius: 16px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 1100px) {
  .press-card {
    flex-basis: calc((100% - 2 * 24px) / 3);
  }
}

@media (max-width: 768px) {
  .press-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 560px) {
  .press-card {
    flex-basis: 85%;
  }

  /* Mobilde kart elle kaydiriliyor, ok butonlarina gerek yok. */
  .press-nav {
    display: none;
  }
}

.press-grid-viewport {
  cursor: grab;
  touch-action: pan-y;
}

.press-grid-viewport.dragging {
  cursor: grabbing;
}

.press-grid.dragging {
  transition: none;
}

.press-nav {
  pointer-events: none;
}

.press-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.press-nav-btn img {
  width: 40px;
  height: 40px;
}

.press-nav-btn-prev {
  left: -50px;
}

.press-nav-btn-next {
  right: -50px;
}

@media (max-width: 900px) {
  .press-nav-btn-prev {
    left: 4px;
  }

  .press-nav-btn-next {
    right: 4px;
  }

  .press-nav-btn {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
  }

  .press-nav-btn img {
    width: 32px;
    height: 32px;
    padding: 4px;
  }
}

.press-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  color: inherit;
}

.press-card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  background-color: #eef0f7;
}

.press-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 6px 6px;
  flex: 1;
}

.press-outlet {
  font-size: var(--cc-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666D7C;
}

.press-headline {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

.press-date {
  font-size: var(--cc-small);
  color: #666D7C;
}

.press-link {
  margin-top: 6px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  font-size: var(--cc-small);
  font-weight: 600;
  background: var(--cc-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.press-card:hover .press-link {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .press-section {
    padding: 50px 0;
  }
}

/* Featured Blogs: diger bolumlerle ayni gri sahne + beyaz 40px kart duzeni.
   .featured-blogs/.card/.blog-img/.blog-detail-btn homepage.css'te global
   (haber-blog.html vb. sayfalarda da kullaniliyor), bu yuzden tum ozel gorunum
   .home-featured-blogs / .home-blogs-card altina alindi, diger sayfalara dokunmuyor. */
.home-featured-blogs {
  background: #F5F6F8;
  padding: 30px 0 0;
  margin: 0;
}

/* questions.html paylasilan partial'inin kendi .faq-stage gri saritindaki
   ust bosluk, Featured Blogs'un kendi alt bosluguyla ust uste binip beyaz
   bir seride donusuyordu; sadece anasayfadaki bu zincirde sifirliyoruz. */
.cta-section .faq-stage {
  margin-top: 0;
}

/* .edu-faq (beyaz kart) kendi ust marginini --edu-block-gap degiskeninden
   aliyor (varsayilan 30px); bu da sahnenin ust padding'ine eklenip toplam
   ust bosluğu alttakinden fazla gosteriyordu. Bu scope'ta sifirliyoruz. */
.cta-section {
  --edu-block-gap: 0px;
}

.home-blogs-card {
  width: auto;
  margin: 0 20px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 10.5vw, 150px);
  border-radius: 40px;
  background: #fff;
}

.home-blogs-header {
  text-align: left;
}

.home-blogs-header h2 {
  display: inline-block;
  margin: 0 0 6px;
  font-size: var(--cc-h2);
  font-weight: 600;
  line-height: 1.3;
}

.home-blogs-header h2 b {
  font-weight: 600;
  background: var(--cc-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.home-blogs-header p {
  margin: 0;
  font-size: var(--cc-body);
  color: #666D7C;
}

#blog-cards {
  gap: 20px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.home-blogs-card .blog-card {
  display: flex;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 992px) {
  .home-blogs-card .blog-card {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
  }
}

/* Ana sayfada tam 4 kart var (news_blogs|slice:":4"). Uc kolon yapinca
   dorduncusu tek basina alt satira dusuyordu ([3, 1] olculdu), o yuzden ara
   basamak iki kolon: 2x2. Dort kolon >=1400px'te basliyor - orada kart 240px
   oluyor, eski davranistaki 1024px/177px'e gore belirgin sekilde genis. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .home-blogs-card .blog-card {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}


.home-blogs-card .card {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: auto;
  border: 1px solid rgba(179, 185, 194, 0.4);
  border-radius: 16px;
  box-shadow: none;
  padding: 12px;
}

.home-blogs-card .blog-img {
  border-radius: 16px;
  object-fit: cover;
}

.home-blogs-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-blogs-card .card-title {
  font-size: 15px;
  font-weight: 700;
  color: #0B0B0F;
}

.home-blogs-card .card-title b {
  font-weight: 500;
}

/* Gorunum artik base.css'teki paylasilan .cc-pill-btn/.cc-pill-btn--filled
   bileseninden geliyor; burada sadece bu karta ozel dizilim ve radius/bosluk
   kaliyor (pill bilesenin varsayilan 14px radius'u bu CTA icin fazla yuvarlak
   duruyordu, baslikla arasi da auto margin yuzunden kart boyuna gore degisiyordu). */
.home-blogs-card .card-title {
  /* Butonla arasindaki asgari pay basliktan veriliyor; boylece buton
     "margin-top: auto" ile alta yapissa bile kisa baslikli kartlarda
     yazi ile buton birbirine girmiyor. */
  margin-bottom: 24px;
}

.home-blogs-card .blog-detail-btn {
  align-self: flex-start;
  /* Sabit "margin-top: 24px" idi: basliklar 1-4 satir arasinda degistigi
     icin butonlar her kartta farkli yukseklikte kaliyor, kart dizisi
     dagink gorunuyordu. "auto" ile hepsi kartin altina hizalaniyor. */
  margin-top: auto;
  border-radius: 12px;
}

  /* ==========================================================================
     "Our Products" bolumu - edu sayfasindaki .edu-scope blogunun aynisi
     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.
     ========================================================================== */
  .home-stage .edu-scope {
    background: #fff;
    border-radius: 40px;
    margin: var(--sec-gap, 30px) var(--sec-side, 20px) 0;
    padding: clamp(28px, 4vw, 48px) var(--sec-pad, clamp(20px, 10.5vw, 150px));
  }

  .edu-scope .edu-scope__title {
    margin: 0 0 6px;
    font-size: clamp(20px, 3.2vw, 28px);
    line-height: 1.3;
    /* diger sayfalardaki (2d-radyografik/edu/annotation) ayni baslikla ayni
       agirlik - 400 oradan farkli duruyordu. */
    font-weight: 300;
    color: #0d0f2c;
  }

  .edu-scope .edu-scope__title b {
    /* diger sayfalardaki ayni baslikla ayni agirlik. */
    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 .edu-scope__card {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: clamp(16px, 2vw, 26px);
    margin-top: clamp(20px, 3vw, 34px);
    padding: clamp(18px, 2.2vw, 28px);
    border: 1px solid #ECEDF1;
    border-radius: 16px;
    background: #fff;
  }

  .edu-scope .product-list {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .edu-scope .product-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid #E9EAEE;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .25s ease;
  }

  .edu-scope .product-item:hover {
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  }

  /* Aktif ogenin gradient kenarligi: border-image kose yuvarlakligini yok
     saydigi icin iki katmanli background. background-color son katmanin
     clip'ine gore boyandigindan seffaf birakiliyor. */
  .edu-scope .product-item.active {
    border-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(#fff, #fff), var(--cc-brand);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: inherit;
    font-weight: inherit;
  }

  .edu-scope .product-item .icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
  }

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

  .edu-scope .product-content h3 {
    margin: 0 0 3px;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.35;
    /* ortodontik-analiz.html'deki ile ayni agirlik - 700 <b> ile ciftlenince
       (bkz. markup) asiri 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;
  }

  .edu-scope .products-img-wrap {
    display: block;
    flex: none;
    aspect-ratio: 2 / 1;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #EDEFF3;
  }

  .edu-scope .products-img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    transition: opacity .3s ease;
  }

  .edu-scope .card-information-text {
    flex: none;
    width: 100%;
    margin: clamp(14px, 1.8vw, 20px) 0 0;
    padding: 0;
    background: transparent;
    transition: opacity .3s ease;
  }

  /* base.css'te ID'li secici var (.card-information-text #productTitle);
     base.css'in .products-section h3{padding-left:78px} kurali da bu h3'u
     yakalayip saga kaydiriyor, o yuzden burada da sifirlaniyor. */
  .edu-scope .card-information-text #productTitle {
    margin: 0 0 6px;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #0B0B0F;
  }

  .edu-scope .card-information-text p {
    margin: 0;
    font-size: var(--cc-body);
    line-height: 1.6;
    text-align: left;
    color: #666D7C;
  }

  /* base.js gecis sirasinda bu sinifi ekliyor */
  .edu-scope .products-img.fade-out,
  .edu-scope .card-information-text.fade-out {
    opacity: 0;
  }

  @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: 700;
    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%;
    max-width: 650px;
    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: 400;
    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: 700;
    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;
    max-width: 980px;
    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);
  }

  .edu-scope__lead--strong {
    margin-top: 4px;
    color: #0B0B0F;
    font-weight: 600;
  }

  .edu-scope__lead--strong b {
    font-weight: 600;
  }

  /* Gri sahne: kart olculeri edu sayfasindaki duzenle ayni */
  .home-stage {
    --sec-side: 20px;
    --sec-gap: 30px;
    --sec-pad: clamp(20px, 10.5vw, 150px);
    background: #F5F6F8;
    padding: var(--sec-gap) 0 0;
    margin: 0;
  }

  .home-stage .edu-scope {
    margin-top: 0;
  }

  /* --- Anasayfa "Our Products" ince ayarlari (edu'dan farklilasan yerler) --- */

  /* "The Era of Artificial Intelligence in Dental Diagnosis Begins" basligi.
     Gradyan artik h2'ye degil vurgulu span'e veriliyor (bkz. homepage.css
     .section-two-title__accent); bu yuzden agirliklar takas edildi: baslik
     govdesi light (300), vurgulu kelime semibold (600). */
  .section-two-title {
    font-weight: 300;
  }

  /* Sekme basliklari. base.html'deki global span{font-size:1.25rem;
     display:block;font-weight:500} bu span'leri 20px/blok yapardi;
     basligin kendi boyutunu ve satir akisini devralmalari gerekiyor. */
  .section-two-title__tab {
      display: inline;
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      margin: 0;
  }

  .section-two-title__tab[hidden],
  .section-two-description__tab[hidden] {
      display: none;
  }

  .section-two-title__accent {
    font-weight: 600;
  }

  /* Aciklamalar edu'da tek satira kirpiliyordu; burada tam metin akiyor */
  .home-stage .edu-scope .product-item .product-content p,
  .home-stage .edu-scope .product-item.active .product-content p {
    font-size: 14px !important;
    line-height: 1.55;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* base.css .products-section h3'e padding-left:78px, font-size:18px ve
     margin-bottom:20px veriyor; basliklar bu yuzden saga kayik ve buyuk geliyordu. */
  .home-stage .edu-scope .product-content h3 {
    margin: 0 0 3px;
    padding-left: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: #0B0B0F;
  }

  /* Tarayicinin <b> icin varsayilan font-weight:bolder kurali, h3'e verilen
     600'u eziyordu (600 ve uzeri agirliklarda bolder dogrudan 900'e atlar).
     <b>'e sayisal deger vererek bunu kesiyoruz. */
  .home-stage .edu-scope .product-content h3 b {
    font-weight: 600;
  }

  .home-stage .edu-scope .product-item {
    padding: 22px 15px;
    min-height: 112px;
  }

  /* Ayni dosya bolume gri zemin ve dis padding de veriyor.
     DIKKAT: ".products-section" adi base.css'teki mega-dropdown nav menusuyle
     CAKISIYOR - o menunun @media(max-width:992px) kurali width:100% veriyor
     ve bu tamamen ilgisiz bolumdeki 20px yan margin'i yutup karti sagdan
     tasiriyordu (mobilde sayfa yatay kayabiliyordu). width:auto ile geri aliyoruz. */
  .home-stage .edu-scope.products-section {
    display: block;
    width: auto;
    padding: clamp(28px, 4vw, 48px) var(--sec-pad, clamp(20px, 10.5vw, 150px));
    background-color: #fff;
  }

  .home-stage .edu-scope .card-information-text #productTitle {
    font-size: 15px;
  }

  .home-stage .edu-scope .card-information-text p {
    font-size: 14px;
    text-align: left;
  }

  /* Detaylar butonunun gorunumu artik base.css'teki paylasilan .cc-pill-btn
     bileseninden geliyor; burada sadece bu sayfaya ozel dizilim kaliyor. */
  .edu-scope .details-btn {
    margin-top: 14px;
  }


/* AI Capabilities grid (section-two, "Advanced AI Capabilities" tab) */
.ai-content-grid-wrap {
  width: 100%;
  margin-bottom: 40px;
}

.ai-content-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
}

.ai-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Kartlarin ikisi de ayni satirin yuksekligine esit uzasin diye buyuyen
   panelleri flex:1 yapiyoruz; grid zaten .ai-content'i satir yuksekligine
   geriyor (align-items:stretch), biz de icini dolduruyoruz. */
.ai-modal-div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.tooth-div {
  flex: 1;
}

.company-list {
  flex: 1;
  justify-content: space-between;
  box-sizing: border-box;
}

.ai-dual-card {
  flex: 1;
  gap: 24px;
}

.cloud-card {
  position: relative;
  flex: 0 0 38%;
  border-radius: 16px;
  overflow: hidden;
}

.cloud-card .cloud {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cloud-card__text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.analysis-list {
  flex: 1;
  justify-content: space-between;
  box-sizing: border-box;
}

@media (max-width: 991.98px) {
  .ai-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .cloud-card {
    flex: 0 0 auto;
    height: 220px;
  }
}

.section-four-two {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-four-two .section-four-modal-two {
  width: 100%;
}

/* Partner seridi: edu sayfasindaki edu-trust kutusuyla ayni tasarim ve animasyon */
/* Serit artik footer'in hemen ustunde, yani sayfanin son bolumu.
   Eski degerler ("padding: 30px 0 0" + "margin: 40px 0 0") serit hero'nun
   hemen altindayken dogruydu: ust bosluk hero'dan ayirmak icin, alt bosluk
   ise sonraki bolum verdigi icin gereksizdi. Yeni konumda bu ikisi soruna
   donusuyordu - ustte 40px'lik beyaz bir serit (onceki gri sahne ile arada
   kopukluk), altta ise hicbir sey olmadigi icin beyaz kart footer'a
   yapisiyordu.
   Diger dort sayfanin (annotation, hakkimizda, 2d, ortodontik) kullandigi
   sahne kalibiyla ayni: margin yok, ust ve alt 30px. */
.home-trust-stage {
  background: #F5F6F8;
  padding: 30px 0;
}

.edu-trust {
  background: #fff;
  border-radius: 40px;
  margin: 0 20px;
  padding: clamp(24px, 3.5vw, 40px) 0;
}

.edu-trust .container {
  max-width: none;
  padding-left: clamp(20px, 10.5vw, 150px);
  padding-right: clamp(20px, 10.5vw, 150px);
}

.edu-trust__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}

.edu-trust__text {
  flex: 0 0 auto;
  max-width: 210px;
  margin: 0;
  color: #666D7C;
  font-size: clamp(13px, 1.4vw, 14px);
  line-height: 1.6;
}

.edu-trust__marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.edu-trust__marquee.is-dragging {
  cursor: grabbing;
}

.edu-trust__logos {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  will-change: transform;
}

.edu-trust__logos li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.edu-trust__logos img {
  display: block;
  height: clamp(28px, 3.4vw, 46px);
  width: auto;
  pointer-events: none;
}

@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);
  }
}