/*
 * eeg.koodla.co — düz, yoğun, tek vurgu rengi. Gradyan/gölge/neon yok.
 *
 * Renk paleti raporunkiyle aynı: sayfadan rapora geçildiğinde araç değişmiş
 * gibi görünmemesi için ikisi de aynı kâğıt/çizgi/vurgu üçlüsünü kullanıyor.
 */

:root {
  --kagit: #ffffff;
  --zemin: #f6f5f2;
  --cizgi: #e2e0da;
  --metin: #1b1f27;
  --orta: #414957;
  --soluk: #6b7280;
  --vurgu: #c2611a;
  --vurgu-koyu: #a95415;
  --vurgu-acik: #fdf5ee;
  --hata: #b42318;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.62 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ic { max-width: 900px; margin: 0 auto; padding: 0 22px; }
.gizli { display: none !important; }

/* Üst şerit */
.ust { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 16px; height: 56px; }
.marka {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--metin); text-decoration: none;
}
.marka span { color: var(--vurgu); font-weight: 600; }
.marka-ikon { width: 34px; height: 16px; color: var(--vurgu); }
.ust-not { color: var(--soluk); font-size: 12.5px; }

/* Giriş bandı — beyaz kâğıt üstünde, sayfanın geri kalanından ayrı */
.giris { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.giris-ic { padding: 46px 22px 40px; }
.giris h1 {
  font-size: 30px; line-height: 1.22; margin: 0 0 12px;
  letter-spacing: -0.022em; font-weight: 700;
}
.giris p { margin: 0; color: var(--orta); max-width: 60ch; font-size: 15.5px; }
code { background: #f0eeE9; background: #f0eee9; padding: 1px 5px; border-radius: 3px; font-size: 13px; }

.giris-rozet { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.giris-rozet li {
  font-size: 12.5px; color: var(--orta);
  border: 1px solid var(--cizgi); border-radius: 20px; padding: 4px 12px; background: #fbfaf8;
}

/* Paneller */
.panel, .panel-genis {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 22px;
  margin: 26px 0;
}
.panel-genis { padding: 0; overflow: hidden; margin: 26px 0; }

/* Dosya bırakma alanı */
.birak {
  display: flex; align-items: center; gap: 18px;
  border: 1.5px dashed #cfccc4;
  border-radius: 6px;
  padding: 28px 24px;
  cursor: pointer;
  background: #fbfaf8;
  transition: border-color .15s, background .15s;
}
.birak:hover, .birak:focus-visible { border-color: var(--vurgu); background: var(--vurgu-acik); outline: none; }
.birak.uzerinde { border-color: var(--vurgu); background: var(--vurgu-acik); border-style: solid; }
.birak-ikon { width: 64px; height: 30px; color: var(--vurgu); flex: none; }
.birak-metin { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.birak-metin strong { font-size: 15.5px; }
.birak-metin span { color: var(--soluk); font-size: 13px; }
.birak-dugme {
  flex: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--vurgu); color: var(--vurgu);
  border-radius: 4px; padding: 7px 14px; background: var(--kagit);
}
.birak:hover .birak-dugme { background: var(--vurgu); color: #fff; }

.mahremiyet {
  margin: 16px 0 0; color: var(--soluk); font-size: 12.5px; line-height: 1.55;
  padding-left: 11px; border-left: 2px solid var(--cizgi);
}
.mahremiyet b { color: var(--orta); }

/* İşlem ekranı */
.islem-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.dosya-adi { font-size: 13.5px; color: var(--orta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yuzde { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--vurgu); }

.cubuk { height: 4px; background: #ecebe7; border-radius: 2px; overflow: hidden; }
.cubuk-dolu { height: 100%; width: 0; background: var(--vurgu); transition: width .35s ease; }

/* Analiz sürerken akan EEG çizgisi. Süsleme değil: iş sürüyor işareti. */
.dalga { height: 42px; margin: 16px 0 8px; color: #d8d5cd; overflow: hidden; }
.dalga svg { width: 200%; height: 100%; display: block; animation: kaydir 5.5s linear infinite; }
.dalga-yol { animation: canlan 1.6s ease-in-out infinite alternate; }
@keyframes kaydir { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes canlan { from { stroke: #ddd9d1; } to { stroke: var(--vurgu); } }

/* Aşama listesi */
.asamalar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; }
.asamalar li {
  position: relative; padding: 6px 0 6px 24px;
  color: #a2a7b0; font-size: 13.5px;
  transition: color .2s;
}
.asamalar li::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid #d3d0c8; background: transparent;
}
/* Aşamalar arasındaki bağ çizgisi: liste değil, ilerleyen bir yol olduğu görünsün. */
.asamalar li:not(:last-child)::after {
  content: ""; position: absolute; left: 7.5px; top: calc(50% + 6px);
  width: 1px; height: calc(100% - 8px); background: #e6e4de;
}
.asamalar li.aktif { color: var(--metin); font-weight: 600; }
.asamalar li.aktif::before { border-color: var(--vurgu); background: var(--vurgu); animation: nabiz 1.1s ease-in-out infinite; }
.asamalar li.bitti { color: var(--orta); }
.asamalar li.bitti::before { border-color: var(--vurgu); background: var(--vurgu); }
.asamalar li.bitti::after { background: var(--vurgu); opacity: .35; }
@keyframes nabiz { 0%,100% { box-shadow: 0 0 0 0 rgba(194,97,26,.35); } 50% { box-shadow: 0 0 0 5px rgba(194,97,26,0); } }

.kuyruk-notu { margin: 14px 0 0; color: var(--soluk); font-size: 12.5px; }

/* Hata */
.hata-baslik { margin: 0 0 8px; font-size: 16px; color: var(--hata); }
.hata-metin { margin: 0 0 16px; color: var(--orta); font-size: 14px; word-break: break-word; }

/* Rapor */
.rapor-ust {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap;
}
.rapor-ust h2 { margin: 0; font-size: 15px; }
.rapor-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
#rapor-cerceve { width: 100%; height: 76vh; min-height: 440px; border: 0; display: block; background: var(--zemin); }

/* Düğmeler */
.dugme {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 4px; cursor: pointer;
  background: var(--vurgu); color: #fff; border: 1px solid var(--vurgu);
  transition: background .15s;
}
.dugme:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.dugme.ikincil { background: var(--kagit); color: var(--metin); border-color: var(--cizgi); }
.dugme.ikincil:hover { background: #f4f2ee; border-color: #d5d2ca; }

/* Alt notlar */
.notlar { padding: 8px 0 46px; }
.notlar h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin: 0 0 14px; }
.not-kartlari { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.not-kartlari article {
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 6px; padding: 15px 17px;
}
.not-kartlari h3 { margin: 0 0 5px; font-size: 14px; }
.not-kartlari p { margin: 0; color: var(--orta); font-size: 13.5px; line-height: 1.55; }
.uyari-satir {
  margin: 16px 0 0; padding: 12px 14px;
  background: #fff8e6; border: 1px solid #f0d391; border-left: 3px solid #d9a12c;
  border-radius: 4px; font-size: 13px; color: #6b4c14;
}

/* Alt şerit */
.alt { border-top: 1px solid var(--cizgi); background: var(--kagit); padding: 18px 0; }
.alt-ic { display: flex; justify-content: space-between; color: var(--soluk); font-size: 12.5px; }

@media (max-width: 680px) {
  .giris-ic { padding: 32px 22px 28px; }
  .giris h1 { font-size: 23px; }
  .giris h1 br { display: none; }
  .birak { flex-direction: column; text-align: center; gap: 12px; padding: 24px 16px; }
  .not-kartlari { grid-template-columns: 1fr; }
  .ust-not { display: none; }
  #rapor-cerceve { height: 62vh; }
  .rapor-dugmeler { width: 100%; }
  .rapor-dugmeler .dugme { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dalga svg, .dalga-yol, .asamalar li.aktif::before { animation: none; }
}