/* Etesio Cihaz Yönetim — tanıtım sayfası
   Renk ve ölçü değerleri elle yazılmaz; hepsi kimlik.css'ten gelir.
   Karakter "yoğun": sıkı yerleşim, panel hissi, düz derinlik. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--yazi-1);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--yazi-baslik);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: inherit; }

.atla {
  position: absolute;
  left: -9999px;
}
.atla:focus {
  left: var(--aralik-3);
  top: var(--aralik-3);
  z-index: 10;
  background: var(--ana);
  color: var(--ana-ustu);
  padding: var(--aralik-2) var(--aralik-3);
  border-radius: var(--kose-orta);
}

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

.ust {
  border-bottom: var(--kenar);
  background: var(--yuzey);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ust-ic {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--aralik-3) var(--kenar-bosluk);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aralik-3);
  flex-wrap: wrap;
}

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

/* Marka imi: dört kareli bir filo simgesi — dört cihaz, biri ayrı renkte.
   Emoji kullanılmaz. Kareler gölgeyle çizilir; geçişli renk yok, sayfanın
   hiçbir yerinde yok. Sağ ve alt boşluk gölgelerin yerini ayırır. */
.marka-im {
  width: 7px; height: 7px;
  flex: 0 0 7px;
  margin: 0 11px 11px 0;
  background: var(--ana);
  box-shadow:
    11px 0 0 var(--ana),
    0 11px 0 var(--ana),
    11px 11px 0 var(--ikincil);
}

.marka-ad { font-family: var(--yazi-baslik); font-size: var(--yazi-2); }
.marka-ad b { font-weight: 700; }

.ust-sag { display: flex; align-items: center; gap: var(--aralik-2); flex-wrap: wrap; }

.rozet {
  font-size: 0.82rem;
  color: var(--soluk);
  border: var(--kenar);
  border-radius: var(--kose-tam);
  padding: 2px var(--aralik-2);
  white-space: nowrap;
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--aralik-2) var(--aralik-4);
  background: var(--ana);
  color: var(--ana-ustu);
  text-decoration: none;
  border-radius: var(--kose-orta);
  border: 1px solid transparent;
  font-family: var(--yazi-baslik);
  white-space: nowrap;
}
.dugme:hover { background: var(--ana-koyu); color: var(--vurgu-ustu); }

.dugme-duz {
  background: transparent;
  color: var(--metin);
  border: var(--kenar);
  border-radius: var(--kose-kucuk);
}
.dugme-duz:hover { background: var(--ana-acik); color: var(--metin); }

/* --- Giriş bölümü ---------------------------------------------------- */

.konsol {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--aralik-7) var(--kenar-bosluk) var(--aralik-6);
  display: grid;
  gap: var(--aralik-6);
}

.ust-etiket {
  margin: 0 0 var(--aralik-3);
  color: var(--ana-koyu);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
}

h1 { font-size: var(--yazi-6); }

.giris {
  font-size: var(--yazi-2);
  color: var(--soluk);
  margin: var(--aralik-4) 0 var(--aralik-5);
}

/* Künye: pazarlama kartı değil, teknik künye satırları. */
.kunye { margin: 0; display: grid; gap: 0; border-top: var(--kenar); }
.kunye > div {
  display: flex;
  justify-content: space-between;
  gap: var(--aralik-3);
  padding: var(--aralik-2) 0;
  border-bottom: var(--kenar);
}
.kunye dt { color: var(--soluk); margin: 0; }
.kunye dd { margin: 0; text-align: right; }

/* --- Örnek panel görünümü -------------------------------------------- */

.ornek {
  margin: 0;
  border: var(--kenar);
  border-radius: var(--kose-orta);
  background: var(--yuzey);
  overflow: hidden;
}

.ornek-baslik {
  padding: var(--aralik-2) var(--aralik-3);
  border-bottom: var(--kenar);
  font-family: var(--yazi-baslik);
  font-size: 0.85rem;
}
.ornek-baslik span { color: var(--soluk); font-weight: normal; }

.filo { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.filo th, .filo td {
  text-align: left;
  padding: var(--aralik-2) var(--aralik-3);
  border-bottom: var(--kenar);
  white-space: nowrap;
}
.filo th { color: var(--soluk); font-weight: normal; font-size: 0.8rem; }
.filo tbody tr:last-child td { border-bottom: 0; }
.filo .sag { text-align: right; }

.nokta {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: var(--kose-tam);
  margin-right: var(--aralik-1);
  vertical-align: middle;
}
.nokta.acik { background: var(--ana); }
.nokta.uyari { background: var(--vurgu); }
.nokta.kapali { background: var(--cizgi); border: 1px solid var(--soluk); }

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

.bolum {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--aralik-7) var(--kenar-bosluk);
}
.bolum.ayrim { border-top: var(--kenar); border-bottom: var(--kenar); }

.bolum h2 { font-size: var(--yazi-4); margin-bottom: var(--aralik-4); }
.bolum-giris { color: var(--soluk); margin: 0 0 var(--aralik-5); }

/* Yetenekler: üç kart değil; iki sütuna akan yoğun liste. */
.yetenek { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.yetenek li { padding: var(--aralik-3) 0; border-top: var(--kenar); }
.yetenek h3 { font-size: var(--yazi-1); margin-bottom: 2px; }
.yetenek p { margin: 0; color: var(--soluk); font-size: 0.92rem; max-width: none; }

/* --- İndirme ---------------------------------------------------------- */

.indirme-kutu {
  border: var(--kenar);
  border-radius: var(--kose-orta);
  background: var(--yuzey);
  padding: var(--aralik-4);
}

.indirme-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aralik-4);
  flex-wrap: wrap;
}

.indirme-bilgi { min-width: 0; }
.indirme-bilgi h3 { font-size: var(--yazi-2); }
.indirme-bilgi p { margin: var(--aralik-1) 0 0; color: var(--soluk); font-size: 0.88rem; }

.ozet {
  margin-top: var(--aralik-3);
  padding-top: var(--aralik-3);
  border-top: var(--kenar);
  font-size: 0.78rem;
  color: var(--soluk);
  word-break: break-all;
}

.bekleniyor { color: var(--soluk); margin: 0; }
.uyari-metin { color: var(--vurgu); margin: 0; }

.kucuk { font-size: 0.85rem; color: var(--soluk); margin-top: var(--aralik-3); }

/* --- Sürüm notları ---------------------------------------------------- */

.surum-kayit { border-top: var(--kenar); padding: var(--aralik-4) 0; }
.surum-basi { display: flex; align-items: baseline; gap: var(--aralik-3); flex-wrap: wrap; }
.surum-no { font-family: var(--yazi-baslik); font-size: var(--yazi-2); }
.surum-tarih { color: var(--soluk); font-size: 0.82rem; }
.surum-not { margin: var(--aralik-2) 0 0; white-space: pre-wrap; }

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

.alt { border-top: var(--kenar); background: var(--yuzey); margin-top: var(--aralik-7); }
.alt-ic {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--aralik-5) var(--kenar-bosluk);
  display: flex;
  justify-content: space-between;
  gap: var(--aralik-3);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--soluk);
}
.alt-ic p { margin: 0; }
.imza { font-size: 0.78rem; opacity: 0.75; }

/* --- Cihaz sınıfları -------------------------------------------------- */

/* Tablet: giriş bölümü iki sütuna ayrılır, yetenekler ikili akar. */
@media (min-width: 768px) {
  .yetenek { grid-template-columns: repeat(2, 1fr); column-gap: var(--aralik-6); }
}

/* Web: örnek görünüm metnin yanına gelir. */
@media (min-width: 1024px) {
  .konsol { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  /* Künye tek sütun kalır: iki sütuna bölününce "İşletim sistemi" ve
     "30 gün, kart istenmez" satır ortasından kırılıyordu (ölçüldü). */
}

/* Masaüstü: okuma genişliği korunur, satırlar uzamaz. */
@media (min-width: 1440px) {
  h1 { font-size: calc(var(--yazi-6) * 1.15); }
  .yetenek { grid-template-columns: repeat(4, 1fr); }
}

/* Dokunmatik ekranda üzerine gelme durumu yanıltıcı olur. */
@media (hover: none) {
  .dugme:hover { background: var(--ana); color: var(--ana-ustu); }
  .dugme-duz:hover { background: transparent; color: var(--metin); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Örnek tablo dar ekranda kendi kutusunda kayar. Sayfanın kendisi yatay
   kaymaz; kırpmak ise satırın sonunu kullanıcıdan gizlerdi. */
.filo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.filo-kaydir:focus-visible { outline: 2px solid var(--ana); outline-offset: -2px; }