/* =========================================================================
   ETESIO UZAK BAĞLANTI — site düzeni
   Renk ve ölçü değerleri kimlik.css belirteçlerinden gelir, elle yazılmaz.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--yazi-govde);
  font-size: 17px;
  line-height: 1.65;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.018em;
  margin: 0;
  color: var(--metin);
}

p { margin: 0; }
a { color: var(--yesil-700); text-underline-offset: 3px; }
a:hover { color: var(--yesil-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) a { color: var(--yesil-300); }
  :root:not([data-tema="acik"]) a:hover { color: var(--yesil-200); }
}
:root[data-tema="koyu"] a { color: var(--yesil-300); }

img, svg { max-width: 100%; }

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

.cerceve {
  width: min(100% - var(--aralik-4) * 2, var(--olcu-genis));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- üst bar */
.ust-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.6) blur(14px);
  background: color-mix(in srgb, var(--zemin) 84%, transparent);
  border-bottom: 1px solid var(--kenar);
}
.ust-bar__ic { display: flex; align-items: center; gap: var(--aralik-4); height: 68px; }

.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--metin);
  text-decoration: none;
  white-space: nowrap;
}
.marka__isaret { width: 30px; height: 30px; flex: none; }

.gezinme { display: flex; align-items: center; gap: var(--aralik-3); margin-inline-start: auto; }
.gezinme a { color: var(--metin-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.gezinme a:hover { color: var(--yesil-600); }

/* ------------------------------------------------------------------ düğme */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--kose-kucuk);
  border: 1px solid transparent;
  font-family: var(--yazi-govde);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;   /* dar ekranda "Giris yap" iki satira boluniyordu */
  transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme--ana { background: var(--yesil-600); color: #fff; box-shadow: var(--golge-1); }
.dugme--ana:hover { background: var(--yesil-700); color: #fff; transform: translateY(-1px); }
.dugme--cizgi { background: transparent; border-color: var(--kenar-2); color: var(--metin); }
.dugme--cizgi:hover { border-color: var(--yesil-500); color: var(--yesil-600); }
.dugme--bakir { background: transparent; border-color: var(--bakir-500); color: var(--bakir-600); }
.dugme--bakir:hover { background: var(--bakir-600); border-color: var(--bakir-600); color: #fff; }
.dugme--genis { width: 100%; }
.dugme[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .dugme--bakir { color: var(--bakir-400); border-color: var(--bakir-500); }
}

/* ------------------------------------------------------------ giriş bölümü */
.giris { position: relative; overflow: hidden; padding-block: var(--aralik-6) var(--aralik-6); }

/* Düz gri zemin yerine katmanlı yeşil: geniş yumuşak ışık artı ince nokta
   ızgara. Izgara ağ/bağlantı hissini taşır, dikkat çekmeden. */
.giris::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 760px;
  background:
    radial-gradient(58% 52% at 20% 6%, color-mix(in srgb, var(--yesil-200) 60%, transparent), transparent 70%),
    radial-gradient(46% 46% at 88% 24%, color-mix(in srgb, var(--bakir-400) 20%, transparent), transparent 68%);
  pointer-events: none;
}
.giris::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--yesil-700) 15%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
  pointer-events: none;
}
.giris__ic { position: relative; z-index: 1; display: grid; gap: var(--aralik-6); align-items: center; }

.etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--yesil-100) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--yesil-500) 26%, transparent);
  color: var(--yesil-700);
  font-size: 13.5px;
  font-weight: 600;
}
.etiket__nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--yesil-500); flex: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .etiket {
    background: color-mix(in srgb, var(--yesil-800) 62%, transparent);
    color: var(--yesil-200);
  }
}

.giris h1 {
  font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.9rem);
  margin-block: var(--aralik-3);
  max-width: 15ch;
}
.giris__alt { font-size: 19px; color: var(--metin-2); max-width: 46ch; }
.giris__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aralik-2); margin-top: var(--aralik-4); }

.surum-rozeti {
  font-family: var(--yazi-tek);
  font-size: 13px;
  color: var(--metin-3);
  padding: 8px 12px;
  border: 1px dashed var(--kenar-2);
  border-radius: var(--kose-kucuk);
}

/* --------------------------------------------- program penceresi çizimi */
/* Ekran görüntüsü yerine çizim: küçültülünce bulanıklaşmaz, temayı izler ve
   ürünün kendi bölüm adlarını gösterir. */
.pencere {
  border-radius: var(--kose-buyuk);
  background: var(--kart);
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-3);
  overflow: hidden;
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}
.pencere__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--aralik-3);
  background: var(--yesil-700);
}
.pencere__bar b { font-family: var(--yazi-baslik); font-weight: 600; font-size: 13.5px; color: #EAF6EF; }
.pencere__dugmeler { margin-inline-start: auto; display: flex; gap: 7px; opacity: .6; }
.pencere__dugmeler i { width: 11px; height: 2px; background: #EAF6EF; display: block; }
.pencere__govde { display: grid; grid-template-columns: 1fr; }
.pencere__sol { padding: var(--aralik-4) var(--aralik-3); border-bottom: 1px solid var(--kenar); }
.pencere__sag { padding: var(--aralik-4) var(--aralik-3); background: var(--zemin-2); }

.alan + .alan { margin-top: var(--aralik-4); }
.alan-adi {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: 7px;
}
.alan-deger { font-family: var(--yazi-tek); font-size: 23px; font-weight: 600; color: var(--bakir-600); }
.alan-sifre { font-family: var(--yazi-tek); font-size: 23px; letter-spacing: .16em; color: var(--metin-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .alan-deger { color: var(--bakir-400); }
}

.sahte-giris {
  height: 42px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--kose-kucuk);
  background: var(--kart);
  display: flex;
  align-items: center;
  padding-inline: 13px;
  font-family: var(--yazi-tek);
  font-size: 15px;
  color: var(--metin-3);
  margin-bottom: var(--aralik-2);
}
.sahte-dugme {
  height: 42px;
  border-radius: var(--kose-kucuk);
  background: var(--yesil-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- bölümler */
.bolum { padding-block: var(--aralik-6); }
.bolum--vurgulu { background: var(--zemin-2); border-block: 1px solid var(--kenar); }
.bolum__baslik { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); max-width: 20ch; }
.bolum__giris { color: var(--metin-2); max-width: var(--olcu-metin); margin-top: var(--aralik-2); }

/* --------------------------------------------------------- nasıl çalışır */
/* Üç kart değil: numaralı akış, aralarında bağlantı çizgisi. */
.akis { display: grid; gap: var(--aralik-4); margin-top: var(--aralik-5); counter-reset: adim; }
.adim { position: relative; padding-inline-start: 62px; counter-increment: adim; }
.adim::before {
  content: counter(adim);
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--yazi-baslik);
  font-size: 17px;
  font-weight: 600;
  color: var(--yesil-700);
  background: var(--kart);
  border: 1.5px solid var(--yesil-300);
}
.adim h3 { font-size: 18px; margin-bottom: 5px; }
.adim p { color: var(--metin-2); font-size: 15.5px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .adim::before { color: var(--yesil-200); border-color: var(--yesil-600); }
}

/* -------------------------------------------------------------- yetenekler */
/* Kutulanmış kart yerine ince sol çizgili liste; sayı üç değil beş. */
.yetenekler { display: grid; gap: var(--aralik-4) var(--aralik-5); margin-top: var(--aralik-5); }
.yetenek { border-inline-start: 2px solid var(--yesil-300); padding-inline-start: var(--aralik-3); }
.yetenek h3 { font-size: 17px; margin-bottom: 5px; }
.yetenek p { color: var(--metin-2); font-size: 15.5px; }

/* ---------------------------------------------------------------- indirme */
.indirme-duzen { display: grid; gap: var(--aralik-4); margin-top: var(--aralik-5); align-items: start; }
.paket {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  padding: var(--aralik-4);
  box-shadow: var(--golge-1);
}
.paket--one-cikan {
  border-color: color-mix(in srgb, var(--yesil-500) 45%, transparent);
  box-shadow: var(--golge-2);
}
.paket__ust { display: flex; align-items: center; gap: var(--aralik-2); margin-bottom: var(--aralik-3); }
.paket__ust h3 { font-size: 19px; }
.paket__isaret { width: 28px; height: 28px; flex: none; color: var(--yesil-600); }
.paket p { color: var(--metin-2); font-size: 15px; }
.paket__eylem { margin-top: var(--aralik-3); display: grid; gap: var(--aralik-2); }

.kunye {
  margin-top: var(--aralik-3);
  border-top: 1px solid var(--kenar);
  padding-top: var(--aralik-3);
  display: grid;
  gap: 9px;
}
.kunye__satir { display: flex; gap: var(--aralik-2); font-size: 13.5px; align-items: baseline; }
.kunye__ad { color: var(--metin-3); min-width: 92px; flex: none; }
.kunye__deger { font-family: var(--yazi-tek); color: var(--metin-2); word-break: break-all; font-size: 12.5px; }

.uyari-kutu {
  margin-top: var(--aralik-3);
  padding: var(--aralik-2) var(--aralik-3);
  border-radius: var(--kose-kucuk);
  background: color-mix(in srgb, var(--bakir-400) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--bakir-500) 34%, transparent);
  color: var(--metin-2);
  font-size: 14px;
}

/* ------------------------------------------------------------ sürüm notları */
.notlar { margin-top: var(--aralik-5); }
.not-satir {
  display: grid;
  gap: var(--aralik-2) var(--aralik-4);
  padding-block: var(--aralik-3);
  border-top: 1px solid var(--kenar);
}
.not-satir:last-child { border-bottom: 1px solid var(--kenar); }
.not-satir__sol { display: flex; align-items: baseline; gap: var(--aralik-2); flex-wrap: wrap; }
.not-surum { font-family: var(--yazi-tek); font-size: 15px; font-weight: 600; color: var(--yesil-700); }
.not-tarih { font-size: 13px; color: var(--metin-3); }
.not-satir__metin { color: var(--metin-2); font-size: 15.5px; }
.simdiki {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-700);
  background: var(--yesil-100);
  border-radius: 999px;
  padding: 3px 9px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .not-surum { color: var(--yesil-300); }
  :root:not([data-tema="acik"]) .simdiki { color: var(--yesil-200); background: var(--yesil-800); }
}

/* ---------------------------------------------------------------- alt bilgi */
.alt-bilgi { background: var(--yesil-900); color: #C9DED3; padding-block: var(--aralik-5) var(--aralik-4); }
.alt-bilgi a { color: #DCEFE4; }
.alt-bilgi a:hover { color: #FFFFFF; }
.alt-bilgi__duzen { display: grid; gap: var(--aralik-4); }
.alt-bilgi h4 {
  color: #F1FAF5;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: var(--aralik-2);
}
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.alt-bilgi__kunye {
  margin-top: var(--aralik-4);
  padding-top: var(--aralik-3);
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-size: 13px;
  color: #9FBCAD;
  display: grid;
  gap: 5px;
}

/* ================================================================= CİHAZLAR */
/* Tek düzeni büyütüp küçültmek yetmez; her sınıfın kendi yerleşimi var.
   Aşağıdaki taban MOBİL: tek sütun, düz pencere, kısaltılmış gezinme. */
.gezinme .gezinme--dar-gizle,
.gezinme .gezinme--cok-dar-gizle { display: none; }
/* Ust bar 390px'te 26px tasiyordu: marka + iki baglanti + dugme sigmiyor.
   Gezinmedeki "Indir", giris bolumundeki buyuk indirme dugmesinin
   kopyasi; dar ekranda o dusurulur, marka ve giris dugmesi kalir. */
.ust-bar__ic { gap: var(--aralik-2); }

/* Büyük mobil */
@media (min-width: 480px) {
  .gezinme .gezinme--dar-gizle,
  .gezinme .gezinme--cok-dar-gizle { display: inline; }
  .ust-bar__ic { gap: var(--aralik-4); }
}

/* Tablet */
@media (min-width: 768px) {
  .akis { grid-template-columns: repeat(3, 1fr); }
  /* Bağlantı çizgisi ancak adımlar yan yana dizilince anlam taşır. */
  .adim:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    inset-inline-start: 48px;
    inset-inline-end: -12px;
    height: 1px;
    background: linear-gradient(to right, var(--yesil-300), transparent);
  }
  .yetenekler { grid-template-columns: 1fr 1fr; }
  .indirme-duzen { grid-template-columns: 1.15fr .85fr; }
  .not-satir { grid-template-columns: 240px 1fr; }
  .alt-bilgi__duzen { grid-template-columns: 1.5fr 1fr 1fr; }
  .pencere__govde { grid-template-columns: 1.15fr .85fr; }
  .pencere__sol { border-bottom: 0; border-inline-end: 1px solid var(--kenar); }
}

/* Web: asimetrik giriş bölümü ve eğimli pencere burada açılır */
@media (min-width: 1024px) {
  .giris__ic { grid-template-columns: 1.06fr .94fr; }
  .giris { padding-block: var(--aralik-7) var(--aralik-6); }
  .pencere { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
  .pencere:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg); }
}

/* Masaüstü: okuma genişliği korunur, boşluk artar */
@media (min-width: 1440px) {
  body { font-size: 17.5px; }
  .bolum { padding-block: var(--aralik-7); }
}

/* Dokunmatik: hedefler büyür, imleçle açılan efektler kapanır.
   1024px genişliğindeki bir dokunmatik ekran, aynı genişlikteki
   dizüstünden farklı davranmalı. */
@media (hover: none) and (pointer: coarse) {
  .dugme { padding: 15px 24px; min-height: 48px; }
  .gezinme a { padding-block: 8px; }
  .pencere, .pencere:hover { transform: none; }
}

/* Hareket azaltma isteniyorsa eğim tamamen kalkar. */
@media (prefers-reduced-motion: reduce) {
  .pencere, .pencere:hover { transform: none; }
}