/*
Theme Name:   NerbitinBuku
Theme URI:    https://nerbitinbuku.com
Description:  Child theme nerbitinbuku.com berbasis Hello Elementor
Author:       nerbitinbuku.com
Author URI:   https://nerbitinbuku.com
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  nb-child
Tags:         child-theme, elementor, publishing
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
    --nb-bg-main:              #1e40af;
    --nb-bg-alt:               #152c7a;
    --nb-bg-card:              #172554;
    --nb-bg-dark:              #0f172a;
    --nb-bg-footer:            #0b1120;
    --nb-highlight:            #fbbf24;
    --nb-highlight-hover:      #d97706;
    --nb-text-light:           #f8fafc;
    --nb-text-muted:           #cbd5e1;
    --nb-text-dark:            #0f172a;
    --nb-wa-green:             #25D366;
    --nb-wa-hover:             #1ebd5c;
    --nb-border:               rgba(255,255,255,0.1);
    --nb-radius:               12px;
    --nb-radius-lg:            20px;
    --nb-transition:           0.3s ease;
    --nb-shadow-highlight:     0 10px 25px -5px rgba(251,191,36,0.5);
    --nb-shadow-card:          0 20px 40px -10px rgba(0,0,0,0.4);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--nb-bg-main);
    color: var(--nb-text-light);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

a { text-decoration: none; transition: color var(--nb-transition); }

/* ==========================================================================
   HEADER & NAVBAR
   ========================================================================== */
.site-header,
header.site-header {
    background: rgba(30,64,175,0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    border-bottom: 1px solid var(--nb-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* Logo */
.site-branding .site-title,
.site-branding .site-title a,
.logo-text,
.elementor-site-title {
    color: var(--nb-text-light) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* Nav links */
.main-navigation a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
    color: var(--nb-text-light) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: color var(--nb-transition) !important;
}

.main-navigation a:hover,
.elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--nb-highlight) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Tombol utama kuning */
.nb-btn-primary,
.elementor-button.nb-btn-primary,
.wp-block-button .nb-btn-primary {
    background: var(--nb-highlight) !important;
    color: var(--nb-text-dark) !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: var(--nb-shadow-highlight) !important;
    transition: all var(--nb-transition) !important;
}

.nb-btn-primary:hover {
    background: var(--nb-highlight-hover) !important;
    color: var(--nb-text-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px -5px rgba(251,191,36,0.6) !important;
}

/* Tombol outline kuning */
.nb-btn-outline,
.elementor-button.nb-btn-outline {
    background: transparent !important;
    color: var(--nb-highlight) !important;
    border: 2px solid var(--nb-highlight) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    transition: all var(--nb-transition) !important;
}

.nb-btn-outline:hover {
    background: var(--nb-highlight) !important;
    color: var(--nb-text-dark) !important;
}

/* Tombol WhatsApp */
.nb-btn-wa,
.elementor-button.nb-btn-wa {
    background: var(--nb-wa-green) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 25px -5px rgba(37,211,102,0.4) !important;
    transition: all var(--nb-transition) !important;
    border: 2px solid transparent !important;
}

.nb-btn-wa:hover {
    background: var(--nb-wa-hover) !important;
    color: #ffffff !important;
    border-color: var(--nb-highlight) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px -5px rgba(37,211,102,0.5) !important;
}

/* Nav CTA button */
.nb-btn-nav,
.elementor-button.nb-btn-nav {
    background: var(--nb-highlight) !important;
    color: var(--nb-text-dark) !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    transition: all var(--nb-transition) !important;
    box-shadow: 0 4px 15px -3px rgba(251,191,36,0.5) !important;
}

.nb-btn-nav:hover {
    background: var(--nb-highlight-hover) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* Section background alternatif (biru gelap) */
.nb-section-alt,
.elementor-section.nb-section-alt,
.elementor-container.nb-section-alt,
.e-con.nb-section-alt {
    background-color: var(--nb-bg-alt) !important;
}

/* Section dark (gradient hitam) */
.nb-section-dark,
.elementor-section.nb-section-dark,
.e-con.nb-section-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Section card background */
.nb-section-card,
.elementor-section.nb-section-card,
.e-con.nb-section-card {
    background-color: var(--nb-bg-card) !important;
}

/* ==========================================================================
   CARDS & ICON BOX
   ========================================================================== */
.nb-card,
.elementor-widget-icon-box.nb-card .elementor-icon-box-wrapper,
.elementor-widget-image-box.nb-card {
    background: rgba(23,37,84,0.5) !important;
    border: 1px solid var(--nb-border) !important;
    border-radius: var(--nb-radius) !important;
    padding: 32px 24px !important;
    transition: transform var(--nb-transition), background var(--nb-transition), border-color var(--nb-transition) !important;
}

.nb-card:hover,
.elementor-widget-icon-box.nb-card:hover .elementor-icon-box-wrapper {
    transform: translateY(-5px) !important;
    background: var(--nb-bg-card) !important;
    border-color: rgba(251,191,36,0.3) !important;
}

/* Card judul */
.nb-card .elementor-icon-box-title,
.nb-card h3, .nb-card h4 {
    color: var(--nb-text-light) !important;
}

/* Card teks */
.nb-card .elementor-icon-box-description,
.nb-card p {
    color: var(--nb-text-muted) !important;
}

/* Card ikon */
.nb-card .elementor-icon i,
.nb-card .elementor-icon svg {
    color: var(--nb-highlight) !important;
}

/* ==========================================================================
   PRICING CARDS
   ========================================================================== */
.nb-price-card,
.elementor-widget.nb-price-card {
    background: var(--nb-bg-card) !important;
    border: 1px solid var(--nb-border) !important;
    border-radius: var(--nb-radius-lg) !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition), border-color var(--nb-transition) !important;
    position: relative !important;
}

.nb-price-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--nb-shadow-card) !important;
    border-color: var(--nb-highlight) !important;
}

.nb-price-card.popular,
.nb-price-card.nb-popular {
    border: 2px solid var(--nb-highlight) !important;
    box-shadow: 0 20px 40px -10px rgba(251,191,36,0.2) !important;
    background: linear-gradient(145deg, var(--nb-bg-card), rgba(251,191,36,0.05)) !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Heading utama */
.nb-heading-light,
.elementor-widget-heading.nb-heading-light .elementor-heading-title {
    color: var(--nb-text-light) !important;
}

/* Heading kuning/aksen */
.nb-heading-highlight,
.elementor-widget-heading.nb-heading-highlight .elementor-heading-title,
.nb-text-highlight {
    color: var(--nb-highlight) !important;
}

/* Teks muted */
.nb-text-muted,
.elementor-widget-text-editor.nb-text-muted,
.elementor-widget-text-editor.nb-text-muted p {
    color: var(--nb-text-muted) !important;
}

/* Badge / label */
.nb-badge {
    display: inline-block !important;
    background: var(--nb-highlight) !important;
    color: var(--nb-text-dark) !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   FORMS & INPUT
   ========================================================================== */
.nb-form input,
.nb-form textarea,
.nb-form select,
.elementor-form.nb-form .elementor-field-group input,
.elementor-form.nb-form .elementor-field-group textarea {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid var(--nb-border) !important;
    border-radius: 8px !important;
    color: var(--nb-text-light) !important;
    padding: 12px 16px !important;
    transition: border-color var(--nb-transition) !important;
}

.nb-form input:focus,
.nb-form textarea:focus,
.elementor-form.nb-form .elementor-field-group input:focus {
    border-color: var(--nb-highlight) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important;
}

.nb-form input::placeholder,
.nb-form textarea::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

.nb-form label,
.elementor-form.nb-form label {
    color: var(--nb-text-muted) !important;
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
.single-post .site-main,
.single .site-main {
    background: #ffffff;
    color: #1e293b;
}

.single-post .entry-title,
.single .entry-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin-bottom: 1rem !important;
}

.single-post .entry-meta,
.single .entry-meta {
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin-bottom: 2rem !important;
}

.single-post .entry-content,
.single .entry-content {
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    color: #1e293b !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

.single-post .entry-content h2,
.single .entry-content h2 {
    font-size: 1.6rem !important;
    color: #0f172a !important;
    margin-top: 2rem !important;
}

.single-post .entry-content h3,
.single .entry-content h3 {
    font-size: 1.3rem !important;
    color: #0f172a !important;
    margin-top: 1.5rem !important;
}

.single-post .entry-content a,
.single .entry-content a {
    color: #1e40af !important;
    border-bottom: 1px solid rgba(30,64,175,0.3) !important;
}

.single-post .entry-content a:hover,
.single .entry-content a:hover {
    color: var(--nb-highlight) !important;
    border-color: var(--nb-highlight) !important;
}

.single-post .entry-content blockquote,
.single .entry-content blockquote {
    border-left: 4px solid var(--nb-highlight) !important;
    background: #fffbf0 !important;
    padding: 16px 24px !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #1e293b !important;
}