:root{ --accent:#25d9a4; }
*{box-sizing:border-box; margin:0; padding:0;}

/* 1. ეკრანის სრული ზომები */
html, body{
  width:100%; 
  height:100%; 
  overflow:hidden; 
  background:#0d0f12; 
  font-family:'Noto Sans Georgian',sans-serif; 
  color:#fff;
}

.wrap{
  width:100%; 
  height:100vh; 
  max-width:none; 
  margin:0; 
  transition:.3s;
}

.player{
  position:relative; 
  background:#000; 
  width:100%; 
  height:100%; 
  overflow:hidden; 
  user-select:none; 
  border-radius:0;
}

video{
  width:100%; 
  height:100%; 
  display:block; 
  object-fit:contain;
}
video::cue{background:rgba(0,0,0,.75); font-family:'Noto Sans Georgian',sans-serif;}

/* ჩრდილი ქვედა ნაწილზე */
.shade{
  position:absolute; 
  left:0; 
  right:0; 
  bottom:0; 
  height:140px; 
  pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.85)); 
  transition:.25s;
}

/* უოთერმარკი */
.watermark{
  position:absolute; 
  top:14px; 
  right:20px; 
  text-align:right; 
  opacity:.9;
  text-shadow:0 1px 4px rgba(0,0,0,.9); 
  transition:.25s;
}
.watermark b{font-size:15px; letter-spacing:1px;}
.watermark small{display:block; font-size:8px; letter-spacing:6px; color:var(--accent);}

/* დიდი play ცენტრში */
.center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.big-play{
  width:74px; 
  height:74px; 
  border-radius:50%; 
  background:rgba(15,15,15,.55);
  border:2px solid rgba(255,255,255,.9); 
  display:flex; 
  align-items:center; 
  justify-content:center;
  opacity:0; 
  transform:scale(.8); 
  transition:.2s;
}
.player.paused .big-play{opacity:1; transform:none;}
.big-play svg{width:30px; height:30px; fill:#fff; margin-left:5px;}

/* სპინერი */
.spinner{
  position:absolute; 
  top:50%; 
  left:50%; 
  width:54px; 
  height:54px; 
  margin:-27px 0 0 -27px;
  border-radius:50%; 
  border:4px solid rgba(255,255,255,.2); 
  border-top-color:var(--accent);
  animation:spin .8s linear infinite; 
  opacity:0; 
  pointer-events:none; 
  transition:.2s;
}
.player.loading .spinner{opacity:1;}
@keyframes spin{to{transform:rotate(360deg)}}

/* 2. პროგრესის ზოლი — ღილაკების (კონტროლების) ზემოთ */
.progress-area{
  position:absolute; 
  left:0; 
  right:0; 
  bottom:52px; /* აწეულია ღილაკების მაღლა */
  height:16px; 
  cursor:pointer;
  display:flex; 
  align-items:flex-end; 
  transition:.25s;
  z-index:2;
}
.track{position:relative; width:100%; height:3px; background:rgba(255,255,255,.25); transition:height .15s;}
.progress-area:hover .track, .progress-area.seeking .track{height:6px;}
.buffered,.fill{position:absolute; left:0; top:0; bottom:0; width:0;}
.buffered{background:rgba(255,255,255,.35);}
.fill{background:var(--accent);}
.knob{
  position:absolute; 
  right:-6px; 
  top:50%; 
  width:13px; 
  height:13px; 
  border-radius:50%;
  background:var(--accent); 
  transform:translateY(-50%) scale(0); 
  transition:.15s;
}
.progress-area:hover .knob, .progress-area.seeking .knob{transform:translateY(-50%) scale(1);}

/* 3. სამართავი პანელი (ღილაკები) — ქვედა ნაწილში */
.controls{
  position:absolute; 
  left:0; 
  right:0; 
  bottom:0px; 
  height:48px; 
  padding:0 12px;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  transition:.25s;
  z-index:1;
}
.left,.right{display:flex; align-items:center; gap:2px;}
.btn{
  background:none; 
  border:0; 
  width:36px; 
  height:36px; 
  border-radius:4px; 
  cursor:pointer;
  color:#fff; 
  opacity:.9; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
}
.btn:hover{opacity:1; color:var(--accent);}
.btn.active{color:var(--accent);}
.btn svg{width:22px; height:22px; fill:currentColor;}
.time{font-size:13px; color:#eee; margin-left:8px; white-space:nowrap; font-variant-numeric:tabular-nums;}

/* 4. ლოგო და ლინკის სტილები */
.logo{font-weight:800; font-size:14px; letter-spacing:.5px; margin-right:12px; opacity:.95; cursor:default;}
.logo span{color:var(--accent);}
a,
a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
}

input[type=range]{
  -webkit-appearance:none; 
  appearance:none; 
  width:70px; 
  height:4px; 
  margin:0 8px;
  background:rgba(255,255,255,.3); 
  border-radius:2px; 
  outline:none; 
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--accent);}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border:0; border-radius:50%; background:var(--accent);}

/* პარამეტრების მენიუ */
.menu{
  position:absolute; 
  right:12px; 
  bottom:80px; 
  width:230px; 
  z-index:5; 
  padding:6px 0;
  background:rgba(33,34,37,.97); 
  border-radius:6px; 
  font-size:13.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.55); 
  opacity:0; 
  visibility:hidden; 
  transform:translateY(8px); 
  transition:.18s;
}
.menu.open{opacity:1; visibility:visible; transform:none;}
.m-row{display:flex; align-items:center; padding:9px 14px; cursor:pointer;}
.m-row:hover,.m-opt:hover,.m-head:hover{background:rgba(255,255,255,.08);}
.m-label{color:#fff;}
.m-value{color:#9aa0a6; margin-left:auto; margin-right:8px;}
.chev{width:13px; height:13px; fill:#9aa0a6;}
.m-head{
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:9px 12px; 
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.1); 
  margin-bottom:4px; 
  cursor:pointer;
}
.m-head svg{width:18px; height:18px; fill:#fff;}
.m-opt{display:flex; align-items:center; justify-content:space-between; padding:9px 14px 9px 36px; cursor:pointer; position:relative;}
.m-opt svg{width:15px; height:15px; fill:var(--accent);}

/* toast შეტყობინება */
.toast{
  position:absolute; 
  left:50%; 
  bottom:95px; 
  transform:translateX(-50%) translateY(8px);
  background:rgba(20,20,20,.92); 
  padding:8px 18px; 
  border-radius:20px; 
  font-size:13px;
  opacity:0; 
  transition:.25s; 
  pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%);}

/* კონტროლების ავტო-დამალვა */
.player.hide .controls,.player.hide .progress-area,.player.hide .shade{opacity:0; pointer-events:none;}
.player.hide{cursor:none;}

@media(max-width:640px){ .logo,input[type=range]{display:none;} .time{font-size:11px;} }