:root{--bg:#faf8ff;--surface:#fff;--text:#25123e;--muted:#82748f;--line:#eae3f2;--purple:#7226dc;--pink:#ed0bd3;--soft:#f2eaff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}body.dark{--bg:#110b1c;--surface:#1c132b;--text:#f3eaff;--muted:#b2a2c4;--line:#332343;--soft:#2a1642}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:0;border-radius:12px;padding:12px 18px;background:var(--soft);color:var(--text)}button:hover{filter:brightness(.94)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--pink);outline-offset:3px}header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:32px;padding:14px 5%;background:var(--surface);border-bottom:1px solid var(--line)}.brand{width:190px;display:block}.brand img{width:100%;display:block}nav,.tools{display:flex;gap:8px;align-items:center}nav button{background:none;color:var(--muted);padding:10px}.active{color:var(--purple)!important;background:var(--soft)!important}.tools{margin-left:auto}.tools select{max-width:130px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:10px}main{max-width:1320px;margin:auto;padding:28px 40px}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:430px;border-radius:30px;background:linear-gradient(120deg,var(--surface),var(--soft));border:1px solid var(--line);padding:48px;overflow:hidden}.eyebrow{color:var(--purple);font-size:11px;font-weight:800;letter-spacing:2px}h1{font-size:clamp(38px,5vw,64px);letter-spacing:-3px;line-height:1.06;margin:20px 0}h1 em{font-style:normal;background:linear-gradient(100deg,var(--purple),var(--pink));color:transparent;background-clip:text}.hero p{color:var(--muted);line-height:1.8;font-size:15px}.primary{background:linear-gradient(110deg,var(--purple),var(--pink));color:#fff;font-weight:700;padding:15px 23px}.primary span{margin-left:30px}.hero-tags{display:flex;gap:14px;margin-top:26px;font-size:11px;color:var(--muted)}.hero-art{position:relative;min-height:320px}.orb{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,#d37aff66,transparent 65%)}.story{position:absolute;width:205px;height:270px;padding:24px;border-radius:24px;box-shadow:0 24px 55px #7226dc33;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.story span{font-size:10px;letter-spacing:2px}.story strong{font-size:23px;line-height:1.3}.story b{font-size:55px}.one{left:7%;top:5px;transform:rotate(-10deg);background:linear-gradient(150deg,#41109a,#a943ec,#f290d8)}.two{right:0;top:45px;transform:rotate(10deg);background:linear-gradient(150deg,#ec28be,#8c23d6,#281060)}.hero-art small{position:absolute;bottom:-5px;left:10%;font-size:11px;color:var(--muted)}#catalog{padding:45px 0}.catalog-top{display:flex;align-items:center;justify-content:space-between;gap:20px}h2{font-size:27px;letter-spacing:-.8px;margin:10px 0 20px}#search{display:flex;border:1px solid var(--line);background:var(--surface);border-radius:13px;overflow:hidden;width:340px}#search input{background:transparent;border:0;min-width:0;flex:1;padding:14px;color:var(--text)}#search button{background:none;font-size:23px;padding:5px 15px}.filters{display:flex;gap:10px;overflow:auto;padding:8px 0 25px}.filters button{white-space:nowrap;background:var(--surface);border:1px solid var(--line);font-size:13px}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.card{background:none;padding:0;text-align:left;min-width:0}.poster{position:relative;aspect-ratio:2/3;border-radius:17px;overflow:hidden;background:linear-gradient(135deg,#421081,#e546ba);display:flex;align-items:center;justify-content:center;color:white}.poster img{width:100%;height:100%;object-fit:cover}.poster span{position:absolute;bottom:10px;left:10px;border-radius:6px;padding:5px 8px;background:#160827bd;font-size:11px;color:#fff}.card h3{font-size:14px;line-height:1.5;margin:12px 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.card small{color:var(--muted)}.notice{padding:32px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--muted);line-height:1.7}.notice strong{display:block;color:var(--text);font-size:18px}#more{display:block;margin:25px auto}#more[hidden]{display:none}footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted)}footer strong{color:var(--purple);font-size:22px}footer span{font-size:12px}footer p,footer small{font-size:12px}dialog{width:min(980px,94vw);max-height:92vh;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:24px;padding:30px}dialog::backdrop{background:#11051bcc;backdrop-filter:blur(5px)}.close{position:sticky;top:0;float:right;z-index:2;font-size:24px}.detail-head{display:flex;gap:25px;clear:both}.detail-head img{width:140px;border-radius:12px;object-fit:cover}.detail-head p{line-height:1.7;color:var(--muted)}video{display:block;width:100%;max-height:55vh;background:#08050d;border-radius:14px;margin-top:25px}.episode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:8px;margin-top:15px}.episode-grid button{font-size:12px}#playerStatus{color:var(--muted);padding-top:12px}.player-nav{display:flex;gap:10px;margin-top:12px}@media(min-width:900px){.dark .brand{background:#fff;border-radius:10px;padding:4px}}@media(max-width:900px){header{gap:15px;flex-wrap:wrap}.brand{width:145px}nav{order:3;width:100%;justify-content:center}.tools{gap:4px}.hero{padding:30px;grid-template-columns:1fr}.hero-art{display:none}.grid{grid-template-columns:repeat(3,1fr)}main{padding:20px}.hero{min-height:330px}.catalog-top{align-items:stretch;flex-direction:column}#search{width:100%}}@media(max-width:480px){.grid{grid-template-columns:repeat(2,1fr);gap:16px}.tools select{max-width:95px;font-size:11px;padding:8px}.tools button{padding:8px}.brand{width:120px}.hero-tags{gap:8px;font-size:9px}.hero{padding:26px}h1{letter-spacing:-2px}.detail-head{flex-direction:column}.detail-head img{width:100px}dialog{padding:20px}}
/* Footer Drashin */
footer.site-footer {
    position: relative;
    overflow: hidden;
    width: min(1200px, calc(100% - 48px));
    margin: 64px auto 24px;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 24px;
    background: linear-gradient(135deg, #faf7ff, #fff5fb);
    color: #281b3d;
    text-align: left;
}

footer.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #c026d3, #ec4899);
}

.site-footer .footer-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
    padding: 40px;
}

.site-footer .footer-brand > a {
    display: inline-block;
}

.site-footer .footer-brand img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
}

.site-footer p {
    margin: 16px 0 0;
    max-width: 340px;
    color: #746580;
    font-size: 14px;
    line-height: 1.8;
}

.site-footer .footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.08);
    color: #7c3aed;
    font-size: 12px;
    font-weight: 600;
}

.site-footer .footer-label {
    display: block;
    margin: 4px 0 18px;
    color: #8b5aab;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.site-footer .footer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-footer .footer-chips span {
    padding: 10px 15px;
    border: 1px solid rgba(139, 92, 246, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: #5b287f;
    font-size: 13px;
    font-weight: 600;
}

.site-footer .footer-note h3 {
    margin: 0;
    color: #39204f;
    font-size: 19px;
    line-height: 1.4;
}

.site-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 40px;
    border-top: 1px solid rgba(139, 92, 246, 0.12);
    color: #80718b;
    font-size: 12px;
}

.site-footer .footer-bottom a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
}

.site-footer a:focus-visible {
    outline: 2px solid #a855f7;
    outline-offset: 5px;
    border-radius: 4px;
}

/* Mode gelap */
body.dark footer.site-footer {
    border-color: rgba(192, 132, 252, 0.18);
    background: linear-gradient(135deg, #1d142b, #28152b);
    color: #f3e8ff;
}

body.dark .site-footer p,
body.dark .site-footer .footer-bottom {
    color: #b9a8c8;
}

body.dark .site-footer .footer-label,
body.dark .site-footer .footer-bottom a {
    color: #d8b4fe;
}

body.dark .site-footer .footer-note h3 {
    color: #f3e8ff;
}

body.dark .site-footer .footer-badge {
    background: rgba(168, 85, 247, 0.14);
    color: #e9d5ff;
}

body.dark .site-footer .footer-chips span {
    border-color: rgba(192, 132, 252, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: #e9d5ff;
}

body.dark .site-footer .footer-bottom {
    border-top-color: rgba(192, 132, 252, 0.14);
}

/* Tablet */
@media (max-width: 900px) {
    .site-footer .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 30px;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1;
    }

    .site-footer .footer-bottom {
        padding: 20px 30px;
    }
}

/* HP */
@media (max-width: 600px) {
    footer.site-footer {
        width: calc(100% - 28px);
        margin-top: 40px;
        border-radius: 20px;
    }

    .site-footer .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 22px;
    }

    .site-footer .footer-brand {
        grid-column: auto;
    }

    .site-footer .footer-brand img {
        width: 160px;
    }

    .site-footer .footer-label {
        margin-bottom: 12px;
    }

    .site-footer .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 22px;
        line-height: 1.6;
    }
}

#licenseButton {
    white-space: nowrap;
    color: #7c3aed;
    background: #f1e9fa;
    border: 1px solid #ddc9f5;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

#licenseDialog {
    width: min(440px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px;
    border: 1px solid #e9daf5;
    border-radius: 22px;
    background: #fff;
    color: #30203e;
}

#licenseDialog::backdrop {
    background: rgb(20 10 35 / 65%);
}

#licenseDialog h2 {
    margin: 10px 0;
}

#licenseDialog p {
    font-size: 14px;
    line-height: 1.7;
}

.license-close {
    display: block;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 26px;
    cursor: pointer;
}

#licenseForm label {
    display: block;
    margin: 20px 0 8px;
}

#licenseCode {
    box-sizing: border-box;
    width: 100%;
    padding: 13px;
    border: 1px solid #ddc9f5;
    border-radius: 10px;
    background: #faf7ff;
    color: #30203e;
    font: inherit;
}

#licenseSubmit {
    width: 100%;
    margin-top: 16px;
    padding: 13px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(100deg, #7c3aed, #db2777);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

#licenseSubmit:disabled {
    opacity: 0.6;
    cursor: wait;
}

body.dark #licenseDialog {
    background: #21162e;
    color: #f3e8ff;
    border-color: #503369;
}
/* Premium access summary */
.license-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;margin:18px auto 0;padding:15px 22px;width:min(1200px,calc(100% - 32px));border:1px solid #d8c5ed;border-radius:14px;background:#f4eefb;color:#704298;font-size:12px;line-height:1.7}
.license-summary[hidden]{display:none}.license-summary strong{font-size:13px}.license-access-info:empty{display:none}.license-access-info{padding:12px;border-radius:10px;background:#f4eefb;color:#704298;font-size:13px;line-height:1.8}.dark .license-summary,.dark .license-access-info{background:#30233e;color:#e1c7fc;border-color:#64477e}
@media(max-width:650px){.license-summary{align-items:flex-start;flex-direction:column;gap:4px;padding:14px 16px}}