/**
 * responsive.css
 * Desktop-first: varsayılan görünüm 1200px+, aşağıdaki sorgular küçüldükçe uygulanır.
 * Breakpoint'ler: 1199 laptop · 991 tablet yatay · 767 tablet dikey · 575 mobil
 * Mobil (≤767) kurallar Figma "Mobile" sayfasındaki 430px frame'lere göre yazıldı.
 */

/* ==========================================================================
   Laptop — 1199px ve altı
   ========================================================================== */
@media (max-width: 1199px) {
  :root {
    --container-padding: 2.5rem;
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.875rem;
  }

  .nav__list {
    gap: 0;
  }

  .nav__link {
    padding-inline: var(--space-2xs);
    font-size: 1.0625rem;
  }

  .nav__mega {
    width: min(49rem, calc(100vw - 2 * var(--container-padding)));
  }

  .site-header__logo img {
    width: 150px;
  }

  .step-list__item {
    padding-left: 6.5rem;
  }

  .hero__figure {
    width: 50%;
  }

  .contact-page__inner {
    padding-left: 3rem;
  }

  .site-footer__grid {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

/* ==========================================================================
   Tablet yatay — 991px ve altı
   ========================================================================== */
@media (max-width: 991px) {
  :root {
    --container-padding: 2rem;
    --space-2xl: 3rem;
  }

  .split {
    gap: var(--space-lg);
  }

  .product-grid,
  .product-strip__grid,
  .product-strip__grid[data-count='3'] {
    grid-template-columns: repeat(2, 9.375rem);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Kademeli paneller tam genişliğe iner, filigran gizlenir */
  .step-list__item,
  .step-list__item:nth-child(n) {
    width: 100%;
  }

  .step-list::before {
    display: none;
  }

  .hero__slide-inner {
    min-height: 28rem;
  }

  .page-hero__media {
    width: 70%;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Desktop'a özel Figma boşlukları tablet altında sade değerlere döner */
  .contact-page,
  .step-section,
  .products-intro,
  .product-list,
  .faq-block,
  .page-sss .faq-block,
  .product-strip,
  .formula-section,
  .nutrition-section,
  .legal-section,
  .benefit-section,
  .page-secilmis-peptit .section--narrow,
  .page-teknoloji .section--narrow {
    padding-block: var(--space-xl);
  }

  /* Şeridin daraltılmış üst boşluğu masaüstüne özel */
  .page-iletisim .product-strip {
    padding-top: var(--space-xl);
  }

  .faq-block .accordion {
    margin-inline: 0;
  }

  .faq-block .heading {
    padding-left: 3rem;
  }

  .formula {
    max-width: none;
  }

  .product-grid,
  .product-grid--list {
    margin-inline: 0;
  }

  .nutrition {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }

  /* Tek sütuna düşen düzende görsel masaüstü konumlandırmasını bırakır */
  .nutrition__media > img {
    width: 100%;
    max-width: 33.5rem;
    margin: 0;
  }

  .nutrition__table-wrap {
    width: auto;
    margin-left: 0;
  }

  .nutrition__origin {
    top: 0;
    margin: var(--space-md) 0 0 2rem;
  }

  .lab-section .split {
    grid-template-columns: 1fr;
  }

  .lab-section .split__body {
    padding-left: 0;
  }

  .section--tint .split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-section .split__body {
    padding-left: 0;
  }

  .contact-section .split__media {
    margin-top: 0;
  }

  .video,
  .page-teknoloji .video {
    width: auto;
    margin-inline: 0;
  }

  .product-hero--image .product-hero__body {
    padding-left: 0;
  }

  .page-teknoloji .page-hero__media img {
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .page-secilmis-peptit .page-hero__media {
    width: 70%;
  }

  .cta-band__actions {
    padding-left: 0;
  }

  .contact-page__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-lg);
  }

  .contact-page__inner {
    padding-right: var(--container-padding);
  }

  .split__media--flush {
    margin-right: 0;
  }

  .split__media--flush img {
    border-radius: var(--radius-lg);
  }

  .lab-section {
    padding-block: var(--space-lg);
  }

  .lab-section .split__body {
    padding-block: 0;
  }
}

/* ==========================================================================
   Tablet dikey — 767px ve altı (hamburger menü devreye girer)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --container-padding: 1.75rem;
    --font-size-h1: 1.875rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
  }

  /* --- Header: alt çizgisiz, logo 140px, sağda çerçevesiz hamburger (Figma 89:1629) --- */
  .site-header {
    border-bottom: 0;
  }

  .site-header__inner {
    position: relative;
    align-items: center;
    min-height: 6.75rem; /* Figma mobil header 108px */
    padding: 0 2.375rem 0 2.4375rem; /* logo x=39, menü glifi sağdan 46 */
  }

  .nav__toggle img {
    width: 33px;
    height: 23px;
  }

  .nav {
    padding-top: 0;
  }

  .site-header__logo {
    margin-top: 0;
  }

  .site-header__logo img {
    width: 140px;
  }

  .nav__toggle {
    display: block;
    min-width: 44px;
    min-height: 44px;
  }

  /* --- Menü: sağdan açılan beyaz panel, öğeler sağa hizalı (Figma 89:1633) --- */
  .nav {
    position: absolute;
    top: 100%;
    right: var(--container-padding);
    z-index: 60;
    display: none;
    width: 16.5rem;
    max-width: calc(100vw - 2 * var(--container-padding));
    background-color: var(--color-bg);
    box-shadow: var(--shadow-popover);
  }

  .nav--open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__item + .nav__item {
    border-top: 1px solid var(--color-brand);
  }

  .nav__link {
    display: flex;
    justify-content: flex-end;
    min-height: 3.625rem;
    padding: var(--space-sm) 1.75rem;
    border-radius: 0;
    font-size: var(--font-size-body);
    white-space: normal;
  }

  .nav__link:hover,
  .nav__link--active {
    background-color: transparent;
  }

  /* Kapalıyken sola, açıkken aşağı bakan ok */
  .nav__chevron {
    transform: rotate(90deg);
  }

  .nav__item--open .nav__chevron {
    transform: rotate(0);
  }

  .nav__submenu {
    position: static;
    min-width: 0;
    padding: var(--space-2xs) 1.75rem var(--space-sm);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--color-bg-muted);
    text-align: right;
  }

  .nav__mega {
    position: static;
    display: block;
    width: auto;
    padding: var(--space-2xs) 1.75rem var(--space-sm);
    border-radius: 0;
    transform: none;
  }

  .nav__mega::before,
  .nav__mega-item + .nav__mega-item::before,
  .nav__mega-image {
    display: none;
  }

  .nav__mega-link {
    display: flex;
    align-items: flex-end;
    min-height: 44px;
    padding: 0;
  }

  .nav__mega-link:hover {
    transform: none;
  }

  /* --- Layout --- */
  .split,
  .section--tint .split {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: var(--space-lg);
  }

  /* --- Hero (Figma 89:1633): gri 407px + altta 161px beyaza geçiş, lacivert 30px başlık, 41px play --- */
  .hero__slide-inner {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 34.75rem;
    padding-block: 17.625rem 0;
  }

  .hero__slide::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 10.0625rem;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
    pointer-events: none;
  }

  .hero__slide {
    position: relative;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    max-width: 20.3125rem;
    margin-inline: auto;
    padding-left: 0;
    text-align: center;
  }

  .hero .heading--lg {
    color: var(--color-brand);
    font-size: 1.875rem;
  }

  .hero__video {
    top: 11.4375rem;
    transform: translateX(-50%);
  }

  .hero__actions {
    display: none;
  }

  .hero__figure {
    position: static;
    width: 60%;
    margin-inline: auto;
    transform: none;
  }

  /* Banner'lar masaüstü kompozisyonu (1200×544); mobilde gizlenir, eski mobil
     hero düzeni (ortalanmış figür + beyaza geçiş) korunur. */
  .hero__bg {
    display: none;
  }

  .hero__slide--product.hero__slide--bg .hero__figure {
    display: block;
  }

  .hero__slide--product.hero__slide--bg .hero__slide-inner {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .hero__slide--product.hero__slide--bg .hero__content {
    padding-right: 0;
    text-align: center;
  }

  /* Oklar ve noktalar mobilde de görünür (müşteri isteği); açık banner zemininde lacivert */
  .hero__arrow {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hero__arrow--prev {
    left: 0.25rem;
  }

  .hero__arrow--next {
    right: 0.25rem;
  }

  .hero__dots {
    bottom: 1rem;
  }

  .hero__dot {
    background-color: rgba(15, 50, 83, 0.3);
  }

  .hero__dot--active {
    background-color: var(--color-brand);
  }

  .hero__play img,
  .video__play img {
    width: 44px;
    height: 45px;
  }

  /* Video slaytı: beyaz geçiş videonun üstüne binmesin */
  .hero__slide--video::after {
    content: none;
  }

  /* --- Marka bandı (Figma 89:1638): 83 üst / 67 alt, filigran soluk --- */
  .marin-band {
    padding-block: 5.1875rem 4.1875rem;
  }

  .marin-band .heading {
    font-size: 1.5rem;
  }

  .marin-band::before {
    top: -1rem;
    left: -1.5rem;
    width: 12rem;
    height: 20rem;
    opacity: 0.15;
  }

  /* --- Seçilmiş peptit (Figma 89:1642): görsel 363px, metin x=54, 336px, alt 92 --- */
  .section--tint {
    padding-bottom: 5.75rem;
  }

  .section--tint .split__media img {
    width: 22.6875rem;
    margin: 0.5625rem auto 0;
  }

  .section--tint .split__body {
    padding-left: 1.625rem;
  }

  .section--tint .lead {
    max-width: 21rem;
  }

  .split__actions {
    margin-top: 1.9375rem;
  }

  /* --- Ürün kartları (Figma 89:1650): 36px başlık, 323×404 kart, 299×211 görsel, 30px başlık, 39 aralık --- */
  .home-products {
    padding-bottom: 3.6875rem;
  }

  .home-products__title {
    margin-bottom: 4.5rem;
    font-size: 2.25rem;
    line-height: 0.89;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  }

  .home-products .product-card {
    min-height: 25.25rem;
    padding: 2.6875rem 0 3.0625rem;
  }

  .home-products .product-card__media {
    padding-left: 1.5rem;
  }

  .home-products .product-card__media img {
    width: 14.25rem;
    max-width: none;
    height: auto;
  }

  .home-products .product-card__title {
    margin-top: 1.9375rem;
    font-size: 1.875rem;
    letter-spacing: -0.02em;
  }

  .home-products .product-grid {
    gap: 2.4375rem;
  }

  .home-products .section__actions {
    margin-top: 3.5rem;
  }

  /* --- Dielen (Figma 89:1675): görsel 430×298 en üstte, 30px başlık x=60, 314px metin --- */
  .lab-section {
    padding-top: 0;
  }

  .lab-section .split__media {
    order: -1;
    margin-inline: calc(-1 * var(--container-padding));
  }

  .lab-section .split__body {
    padding: 2.5rem 0 2rem 2rem;
  }

  .lab-section .heading {
    font-size: 1.875rem;
  }

  .lab-section .lead {
    max-width: 19.625rem;
    margin-top: 2.375rem;
    line-height: 1.2;
  }

  .lab-section .split__actions {
    margin-top: 2rem;
  }

  .lab-section .btn {
    min-width: 11.1875rem;
  }

  .split__media--flush img {
    height: 18.625rem;
    border-radius: 0;
    object-fit: cover;
  }

  /* --- Bize Ulaşın: ortalı başlık → illüstrasyon → form (Figma 89:1681) --- */
  .contact-section .split__body {
    display: contents;
  }

  .contact-section .heading {
    order: -2;
    text-align: center;
  }

  .contact-section .split__media {
    order: -1;
  }

  .contact-section {
    padding-bottom: 3.6875rem;
  }

  .contact-section .heading {
    font-size: 2.25rem;
  }

  .contact-section .split {
    gap: 0.5rem;
  }

  .contact-section .split__media {
    width: 18.3125rem;
    margin: 0 auto;
  }

  .contact-section .contact-form {
    max-width: none;
    margin-top: 1.375rem;
  }

  .contact-section .form__control {
    min-height: 2.375rem;
    padding-block: 0.5rem;
    border-color: #ececec;
  }

  .contact-section .form__field + .form__field {
    margin-top: 1.9375rem;
  }

  .contact-section .form__actions {
    margin-top: 2.4375rem;
  }

  .contact-section .split__media::before {
    display: none;
  }

  /* --- Adım listesi (Figma 66:6347): eğiksiz paneller 385/339/368, sağ kenar 406, 42 aralık --- */
  .step-section {
    padding-block: 4.5rem 5.3125rem;
  }

  .step-list {
    gap: 2.75rem;
    margin-inline: -0.375rem -1.5rem;
    padding-right: 1.4375rem;
  }

  .step-list::before {
    display: block;
    top: -3.8125rem;
    left: -0.375rem;
    width: 26.5rem;
    height: 44rem;
  }

  .step-list__item {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    width: 24.0625rem;
    min-height: 0;
    padding: 1.4375rem 1.125rem 1rem 6.1875rem;
  }

  .step-list__item:nth-child(2) {
    width: 21.1875rem;
    padding-top: 0.75rem;
  }

  .step-list__item:nth-child(3) {
    width: 23rem;
    padding-top: 0.75rem;
  }

  .step-list__item::before {
    transform: none;
  }

  .step-list__number {
    left: -0.25rem;
    width: 5.5rem;
  }

  .step-list__item:first-child .step-list__number {
    left: 0.375rem;
    width: 4.6875rem;
  }

  .step-list__title {
    font-size: var(--font-size-h3);
  }

  .step-list__body {
    font-size: var(--font-size-body);
  }

  /* --- Ürün şeridi (Figma 68:345): 36px iki satır başlık, kartlar 48/56 aralıklı, 34 üst / 48 alt --- */
  .product-strip {
    padding-block: 2.125rem 3rem;
  }

  .product-strip .heading {
    margin-inline: -0.5625rem;
    font-size: 1.5rem; /* Figma 89:1340: 24px, iki satır */
    line-height: 1.2;
  }

  .product-strip__media img {
    width: 126px;
    margin-inline: auto;
  }

  .product-strip__grid,
  .product-strip__grid[data-count='3'] {
    grid-template-columns: repeat(2, 9.375rem);
    gap: 3.5rem 3rem;
    margin-top: 1.625rem; /* kartlar y=118 */
  }

  /* 3 ürünlü sayfada son kart ortalanır (Figma 68:1617) */
  .product-strip__grid[data-count='3'] .product-strip__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 9.375rem;
    justify-self: center;
  }

  /* --- SSS (Figma 89:2535): 36px iki satır başlık, 386px satırlar, 18px soru, 13px aralık, ok kenara dayalı --- */
  .faq-block,
  .page-sss .faq-block {
    padding-block: 0 2.25rem;
  }

  .page-sss .faq-block {
    padding-top: 2.625rem;
  }

  .faq-block .heading {
    margin-inline: -0.5625rem;
    margin-bottom: 1.125rem;
    padding-left: 0;
    font-size: 1.875rem;
    line-height: 1.4;
    text-align: center;
    text-wrap: wrap; /* "SIKÇA SORULAN SORULAR / (SSS)" */
  }

  .page-sss .faq-block .heading {
    margin-bottom: 2.0625rem;
  }

  .faq-block .accordion {
    margin-inline: -0.375rem;
  }

  .accordion__item + .accordion__item {
    margin-top: 0.8125rem;
  }

  /* Soru Exo 2 Bold 16/1.2, kutu 51/69px; ok glifi sağ kenardan 30px (Figma 89:2001 glif 373–381) */
  .accordion__trigger {
    align-items: flex-start;
    padding: 0.8125rem 1.375rem 0.8125rem 1.75rem;
    font-size: var(--font-size-body);
    line-height: 1.2;
  }

  .accordion__icon {
    width: 25px;
    height: 25px;
    margin-top: -0.0625rem;
    margin-right: 0;
  }

  .accordion__panel {
    font-size: var(--font-size-body);
    line-height: 1.2;
  }

  .accordion__panel-inner > p {
    padding: 0 1.375rem 0.75rem 1.75rem;
  }

  .faq-block__cta {
    margin-top: 2.625rem;
  }

  .step-list__item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .step-list__title {
    font-size: var(--font-size-h3);
    line-height: 1;
  }

  .cta-band .btn {
    width: 21.0625rem;
    min-width: 0;
    min-height: 3.1875rem;
    gap: 0.75rem;
    padding-inline: 1.375rem;
    font-size: 1.875rem;
  }

  .cta-band__actions {
    padding-left: 1.4375rem;
  }

  .cta-band .btn__icon {
    width: 2.1875rem;
    height: 2.1875rem;
  }

  .faq-block__cta .btn {
    width: 100%;
    min-width: 0;
  }

  /* --- Footer: her şey ortalı dikey yığın, ikon metnin üstünde (Figma 89:1700) --- */
  .site-footer {
    text-align: center;
  }

  .site-footer {
    padding-block: 1.5625rem 2.25rem;
  }

  .site-footer__grid {
    gap: 1.75rem;
  }

  .site-footer__logo img,
  .site-footer__legal-name,
  .site-footer .info-block__item {
    margin-inline: auto;
  }

  .site-footer__legal-name {
    max-width: 12.5625rem;
    margin-top: 0.8125rem;
  }

  .site-footer .info-block__columns .info-block__item {
    max-width: 15.0625rem; /* Figma 68:393: Ofis 241px */
  }

  .site-footer .info-block__columns .info-block__item:first-child {
    max-width: 12.875rem; /* Merkez 206px */
  }

  .site-footer__bottom {
    margin-top: 2.625rem;
  }

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

  .site-footer .info-block {
    flex-direction: column;
    align-items: center;
    gap: 1.4375rem;
  }

  .site-footer__social {
    gap: 0.25rem;
    margin-left: 0;
  }

  .site-footer .info-block__columns {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .site-footer__info .info-block:last-child .info-block__columns {
    gap: 0.4375rem; /* Telefon → Faks 16px */
  }

  .site-footer__info .info-block + .info-block {
    margin-top: 1.625rem;
  }

  /* --- Buton yüksekliği Figma mobil ile aynı (39px) --- */
  .btn {
    min-height: 2.4375rem;
  }

  .br-mobile {
    display: inline;
  }
}

/* ==========================================================================
   Mobil — 575px ve altı
   ========================================================================== */
@media (max-width: 575px) {
  /* Ana sayfa ürün kartları tek sütun, üstte ortalı "Ürünler" başlığı (Figma 89:1650) */
  .product-grid {
    grid-template-columns: 1fr;
    max-width: 20.25rem;
    margin-inline: auto;
  }

  .home-products__title {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: var(--space-md);
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Ürün listesi kartları tek sütun, 277px ortalı, görsel taşması için 82px aralık (Figma 68:1061) */
  .product-grid--list {
    max-width: 17.3125rem;
    gap: 5.125rem;
  }

  .nutrition__table {
    font-size: 0.8125rem;
  }

  .nutrition__table th,
  .nutrition__table td {
    padding-inline: 0.25rem;
  }

  .legal-note {
    font-size: 0.75rem;
  }

  /* --- Mobil banner'lı hero slaytları (640×960): ürün kutusu görsele gömülü,
     alt üçte bir metne ayrılmış. Banner'sız slaytlarda eski düzen korunur. --- */
  .hero__slide--bg-mobile {
    aspect-ratio: 2 / 3;
  }

  .hero__slide--bg-mobile .hero__bg {
    display: block;
  }

  /* Banner alt kenarı zaten açık zemine açılıyor, ayrı geçiş katmanı gerekmez */
  .hero__slide--bg-mobile::after {
    display: none;
  }

  /* 767 bloğundaki .hero__slide--product.hero__slide--bg kuralından daha özgül olmalı */
  .hero__slide--product.hero__slide--bg-mobile .hero__figure {
    display: none;
  }

  .hero__slide--bg-mobile .hero__slide-inner {
    min-height: 100%;
    align-content: end;
    padding-block: 0 2.5rem; /* altta nokta navigasyonuna yer */
  }

  /* Geniş (1920×640) banner masaüstü kuralı mobil dikey banner düzenini ezmesin */
  .hero__slide--product.hero__slide--bg-wide .hero__slide-inner {
    height: auto;
    min-height: 100%;
    padding-block: 0 2.5rem;
  }

  /* Giriş slaytı: dikey mobil banner'da metin ürün slaytları gibi altta ortalanır */
  .hero__slide--intro .hero__slide-inner {
    height: auto;
    min-height: 100%;
    align-content: end;
    justify-items: stretch;
    padding: 0 0 2.5rem;
  }

  .hero__slide--intro .btn {
    white-space: normal;
  }

  .hero__slide--intro .hero__content {
    max-width: 20.3125rem;
    margin-inline: auto;
    text-align: center;
  }

  /* Oynat düğmesi banner'ın üst görsel alanına ortalanır (kutuların üstünde kalır) */
  .hero__slide--bg-mobile .hero__video {
    top: 17%;
  }
}

/* ==========================================================================
   Tablet — 576–991px (iPad mini / Air dikey)
   Mobil (≤767) kurallar 430px Figma frame'ine göre sabit px ölçülerle, masaüstü hero
   ise 1200×544 banner'ın kırpılmasına göre yazıldı; ikisi de bu aralıkta bozuluyor.
   Burada yalnızca genişliğe göre ölçeklenmesi gereken parçalar ezilir; telefon (≤575)
   ve masaüstü (≥992) düzenleri dokunulmadan kalır.
   ========================================================================== */
@media (min-width: 576px) and (max-width: 991px) {
  /* --- Hero: masaüstü kompozisyonu korunur (kutu solda, metin sağ boşlukta) ama slayt
     yüksekliği sabit değil, banner oranını (1200×544) izler; böylece görsel kırpılmaz --- */
  .hero__slide--bg .hero__bg {
    display: block;
  }

  .hero__slide--product.hero__slide--bg .hero__figure {
    display: none;
  }

  .hero__slide--product.hero__slide--bg .hero__slide-inner {
    grid-template-columns: 1fr;
    justify-items: end;
    align-items: center;
    aspect-ratio: 1200 / 544;
    min-height: 0;
    padding-block: 0;
  }

  /* 1920×640 banner'da oran slaytın kendisinde; iç kap yalnızca onu doldurur */
  .hero__slide--product.hero__slide--bg-wide .hero__slide-inner {
    aspect-ratio: auto;
    height: 100%;
  }

  .hero__slide--product.hero__slide--bg .hero__content {
    max-width: 44%; /* kutu banner'ın sol %55'ini kaplar */
    margin-inline: 0;
    padding: 0 5% 0 0; /* metin sağ bölgenin ortasına yaklaşır */
    text-align: left;
  }

  .hero .heading--lg {
    font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  }

  .hero__actions {
    display: block;
  }

  .hero__slide--bg::after {
    display: none;
  }

  .hero__arrow {
    top: 50%;
  }

  .hero__arrow--prev {
    left: 0.75rem;
  }

  .hero__arrow--next {
    right: 0.75rem;
  }

  .hero__dots {
    bottom: 0.875rem;
  }

  .hero__dot {
    background-color: rgba(15, 50, 83, 0.3);
  }

  .hero__dot--active {
    background-color: var(--color-brand);
  }

  /* --- Seçilmiş peptit: görsel ortalı ve sınırlı, metin tam genişlik --- */
  .section--tint .split__media img {
    display: block;
    width: min(100%, 30rem);
    margin-inline: auto;
  }

  .section--tint .split__body {
    padding-left: 0;
  }

  .section--tint .lead,
  .lab-section .lead {
    max-width: 36rem;
  }

  /* --- Ürün kartları: iki sütun, görsel kart genişliğine göre ölçeklenir --- */
  .home-products .product-card__media img {
    width: 100%;
    max-width: 18.6875rem;
    height: auto;
  }

  /* --- Dielen: metin girintisi kaldırılır --- */
  .lab-section .split__body {
    padding-left: 0;
  }

  /* --- Bize Ulaşın: başlık → illüstrasyon → form ortalı, form 36rem --- */
  .contact-section .split {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .contact-section .split__body {
    display: contents;
  }

  .contact-section .heading {
    order: -2;
    text-align: center;
  }

  .contact-section .split__media {
    order: -1;
    width: 18.3125rem;
    margin: 0 auto;
  }

  .contact-section .split__media::before {
    display: none;
  }

  .contact-section .contact-form {
    width: 100%; /* grid öğesinde auto margin içeriğe büzmesin */
    max-width: 36rem;
    margin: 1.375rem auto 0;
  }
}

/* ==========================================================================
   Hareket azaltma tercihi
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   İç sayfa bölümleri
   ========================================================================== */

@media (max-width: 991px) {
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 7rem;
  }

  .formula,
  .nutrition,
  .product-hero__inner,
  .contact-page__grid {
    grid-template-columns: 1fr;
  }

  .product-hero--image .product-hero__body {
    grid-column: auto;
    padding-left: 0;
  }

  .product-hero--image .product-hero__inner {
    align-items: end;
  }

  /* Ürün hero'su: banner kırpılmadan tam genişlikte üstte, metin altında */
  .product-hero--image {
    aspect-ratio: auto;
    background-color: var(--color-bg);
  }

  .product-hero__bg {
    position: static;
    height: auto;
  }

  .fact-row {
    gap: var(--space-xl);
  }

  .fact-row__text {
    font-size: var(--font-size-h3);
  }

  .contact-page__inner {
    padding-left: var(--container-padding);
  }

  .contact-page__watermark {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Hero (Figma 66:6330 / 68:280): 802px, görsel tüm alanı kaplar, üstten 529px beyaz geçiş, metin üstte */
  .page-hero {
    display: block;
    min-height: 50.125rem;
  }

  .page-hero__media,
  .page-secilmis-peptit .page-hero__media {
    position: absolute;
    top: -4.125rem;
    left: -1.75rem;
    width: 30.25rem;
    height: 54.25rem;
  }

  .page-teknoloji .page-hero__media {
    left: -7.8125rem;
    width: 43.375rem;
  }

  .page-teknoloji .page-hero__media img,
  .page-secilmis-peptit .page-hero__media img {
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: cover;
  }

  .page-hero__media::after,
  .page-secilmis-peptit .page-hero__media::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 33.0625rem;
    background-image: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 30%, rgba(255, 255, 255, 0));
  }

  /* Seçilmiş Peptit: Figma'nın mobil görseli (66:6615, 430×802) hero'yu birebir kaplar;
     beyaz geçiş görselin içinde olduğu için CSS geçişi kapalı */
  .page-secilmis-peptit .page-hero__media {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .page-secilmis-peptit .page-hero__media::after {
    display: none;
  }

  .page-hero__inner {
    min-height: 0;
    padding-block: 2.125rem 0;
  }

  .page-teknoloji .page-hero__inner {
    padding-top: 1rem;
  }

  .page-hero__title {
    font-size: 1.875rem;
    letter-spacing: -0.02em;
  }

  .page-hero__body {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .page-hero__panel,
  .page-teknoloji .page-hero__panel {
    max-width: none;
    padding-left: 1.3125rem; /* metin x=50 */
  }

  .page-secilmis-peptit .page-hero__body,
  .page-teknoloji .page-hero__body {
    max-width: 21.4375rem;
  }

  /* Başlık 430px'te tek satır; dar telefonlarda "SEÇİLMİŞ" tek başına alt satıra
     düşüp sola yapışıyordu — Teknoloji'deki gibi ortalanıp metin sütununa sığar */
  .page-teknoloji .page-hero__title {
    max-width: 21.3125rem;
    text-align: center;
  }

  .page-secilmis-peptit .page-hero__title {
    max-width: 21.4375rem;
    text-align: center;
  }

  /* Tanım / video bölümleri (Figma 66:6339): x=48 sütun, 30px başlık, 16px paragraflar, alt 19 */
  .section--narrow .container {
    max-width: none;
    padding-inline: 3rem;
  }

  .section--narrow .heading {
    font-size: 1.875rem;
  }

  .section--narrow .lead--large {
    font-size: var(--font-size-body);
    line-height: 1.2;
  }

  .article__body {
    font-size: var(--font-size-body);
  }

  .page-secilmis-peptit .section--narrow {
    padding-block: 2rem 1.25rem;
  }

  .section--narrow .video + .lead {
    margin-top: 1.5rem;
  }

  /* Teknoloji (68:285): 30px iki satır başlık, künye 22/30px, tam genişlik 264px video, 16px paragraf, alt 0 */
  .page-teknoloji .section--narrow {
    padding-block: 1.5625rem 0;
  }

  .page-teknoloji .section--narrow .heading strong {
    display: block;
  }

  .page-teknoloji .fact-row {
    margin-top: 1.5rem;
  }

  .page-teknoloji .fact-row {
    grid-template-columns: 1fr 1.2fr;
    gap: 0.5rem;
    margin-inline: -0.5rem;
  }

  .page-teknoloji .fact-row__item:last-child {
    gap: 0;
  }

  .page-teknoloji .fact-row__label {
    font-size: 1.375rem;
  }

  .page-teknoloji .fact-row__value {
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .page-teknoloji .fact-row__item:last-child .fact-row__text {
    margin-top: -0.875rem;
  }

  .page-teknoloji .section--narrow .lead--large {
    margin-top: 1.125rem;
  }

  .video,
  .page-teknoloji .video {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--container-padding));
    border-radius: 0;
  }

  .page-teknoloji .video {
    margin-inline: -3rem;
    aspect-ratio: 430 / 264;
  }

  .video__play img,
  .page-teknoloji .video__play img {
    width: 41px;
    height: 42px;
  }

  .page-teknoloji .step-section {
    padding-block: 5.9375rem 8.25rem;
  }

  .page-teknoloji .step-list {
    gap: 1.875rem;
  }

  .page-teknoloji .step-list__item {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
  }

  .page-teknoloji .product-strip {
    padding-block: 0 3rem;
  }

  .page-teknoloji .product-strip__grid {
    margin-top: 2.125rem;
  }

  /* Dielen künyesi: 2 sütun, ikon üstte metin altta ortalı (Figma 68:275) */
  .fact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .fact-row__item {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .fact-row__logo {
    width: 7rem;
  }

  .fact-row__text {
    font-size: 1.75rem;
  }

  .benefit-grid {
    gap: 8.25rem;
    padding-top: 5.8125rem;
  }

  .benefit-card {
    width: 21.625rem;
    max-width: 100%;
    margin-inline: auto;
    padding-bottom: 2.6875rem;
  }

  .benefit-card__title {
    max-width: 17rem;
  }

  .benefit-card__title br {
    display: none;
  }

  .benefit-section {
    padding-bottom: 3.5rem;
  }


  /* Ürün hero'su: görsel üstte, metin altta beyaz zeminde ortalı (Figma 68:1306) */
  .product-hero--image .product-hero__inner {
    min-height: 0;
    padding-block: var(--space-md);
  }

  /* Ürün hero'su (Figma 68:1313): 30px başlık 2 satır, slogan 30px tek satır, 341px metin */
  .product-hero__body {
    padding-inline: 1.0625rem;
    text-align: center;
  }

  .product-hero__title,
  .product-hero__sub {
    font-size: 1.875rem;
  }

  .product-hero__sub br {
    display: none;
  }

  /* Formül (Figma 68:1552): 30px başlık, 16px giriş 312px, kart 318px ortalı, 270px buton */
  .formula-section .heading,
  .product-video .heading,
  .nutrition-section .heading {
    font-size: 1.875rem;
  }

  .formula-section {
    padding-bottom: 1.75rem;
  }

  .formula {
    gap: 1.375rem;
    margin-top: 2.75rem;
  }

  .formula__intro {
    max-width: 19.5rem;
    margin-inline: auto;
    padding-top: 0;
    font-size: var(--font-size-body);
  }

  .formula__card {
    max-width: 19.875rem;
    margin-inline: auto;
    padding: 1.25rem 1rem 1.75rem 1.625rem;
  }

  .formula__title {
    font-size: 2.25rem;
  }

  .formula__body {
    margin-top: 1rem;
  }

  .formula__actions {
    margin-top: 1.375rem;
  }

  .formula__actions .btn {
    display: flex;
    width: 16.875rem;
    margin-inline: auto;
    font-size: var(--font-size-ui);
  }

  /* Besin değerleri (Figma 68:1574): görsel 330px, pill 131×28 ortalı, 12px meta metinleri */
  .nutrition-section {
    padding-block: 0 1rem;
  }

  .nutrition {
    margin-top: 3.75rem;
  }

  .nutrition__media {
    text-align: center;
  }

  .nutrition__media::before {
    display: none; /* kontur mobilde kutunun altından taşıyordu */
  }

  /* 5 sütunlu tablo mobilde iki tabloya bölünür */
  .nutrition__table-wrap--full {
    display: none;
  }

  .nutrition__table-wrap--split {
    display: block;
  }

  .nutrition__table-wrap--split + .nutrition__table-wrap--split {
    margin-top: 0.75rem;
  }

  .nutrition__table th {
    line-height: 1.2;
    padding-block: 0.3125rem;
  }

  .nutrition__media img {
    width: 20.625rem;
    margin-inline: auto;
  }

  .nutrition__origin {
    display: flex;
    width: fit-content;
    height: 1.75rem;
    margin: 1.75rem auto 0;
    padding: 0 0.75rem 0 0.5rem;
    font-size: var(--font-size-body);
  }

  .nutrition__origin img {
    top: 0;
    left: -1.5rem;
    width: 1.5rem;
    height: 1.75rem;
  }

  .nutrition__body {
    padding-top: 0;
  }

  .nutrition__subtitle,
  .nutrition__serving {
    font-size: 0.75rem;
    text-align: center;
  }

  .nutrition__table-wrap {
    margin-inline: -0.25rem;
    padding: 0.5rem 0.875rem;
  }

  .nutrition__table th:first-child,
  .nutrition__table td:first-child {
    width: auto;
    padding-left: 0.5rem;
  }

  .nutrition__table th:nth-child(2),
  .nutrition__table td:nth-child(2) {
    width: 7.25rem;
  }

  .nutrition__meta,
  .nutrition__note,
  .nutrition__price {
    font-size: 0.75rem;
  }

  .nutrition__meta {
    padding: 0 0.75rem;
  }

  .nutrition__note {
    max-width: none;
    margin-top: 0;
  }

  .legal-section {
    padding-top: 1rem;
  }

  .legal-section .legal-note,
  .products-legal {
    font-size: 0.75rem;
    line-height: normal;
  }

  .legal-section .legal-note {
    max-width: 21.3125rem;
  }

  .info-block__columns {
    grid-template-columns: 1fr;
  }

  .product-grid--list {
    padding-top: 2.5rem;
  }

  /* Ürünler girişi (Figma 68:1045): 36px başlık, 42 üst, 341px alt metin */
  .products-intro {
    padding-top: 2.625rem;
  }

  .products-intro h1.heading {
    font-size: 2.25rem;
  }

  .products-intro__subtitle {
    max-width: 21.3125rem;
  }

  .product-grid--list {
    padding-top: 4.25rem;
  }

  .product-card--list {
    padding-inline: 2rem;
  }

  .product-card__badge-wrap {
    display: flex;
    justify-content: center;
  }

  .products-legal {
    max-width: 21.3125rem;
  }

  .faq-block__cta .btn {
    min-height: 0;
    padding-block: 0.59375rem;
    font-size: var(--font-size-ui);
  }

  /* İletişim sayfası (Figma 89:1312): 36px başlık, 374px form, 40px input, tek sütun ortalı detaylar */
  .contact-page {
    padding-top: 2.625rem;
  }

  .contact-page .heading {
    font-size: 2.25rem;
    text-align: center;
  }

  .contact-page__grid {
    row-gap: 3.125rem;
    margin-top: 1.75rem;
  }

  .contact-page .form__control:not(textarea) {
    height: 2.5rem;
    padding-block: 0;
  }

  .contact-form .btn {
    padding-block: 0.5rem;
    font-size: var(--font-size-ui);
  }

  .contact-page__details {
    padding: 0 0 2.625rem;
    text-align: center;
  }

  .contact-page__details .info-block {
    flex-direction: column;
    align-items: center;
    gap: 1.0625rem;
  }

  .contact-page__details .info-block + .info-block {
    margin-top: 2.5rem;
  }

  .contact-page__details .info-block__columns {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 15.125rem;
    margin-inline: auto;
  }

  .cta-band {
    padding-block: 5.9375rem 6rem;
  }

  .cta-band::before {
    display: none;
  }

  .error-page .section__actions .btn + .btn {
    margin-left: 0;
    margin-top: var(--space-2xs);
  }
}

@media (max-width: 575px) {
  /* Ürün hero'su mobil banner'la: kutu görsele gömülü, başlık ve slogan
     banner'ın alt boşluğuna biner (masaüstü banner'ın kırpılmış hâli yerine). */
  .product-hero--image-mobile {
    aspect-ratio: 2 / 3;
    background-color: transparent;
  }

  .product-hero--image-mobile .product-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center;
  }

  .product-hero--image-mobile .product-hero__inner {
    min-height: 100%;
    align-content: end;
    padding-block: 0 var(--space-md);
  }
}