/* Melce Kur'an — Haremeyn ses / ezber dock görünümü; mevcut DOM'u kullanır. */
:root{--kr-ink:#322d24;--kr-gold:#bf9351;--kr-green:#165844}
body{padding-bottom:245px!important}
.page{padding-bottom:275px!important}
.dock{
  left:0!important;right:0!important;bottom:0!important;
  display:block!important;position:fixed!important;z-index:90!important;
  box-sizing:border-box!important;max-height:min(49vh,355px)!important;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  border-top:2px solid #c09b5e!important;
  background:rgba(255,250,240,.98)!important;
  box-shadow:0 -10px 28px #493a252a!important;
  backdrop-filter:blur(14px);
}
.dock>div{width:min(1080px,100%)!important;margin:auto!important}
.dock #now{display:block!important;color:#433726!important;font-weight:750!important;font-size:13px!important;line-height:1.35!important;margin:0 0 8px!important;white-space:normal!important}
.dock .wave{display:none!important}
.dock > div > audio{display:none!important}
.dock #haremeynControls{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.dock #haremeynControls .hbctrl{
  display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;
  gap:7px!important;margin:0 0 9px!important;
}
.dock #haremeynControls .hbctrl button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  appearance:none!important;opacity:1!important;visibility:visible!important;
  min-height:38px!important;margin:0!important;padding:7px 13px!important;
  background:linear-gradient(#fffefa,#f1e6d2)!important;border:1px solid #c7ab78!important;
  border-radius:10px!important;color:#302718!important;
  font:750 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:0!important;text-shadow:none!important;
  box-shadow:0 2px 5px #4b35101d!important;cursor:pointer!important;
  transition:background .15s,transform .15s,box-shadow .15s!important;
}
.dock #haremeynControls .hbctrl button:hover{transform:translateY(-1px)!important;box-shadow:0 3px 8px #4b351028!important}
.dock #haremeynControls .hbctrl button:focus-visible{outline:3px solid #cfa54c!important;outline-offset:2px!important}
.dock #haremeynControls #hbPlay{background:linear-gradient(#26745b,#13523f)!important;border-color:#124d3e!important;color:white!important}
.dock #haremeynControls #hbStop{background:linear-gradient(#fff8f5,#f5e2da)!important;border-color:#d3a799!important;color:#912d2b!important;min-width:39px!important}
.dock #haremeynControls #hbRepeat{background:linear-gradient(#fff6d9,#f7e7ba)!important;color:#5b420a!important;border-color:#c6aa58!important}
.dock #haremeynControls .hb-ab-button{background:linear-gradient(#eaf7f2,#d7eee6)!important;color:#105641!important;border-color:#8abda9!important}
.dock #haremeynControls .hb-ab-button.armed{background:#165844!important;color:#fff!important;border-color:#165844!important}
.dock #haremeynControls #hbAbClear{color:#813e32!important}
.dock #haremeynControls .hbctrl strong{font-size:12px!important;color:#604d31!important;min-width:23px;text-align:center}
.dock #haremeynControls .hbctrl label{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:6px 8px!important;border-radius:8px!important;color:#3b352b!important;
  font:750 12px/1.25 system-ui,sans-serif!important;white-space:nowrap!important;
}
.dock #haremeynControls .hbctrl input[type=checkbox]{accent-color:#14674c;width:15px;height:15px;margin:0}
#hbWaveScroll{
  display:block!important;position:relative!important;width:100%!important;
  max-width:100%!important;height:67px!important;min-height:67px!important;
  background:linear-gradient(180deg,#fcf7eb,#efe6d3)!important;
  border:1px solid #d5c299!important;border-radius:12px!important;
  box-shadow:inset 0 2px 6px #4b3e2512!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:thin!important;scrollbar-color:#b6a27b #f0e7d7;
}
#hbWaveContent{height:65px!important;min-width:100%!important;position:relative!important;cursor:crosshair!important}
#hbWaveBars{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:stretch!important;gap:1px!important;pointer-events:none!important}
#hbWaveBars i{display:block!important;flex:1 0 1px!important;min-width:1px!important;max-height:57px!important;align-self:center!important;border-radius:2px!important;background:#258064!important;opacity:.82!important}
#hbWaveCursor{position:absolute!important;z-index:3!important;top:0!important;bottom:0!important;width:3px!important;background:#b13a38!important;pointer-events:none!important;box-shadow:0 0 2px #742d20!important}
#hbWaveScroll:empty{display:block!important}
.dock #haremeynControls .hbtime{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;align-items:center!important;gap:12px!important;margin:8px 1px 2px!important;color:#4f4534!important;font:650 12px system-ui,sans-serif!important}
.dock #haremeynControls .hbtime span:last-child{text-align:right!important}
.dock #haremeynControls #hbSeek{
  display:block!important;width:100%!important;min-width:0!important;height:18px!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  accent-color:#19644c!important;cursor:pointer!important;appearance:none!important;
}
.dock #haremeynControls #hbSeek::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,#258064 0%,#258064 var(--kr-seek-progress,0%),#d7cdb9 var(--kr-seek-progress,0%),#d7cdb9 100%);border:1px solid #bda783}
.dock #haremeynControls #hbSeek::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#145641;border:3px solid #fff9ea;box-shadow:0 0 0 1px #82693f}
.dock #haremeynControls #hbSeek::-moz-range-track{height:8px;background:#d7cdb9;border-radius:999px}
.dock #haremeynControls #hbSeek::-moz-range-progress{height:8px;background:#258064;border-radius:999px}
.dock #haremeynControls #hbSeek::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#145641;border:2px solid #fff9ea}
#hbAbState{flex-basis:100%;text-align:center;font:650 11px/1.35 system-ui,sans-serif;color:#526354;min-height:14px}
.dock #warn{display:block!important;font-size:11px!important;line-height:1.3!important;margin:5px 0 0!important;color:#98524a!important}
@media(max-width:650px){
 body{padding-bottom:290px!important}
 .page{padding-bottom:320px!important}
 .dock{max-height:min(53dvh,350px)!important;padding:8px 6px calc(9px + env(safe-area-inset-bottom,0px))!important}
 .dock #now{font-size:11px!important;margin-bottom:5px!important}
 .dock #haremeynControls .hbctrl{gap:5px!important;margin-bottom:7px!important}
 .dock #haremeynControls .hbctrl button{font-size:11px!important;min-height:35px!important;padding:6px 9px!important;border-radius:8px!important}
 .dock #haremeynControls .hbctrl label{font-size:11px!important;padding:5px!important}
 #hbWaveScroll{height:56px!important;min-height:56px!important}
 #hbWaveContent{height:54px!important}
 #hbWaveBars i{max-height:48px!important}
 .dock #haremeynControls .hbtime{gap:6px!important;font-size:11px!important}
}