/* ------------------------------------------------------------------
   Semwebs Cloud Phone — ortak stil
   Hedef ekranlar: 240x320 (QVGA), 128x160 (QQVGA), 240x240, 320x240

   NOT: Cloud Phone'da prefers-color-scheme HER ZAMAN "light" doner.
   Bu yuzden medya sorgusu kullanmiyoruz; koyu tema sabit yaziliyor.
   Kucuk ve dusuk ppi ekranlarda yuksek kontrast sart.
   ------------------------------------------------------------------ */

:root{
  --zemin:#0B0D10;
  --yuzey:#171B21;
  --yuzey-sec:#243040;
  --yazi:#EDEFF2;
  --yazi-soluk:#98A0AA;
  --cizgi:#252B33;
  --vurgu:#4DA3FF;
  --okunmamis:#FFB84D;
  --hata:#FF6B6B;
  --iyi:#4DD68C;

  --kenar:8px;          /* QVGA icin asgari guvenli kenar */
  --baslik-y:40px;      /* QVGA baslik yuksekligi */
  --ayak-y:22px;
}

/* QQVGA — 128x160: her sey kuculur */
@media (max-width:200px){
  :root{ --kenar:4px; --baslik-y:20px; --ayak-y:18px; }
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:var(--zemin);
  color:var(--yazi);
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.35;
  overflow:hidden;              /* kaydirma listeye ait, sayfaya degil */
  -webkit-text-size-adjust:100%;
}
@media (max-width:200px){ html,body{ font-size:12px; } }

/* ---------- iskelet: baslik / govde / ayak ---------- */

.ekran{
  display:flex;
  flex-direction:column;
  height:100%;
}

.baslik{
  flex:0 0 auto;
  min-height:var(--baslik-y);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:0 var(--kenar);
  background:var(--yuzey);
  border-bottom:1px solid var(--cizgi);
}
.baslik h1{
  font-size:1.05em;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.baslik .sayac{
  flex:0 0 auto;
  font-size:.78em;
  font-weight:700;
  color:var(--zemin);
  background:var(--okunmamis);
  border-radius:9px;
  padding:1px 6px;
}

.govde{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

.ayak{
  flex:0 0 auto;
  height:var(--ayak-y);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--kenar);
  background:var(--yuzey);
  border-top:1px solid var(--cizgi);
  font-size:.72em;
  font-weight:500;
  color:var(--yazi-soluk);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.ayak span{ white-space:nowrap; }
.ayak .orta{ color:var(--vurgu); }

/* ---------- liste ---------- */

.satir{
  padding:7px var(--kenar);
  border-bottom:1px solid var(--cizgi);
  cursor:default;
}
/* D-pad odagi. :focus degil cunku odagi JS yonetiyor. */
.satir.odak{
  background:var(--yuzey-sec);
  box-shadow:inset 3px 0 0 var(--vurgu);
}

.satir-ust{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
}
.satir-kim{
  flex:1 1 auto;
  font-weight:700;
  font-size:.95em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.satir.yeni .satir-kim{ color:var(--okunmamis); }
.satir-saat{
  flex:0 0 auto;
  font-size:.72em;
  color:var(--yazi-soluk);
  font-variant-numeric:tabular-nums;
}
.satir-onizleme{
  font-size:.82em;
  color:var(--yazi-soluk);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}
.satir-kaynak{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  margin-right:5px;
  vertical-align:middle;
}
.kaynak-whatsapp{ background:var(--iyi); }
.kaynak-gmail{ background:var(--hata); }
.kaynak-diger{ background:var(--yazi-soluk); }

/* ---------- mesaj detayi ---------- */

.detay{ padding:var(--kenar); }
.detay-kim{ font-weight:700; font-size:1em; }
.detay-ust{
  font-size:.75em;
  color:var(--yazi-soluk);
  margin:2px 0 9px;
  padding-bottom:7px;
  border-bottom:1px solid var(--cizgi);
}
.detay-govde{
  font-size:.92em;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ---------- giris ekrani ---------- */

.giris{
  padding:var(--kenar);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
  justify-content:center;
  text-align:center;
}
.giris p{ font-size:.85em; color:var(--yazi-soluk); }

.kod-kutu{
  font-family:"Roboto Mono",monospace;
  font-size:1.3em;
  font-weight:700;
  letter-spacing:.14em;
  background:var(--yuzey);
  border:2px solid var(--vurgu);
  border-radius:4px;
  padding:9px 6px;
  color:var(--yazi);
  min-height:1.6em;
  font-variant-numeric:tabular-nums;
}
.kod-kutu.bos{ color:var(--yazi-soluk); border-color:var(--cizgi); }

/* ---------- durum mesajlari ---------- */

.durum{
  padding:calc(var(--kenar) * 2) var(--kenar);
  text-align:center;
  color:var(--yazi-soluk);
  font-size:.86em;
}
.durum.hata{ color:var(--hata); }
.durum b{ display:block; color:var(--yazi); margin-bottom:4px; font-size:1.05em; }

/* Cloud Phone ~20 FPS: animasyon gecikmeyi buyutur, kapatiyoruz. */
*,*::before,*::after{
  animation:none !important;
  transition:none !important;
}

/* ---------- profil fotografi (talep uzerine) ---------- */

.foto-kap{ margin:6px 0 9px; }
.foto{
  display:block;
  width:72px; height:72px;
  border-radius:4px;
  border:1px solid var(--cizgi);
  object-fit:cover;
  background:var(--sunken);
}
@media (max-width:200px){
  .foto{ width:48px; height:48px; }
}
.foto-durum{
  font-size:.78em;
  color:var(--yazi-soluk);
  padding:3px 0;
}