/* hud.css — üst çubuk (HUD), mod sekmeleri, künye, rol ve tema grubu.
   base.css'ten sonra yüklenir; eski #hud/.mod-sekme kuralları burada geçersiz kılınır. */

body {
  --hud-ust-bosluk: calc(var(--hud-yukseklik) + 16px);
  --hud-alt-bosluk: 0px;
  --hud-sekme-yukseklik: calc(var(--hedef-min) + 16px + env(safe-area-inset-bottom, 0px));
}

/* Çubuk */
#hud {
  top: var(--bosluk-2);
  left: var(--bosluk-2);
  right: var(--bosluk-2);
  z-index: var(--kat-hud);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  grid-template-areas: "sol orta sag";
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-1) var(--bosluk-3);
  min-height: var(--hud-yukseklik);
  background: var(--cam-arka);
  border: 1px solid var(--cam-kenar);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-2);
  -webkit-backdrop-filter: blur(var(--hud-blur));
  backdrop-filter: blur(var(--hud-blur));
  transform: none;
}
#hud-sol { grid-area: sol; display: flex; align-items: center; gap: var(--bosluk-2); min-width: 0; }
#hud-orta { grid-area: orta; }
#hud-sag { grid-area: sag; display: flex; align-items: center; justify-content: flex-end; gap: var(--bosluk-3); min-width: 0; }

/* Ortak düğme davranışı */
#hud .ikon { width: 20px; height: 20px; flex: none; }
#hud .ikon-dugme, #hud .mod-sekme {
  min-height: var(--hedef-min);
  transition: background-color var(--sure-hizli) var(--egri-standart), color var(--sure-hizli) var(--egri-standart), transform var(--sure-hizli) var(--egri-standart), opacity var(--sure-hizli) var(--egri-standart);
}
#hud .ikon-dugme { min-width: var(--hedef-min); border-radius: var(--yaricap-md); background: transparent; border-color: transparent; color: inherit; }
#hud .ikon-dugme:hover:not(:disabled), #hud .mod-sekme:hover:not(.etkin) { background: var(--yuzey-3); }
#hud .ikon-dugme:active:not(:disabled), #hud .mod-sekme:active { transform: scale(.98); }
#hud .ikon-dugme:disabled { opacity: .35; cursor: not-allowed; }

/* Künye */
#hud-kunye { display: flex; align-items: center; gap: var(--bosluk-2); min-width: 0; overflow: hidden; white-space: nowrap; }
#hud-kod {
  flex: none;
  padding: var(--bosluk-1) var(--bosluk-3);
  background: var(--yuzey-3);
  color: var(--vurgu);
  border-radius: var(--yaricap-tam);
  font-size: var(--boyut-sm);
  font-weight: 600;
}
#hud-sinif, #hud-disiplin {
  flex: none;
  padding: 2px var(--bosluk-2);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-sm);
  color: var(--yazi-ikincil);
  font-size: var(--boyut-xs);
  opacity: 1;
}
#hud-sinif { border-left: 4px solid var(--kademe-renk, var(--kenar)); }
#hud-sinif[data-kademe="ilkokul"] { --kademe-renk: var(--kademe-ilkokul); }
#hud-sinif[data-kademe="ortaokul"] { --kademe-renk: var(--kademe-ortaokul); }
#hud-sinif[data-kademe="lise"] { --kademe-renk: var(--kademe-lise); }
#hud-sinif:empty, #hud-disiplin:empty { display: none; }
#hud-baslik {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--boyut-md);
  font-weight: 600;
}
body[data-cihaz="tahta"] #hud-baslik { font-size: var(--boyut-lg); }
body[data-cihaz="tahta"] #hud .ikon-dugme, body[data-cihaz="tahta"] #hud .mod-sekme { min-height: 56px; }
body[data-cihaz="tahta"] #hud .ikon-dugme { min-width: 56px; }

/* Mod sekmeleri: segment kontrol */
#hud-orta {
  display: flex;
  align-items: center;
  gap: var(--bosluk-1);
  padding: var(--bosluk-1);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-lg);
  overflow: visible;
}
#hud .mod-sekme {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding: 0 var(--bosluk-3);
  background: transparent;
  color: var(--yazi-ikincil);
  border: 0;
  border-radius: var(--yaricap-md);
  box-shadow: none;
  opacity: 1;
  font-size: var(--boyut-sm);
  font-weight: 600;
  white-space: nowrap;
}
#hud .mod-sekme.etkin { background: var(--vurgu); color: var(--vurgu-on); box-shadow: none; }
.mod-kisayol {
  display: none;
  min-width: 1.4em;
  padding: 0 var(--bosluk-1);
  border: 1px solid currentColor;
  border-radius: var(--yaricap-sm);
  font-family: var(--mono);
  font-size: var(--boyut-xs);
  line-height: 1.4;
  text-align: center;
  opacity: .7;
}
@media (pointer: fine) {
  .mod-kisayol { display: inline-block; }
}

/* Rol */
#rol-dugme { gap: var(--bosluk-2); padding: 0 var(--bosluk-3); font-size: var(--boyut-sm); font-weight: 600; }

/* Tema: renk daireleri */
#tema-grubu { display: flex; align-items: center; gap: var(--bosluk-2); }
#tema-grubu button {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cam-kenar);
  box-shadow: none;
  transition: box-shadow var(--sure-hizli) var(--egri-standart), transform var(--sure-hizli) var(--egri-standart);
}
#tema-grubu button::after { inset: -12px; }
#tema-grubu button:active { transform: scale(.98); }
#tema-grubu button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--yuzey-1), 0 0 0 4px var(--odak); }

body[data-cihaz="tahta"] #tema-grubu button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }

#marka-dugme { padding: 0; }

/* Tablet ve tahta: sekmeler alt kenarda */
@media (max-width: 1024px), (pointer: coarse) {
  :root { --hud-yukseklik: 64px; }
  body { --hud-alt-bosluk: var(--hud-sekme-yukseklik); }
  /* backdrop-filter sabit konumlu torunlar için kapsayıcı blok olur; bu yüzden
     HUD'un kendisi tam ekran, saydam, tıklama geçirmeyen bir ızgara olur ve
     üç bölge kendi cam yüzeylerini taşır. */
  #hud {
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "sol sag" ". ." "orta orta";
    gap: var(--bosluk-2);
    padding: var(--bosluk-2) var(--bosluk-2) 0;
    min-height: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  #hud-sol, #hud-sag, #hud-orta { pointer-events: auto; }
  #hud-sol, #hud-sag {
    min-height: var(--hud-yukseklik);
    padding: var(--bosluk-1) var(--bosluk-3);
    background: var(--cam-arka);
    border: 1px solid var(--cam-kenar);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--golge-2);
    -webkit-backdrop-filter: blur(var(--hud-blur));
    backdrop-filter: blur(var(--hud-blur));
  }
  #hud-sinif, #hud-disiplin { display: inline-block; }
  #hud-sinif:empty, #hud-disiplin:empty { display: none; }
  #hud-baslik { display: block; }
  #hud-orta {
    grid-area: orta;
    margin: 0 calc(-1 * var(--bosluk-2));
    justify-content: space-around;
    gap: var(--bosluk-1);
    padding: var(--bosluk-2) var(--bosluk-3) calc(var(--bosluk-2) + env(safe-area-inset-bottom, 0px));
    background: var(--yuzey-1);
    border: 0;
    border-top: 1px solid var(--kenar);
    border-radius: 0;
    box-shadow: var(--golge-3);
  }
  #hud .mod-sekme { flex: 1 1 0; justify-content: center; min-width: var(--hedef-min); }
  #ipucu-seridi { bottom: calc(var(--hud-alt-bosluk) + var(--bosluk-2)); }
  #marka-seridi { bottom: calc(var(--hud-alt-bosluk) + var(--bosluk-6)); }
}

/* Dar ekran: yalnız ikon */
@media (max-width: 480px) {
  body { --hud-ust-bosluk: calc(var(--hud-yukseklik) * 2 + 24px); }
  #hud {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "sol" "sag" "." "orta";
  }
  #hud-sag { justify-content: space-between; justify-self: stretch; }
  #marka-dugme { display: none; } /* markaya keşfet şeridinden ulaşılır */
  #hud-kunye { flex: 1 1 auto; }
  .mod-etiket, #rol-etiket, #hud-disiplin { display: none; }
  #hud { padding: var(--bosluk-1) var(--bosluk-2); }
  #hud .mod-sekme { padding: 0; min-height: 44px; }
  #hud .ikon-dugme { min-width: 44px; min-height: 44px; }
  #hud-sag { gap: var(--bosluk-2); }
  #tema-grubu { gap: var(--bosluk-3); }
}

/* Sahne ve paneller HUD'un altında kalmaz */
#sahne-kabi {
  box-sizing: border-box;
  padding: var(--hud-ust-bosluk) 0 var(--hud-alt-bosluk);
}
.mod-panel {
  padding: calc(var(--hud-ust-bosluk) + var(--bosluk-2)) var(--bosluk-4) calc(64px + var(--hud-alt-bosluk));
}
#parametre-paneli { top: calc(var(--hud-ust-bosluk) + var(--bosluk-2)); bottom: calc(64px + var(--hud-alt-bosluk)); }
@media (max-width: 768px) {
  #parametre-paneli { top: auto; bottom: calc(64px + var(--hud-alt-bosluk)); }
}