/* araclar — §4.3 ekran stilleri; base.css üzerine yazar, token'ları kullanır */

/* — Ortak ikon düğmesi — */
.arac-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hedef-min); min-height: var(--hedef-min);
  padding: 0; color: var(--on); background: var(--yuzey-2);
  border: 1px solid var(--kenar); border-radius: var(--yaricap-md); cursor: pointer;
  transition: background var(--sure-hizli) var(--egri-standart);
}
.arac-dugme:hover { background: var(--yuzey-3); }
.arac-dugme .ikon { width: 24px; height: 24px; }
.arac-dugme[aria-pressed="true"], .arac-dugme[aria-checked="true"] { background: var(--vurgu); color: var(--vurgu-on); border-color: var(--vurgu); }
.arac-dugme:focus-visible, .kalem-renk-dugme:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }

/* — Parametre paneli — */
#parametre-paneli {
  z-index: var(--kat-panel);
  padding: var(--bosluk-4);
  display: none;
  flex-direction: column;
  overflow: hidden;
  width: 340px;
  background: var(--cam-arka);
  box-shadow: var(--golge-2);
  transition: width var(--sure-normal) var(--egri-standart);
}
body[data-mod="lab"] #parametre-paneli, body[data-mod="xr"] #parametre-paneli { display: flex; }
.parametre-baslik { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-2); margin-bottom: var(--bosluk-3); }
#parametre-paneli h2 { margin: 0; font-size: var(--boyut-lg, 18px); }
#parametre-katla .ikon { transition: transform var(--sure-normal) var(--egri-standart); }
#parametre-paneli[data-katli="0"] #parametre-katla .ikon { transform: none; }
#parametre-paneli[data-katli="1"] #parametre-katla .ikon { transform: rotate(180deg); }
#parametre-govde { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#parametre-listesi { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: var(--bosluk-4); padding-right: var(--bosluk-1); }
#parametre-paneli[data-katli="1"] { width: calc(var(--hedef-min) + var(--bosluk-4) * 2); bottom: auto; }
#parametre-paneli[data-katli="1"] h2, #parametre-paneli[data-katli="1"] #parametre-govde { display: none; }
#parametre-paneli[data-katli="1"] .parametre-baslik { margin: 0; justify-content: center; }

.parametre { display: grid; gap: var(--bosluk-2); }
.parametre-ust { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bosluk-2); }
.parametre-ust output { font-family: var(--mono); color: var(--vurgu); font-variant-numeric: tabular-nums; }

.parametre input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 40px; margin: 0; background: transparent; cursor: pointer; --dolgu: 0%;
}
body[data-cihaz="tahta"] .parametre input[type="range"] { height: 48px; }
.parametre input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--yaricap-tam);
  background: linear-gradient(to right, var(--vurgu) var(--dolgu), var(--yuzey-3) var(--dolgu));
}
.parametre input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--yaricap-tam); background: var(--yuzey-3); }
.parametre input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--yaricap-tam); background: var(--vurgu); }
.parametre input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -13px; border-radius: 50%;
  background: var(--vurgu); border: 3px solid var(--vurgu-on); box-shadow: var(--golge-1);
}
.parametre input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vurgu); border: 3px solid var(--vurgu-on); box-shadow: var(--golge-1);
}
body[data-cihaz="tahta"] .parametre input[type="range"]::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -17px; }
body[data-cihaz="tahta"] .parametre input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; }
.parametre input[type="range"]:focus-visible { outline: none; }
.parametre input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--odak); outline-offset: 2px; }
.parametre input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--odak); outline-offset: 2px; }

/* Alt çubuk: sıfırla ikincil, kaydet birincil */
#olcum-araclari {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-2);
  margin-top: var(--bosluk-3); padding-top: var(--bosluk-3); border-top: 1px solid var(--kenar);
}
#olcum-araclari button { min-height: var(--hedef-min); padding: 0 var(--bosluk-4); border-radius: var(--yaricap-md); font: inherit; cursor: pointer; }
#olcum-kaydet { flex: 1; background: var(--vurgu); color: var(--vurgu-on); border: 1px solid var(--vurgu); font-weight: 600; }
#sim-sifirla { background: transparent; color: var(--on); border: 1px solid var(--kenar); }
#sim-sifirla:hover { background: var(--yuzey-3); }
#olcum-kaydet:focus-visible, #sim-sifirla:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
#olcum-rozet {
  flex-basis: 100%; min-height: 0; font-size: var(--boyut-sm, 13px); color: var(--durum-basari);
  opacity: 0; transition: opacity var(--sure-hizli) var(--egri-standart);
}
#olcum-rozet.gorunur { opacity: 1; }

/* Föy sekmesinde yeni kayıt noktası */
.mod-sekme[data-mod="foy"] { position: relative; }
body[data-foy-yeni="1"] .mod-sekme[data-mod="foy"]::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--vurgu);
}

/* — Kalem paleti (yüzen, sürüklenebilir) — */
#kalem-araclari {
  position: fixed; left: var(--bosluk-3); bottom: var(--bosluk-4); z-index: var(--kat-panel);
  display: none; flex-direction: column; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-2); width: max-content; max-width: calc(100vw - 16px);
  background: var(--cam-arka); border: 1px solid var(--kenar); border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-2);
  -webkit-backdrop-filter: blur(var(--hud-blur)); backdrop-filter: blur(var(--hud-blur));
}
/* Yalnız lab ve xr'da görünür: base.css'teki rol kuralları (0,2,2) bu kesin kuralı (1,2,1) geçemez */
body:not([data-mod="lab"]):not([data-mod="xr"]) #kalem-araclari { display: none; }
body[data-rol="egitmen"][data-mod="lab"] div#kalem-araclari,
body[data-rol="egitmen"][data-mod="xr"] div#kalem-araclari { display: flex; }
.kalem-tutamac { cursor: grab; touch-action: none; background: transparent; border-color: transparent; }
.kalem-tutamac:active { cursor: grabbing; }
.kalem-grup { display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-2); }
.kalem-renk-dugme {
  width: var(--hedef-min); height: var(--hedef-min); padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, var(--renk) 0 12px, transparent 13px);
  border: 2px solid transparent;
}
.kalem-renk-dugme[aria-checked="true"] { border-color: var(--odak); }
#kalem-renk {
  width: var(--hedef-min); height: var(--hedef-min); padding: 4px; cursor: pointer;
  background: var(--yuzey-2); border: 2px solid var(--kenar); border-radius: 50%;
}
#kalem-renk.secili { border-color: var(--odak); }
#kalem-onay {
  display: flex; flex-direction: column; gap: var(--bosluk-2); align-items: stretch;
  padding: var(--bosluk-2); background: var(--yuzey-2); border: 1px solid var(--durum-hata); border-radius: var(--yaricap-md);
  font-size: var(--boyut-sm, 13px);
}
#kalem-onay[hidden] { display: none; }
#kalem-onay button { min-height: var(--hedef-min); padding: 0 var(--bosluk-3); border-radius: var(--yaricap-md); font: inherit; cursor: pointer; background: var(--yuzey-3); color: var(--on); border: 1px solid var(--kenar); }
#kalem-onay .tehlike { background: var(--durum-hata); color: #fff; border-color: var(--durum-hata); }
#kalem-onay button:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }

/* Çizim tuvali */
body[data-kalem="acik"] #cizim-katmani { pointer-events: auto; touch-action: none; cursor: crosshair; }
body:not([data-kalem="acik"]) #cizim-katmani { pointer-events: none; }

/* — Mobil (<=768px): alt sayfa + yatay palet — */
@media (max-width: 768px) {
  #parametre-paneli {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: 45vh;
    border-radius: var(--yaricap-xl) var(--yaricap-xl) 0 0; padding-top: var(--bosluk-5);
    transition: height var(--sure-normal) var(--egri-standart);
  }
  #parametre-paneli::before {
    content: ""; position: absolute; top: var(--bosluk-2); left: 50%; width: 40px; height: 4px;
    margin-left: -20px; border-radius: var(--yaricap-tam); background: var(--kenar);
  }
  #parametre-paneli[data-katli="1"] { width: auto; height: auto; bottom: 0; }
  #parametre-paneli[data-katli="1"] h2 { display: block; }
  #parametre-paneli[data-katli="1"] .parametre-baslik { justify-content: space-between; }
  #parametre-paneli[data-katli="1"] #parametre-katla .ikon { transform: rotate(-90deg); }
  #parametre-paneli[data-katli="0"] #parametre-katla .ikon { transform: rotate(90deg); }
  #kalem-araclari { flex-direction: row; flex-wrap: wrap; left: var(--bosluk-2); bottom: calc(45vh + var(--bosluk-2)); }
  .kalem-grup { flex-direction: row; }
  #kalem-onay { flex-direction: row; align-items: center; }
}