/* =====================================================================
   SINAV360 — arayüz

   Öğretmen odaklı, profesyonel bir görünüm. Çocuk uygulaması havası ve
   dikkat dağıtan animasyon yok; ama düz ve cansız da değil — öğretmen
   bunu her sınav döneminde saatlerce kullanacak.

   Görsel dil:
     · Lacivert yan menü, açık gri çalışma alanı → nerede olduğun belli
     · Beyaz kartlar + yumuşak gölge → içerik zeminden ayrışır
     · Renk YALNIZCA anlam taşıdığında: yeşil "tamam", sarı "bak",
       kırmızı "sorun". Süs için renk kullanılmıyor.
   ===================================================================== */
:root{
  --mavi:#2563eb; --mavi-koyu:#1d4ed8; --mavi-acik:#eff5ff; --mavi-kenar:#c7dbff;
  --lacivert:#111a35; --lacivert-acik:#1c2947;
  --yazi:#0f172a; --sonuk:#64748b; --cizgi:#e4e8ef;
  --zemin:#f4f6fa; --kart:#ffffff;
  --yesil:#0b7a45; --yesil-zemin:#e6f6ee;
  --kirmizi:#b3261e; --kirmizi-zemin:#fdecea;
  --sari:#8a5a00;  --sari-zemin:#fff5e0;
  --mor:#6d3fd4;   --mor-zemin:#f1ecff;

  --golge-1:0 1px 2px rgba(15,23,42,.05);
  --golge-2:0 2px 4px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.05);
  --golge-3:0 10px 32px rgba(15,23,42,.13);
  --yuvarlak:14px;
  --ust:58px; --alt:62px; --yan:252px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--zemin); color:var(--yazi);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 8px;line-height:1.25;letter-spacing:-.01em}
button{font-family:inherit}
code{background:#eef1f6;padding:1px 5px;border-radius:5px;font-size:.9em}
::selection{background:var(--mavi-kenar)}

/* ---------- ortak ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--cizgi);background:#fff;color:var(--yazi);
  border-radius:11px;padding:11px 17px;font-size:15px;font-weight:600;
  cursor:pointer;min-height:44px;text-decoration:none;
  box-shadow:var(--golge-1);
  transition:background .13s ease, box-shadow .13s ease, transform .06s ease;
}
.btn:hover{background:#f7f9fc;box-shadow:var(--golge-2)}
.btn:active{transform:translateY(1px)}
.btn.birincil{
  background:linear-gradient(180deg,#3b82f6,var(--mavi));
  border-color:var(--mavi-koyu);color:#fff;
  box-shadow:0 1px 2px rgba(37,99,235,.35), 0 6px 16px rgba(37,99,235,.24);
}
.btn.birincil:hover{background:linear-gradient(180deg,var(--mavi),var(--mavi-koyu))}
.btn.tehlike{color:var(--kirmizi);border-color:#f2c7c4;background:#fff}
.btn.tehlike:hover{background:var(--kirmizi-zemin)}
.btn.tam{width:100%}
.btn.kucuk{padding:7px 12px;min-height:36px;font-size:13.5px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}

.kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:17px;margin-bottom:14px;box-shadow:var(--golge-1);
}
.kart h3{font-size:16px;display:flex;align-items:center;gap:8px}
.sonuk{color:var(--sonuk)}
.kucuk{font-size:13px;color:var(--sonuk)}
.satir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sag{margin-left:auto}
.bosluk{height:10px}

.alan{margin-bottom:13px}
.alan label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:#334155}
.alan input,.alan select,.alan textarea{
  width:100%;border:1px solid var(--cizgi);border-radius:11px;padding:11px 13px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--yazi);min-height:44px;
  transition:border-color .13s ease, box-shadow .13s ease;
}
.alan textarea{min-height:110px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:0;border-color:var(--mavi);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.alan input::placeholder,.alan textarea::placeholder{color:#9aa6b8}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.mesaj{border-radius:11px;padding:11px 13px;font-size:14px;margin-bottom:12px;
  background:var(--mavi-acik);color:#1a3a76;border:1px solid var(--mavi-kenar)}
.mesaj.hata{background:var(--kirmizi-zemin);color:var(--kirmizi);border-color:#f6cbc8}
.mesaj.iyi{background:var(--yesil-zemin);color:var(--yesil);border-color:#bfe6d1}
.mesaj.uyari{background:var(--sari-zemin);color:var(--sari);border-color:#f5dda8}

.rozet{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.01em}
.rozet.yesil{background:var(--yesil-zemin);color:var(--yesil)}
.rozet.kirmizi{background:var(--kirmizi-zemin);color:var(--kirmizi)}
.rozet.sari{background:var(--sari-zemin);color:var(--sari)}
.rozet.gri{background:#eef1f6;color:var(--sonuk)}

/* ---------- giriş ---------- */
.giris-sar{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:
    radial-gradient(1100px 620px at 12% -10%, #dbe9ff 0, transparent 62%),
    radial-gradient(900px 560px at 108% 108%, #e4dcff 0, transparent 58%),
    linear-gradient(170deg,#f7f9ff,#eef1f7);
}
.giris-kutu{width:100%;max-width:392px;background:#fff;border:1px solid var(--cizgi);
  border-radius:20px;padding:26px;box-shadow:var(--golge-3)}
.marka{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.marka h1{font-size:22px;margin:0;letter-spacing:-.02em}
.marka p{margin:0;font-size:13px;color:var(--sonuk)}
.marka-im{width:48px;height:48px;border-radius:14px;
  background:linear-gradient(150deg,#3b82f6,#1d4ed8);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none;
  box-shadow:0 4px 12px rgba(37,99,235,.35)}
.marka-im.kucuk{width:34px;height:34px;font-size:12px;border-radius:10px;box-shadow:none}
.sekme{display:flex;background:#eef1f6;border-radius:12px;padding:4px;margin-bottom:18px}
.sekme-btn{flex:1;border:0;background:transparent;padding:9px;border-radius:9px;
  font-weight:600;font-size:14px;cursor:pointer;color:var(--sonuk);min-height:40px;
  transition:background .13s ease,color .13s ease}
.sekme-btn.etkin{background:#fff;color:var(--yazi);box-shadow:var(--golge-1)}

/* ---------- çatı ---------- */
.ust{position:fixed;top:0;left:0;right:0;height:var(--ust);z-index:30;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--cizgi);
  display:flex;align-items:center;gap:8px;padding:0 8px;
  padding-top:env(safe-area-inset-top)}
.ust-baslik{font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.ikon{border:0;background:transparent;font-size:19px;cursor:pointer;
  width:44px;height:44px;border-radius:11px;color:var(--yazi)}
.ikon:hover{background:#eef1f6}

/* Yan menü lacivert: çalışma alanından net ayrılır, uygulamaya kimlik verir. */
.yan{position:fixed;top:0;bottom:0;left:0;width:var(--yan);z-index:40;
  background:linear-gradient(180deg,var(--lacivert),var(--lacivert-acik));
  color:#e8edf8;padding:16px 12px;
  transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto}
.yan.acik{transform:none;box-shadow:var(--golge-3)}
.yan-marka{display:flex;align-items:center;gap:11px;padding:6px 6px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px}
.yan-marka b{font-size:15px;letter-spacing:.02em}
.yan-marka span{display:block;font-size:12.5px;color:#94a3c4}
.yan-marka .marka-im{background:linear-gradient(150deg,#60a5fa,#2563eb)}
.yan-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;
  padding:11px 12px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;
  color:#cbd6ea;text-align:left;min-height:46px;
  transition:background .13s ease,color .13s ease}
.yan-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.yan-btn.etkin{background:rgba(96,165,250,.2);color:#fff;box-shadow:inset 3px 0 0 #60a5fa}
.yan-btn.vurgu{color:#93c5fd}
.ortu{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:35;backdrop-filter:blur(2px)}

main{padding:calc(var(--ust) + 16px) 15px calc(var(--alt) + 22px);max-width:1040px;margin:0 auto}

.alt{position:fixed;left:0;right:0;bottom:0;height:var(--alt);z-index:30;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
  border-top:1px solid var(--cizgi);display:flex;
  padding-bottom:env(safe-area-inset-bottom)}
.alt-btn{flex:1;border:0;background:transparent;cursor:pointer;font-size:11px;font-weight:600;
  color:var(--sonuk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:color .13s ease}
.alt-btn span{font-size:19px;line-height:1}
.alt-btn.etkin{color:var(--mavi)}
.alt-btn.tara span{background:linear-gradient(150deg,#3b82f6,#1d4ed8);color:#fff;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:-16px;
  box-shadow:0 5px 14px rgba(37,99,235,.42);border:3px solid #fff}

@media (min-width:900px){
  .yan{transform:none;box-shadow:none}
  .ortu{display:none !important}
  .ust{left:var(--yan)}
  main{margin-left:var(--yan);padding-bottom:26px}
  .alt{display:none}
  #menuBtn{display:none}
}

/* ---------- ızgara / sayaçlar ---------- */
.izgara{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* Sayaçlar mobilde 2×2. Tek başına alta düşen kutu, düzeni bozuk
   gösteriyordu. */
.sayac{display:grid;gap:11px;grid-template-columns:repeat(2,1fr);margin-bottom:15px}
/* Geniş ekranda sayaç adedi sayfaya göre değişiyor (ana sayfada 4,
   sonuçlarda 5). Sabit 4 sütun verilince beşincisi tek başına alta
   düşüyordu; auto-fit hepsini tek satırda tutuyor. */
@media (min-width:560px){ .sayac{grid-template-columns:repeat(auto-fit,minmax(142px,1fr))} }
.sayac .kutu{
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:15px 14px;box-shadow:var(--golge-1);position:relative;overflow:hidden;
}
/* Üstte ince renk şeridi: kutular tek bakışta birbirinden ayrılsın. */
.sayac .kutu::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--mavi);opacity:.9}
.sayac .kutu:nth-child(2)::before{background:var(--mor)}
.sayac .kutu:nth-child(3)::before{background:var(--yesil)}
.sayac .kutu:nth-child(4)::before{background:#d9820b}
.sayac .kutu:nth-child(5)::before{background:#0e7490}
.sayac b{display:block;font-size:27px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.sayac span{font-size:12.5px;color:var(--sonuk);font-weight:600}

/* ---------- tablo ---------- */
.tablo-sar{overflow-x:auto;background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);box-shadow:var(--golge-1)}
table{border-collapse:collapse;width:100%;font-size:14px}
/* min-width YOK: sığan tabloda gereksiz yatay kaydırma çubuğu çıkıyordu.
   Geniş tablolar zaten .tablo-sar içinde kayar. */
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--cizgi);white-space:nowrap}
th{background:#f8fafd;font-weight:700;font-size:12.5px;color:var(--sonuk);
  text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
td.sag,th.sag{text-align:right}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--mavi-acik)}
.tiklanir{cursor:pointer}

.bos-durum{text-align:center;padding:38px 18px;color:var(--sonuk)}
.bos-durum .im{font-size:38px;display:block;margin-bottom:10px;opacity:.75}

/* ---------- pencere ---------- */
.pencere{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.5);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  backdrop-filter:blur(3px)}
.pencere.gizli{display:none}
.pencere-ic{background:#fff;width:100%;max-width:540px;border-radius:18px 18px 0 0;
  padding:20px;max-height:92dvh;overflow-y:auto;box-shadow:var(--golge-3)}
.pencere-ust{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pencere-ust h3{margin:0;font-size:17.5px;flex:1}
@media (min-width:640px){
  .pencere{align-items:center}
  .pencere-ic{border-radius:18px}
}

/* ---------- bildirim ---------- */
.bildirim-kap{position:fixed;left:0;right:0;bottom:calc(var(--alt) + 14px);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 14px}
.bildirim{background:#0f172a;color:#fff;border-radius:12px;padding:12px 17px;font-size:14px;
  font-weight:600;box-shadow:var(--golge-3);max-width:430px}
.bildirim.iyi{background:var(--yesil)}
.bildirim.hata{background:var(--kirmizi)}
@media (min-width:900px){ .bildirim-kap{bottom:22px} }

/* ---------- cevap anahtarı ---------- */
.anahtar-izgara{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.anahtar-soru{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--cizgi);
  border-radius:10px;padding:5px 8px;box-shadow:var(--golge-1)}
.anahtar-soru .no{font-size:12px;font-weight:800;color:var(--sonuk);width:22px;flex:none}
.harf-btn{border:1px solid var(--cizgi);background:#fff;border-radius:8px;
  width:28px;height:32px;font-size:13px;font-weight:700;cursor:pointer;padding:0;color:var(--yazi);
  transition:background .1s ease,color .1s ease,border-color .1s ease}
.harf-btn:hover{background:var(--mavi-acik);border-color:var(--mavi-kenar)}
.harf-btn.secili{background:var(--mavi);border-color:var(--mavi-koyu);color:#fff}

/* Yapay zekânın emin olamadığı satırlar: öğretmenin gözü önce buraya
   gitsin diye ayırt ediliyor. Onay ekranında hepsi düzeltilebilir. */
.anahtar-soru.supheli{background:var(--sari-zemin);border-color:#f0d494}

/* ---------- kamera ---------- */
.kamera-sar{position:relative;background:#0b1220;border-radius:var(--yuvarlak);overflow:hidden;
  aspect-ratio:3/4;max-height:62dvh;margin-bottom:12px;box-shadow:var(--golge-2)}
.kamera-sar video,.kamera-sar canvas{width:100%;height:100%;object-fit:cover;display:block}
.cerceve{position:absolute;inset:7% 6%;border:2.5px dashed rgba(255,255,255,.7);border-radius:12px;
  pointer-events:none;transition:border-color .2s ease}
.cerceve.hazir{border-color:#34d399;border-style:solid;box-shadow:0 0 0 9999px rgba(16,185,129,.06)}
.kamera-mesaj{position:absolute;left:0;right:0;bottom:0;padding:12px 15px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:14px;font-weight:600}
.tara-durum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}

/* ---------- inceleme ---------- */
.inceleme-kart{border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:14px;
  margin-bottom:11px;background:#fff;box-shadow:var(--golge-1)}
.inceleme-kart .ust-satir{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.secenek-satir{display:flex;gap:8px;flex-wrap:wrap}
.secenek-btn{border:1px solid var(--cizgi);background:#fff;border-radius:10px;
  min-width:44px;height:44px;font-size:15px;font-weight:700;cursor:pointer;color:var(--yazi);
  transition:background .1s ease,color .1s ease,border-color .1s ease}
.secenek-btn:hover{background:var(--mavi-acik);border-color:var(--mavi-kenar)}
.secenek-btn.secili{background:var(--mavi);border-color:var(--mavi-koyu);color:#fff}
.secenek-btn.bos{color:var(--sonuk)}

/* ---------- lisans şeridi ---------- */
#lisansSerit{display:block}
#lisansSerit a{margin-left:6px;font-weight:700;color:inherit;text-decoration:underline}

/* ---------- yazdırma ---------- */
@media print{
  .ust,.yan,.alt,.ortu,.bildirim-kap,#pencere,#lisansSerit{display:none !important}
  main{padding:0;margin:0;max-width:none}
  body{background:#fff}
  .kart{border:0;padding:0;box-shadow:none}
  .yazdirma-gizle{display:none !important}
}

/* Hareket azaltma tercihi: geçişler kapanır. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- dosya seçici ----------
   Tarayıcının varsayılan "Dosya Seç" düğmesi her işletim sisteminde
   başka görünüyor ve uygulamanın geri kalanına hiç benzemiyor. Düğme
   kısmını kendi dilimize çeviriyoruz. */
input[type=file]{
  width:100%;border:1px dashed var(--mavi-kenar);border-radius:11px;
  padding:11px 13px;background:var(--mavi-acik);font:inherit;font-size:14px;
  color:var(--sonuk);cursor:pointer;
}
input[type=file]:hover{border-color:var(--mavi);background:#e6f0ff}
input[type=file]::file-selector-button{
  border:1px solid var(--mavi-koyu);border-radius:9px;padding:8px 14px;margin-right:12px;
  background:linear-gradient(180deg,#3b82f6,var(--mavi));color:#fff;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:linear-gradient(180deg,var(--mavi),var(--mavi-koyu))}

/* ---------- yapay zekâ kartı ----------
   Optik okumadan görsel olarak da ayrılıyor: öğretmen hangi yolu
   kullandığını kart rengiyle de fark etsin. */
.yz-kart{border-color:#ddd3f7;background:linear-gradient(180deg,#faf8ff,#fff)}
.yz-kart input[type=file]{border-color:#ddd3f7;background:var(--mor-zemin)}
.yz-kart input[type=file]::file-selector-button{
  background:linear-gradient(180deg,#8b5cf6,var(--mor));border-color:#5b32b8}

/* ---------- liste satırı ---------- */
.liste-bos{padding:18px;text-align:center;color:var(--sonuk);font-size:13.5px}