/* 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;
}

@media (max-width: 991.98px) {
 .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: 17px;
 margin-bottom: 0.5rem;
}

.feature-card-text p,
.feature-card-text-2 p,
.feature-card-text-3 p {
 font-size: 16px;
 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;
 }

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

 .feature-card-text h3,
 .feature-card-text-2 h3,
 .feature-card-text-3 h3 {
   font-size: 13px;
   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: 11.5px;
   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: -.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: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
}

.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: #6F7688;
  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: 11px;
  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;
  height: 100vh;
  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;
 }
 
 .advanced-btn, .key-features-btn {
   flex: 1;
   min-width: 150px;
   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) {
 .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: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hiw-header p {
  font-size: 14px;
  color: #575C6B;
}

.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: 12px;
  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: 28px;
  font-weight: 600;
  line-height: 1.3;
  background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  -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: 15px;
  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: #ffffff;
  border: 1px solid rgba(179, 185, 194, 0.4);
  border-radius: 18px;
  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: 14px;
  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: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    -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: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  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: 14px;
  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: 28px;
  font-weight: 300;
  line-height: 1.3;
}

.press-header h2 b {
  font-weight: 600;
  background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.press-header p {
  margin: 0;
  font-size: 15px;
  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: #ffffff;
  border: 1px solid rgba(179, 185, 194, 0.4);
  border-radius: 18px;
  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: 12px;
  background-color: #eef0f7;
}

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

.press-outlet {
  font-size: 12px;
  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: 12px;
  color: #666D7C;
}

.press-link {
  margin-top: 6px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  -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: 28px;
  font-weight: 600;
  line-height: 1.3;
}

.home-blogs-header h2 b {
  font-weight: 600;
  background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.home-blogs-header p {
  margin: 0;
  font-size: 15px;
  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: 20px;
  box-shadow: none;
  padding: 12px;
}

.home-blogs-card .blog-img {
  border-radius: 12px;
  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: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    -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: 22px;
    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: 10px;
    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), linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    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: 13px !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: 12px;
    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: 13.5px;
    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: 28px;
    line-height: 1.06;
    letter-spacing: -.04em;
    font-weight: 700;
    background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .edu-steps__subtitle {
    margin: .95rem 0 0;
    color: #76767C;
    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: #101010;
  }

  .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: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    -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:
     homepage.css'teki global .section-two-title 700 (bold) veriyor; vurgulu
     kelimeler semibold, aradaki baglaclar ise light olsun diye eziyoruz. */
  .section-two-title {
    font-weight: 600;
  }

  .section-two-title__plain {
    font-weight: 300;
  }

  /* 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: 12px;
  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);
  }
}