/* ASYA BAYRAK — Fiyat Güncelleme Paneli
   TimeOn Digital · kurumsal, sakin, veri odaklı arayüz */

:root {
  --lacivert: #004188;
  --lacivert-koyu: #002a58;
  --lacivert-acik: #e8f0f9;
  --murekkep: #121a24;
  --kagit: #f5f4f1;
  --yuzey: #ffffff;
  --cizgi: #dcd9d2;
  --cizgi-ince: #ebe8e2;
  --soluk: #6b7280;
  --yesil: #0f6b52;
  --yesil-zemin: #e7f4ef;
  --amber: #8a5a00;
  --amber-zemin: #fdf5e3;
  --kirmizi: #9d1c1c;
  --kirmizi-zemin: #fbeaea;

  --olcu: 1400px;
  --yuvarlak: 6px;
  --golge: 0 1px 2px rgba(18, 26, 36, .06), 0 8px 24px -12px rgba(18, 26, 36, .18);

  --yazi: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --baslik: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sayi: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 14px/1.5 var(--yazi);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ marka */
.marka {
  background: var(--lacivert-koyu);
  background-image: linear-gradient(100deg, var(--lacivert-koyu) 0%, var(--lacivert) 62%, #0a5aa8 100%);
  color: #fff;
  padding: 0 24px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.marka img.asya { height: 30px; width: auto; }
.marka img.timeon { height: 22px; width: auto; opacity: .95; }
.marka .ayrac { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }
.marka .baslik {
  font-family: var(--baslik);
  font-size: 17px;
  letter-spacing: .01em;
}
.marka .sag { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.marka .uretici {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-align: right;
  line-height: 1.35;
}
.marka a { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 12px; }
.marka a:hover { color: #fff; text-decoration: underline; }
.marka button.sade {
  color: rgba(255, 255, 255, .88);
  font-size: 12.5px;
  border-radius: 4px;
}
.marka button.sade:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.marka button.sade:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }

.bilgi-serit {
  background: var(--lacivert-acik);
  border-bottom: 1px solid #cfe0f1;
  padding: 6px 24px;
  font-size: 12px;
  color: #1b3f66;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.bilgi-serit b { font-weight: 600; }

/* ------------------------------------------------------------------ düzen */
.sayfa { max-width: var(--olcu); margin: 0 auto; padding: 22px 24px 120px; }

.ust {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
h1 {
  font-family: var(--baslik);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: -.01em;
}
.ust p { margin: 0; color: var(--soluk); font-size: 13px; }

.arac-kutusu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: var(--golge);
}
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir + .satir { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cizgi-ince); }

label.etiket {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soluk);
  font-weight: 600;
}

input, select, button, textarea { font: inherit; color: inherit; }

input[type=text], input[type=password], input[type=number], select {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 8px 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--lacivert);
  box-shadow: 0 0 0 3px rgba(0, 65, 136, .16);
}
input[type=text].genis { flex: 1; min-width: 240px; }

button {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
}
button:hover { background: #faf9f7; border-color: #c7c2b8; }
button:active { transform: translateY(1px); }
button.ana {
  background: var(--lacivert);
  border-color: var(--lacivert);
  color: #fff;
  font-weight: 600;
}
button.ana:hover { background: var(--lacivert-koyu); border-color: var(--lacivert-koyu); }
button.ana:disabled { background: #9aa5b1; border-color: #9aa5b1; cursor: default; transform: none; }
button.sade { border-color: transparent; background: transparent; color: var(--lacivert); padding: 6px 8px; }
button.sade:hover { background: var(--lacivert-acik); }
button.kucuk { padding: 4px 9px; font-size: 12.5px; }

/* ------------------------------------------------------------------ tablo */
.tablo-kabi {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fbfaf8;
  border-bottom: 1px solid var(--cizgi);
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soluk);
  white-space: nowrap;
}
thead th.usd, tbody td.usd { background: #fbfaf7; }
thead th.usd { box-shadow: inset 1px 0 0 var(--cizgi-ince), inset -1px 0 0 var(--cizgi-ince); }
th.sag, td.sag { text-align: right; }
th.kolon-urun { width: 26%; }
th.kolon-son { width: 150px; }
td.son-guncelleme { white-space: nowrap; }
.sg-zaman { font-family: var(--sayi); font-size: 11.5px; color: var(--murekkep); }
.sg-kaynak { font-size: 11px; color: var(--soluk); }
.sg-kaynak.panel { color: var(--lacivert); font-weight: 600; }

tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--cizgi-ince);
  vertical-align: middle;
}
tbody tr:hover td { background: #fcfcfb; }
tbody tr:hover td.usd { background: #f8f7f3; }
tbody tr.urun-basi td { border-top: 1px solid var(--cizgi); }
tbody tr.degisti td { background: var(--amber-zemin) !important; }
tbody tr.kaydedildi td { background: var(--yesil-zemin) !important; }

.urun { display: flex; gap: 10px; align-items: center; }
.urun img {
  width: 40px; height: 40px; flex: none;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--cizgi-ince);
  background: #eee;
}
.urun-ad { font-weight: 600; line-height: 1.3; }
.urun-ad-en { color: var(--soluk); font-size: 11.5px; }
.urun a { color: inherit; text-decoration: none; }
.urun a:hover { color: var(--lacivert); text-decoration: underline; }
.sku { font-family: var(--sayi); font-size: 11.5px; color: var(--soluk); }
.secenek { font-size: 13px; }

input.fiyat {
  width: 96px;
  text-align: right;
  font-family: var(--sayi);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
}
input.fiyat.karsilastirma { color: var(--soluk); }
.para { font-family: var(--sayi); font-size: 12px; color: var(--soluk); }

/* --------------------------------------------------------------- kayıt çubuğu */
.kayit-cubugu {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  border-top: 2px solid var(--lacivert);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 -6px 24px -12px rgba(18, 26, 36, .35);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.kayit-cubugu.acik { transform: translateY(0); }
.kayit-cubugu .sayac { font-weight: 600; }
.kayit-cubugu .bosluk { margin-left: auto; }

/* ------------------------------------------------------------------ mesaj */
.mesaj {
  border-radius: var(--yuvarlak);
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid;
  font-size: 13.5px;
}
.mesaj.iyi { background: var(--yesil-zemin); border-color: #b9ded1; color: var(--yesil); }
.mesaj.uyari { background: var(--amber-zemin); border-color: #e6d3a3; color: var(--amber); }
.mesaj.hata { background: var(--kirmizi-zemin); border-color: #e5b8b8; color: var(--kirmizi); }
.gizli { display: none !important; }

.bos-durum { padding: 46px 20px; text-align: center; color: var(--soluk); }
.bos-durum b { display: block; font-family: var(--baslik); font-size: 17px; color: var(--murekkep); margin-bottom: 4px; }

/* ---------------------------------------------------------------- katman */
.katman {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(18, 26, 36, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px;
  overflow: auto;
}
.pencere {
  background: var(--yuzey);
  border-radius: 8px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
  animation: yukari .22s ease;
}
.pencere.dar { max-width: 460px; }
@keyframes yukari { from { opacity: 0; transform: translateY(10px); } }
.pencere header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--cizgi-ince);
}
.pencere header h2 { font-family: var(--baslik); font-size: 18px; margin: 0; font-weight: 600; }
.pencere .icerik { padding: 18px 20px; }
.pencere .alt { padding: 14px 20px; border-top: 1px solid var(--cizgi-ince); display: flex; gap: 10px; justify-content: flex-end; }
.pencere .alan { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.pencere .alan input { width: 100%; }
.kural { font-size: 12px; color: var(--soluk); line-height: 1.6; }

/* --------------------------------------------------- kaydetme sonucu */
.sonuc-kutu { text-align: center; padding: 30px 24px 22px; }
.sonuc-isaret {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; line-height: 1;
  background: var(--yesil-zemin); color: var(--yesil);
  animation: nabiz .4s ease;
}
.sonuc-isaret.geri { background: var(--amber-zemin); color: var(--amber); }
.sonuc-isaret.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); }
@keyframes nabiz { from { transform: scale(.7); opacity: 0; } }
.sonuc-metin { font-family: var(--baslik); font-size: 19px; margin: 0 0 6px; }
.sonuc-alt { margin: 0; color: var(--soluk); font-size: 13px; }

/* ------------------------------------------------------------- geçmiş */
.kayit {
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--yuvarlak);
  padding: 11px 13px;
  margin-bottom: 9px;
}
.kayit:hover { border-color: var(--cizgi); }
.kayit .ust-satir { display: flex; align-items: center; gap: 10px; }
.kayit .zaman { font-family: var(--sayi); font-size: 12px; color: var(--soluk); }
.kayit .rozet {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}
.rozet.degisiklik { background: var(--lacivert-acik); color: var(--lacivert); }
.rozet.geri { background: var(--amber-zemin); color: var(--amber); }
.kayit .detay { margin-top: 6px; font-size: 12.5px; color: var(--soluk); }
.kayit .bosluk { margin-left: auto; }

.gunluk-tablo { width: 100%; font-family: var(--sayi); font-size: 12px; }
.gunluk-tablo td { padding: 4px 8px; border-bottom: 1px solid var(--cizgi-ince); vertical-align: top; }
.gunluk-tablo td:first-child { white-space: nowrap; color: var(--soluk); }

/* ------------------------------------------------------------- giriş sayfası */
.giris-sayfa {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.giris-sol {
  background: var(--lacivert-koyu);
  background-image:
    radial-gradient(900px 420px at 12% 8%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(150deg, var(--lacivert-koyu) 0%, var(--lacivert) 70%, #0a5aa8 100%);
  color: #fff;
  padding: 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.giris-sol img.asya { height: 46px; width: auto; }
.giris-sol h2 {
  font-family: var(--baslik);
  font-size: 34px;
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 14px;
  max-width: 12em;
}
.giris-sol p { color: rgba(255, 255, 255, .78); max-width: 34em; margin: 0; }
.giris-sol .imza { display: flex; align-items: center; gap: 12px; }
.giris-sol .imza img { height: 24px; }
.giris-sol .imza span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }

.giris-sag { background: var(--kagit); display: flex; align-items: center; justify-content: center; padding: 40px; }
.giris-kutu { width: 100%; max-width: 380px; }
.giris-kutu h1 { font-size: 24px; margin-bottom: 6px; }
.giris-kutu > p { color: var(--soluk); margin: 0 0 22px; }
.giris-kutu input { width: 100%; padding: 11px 12px; }
.giris-kutu button.ana { width: 100%; padding: 11px; margin-top: 14px; }
.giris-kutu .alt-baglanti { margin-top: 16px; text-align: center; }
.giris-kutu .alt-baglanti button { font-size: 12.5px; }

@media (max-width: 900px) {
  .giris-sayfa { grid-template-columns: 1fr; }
  .giris-sol { padding: 32px; gap: 26px; }
  .giris-sol h2 { font-size: 26px; }
  .marka .uretici { display: none; }
}