/* ==========================================================================
   Bölüm düzenleri

   Her bölüm kendi içeriğine göre kurgulanır; tekrar eden bir kart kalıbı
   yoktur. Ortak olan yalnızca ölçü ve renk sistemidir.
   ========================================================================== */

/* --- Üst gezinme --------------------------------------------------------
   İnce bir marka çizgisi, altında şeffaf bir bar. Sayfa kaydıkça bar
   kağıt rengine oturur. */

.ust {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
}

.ust__serit {
  height: 3px;
  background: var(--serit);
}

.ust__bar {
  height: var(--ust-bar);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--gecis), box-shadow var(--gecis);
}

.ust[data-kaydirildi='evet'] .ust__bar {
  background: color-mix(in srgb, var(--kagit) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 var(--cizgi);
}

.ust__ic {
  display: flex;
  align-items: center;
  gap: var(--a5);
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.ust__logo {
  flex-shrink: 0;
}

.ust__logo img {
  height: 1.625rem;
  width: auto;
  transition: opacity var(--gecis);
}

/* Kapakta logo beyaz, kaydırınca koyu — iki dosya üst üste yumuşak geçer */
.ust__logo {
  position: relative;
  display: block;
}

.ust__logo--koyu {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
}

.ust[data-kaydirildi='evet'] .ust__logo--beyaz {
  opacity: 0;
}

.ust[data-kaydirildi='evet'] .ust__logo--koyu {
  opacity: 1;
}

.ust__gezinme {
  display: flex;
  gap: var(--a1);
  margin-inline-start: auto;
}

.ust__bag {
  position: relative;
  padding: var(--a2) var(--a3);
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-orta);
  color: var(--murekkep-ters-orta);
  white-space: nowrap;
  transition: color var(--gecis-hizli);
}

.ust[data-kaydirildi='evet'] .ust__bag {
  color: var(--murekkep-orta);
}

.ust__bag:hover,
.ust__bag[aria-current='true'] {
  color: var(--murekkep-ters);
}

.ust[data-kaydirildi='evet'] .ust__bag:hover,
.ust[data-kaydirildi='evet'] .ust__bag[aria-current='true'] {
  color: var(--mor);
}

.ust__bag[aria-current='true']::after {
  content: '';
  position: absolute;
  inset-block-end: 0.3rem;
  inset-inline: var(--a3);
  height: 1.5px;
  background: currentColor;
  border-radius: var(--kose-tam);
}

@media (max-width: 62rem) {
  .ust__gezinme {
    display: none;
  }
}

/* --- 1. Kapak -----------------------------------------------------------
   Fotoğraf tam kanama; metin solda, koyu bir perdenin üzerinde. */

.kapak {
  position: relative;
  min-height: min(44rem, 94svh);
  display: grid;
  align-items: center;
  padding-block: calc(var(--ust-bar) + var(--a9)) var(--a9);
  overflow: hidden;
  isolation: isolate;
  background: var(--kagit-koyu);
}

.kapak__arka {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.kapak__arka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.kapak__perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    96deg,
    rgba(22, 6, 34, 0.96) 0%,
    rgba(28, 9, 42, 0.92) 30%,
    rgba(42, 14, 60, 0.74) 46%,
    rgba(58, 16, 78, 0.34) 62%,
    rgba(58, 16, 78, 0.06) 78%,
    transparent 90%
  );
}

/* Dar ekranda metin fotoğrafın üstüne biner; perde dikey olmalı. */
@media (max-width: 56rem) {
  .kapak__arka img {
    object-position: 60% center;
  }

  .kapak__perde {
    background: linear-gradient(
      178deg,
      rgba(22, 6, 34, 0.94) 0%,
      rgba(28, 9, 42, 0.9) 40%,
      rgba(42, 14, 60, 0.82) 70%,
      rgba(58, 16, 78, 0.7) 100%
    );
  }
}

.kapak__ic {
  max-width: 36rem;
  color: var(--murekkep-ters);
}

.kapak__etiket {
  display: inline-block;
  margin-bottom: var(--a5);
  padding-bottom: var(--a2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-yari);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--leylak);
}

.kapak__logo {
  margin-bottom: var(--a5);
}

.kapak__logo img {
  width: min(100%, 24rem);
}

.kapak__slogan {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-alt-baslik);
  font-weight: var(--kalin-normal);
  font-style: italic;
  font-variation-settings: 'opsz' 28;
  letter-spacing: var(--iz-dar);
  color: var(--murekkep-ters);
  margin-bottom: var(--a7);
}

.kapak__dozlar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a2);
  margin-bottom: var(--a7);
  font-size: var(--ol-kucuk);
  color: var(--murekkep-ters-orta);
}

.kapak__doz {
  padding: var(--a1) var(--a3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--kose-tam);
  font-weight: var(--kalin-orta);
  color: var(--murekkep-ters);
}

.kapak__doz-not {
  margin-inline-start: var(--a2);
}

.kapak__eylem {
  display: inline-flex;
  align-items: center;
  gap: var(--a3);
  font-size: var(--ol-not);
  font-weight: var(--kalin-yari);
  color: var(--murekkep-ters);
  padding-bottom: var(--a2);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.45);
  transition: border-color var(--gecis-hizli), gap var(--gecis-hizli);
}

.kapak__eylem:hover {
  border-color: var(--murekkep-ters);
  gap: var(--a4);
}

.kapak__eylem svg {
  transition: transform var(--gecis-hizli);
}

.kapak__eylem:hover svg {
  transform: translateY(3px);
}

/* --- 2. Mekanizma -------------------------------------------------------
   Tez cümlesi geniş; altında görsel ortada, iki yolak iki yanda. */

.tez {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-baslik);
  font-weight: var(--kalin-yari);
  font-variation-settings: 'opsz' 40;
  line-height: var(--satir-sikisik);
  letter-spacing: var(--iz-sikisik);
  max-width: 50rem;
  text-wrap: balance;
  margin-bottom: var(--a9);
}

.yolak {
  display: grid;
  gap: var(--a7);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .yolak {
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: var(--a8);
    align-items: center;
  }
}

.yolak__gorsel {
  order: -1;
}

@media (min-width: 62rem) {
  .yolak__gorsel {
    order: 0;
  }
}

/* Yolak kartı: kutu değil, üstünde ince bir renk çizgisi olan bir blok.
   Çizgi, yolağın yönünü de taşır — fazlalık mor, eksiklik mavi. */
.yolak-kart {
  position: relative;
  padding-top: var(--a5);
  border-top: 1px solid var(--cizgi);
}

.yolak-kart::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--mor);
}

.yolak-kart:last-of-type::before {
  background: var(--mavi);
}

/* Fazlalık / eksiklik — yolağın kendi yönü, tipografik işaret olarak */
.yolak-kart__yon {
  display: block;
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-yari);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--mor);
  margin-bottom: var(--a3);
}

.yolak-kart:last-of-type .yolak-kart__yon {
  color: var(--mavi);
}

.yolak-kart__baslik {
  font-size: var(--ol-govde-buyuk);
  font-weight: var(--kalin-kalin);
  letter-spacing: var(--iz-dar);
  line-height: var(--satir-orta);
  margin-bottom: var(--a3);
}

/* Kritik sentez: sayfanın ortasında, alıntı gibi */
.sentez {
  margin-top: var(--a9);
  padding-inline: var(--a6);
  text-align: center;
}

.sentez__etiket {
  display: block;
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-yari);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--mor);
  margin-bottom: var(--a4);
}

.sentez__metin {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-alt-baslik);
  font-weight: var(--kalin-normal);
  font-style: italic;
  font-variation-settings: 'opsz' 28;
  line-height: var(--satir-orta);
  max-width: 44rem;
  margin-inline: auto;
  text-wrap: balance;
}

/* --- 3. Denge -----------------------------------------------------------
   Gösterge sayfanın merkezinde durur; iki rol onun iki ucuna bağlanır.
   Göstergenin kendisi soğuk-sıcak bir eksen olduğu için, kartlar da o
   eksenin uçlarını okuyacak biçimde hizalanır. */

.denge {
  position: relative;
  overflow: hidden;
}

/* Göstergenin arkasındaki geniş, çok soluk mor hale */
.denge::before {
  content: '';
  position: absolute;
  inset-block-start: 18%;
  inset-inline-start: 50%;
  width: min(92rem, 150%);
  aspect-ratio: 3 / 1;
  translate: -50% 0;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--mor) 9%, transparent) 0%,
    transparent 62%
  );
  pointer-events: none;
}

.denge__gosterge {
  position: relative;
  max-width: 56rem;
  margin: 0 auto var(--a9);
}

.denge__roller {
  display: grid;
  gap: var(--a7);
  grid-template-columns: 1fr;
  max-width: 62rem;
  margin-inline: auto;
}

@media (min-width: 52rem) {
  .denge__roller {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--a9);
  }

  /* Soldaki kart eksenin soğuk ucunu, sağdaki sıcak ucunu okur */
  .denge__roller > *:last-child {
    text-align: right;
  }
}

.rol__baslik {
  font-size: var(--ol-govde-buyuk);
  font-weight: var(--kalin-kalin);
  letter-spacing: var(--iz-dar);
  line-height: var(--satir-orta);
  margin-bottom: var(--a3);
}

/* Antagonist / agonist — içeriğin kendi terimi, sayfanın vurgusu */
.rol__gorev {
  display: inline-block;
  font-family: var(--yazi-baslik);
  font-size: var(--ol-alt-baslik);
  font-style: italic;
  font-weight: var(--kalin-yari);
  font-variation-settings: 'opsz' 32;
  line-height: 1.2;
  color: var(--mor);
  margin-bottom: var(--a4);
  padding-bottom: var(--a3);
  border-bottom: 1px solid color-mix(in srgb, var(--mor) 22%, transparent);
}

/* --- 4. Etkinlik --------------------------------------------------------
   Grafik solda büyük; sağda tek cümlelik sonuç ve iki rakam. */

.etkinlik__ust {
  font-size: var(--ol-govde-buyuk);
  font-weight: var(--kalin-orta);
  color: var(--murekkep-orta);
  max-width: 36rem;
  margin-bottom: var(--a8);
}

.etkinlik__izgara {
  display: grid;
  gap: var(--a8);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .etkinlik__izgara {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--a9);
  }
}

.etkinlik__sonuc {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-alt-baslik);
  font-weight: var(--kalin-yari);
  font-variation-settings: 'opsz' 28;
  line-height: var(--satir-orta);
  letter-spacing: var(--iz-dar);
  text-wrap: balance;
}

/* --- 5. Risk ------------------------------------------------------------
   Koyu bölüm: büyük rakam solda, cümle sağda, görsel arkada. */

.risk {
  overflow: hidden;
}

.risk__izgara {
  display: grid;
  gap: var(--a8);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .risk__izgara {
    grid-template-columns: 1fr 1fr;
    gap: var(--a9);
  }
}

.risk__rakam {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-rakam);
  font-weight: var(--kalin-cok);
  font-variation-settings: 'opsz' 144;
  line-height: 0.85;
  letter-spacing: var(--iz-sikisik);
  color: var(--murekkep-ters);
  margin-bottom: var(--a5);
}

.risk__metin {
  font-size: var(--ol-govde-buyuk);
  line-height: var(--satir-orta);
  color: var(--murekkep-ters-orta);
  max-width: 28rem;
}

.risk__vurgu {
  color: var(--murekkep-ters);
  font-weight: var(--kalin-yari);
}

.risk__gorsel {
  justify-self: center;
  max-width: 28rem;
}

/* --- 6. Güvenlilik ------------------------------------------------------
   Dört başlık, iki sütunlu bir liste gibi; ikon metnin solunda. */

.guvenlilik__izgara {
  display: grid;
  gap: var(--a7) var(--a8);
  grid-template-columns: 1fr;
}

@media (min-width: 50rem) {
  .guvenlilik__izgara {
    grid-template-columns: repeat(2, 1fr);
  }
}

.guvenlilik-kart {
  display: flex;
  align-items: flex-start;
  gap: var(--a5);
  padding-top: var(--a5);
  border-top: 1px solid var(--cizgi);
}

.guvenlilik-kart__ikon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.guvenlilik-kart__baslik {
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-cok);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--mor);
  margin-bottom: var(--a2);
}

.guvenlilik-kart__metin {
  font-size: var(--ol-govde);
  line-height: var(--satir-genis);
  color: var(--murekkep-orta);
}

/* --- 7. Özet ------------------------------------------------------------
   Koyu mor bir blok: tek güçlü ifade ve altında özellik listesi. */

.ozet {
  background: var(--mor-gecis);
  color: var(--murekkep-ters);
}

.ozet .bolum-no {
  color: var(--leylak);
}

.ozet .bolum-no__sira {
  color: var(--murekkep-ters-silik);
}

.ozet .bolum-no::after {
  background: var(--cizgi-ters);
}

.ozet__baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-baslik);
  font-weight: var(--kalin-yari);
  font-variation-settings: 'opsz' 40;
  line-height: var(--satir-sikisik);
  letter-spacing: var(--iz-sikisik);
  max-width: 34rem;
  margin-bottom: var(--a9);
  text-wrap: balance;
}

/* Özellikler bir sıralama değil; numara yerine ince bir üst çizgi ayırır. */
.ozet__liste {
  display: grid;
  gap: var(--a5) var(--a8);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .ozet__liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ozet__madde {
  font-size: var(--ol-govde-buyuk);
  line-height: var(--satir-orta);
  padding-top: var(--a4);
  border-top: 1px solid var(--cizgi-ters);
}

.ozet .kaynaklar {
  border-top-color: var(--cizgi-ters);
  color: var(--murekkep-ters-silik);
}

.ozet .imza {
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

/* --- 8. Endikasyon ------------------------------------------------------
   Reçete bilgisi: solda endikasyon ve rozetler, sağda ürün. */

.endikasyon__izgara {
  display: grid;
  gap: var(--a8);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .endikasyon__izgara {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--a9);
  }
}

.endikasyon__liste {
  display: grid;
  gap: var(--a4);
  margin-bottom: var(--a7);
  max-width: 32rem;
}

.endikasyon__madde {
  display: flex;
  gap: var(--a3);
  font-size: var(--ol-govde-buyuk);
  line-height: var(--satir-orta);
}

.endikasyon__madde::before {
  content: '';
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--mor);
}

.rozetler {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--a4);
}

/* F25 geri ödeme rozeti */
.kod-rozet {
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: var(--a3) var(--a5) var(--a3) var(--a3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-tam);
  background: var(--kagit);
}

.kod-rozet__kod {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: var(--mor-gecis);
  color: var(--murekkep-ters);
  font-size: var(--ol-not);
  font-weight: var(--kalin-cok);
  letter-spacing: var(--iz-dar);
}

.kod-rozet__yazi {
  display: grid;
  line-height: 1.35;
}

.kod-rozet__ad {
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-kalin);
}

.kod-rozet__not {
  font-size: var(--ol-mikro);
  color: var(--murekkep-silik);
}

/* Günde tek doz */
.doz-rozet {
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: var(--a3) var(--a5);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-tam);
  background: var(--kagit);
}

.doz-rozet__deger {
  font-size: var(--ol-govde-buyuk);
  font-weight: var(--kalin-cok);
  color: var(--mor);
  letter-spacing: var(--iz-dar);
}

.doz-rozet__ad {
  font-size: var(--ol-kucuk);
  color: var(--murekkep-silik);
}

.endikasyon__urun img {
  width: 100%;
}

.endikasyon__dozlar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-top: var(--a5);
  justify-content: center;
}

.endikasyon__doz {
  padding: var(--a1) var(--a3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-tam);
  font-size: var(--ol-kucuk);
  font-weight: var(--kalin-orta);
  color: var(--murekkep-orta);
}

/* --- Alt bilgi ---------------------------------------------------------- */

.alt {
  padding-block: var(--a9) var(--a7);
  background: var(--kagit-koyu);
  color: var(--murekkep-ters);
}

.alt__ust {
  display: grid;
  gap: var(--a7);
  grid-template-columns: 1fr;
  padding-bottom: var(--a7);
  border-bottom: 1px solid var(--cizgi-ters);
}

@media (min-width: 52rem) {
  .alt__ust {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--a8);
  }
}

.alt__logo img {
  width: 11rem;
}

.alt__kub {
  display: flex;
  align-items: center;
  gap: var(--a4);
}

.alt__qr {
  width: 4.25rem;
  height: 4.25rem;
  padding: var(--a2);
  background: var(--murekkep-ters);
  border-radius: var(--kose-kucuk);
}

.alt__kub-yazi {
  font-size: var(--ol-kucuk);
  line-height: 1.5;
  color: var(--murekkep-ters-orta);
}

.alt__kub-bag {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  margin-top: var(--a1);
  font-weight: var(--kalin-yari);
  color: var(--murekkep-ters);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  transition: border-color var(--gecis-hizli);
}

.alt__kub-bag:hover {
  border-color: var(--murekkep-ters);
}

.alt__kurumsal {
  display: flex;
  align-items: center;
  gap: var(--a5);
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.alt__kurumsal img {
  height: 1.75rem;
  width: auto;
}

.alt__kurumsal img.alt__deva {
  height: 2.5rem;
}

.alt__alt {
  display: grid;
  gap: var(--a5);
  padding-top: var(--a6);
  font-size: var(--ol-mikro);
  line-height: 1.65;
  color: var(--murekkep-ters-silik);
}

@media (min-width: 56rem) {
  .alt__alt {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--a8);
  }
}

.alt__uyari {
  padding: var(--a4) var(--a5);
  border-inline-start: 2px solid var(--leylak);
  color: var(--murekkep-ters-orta);
}

.alt__kod {
  letter-spacing: var(--iz-genis);
  margin-top: var(--a3);
}