/* MyYT — CSS murni. Warna dan spasi utama diatur di sini. */
:root {
  color-scheme: dark;
  --bg: #0b1220; --panel: #111c2e; --panel2: #17243a;
  --line: #29374d; --text: #f4f7fb; --muted: #a6b4c9;
  --accent: #f85c62; --accent-hover: #ff7377; --ring: #80baff;
  --radius: 18px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
body.has-modal { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { min-height: 78px; padding: 14px max(5vw, calc((100vw - 1250px)/2));
  display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #1e2a3d; }
.brand { display:flex; align-items:center; gap:10px; font-size:28px; font-weight:830; letter-spacing:-1.5px; }
.brand-icon { background:var(--accent); color:white; border-radius:12px; font-size:16px;
  display:grid; place-items:center; width:39px; height:35px; padding-left:3px; }
.red { color:var(--accent); }
.header-actions, .hero-actions, .button-row, .row-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ghost-button, .secondary-button, .text-button, .icon-button { color:var(--text); background:transparent;
  border:1px solid var(--line); border-radius:11px; padding:10px 15px; }
.ghost-button:hover, .secondary-button:hover, .icon-button:hover { border-color:#667a98; background:#1c2a40; }
.text-button { border:none; color:#ffd4d4; padding:10px 6px; }
.text-button:hover { text-decoration:underline; }
.main-content { width:min(1250px, 90%); margin:0 auto; flex:1; }
.hero { margin:28px 0 50px; padding:48px 55px; min-height:310px; display:flex; justify-content:space-between;
  align-items:center; gap:35px; overflow:hidden; border-radius:27px;
  background:radial-gradient(ellipse at 80% 35%, #334260 0%, transparent 48%),
             linear-gradient(115deg, #18273e, #101c2d 70%); border:1px solid #24344b; }
.hero h1 { font-size:clamp(28px,4vw,52px); line-height:1.12; letter-spacing:-2px; margin:8px 0 15px; }
.muted-heading { color:#b7c5d9; }
.eyebrow { font-size:11px; letter-spacing:2.4px; font-weight:800; color:#ff8990; margin:0; }
.hero-desc { color:var(--muted); font-size:15px; margin:0 0 22px; max-width:440px; line-height:1.6; }
.profile-pill { display:inline-flex; align-items:center; border:1px solid #5b5269;
  background:#29304b; border-radius:20px; padding:8px 14px; font-weight:650; }
.usage-label { font-size:13px; color:#fbd3af; margin:12px 0 0; }
.hero-art { position:relative; height:240px; width:270px; flex:none; display:flex; align-items:center; justify-content:center; }
.art-circle { width:200px; height:200px; border:3px solid #f2637066; background:linear-gradient(135deg,#f45b6f,#b84577);
  display:grid; place-items:center; border-radius:50%; font-size:75px; text-shadow:0 5px 30px #0003; padding-left:15px;
  box-shadow:0 0 0 20px #f75a6a11,0 0 0 42px #f75a6a0a; transform:rotate(-8deg); }
.hero-art>span { position:absolute; bottom:0; right:0; font-size:11px; font-weight:850; letter-spacing:4px;
  line-height:1.6; color:#d1a4b3; text-align:right; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
h2 { letter-spacing:-.8px; }
.section-head h2 { font-size:27px; margin:8px 0 0; }
.search-box { display:flex; align-items:center; gap:8px; background:#162135; border:1px solid var(--line);
  border-radius:11px; padding:0 14px; width:min(350px,100%); color:var(--muted); font-size:27px; }
.search-box input { flex:1; min-width:0; color:var(--text); outline:none; border:0; background:transparent;
  padding:13px 0; font-size:14px; }
.search-box input::placeholder { color:#91a0b4; }
.video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-bottom:60px; }
.video-card { display:block; padding:0; text-align:left; color:var(--text); border:1px solid #253247;
  background:var(--panel); border-radius:15px; overflow:hidden; transition:transform .15s,border-color .15s,box-shadow .15s; }
.video-card:hover { transform:translateY(-4px); border-color:#50637f; box-shadow:0 10px 35px #0005; }
.video-thumb { position:relative; aspect-ratio:16/9; background:#273147; overflow:hidden; }
.video-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.duration-tag { position:absolute; right:9px; bottom:9px; background:#101522dd; color:white;
  padding:3px 6px; font-size:11px; font-weight:700; border-radius:4px; }
.play-overlay { position:absolute; inset:0; display:grid; place-items:center; font-size:28px;
  background:#0002; color:white; text-shadow:0 3px 14px black; opacity:0; transition:opacity .15s; }
.video-card:hover .play-overlay, .video-card:focus-visible .play-overlay { opacity:1; }
.video-caption { padding:15px; display:flex; flex-direction:column; gap:7px; min-height:86px; }
.video-caption strong { font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.video-caption span { font-size:12px; color:var(--muted); }
.notice { background:#27374c; border:1px solid #4a6a87; color:#e4f1ff; border-radius:12px;
  padding:14px 18px; margin-bottom:16px; line-height:1.5; }
.empty-state { text-align:center; padding:70px 20px 90px; color:var(--muted); border:1px dashed #334660; border-radius:20px; }
.empty-state h3 { margin:12px 0 8px; color:var(--text); font-size:20px; }
.empty-state p { margin:0; }
.empty-icon { font-size:45px; color:#637a95; }
.footer { text-align:center; padding:25px; color:#8190a5; border-top:1px solid #1d2839; font-size:12px; }

/* Modal umum: hidden memakai atribut HTML, bukan class buatan. */
.overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px;
  background:#040915de; backdrop-filter:blur(9px); overflow-y:auto; }
.player-panel { width:min(1020px,100%); padding:22px; background:#121d30; border:1px solid #34465d;
  border-radius:20px; box-shadow:0 25px 100px #000a; }
.modal-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:15px; }
.modal-top h2 { margin:0; font-size:clamp(18px,2.5vw,24px); line-height:1.35; }
.icon-button { height:39px; width:39px; padding:0; flex:none; font-size:20px; }
.player-aspect { position:relative; aspect-ratio:16/9; background:black; overflow:hidden; border-radius:12px; }
#ytPlayer, #ytPlayer iframe { width:100%; height:100%; }
.player-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.player-controls button { background:#1d3048; color:var(--text); border:1px solid #344b69; padding:10px 15px; border-radius:10px; }
.player-controls button:hover, .player-controls button.active { background:#5c2d40; border-color:var(--accent); }
.player-note { text-align:center; font-size:12px; color:var(--muted); margin:15px 0 2px; }
.small-panel { width:min(430px,100%); padding:28px; border-radius:18px; background:#152238;
  border:1px solid #34465d; box-shadow:0 22px 75px #000a; }
.small-panel h2 { margin:0; }
.small-panel form { display:grid; gap:18px; margin-top:18px; }
.muted { color:var(--muted); font-size:13px; line-height:1.6; }
label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:650; }
input:not([type="search"]), select { width:100%; border-radius:9px; border:1px solid #3c4e67;
  background:#0d1829; color:var(--text); padding:11px 12px; min-height:43px; font-size:14px; }
input::placeholder { color:#798ca5; }
.primary-button, .secondary-button, .danger-button { border-radius:10px; border:1px solid transparent;
  padding:11px 16px; font-weight:700; }
.primary-button { background:var(--accent); color:#fff; }
.primary-button:hover { background:var(--accent-hover); }
.secondary-button { background:#263752; border-color:#40546f; color:var(--text); }
.danger-button { color:#ffdce0; background:#4e2934; border-color:#75424d; }
.danger-button:hover { background:#7c3448; }
.full { width:100%; }
.manager-overlay { place-items:stretch center; }
.manager-panel { width:min(930px,100%); margin:auto; background:#121d30; border:1px solid #3a4b61;
  border-radius:18px; box-shadow:0 25px 90px #0009; }
.manager-header { padding:25px 30px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line); }
.manager-header h2 { font-size:25px; margin:7px 0 0; }
.manager-body { padding:10px 30px 30px; }
.manage-section { padding:27px 0; border-bottom:1px solid var(--line); }
.manage-section:last-child { border-bottom:none; padding-bottom:0; }
.manage-section h3 { font-size:19px; margin:0 0 6px; }
.manage-section h4 { font-size:14px; margin:22px 0 10px; }
.manage-section>.muted { margin:4px 0 16px; }
.form-stack { display:grid; gap:15px; margin:14px 0; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.optional { color:#94b9e3; font-size:12px; font-weight:500; }
.manage-list { border:1px solid var(--line); background:#0d1829; border-radius:12px;
  padding:9px 15px; color:var(--muted); font-size:12px; margin-top:14px; }
.manage-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:11px 0;
  border-bottom:1px solid #283750; }
.manage-row:last-child { border-bottom:none; }
.manage-row>div:first-child { flex:1; min-width:0; }
.manage-row strong { display:block; font-size:13px; color:var(--text); margin-bottom:4px; overflow-wrap:anywhere; }
.manage-row span { display:block; overflow-wrap:anywhere; }
.mini-button, .mini-danger { border:1px solid #465c78; background:#263954; color:var(--text);
  border-radius:7px; padding:7px 9px; font-size:12px; }
.mini-danger { border-color:#865264; color:#ffd5dc; background:#542e3a; }
.limit-overlay { z-index:110; }
.center { text-align:center; }
.limit-emoji { font-size:60px; margin:5px 0 14px; }
.toast { position:fixed; z-index:200; bottom:25px; left:50%; transform:translateX(-50%);
  background:#253d57; color:white; border:1px solid #5c7995; border-radius:11px;
  padding:13px 19px; max-width:min(550px,94%); text-align:center; box-shadow:0 10px 35px #0009; }
@media(max-width:1050px) { .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:740px) {
  .site-header { padding:13px 5%; min-height:68px; } .brand { font-size:23px; }
  .main-content { width:92%; } .hero { padding:30px; margin:22px 0 32px; min-height:0; }
  .hero-art { display:none; } .hero h1 { letter-spacing:-1.2px; }
  .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .section-head { flex-direction:column; align-items:stretch; } .search-box { width:100%; }
  .video-caption { padding:11px; min-height:85px; }
  .player-panel { padding:12px; } .manager-header { padding:18px; } .manager-body { padding:0 18px 20px; }
  .desktop-only { display:none; }
}
@media(max-width:440px) {
  .video-grid { grid-template-columns:1fr; }
  .video-card { display:grid; grid-template-columns:46% 1fr; }
  .video-thumb { min-height:100%; } .video-caption { padding:12px; justify-content:center; }
  .field-grid { grid-template-columns:1fr; } .header-actions { gap:5px; }
  .ghost-button { padding:8px 10px; font-size:12px; }
  .player-controls { gap:6px; } .player-controls button { padding:9px 11px; font-size:12px; }
  .player-controls button span { display:none; } .manager-header h2 { font-size:22px; }
}