/*
Theme Name:   Alam Personal
Theme URI:    https://alam.my.id
Description:  Child theme web pribadi Alam — Talk Less Write More
Author:       Alam
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  alam-child
Tags:         child-theme, elementor, personal, portfolio, blog
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
    /* Colors */
    --al-white:         #ffffff;
    --al-bg:            #fafafa;
    --al-bg-soft:       #f4f4f5;
    --al-bg-card:       #ffffff;
    --al-border:        #e4e4e7;
    --al-border-light:  #f1f1f4;

    --al-text:          #18181b;
    --al-text-muted:    #71717a;
    --al-text-light:    #a1a1aa;

    --al-accent:        #18181b;       /* Hitam utama */
    --al-accent-hover:  #3f3f46;
    --al-highlight:     #6366f1;       /* Indigo — aksen warna satu-satunya */
    --al-highlight-rgb: 99, 102, 241;
    --al-highlight-soft: rgba(99,102,241,.08);

    /* Typography */
    --al-font:          'Plus Jakarta Sans', system-ui, sans-serif;
    --al-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --al-radius:        8px;
    --al-radius-lg:     16px;
    --al-radius-xl:     24px;

    /* Shadows */
    --al-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --al-shadow-md:     0 4px 16px rgba(0,0,0,.08);
    --al-shadow-lg:     0 12px 40px rgba(0,0,0,.1);

    /* Transition */
    --al-transition:    .2s ease;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--al-bg);
    color: var(--al-text);
    font-family: var(--al-font);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

a:hover { color: var(--al-accent); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header,
header.site-header {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--al-border) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* Logo / site title */
.site-branding .site-title,
.site-branding .site-title a,
.elementor-site-title {
    font-family: var(--al-font) !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    color: var(--al-text) !important;
    letter-spacing: -.03em !important;
}

.site-branding .site-description {
    font-size: .72rem !important;
    color: var(--al-text-muted) !important;
    font-style: italic !important;
    letter-spacing: .02em !important;
}

/* Nav links */
.main-navigation a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
    font-family: var(--al-font) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: var(--al-text-muted) !important;
    transition: color var(--al-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(--al-text) !important;
}

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

/* Primary — hitam */
.al-btn-primary,
.elementor-button.al-btn-primary {
    background: var(--al-accent) !important;
    color: #ffffff !important;
    border: 2px solid var(--al-accent) !important;
    border-radius: var(--al-radius) !important;
    font-family: var(--al-font) !important;
    font-weight: 700 !important;
    font-size: .875rem !important;
    transition: all var(--al-transition) !important;
}

.al-btn-primary:hover {
    background: var(--al-accent-hover) !important;
    border-color: var(--al-accent-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--al-shadow-md) !important;
}

/* Secondary — outline */
.al-btn-secondary,
.elementor-button.al-btn-secondary {
    background: transparent !important;
    color: var(--al-text) !important;
    border: 1.5px solid var(--al-border) !important;
    border-radius: var(--al-radius) !important;
    font-family: var(--al-font) !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    transition: all var(--al-transition) !important;
}

.al-btn-secondary:hover {
    border-color: var(--al-text) !important;
    color: var(--al-text) !important;
    transform: translateY(-1px) !important;
}

/* Highlight — indigo */
.al-btn-highlight,
.elementor-button.al-btn-highlight {
    background: var(--al-highlight) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--al-radius) !important;
    font-weight: 700 !important;
    transition: all var(--al-transition) !important;
    box-shadow: 0 4px 14px rgba(var(--al-highlight-rgb), .3) !important;
}

.al-btn-highlight:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(var(--al-highlight-rgb), .4) !important;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.al-section-white  { background: var(--al-white) !important; }
.al-section-soft   { background: var(--al-bg-soft) !important; }
.al-section-dark   { background: var(--al-text) !important; }
.al-section-dark * { color: rgba(255,255,255,.85) !important; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.al-card,
.elementor-widget.al-card .elementor-widget-container {
    background: var(--al-bg-card) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--al-radius-lg) !important;
    transition: all .25s ease !important;
    box-shadow: var(--al-shadow-sm) !important;
}

.al-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--al-shadow-lg) !important;
    border-color: rgba(var(--al-highlight-rgb), .2) !important;
}

/* Portfolio card */
.al-portfolio-card {
    background: var(--al-bg-card);
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius-lg);
    overflow: hidden;
    transition: all .25s ease;
    box-shadow: var(--al-shadow-sm);
}

.al-portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--al-shadow-lg);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.al-heading,
.elementor-widget-heading.al-heading .elementor-heading-title {
    font-family: var(--al-font) !important;
    font-weight: 800 !important;
    color: var(--al-text) !important;
    letter-spacing: -.03em !important;
    line-height: 1.2 !important;
}

.al-subheading,
.elementor-widget-heading.al-subheading .elementor-heading-title {
    font-family: var(--al-font) !important;
    font-weight: 600 !important;
    color: var(--al-text) !important;
    letter-spacing: -.02em !important;
}

.al-text-muted,
.elementor-widget-text-editor.al-text-muted p {
    color: var(--al-text-muted) !important;
    line-height: 1.75 !important;
}

.al-text-highlight { color: var(--al-highlight) !important; }

/* Label / tag kecil */
.al-label {
    display: inline-block;
    background: var(--al-highlight-soft);
    color: var(--al-highlight);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.al-label-dark {
    background: var(--al-bg-soft);
    color: var(--al-text-muted);
}

/* Divider */
.al-divider {
    border: none;
    border-top: 1px solid var(--al-border);
    margin: 48px 0;
}

/* ==========================================================================
   BLOG ARCHIVE & SINGLE POST
   ========================================================================== */

/* Archive */
.blog .entry-title a,
.archive .entry-title a {
    font-family: var(--al-font) !important;
    font-weight: 700 !important;
    color: var(--al-text) !important;
    letter-spacing: -.02em !important;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover {
    color: var(--al-highlight) !important;
}

.blog .entry-meta,
.archive .entry-meta {
    font-size: .82rem !important;
    color: var(--al-text-muted) !important;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.al-form input,
.al-form textarea,
.al-form select,
.elementor-form.al-form .elementor-field {
    background: var(--al-white) !important;
    border: 1.5px solid var(--al-border) !important;
    border-radius: var(--al-radius) !important;
    font-family: var(--al-font) !important;
    font-size: .95rem !important;
    color: var(--al-text) !important;
    padding: 11px 14px !important;
    transition: border-color var(--al-transition), box-shadow var(--al-transition) !important;
    width: 100% !important;
}

.al-form input:focus,
.al-form textarea:focus,
.elementor-form.al-form .elementor-field:focus {
    outline: none !important;
    border-color: var(--al-highlight) !important;
    box-shadow: 0 0 0 3px rgba(var(--al-highlight-rgb), .12) !important;
}

.al-form label,
.elementor-form.al-form label {
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: var(--al-text) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer,
footer.site-footer,
.elementor-location-footer {
    background: var(--al-text) !important;
    color: rgba(255,255,255,.6) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.site-footer a,
footer.site-footer a,
.elementor-location-footer a {
    color: rgba(255,255,255,.6) !important;
    transition: color var(--al-transition) !important;
}

.site-footer a:hover,
footer.site-footer a:hover,
.elementor-location-footer a:hover {
    color: var(--al-highlight) !important;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.al-hide-mobile  { }
.al-hide-desktop { }

@media (max-width: 768px) {
    .al-hide-mobile  { display: none !important; }
}

@media (min-width: 769px) {
    .al-hide-desktop { display: none !important; }
}