/* ===========================================================
   NUSA ENERGI — Public Stylesheet
=========================================================== */
:root{
    --navy-900:#0B2A4A;
    --navy-800:#0F3357;
    --navy-700:#153E66;
    --navy-600:#1C4A78;
    --orange-500:#F5821F;
    --orange-600:#DB6E0D;
    --orange-100:#FDEEDF;
    --gray-50:#F4F6F9;
    --gray-100:#EEF1F8;
    --gray-200:#E4E9F0;
    --gray-600:#5B6B7C;
    --text-900:#16232F;
    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;
    --shadow-sm:0 2px 10px rgba(11,42,74,.06);
    --shadow-md:0 10px 30px rgba(11,42,74,.10);
    --shadow-lg:0 20px 45px rgba(11,42,74,.16);
    --ease:cubic-bezier(.22,.9,.32,1);
}

*{ scroll-behavior:smooth; }

body{
    font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
    color:var(--text-900);
    background:#fff;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{ font-family:'Fraunces','Plus Jakarta Sans',serif; font-weight:600; }
/* sedikit miring pada kata terakhir judul besar biar tidak terasa "kaku template" */
.hero-content h1 em, .page-header h1 em{ font-style:italic; font-weight:500; color:var(--orange-500); }

a{ text-decoration:none; transition:color .2s var(--ease); }

::selection{ background:var(--orange-500); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--gray-100); }
::-webkit-scrollbar-thumb{ background:var(--navy-700); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--navy-900); }

.brand-mark{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    background:var(--orange-500);
    display:inline-flex;align-items:center;justify-content:center;
}
.brand-mark svg{ width:18px;height:18px;color:#fff; }
.brand-mark i{ color:#fff; font-size:1.05rem; line-height:1; }

/* ===== Topbar ===== */
.topbar{ background:var(--navy-900); color:#cfd9e6; font-size:.8rem; letter-spacing:.2px; border-bottom:1px solid rgba(255,255,255,.06); }
.topbar-info{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
.topbar-info i{ color:var(--orange-500); font-size:.85rem; }
.topbar a{ color:#cfd9e6; }
.topbar .social{ display:inline-flex; align-items:center; margin-left:16px; padding-left:16px; border-left:1px solid rgba(255,255,255,.14); }
.topbar .social a{
    color:#cfd9e6; margin-left:8px; display:inline-flex; width:26px; height:26px;
    align-items:center; justify-content:center; border-radius:50%; font-size:.8rem;
    background:rgba(255,255,255,.08); transition:.2s var(--ease);
}
.topbar .social a:first-child{ margin-left:0; }
.topbar .social a:hover{ background:var(--orange-500); color:#fff; transform:translateY(-2px); }

/* ===== Navbar ===== */
.navbar-nusa{
    background:rgba(255,255,255,.97); backdrop-filter:saturate(180%) blur(10px);
    box-shadow:0 1px 0 rgba(11,42,74,.06); padding:.55rem 0; transition:.25s var(--ease);
}
.navbar-nusa .navbar-brand{ padding:0; }
.navbar-nusa .brand-logo{ object-fit:cover; border:2px solid var(--gray-100); }
.navbar-nusa .brand-text{ line-height:1.2; }
.navbar-nusa .company-name{
    font-weight:800; color:var(--navy-900); font-size:.95rem; line-height:1.2;
    font-family:'Fraunces',serif; letter-spacing:.01em;
}
.navbar-nusa .company-tagline{ font-size:.62rem; color:var(--orange-600); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

.navbar-nusa .navbar-nav{ gap:.05rem; }
.navbar-nusa .nav-link{
    position:relative; color:var(--text-900); font-weight:600; font-size:.82rem;
    letter-spacing:.1px; padding:.5rem .6rem !important; white-space:nowrap; transition:color .2s var(--ease);
}
.navbar-nusa .nav-link::after{
    content:""; position:absolute; left:.6rem; right:.6rem; bottom:.2rem; height:2px;
    background:var(--orange-500); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.navbar-nusa .nav-link.active, .navbar-nusa .nav-link:hover{ color:var(--orange-600); }
.navbar-nusa .nav-link.active::after, .navbar-nusa .nav-link:hover::after{ transform:scaleX(1); }
.navbar-nusa .dropdown-toggle::after{ vertical-align:.15em; margin-left:.3rem; }

.navbar-nusa .dropdown-menu{
    border:none; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:.5rem; margin-top:.5rem; min-width:15rem;
}
.navbar-nusa .dropdown-item{
    border-radius:8px; font-size:.85rem; font-weight:600; padding:.6rem .8rem; color:var(--text-900); transition:.15s var(--ease);
}
.navbar-nusa .dropdown-item i{ color:var(--orange-500); }
.navbar-nusa .dropdown-item:hover, .navbar-nusa .dropdown-item:focus{ background:var(--orange-100); color:var(--orange-600); }

.btn-hubungi{
    padding:.4rem .85rem !important; font-size:.8rem; border-radius:999px;
    box-shadow:0 6px 16px rgba(245,130,31,.22);
}
.btn-hubungi i{ font-size:.78rem; }

@media(max-width:991px){
    .navbar-nusa .navbar-nav{ gap:0; }
    .navbar-nusa .nav-link{ padding:.55rem .4rem !important; }
    .btn-hubungi{ display:inline-flex; }
}

/* ===== Buttons ===== */
.btn{ border-radius:var(--radius-sm); font-weight:700; letter-spacing:.2px; transition:.18s var(--ease); }
.btn-orange{ background:var(--orange-500); color:#fff; border:none; border-radius:10px 4px 10px 4px; }
.btn-orange:hover{ background:var(--orange-600); color:#fff; box-shadow:0 8px 18px rgba(245,130,31,.32); }
.btn-navy{ background:var(--navy-900); color:#fff; border:none; }
.btn-navy:hover{ background:var(--navy-800); color:#fff; box-shadow:0 8px 18px rgba(11,42,74,.3); }
.btn-outline-light-2{ border:2px solid rgba(255,255,255,.55); color:#fff; }
.btn-outline-light-2:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ===== Hero ===== */
.hero-slide{
    position:relative; background-size:cover; background-position:center;
    min-height:600px; display:flex; align-items:center; overflow:hidden;
    background-color:var(--navy-900);
}
.hero-slide::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(112deg, rgba(7,27,48,.96) 18%, rgba(7,27,48,.78) 48%, rgba(7,27,48,.25) 92%);
}
/* satu aksen organik, bukan gradasi simetris rapi */
.hero-slide::after{
    content:""; position:absolute; z-index:1; right:-8%; bottom:-18%; width:340px; height:340px;
    background:radial-gradient(circle, rgba(245,130,31,.28), transparent 68%);
    border-radius:42% 58% 65% 35% / 48% 40% 60% 52%;
    filter:blur(2px);
}
.hero-video{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover;
    pointer-events:none;
}
.hero-content{ position:relative; z-index:2; color:#fff; }
.hero-content h1{ font-weight:800; font-size:2.9rem; line-height:1.15; margin-top:.4rem; }
.hero-content p{ color:#cfd9e6; font-size:1.02rem; max-width:520px; }
.hero-badges{ display:flex; gap:2.2rem; margin-top:3rem; flex-wrap:wrap; }
.hero-badge{ display:flex; align-items:center; gap:.75rem; }
.hero-badge .ic{
    width:40px;height:40px;border-radius:10px;background:rgba(245,130,31,.16);border:1px solid rgba(245,130,31,.3);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hero-badge .ic svg{ width:20px;height:20px;color:var(--orange-500); }
.hero-badge .ic i{ color:var(--orange-500); font-size:1.15rem; }
.hero-badge b{ display:block;font-size:.92rem;font-weight:700; }
.hero-badge span{ display:block;font-size:.78rem;color:#aec0d2; }

/* ===== Section headings ===== */
.section-title{
    font-weight:800; font-size:.95rem; letter-spacing:.5px; color:var(--navy-900);
    text-transform:uppercase; position:relative; padding-left:16px;
}
/* aksen coretan pendek, bukan bar lurus sempurna khas template */
.section-title::before{
    content:""; position:absolute; left:0; top:50%; width:11px; height:11px;
    background:var(--orange-500); border-radius:60% 40% 55% 45% / 45% 55% 40% 60%;
    transform:translateY(-50%) rotate(-8deg);
}
.section-link{
    font-size:.85rem; font-weight:700; color:var(--navy-800);
    display:inline-flex; align-items:center; gap:.35rem; transition:.2s var(--ease);
}
.section-link:hover{ color:var(--orange-600); gap:.55rem; }

/* ===== Layanan cards ===== */
.service-card{
    background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius-md);
    padding:1.5rem 1.25rem; height:100%; transition:.25s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-icon{
    width:48px;height:48px;border-radius:10px;background:var(--navy-900);
    display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.service-icon svg{ width:22px;height:22px;color:#fff; }
.service-card h6{ font-weight:700; font-size:.98rem; color:var(--navy-900); }
.service-card p{ font-size:.85rem; color:var(--gray-600); margin:0; }

/* ===== Tentang / stats ===== */
.about-stat{
    border:1px solid var(--gray-100); border-radius:10px; padding:1rem;
    display:flex; align-items:center; gap:.8rem; background:#fff;
}
.about-stat .ic{ width:40px;height:40px;border-radius:10px;background:var(--gray-50);border:1px solid var(--gray-100);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.about-stat .ic svg{ width:19px;height:19px;color:var(--navy-900); }
.about-stat .ic i{ color:var(--navy-900); font-size:1.05rem; }
.about-stat b{ display:block;font-size:1.25rem;font-weight:800;color:var(--navy-900); }
.about-stat span{ font-size:.76rem;color:var(--gray-600); }
.consult-cta{
    background:linear-gradient(120deg,var(--orange-500),var(--orange-600)); border-radius:var(--radius-md);
    padding:1.4rem 1.5rem; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

/* ===== Cards: Proyek / Produk / Berita ===== */
.card-item{
    background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius-md);
    overflow:hidden; height:100%; transition:.25s var(--ease);
}
.card-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card-item img{ width:100%;height:170px;object-fit:cover;transition:transform .4s var(--ease); }
.card-item:hover img{ transform:scale(1.06); }
.badge-kategori{ background:var(--navy-800); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.3px; padding:.32rem .6rem; border-radius:6px; }
.card-item h6{ font-weight:700; font-size:.94rem; color:var(--text-900); }
.card-item:hover h6{ color:var(--navy-800); }
.card-item .meta{ font-size:.76rem; color:var(--gray-600); }

/* ===== Footer ===== */
.footer-nusa{ background:linear-gradient(180deg,var(--navy-900),#071B30); color:#b9c7d6; font-size:.88rem; }
.footer-nusa h6{ color:#fff; font-weight:700; letter-spacing:.3px; margin-bottom:1rem; }
.footer-nusa a{ color:#b9c7d6; transition:.2s var(--ease); display:inline-block; }
.footer-nusa a:hover{ color:var(--orange-500); padding-left:4px; }
.footer-nusa li{ margin-bottom:.55rem; font-size:.85rem; }
.footer-bottom{ background:#061527; font-size:.78rem; color:#7c8fa3; border-top:1px solid rgba(255,255,255,.06); }
.btn-scrolltop{
    width:42px;height:42px;border-radius:50%; background:var(--orange-500); color:#fff;
    display:flex;align-items:center;justify-content:center; transition:.2s var(--ease);
}
.btn-scrolltop:hover{ background:var(--orange-600); color:#fff; transform:translateY(-3px); }

/* ===== Inner pages ===== */
.page-header{
    position:relative; background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
    color:#fff; padding:3.2rem 0; overflow:hidden;
}
.page-header::after{
    content:""; position:absolute; right:-40px; top:-70px; width:230px; height:210px;
    border-radius:44% 56% 60% 40% / 50% 45% 55% 50%;
    background:radial-gradient(circle at 40% 40%, rgba(245,130,31,.22), transparent 70%);
    transform:rotate(-6deg);
}
.page-header h1{ font-weight:800; font-size:1.9rem; position:relative; z-index:1; }
.eyebrow-header{
    display:inline-flex; align-items:center; gap:.4rem; position:relative; z-index:1;
    background:rgba(245,130,31,.16); color:var(--orange-500);
    font-weight:700; font-size:.78rem; letter-spacing:.4px; text-transform:uppercase;
    padding:.35rem .8rem; border-radius:30px; margin-bottom:.7rem;
}
.breadcrumb-custom{ position:relative; z-index:1; margin-top:.4rem; font-size:.88rem; }
.breadcrumb-custom a{ color:#cfd9e6; }
.breadcrumb-custom a:hover{ color:var(--orange-500); }
.breadcrumb-custom span{ color:#fff; font-weight:600; }

.content-block{ background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius-md); padding:1.7rem; box-shadow:var(--shadow-sm); }

/* ===== Card media overlay (Proyek/Produk/Berita) ===== */
.card-item{ position:relative; }
.card-item .thumb-wrap{ position:relative; overflow:hidden; }
.card-item .thumb-wrap::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(11,42,74,.55) 100%);
    opacity:0; transition:opacity .3s var(--ease);
}
.card-item:hover .thumb-wrap::after{ opacity:1; }
.card-item .thumb-zoom{
    position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.92); color:var(--navy-900); display:flex; align-items:center; justify-content:center;
    font-size:.9rem; opacity:0; transform:translateY(-6px); transition:.3s var(--ease); z-index:2;
}
.card-item:hover .thumb-zoom{ opacity:1; transform:translateY(0); }

.empty-state i{ opacity:.5; }

/* Forms */
.form-control, .form-select{
    border-radius:var(--radius-sm); border:1px solid var(--gray-200); padding:.65rem .9rem; transition:.2s var(--ease);
}
.form-control:focus, .form-select:focus{ border-color:var(--navy-600); box-shadow:0 0 0 .2rem rgba(21,62,102,.12); }
.form-label{ font-weight:600; font-size:.88rem; color:var(--navy-900); }

.pagination .page-link{ border:none; color:var(--navy-800); font-weight:600; margin:0 3px; border-radius:var(--radius-sm) !important; }
.pagination .page-item.active .page-link{ background:var(--navy-900); color:#fff; }
.pagination .page-link:hover{ background:var(--gray-100); color:var(--navy-900); }

.login-wrap{ min-height:70vh; display:flex; align-items:center; }

@media(max-width:991px){
    .navbar-collapse{ margin-top:.75rem; border-top:1px solid var(--gray-100); padding-top:.5rem; }
    .navbar-nusa .nav-link::after{ display:none; }
}
@media(max-width:767px){
    .hero-slide{ min-height:auto; padding:3.2rem 0 2.4rem; }
    .hero-content h1{ font-size:1.9rem; }
    .hero-content p{ max-width:100%; }
    .page-header{ padding:2.2rem 0; }
}

/* ===== Sambutan Direktur (beranda) ===== */
.sambutan-direktur{ background:var(--gray-50, #f6f8fa); }
.sambutan-card{
    background:#fff; border-radius:22px; overflow:hidden;
    box-shadow:0 18px 45px rgba(11,42,74,.12);
}
.sambutan-photo-col{ position:relative; min-height:280px; background:var(--navy-900); }
.sambutan-photo{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top;
}
.sambutan-text-col{ display:flex; align-items:center; }
.sambutan-inner{ padding:2rem 2.25rem; }
.quote-mark{
    font-family:Georgia,serif; font-size:2.8rem; line-height:.5;
    color:var(--orange-500); opacity:.35; margin:.2rem 0 .1rem;
}
.sambutan-isi{
    color:#4a5568; font-size:.92rem; line-height:1.65; white-space:pre-line;
}
.sambutan-signature{
    border-left:4px solid var(--orange-500); padding-left:1rem;
}
@media (max-width:991.98px){
    .sambutan-photo-col{ min-height:240px; }
    .sambutan-inner{ padding:1.5rem 1.25rem; }
}

/* ===== Keunggulan Kami (benefit cards) ===== */
.benefit-card{
    background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius-md);
    padding:2.1rem 1.6rem; height:100%; text-align:center; transition:.25s var(--ease);
}
.benefit-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.benefit-icon{
    width:60px; height:60px; border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
    background:var(--orange-100);
    display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
    transform:rotate(-4deg);
}
.benefit-icon i{ font-size:1.6rem; color:var(--orange-500); transform:rotate(4deg); }
.benefit-card:nth-child(even) .benefit-icon{ transform:rotate(5deg); border-radius:60% 40% 42% 58% / 55% 38% 62% 45%; }
.benefit-card:nth-child(even) .benefit-icon i{ transform:rotate(-5deg); }
.benefit-card h5{ font-weight:700; color:var(--navy-900); margin-bottom:.5rem; font-size:1.05rem; }
.benefit-card p{ color:var(--gray-600); font-size:.87rem; margin:0; }

/* ===== Statistik / Capaian band ===== */
.stats-band{
    position:relative; overflow:hidden;
    background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
}
.stats-band::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 88% 15%, rgba(245,130,31,.22), transparent 55%);
}
.stat-box{ position:relative; z-index:1; text-align:center; padding:.5rem; }
.stat-box .num{ font-family:'Fraunces',serif; font-weight:800; font-size:2.5rem; color:#fff; line-height:1; }
.stat-box .lbl{ font-size:.8rem; color:#b9c7d6; margin-top:.5rem; letter-spacing:.2px; }

/* ===== Galeri dokumentasi (lightbox) ===== */
.gallery-item{
    position:relative; overflow:hidden; border-radius:var(--radius-md); cursor:pointer;
    aspect-ratio:4/3; background:var(--gray-100);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .gallery-overlay{
    position:absolute; inset:0; display:flex; align-items:flex-end; padding:.85rem;
    background:linear-gradient(180deg, transparent 45%, rgba(11,42,74,.8) 100%);
    color:#fff; font-size:.74rem; font-weight:600; opacity:0; transition:.3s var(--ease);
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-item .zoom-ic{
    position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.92); color:var(--navy-900); display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(-6px); transition:.3s var(--ease); font-size:.8rem;
}
.gallery-item:hover .zoom-ic{ opacity:1; transform:translateY(0); }

/* ===== Tabel Klien & Proyek ===== */
.client-table{ background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--gray-100); }
.client-table table{ margin:0; }
.client-table thead{ background:var(--navy-900); }
.client-table thead th{
    border:none; color:#fff; font-size:.74rem; letter-spacing:.4px; text-transform:uppercase;
    padding:.9rem 1rem; font-weight:700; white-space:nowrap;
}
.client-table tbody td{ padding:.85rem 1rem; font-size:.86rem; color:var(--text-900); vertical-align:middle; border-color:var(--gray-100); }
.client-table tbody tr:hover{ background:var(--gray-50); }
.client-thumb{ width:42px; height:42px; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid var(--gray-100); transition:.2s var(--ease); }
.client-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.client-thumb:hover{ transform:scale(1.08); box-shadow:var(--shadow-sm); }

/* ===== CTA Konsultasi + Peta Lokasi ===== */
.map-cta{ background:var(--navy-900); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); }
.map-cta-info{ padding:2.6rem 2.2rem; color:#fff; }
.map-cta-info h3{ font-weight:800; font-size:1.5rem; }
.map-frame{ width:100%; border:0; display:block; filter:grayscale(.15) contrast(1.05); }
.contact-pill{ display:flex; align-items:center; gap:.75rem; margin-bottom:.85rem; }
.contact-pill .ic{
    width:42px; height:42px; border-radius:10px; background:rgba(245,130,31,.16); border:1px solid rgba(245,130,31,.3);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-pill .ic i{ color:var(--orange-500); font-size:1.05rem; }

@media(max-width:991px){
    .map-frame{ min-height:280px !important; }
}