/* =============================================
   DARK MODE — Enhanced for Rain B. Marpaung
   Base: #0a0a0f / #111118 / #1a1a24
   Accent: inherits from color theme (blue #3586e8)
   ============================================= */

/* --- Base Backgrounds with subtle depth --- */
.dark, #preloader, .dark .sub-page .sub-page-inner, .dark .portfolio-data, .dark .pulse-icon .circle-inner, .pulse-icon .circle-outer,
.dark .my-photo, .dark .testimonial-content .testimonial-review, .dark .owl-dot span {
    background: #0a0a0f;
}
.dark .header, .dark .special-block-bg, .dark .counter-block, .pricing-table,
.dark .profile-picture-block, .dark .main-timeline .timeline-icon:before, .dark .label-portfolio,
.dark .blog-grid-flex .blog-article, .dark .btn.btn-prev, .dark .social-media-block,
.dark .profile-picture-block:before, .dark .profile-picture-block:after, .dark .widget, .dark .blog-post, .dark .about-author,
.dark .comment-by a.reply, .dark .add-review-box, .dark .error-content .form-error-search input {
    background: #111118;
}
.dark .progress, .dark .blog-grid-flex .article-link a, .dark .social-media-block a,
::-webkit-scrollbar-track-piece, .dark .tagcloud a, .dark .share-buttons li a, .dark .home-slides .owl-dot span {
    background: #1a1a24;
}

/* --- Typography --- */
.dark .section-head h4 span, .dark .service-block .service-text h4, .dark .widget-text h5 a, .dark .error-content .error-message h3, .dark .home-slides .slide-contact-info p,
.dark .blog-grid-flex .article-content h4 a, .dark .blog-grid-flex .blog-article .comment-like, .dark .blog-grid-flex .blog-article .post-format, .dark .blog-grid-flex .blog-item-quote .comment-like span {
    color: rgba(255, 255, 255, 0.85);
}
.dark p, .dark .header-main-menu li a, .dark .language-skill h4 span, .dark .skill-item span,
.dark .typed-strings .typed {
    color: rgba(255, 255, 255, 0.55);
}
.dark .header-main-menu li a:hover, .dark .header-main-menu li a.active, .dark .testimonial-owner,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .section-head h4, .dark .main-title h4, .dark .site-title {
    color: #fff;
}

/* --- Sidebar / Header --- */
.dark .header {
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.dark .header-main-menu li a {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 8px;
}
.dark .header-main-menu li a:hover, .dark .header-main-menu li a.active {
    background-color: rgba(53, 134, 232, 0.12);
    color: #fff;
}
/* Profile picture — glowing circle ring effect */
.dark .profile-picture-block {
    background: linear-gradient(135deg, #1a2a4a, #2a4a7a, #1a2a4a, #1e2e3e, #2a4a7a) !important;
    background-size: 400% 400% !important;
}
.dark .profile-picture-block:before, .dark .profile-picture-block:after {
    background: #111118;
}
.dark .my-photo {
    background: linear-gradient(135deg, #1a3a6a, #3586e8, #1a3a6a, #2a5a9a, #3586e8) !important;
    background-size: 400% 400% !important;
    box-shadow:
        0 0 15px rgba(53, 134, 232, 0.4),
        0 0 30px rgba(53, 134, 232, 0.2),
        0 0 60px rgba(53, 134, 232, 0.1);
    animation: photo-ring-glow 4s ease-in-out infinite;
}
@keyframes photo-ring-glow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(53, 134, 232, 0.4),
            0 0 30px rgba(53, 134, 232, 0.2),
            0 0 60px rgba(53, 134, 232, 0.1);
    }
    50% {
        box-shadow:
            0 0 20px rgba(53, 134, 232, 0.6),
            0 0 40px rgba(53, 134, 232, 0.3),
            0 0 80px rgba(53, 134, 232, 0.15);
    }
}

/* --- Section Titles --- */
.dark .section-head h4 {
    border-left: 1px solid rgba(238, 238, 238, 0.15);
}
.dark .main-title h4 {
    text-shadow: 0 0 40px rgba(53, 134, 232, 0.15);
}

/* --- Cards & Blocks with subtle borders --- */
.dark .special-block-bg {
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}
.dark .service-block {
    transition: all 0.35s ease;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.dark .service-block:hover {
    border-color: rgba(53, 134, 232, 0.2);
    box-shadow: 0 8px 32px rgba(53, 134, 232, 0.08);
    transform: translateY(-2px);
}

/* --- Counter / Fun Facts --- */
.dark .counter-block {
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}
.dark .counter-block:hover {
    border-color: rgba(53, 134, 232, 0.2);
    box-shadow: 0 4px 20px rgba(53, 134, 232, 0.1);
}

/* --- Timeline / Resume --- */
.dark .main-timeline .timeline {
    transition: all 0.3s ease;
}
.dark .main-timeline .timeline:hover .timeline-content {
    border-color: rgba(53, 134, 232, 0.15);
}
.dark .main-timeline .timeline-content {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: border-color 0.3s ease;
}
.dark .main-timeline .timeline-icon {
    box-shadow: 0 0 0 3px #0a0a0f, 0 0 0 5px rgba(53, 134, 232, 0.2);
}

/* --- Skills progress bars --- */
.dark .progress {
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a24;
}
.dark .progress-bar {
    box-shadow: 0 0 12px rgba(53, 134, 232, 0.3);
}

/* --- Portfolio Grid --- */
.dark .portfolio-grid .portfolio-item {
    border-radius: 8px;
    overflow: hidden;
}
.dark .portfolio-grid .portfolio-item:hover .portfolio-data {
    background-color: rgba(53, 134, 232, 0.7);
}
.dark .filter-tabs .fil-cat {
    transition: all 0.3s ease;
}
.dark .label-portfolio {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Blog Cards --- */
.dark .blog-grid-flex .blog-article {
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}
.dark .blog-grid-flex .blog-article:hover {
    border-color: rgba(53, 134, 232, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}
.dark .blog-grid-flex .blog-article .comment-like {
    background-color: rgba(53, 134, 232, 0.5);
}

/* --- Testimonials --- */
.dark .testimonial-review::after {
    border-top-color: #1a1a24;
}
.dark .testimonial-content .testimonial-review {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* --- Pricing --- */
#planrecommended:after { border-left: 15px solid #111118; }
#planrecommended:before { border-right: 15px solid #111118; }

/* --- Contact Form --- */
.dark input[type=email], .dark input[type=text], .dark textarea {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px 4px 0 0;
    padding: 10px 12px;
    transition: all 0.3s ease;
}
.dark input[type=email]:focus, .dark input[type=text]:focus, .dark textarea:focus {
    background: rgba(53, 134, 232, 0.05);
    border-bottom-color: rgba(53, 134, 232, 0.6);
}
input, textarea { color: rgba(255, 255, 255, 0.9); }
.cd-words-wrapper { color: rgba(255, 255, 255, 0.55); }

/* --- Social Media --- */
.dark .social-media-block {
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dark .social-media-block a {
    transition: all 0.3s ease;
    border-radius: 6px;
}
.dark .social-media-block a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(53, 134, 232, 0.25);
}
.dark .blog-grid-flex .blog-item-quote .comment-like, .dark .social-media-block a, .dark .tagcloud a {
    border-color: rgba(255, 255, 255, 0.06);
}

/* --- Borders & Dividers --- */
.dark .w-75, .dark .search-blog-input input {
    border-color: rgba(221, 221, 221, 0.15);
}
.dark .widget .widget-title, .dark .widget-tabs li, .dark #add-review input, .dark #add-review textarea,
.dark .error-content .form-error-search {
    border-color: rgba(255, 255, 255, 0.08);
}
.dark .widget .search-blog-input .input:before {
    background: transparent;
}
.dark .widget.search-widget {
    padding: 20px 20px 0 20px;
}

/* --- Overlay --- */
.dark .overlay, .dark .blog-grid-flex .blog-item-quote .article-img::after {
    background: rgba(0, 0, 0, 0.7);
}

/* --- Start Page Mask — keep original dark overlay --- */
.dark .start-page .sub-page-inner .mask {
    background: rgba(0, 0, 0, 0.5);
}

/* --- Stars --- */
.dark .rating li i.half-star {
    color: rgba(212, 212, 212, 0.2);
}
.dark .owl-dot.active span {
    background: #11d6f0;
    box-shadow: 0 0 10px rgba(17, 214, 240, 0.3);
}

/* --- Scrollbar --- */
.dark::-webkit-scrollbar-thumb,
.dark .sub-page::-webkit-scrollbar-thumb,
.dark .header::-webkit-scrollbar-thumb {
    background-color: rgba(53, 134, 232, 0.2);
    border-radius: 10px;
}
.dark::-webkit-scrollbar-track,
.dark .sub-page::-webkit-scrollbar-track,
.dark .header::-webkit-scrollbar-track {
    background: #0a0a0f;
}

/* --- About section image --- */
.dark .box-img {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* --- Open to Work badge (dark mode enhancement) --- */
.dark .open-to-work {
    background: rgba(53, 134, 232, 0.1);
    border-color: rgba(53, 134, 232, 0.25);
}

/* --- Contact info icons glow --- */
.dark .contact-icon i {
    box-shadow: 0 4px 15px rgba(53, 134, 232, 0.2);
}

/* --- Bout list summary icons --- */
.dark .bout-list-summry li .icon-info {
    box-shadow: 0 2px 12px rgba(53, 134, 232, 0.2);
}

/* --- Subtle page section gradients --- */
.dark .sub-page .sub-page-inner {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(53, 134, 232, 0.04) 0%, transparent 50%);
}

/* Services / special blocks — soft blue tint at edges */
.dark .special-block-bg {
    background: linear-gradient(160deg, #111118 0%, rgba(20, 30, 50, 0.6) 50%, #111118 100%);
}

/* Header sidebar — very subtle gradient top to bottom */
.dark .header {
    background: linear-gradient(180deg, #111118 0%, rgba(15, 20, 35, 0.95) 50%, #111118 100%);
}

/* Contact section left background overlay */
.dark .contact-form .left-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(10, 20, 50, 0.5) 0%,
        rgba(53, 134, 232, 0.15) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Portfolio hover — gradient instead of flat color */
.dark .portfolio-grid .portfolio-item:hover .portfolio-data {
    background: linear-gradient(-45deg,
        rgba(10, 30, 60, 0.8) 0%,
        rgba(53, 134, 232, 0.6) 50%,
        rgba(17, 214, 240, 0.3) 100%);
}

/* Buttons — slightly softer glow in dark mode */
.dark .bt-submit {
    box-shadow: 0 2px 15px rgba(53, 134, 232, 0.2);
    transition: all 0.3s ease;
}
.dark .bt-submit:hover {
    box-shadow: 0 4px 25px rgba(53, 134, 232, 0.35);
    transform: translateY(-1px);
}