/* ============================================================
   ZI-RO · GALAXY BOX LAYER v1
   File    : assets/css/galaxy-boxes.css
   Peran   : menerapkan tema galaxy navbar (.zr-navbar-shell di
             components-bottom-nav.php) ke 4 kotak di read.php:
               1. Box Dokumentasi  -> .article-multimedia.cyber-card-wrapper
               2. Box Share        -> .share-cyber-wrapper
               3. Box Slider       -> .related-articles-container.cyber-card-wrapper
               4. Box Komentar     -> .comment-box-cyber
   Sumber tema (disalin apa adanya dari navbar):
             - panel      rgba(9,7,10,.96)
             - border     1px solid rgba(45,143,255,.48)
             - glow       0 0 0 1px rgba(36,132,255,.06)
                          0 0 24px rgba(22,122,255,.10)
                          inset 0 1px 0 rgba(98,206,255,.10)
             - sheen      linear-gradient(110deg, rgba(31,137,255,.075), ...)
             - hairline   linear-gradient(90deg, transparent, rgba(63,193,255,.42), transparent)
             - bintang    hsl 195/210/225/258 di kanvas partikel navbar
   Catatan : semua selector diawali "body" supaya menang spesifisitas
             atas blok <style> inline di slider-artikel.php dan
             components/article-comments.php (yang urutan dokumennya
             lebih akhir). Tanpa awalan "body", aturan itu akan kalah.
   Rollback: hapus file ini + hapus 1 baris <link> di read.php.
   ============================================================ */

/* ---------- 1. CANGKANG: kaca gelap + nebula + bintang + glow ---------- */
body .article-multimedia.cyber-card-wrapper,
body .share-cyber-wrapper,
body .related-articles-container.cyber-card-wrapper,
body .comment-box-cyber {
    position: relative;
    background-color: rgba(9, 7, 10, .96);
    background-image:
        /* hairline atas, sama seperti .zr-navbar-shell::after */
        linear-gradient(90deg,
            transparent 0%,
            rgba(63, 193, 255, .42) 14%,
            rgba(63, 193, 255, .42) 86%,
            transparent 100%),
        /* aksen tepi kiri: biru -> cyan -> violet (pengganti bar merah 3.5px) */
        linear-gradient(180deg,
            rgba(37, 136, 255, .90) 0%,
            rgba(41, 231, 255, .55) 48%,
            rgba(168, 85, 255, .50) 100%),
        /* sheen 110deg, sama seperti .zr-navbar-shell::before */
        linear-gradient(110deg,
            rgba(31, 137, 255, .075) 0%,
            transparent 34%,
            transparent 72%,
            rgba(36, 220, 255, .035) 100%),
        /* nebula */
        radial-gradient(120% 110% at 0% 0%, rgba(31, 137, 255, .14), transparent 58%),
        radial-gradient(110% 110% at 100% 100%, rgba(168, 85, 247, .11), transparent 62%),
        /* lapisan bintang (3 grid berbeda supaya tidak terlihat pola) */
        radial-gradient(circle, rgba(255, 255, 255, .50) 1px, transparent 1.4px),
        radial-gradient(circle, rgba(120, 206, 255, .42) 1px, transparent 1.4px),
        radial-gradient(circle, rgba(168, 85, 247, .36) 1px, transparent 1.4px);
    background-size:
        84% 1px,
        2px 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        97px 83px,
        151px 127px,
        211px 173px;
    background-position:
        8% 0,
        0 0,
        0 0,
        0 0,
        0 0,
        7px 11px,
        41px 29px,
        83px 61px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        repeat, repeat, repeat;
    border: 1px solid rgba(45, 143, 255, .48);
    border-left: 1px solid rgba(45, 143, 255, .48);
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(36, 132, 255, .06),
        0 0 24px rgba(22, 122, 255, .12),
        0 0 64px -14px rgba(34, 140, 255, .28),
        inset 0 1px 0 rgba(98, 206, 255, .10);
}

/* ---------- 2. BOX DOKUMENTASI: header & badge cyan ---------- */
body .article-multimedia.cyber-card-wrapper .cyber-card-header,
body .related-articles-container.cyber-card-wrapper .cyber-card-header {
    border-bottom-color: rgba(45, 143, 255, .22);
}

body .article-multimedia.cyber-card-wrapper .cyber-card-badge,
body .related-articles-container.cyber-card-wrapper .cyber-card-badge {
    color: #68e5ff;
    text-shadow: 0 0 10px rgba(35, 183, 255, .45);
}

body .article-multimedia.cyber-card-wrapper .cyber-card-corner-slash {
    color: rgba(147, 160, 184, .55);
    letter-spacing: 2px;
}

/* ---------- 3. BOX SHARE ---------- */
body .share-cyber-wrapper .share-subtext {
    color: #93a0b8;
}

body .share-cyber-wrapper .share-btn {
    background: rgba(12, 26, 52, .70);
    border: 1px solid rgba(45, 143, 255, .30);
    color: #dbe7f7;
    border-radius: 10px;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease;
}

body .share-cyber-wrapper .share-btn:hover {
    background: rgba(18, 38, 74, .90);
    border-color: rgba(41, 231, 255, .70);
    box-shadow: 0 0 16px -3px rgba(41, 231, 255, .45);
    transform: translateY(-2px);
}

/* ---------- 4. BOX SLIDER ARTIKEL ---------- */
body .related-articles-container.cyber-card-wrapper .btn-cyber-outline {
    background: rgba(12, 26, 52, .75);
    border-color: rgba(45, 143, 255, .45);
    color: #cfe6ff;
}

body .related-articles-container.cyber-card-wrapper .btn-cyber-outline:hover {
    border-color: #29e7ff;
    color: #ffffff;
    background: rgba(18, 38, 74, .92);
    box-shadow: 0 0 14px rgba(41, 231, 255, .35);
}

body .related-articles-container.cyber-card-wrapper .slider-item {
    background: rgba(17, 28, 48, .55);
    border-color: rgba(45, 143, 255, .28);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(98, 206, 255, .07);
}

body .related-articles-container.cyber-card-wrapper .slider-item:hover {
    border-color: rgba(41, 231, 255, .75);
    transform: translateY(-3px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, .70),
        0 0 16px rgba(41, 231, 255, .28);
}

body .related-articles-container.cyber-card-wrapper .slider-tag-badge {
    background: rgba(8, 13, 25, .85);
    border-color: rgba(41, 231, 255, .55);
    color: #68e5ff;
}

body .related-articles-container.cyber-card-wrapper .btn-panah {
    background: rgba(9, 15, 30, .88);
    border: 1px solid rgba(45, 143, 255, .40);
    color: #68e5ff;
}

body .related-articles-container.cyber-card-wrapper .btn-panah:hover {
    border-color: #29e7ff;
    box-shadow: 0 0 14px rgba(41, 231, 255, .40);
}

/* ---------- 5. BOX KOMENTAR ---------- */
body .comment-box-cyber .cyber-form-container {
    background: rgba(17, 28, 48, .55);
    border-color: rgba(45, 143, 255, .28);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(98, 206, 255, .08),
        0 0 22px -8px rgba(34, 140, 255, .45);
}

body .comment-box-cyber .cyber-input,
body .comment-box-cyber .cyber-textarea {
    background: rgba(6, 10, 22, .85);
    border-color: rgba(45, 143, 255, .30);
}

body .comment-box-cyber .cyber-input:focus,
body .comment-box-cyber .cyber-textarea:focus {
    border-color: rgba(41, 231, 255, .85);
    background: rgba(10, 18, 34, .95);
    box-shadow: 0 0 18px -4px rgba(41, 231, 255, .40);
}

body .comment-box-cyber .input-icon-wrapper svg {
    stroke: #6f88a8;
}

body .comment-box-cyber .input-icon-wrapper:focus-within svg {
    stroke: #29e7ff;
}

body .comment-box-cyber .btn-cyber-outline {
    background: rgba(12, 26, 52, .75);
    border-color: rgba(45, 143, 255, .40);
    color: #cfe6ff;
}

body .comment-box-cyber .btn-cyber-outline:hover {
    border-color: #29e7ff;
    color: #ffffff;
    background: rgba(18, 38, 74, .92);
}

body .comment-box-cyber .btn-cyber-submit {
    background: linear-gradient(135deg, #2588ff, #29e7ff);
    color: #04121f;
    box-shadow: 0 0 14px rgba(41, 231, 255, .35);
}

body .comment-box-cyber .btn-cyber-submit:hover {
    background: linear-gradient(135deg, #35a0ff, #5ef0ff);
    box-shadow: 0 0 20px rgba(41, 231, 255, .55);
}

body .comment-box-cyber .comment-item-cyber {
    border-bottom-color: rgba(45, 143, 255, .16);
}

body .comment-box-cyber .comment-index {
    color: #68e5ff;
    text-shadow: 0 0 10px rgba(35, 183, 255, .40);
}

body .comment-box-cyber .comment-timeline-line {
    background: linear-gradient(180deg,
        rgba(41, 231, 255, .55) 0%,
        rgba(168, 85, 255, .40) 100%);
}

body .comment-box-cyber .comment-avatar {
    border-color: rgba(45, 143, 255, .45);
    box-shadow: 0 0 12px -3px rgba(41, 231, 255, .45);
}

body .comment-box-cyber .comment-action-reply {
    color: #68e5ff;
}

body .comment-box-cyber .comment-action-reply:hover {
    color: #9df0ff;
}

/* ---------- 6. LAYAR KECIL: radius & padding ikut navbar mobile ---------- */
@media (max-width: 520px) {
    body .article-multimedia.cyber-card-wrapper,
    body .share-cyber-wrapper,
    body .related-articles-container.cyber-card-wrapper,
    body .comment-box-cyber {
        border-radius: 14px;
    }
}

/* ---------- 7. HORMATI PREFERENSI REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    body .share-cyber-wrapper .share-btn,
    body .related-articles-container.cyber-card-wrapper .slider-item {
        transition-duration: .01ms !important;
    }

    body .share-cyber-wrapper .share-btn:hover,
    body .related-articles-container.cyber-card-wrapper .slider-item:hover {
        transform: none;
    }
}