/* =========================================================================
   Slamet Yulianto — Portfolio
   Theme: DevOps / Cloud Engineering
   ========================================================================= */

:root{
    --c-primary:#0F172A;
    --c-secondary:#2563EB;
    --c-accent:#06B6D4;
    --c-success:#22C55E;
    --c-bg:#F8FAFC;
    --c-text:#334155;

    --c-surface:#FFFFFF;
    --c-surface-2:#F1F5F9;
    --c-border:rgba(15,23,42,.1);
    --c-muted:#64748B;
    --shadow-soft:0 10px 30px rgba(15,23,42,.08);
    --radius:16px;
}

[data-bs-theme="dark"]{
    --c-bg:#0B1120;
    --c-surface:#111827;
    --c-surface-2:#0F172A;
    --c-text:#CBD5E1;
    --c-border:rgba(255,255,255,.08);
    --c-muted:#94A3B8;
    --shadow-soft:0 10px 30px rgba(0,0,0,.4);
}

*{ scroll-behavior:smooth; }

body{
    background:var(--c-bg);
    color:var(--c-text);
    font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
    transition:background-color .3s ease,color .3s ease;
}

.text-gradient{
    background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.text-accent{ color:var(--c-accent); }
.bg-gradient-primary{ background:linear-gradient(135deg,var(--c-primary) 0%,#1E3A8A 60%,var(--c-secondary) 100%); }

.btn-accent{
    background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
    color:#fff;
    border:none;
    font-weight:600;
    box-shadow:0 8px 20px rgba(37,99,235,.35);
}
.btn-accent:hover{ color:#fff; filter:brightness(1.08); transform:translateY(-1px); }
.btn-outline-accent{
    border:1px solid var(--c-accent);
    color:var(--c-accent);
    font-weight:600;
    background:transparent;
}
.btn-outline-accent:hover{ background:var(--c-accent); color:#012; }

.section{ padding:6rem 0; }
.section-alt{ background:var(--c-surface-2); }
.section-title{
    font-weight:800;
    letter-spacing:-.02em;
}
.section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--c-accent);
    background:rgba(6,182,212,.1);
    border:1px solid rgba(6,182,212,.25);
    padding:.4rem .9rem;
    border-radius:50px;
}
.section-subtitle{ color:var(--c-muted); max-width:640px; }

/* ---------- Loading Screen ---------- */
#loading-screen{
    position:fixed; inset:0; z-index:2000;
    background:var(--c-primary);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
}
#loading-screen.loaded{ opacity:0; visibility:hidden; }
.loader-brand{ font-size:2rem; font-weight:800; color:#fff; letter-spacing:.05em; }
.loader-bracket{ color:var(--c-accent); }
.loader-text{ display:inline-block; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ---------- Navbar ---------- */
.site-navbar{
    background:rgba(15,23,42,.65);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .3s ease, padding .3s ease;
    padding:.9rem 0;
}
[data-bs-theme="light"] .site-navbar{ background:rgba(248,250,252,.75); border-bottom:1px solid var(--c-border); }
.site-navbar.scrolled{ padding:.5rem 0; box-shadow:var(--shadow-soft); }
.navbar-brand{ color:#F8FAFC !important; }
[data-bs-theme="light"] .navbar-brand{ color:var(--c-primary) !important; }
.nav-link{ color:#CBD5E1 !important; font-weight:500; padding:.5rem 1rem !important; }
[data-bs-theme="light"] .nav-link{ color:var(--c-text) !important; }
.nav-link:hover{ color:var(--c-accent) !important; }

.btn-icon-toggle{
    width:38px; height:38px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); border:1px solid var(--c-border); color:#fff;
}
[data-bs-theme="light"] .btn-icon-toggle{ color:var(--c-primary); background:rgba(15,23,42,.05); }
.theme-icon-dark{ display:none; }
[data-bs-theme="dark"] .theme-icon-dark{ display:inline; }
[data-bs-theme="dark"] .theme-icon-light{ display:none; }

/* ---------- Hero ---------- */
.hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    background:var(--c-primary);
    overflow:hidden;
    padding-top:6rem;
}
.hero::before{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(circle at 15% 20%, rgba(37,99,235,.35), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(6,182,212,.3), transparent 45%);
}
.hero-grid{
    position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero .container{ position:relative; z-index:2; }
.hero-badge{
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3);
    color:var(--c-success); font-weight:600; font-size:.8rem;
    padding:.4rem 1rem; border-radius:50px;
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--c-success); box-shadow:0 0 0 4px rgba(34,197,94,.2); }
.hero h1{ color:#fff; font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.03em; }
.hero .typed-role{ color:var(--c-accent); font-weight:700; }
.hero .lead{ color:#CBD5E1; max-width:560px; }
.cursor{ display:inline-block; width:2px; background:var(--c-accent); margin-left:2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-photo-wrap{ position:relative; }
.hero-photo{
    width:100%; max-width:380px; aspect-ratio:1/1; object-fit:cover;
    border-radius:28px; border:1px solid rgba(255,255,255,.15);
    box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.hero-photo-glow{
    position:absolute; inset:-20px; z-index:-1; border-radius:32px;
    background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
    filter:blur(40px); opacity:.35;
}
.hero-float-card{
    position:absolute; padding:.75rem 1rem; border-radius:14px;
    background:rgba(17,24,39,.85); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1); color:#fff;
    font-size:.85rem; font-weight:600; box-shadow:var(--shadow-soft);
}
.hero-float-1{ top:10%; left:-10%; }
.hero-float-2{ bottom:8%; right:-8%; }

.scroll-indicator{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    color:#94A3B8; font-size:1.4rem; animation:bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ---------- Glassmorphism Card ---------- */
.glass-card{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
}
[data-bs-theme="dark"] .glass-card{ background:rgba(17,24,39,.6); backdrop-filter:blur(12px); }

/* ---------- About / Stats ---------- */
.stat-card{
    text-align:center; padding:2rem 1rem; border-radius:var(--radius);
    background:var(--c-surface); border:1px solid var(--c-border);
    transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.stat-number{ font-size:2.6rem; font-weight:800; color:var(--c-accent); }
.stat-label{ color:var(--c-muted); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Skills ---------- */
.skill-card{
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--radius); padding:2rem; height:100%;
}
.skill-card-icon{
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
    color:#fff; font-size:1.4rem; margin-bottom:1rem;
}
.skill-item{ margin-bottom:1.1rem; }
.skill-item:last-child{ margin-bottom:0; }
.skill-item-head{ display:flex; justify-content:between; align-items:center; margin-bottom:.35rem; font-size:.9rem; font-weight:600; }
.progress{ height:6px; background:var(--c-surface-2); border-radius:50px; }
.progress-bar{
    background:linear-gradient(90deg,var(--c-secondary),var(--c-accent));
    width:0;
    transition:width 1.4s cubic-bezier(.16,1,.3,1);
    border-radius:50px;
}

/* ---------- Timeline (Experience / Journey) ---------- */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{
    content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(180deg,var(--c-secondary),var(--c-accent));
}
.timeline-item{ position:relative; padding-bottom:2.5rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
    position:absolute; left:-2.2rem; top:4px; width:20px; height:20px; border-radius:50%;
    background:var(--c-surface); border:3px solid var(--c-accent);
}
.timeline-card{
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--radius); padding:1.5rem;
}
.timeline-badge-current{
    background:rgba(34,197,94,.12); color:var(--c-success); border:1px solid rgba(34,197,94,.3);
    font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:50px;
}

/* ---------- Journey (horizontal) ---------- */
.journey-track{ position:relative; }
.journey-track::before{
    content:""; position:absolute; top:22px; left:0; right:0; height:2px;
    background:var(--c-border);
}
.journey-step{ position:relative; text-align:center; }
.journey-dot{
    width:44px; height:44px; margin:0 auto 1rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--c-surface); border:2px solid var(--c-accent); color:var(--c-accent);
    font-size:1.2rem; position:relative; z-index:2;
}

/* ---------- Project Cards ---------- */
.project-card{
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
    overflow:hidden; height:100%; transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.project-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--c-surface-2); }
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.project-card:hover .project-thumb img{ transform:scale(1.06); }
.project-body{ padding:1.5rem; }
.tech-pill{
    display:inline-block; font-size:.72rem; font-weight:600; padding:.25rem .6rem;
    border-radius:50px; background:rgba(37,99,235,.1); color:var(--c-secondary); border:1px solid rgba(37,99,235,.2);
    margin:0 .3rem .3rem 0;
}
[data-bs-theme="dark"] .tech-pill{ background:rgba(6,182,212,.1); color:var(--c-accent); border-color:rgba(6,182,212,.25); }

/* ---------- GCP Expertise ---------- */
.gcp-card{
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
    padding:1.75rem; height:100%;
}
.gcp-card-icon{
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin-bottom:1rem; color:#fff;
}
.gcp-compute{ background:linear-gradient(135deg,#2563EB,#1E40AF); }
.gcp-network{ background:linear-gradient(135deg,#06B6D4,#0E7490); }
.gcp-database{ background:linear-gradient(135deg,#22C55E,#15803D); }
.gcp-security{ background:linear-gradient(135deg,#F59E0B,#B45309); }
.gcp-storage{ background:linear-gradient(135deg,#8B5CF6,#5B21B6); }
.gcp-card ul{ list-style:none; padding:0; margin:0; }
.gcp-card ul li{ padding:.3rem 0; color:var(--c-muted); font-size:.9rem; }
.gcp-card ul li i{ color:var(--c-success); margin-right:.5rem; }

/* ---------- Certifications ---------- */
.cert-card{
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
    padding:1.5rem; height:100%; display:flex; gap:1rem; align-items:flex-start;
}
.cert-badge-img{ width:64px; height:64px; object-fit:contain; border-radius:12px; background:var(--c-surface-2); padding:8px; }

/* ---------- Testimonials ---------- */
.testimonial-card{
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
    padding:2rem; margin:.5rem; text-align:center;
}
.testimonial-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; border:3px solid var(--c-accent); }
.testimonial-stars{ color:#F59E0B; font-size:.85rem; margin-bottom:.75rem; }

/* ---------- Contact ---------- */
.contact-info-item{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.contact-info-icon{
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--c-secondary),var(--c-accent)); color:#fff;
}
.form-control, .form-select{
    background:var(--c-surface); border:1px solid var(--c-border); color:var(--c-text);
    padding:.65rem 1rem; border-radius:10px;
}
.form-control:focus, .form-select:focus{
    background:var(--c-surface); color:var(--c-text);
    border-color:var(--c-accent); box-shadow:0 0 0 .2rem rgba(6,182,212,.15);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--c-primary); color:#CBD5E1; }
[data-bs-theme="light"] .site-footer{ background:var(--c-primary); color:#CBD5E1; }
.footer-heading{ color:#fff; font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.footer-links li{ margin-bottom:.6rem; font-size:.9rem; }
.footer-links a{ color:#94A3B8; text-decoration:none; }
.footer-links a:hover{ color:var(--c-accent); }
.social-icon{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:.2s;
}
.social-icon:hover{ background:var(--c-accent); color:#012; }

/* ---------- Floating UI ---------- */
.whatsapp-float{
    position:fixed; bottom:28px; left:28px; z-index:1030;
    width:56px; height:56px; border-radius:50%;
    background:#22C55E; color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; box-shadow:0 10px 25px rgba(34,197,94,.4); text-decoration:none;
    animation:float-pulse 2.4s ease-in-out infinite;
}
@keyframes float-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

.scroll-top-btn{
    position:fixed; bottom:28px; right:28px; z-index:1030;
    width:48px; height:48px; border-radius:50%; border:none;
    background:linear-gradient(135deg,var(--c-secondary),var(--c-accent)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(10px);
    transition:.3s ease;
}
.scroll-top-btn.show{ opacity:1; visibility:visible; transform:translateY(0); }

@media (max-width: 991.98px){
    .hero-float-card{ display:none; }
    .section{ padding:4rem 0; }
}