/* =====================================================================
   Medasi — bileşen katmanı.

   Portal'ın imza öğeleri web'e taşındı:
     · kimlik rayı  → başlığın soluna düşen 3 px dikey çubuk (PSectionMarker)
     · fiil karosu  → yumuşak zeminden mürekkebe geçen kare ikon (PSectionTile)
     · künye        → mono, tabular, " · " ile ayrılmış üstveri şeridi
     · rozet        → hap biçimli durum etiketi (PStatusBadge)

   Yasaklar korunuyor: glassmorphism yok, neon/glow yok, denetimsiz gradyan
   yok, dekoratif emoji yok. Derinlik gölgeyle değil çizgiyle anlatılır.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* Zemin dokusu — kalibrasyon kâğıdı                                 */
/* ---------------------------------------------------------------- */

.doku {
  position: relative;
  isolation: isolate;
}

.doku::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--lacivert-800) 8%, transparent) 0 1px,
    transparent 1px 100%
  );
  background-size: 28px 100%;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.bolum--ters .doku::before {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.07) 0 1px,
    transparent 1px 100%
  );
}

/* ---------------------------------------------------------------- */
/* Ölçek rayı — bölüm sınırlarını işaretleyen taksimat şeridi        */
/* ---------------------------------------------------------------- */

.olcek {
  --olcek-renk: color-mix(in srgb, var(--lacivert-800) 22%, transparent);
  height: 14px;
  display: block;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--olcek-renk) 0 1px,
    transparent 1px 12px
  );
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 12px 6px;
  position: relative;
}

.olcek::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--olcek-ilerleme, 0%);
  background-image: repeating-linear-gradient(
    90deg,
    var(--vurgu) 0 1px,
    transparent 1px 12px
  );
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 12px 12px;
}

.bolum--ters .olcek {
  --olcek-renk: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------- */
/* Kimlik rayı ve künye                                              */
/* ---------------------------------------------------------------- */

.ray {
  position: relative;
  padding-inline-start: 15px;
  min-height: 20px;
}

.ray::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--y1);
  background: var(--ray-renk, var(--vurgu));
}

/* Büyük harfe çevrilmiyor: Türkçe casing "iOS"u "İOS" yapıyor ve Portal'ın
   tasarım sistemi zaten all-caps mono etiketi bırakmıştı. Mono + geniş harf
   aralığı künyeyi gövde metninden ayırmaya yetiyor. */
.kunye {
  font-family: var(--f-mono);
  font-size: var(--o-mikro);
  letter-spacing: 0.04em;
  color: var(--metin-ucuncul);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 0.55em;
  flex-wrap: wrap;
}

.kunye__ayrac {
  opacity: 0.5;
}

.bolum--ters .kunye {
  color: var(--ters-metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* Fiil karosu                                                       */
/* ---------------------------------------------------------------- */

.karo {
  --karo-boy: 40px;
  --karo-ikon: 20px;
  inline-size: var(--karo-boy);
  block-size: var(--karo-boy);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--y3);
  color: var(--karo-renk, var(--vurgu));
  background: linear-gradient(
    135deg,
    var(--karo-zemin, var(--vurgu-zemin)),
    color-mix(in srgb, var(--karo-renk, var(--vurgu)) 10%, var(--karo-zemin, var(--vurgu-zemin)))
  );
  border: 1px solid color-mix(in srgb, var(--karo-renk, var(--vurgu)) 20%, transparent);
}

.karo--kucuk {
  --karo-boy: 32px;
  --karo-ikon: 16px;
  border-radius: var(--y2);
}

.karo--buyuk {
  --karo-boy: 56px;
  --karo-ikon: 28px;
  border-radius: var(--y4);
}

.karo .ikon {
  width: var(--karo-ikon);
  height: var(--karo-ikon);
}

/* Fiil kimlikleri — tek yerden bağlanır. */
.f-coz { --karo-renk: var(--fiil-coz); --karo-zemin: var(--fiil-coz-yumusak); --ray-renk: var(--fiil-coz); }
.f-tekrar { --karo-renk: var(--fiil-tekrar); --karo-zemin: var(--fiil-tekrar-yumusak); --ray-renk: var(--fiil-tekrar); }
.f-uret { --karo-renk: var(--fiil-uret); --karo-zemin: var(--fiil-uret-yumusak); --ray-renk: var(--fiil-uret); }
.f-osce { --karo-renk: var(--fiil-osce); --karo-zemin: var(--fiil-osce-yumusak); --ray-renk: var(--fiil-osce); }
.f-sozlu { --karo-renk: var(--fiil-sozlu); --karo-zemin: var(--fiil-sozlu-yumusak); --ray-renk: var(--fiil-sozlu); }
.f-sor { --karo-renk: var(--fiil-sor); --karo-zemin: var(--fiil-sor-yumusak); --ray-renk: var(--fiil-sor); }
.f-odak { --karo-renk: var(--fiil-odak); --karo-zemin: var(--fiil-odak-yumusak); --ray-renk: var(--fiil-odak); }
.f-vaka { --karo-renk: var(--fiil-vaka); --karo-zemin: var(--fiil-vaka-yumusak); --ray-renk: var(--fiil-vaka); }

.d-tip { --karo-renk: var(--dal-tip); --ray-renk: var(--dal-tip); }
.d-dis { --karo-renk: var(--dal-dis); --ray-renk: var(--dal-dis); }
.d-veteriner { --karo-renk: var(--dal-veteriner); --ray-renk: var(--dal-veteriner); }
.d-hemsirelik { --karo-renk: var(--dal-hemsirelik); --ray-renk: var(--dal-hemsirelik); }
.d-ftr { --karo-renk: var(--dal-ftr); --ray-renk: var(--dal-ftr); }

.d-tip, .d-dis, .d-veteriner, .d-hemsirelik, .d-ftr {
  --karo-zemin: color-mix(in srgb, var(--karo-renk) 12%, var(--beyaz));
}

/* Koyu bölümde karo, kendi rengini zeminden alır. */
.bolum--ters .karo {
  --karo-zemin: color-mix(in srgb, var(--karo-renk) 18%, var(--lacivert-950));
  color: color-mix(in srgb, var(--karo-renk) 55%, #ffffff);
  border-color: color-mix(in srgb, var(--karo-renk) 34%, transparent);
}

/* ---------------------------------------------------------------- */
/* Rozet ve çip                                                      */
/* ---------------------------------------------------------------- */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 4px 12px;
  border-radius: var(--y-hap);
  font-family: var(--f-baslik);
  font-size: var(--o-kucuk);
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--rozet-renk, var(--vurgu));
  background: color-mix(in srgb, var(--rozet-renk, var(--vurgu)) 12%, var(--zemin-kart));
  border: 1px solid color-mix(in srgb, var(--rozet-renk, var(--vurgu)) 22%, transparent);
  white-space: nowrap;
}

.rozet .ikon {
  width: 15px;
  height: 15px;
}

.rozet--yayinda { --rozet-renk: var(--yayinda); }
.rozet--beta { --rozet-renk: var(--beta); }
.rozet--yakinda { --rozet-renk: var(--yakinda); }

.bolum--ters .rozet {
  background: color-mix(in srgb, var(--rozet-renk, var(--vurgu)) 20%, transparent);
  color: color-mix(in srgb, var(--rozet-renk, var(--vurgu)) 45%, #ffffff);
  border-color: color-mix(in srgb, var(--rozet-renk, var(--vurgu)) 40%, transparent);
}

.cip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 6px 12px;
  border-radius: var(--y2);
  background: var(--zemin-sessiz);
  border: 1px solid var(--kenar-yumusak);
  font-size: var(--o-kucuk);
  color: var(--metin-ikincil);
  font-family: var(--f-baslik);
  font-weight: 500;
}

a.cip {
  text-decoration: none;
  transition: border-color var(--h-durum) var(--e-giris),
    color var(--h-durum) var(--e-giris);
}

a.cip:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

/* ---------------------------------------------------------------- */
/* Buton                                                             */
/* ---------------------------------------------------------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: var(--y3);
  font-family: var(--f-baslik);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--h-durum) var(--e-giris),
    border-color var(--h-durum) var(--e-giris),
    color var(--h-durum) var(--e-giris),
    transform var(--h-anlik) var(--e-giris),
    box-shadow var(--h-durum) var(--e-giris);
}

.dugme:active {
  transform: scale(0.985);
}

.dugme .ikon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.dugme--birincil {
  background: var(--lacivert-900);
  color: #fff;
  border: 1px solid var(--lacivert-900);
  box-shadow: var(--g2);
}

.dugme--birincil:hover {
  background: var(--lacivert-800);
  border-color: var(--lacivert-800);
}

.dugme--vurgu {
  background: var(--teal-750);
  color: #fff;
  border: 1px solid var(--teal-750);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--teal-750) 26%, transparent);
}

.dugme--vurgu:hover {
  background: var(--teal-800);
  border-color: var(--teal-800);
}

.dugme--ikincil {
  background: var(--zemin-kart);
  color: var(--metin);
  border: 1px solid var(--kenar);
}

.dugme--ikincil:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

.dugme--hayalet {
  background: transparent;
  color: var(--metin-ikincil);
  border: 1px solid transparent;
  padding-inline: 12px;
}

.dugme--hayalet:hover {
  color: var(--vurgu);
  background: var(--vurgu-zemin);
}

.bolum--ters .dugme--birincil {
  background: #fff;
  color: var(--lacivert-900);
  border-color: #fff;
}

.bolum--ters .dugme--birincil:hover {
  background: var(--teal-100);
  border-color: var(--teal-100);
}

.bolum--ters .dugme--ikincil {
  background: transparent;
  color: var(--ters-metin);
  border-color: var(--ters-kenar);
}

.bolum--ters .dugme--ikincil:hover {
  border-color: var(--teal-500);
  color: var(--teal-400);
}

.dugme--buyuk {
  min-height: 54px;
  padding: 16px 24px;
  font-size: 1rem;
}

.dugme--blok {
  width: 100%;
}

/* Metin bağlantısı — okla birlikte */
.bag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--vurgu);
  font-family: var(--f-baslik);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.bag .ikon {
  width: 17px;
  height: 17px;
  transition: transform var(--h-durum) var(--e-giris);
}

.bag:hover .ikon {
  transform: translateX(3px);
}

.bag:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- */
/* Kart                                                              */
/* ---------------------------------------------------------------- */

.kart {
  background: var(--zemin-kart);
  border: 1px solid var(--kenar);
  border-radius: var(--y4);
  padding: var(--b5);
  display: flex;
  flex-direction: column;
  gap: var(--b3);
}

.kart h3 {
  font-size: var(--o-h4);
}

.kart p {
  color: var(--metin-ikincil);
  font-size: 1rem;
}

a.kart,
.kart--etkilesimli {
  text-decoration: none;
  transition:
    border-color var(--h-durum) var(--e-giris),
    transform var(--h-acilim) var(--e-giris),
    box-shadow var(--h-acilim) var(--e-giris);
}

@media (hover: hover) {
  a.kart:hover,
  .kart--etkilesimli:hover {
    border-color: color-mix(in srgb, var(--karo-renk, var(--vurgu)) 45%, var(--kenar));
    transform: translateY(-3px);
    box-shadow: var(--g3);
  }
}

.bolum--ters .kart {
  background: color-mix(in srgb, #ffffff 4%, transparent);
  border-color: var(--ters-kenar);
}

.bolum--ters .kart p {
  color: var(--ters-metin-ikincil);
}

.kart__ust {
  display: flex;
  align-items: center;
  gap: var(--b3);
  justify-content: space-between;
}

/* ---------------------------------------------------------------- */
/* Bölüm başlığı                                                     */
/* ---------------------------------------------------------------- */

.bolum-basi {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--b5) var(--b7);
  align-items: end;
  margin-block-end: var(--b7);
}

.bolum-basi--tek {
  grid-template-columns: minmax(0, 1fr);
  max-width: 62ch;
}

.bolum-basi__yan {
  color: var(--metin-ikincil);
  font-size: var(--o-govde);
}

.bolum--ters .bolum-basi__yan {
  color: var(--ters-metin-ikincil);
}

.bolum-basi h2 {
  margin-block-start: var(--b3);
}

@media (max-width: 900px) {
  .bolum-basi {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------------------------------------------------------------- */
/* Fiil satırı — Portal launcher'ının web karşılığı                  */
/* ---------------------------------------------------------------- */

.fiil-satir {
  display: flex;
  align-items: center;
  gap: var(--b3);
  min-height: 56px;
  padding: 12px;
  border-radius: var(--y2);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color var(--h-durum) var(--e-giris),
    border-color var(--h-durum) var(--e-giris);
}

.fiil-satir:hover {
  background: var(--zemin-sessiz);
  border-color: var(--kenar-yumusak);
}

.fiil-satir__govde {
  flex: 1 1 auto;
  min-width: 0;
}

.fiil-satir__ad {
  font-family: var(--f-baslik);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--metin);
}

.fiil-satir__fayda {
  font-size: var(--o-kucuk);
  line-height: 1.45;
  color: var(--metin-ikincil);
  margin-block-start: 2px;
}

.fiil-satir__ok {
  color: var(--metin-ucuncul);
  flex: 0 0 auto;
  transition: transform var(--h-durum) var(--e-giris);
}

.fiil-satir:hover .fiil-satir__ok {
  transform: translateX(3px);
  color: var(--vurgu);
}

.bolum--ters .fiil-satir:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ters-kenar);
}

.bolum--ters .fiil-satir__ad {
  color: var(--ters-metin);
}

.bolum--ters .fiil-satir__fayda {
  color: var(--ters-metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* İlerleme                                                          */
/* ---------------------------------------------------------------- */

.ilerleme {
  height: 6px;
  border-radius: var(--y1);
  background: var(--zemin-sessiz);
  overflow: hidden;
}

.ilerleme__dolgu {
  height: 100%;
  border-radius: inherit;
  background: var(--ilerleme-renk, var(--vurgu));
  width: var(--ilerleme-oran, 0%);
  transition: width var(--h-durum) var(--e-giris);
}

.bolum--ters .ilerleme {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------- */
/* Üst bilgi                                                         */
/* ---------------------------------------------------------------- */

.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--zemin) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--h-rota) var(--e-giris),
    border-color var(--h-rota) var(--e-giris);
}

.ust.kaydirildi {
  background: var(--zemin);
  border-bottom-color: var(--kenar);
  box-shadow: var(--g1);
}

.ust__ic {
  height: var(--baslik-yuksekligi);
  display: flex;
  align-items: center;
  gap: var(--b4);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--f-baslik);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--metin);
  margin-inline-end: auto;
}

/* Marka işareti kendi renklerini taşıyor; kutuya alınmıyor, boyanmıyor.
   Ölçü CSS'te veriliyor: sıfırlamadaki `height: auto`, HTML'deki width/height
   niteliklerini etkisiz bırakıyor. */
.marka__isaret {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.alt .marka__isaret {
  width: 38px;
  height: 38px;
}

.marka--ters {
  color: #fff;
}

.gezinme {
  display: flex;
  align-items: center;
  gap: 2px;
}

.gezinme__bag {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--y2);
  font-family: var(--f-baslik);
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--metin-ikincil);
  text-decoration: none;
  transition: color var(--h-durum) var(--e-giris);
}

.gezinme__bag:hover {
  color: var(--metin);
}

.gezinme__bag[aria-current] {
  color: var(--vurgu);
}

.gezinme__bag[aria-current]::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--vurgu);
}

.ust__eylem {
  display: flex;
  align-items: center;
  gap: var(--b2);
}

.menu-dugme {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--y2);
  border: 1px solid var(--kenar);
  place-items: center;
  color: var(--metin);
}

.mobil-gezinme {
  display: none;
  border-top: 1px solid var(--kenar);
  background: var(--zemin);
  padding: var(--b4) 0 var(--b5);
}

.mobil-gezinme[data-acik] {
  display: block;
}

.mobil-gezinme__bag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 4px;
  font-family: var(--f-baslik);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--metin);
  text-decoration: none;
  border-bottom: 1px solid var(--kenar-yumusak);
}

.mobil-gezinme__bag .ikon {
  color: var(--metin-ucuncul);
}

@media (max-width: 900px) {
  .gezinme,
  .ust__eylem .dugme--ikincil {
    display: none;
  }
  .menu-dugme {
    display: grid;
  }
}

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

.alt {
  background: var(--ters-zemin);
  color: var(--ters-metin-ikincil);
  padding-block: var(--b8) var(--b5);
  font-size: 0.9375rem;
}

.alt a {
  color: var(--ters-metin-ikincil);
  text-decoration: none;
}

.alt a:hover {
  color: #fff;
  text-decoration: underline;
}

.alt__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--b6) var(--b5);
}

.alt__tanitim p {
  max-width: 42ch;
  margin-block-start: var(--b3);
  line-height: 1.6;
}

.alt__baslik {
  font-family: var(--f-baslik);
  font-size: 0.875rem;
  font-weight: 650;
  color: #fff;
  margin-block-end: var(--b3);
}

.alt__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alt__sosyal {
  display: flex;
  gap: var(--b2);
  margin-block-start: var(--b4);
}

.alt__sosyal a {
  width: 42px;
  height: 42px;
  border-radius: var(--y2);
  border: 1px solid var(--ters-kenar);
  display: grid;
  place-items: center;
  transition:
    border-color var(--h-durum) var(--e-giris),
    background-color var(--h-durum) var(--e-giris);
}

.alt__sosyal a:hover {
  border-color: var(--teal-500);
  background: rgba(16, 179, 163, 0.12);
  color: var(--teal-400);
}

.alt__kunye {
  margin-block-start: var(--b7);
  padding-block-start: var(--b5);
  border-top: 1px solid var(--ters-kenar);
  display: flex;
  justify-content: space-between;
  gap: var(--b4);
  flex-wrap: wrap;
  font-size: var(--o-kucuk);
  color: var(--ters-metin-ikincil);
}

.alt__feragat {
  max-width: 62ch;
}

@media (max-width: 900px) {
  .alt__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .alt__tanitim {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .alt__izgara {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- */
/* Hero                                                              */
/* ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  position: relative;
  overflow: clip;
}

.hero__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  margin-block: var(--b4) var(--b5);
  max-width: 16ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--vurgu);
  position: relative;
  white-space: nowrap;
}

.hero__giris {
  font-size: var(--o-govde-buyuk);
  color: var(--metin-ikincil);
  max-width: 52ch;
}

.hero__eylem {
  display: flex;
  gap: var(--b3);
  flex-wrap: wrap;
  margin-block-start: var(--b6);
}

.hero__isaret {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-start: var(--b6);
  font-size: 0.9375rem;
  color: var(--metin-ikincil);
}

.hero__isaret li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hero__isaret .ikon {
  color: var(--vurgu);
  flex: 0 0 auto;
  margin-block-start: 2px;
  width: 18px;
  height: 18px;
}

@media (max-width: 980px) {
  .hero__izgara {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero h1 {
    max-width: 20ch;
  }
}

/* Hero sahnesi — Portal'ın çalışma oturumunu anlatan panel */
.sahne {
  background: var(--zemin-kart);
  border: 1px solid var(--kenar);
  border-radius: var(--y5);
  padding: var(--b5);
  box-shadow: var(--g3);
  display: flex;
  flex-direction: column;
  gap: var(--b4);
}

.sahne__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b3);
  padding-block-end: var(--b4);
  border-bottom: 1px solid var(--kenar-yumusak);
}

.sahne__liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sahne__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b3);
  padding-block-start: var(--b4);
  border-top: 1px solid var(--kenar-yumusak);
  font-size: var(--o-kucuk);
  color: var(--metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* Şerit — sürekli akan disiplin/konu listesi                        */
/* ---------------------------------------------------------------- */

.serit {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-block: var(--b2);
}

.serit__ic {
  display: flex;
  gap: var(--b3);
  width: max-content;
}

.serit__oge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 8px 16px;
  border-radius: var(--y-hap);
  border: 1px solid var(--kenar);
  background: var(--zemin-kart);
  font-family: var(--f-baslik);
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--metin-ikincil);
  white-space: nowrap;
}

.bolum--ters .serit__oge {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ters-kenar);
  color: var(--ters-metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* Adım listesi                                                      */
/* ---------------------------------------------------------------- */

.adimlar {
  counter-reset: adim;
  display: grid;
  gap: var(--b5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.adim {
  position: relative;
  padding-block-start: var(--b5);
  border-top: 2px solid var(--kenar);
}

.adim::before {
  counter-increment: adim;
  content: '0' counter(adim);
  position: absolute;
  top: -0.85em;
  inset-inline-start: 0;
  background: var(--zemin);
  padding-inline-end: 10px;
  font-family: var(--f-mono);
  font-size: var(--o-kucuk);
  color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}

.bolum--sessiz .adim::before {
  background: var(--zemin-sessiz);
}

.bolum--ters .adim {
  border-top-color: var(--ters-kenar);
}

.bolum--ters .adim::before {
  background: var(--ters-zemin);
  color: var(--teal-400);
}

.adim h3 {
  font-size: var(--o-h4);
  margin-block-end: var(--b2);
}

.adim p {
  color: var(--metin-ikincil);
  font-size: 1rem;
}

.bolum--ters .adim p {
  color: var(--ters-metin-ikincil);
}

@media (max-width: 1000px) {
  .adimlar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .adimlar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- */
/* Sık sorulan sorular                                               */
/* ---------------------------------------------------------------- */

.sss {
  border-top: 1px solid var(--kenar);
}

.sss__oge {
  border-bottom: 1px solid var(--kenar);
}

.sss__oge summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b4);
  padding-block: var(--b4);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-baslik);
  font-size: var(--o-h4);
  font-weight: 600;
  color: var(--metin);
}

.sss__oge summary::-webkit-details-marker {
  display: none;
}

.sss__isaret {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--y2);
  border: 1px solid var(--kenar);
  display: grid;
  place-items: center;
  color: var(--metin-ikincil);
  transition: transform var(--h-acilim) var(--e-giris);
}

.sss__oge[open] .sss__isaret {
  transform: rotate(180deg);
  color: var(--vurgu);
  border-color: var(--vurgu);
}

.sss__govde {
  padding-block-end: var(--b5);
  color: var(--metin-ikincil);
  max-width: 68ch;
}

.sss__govde p + p {
  margin-block-start: var(--b3);
}

/* ---------------------------------------------------------------- */
/* Eylem bandı                                                       */
/* ---------------------------------------------------------------- */

.band {
  background: var(--ters-zemin);
  color: var(--ters-metin);
  border-radius: var(--y5);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--b6);
  align-items: center;
}

.band h2 {
  color: #fff;
  max-width: 20ch;
}

.band p {
  color: var(--ters-metin-ikincil);
  margin-block-start: var(--b4);
  max-width: 52ch;
}

.band__eylem {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
}

@media (max-width: 860px) {
  .band {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- */
/* Blog                                                              */
/* ---------------------------------------------------------------- */

.yazi-kart {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
  padding-block: var(--b5);
  border-top: 1px solid var(--kenar);
  text-decoration: none;
}

.yazi-kart:first-child {
  border-top: 0;
}

.yazi-kart h3 {
  font-size: var(--o-h3);
  transition: color var(--h-durum) var(--e-giris);
}

.yazi-kart:hover h3 {
  color: var(--vurgu);
}

.yazi-kart p {
  color: var(--metin-ikincil);
  max-width: 72ch;
}

.yazi-kart--one {
  border-top: 0;
  background: var(--zemin-kart);
  border: 1px solid var(--kenar);
  border-radius: var(--y4);
  padding: var(--b6);
}

/* Yazı gövdesi — satır uzunluğu 68 karakteri geçmiyor. Izgara daha geniş
   bir kolon verse de metin bu ölçünün içinde kalıyor; uzun satır okumayı
   yavaşlatıyor. */
.govde {
  font-size: var(--o-govde-buyuk);
  line-height: 1.75;
  color: var(--murekkep-yumusak);
  max-width: 68ch;
}

/* Tablo, kod ve görsel okuma kolonundan taşabilir — bunlar taranarak
   okunuyor, satır satır değil. */
.govde > .tablo-sarmal,
.govde > pre.kod,
.govde > img {
  max-width: min(100%, 82ch);
}

@media (prefers-color-scheme: dark) {
  .govde {
    color: #cfdae8;
  }
}

.govde > * + * {
  margin-block-start: 1.15em;
}

.govde h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  margin-block-start: 2.2em;
  scroll-margin-top: calc(var(--baslik-yuksekligi) + 2rem);
}

.govde h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  margin-block-start: 1.9em;
}

.govde h2 + *,
.govde h3 + * {
  margin-block-start: 0.7em;
}

.govde a {
  color: var(--vurgu);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--vurgu) 40%, transparent);
}

.govde a:hover {
  text-decoration-color: currentColor;
}

.govde ul,
.govde ol {
  padding-inline-start: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.govde ul > li {
  list-style: none;
  position: relative;
}

.govde ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: -1.05em;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--vurgu);
}

.govde ol {
  list-style: decimal;
}

.govde ol > li::marker {
  color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}

.govde li > ul,
.govde li > ol {
  margin-block-start: 0.5em;
}

.govde blockquote {
  border-inline-start: 3px solid var(--vurgu);
  padding-inline-start: var(--b5);
  color: var(--metin-ikincil);
  font-size: 1.0625em;
}

.govde .kutu {
  border: 1px solid var(--kenar);
  border-inline-start: 3px solid var(--kutu-renk, var(--vurgu));
  border-radius: var(--y3);
  padding: var(--b4) var(--b5);
  background: var(--zemin-sessiz);
  font-size: 0.95em;
}

.govde .kutu--uyari { --kutu-renk: var(--beta); }
.govde .kutu--not { --kutu-renk: var(--fiil-coz); }
.govde .kutu--ipucu { --kutu-renk: var(--yayinda); }
.govde .kutu--kaynak { --kutu-renk: var(--metin-ucuncul); }

.govde .kutu__baslik {
  font-family: var(--f-baslik);
  font-weight: 650;
  color: var(--metin);
  margin-block-end: 0.4em;
}

.govde .kutu > * + * {
  margin-block-start: 0.7em;
}

.govde pre.kod {
  background: var(--lacivert-950);
  color: #d7e3f4;
  border-radius: var(--y3);
  padding: var(--b4);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

.govde code {
  background: var(--zemin-sessiz);
  border: 1px solid var(--kenar-yumusak);
  border-radius: var(--y1);
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}

.govde pre.kod code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.tablo-sarmal {
  overflow-x: auto;
  border: 1px solid var(--kenar);
  border-radius: var(--y3);
}

.govde table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.govde th,
.govde td {
  padding: 10px 14px;
  text-align: start;
  border-bottom: 1px solid var(--kenar-yumusak);
}

.govde th {
  font-family: var(--f-baslik);
  font-weight: 650;
  background: var(--zemin-sessiz);
  color: var(--metin);
  white-space: nowrap;
}

.govde tbody tr:last-child td {
  border-bottom: 0;
}

.govde img {
  border-radius: var(--y3);
  border: 1px solid var(--kenar);
}

.baslik-cengel {
  margin-inline-start: 0.4em;
  color: var(--metin-ucuncul);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--h-durum) var(--e-giris);
}

.govde h2:hover .baslik-cengel,
.govde h3:hover .baslik-cengel,
.baslik-cengel:focus-visible {
  opacity: 1;
}

/* İçindekiler */
.icindekiler {
  position: sticky;
  top: calc(var(--baslik-yuksekligi) + var(--b5));
  font-size: 0.9375rem;
}

.icindekiler__baslik {
  font-family: var(--f-baslik);
  font-weight: 650;
  font-size: 0.875rem;
  color: var(--metin);
  margin-block-end: var(--b3);
}

.icindekiler ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-start: 1px solid var(--kenar);
}

.icindekiler a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  color: var(--metin-ikincil);
  text-decoration: none;
  line-height: 1.4;
}

.icindekiler a:hover {
  color: var(--metin);
}

.icindekiler a.etkin {
  color: var(--vurgu);
  border-inline-start-color: var(--vurgu);
}

.icindekiler li.derin a {
  padding-inline-start: 26px;
  font-size: 0.875rem;
}

.yazi-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--b8);
  align-items: start;
}

@media (max-width: 1040px) {
  .yazi-duzen {
    grid-template-columns: minmax(0, 1fr);
  }
  .icindekiler {
    display: none;
  }
}

/* ---------------------------------------------------------------- */
/* Hata sayfası                                                      */
/* ---------------------------------------------------------------- */

.hata {
  min-height: 62vh;
  display: grid;
  align-content: center;
  gap: var(--b5);
  text-align: start;
  max-width: 52ch;
}

.hata__kod {
  font-family: var(--f-mono);
  font-size: var(--o-dev);
  color: var(--vurgu);
  line-height: 1;
}

/* ---------------------------------------------------------------- */
/* Çip satırı, kırıntı, işaretli liste                               */
/* ---------------------------------------------------------------- */

.cip-satir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b2);
}

.cip-satir--buyuk .cip {
  padding: 10px 16px;
  font-size: 0.9375rem;
}

.kirinti {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--o-kucuk);
  color: var(--metin-ucuncul);
  margin-block-end: var(--b5);
  flex-wrap: wrap;
}

.kirinti a {
  color: var(--metin-ikincil);
  text-decoration: none;
}

.kirinti a:hover {
  color: var(--vurgu);
}

.isaretli {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1rem;
  color: var(--metin-ikincil);
}

.isaretli li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.isaretli .ikon {
  color: var(--yayinda);
  flex: 0 0 auto;
  margin-block-start: 3px;
}

.isaretli--nokta li {
  position: relative;
  padding-inline-start: 18px;
}

.isaretli--nokta li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--vurgu);
}

/* ---------------------------------------------------------------- */
/* Uyarı satırı                                                      */
/* ---------------------------------------------------------------- */

.uyari-satiri {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: var(--b7);
  padding: var(--b4) var(--b5);
  border-radius: var(--y3);
  border: 1px solid var(--ters-kenar);
  border-inline-start: 3px solid var(--beta);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ters-metin-ikincil);
  font-size: 0.9375rem;
  max-width: 78ch;
}

.uyari-satiri .ikon {
  color: var(--beta);
  flex: 0 0 auto;
  margin-block-start: 2px;
}

.uyari-satiri--acik {
  border-color: var(--kenar);
  border-inline-start-color: var(--beta);
  background: var(--zemin-sessiz);
  color: var(--metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* Üretim biçimleri                                                  */
/* ---------------------------------------------------------------- */

.bicimler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--kenar);
  border: 1px solid var(--kenar);
  border-radius: var(--y4);
  overflow: hidden;
}

.bicim {
  background: var(--zemin-kart);
  padding: var(--b4) var(--b5);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 92px;
  justify-content: center;
  transition: background-color var(--h-durum) var(--e-giris);
}

.bicim:hover {
  background: var(--vurgu-zemin);
}

.bicim__ad {
  font-family: var(--f-baslik);
  font-weight: 620;
  color: var(--metin);
}

.bicim__ozet {
  font-size: var(--o-kucuk);
  color: var(--metin-ucuncul);
}

@media (max-width: 960px) {
  .bicimler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .bicimler {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- */
/* Fiil listesi ve açıcı                                             */
/* ---------------------------------------------------------------- */

.fiil-listesi {
  border: 1px solid var(--kenar);
  border-radius: var(--y4);
  padding: var(--b2);
  background: var(--zemin-kart);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bolum--ters .fiil-listesi {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ters-kenar);
}

.acici {
  margin-block-start: var(--b5);
  display: flex;
  align-items: center;
  gap: var(--b4);
  padding: var(--b5);
  border: 1px dashed var(--kenar);
  border-radius: var(--y4);
  background: var(--mint-soft);
}

.acici h3 {
  font-size: var(--o-h4);
}

.acici p {
  color: var(--metin-ikincil);
  font-size: 1rem;
  margin-block-start: 4px;
  max-width: 68ch;
}

/* ---------------------------------------------------------------- */
/* Yetenek ve branş başlığı                                          */
/* ---------------------------------------------------------------- */

.yetenek-basi {
  display: flex;
  align-items: center;
  gap: var(--b4);
}

.yetenek-basi h1 {
  margin-block-start: var(--b2);
}

.yetenek-ozet {
  margin-block-start: var(--b5);
  max-width: 58ch;
  font-size: var(--o-govde-buyuk);
  color: var(--metin-ikincil);
}

.yetenek-aciklama {
  font-size: var(--o-govde-buyuk);
  line-height: 1.72;
  color: var(--metin);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- */
/* Kapalı kutu ve modül listesi                                      */
/* ---------------------------------------------------------------- */

.kapali-kutu {
  margin-block-start: var(--b5);
  padding: var(--b4) var(--b5);
  border: 1px dashed var(--kenar);
  border-radius: var(--y3);
  color: var(--metin-ikincil);
  font-size: 0.9375rem;
}

.kapali-kutu .kunye {
  margin-block-end: 6px;
}

.modul-listesi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--kenar);
  border: 1px solid var(--kenar);
  border-radius: var(--y4);
  overflow: hidden;
}

.modul {
  background: var(--zemin-kart);
  padding: var(--b4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modul__ad {
  font-family: var(--f-baslik);
  font-weight: 620;
  color: var(--metin);
}

.modul__brans {
  font-size: var(--o-kucuk);
  color: var(--metin-ucuncul);
}

@media (max-width: 720px) {
  .modul-listesi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- */
/* Kapsam tablosu                                                    */
/* ---------------------------------------------------------------- */

.kapsam-tablo {
  width: 100%;
  border-collapse: collapse;
  background: var(--zemin-kart);
  font-size: 0.9375rem;
}

.kapsam-tablo th,
.kapsam-tablo td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid var(--kenar-yumusak);
  white-space: nowrap;
}

.kapsam-tablo thead th {
  font-family: var(--f-baslik);
  font-weight: 620;
  background: var(--zemin-sessiz);
  color: var(--metin);
}

.kapsam-tablo tbody th {
  font-weight: 600;
}

.kapsam-tablo tbody th a {
  text-decoration: none;
  color: var(--metin);
}

.kapsam-tablo tbody th a:hover {
  color: var(--vurgu);
  text-decoration: underline;
}

/* `th`'nin kendisine flex vermek onu tablo yerleşiminden çıkarır ve
   sütunlar başlıkla hizasını kaybeder; hizalama iç sarmalda yapılıyor. */
.kapsam-tablo tbody th .hucre {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kapsam-tablo td {
  text-align: center;
}

.kapsam-tablo td.acik {
  color: var(--yayinda);
}

.kapsam-tablo td.kapali {
  color: var(--metin-ucuncul);
}

.kapsam-tablo td .ikon {
  display: inline-block;
  vertical-align: middle;
}

/* ---------------------------------------------------------------- */
/* Sayılar                                                           */
/* ---------------------------------------------------------------- */

.sayilar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b5);
}

.sayi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-start: var(--b4);
  border-top: 2px solid var(--ters-kenar);
}

.sayi__deger {
  font-family: var(--f-baslik);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 650;
  line-height: 1.05;
  color: var(--teal-400);
}

.sayi__etiket {
  font-family: var(--f-baslik);
  font-weight: 600;
  color: var(--ters-metin);
}

.sayi__not {
  font-size: var(--o-kucuk);
  color: var(--ters-metin-ikincil);
}

@media (max-width: 760px) {
  .sayilar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- */
/* Blog başlığı ve önizleme                                          */
/* ---------------------------------------------------------------- */

.blog-onizleme {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--b7);
  align-items: start;
}

@media (max-width: 900px) {
  .blog-onizleme {
    grid-template-columns: minmax(0, 1fr);
  }
}

.yazi-basi {
  max-width: 62ch;
  margin-block-end: var(--b8);
}

.yazi-basi h1 {
  margin-block: var(--b4) var(--b5);
}

.yazi-basi__giris {
  font-size: var(--o-govde-buyuk);
  color: var(--metin-ikincil);
}

.yazi-basi__kimlik {
  margin-block-start: var(--b5);
  padding-block-start: var(--b4);
  border-top: 1px solid var(--kenar);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--o-kucuk);
  color: var(--metin-ucuncul);
}

.sosyal-satir {
  display: flex;
  gap: var(--b2);
  flex-wrap: wrap;
  margin-block-start: var(--b3);
}

/* ---------------------------------------------------------------- */
/* Hero yerleşim yardımcıları                                        */
/* ---------------------------------------------------------------- */

.hero__sahne {
  min-width: 0;
}

@media (max-width: 980px) {
  .hero__sahne {
    max-width: 520px;
  }
}

/* Bölüm içi ara başlık — kendi bölüm başlığı olmayan yerlerde başlık
   seviyesinin atlanmaması için. */
.ara-baslik {
  margin-block: var(--b8) var(--b5);
  font-size: var(--o-h3);
}

/* Amblemin lacivert yarısı koyu zeminde kayboluyor; koyu yüzeylerde beyaz
   altlığa oturuyor. Marka renkleri değiştirilmiyor. */
.marka--ters .marka__isaret,
.bolum--ters .marka__isaret {
  background: #fff;
  border-radius: var(--y3);
  padding: 5px;
  box-sizing: content-box;
}

/* ---------------------------------------------------------------- */
/* Dert kartı — sayfanın açılış bölümü                               */
/* ---------------------------------------------------------------- */

.dert {
  position: relative;
  padding: var(--b5) 0 var(--b5) var(--b5);
  border-inline-start: 2px solid var(--kenar);
}

.dert::before {
  content: '';
  position: absolute;
  inset-inline-start: -2px;
  top: var(--b5);
  width: 2px;
  height: 40px;
  background: var(--vurgu);
}

.dert h3 {
  font-size: var(--o-h4);
  margin-block-end: var(--b2);
}

.dert p {
  color: var(--metin-ikincil);
  font-size: 1rem;
  max-width: 54ch;
}

/* ---------------------------------------------------------------- */
/* Klinik prova bölümü                                               */
/* ---------------------------------------------------------------- */

.prova {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--b7);
  align-items: start;
}

.prova__akis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: faz;
}

.prova__adim {
  display: flex;
  align-items: center;
  gap: var(--b4);
  padding: var(--b4) 0;
  border-bottom: 1px solid var(--ters-kenar);
  position: relative;
}

.prova__adim:last-child {
  border-bottom: 0;
}

.prova__no {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--y2);
  display: grid;
  place-items: center;
  font-family: var(--f-baslik);
  font-weight: 620;
  font-size: 0.9375rem;
  color: var(--teal-400);
  background: rgba(16, 179, 163, 0.14);
  border: 1px solid rgba(16, 179, 163, 0.28);
}

.prova__govde {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.prova__ad {
  font-family: var(--f-baslik);
  font-weight: 620;
  font-size: 1.0625rem;
  color: var(--ters-metin);
}

.prova__not {
  font-size: 0.9375rem;
  color: var(--ters-metin-ikincil);
}

.prova__yan {
  display: flex;
  flex-direction: column;
  gap: var(--b4);
}

@media (max-width: 900px) {
  .prova {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b6);
  }
}

/* Çok dar ekran (küçük telefon, dar pencere): marka adı yerini eyleme bırakır,
   işaret tek başına ana sayfa bağlantısı olarak kalır. */
@media (max-width: 420px) {
  .ust__ic {
    gap: var(--b2);
  }

  .marka {
    min-width: 0;
  }

  .marka__ad {
    display: none;
  }

  .ust .dugme--birincil {
    padding-inline: 14px;
    font-size: 0.875rem;
  }
}

@media (max-width: 340px) {
  .ust .dugme--birincil .ikon {
    display: none;
  }
}

/* Bölüm sayfasının giriş paragrafı — o bölümün öğrencisinin kendini
   tanıyacağı, aradığı sözlerle yazılmış açılış. */
.brans-giris {
  font-size: var(--o-govde-buyuk);
  line-height: 1.7;
  color: var(--metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* Karşılaştırma sayfası                                             */
/* ---------------------------------------------------------------- */

.yol-kart p {
  max-width: none;
}

/* "İyi yaptığı" / "Tıkandığı yer" ayracı. Büyük harf yok: Türkçe'de
   text-transform küçük i'yi İ yapıyor ve marka adlarını bozuyor. */
.yol-kart p.yol-kart__etiket {
  margin-block: var(--b4) var(--b1);
  font-family: var(--f-mono);
  font-size: var(--o-mikro);
  letter-spacing: 0.04em;
  color: var(--yayinda);
}

.yol-kart p.yol-kart__etiket:first-of-type {
  margin-block-start: var(--b3);
}

.yol-kart p.yol-kart__etiket--eksi {
  color: var(--beta);
}

.yol-kart--biz {
  border-color: var(--vurgu);
  box-shadow: inset 3px 0 0 var(--vurgu);
}

/* Ölçüt adları uzun; bu tabloda satır başlığı sarabilmeli. */
.kapsam-tablo--genis tbody th {
  white-space: normal;
  min-width: 14rem;
}

.olcut {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.olcut__ad {
  font-weight: 600;
}

.olcut__not {
  font-family: var(--f-mono);
  font-size: var(--o-mikro);
  color: var(--metin-ucuncul);
}

.kapsam-tablo td.yari {
  color: var(--beta);
}

.kismi-etiket {
  font-family: var(--f-mono);
  font-size: var(--o-mikro);
}

.kapsam-tablo .vurgulu {
  background: var(--vurgu-zemin);
}

.kapsam-tablo thead th.vurgulu {
  color: var(--vurgu);
}

.tablo-not {
  margin-block-start: var(--b4);
  max-width: 68ch;
  font-size: var(--o-kucuk);
  color: var(--metin-ikincil);
}

/* ---------------------------------------------------------------- */
/* Sık sorulanlar — grup başlıkları ve atlama şeridi                 */
/* ---------------------------------------------------------------- */

/* Grup başlığı künye şeridinin görünümünü taşıyor ama gerçek bir h2:
   42 sorulu sayfada başlık hiyerarşisi olmadan gezinmek zor. */
h2.kunye {
  margin: 0;
  font-weight: 500;
}

.sss-grup {
  margin-block-end: var(--b8);
  scroll-margin-top: 88px;
}

.sss-atlama {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b2);
  margin-block-end: var(--b7);
}

.sss-atlama .cip {
  text-decoration: none;
  color: var(--metin-ikincil);
  transition: border-color var(--h-durum) var(--e-standart), color var(--h-durum) var(--e-standart);
}

.sss-atlama .cip:hover,
.sss-atlama .cip:focus-visible {
  color: var(--vurgu);
  border-color: var(--vurgu);
}

.sss-atlama__adet {
  margin-inline-start: 0.4em;
  font-family: var(--f-mono);
  font-size: var(--o-mikro);
  color: var(--metin-ucuncul);
  font-variant-numeric: tabular-nums;
}