/* Aşkın Dijital Pazarlama — site stilleri
   Tek stil dosyası. Renkler marka paletinden türetilir; değerleri sayfalara gömmeyin. */

/* ---------- Yazı tipleri (yerel, OFL) ---------- */

@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tasarım belirteçleri ---------- */

:root {
  /* Marka paleti */
  --yesil: #0B3D2E;
  --altin: #D4AF37;
  --krem: #F8F7F2;
  --siyah: #1A1A1A;

  /* Türetilmiş tonlar (yalnız marka renklerinden) */
  --yesil-derin: color-mix(in oklab, var(--yesil) 78%, var(--siyah));
  --yesil-yuzey: color-mix(in oklab, var(--yesil) 90%, var(--krem));
  --altin-cizgi: color-mix(in srgb, var(--altin) 42%, transparent);
  --altin-kenar: color-mix(in srgb, var(--altin) 70%, transparent);
  --altin-hale: color-mix(in srgb, var(--altin) 12%, transparent);
  --altin-parlak: color-mix(in oklab, var(--altin) 82%, var(--krem));
  --krem-ikincil: color-mix(in srgb, var(--krem) 80%, var(--yesil));
  --krem-soluk: color-mix(in srgb, var(--krem) 66%, var(--yesil));
  --siyah-ikincil: color-mix(in srgb, var(--siyah) 74%, var(--krem));
  --belge-cizgi: color-mix(in srgb, var(--yesil) 16%, var(--krem));
  --krem-yuzey: color-mix(in srgb, var(--yesil) 4%, var(--krem));

  /* Yazı */
  --yazi-baslik: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --yazi-metin: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --y-kucuk: 0.875rem;
  --y-govde: 1.0625rem;
  --y-buyuk: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  --y-slogan: clamp(0.8125rem, 0.74rem + 0.3vw, 0.9375rem);
  --y-h2: clamp(1.375rem, 1.12rem + 1.1vw, 1.875rem);
  --y-h1: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  --y-giris: clamp(1.625rem, 1.15rem + 2.4vw, 3rem);

  /* Boşluk ölçeği */
  --b-1: 0.25rem;
  --b-2: 0.5rem;
  --b-3: 0.75rem;
  --b-4: 1rem;
  --b-5: 1.5rem;
  --b-6: 2rem;
  --b-7: 3rem;
  --b-8: 4.5rem;
  --b-9: 6rem;
  --kenar: 1rem;

  /* Biçim */
  --r-kucuk: 12px;
  --r: 24px;
  --r-tam: 999px;
  --dokunma: 44px;
  --icerik: 72rem;
  --satir: 68ch;
  --gecis: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48rem) {
  :root { --kenar: 2rem; }
}

@media (min-width: 80rem) {
  :root { --kenar: 3rem; }
}

/* ---------- Temel ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--yesil);
  color: var(--krem);
  font-family: var(--yazi-metin);
  font-size: var(--y-govde);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-weight: 500;
  line-height: 1.25;
  /* Cinzel is a capitals face: uppercasing through CSS keeps Turkish İ/I
     correct because every page and section declares its lang. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--gecis), background-color var(--gecis),
    border-color var(--gecis), text-decoration-color var(--gecis),
    transform var(--gecis);
}

:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--altin);
  color: var(--yesil);
}

.kap {
  width: 100%;
  max-width: calc(var(--icerik) + 2 * var(--kenar));
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* İçeriğe geç bağlantısı: yalnız klavye odağında görünür */
.atla {
  position: absolute;
  top: var(--b-3);
  left: var(--b-3);
  z-index: 10;
  padding: var(--b-3) var(--b-4);
  border-radius: var(--r-kucuk);
  background: var(--altin);
  color: var(--yesil);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.atla:focus-visible {
  transform: none;
  outline-color: var(--krem);
}

/* ---------- Üst bar ---------- */

.ust {
  position: relative;
  border-bottom: 1px solid var(--altin-cizgi);
  background: var(--yesil);
}

.ust__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  min-height: 76px;
  padding-block: var(--b-3);
}

.ust__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  flex-shrink: 0;
  border-radius: var(--r-kucuk);
  text-decoration: none;
}

/* 48rem altında yazılı kilit okunmayacak kadar küçülür: kalın çizgili küçük anka
   + "AŞKIN". Tam kilit görselden gizlenir ama alt metni ekran okuyucuda kalır. */
.ust__logo-tam {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ust__logo-kisa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ust__logo-anka {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--altin);
  -webkit-mask: url("/assets/img/anka-kucuk.svg") center / contain no-repeat;
  mask: url("/assets/img/anka-kucuk.svg") center / contain no-repeat;
}

.ust__logo-ad {
  color: var(--altin);
  font-family: var(--yazi-baslik);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.ust--menulu .ust__ic { gap: var(--b-2); }

/* Çok dar ekranda (320 px) ana sayfa menüsü sığsın diye yalnız anka kalır */
@media (max-width: 22.4rem) {
  .ust--menulu .ust__logo-ad { display: none; }
}

@media (min-width: 48rem) {
  .ust__ic { min-height: 88px; }

  .ust__logo-tam {
    position: static;
    width: auto;
    height: 60px;
    overflow: visible;
    clip: auto;
  }

  .ust__logo-kisa { display: none; }
}

.ust__sag {
  display: flex;
  align-items: center;
  gap: var(--b-2);
}

.ust__menu {
  display: flex;
  align-items: center;
}

.ust__baglanti {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 0.35rem;
  border-radius: var(--r-kucuk);
  color: var(--krem-ikincil);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.ust__baglanti:hover {
  color: var(--altin-parlak);
}

.ust__geri span {
  margin-right: 0.3em;
}

@media (min-width: 48rem) {
  .ust__sag { gap: var(--b-4); }
  .ust__baglanti {
    padding: 0 var(--b-3);
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
  }
}

@media (min-width: 80rem) {
  .ust__baglanti { font-size: 1rem; }
}

.dil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dokunma);
  min-height: var(--dokunma);
  padding: 0 var(--b-4);
  border: 1px solid var(--altin-kenar);
  border-radius: var(--r-tam);
  color: var(--krem);
  font-size: var(--y-kucuk);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-decoration: none;
}

.ust__sag .dil { padding: 0 var(--b-3); }

@media (min-width: 48rem) {
  .ust__sag .dil { padding: 0 var(--b-4); }
}

.dil:hover {
  border-color: var(--altin);
  background: var(--altin-hale);
  color: var(--altin-parlak);
}

/* ---------- Giriş (hero) ---------- */

.giris {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

.giris::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 32%, var(--altin-hale), transparent 70%),
    linear-gradient(to bottom, var(--yesil), var(--yesil-derin));
}

.giris__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-5);
  padding-block: var(--b-6) var(--b-8);
}

.giris__anka {
  display: block;
  height: clamp(120px, 20vh, 220px);
  height: clamp(120px, 20svh, 220px);
  aspect-ratio: 194 / 373;
  background: var(--altin);
  -webkit-mask: url("/assets/img/anka.svg") center / contain no-repeat;
  mask: url("/assets/img/anka.svg") center / contain no-repeat;
}

/* Slogan: küçük üst etiket; dar ekranda kelime aralarında kırılır, ortalı kalır */
.slogan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.5em;
  font-family: var(--yazi-baslik);
  font-size: var(--y-slogan);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--altin);
}

.slogan > span {
  white-space: nowrap;
}

.slogan .slogan__nokta {
  color: var(--altin-kenar);
  letter-spacing: 0;
}

.giris__baslik {
  max-width: 22ch;
  text-wrap: balance;
  color: var(--krem);
  font-size: var(--y-giris);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.susleme {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  width: min(240px, 64%);
}

.susleme::before,
.susleme::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--altin));
}

.susleme::after {
  background: linear-gradient(to left, transparent, var(--altin));
}

.susleme span {
  width: 7px;
  height: 7px;
  border: 1px solid var(--altin);
  transform: rotate(45deg);
}

.giris__metin {
  max-width: 36rem;
  text-wrap: pretty;
  color: var(--krem-ikincil);
  font-size: var(--y-buyuk);
  font-weight: 400;
  line-height: 1.7;
}

@media (min-width: 48rem) {
  .giris__ic {
    gap: var(--b-5);
    padding-block: var(--b-7) var(--b-8);
  }
}

/* ---------- Değerler satırı ---------- */

.degerler {
  padding-block: 0 var(--b-8);
  background: var(--yesil-derin);
}

.degerler__liste {
  display: grid;
  gap: var(--b-6);
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

.deger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-2);
}

.deger::before {
  content: "";
  width: 40px;
  height: 1px;
  margin-bottom: var(--b-3);
  background: var(--altin);
}

.deger__baslik {
  color: var(--altin);
  font-size: 1.0625rem;
  letter-spacing: 0.12em;
}

.deger__metin {
  color: var(--krem-ikincil);
}

@media (min-width: 48rem) {
  .degerler__liste {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--b-4);
  }

  .deger__metin {
    font-size: 0.9375rem;
  }
}

@media (min-width: 64rem) {
  .degerler__liste { gap: var(--b-6); }
  .deger__metin { font-size: var(--y-govde); }
}

/* ---------- Bölümler ---------- */

.bolum {
  padding-block: var(--b-8);
}

/* Krem bölüm (Mobil uygulamalar, İletişim): açık zemin, koyu yeşil başlık, siyah
   tonlarında metin. Ana sayfa koyu temada da aynı kalır. Zemin ritmi: koyu ve krem
   bölümler art arda gelir, iki aynı zemin yan yana durmaz. */
.bolum--krem {
  background: var(--krem);
  color: var(--siyah);
  color-scheme: light;
}

.bolum--krem :focus-visible {
  outline-color: var(--yesil);
}

.bolum--krem .bolum__bas h2 {
  color: var(--yesil);
}

.bolum--krem .bolum__giris {
  color: var(--siyah-ikincil);
}

.bolum__bas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-4);
  margin-bottom: var(--b-6);
  text-align: center;
}

.bolum__bas h2 {
  color: var(--altin);
  font-size: var(--y-h2);
  letter-spacing: 0.12em;
}

.bolum__bas::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--altin);
}

.bolum__giris {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--krem-ikincil);
  font-weight: 400;
  font-size: var(--y-buyuk);
  text-align: center;
}

/* ---------- Uygulama kartları ---------- */

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--b-5);
  max-width: 60rem;
  margin-inline: auto;
}

.kart {
  display: flex;
  flex-direction: column;
  gap: var(--b-4);
  padding: var(--b-6) var(--b-5);
  border: 1px solid var(--altin-cizgi);
  border-radius: var(--r);
  background: var(--yesil-yuzey);
  transition: border-color var(--gecis), transform var(--gecis);
}

.kart:hover {
  border-color: var(--altin);
}

.kart__simge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

.kart__ad {
  color: var(--krem);
  font-size: 1.125rem;
  letter-spacing: 0.08em;
}

.kart__metin {
  color: var(--krem-ikincil);
  font-weight: 400;
}

.kart__baglantilar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-3) var(--b-5);
  margin-top: auto;
}

.kart__baglantilar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
}

.kart__magaza {
  padding: 0 var(--b-5);
  border-radius: var(--r-tam);
  background: var(--altin);
  color: var(--yesil);
  font-weight: 500;
  text-decoration: none;
}

.kart__magaza:hover {
  background: var(--altin-parlak);
}

.kart__gizlilik {
  color: var(--krem-ikincil);
  font-size: var(--y-kucuk);
  text-decoration-color: var(--altin-cizgi);
}

.kart__gizlilik:hover {
  color: var(--krem);
  text-decoration-color: var(--altin);
}

/* "Yakında" kartı: tek, ortalanmış, zarif */
.kart--yakinda {
  grid-column: 1 / -1;
  align-items: center;
  max-width: 34rem;
  width: 100%;
  margin-inline: auto;
  padding: var(--b-7) var(--b-5);
  text-align: center;
  background:
    radial-gradient(80% 70% at 50% 0%, var(--altin-hale), transparent 70%),
    var(--yesil-yuzey);
}

.kart--yakinda:hover {
  border-color: var(--altin-cizgi);
}

.rozet {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--b-4);
  border: 1px solid var(--altin);
  border-radius: var(--r-tam);
  color: var(--altin);
  font-size: var(--y-kucuk);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.kart--yakinda .kart__metin {
  max-width: 24rem;
  font-size: var(--y-buyuk);
  line-height: 1.6;
}

/* Krem zemindeki kartlar */
.bolum--krem .kart {
  border-color: var(--belge-cizgi);
  background: var(--krem-yuzey);
}

.bolum--krem .kart:hover {
  border-color: color-mix(in srgb, var(--yesil) 40%, var(--krem));
}

.bolum--krem .kart--yakinda {
  border-color: var(--altin-kenar);
  background:
    radial-gradient(80% 70% at 50% 0%, var(--altin-hale), transparent 70%),
    var(--krem-yuzey);
}

.bolum--krem .kart__ad {
  color: var(--yesil);
}

.bolum--krem .kart__metin,
.bolum--krem .kart__gizlilik {
  color: var(--siyah-ikincil);
}

.bolum--krem .kart__gizlilik:hover {
  color: var(--siyah);
}

.bolum--krem .rozet {
  color: var(--yesil);
}

/* ---------- İşletmelere özel yazılım ---------- */

/* Koyu bölüm; üstte girişteki gibi hafif altın hale */
.bolum--ozel {
  background:
    radial-gradient(70% 60% at 50% 0%, var(--altin-hale), transparent 70%),
    var(--yesil);
}

.ozel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-6);
}

.ozel .bolum__bas {
  margin-bottom: 0;
}

.ozel__metin {
  max-width: 40rem;
}

/* Örnek iş türleri: telefonda alt alta, orta ekranda 2×2, geniş ekranda tek sıra */
.ozel__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-3);
  width: 100%;
  max-width: 60rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kartlar üstten hizalı: işaretler her kartta aynı yükseklikte kalır */
.ozel__madde {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--b-3);
  padding: var(--b-5) var(--b-4);
  border: 1px solid var(--altin-cizgi);
  border-radius: var(--r);
  background: var(--yesil-yuzey);
  color: var(--krem);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: break-word;
}

/* Süslemedeki eşkenar dörtgen: ince altın çerçeve */
.ozel__isaret {
  width: 9px;
  height: 9px;
  border: 1px solid var(--altin);
  transform: rotate(45deg);
}

/* Kart adı: başlık öğesi ama Jost ile, büyük harfe çevrilmeden */
.ozel__ad {
  color: var(--krem);
  font-family: var(--yazi-metin);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.ozel__aciklama {
  color: var(--krem-ikincil);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 30rem) {
  .ozel__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .ozel__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--b-4);
  }

  .ozel__madde { padding: var(--b-6) var(--b-4); }
}

/* ---------- İletişim ---------- */

.iletisim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-5);
}

.iletisim .bolum__bas {
  margin-bottom: var(--b-2);
}

.eposta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 56px;
  padding: 0 var(--b-6);
  border-radius: var(--r-tam);
  background: var(--altin);
  color: var(--yesil);
  font-size: var(--y-buyuk);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.eposta:hover {
  background: var(--altin-parlak);
}

.eposta:focus-visible {
  outline-color: var(--krem);
  outline-offset: 4px;
  border-radius: var(--r-tam);
}

/* Krem zeminde: koyu yeşil hap, krem yazı */
.bolum--krem .eposta {
  background: var(--yesil);
  color: var(--krem);
}

.bolum--krem .eposta:hover {
  background: var(--yesil-derin);
}

.bolum--krem .eposta:focus-visible {
  outline-color: var(--yesil);
}

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

.alt {
  border-top: 1px solid var(--altin-cizgi);
  background: var(--yesil-derin);
  color: var(--krem-soluk);
  font-size: var(--y-kucuk);
}

.alt__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-3);
  padding-block: var(--b-6) var(--b-7);
  text-align: center;
}

.alt__marka {
  color: var(--krem-ikincil);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.alt__baglantilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--b-1) var(--b-4);
}

.alt__baglantilar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  color: var(--krem-ikincil);
  text-decoration-color: var(--altin-cizgi);
}

.alt__baglantilar a:hover {
  color: var(--altin-parlak);
  text-decoration-color: var(--altin);
}

.alt__kunye {
  max-width: 48rem;
  overflow-wrap: anywhere;
}

@media (min-width: 64rem) {
  .alt__ic {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--b-6);
    text-align: left;
  }

  .alt__kunye {
    grid-column: 1 / -1;
    max-width: none;
    padding-top: var(--b-3);
    border-top: 1px solid color-mix(in srgb, var(--altin) 18%, transparent);
  }
}

/* ---------- Belge sayfaları (KVKK, gizlilik) ---------- */

.belge {
  background: var(--krem);
  color: var(--siyah);
  color-scheme: light;
}

.belge :focus-visible {
  outline-color: var(--yesil);
}

.belge__metin {
  max-width: calc(var(--satir) + 2 * var(--kenar));
  margin-inline: auto;
  padding: var(--b-7) var(--kenar) var(--b-8);
  overflow-wrap: break-word;
}

.belge__ust {
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
  padding-bottom: var(--b-6);
  margin-bottom: var(--b-6);
  border-bottom: 1px solid var(--belge-cizgi);
}

.belge__ust-etiket {
  color: var(--siyah-ikincil);
  font-size: var(--y-kucuk);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.belge h1 {
  color: var(--yesil);
  font-size: var(--y-h1);
}

.belge__tarih {
  color: var(--siyah-ikincil);
  font-size: var(--y-kucuk);
}

.belge h2 {
  margin-top: var(--b-7);
  margin-bottom: var(--b-4);
  color: var(--yesil);
  font-size: 1.375rem;
  letter-spacing: 0.08em;
}

.belge h3 {
  margin-top: var(--b-6);
  margin-bottom: var(--b-3);
  color: var(--yesil);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
}

.belge p,
.belge ul,
.belge ol,
.belge dl {
  margin: 0 0 var(--b-4);
}

.belge ul,
.belge ol {
  padding-left: 1.25rem;
}

.belge li + li {
  margin-top: var(--b-2);
}

.belge li::marker {
  color: var(--yesil);
}

.belge a {
  color: var(--yesil);
  font-weight: 500;
  text-decoration-color: color-mix(in srgb, var(--yesil) 40%, transparent);
}

.belge a:hover {
  text-decoration-color: var(--yesil);
}

.belge strong {
  font-weight: 500;
}

/* Harfli madde listesi (KVKK md. 11) */
.harfli {
  list-style: none;
  padding-left: 0 !important;
}

.harfli li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
}

.harfli__harf {
  color: var(--yesil);
  font-weight: 500;
}

/* Bilgi kutusu (veri sorumlusu vb.) */
.bilgi {
  display: grid;
  gap: var(--b-2) var(--b-5);
  margin: 0 0 var(--b-4);
  padding: var(--b-5);
  border: 1px solid var(--belge-cizgi);
  border-radius: var(--r-kucuk);
  background: var(--krem-yuzey);
}

.bilgi dt {
  color: var(--siyah-ikincil);
  font-size: var(--y-kucuk);
  font-weight: 500;
}

.bilgi dd {
  margin: 0 0 var(--b-2);
  overflow-wrap: anywhere;
}

@media (min-width: 36rem) {
  .bilgi { grid-template-columns: max-content 1fr; align-items: baseline; }
  .bilgi dd { margin: 0; }
}

/* Dil atlama bağlantıları (TR + EN tek sayfada) */
.dil-atla {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-3);
}

.belge .dil-atla a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 var(--b-4);
  border: 1px solid color-mix(in srgb, var(--yesil) 55%, transparent);
  border-radius: var(--r-tam);
  font-size: var(--y-kucuk);
  text-decoration: none;
}

.belge .dil-atla a:hover {
  border-color: var(--yesil);
}

.dil-bolumu + .dil-bolumu {
  margin-top: var(--b-8);
  padding-top: var(--b-7);
  border-top: 1px solid var(--belge-cizgi);
}

.dil-bolumu > h2:first-child {
  margin-top: 0;
}

/* Gizlilik sayfasının İngilizce bölümü: kendi başlığı ve tarihi, alt başlıklar h3
   ama TR bölümündeki h2 ile aynı görünür */
.dil-bolumu__ust {
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
  margin-bottom: var(--b-6);
}

.belge .dil-bolumu__baslik {
  margin: 0;
  font-size: var(--y-h1);
  letter-spacing: 0.06em;
}

.belge .dil-bolumu--en h3 {
  margin-top: var(--b-7);
  margin-bottom: var(--b-4);
  font-size: 1.375rem;
  letter-spacing: 0.08em;
}

/* Koyu tema: belge sayfaları sitenin geri kalanıyla aynı koyu yeşile geçer */
@media (prefers-color-scheme: dark) {
  .belge {
    background: var(--yesil);
    color: var(--krem);
    color-scheme: dark;
  }

  .belge :focus-visible { outline-color: var(--altin); }

  .belge h1,
  .belge h2,
  .belge h3,
  .belge li::marker,
  .harfli__harf {
    color: var(--altin);
  }

  .belge__ust-etiket,
  .belge__tarih,
  .bilgi dt {
    color: var(--krem-soluk);
  }

  .belge__ust,
  .dil-bolumu + .dil-bolumu {
    border-color: var(--altin-cizgi);
  }

  .belge a {
    color: var(--altin-parlak);
    text-decoration-color: var(--altin-cizgi);
  }

  .belge a:hover { text-decoration-color: var(--altin); }

  .bilgi {
    border-color: var(--altin-cizgi);
    background: var(--yesil-yuzey);
  }

  .belge .dil-atla a { border-color: var(--altin-cizgi); }
  .belge .dil-atla a:hover { border-color: var(--altin); }
}

/* ---------- 404 ---------- */

.bulunamadi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-5);
  padding-block: var(--b-8);
  text-align: center;
}

.bulunamadi__kod {
  font-family: var(--yazi-baslik);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--altin);
}

.bulunamadi h1,
.bulunamadi h2 {
  font-size: var(--y-h2);
  color: var(--krem);
}

.bulunamadi__metin {
  max-width: 30rem;
  color: var(--krem-ikincil);
  font-weight: 400;
}

.bulunamadi__dil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-4);
}

/* İngilizce bölüm ikincil: küçük etiket başlık, tek satır metin, metin bağlantısı */
.bulunamadi__ikincil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-2);
  width: min(100%, 30rem);
  margin-top: var(--b-4);
  padding-top: var(--b-5);
  border-top: 1px solid var(--altin-cizgi);
  color: var(--krem-soluk);
  font-size: var(--y-kucuk);
}

.bulunamadi .bulunamadi__etiket {
  color: var(--krem-ikincil);
  font-family: var(--yazi-metin);
  font-size: var(--y-kucuk);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.bulunamadi__ikincil a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  color: var(--altin-parlak);
  text-decoration-color: var(--altin-cizgi);
}

.bulunamadi__ikincil a:hover {
  text-decoration-color: var(--altin);
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--b-6);
  border: 1px solid var(--altin);
  border-radius: var(--r-tam);
  color: var(--altin-parlak);
  font-weight: 500;
  text-decoration: none;
}

.dugme:hover {
  background: var(--altin);
  color: var(--yesil);
}

/* ---------- Hareket: yalnız istenirse, çok hafif ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes belir {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  .giris__ic > * {
    animation: belir 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .giris__ic > :nth-child(2) { animation-delay: 120ms; }
  .giris__ic > :nth-child(3) { animation-delay: 220ms; }
  .giris__ic > :nth-child(4) { animation-delay: 320ms; }
  .giris__ic > :nth-child(5) { animation-delay: 400ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

/* ---------- Baskı: belge sayfaları beyaz zeminde koyu metin ---------- */

@media print {
  .ust,
  .alt,
  .atla,
  .susleme,
  .dil-atla {
    display: none !important;
  }

  html,
  body,
  .belge {
    background: white !important;
    color: var(--siyah) !important;
  }

  .belge h1,
  .belge h2,
  .belge h3,
  .belge a,
  .belge li::marker,
  .harfli__harf,
  .belge__ust-etiket,
  .belge__tarih,
  .bilgi dt {
    color: var(--siyah) !important;
  }

  .belge__metin {
    max-width: none;
    padding: 0;
  }

  /* Ana sayfa: koyu zemin ve krem/altın yazılar baskıda beyaz zemin + koyu metin */
  .giris::before {
    display: none;
  }

  .giris,
  .degerler,
  .bolum,
  .kart {
    background: none !important;
    color: var(--siyah) !important;
  }

  .slogan,
  .slogan .slogan__nokta,
  .giris__baslik,
  .giris__metin,
  .deger__baslik,
  .deger__metin,
  .bolum__bas h2,
  .bolum__giris,
  .kart__metin,
  .kart__ad,
  .kart__gizlilik,
  .kart__magaza,
  .rozet,
  .eposta,
  .bulunamadi__kod,
  .bulunamadi h1,
  .bulunamadi h2,
  .bulunamadi__metin,
  .bulunamadi__ikincil,
  .bulunamadi__ikincil a,
  .dugme,
  .ozel__madde,
  .ozel__ad,
  .ozel__aciklama {
    color: var(--siyah) !important;
  }

  .giris__anka,
  .deger::before,
  .bolum__bas::after {
    background: var(--siyah) !important;
  }

  .eposta,
  .dugme,
  .rozet,
  .kart__magaza,
  .ozel__madde,
  .ozel__isaret {
    background: none !important;
    border: 1px solid var(--siyah) !important;
  }

  .giris__ic > * {
    animation: none !important;
  }

  .bilgi {
    background: none !important;
    border-color: var(--siyah-ikincil) !important;
  }

  .dil-bolumu + .dil-bolumu {
    break-before: page;
  }
}