.content-block {
  padding-top: 20px;
  padding-bottom: 10px;
  margin: 0 15px;
}


@media(min-width: 900px) {
  .content-block { margin: 0 50px; }
}

@media (min-width: 920px) {
  .content-block {
    max-width: 1000px;
    margin: 0 20px;
  }
}

.hero-banner {
  position: relative;
  display: flex;
  justify-content: center;
}

body.quarto-light .hero-banner {
  background-color: rgb(240,245,249);
}

body.quarto-dark .hero-banner {
  background-color: #273E4E;
}

.hero-banner h1 {
  font-size: 2.5rem;
}

body.quarto-light .hero-banner h1 {
  color: #39729E;
}

body.quarto-dark .hero-banner h1 {
  color: #b9d2eE;
}

.hero-banner .hero-image {
  position: absolute;
  display: none;
  height: auto;
}

.hero-banner .content-block {
  display: flex;
  flex-direction: row;
}

.hero-banner .content-block .hero-text {
  width: 65%;
}

.hero-banner .content-block .hero-animation {
  margin-left: 40px;
  margin-top: 45px;
  width: 350px;
  height: 455px;
}

.hero-banner .content-block .hero-animation video {
  width: 350px;
  height: 455px;
}

@media (min-width: 1000px) {
.hero-banner .hero-image {
  display: initial;
  width: 270px;
}
}

@media (min-width: 920px) {
.hero-banner .hero-image {
  width: 340px;
}
}

@media (min-width: 1400px) {
.hero-banner .hero-image {
  width: 440px;
}
}

.hero-banner .hero-image p {
  margin-bottom: 0;
}

.hero-banner .hero-image-left {
  left: 0;
  bottom: 0;
}

.hero-banner .hero-image-right {
  right: 0;
  bottom: 0;
}


.hero-banner .content-block {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner .content-block {
    max-width: 660px;
  }
  .hero-banner .content-block .hero-text {
    width: 100%;
  }

  .hero-banner .content-block .hero-animation {
    display: none;
  }
}

@media (max-width: 920px)  {
  .hero-banner .content-block {
    max-width: 660px;
  }
  .hero-banner .content-block .hero-text {
    width: 100%;
  }

  .hero-banner .content-block .hero-animation {
    display: none;
  }
}


.hero-banner a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-banner h3 {
  margin-top: 1.3rem;
  margin-bottom: 1.3rem;
}

.hero-banner h4 {
  margin-top: 0;
}

.hero-banner a[role="button"] {
  margin-bottom: 0;
}

.hero-banner ul {
  padding-inline-start: 21px;
  font-size: 1.1rem;
}

.hero-banner ul li {
  padding-bottom: 0.4rem;
}


body.quarto-light .alt-background {
  background-color: rgb(247,249,251);
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

body.quarto-dark .alt-background {
    background-color: #17212B;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #151515;
}

.hello-quarto {
  padding-bottom: 1rem;
}

@media (min-width: 715px) {
.hello-quarto-banner {
  display: inline-flex;
}

.hello-quarto-banner h1 {
  margin-right: 40px;
}
}

.hello-quarto-banner .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  border: none;
  border-bottom: 2px solid #39729E;
  color: #39729E;
  background-color: transparent;
}

.hello-quarto-banner .nav-pills button {
  width: 125px;
}
@media (max-width: 560px) {
  .hello-quarto-banner .nav-pills button {
    width: unset;
  }
}
.hello-quarto .tab-content {
  border: none;
  padding: 0;
}

body.quarto-light .hello-quarto .tab-content {
  color: rgb(84, 85, 85);
}

body.quarto-dark .hello-quarto .tab-content {
  color: rgb(200, 200, 200);
}

.hello-quarto .tab-content p {
  font-size: 1.1em;
}

body.quarto-light .hello-quarto div.sourceCode {
  background-color: white;
  border: 1px solid #dee2e6;
}

body.quarto-dark .hello-quarto div.sourceCode {
  background-color: #151515;
  border: 1px solid #3b3f47;
}

.features {
  padding-bottom: 2em;
}

.feature {
  margin-top: 20px;
}

@media (min-width: 800px) {
.features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0 0 -30px;
  width: calc(100% + 30px);
}
.feature {
  width: calc(33% - 30px);
  margin: 20px 0 0 30px;
}
}

.feature h3 {
  margin-top: 0;
}

.feature p:first-of-type {
  margin-bottom: 0.2rem;
}

body.quarto-light .feature p:first-of-type {
  color: rgb(84, 85, 85);
}

body.quarto-dark .feature p:first-of-type {
  color: rgb(200, 200, 200);
}

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

.get-started h3 {
   margin-top: 1rem;
   margin-bottom: 2rem;
}

nav.page-navigation {
  display: none;
}

.nav-footer {
  border-top: none !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #ff7518;
}

/*******************************/

/* ===================================================== */
/* HERO video yerleşimi – float'lı sürüm */
/* ===================================================== */

/* 1) Container: media-block-video */
.media-block.media-block-video {
  container-type: inline-size;
}

/* 2) < 250px için taban değerler */
.media-block.media-block-video .plyr-wrapper {
  --plyr-glass-padding: 2px;
  --plyr-border-radius-out: 6px;
  --plyr-border-radius-in: 4px;
}

/* 3) 250px–500px arası lineer interpolasyon */
@container (min-width: 250px) and (max-width: 500px) {
  .media-block.media-block-video .plyr-wrapper {
    /* 2px → 12px arası */
    --plyr-glass-padding: clamp(
      2px,
      calc(2px + (100cqw - 250px) * (10 / 250)),
      12px
    );

    /* 6px → 16px arası */
    --plyr-border-radius-out: clamp(
      6px,
      calc(6px + (100cqw - 250px) * (10 / 250)),
      16px
    );

    /* 4px → 9px arası */
    --plyr-border-radius-in: clamp(
      4px,
      calc(4px + (100cqw - 250px) * (5 / 250)),
      9px
    );
  }
}

/* 4) 500px ve üstünde sabit değerler */
@container (min-width: 500px) {
  .media-block.media-block-video .plyr-wrapper {
    --plyr-glass-padding: 12px;
    --plyr-border-radius-out: 16px;
    --plyr-border-radius-in: 9px;
  }
}

/* 3) Zaten dosyanda .hero-banner .content-block display:flex;
      biz sadece hizalamayı iyileştiriyoruz */
.hero-banner .content-block {
  justify-content: space-between;
  align-items: flex-start;   /* başlık yukarıda kalsın */
  gap: 2rem;
}

/* Metin genişlesin */
.hero-banner .hero-text { flex: 1 1 55%; }

/* 4) Sağda duran ve metnin içine “saran” kutu */
.hero-banner .hero-text .media-block { /* .hero-banner .hero-text .hero-video-shell { */
  float: right;
  width: min(100%, 500px);
  margin: 0 0 1.0rem 1.5rem;   /* soldan boşluk, alta boşluk */
  display: block;
}

/* 6) Player kutuya tam otursun */
.plyr-wrapper .plyr { width: 100%; }

/* 7) Ekran daralınca: float'ı kaldır, tam satır yapsın
      – burada 992 değil, SENİN dosyandaki kırılmaya (1200) uyuyoruz.
      Böylece “Narin Güran 21 Ağustos...” satırının bir kısmı
      videonun solunda kalmaz. */
@media (max-width: 920px) {
  .hero-banner .hero-text .media-block {
    float: none;
    width: 100%;
    max-width: 750px;
    margin: 1.25rem 0 1.75rem 0;
  }
  /* Bu ek küçük dokunuş: üstteki flex’i biraz gevşet */
  .hero-banner .content-block { gap: 1.5rem; }
}

/* --------------------------------------------------- */
/* "Başla" ve "Yardım et" butonlarını biraz küçült */
/* --------------------------------------------------- */

.hero-banner .btn-action.btn-lg {
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  line-height: 1.2;
  width: auto !important;   /* w-100 sınıfını ezer */
  min-width: 160px;         /* sabit bir minimum genişlik */
  max-width: 220px;         /* çok genişlemesin */
}

/* Mobilde biraz daha büyük kalsın */
@media (max-width: 768px) {
  .hero-banner .btn-action.btn-lg {
    width: 100% !important;
    max-width: none;
  }
}

/* — CTA buton grid'ini 2 sütun yap ve arayı daralt — */
@media (min-width: 992px) {
  /* Sadece hero içindeki bu grid'i hedefliyoruz */
  .hero-banner .hero-text .grid.gap-3 {
    display: grid;
    grid-template-columns: auto auto !important; /* 2 sütun */
    justify-content: start;                       /* sola yaklaştır */
    column-gap: 1rem;                             /* butonlar arası mesafe */
    row-gap: 0.5rem;
    max-width: max-content;                       /* container gereksiz genişlemesin */
    margin-left: 0;                               /* sola yapış */
  }

  /* .g-col-* span'larını etkisizleştir */
  .hero-banner .hero-text .grid.gap-3 > [class*="g-col-"] {
    grid-column: auto / span 1 !important;
    width: auto !important;
  }

  /* <p>’lerin dış boşluklarını temizle */
  .hero-banner .hero-text .grid.gap-3 p {
    margin: 0;
  }

  /* Buton genişliğini içerik kadar yap (dilersen min/max koy) */
  .hero-banner .hero-text .grid.gap-3 .btn {
    width: auto !important;
    min-width: 150px;
    max-width: 200px;
  }
}

/* Tablet ve altı: tek sütun kalsın, arayı normal yap */
@media (max-width: 991.98px) {
  .hero-banner .hero-text .grid.gap-3 {
    column-gap: .75rem;
    row-gap: .75rem;
    justify-content: center;
  }
  .hero-banner .hero-text .grid.gap-3 .btn {
    width: 100% !important; /* mobilde tam genişlik istersen */
    max-width: none;
  }
}

.pt-4 {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}

.grid p {
  text-indent: 0;
  margin: 0;
}

#quarto-content #title-block-header {
  display: none !important;
}