/* =====================================================================
   Personel ekranı
   ---------------------------------------------------------------------
   Tek elle, ayakta, çoğu zaman güneş altında ve birkaç saniyede
   kullanılır. Ekranda aynı anda tek bir asıl eylem bulunur.
   ===================================================================== */

.sayfa {
  /* Yan boşluk, çentikli telefonlarda yatay tutuşta ekran kenarına
     sıkışmasın diye güvenli alanla birlikte büyür. */
  --kenar: max(16px, var(--guvenli-sol), var(--guvenli-sag));

  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--kenar) calc(40px + var(--guvenli-alt));
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 100dvh;
}

/* ---- Üst çubuk ----
   Kaydırırken ekranda kalır: marka her zaman görünür ve "oturumu kapat"
   sayfanın dibine inmeden erişilebilir kalır. Saydamlık ve bulanıklık
   kullanılmaz — güneş altında okunaklılığı düşürür. */
.ustcubuk {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  /* Sayfanın yatay dolgusunu aşarak tam genişlik kaplar */
  margin-inline: calc(-1 * var(--kenar));
  padding: calc(12px + var(--guvenli-ust)) var(--kenar) 12px;

  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

.ustcubuk-sag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ustcubuk .kisi {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: right;
}

.ustcubuk .ad {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ustcubuk .sicil {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--metin-silik);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Çok dar telefonlarda (≤340 px) sicil satırı adın kısalmasına yol açar;
   ad daha önemlidir. */
@media (max-width: 340px) {
  .ustcubuk .sicil { display: none; }
}

/* ---- Durum kartı (ekranın kahramanı) ---- */
.durum {
  border-radius: var(--r-buyuk);
  padding: 28px 26px;
  border: 1px solid;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--golge-2);
}

.durum::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -72px;
  bottom: -92px;
  border: 28px solid currentColor;
  border-radius: 50%;
  opacity: 0.055;
  pointer-events: none;
}

.durum--iceride  { background: linear-gradient(135deg, var(--giris-zemin), var(--yuzey)); border-color: color-mix(in srgb, var(--giris) 42%, var(--cizgi)); color: var(--giris); }
.durum--disarida { background: linear-gradient(135deg, var(--yuzey), var(--yuzey-vurgu)); border-color: var(--cizgi-belirgin); color: var(--metin-yumusak); }
.durum--molada   { background: linear-gradient(135deg, var(--mola-zemin), var(--yuzey)); border-color: color-mix(in srgb, var(--mola) 42%, var(--cizgi)); color: var(--mola); }

.durum-icerik {
  display: grid;
  gap: 5px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.durum .etiket {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.9;
}

.durum-nokta {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

/* Başlık dar telefonda taşmasın, geniş ekranda küçük kalmasın diye
   ekran genişliğiyle birlikte ölçeklenir. */
.durum .baslik {
  font-size: clamp(26px, 7.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.durum .aciklama {
  font-size: 14.5px;
  color: var(--metin-yumusak);
  margin-top: 6px;
}

.durum--iceride .aciklama,
.durum--molada .aciklama { color: inherit; opacity: 0.85; }

.durum-simge {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--yuzey) 78%, transparent);
  box-shadow: var(--golge-1);
  position: relative;
  z-index: 1;
}

.durum-simge svg { width: 29px; height: 29px; }

@media (max-width: 370px) {
  .durum { padding: 23px 20px; gap: 14px; }
  .durum-simge { width: 52px; height: 52px; border-radius: 15px; }
  .durum-simge svg { width: 25px; height: 25px; }
}

/* ---- Bugünün özeti ---- */
.ozet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-orta);
  overflow: hidden;
}

.ozet div {
  background: var(--yuzey);
  padding: 14px 8px;
  display: grid;
  gap: 3px;
  text-align: center;
  min-width: 0;
}

.ozet .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-silik);
}

/* "8s 22d" gibi değerler 320 pikselde üç sütuna sığmalı; yazı tipi
   sütun genişliğiyle birlikte küçülür. */
.ozet .d {
  font-family: var(--mono);
  font-size: clamp(15px, 4.8vw, 19px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---- Eylem alanı ---- */
.eylemler { display: grid; gap: 12px; }

.eylemler--ikili { grid-template-columns: 1fr 1fr; }

/* İki büyük düğme dar ekranda yan yana sıkışır ve etiketleri kırılır */
@media (max-width: 359px) {
  .eylemler--ikili { grid-template-columns: 1fr; }
}

/* ---- QR yönergesi ---- */
.yonerge {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk);
  padding: 24px;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.yonerge .simge {
  width: 56px;
  height: 56px;
  color: var(--marka);
}

.yonerge .baslik {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.yonerge .metin {
  font-size: 14.5px;
  color: var(--metin-yumusak);
  line-height: 1.5;
  max-width: 34ch;
}

/* ---- Son hareketler ---- */
.bolum-basligi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 0;
}

.bolum-basligi h2 {
  font-size: 13px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-silik);
}

.hareketler {
  display: grid;
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-orta);
  overflow: hidden;
}

.hareket {
  background: var(--yuzey);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.hareket .sol { display: grid; gap: 3px; min-width: 0; }

.hareket .tip {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hareket .tip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--metin-silik);
}

.hareket--giris .tip::before      { background: var(--giris); }
.hareket--cikis .tip::before      { background: var(--cikis); }
.hareket--mola_basla .tip::before { background: var(--mola); }
.hareket--mola_bitir .tip::before { background: var(--mola); }

.hareket .tarih {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--metin-silik);
}

.hareket .saat {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bos {
  background: var(--yuzey);
  padding: 28px 20px;
  text-align: center;
  color: var(--metin-silik);
  font-size: 14.5px;
}

/* ---- Giriş sayfası ---- */
.giris-sayfa {
  --kenar: max(16px, var(--guvenli-sol), var(--guvenli-sag));

  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: calc(24px + var(--guvenli-ust)) var(--kenar) calc(24px + var(--guvenli-alt));
}

.giris-kutu {
  width: 100%;
  max-width: 400px;
  display: grid;
  gap: 22px;
}

.giris-form {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk);
  padding: 26px 24px;
  display: grid;
  gap: 18px;
  box-shadow: var(--golge-2);
}

/* ---- İşlem (QR sonrası) ekranı ---- */
.islem-sayfa {
  --kenar: max(16px, var(--guvenli-sol), var(--guvenli-sag));

  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding: calc(20px + var(--guvenli-ust)) var(--kenar) calc(36px + var(--guvenli-alt));
  max-width: 480px;
  margin: 0 auto;
  gap: 20px;
}

/* QR'dan gelen personel doğrudan bu ekranı görür; hangi sisteme
   girdiğini anlaması için marka burada da bulunur. */
.islem-ust {
  display: flex;
  justify-content: center;
  padding-bottom: 2px;
}

.lokasyon-kutu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-orta);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  font-size: 14.5px;
}

.lokasyon-kutu .ad { font-weight: 600; }
.lokasyon-kutu .durum-metni { color: var(--metin-yumusak); font-size: 13.5px; }

/* Sonuç ekranı — işlem tamamlandığında tüm ekranı kaplar */
.sonuc {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 34px 24px;
  border-radius: var(--r-buyuk);
  border: 1.5px solid;
}

.sonuc--tamam { background: var(--tamam-zemin); border-color: var(--tamam); color: var(--tamam); }
.sonuc--hata  { background: var(--hata-zemin);  border-color: var(--hata);  color: var(--hata); }
.sonuc--uyari { background: var(--uyari-zemin); border-color: var(--uyari); color: var(--uyari); }

.sonuc .simge { width: 56px; height: 56px; }

.sonuc .baslik {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sonuc .saat {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sonuc .metin {
  font-size: 15px;
  color: var(--metin);
  opacity: 0.85;
  max-width: 34ch;
  line-height: 1.5;
}

/* ---- Çevrimdışı şeridi ---- */
.cevrimdisi {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--uyari-zemin);
  color: var(--uyari);
  border: 1px solid var(--uyari);
  border-radius: var(--r-orta);
  font-size: 14px;
  font-weight: 500;
}

body.cevrimdisi-aktif .cevrimdisi { display: flex; }

/* ---- Yatay tutuş ve kısa ekranlar ----
   Telefon yan çevrildiğinde dikeyde ~360 piksel kalır; ortalanmış
   yerleşim taşar ve asıl düğme ekran dışında kalır. */
@media (orientation: landscape) and (max-height: 620px) {
  .giris-sayfa,
  .islem-sayfa { align-content: start; }

  .dugme--kocaman { min-height: 66px; font-size: 19px; }

  .sonuc { padding: 22px 20px; }
  .sonuc .simge { width: 44px; height: 44px; }
  .sonuc .saat { font-size: 34px; }

  .durum { padding: 20px 20px; }
}

/* Ekranı uygulama olarak kuranlarda tarayıcı çubuğu yoktur; üst
   boşluk yalnızca güvenli alan kadar olmalı, fazlası ekran israfıdır. */
@media (display-mode: standalone) {
  .ustcubuk { padding-top: calc(10px + var(--guvenli-ust)); }
}