/* Bilgi sayfaları (kalıp A: nasıl çalışır, rehberler, güven, imece, şeffaflık, hakkımızda, SSS, iletişim, yasal…)
   ve form sayfalarının ortak parçaları. Sayfa başı: css/temel/duzen.css → .sayfa-basi
   Dil (v0.5): beyaz zemin; pastel ya da çok hafif gri, oval köşeli kartlar; beyaz dairede renkli ikon; çizgiyle bölünmüş
   sütun ve kesik çerçeve yok. Renkler: yaprak = doğrulama, bal = vurgu, gök = bilgi, mercan = uyarı, gül/tereyağı = sıcak vurgu. */

/* Alt sayfalarda bölümler biraz daha sık */
.bolum--sik {
  padding-block: clamp(40px, 5vw, 72px);
}

.bolum--sik + .bolum--sik {
  padding-top: 0;
}

/* İçerik + sağda yapışkan yan kutu (veya --sol: solda içindekiler) */
.icerik-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px clamp(32px, 5vw, 64px);
  align-items: start;
}

.icerik-duzen--sol {
  grid-template-columns: 260px minmax(0, 1fr);
}

.yan-kutu {
  position: sticky;
  top: calc(var(--ust-menu-yuksekligi) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Kart ızgarası: varsayılan 3 sütun */
.kart-izgarasi {
  display: grid;
  grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr));
  gap: 20px;
}

.kart-izgarasi--2 {
  --sutun: 2;
}

.kart-izgarasi--4 {
  --sutun: 4;
}

/* Bilgi kartı: pastel (ton) ya da beyaz gölgeli, oval köşeli. İkon kartın üstünde beyaz dairede.
   Ton: --yaprak, --bal, --gok, --mercan, --gul, --tereyag, --nane (varsayılan çok hafif gri) */
.bilgi-karti {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 26px 28px;
  border-radius: var(--yaricap-kocaman);
  background: var(--kart-zemin, var(--renk-gri));
  color: var(--renk-metin);
}

.bilgi-karti > .ikon-rozeti {
  margin-bottom: 12px;
}

.bilgi-karti:not(.bilgi-karti--beyaz) > .ikon-rozeti {
  background: var(--renk-zemin);
  color: var(--kart-renk, var(--renk-orman));
}

.bilgi-karti h3 {
  font-size: 1.3125rem;
  line-height: 1.25;
}

.bilgi-karti p {
  color: var(--renk-metin);
}

.bilgi-karti small {
  font-size: 0.875rem;
  color: var(--renk-soluk);
}

.bilgi-karti--beyaz {
  background: var(--renk-zemin);
  box-shadow: var(--golge-yumusak);
}

.bilgi-karti--yaprak {
  --kart-zemin: var(--renk-yaprak-acik);
  --kart-renk: var(--renk-yaprak);
}

.bilgi-karti--bal {
  --kart-zemin: var(--renk-bal-acik);
  --kart-renk: var(--renk-bal);
}

.bilgi-karti--gok {
  --kart-zemin: var(--renk-gok-acik);
  --kart-renk: var(--renk-gok);
}

.bilgi-karti--mercan {
  --kart-zemin: var(--renk-mercan-zemin);
  --kart-renk: var(--renk-mercan);
}

.bilgi-karti--gul {
  --kart-zemin: var(--renk-gul);
  --kart-renk: var(--renk-mercan);
}

.bilgi-karti--tereyag {
  --kart-zemin: var(--renk-tereyag);
  --kart-renk: var(--renk-bal-koyu);
}

.bilgi-karti--nane {
  --kart-zemin: var(--renk-nane);
  --kart-renk: var(--renk-orman);
}

/* Bağlantı olan kart: üzerine gelince hafif yükselir */
a.bilgi-karti {
  transition: transform 0.2s, box-shadow 0.2s;
}

a.bilgi-karti:hover {
  box-shadow: var(--golge-yumusak);
  transform: translateY(-3px);
}

/* Kartın sağ üst köşesindeki büyük, soluk numara */
.bilgi-karti__no {
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: var(--yazi-baslik);
  font-size: 2.75rem;
  font-weight: 650;
  line-height: 1;
  color: var(--kart-renk, var(--renk-cizgi-koyu));
  opacity: 0.28;
}

/* Kartın küçük üst etiketi (ör. "~1 dakika", "Kim yapar?") */
.bilgi-karti__etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--renk-zemin);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--kart-renk, var(--renk-orman));
}

.bilgi-karti__etiket .ikon {
  width: 14px;
  height: 14px;
}

.bilgi-karti__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

/* Kart içinde onay işaretli kısa liste */
.tik-listesi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.tik-listesi li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tik-listesi .ikon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--kart-renk, var(--renk-yaprak));
  stroke-width: 2.2;
}

.tik-listesi--yasak .ikon {
  color: var(--renk-mercan);
}

/* İkonlu liste: küçük pastel daire + kalın başlık + açıklama */
.ikonlu-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ikonlu-liste li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.5;
}

.ikonlu-liste strong {
  display: block;
  color: var(--renk-murekkep);
}

.ikonlu-liste p {
  font-size: 0.9375rem;
  color: var(--renk-metin);
}

/* Çizelge: dikey numaralı adımlar; numaralar kalın, yumuşak bir şeritle bağlı (kesik çizgi yok) */
.cizelge {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cizelge__adim {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
}

.cizelge__adim:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 62px;
  bottom: -8px;
  left: 26px;
  width: 4px;
  border-radius: 2px;
  background: var(--renk-gri-koyu);
}

.cizelge__no {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  font-family: var(--yazi-baslik);
  font-size: 1.375rem;
  font-weight: 650;
  color: var(--cizelge-renk, var(--renk-orman));
}

.cizelge__no .ikon--renkli {
  width: 26px;
  height: 26px;
}

.cizelge__govde {
  padding: 16px 20px 18px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
}

.cizelge__govde h3 {
  font-size: 1.1875rem;
}

.cizelge__govde p {
  margin-top: 4px;
  color: var(--renk-metin);
}

.cizelge__govde .bilgi-karti__etiket {
  margin-bottom: 8px;
  background: var(--renk-zemin);
}

.cizelge--yaprak {
  --cizelge-renk: var(--renk-yaprak);
}

.cizelge--bal {
  --cizelge-renk: var(--renk-bal-koyu);
}

.cizelge--gok {
  --cizelge-renk: var(--renk-gok);
}

/* İçindekiler: uzun sayfalarda (yasal, rehber) yapışkan yan menü */
.icindekiler {
  position: sticky;
  top: calc(var(--ust-menu-yuksekligi) + 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
}

.icindekiler__baslik {
  margin: 0 0 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--renk-soluk);
}

.icindekiler a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--yaricap);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--renk-metin);
  transition: background-color 0.15s, color 0.15s;
}

.icindekiler a:hover {
  background: var(--renk-zemin);
  color: var(--renk-murekkep);
}

.icindekiler a[aria-current] {
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  color: var(--renk-orman);
}

.icindekiler .ikon-rozeti {
  background: var(--renk-zemin);
}

/* Uzun metin (yasal metinler, rehber açıklamaları) */
.metin {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--renk-metin);
}

.metin > * + * {
  margin-top: 14px;
}

.metin h2 {
  margin-top: 56px;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  scroll-margin-top: calc(var(--ust-menu-yuksekligi) + 24px);
}

.metin h3 {
  margin-top: 30px;
  font-size: 1.25rem;
}

.metin > :first-child {
  margin-top: 0;
}

.metin strong {
  color: var(--renk-murekkep);
}

.metin a {
  font-weight: 600;
  color: var(--renk-orman);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.metin ul li {
  position: relative;
  padding-left: 22px;
}

.metin ul li + li,
.metin ol li + li {
  margin-top: 6px;
}

.metin ul li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--renk-yaprak-susu);
}

.metin ol {
  padding-left: 24px;
  list-style: decimal;
}

.metin ol li::marker {
  font-weight: 700;
  color: var(--renk-orman);
}

.metin__tarih {
  font-size: 0.875rem;
  color: var(--renk-soluk);
}

/* Veri tablosu: çizgi yalnızca tablolarda; başlık satırı hafif gri, köşeler oval */
.veri-tablosu {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.veri-tablosu th {
  padding: 12px 16px;
  background: var(--renk-gri);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: left;
  color: var(--renk-murekkep);
}

.veri-tablosu td {
  padding: 12px 16px;
  border-top: 1px solid var(--renk-cizgi);
  vertical-align: top;
}

.tablo-kaydirici {
  overflow-x: auto;
}

/* İki sütun: metin + leke biçimli fotoğraf */
.ikili {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: center;
}

.ikili--ters > :first-child {
  order: 2;
}

.ikili__gorsel {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
}

.ikili__gorsel .foto {
  aspect-ratio: 1 / 1;
}

.ikili__gorsel .susleme {
  position: absolute;
  top: -4%;
  left: -6%;
  width: 70px;
  height: 70px;
  color: var(--renk-yaprak-susu);
  transform: rotate(-24deg);
}

.ikili__not {
  position: absolute;
  right: -2%;
  bottom: 4%;
  padding: 10px 16px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  color: var(--renk-orman);
  transform: rotate(-4deg);
}

/* Çağrı kartı: sayfanın sonunda pastel kutu (ikon, metin, düğmeler) */
.cagri-karti {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  overflow: hidden;
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: var(--yaricap-dev);
  background: var(--kart-zemin, var(--renk-yaprak-acik));
}

.cagri-karti--bal {
  --kart-zemin: var(--renk-bal-acik);
  --kart-renk: var(--renk-bal);
}

.cagri-karti--gok {
  --kart-zemin: var(--renk-gok-acik);
  --kart-renk: var(--renk-gok);
}

.cagri-karti--gul {
  --kart-zemin: var(--renk-gul);
  --kart-renk: var(--renk-mercan);
}

.cagri-karti--tereyag {
  --kart-zemin: var(--renk-tereyag);
  --kart-renk: var(--renk-bal-koyu);
}

.cagri-karti > .ikon-rozeti {
  background: var(--renk-zemin);
  color: var(--kart-renk, var(--renk-orman));
}

.cagri-karti__metin {
  flex: 1 1 320px;
}

.cagri-karti__metin h2 {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.9rem);
}

.cagri-karti__metin p {
  margin-top: 6px;
  color: var(--renk-metin);
}

.cagri-karti__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cagri-karti .susleme {
  position: absolute;
  right: -10px;
  bottom: -14px;
  z-index: -1;
  width: 110px;
  height: 110px;
  color: var(--renk-yaprak-susu);
  opacity: 0.6;
  transform: rotate(-30deg);
}

/* Kategori hapları: sayfa içi bölümlere götüren yuvarlak bağlantılar (SSS, rehber) */
.hap-menusu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hap-menusu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 8px;
  border-radius: 999px;
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--renk-murekkep);
  transition: box-shadow 0.15s, transform 0.15s;
}

.hap-menusu a:hover {
  box-shadow: var(--golge-kart-ust);
  transform: translateY(-1px);
}

.hap-menusu .ikon-rozeti {
  width: 30px;
  height: 30px;
}

.hap-menusu .ikon-rozeti .ikon--renkli {
  width: 16px;
  height: 16px;
}

/* Fotoğraflı küçük kart (hikâyeler, rehber videoları) */
.foto-karti {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
}

.foto-karti > .foto {
  aspect-ratio: 16 / 10;
}

.foto-karti__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.foto-karti__govde h3 {
  font-size: 1.1875rem;
}

.foto-karti__govde p {
  font-size: 0.9375rem;
  color: var(--renk-metin);
}

.foto-karti__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8125rem;
  color: var(--renk-soluk);
}

/* Fotoğrafın ortasında oynat düğmesi (video yer tutucusu) */
.oynat {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--renk-zemin);
  box-shadow: var(--golge-yuzen);
  color: var(--renk-mercan);
  transform: translate(-50%, -50%);
}

.oynat .ikon--renkli {
  width: 28px;
  height: 28px;
}

.foto__sure {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--renk-koyu-perde);
  color: var(--renk-zemin);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
  .kart-izgarasi--4 {
    --sutun: 2;
  }
}

@media (max-width: 960px) {
  .icerik-duzen,
  .icerik-duzen--sol {
    grid-template-columns: minmax(0, 1fr);
  }

  .yan-kutu,
  .icindekiler {
    position: static;
  }

  .ikili {
    grid-template-columns: minmax(0, 1fr);
  }

  .ikili--ters > :first-child {
    order: 0;
  }

  .kart-izgarasi {
    --sutun: 2;
  }
}

@media (max-width: 640px) {
  .kart-izgarasi,
  .kart-izgarasi--4 {
    --sutun: 1;
  }

  .bilgi-karti {
    padding: 22px 20px 24px;
  }

  .cizelge__adim {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .cizelge__no {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
  }

  .cizelge__adim:not(:last-child)::before {
    top: 50px;
    left: 20px;
  }

  .cagri-karti__eylemler,
  .cagri-karti__eylemler .dugme {
    width: 100%;
  }
}