/* templates/ortodontik-analiz.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. */
img {
      max-width: 100%;
      height: auto;
  }

  .product-list {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      margin-bottom: 0;
  }

  .product-list li {
      margin-bottom: 0;
  }

  .ortodonti-div-2 {
      width: 100% !important;
      height: auto;
  }

  /* .angle-utilizes/.ai-driven/.leverages'in position:absolute'u icin hicbir
     ust ogede position:relative yoktu; tarayici en yakin konumlanmis atayi
     (body) baz alip "static position" algoritmasiyla genislik hesapliyordu.
     Masaustunde genis body sayesinde bu tesadufen kolonla ayni hizada
     duruyordu, fakat dar ekranda shrink-to-fit genisligi kolonu asip metnin
     gorselin disina taskmasina yol aciyordu (ozellikle sinifsiz ilk metin).
     Kolonu gercek konumlanma baglami yapip metni acikca sol-usta sabitliyoruz
     - masaustu gorunumu degismiyor (zaten oraya oturuyordu). */
  .section-two .col-lg-5,
  .section-two .col-lg-7 {
    position: relative;
  }

  .angle-utilizes,
  .ai-driven,
  .leverages {
    top: 0;
    /* position:absolute'un konum sifiri kolonun padding-box disina (Bootstrap
       gutter'in disina) denk geliyor; gorselle ayni hizada baslamasi icin
       kolonun 12px'lik varsayilan gutter payini (--bs-gutter-x: 1.5rem/2)
       telafi ediyoruz. */
    left: 12px;
    max-width: calc(100% - 12px);
    box-sizing: border-box;
  }

    @media screen and (max-width: 1400px) {
    .leverages{
       padding-left: 10px !important;
       padding-top: 80px !important;
    }
    p{
      font-size: 15px;
    }
  }

      @media screen and (max-width: 1200px) {
    
    p{
      font-size: 14px;
    }
  }

  @media screen and (max-width: 1000px) {
     .ortodonti-div-2 {
      width: 100% !important;
  }
  }

    @media screen and (max-width: 768px) {
   p {
    font-size: 14px !important;
   }

  }

  @media screen and (max-width: 530px) {
    /* Buradaki "p { font-size: 13px !important }" mobilde SAYFADAKI TUM
       paragraflari kucultuyordu; olcekte Body her kirilimda 16px oldugu icin
       kaldirildi. Tekil bir ogenin kucuk olmasi gerekiyorsa kendi sinifina
       yazilmali, secicisiz "p" ile degil. */

    .leverages{
        max-width: 190px;
        padding-top: 12px !important;
    }

    .ai-driven {
        max-width: 250px;
        padding-top: 12px !important;
    }

    .angle-utilizes {
        max-width: 220px;
        padding: 12px !important;
    }

    /* Diger 4 bolumdeki standarda (13px/500) uyum: <b> mobilde tarayici
       varsayilan 700 uyguluyordu, masaustunde dokunmuyoruz. */
    .angle-utilizes b,
    .ai-driven b,
    .leverages b {
        font-weight: 500;
    }
  }

  /* Asagidaki 4 blok clinic sayfasiyla (2d-radyografik-goruntuleme.html)
     bire bir ayni tasarim: partner seridi, orta banner, "Advanced AI-Powered
     Orthodontic Solution" gri sahne + beyaz kart, ve gradient CTA seridi. */

  /* Partner seridi: AILab/edu/anasayfadaki edu-trust ile bire bir ayni tasarim/animasyon */
  .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);
  }

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

  /* Orta banner: partner seridiyle ayni gri sahne, aralari bitisik */
  .home-mid-stage {
    background: #F5F6F8;
    margin: 0;
    /* Ust bosluk yoktu: banner hero'nun hemen altinda bagimsiz bir
       yuvarlak kart (40px kose, 20px yan bosluk) ama ustunde hic pay
       birakilmiyordu. Diger kart bolumleriyle ayni 30px. */
    padding: 30px 0;
  }

  .home-mid-stage .middle-banner {
    background: #fff;
    border-radius: 40px;
    margin: 0 20px;
    padding: clamp(32px, 5vw, 56px) clamp(20px, 10.5vw, 150px);
  }

  .home-mid-stage .middle-banner h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.28em;
    margin: 0;
    /* diger sayfalardaki (annotation.html vb.) .home-mid-stage h2 ile ayni
       olcek - sabit 28px yerine responsive, mobilde de kucularak sigsin.
       eskiden white-space:nowrap + overflow-x:auto vardi; dar ekranda
       basligi kirpip gizli bir yatay scroll'a mahkum ediyordu - simdi
       normal sekilde sarmalanip taskiyor. */
    font-size: clamp(20px, 3.2vw, 28px);
    line-height: 1.35;
    font-weight: 300;
    color: #0d0f2c;
  }

  .home-mid-stage .middle-banner h2 b.title-gradient {
    font-weight: 600;
  }

  .home-mid-stage .middle-banner h2 .fw-light {
    font-size: inherit;
    font-weight: 300;
  }

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

  .img-titles p {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.4;
  }

  /* "Advanced AI-Powered Orthodontic Solution" bolumu: diger sayfalardaki
     gibi gri sahne + beyaz 40px kart duzeni. */
  .section-two {
    background: #F5F6F8;
    margin: 0;
    padding: 0 0 30px;
  }

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

  .section-two h2 {
    font-size: clamp(22px, 3.5vw, 28px);
    line-height: 1.3;
    /* 2d-radyografik-goruntuleme.html'deki ayni .section-two ile ayni
       agirlik - 400 oradan farkli duruyordu. */
    font-weight: 300;
    color: #0d0f2c;
  }

  .section-two h2 .title-gradient {
    font-weight: 600;
  }

  .section-two p {
    font-size: 15px;
    line-height: 1.6;
    color: #666D7C;
  }

  .section-two .row {
    align-items: stretch;
  }

  .clinic-div-1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Gradient CTA seridi: index/edu/clinic sayfalarindaki .edu-cta ile bire
     bir ayni tasarim. Hemen oncesinde .section-two gri sahnesi kesintisiz
     bitiyor, o yuzden ust payini kendisi almiyor. */
  .home-cta-stage {
    background: #F5F6F8;
    padding: 30px 0;
  }

  .home-cta-stage--chained {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 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;
  }

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

  /* "Key Features" bolumu: clinic sayfasindaki "Win Your Patient's Trust"
     ile birebir ayni .edu-scope bileseni. base.css .product-list/.product-item/
     .card-information/.products-img* kurallarini kendi tasarimiyla eziyor, o
     yuzden tum kurallar .edu-scope altina alindi (ozgulluk 0,2,0 > 0,1,0). */
  .product-cards-stage {
    background: #F5F6F8;
    margin: 0;
    padding: 0 0 30px;
  }

  .product-cards-stage .edu-scope {
    background: #fff;
    border-radius: 40px;
    margin: 0 20px;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 10.5vw, 150px);
  }

  .edu-scope .edu-scope__title {
    margin: 0 0 6px;
    padding-left: 0;
    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;
    max-width: 800px;
    font-size: clamp(14px, 1.6vw, 15px);
    line-height: 1.6;
    font-weight: 400;
    color: #666D7C;
  }

  .edu-scope .edu-scope__lead b {
    font-weight: 600;
    color: #0B0B0F;
  }

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

  .edu-scope .product-content h3 {
    margin: 0 0 3px;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #0B0B0F;
  }

  .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;
    text-align: left;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  .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;
  }

  /* "Visualize Orthodontic Treatments" bolumu: products.css'teki global
     .edu-screen-two renkli gradient arka planini eziyor; diger sahnelerdeki
     (section-two, product-cards-stage) gri sahne + beyaz kart duzeniyle
     ayni: aksi halde beyaz kart beyaz sayfa ustunde kenar/radius gostermiyor. */
  .edu-screen-two-stage {
    background: #F5F6F8;
  }

  .edu-screen-two {
    background: #fff;
    border-radius: 40px;
    margin: 0 20px;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 10.5vw, 150px);
  }

  .edu-screen-two-text h3 {
    margin: 0 0 10px;
    font-size: clamp(20px, 3.5vw, 28px);
    line-height: 1.3;
    font-weight: 600;
  }

  .edu-screen-two-text h3 b {
    font-weight: 600;
  }

  .edu-screen-two-text p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    color: #666D7C;
  }

  .edu-screen-two-text p b {
    font-weight: 400;
    color: #666D7C;
  }

  .edu-video {
    display: block;
    width: 100%;
    /* Ortalanmis video: genis ekranda viewport ile buyusun. */
    max-width: clamp(720px, 51vw, 1200px);
    height: auto;
    margin: 30px auto 0;
    border-radius: 20px;
  }

  /* question-ortodontics.html paylasilan partial'inin kendi .faq-stage gri
     saritindaki ust bosluk, edu-screen-two'nun kendi alt boslugu (40px) ile
     ust uste binmesin diye clinic sayfasindaki .product-faq-stage ile ayni
     mantikla sifirliyoruz. */
  .product-faq-stage .faq-stage {
    margin-top: 0;
  }

  .product-faq-stage {
    --edu-block-gap: 0px;
  }

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

  /* Mobilde sabit "left:150px" hem basligi hem aciklama metnini ekranin
     disina/kenarina itiyordu. Aciklama metnini (uzun paragraf) tamamen
     gizleyip basligi ortaliyoruz. */
  @media (max-width: 767px) {
    .annotation-main {
      left: 50% !important;
      transform: translateX(-50%);
      width: 100%;
      text-align: center;
      padding: 0 20px;
    }

    .ortodonti-main-text {
      display: none;
    }
  }