.dkp-player{--radius:0px}
.dkp-player__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.dkp-player__frame iframe,.dkp-player__frame video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;background:#000}
.dkp-player__empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#c9c9d6;text-align:center;padding:16px}
.dkp-stage{background:#000;border-radius:var(--radius);overflow:hidden}
.dkp-stage .dkp-player__frame{border-radius:0}
.dkp-yt__shield{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;border:0;background:transparent;cursor:pointer;padding:0}
.dkp-stage{position:relative}
.dkp-stage.is-yt:not(.is-playing) .dkp-player__frame::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='%23000' fill-opacity='.55' stroke='%23fff' stroke-opacity='.85' stroke-width='3'/%3E%3Cpath d='M32 24v32l26-16z' fill='%23fff'/%3E%3C/svg%3E") center/clamp(64px,12vw,96px) no-repeat;pointer-events:none}
.dkp-yt__pill{position:absolute;right:14px;bottom:14px;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:999px;color:#fff;font-weight:700;font-size:.9rem;line-height:1;font-family:inherit;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .15s,bottom .25s,filter .15s;animation:dkpPillIn .25s ease both;-webkit-tap-highlight-color:transparent}
.dkp-yt__pill svg{width:20px;height:20px;flex:none}
.dkp-yt__pill--skip{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.dkp-yt__pill--next{background:rgba(18,18,24,.8);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dkp-yt__pill:hover{transform:translateY(-1px) scale(1.04);filter:brightness(1.1)}
.dkp-yt__pill:active{transform:scale(.97)}
.dkp-yt__pill[hidden]{display:none}
.dkp-stage.is-plain-video .dkp-yt__pill{bottom:64px}
@keyframes dkpPillIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dkp-ctrl{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;background:linear-gradient(180deg,#17171e,#0c0c10);color:#eee}
.dkp-ctrl[hidden]{display:none}
.dkp-ctrl__row{display:flex;align-items:center;gap:10px}
.dkp-ctrl__row--btns{justify-content:space-between;flex-wrap:wrap}
.dkp-ctrl__grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dkp-ctrl__grp--r{justify-content:flex-end}
.dkp-ctrl__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 10px;border:0;border-radius:12px;background:rgba(255,255,255,.09);color:#fff;font-weight:600;font-size:.85rem;line-height:1;font-family:inherit;cursor:pointer;transition:background .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.dkp-ctrl__btn svg{width:24px;height:24px;flex:none}
.dkp-ctrl__btn:hover{background:rgba(255,255,255,.2)}
.dkp-ctrl__btn:active{transform:scale(.94)}
.dkp-ctrl__btn--main{background:var(--accent);color:var(--on-accent);min-width:48px;border-radius:50%;height:48px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.dkp-ctrl__btn--main:hover{background:var(--accent);filter:brightness(1.15)}
.dkp-ctrl__btn.is-off{opacity:.5}
.dkp-ctrl__btn.is-off::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:#fff;transform:rotate(-35deg);border-radius:2px}
.dkp-pmenu{position:absolute;right:12px;z-index:8;min-width:190px;max-width:calc(100% - 24px);max-height:60%;overflow:auto;padding:6px;border-radius:14px;background:rgba(18,18,24,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dkp-pmenu[hidden]{display:none}
.dkp-pmenu__title{padding:6px 10px 8px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#9a9aab}
.dkp-pmenu__item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#fff;font-family:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.dkp-pmenu__item:hover{background:rgba(255,255,255,.1)}
.dkp-pmenu__item.is-active{background:color-mix(in srgb,var(--accent) 28%,transparent);font-weight:700}
.dkp-pmenu__item.is-active::after{content:"\2713";color:var(--accent)}
.dkp-pmenu__note{padding:8px 12px;font-size:.82rem;color:#b5b5c4;max-width:240px}
.dkp-stage.is-yt-native .dkp-yt__pill{bottom:64px}
.dkp-ctrl__btn--next{padding:0 14px}
.dkp-ctrl__lbl{display:none}
.dkp-ctrl__time{font-variant-numeric:tabular-nums;font-size:.82rem;color:#c9c9d6;min-width:40px;text-align:center}
.dkp-ctrl__seek{flex:1 1 auto;min-width:80px;height:6px;accent-color:var(--accent);cursor:pointer}
.dkp-ctrl__speed{height:42px;padding:0 10px;background:rgba(255,255,255,.09);color:#fff;border:0;border-radius:12px;font-weight:600;font-size:.85rem;line-height:1;font-family:inherit}
.dkp-ctrl__speed option{background:#1c1c24}
.dkp-ctrl__auto{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:#c9c9d6;white-space:nowrap;padding:0 4px}
.dkp-stage.is-yt .dkp-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:5;gap:2px;padding:28px 10px 8px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.5) 60%,rgba(0,0,0,0));pointer-events:none;transition:opacity .25s,transform .25s}
.dkp-stage.is-yt .dkp-ctrl__row{pointer-events:none}
.dkp-stage.is-yt .dkp-ctrl__btn,.dkp-stage.is-yt .dkp-ctrl__seek,.dkp-stage.is-yt .dkp-ctrl__speed,.dkp-stage.is-yt .dkp-ctrl__auto,.dkp-stage.is-yt .dkp-ctrl__time{pointer-events:auto}
.dkp-stage.is-yt .dkp-ctrl__btn{height:38px;min-width:38px;border-radius:10px;background:rgba(255,255,255,.14)}
.dkp-stage.is-yt .dkp-ctrl__btn--main{height:42px;min-width:42px;border-radius:50%;background:var(--accent)}
.dkp-stage.is-yt .dkp-ctrl__speed{height:38px;background:rgba(255,255,255,.14)}
.dkp-stage.is-yt.is-idle .dkp-ctrl{opacity:0;transform:translateY(10px)}
.dkp-stage.is-yt.is-idle .dkp-ctrl *{pointer-events:none}
.dkp-stage.is-yt.is-idle{cursor:none}
.dkp-stage.is-yt .dkp-yt__pill{bottom:96px}
.dkp-stage.is-yt.is-idle .dkp-yt__pill{bottom:14px}
.dkp-ctrl--lite{display:none!important}
.dkp-ctrl--video [data-act=cc]{display:none!important}
.dkp-yt__top{position:absolute;top:10px;right:10px;z-index:6;display:flex;align-items:center;gap:8px}
.dkp-yt__top .dkp-yt__pill{position:static;animation:none;padding:7px 14px;font-size:.82rem;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.dkp-yt__top .dkp-yt__pill svg{width:18px;height:18px}
.dkp-yt__auto{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;background:rgba(18,18,24,.8);color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dkp-ctrl--lite .dkp-ctrl__row--seek,.dkp-ctrl--lite .dkp-ctrl__grp:not(.dkp-ctrl__grp--r){display:none}
.dkp-ctrl--lite .dkp-ctrl__grp--r>*:not([data-act=next]):not(.dkp-ctrl__auto){display:none}
.dkp-ctrl--lite.dkp-ctrl--iframe .dkp-ctrl__auto{display:none}
.dkp-ctrl--lite .dkp-ctrl__row--btns{justify-content:flex-end}
.dkp-ctrl--lite{padding:8px 12px}
.dkp-stage{container-type:inline-size;container-name:dkpp}
.dkp-ctrl__seek{-webkit-appearance:none;appearance:none;background:transparent;height:28px;margin:0;padding:0;cursor:pointer;touch-action:pan-y;--p:0%}
.dkp-ctrl__seek::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(to right,var(--accent) var(--p),rgba(255,255,255,.3) var(--p))}
.dkp-ctrl__seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-4.5px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .1s}
.dkp-ctrl__seek:active::-webkit-slider-thumb{transform:scale(1.3)}
.dkp-ctrl__seek::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.3)}
.dkp-ctrl__seek::-moz-range-progress{height:5px;border-radius:99px;background:var(--accent)}
.dkp-ctrl__seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.dkp-ctrl__row--btns{flex-wrap:nowrap}
.dkp-ctrl__grp{flex-wrap:nowrap;min-width:0}
.dkp-player__msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;max-width:86%;padding:12px 16px;border-radius:12px;background:rgba(18,18,24,.92);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.88rem;text-align:center;line-height:1.4}
.dkp-pmenu{box-sizing:border-box;display:flex;flex-direction:column;max-height:min(60%,300px);overflow:hidden;padding:6px 0 6px 6px}
.dkp-pmenu[hidden]{display:none}
.dkp-pmenu__title{flex:none}
.dkp-pmenu__list{flex:1 1 auto;min-height:0;display:block;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.dkp-pmenu__list::-webkit-scrollbar{width:6px}
.dkp-pmenu__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:99px}
.dkp-pmenu__item{box-sizing:border-box;min-width:0;flex:none;white-space:normal;overflow-wrap:anywhere;text-align:left}
@media (hover:none){.dkp-yt__pill:hover,.dkp-ctrl__btn:hover{transform:none;filter:none}}
@container dkpp (max-width:479px){
.dkp-stage.is-yt .dkp-ctrl{padding:22px 8px 6px;gap:0}
.dkp-stage.is-yt .dkp-ctrl__btn{height:36px;min-width:36px;padding:0 6px}
.dkp-stage.is-yt .dkp-ctrl__btn--main{height:40px;min-width:40px}
.dkp-stage.is-yt .dkp-ctrl__btn svg{width:22px;height:22px}
.dkp-stage.is-yt .dkp-ctrl__speed{height:36px;padding:0 4px;font-size:.76rem}
.dkp-ctrl__auto,.dkp-ctrl__btn[data-act=mute]{display:none!important}
.dkp-ctrl__time{min-width:34px;font-size:.72rem}
.dkp-ctrl__row{gap:6px}
.dkp-stage.is-yt .dkp-yt__pill{bottom:80px;padding:8px 14px;font-size:.8rem}
.dkp-stage.is-yt .dkp-yt__pill svg{width:16px;height:16px}
.dkp-yt__top{top:6px;right:6px;gap:6px}
.dkp-yt__top .dkp-yt__pill{padding:6px 11px;font-size:.74rem}
.dkp-yt__auto{padding:6px 10px;font-size:.74rem}
.dkp-pmenu{left:8px;right:8px;min-width:0;max-width:none}
}
@container dkpp (max-width:339px){.dkp-ctrl__speed{display:none}}
@container dkpp (min-width:480px) and (max-width:719px){
.dkp-stage.is-yt .dkp-yt__pill{bottom:92px}
}
@container dkpp (min-width:640px){.dkp-ctrl__lbl{display:inline}}
@container dkpp (min-width:720px){
.dkp-stage.is-yt .dkp-ctrl{padding:34px 18px 12px;gap:4px}
.dkp-stage.is-yt .dkp-ctrl__btn{height:42px;min-width:42px;border-radius:12px}
.dkp-stage.is-yt .dkp-ctrl__btn--main{height:48px;min-width:48px}
.dkp-stage.is-yt .dkp-ctrl__speed{height:42px}
.dkp-ctrl__time{font-size:.88rem;min-width:46px}
.dkp-stage.is-yt .dkp-yt__pill{bottom:112px;padding:12px 22px;font-size:1rem}
.dkp-yt__top{top:14px;right:14px}
}
@container dkpp (min-width:1100px){
.dkp-stage.is-yt .dkp-ctrl{padding:42px 26px 16px}
.dkp-stage.is-yt .dkp-yt__pill{bottom:124px}
}
.dkp-stage.is-yt.is-idle .dkp-yt__pill{bottom:14px}
.dkp-stage.is-fs,.dkp-stage:fullscreen,.dkp-stage:-webkit-full-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;width:100vw;height:100vh;height:100dvh;border-radius:0;display:flex;flex-direction:column;background:#000}
.dkp-stage.is-fs .dkp-player__frame,.dkp-stage:fullscreen .dkp-player__frame,.dkp-stage:-webkit-full-screen .dkp-player__frame{flex:1;aspect-ratio:auto;height:auto}
html.dkp-fs-lock,html.dkp-fs-lock body{overflow:hidden}
.dkp-stage.is-fs.is-yt .dkp-ctrl{gap:8px;padding:34px max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 55%,rgba(0,0,0,0));transition:opacity .25s,transform .25s}
.dkp-stage.is-fs.is-yt.is-idle .dkp-ctrl{opacity:0;transform:translateY(10px);pointer-events:none}
.dkp-stage.is-fs.is-yt.is-idle{cursor:none}
.dkp-stage.is-fs .dkp-yt__pill{font-size:1.05rem;padding:13px 24px;right:max(20px,env(safe-area-inset-right))}
.dkp-stage.is-fs.is-yt .dkp-yt__pill{bottom:128px}
.dkp-stage.is-fs.is-yt.is-idle .dkp-yt__pill{bottom:28px}
.dkp-stage.is-fs.is-plain-video .dkp-yt__pill{bottom:84px}
@media (max-height:500px) and (orientation:landscape){
.dkp-stage.is-fs.is-yt .dkp-ctrl{padding-top:22px;gap:4px}
.dkp-stage.is-fs .dkp-ctrl__btn{height:38px;min-width:38px;border-radius:10px}
.dkp-stage.is-fs .dkp-ctrl__btn--main{height:42px;min-width:42px}
.dkp-stage.is-fs .dkp-ctrl__speed{height:38px}
.dkp-stage.is-fs.is-yt .dkp-yt__pill{bottom:104px;padding:10px 18px;font-size:.95rem}
.dkp-stage.is-fs.is-yt.is-idle .dkp-yt__pill{bottom:18px}
}

/* Integrasi dengan tata letak donghuaku */
.dk-watch .dk-theater .dkp-stage{border-radius:0}
.dk-watch .dk-theater .dkp-player__frame{border-radius:0}
.dkp-ctrl{font-family:var(--font,inherit)}
.dkp-player__frame video{object-fit:contain}
.dkp-ctrl__btn:focus-visible,.dkp-ctrl__speed:focus-visible,.dkp-yt__pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cadangan: browser tanpa container query (Safari < 16, Chrome < 105, Firefox < 110) memakai lebar layar */
@supports not (container-type:inline-size){
 @media (max-width:520px){
  .dkp-stage.is-yt .dkp-ctrl{padding:22px 8px 6px;gap:0}
  .dkp-stage.is-yt .dkp-ctrl__btn{height:36px;min-width:36px;padding:0 6px}
  .dkp-stage.is-yt .dkp-ctrl__btn--main{height:40px;min-width:40px}
  .dkp-stage.is-yt .dkp-ctrl__btn svg{width:22px;height:22px}
  .dkp-stage.is-yt .dkp-ctrl__speed{height:36px;padding:0 4px;font-size:.76rem}
  .dkp-ctrl__auto,.dkp-ctrl__btn[data-act=mute]{display:none!important}
  .dkp-ctrl__time{min-width:34px;font-size:.72rem}
  .dkp-ctrl__row{gap:6px}
  .dkp-stage.is-yt .dkp-yt__pill{bottom:80px;padding:8px 14px;font-size:.8rem}
  .dkp-yt__top{top:6px;right:6px;gap:6px}
  .dkp-yt__top .dkp-yt__pill{padding:6px 11px;font-size:.74rem}
  .dkp-yt__auto{padding:6px 10px;font-size:.74rem}
  .dkp-pmenu{left:8px;right:8px;min-width:0;max-width:none}
 }
 @media (max-width:360px){.dkp-ctrl__speed{display:none}}
 @media (min-width:640px){.dkp-ctrl__lbl{display:inline}}
}
/* Layar penuh untuk browser tanpa shorthand inset (Safari < 14.1) */
.dkp-stage.is-fs,.dkp-stage:fullscreen,.dkp-stage:-webkit-full-screen{top:0;right:0;bottom:0;left:0}

/* Browser tanpa aspect-ratio (Safari < 15, Chrome < 88, WebView lama): bingkai video tetap 16:9 */
@supports not (aspect-ratio:1/1){
 .dkp-player__frame{height:0;padding-top:56.25%}
 .dkp-stage.is-fs .dkp-player__frame,.dkp-stage:fullscreen .dkp-player__frame,.dkp-stage:-webkit-full-screen .dkp-player__frame{height:auto;padding-top:0}
}