/* Page-header khusus halaman Layanan (memakai token warna yang sama) */
 .page-header {
   background: linear-gradient(160deg, rgba(217, 173, 79, 0.07), transparent 65%), var(--bg-1);
   border-bottom: 1px solid var(--line);
   padding: 3.5rem 0 2.75rem;
   text-align: center;
 }

 .page-header .eyebrow-gold {
   justify-content: center;
   display: flex;
 }

 .page-header h1 {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   margin-bottom: 0.75rem;
 }

 .page-header p {
   color: var(--grey-1);
   max-width: 40rem;
   margin: 0 auto;
   font-size: 0.95rem;
 }

 .breadcrumb-gold {
   display: inline-flex;
   gap: 0.5rem;
   font-family: var(--font-head);
   font-size: 0.75rem;
   letter-spacing: 0.06em;
   color: var(--grey-2);
   margin-top: 1.1rem;
 }

 .breadcrumb-gold a {
   color: var(--grey-2);
 }

 .breadcrumb-gold a:hover {
   color: var(--gold-light);
 }

 .breadcrumb-gold .current {
   color: var(--gold-light);
   font-weight: 700;
 }

 /* Detail layanan */
 .layanan-detail {
   padding: 5rem 0;
 }

 .layanan-detail:nth-of-type(even) {
   background: var(--bg-1);
 }

 .layanan-media {
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--line);
   background: linear-gradient(160deg, #1c1c20 0%, #0c0c0d 100%);
   aspect-ratio: 4 / 3;
 }

 .layanan-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .layanan-icon-badge {
   width: 56px;
   height: 56px;
   border-radius: var(--radius-md);
   background: rgba(217, 173, 79, 0.08);
   border: 1px solid var(--gold-deep);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.25rem;
 }

 .layanan-icon-badge i {
   color: var(--gold);
   font-size: 1.5rem;
 }

 .layanan-copy h3 {
   font-size: clamp(1.25rem, 2.5vw, 1.7rem);
   margin-bottom: 0.9rem;
 }

 .layanan-copy p.lead-desc {
   color: var(--grey-1);
   font-size: 0.95rem;
   margin-bottom: 1.5rem;
 }

 .layanan-points {
   margin-bottom: 1.75rem;
 }

 .layanan-points li {
   display: flex;
   align-items: flex-start;
   gap: 0.7rem;
   font-size: 0.87rem;
   color: var(--grey-1);
   margin-bottom: 0.7rem;
 }

 .layanan-points i {
   color: var(--gold);
   margin-top: 0.2rem;
   flex-shrink: 0;
 }

 /* ICON YOUTUBE */
 .portfolio-img {
   position: relative;
 }

 /* Base Overlay */
 .yt-play-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.2);
   pointer-events: none;
   transition: background 0.3s ease;
 }

 /* Lingkaran Tombol */
 .yt-play-btn {
   width: 44px !important;
   /* Ukuran lingkaran luar */
   height: 44px !important;
   background: rgba(15, 15, 15, 0.65);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   border: 2px solid #d4af37;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   transition: all 0.3s ease;
   animation: ytPulse 2s infinite ease-in-out;
 }

 /* Icon Segitiga Play (Dipaksa Mengecil dengan !important) */
 .yt-play-btn i.yt-play-icon {
   color: #d4af37 !important;
   font-size: 1.2rem !important;
   /* Paksa ukuran segitiga lebih kecil */
   width: auto !important;
   height: auto !important;
   line-height: 1 !important;
   margin-left: 2px !important;
   /* Presisi di tengah */
   transition: color 0.3s ease, transform 0.3s ease;
 }

 /* Animasi Pulse */
 @keyframes ytPulse {
   0% {
     box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5), 0 4px 15px rgba(0, 0, 0, 0.5);
   }

   70% {
     box-shadow: 0 0 0 8px rgba(212, 175, 55, 0), 0 4px 15px rgba(0, 0, 0, 0.5);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 4px 15px rgba(0, 0, 0, 0.5);
   }
 }

 /* Efek Hover */
 .portfolio-card:hover .yt-play-overlay {
   background: rgba(0, 0, 0, 0.4);
 }

 .portfolio-card:hover .yt-play-btn {
   transform: scale(1.1);
   border-color: #ffd700;
   background: rgba(20, 20, 20, 0.85);
   animation: none;
   box-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 8px 20px rgba(0, 0, 0, 0.7);
 }

 .portfolio-card:hover .yt-play-btn i.yt-play-icon {
   color: #ffd700 !important;
 }

 /* Responsif untuk Layar HP / Tablet Kecil (<= 768px) */
 @media (max-width: 768px) {
   .yt-play-btn {
     width: 32px !important;
     height: 32px !important;
     border-width: 1.5px;
   }

   .yt-play-btn i.yt-play-icon {
     font-size: 0.8rem !important;
     /* Sangat pas di HP */
     margin-left: 1px !important;
   }
 }

 /* =====================================================
   PROPERTY DESCRIPTION & DARK MODE STYLES
   ===================================================== */
 .property-description {
   --pd-text: #d1d5db;
   --pd-text-dim: #9ca3af;
   --pd-strong: #f3f4f6;
   --pd-accent: #ff7a29;
   --pd-accent-2: #ff8a3d;
   --pd-accent-3: #ff944d;
   --pd-border: #374151;
   --pd-bg-soft: #1a1a1a;
   --pd-bg-table: #181818;

   font-size: 15px;
   color: var(--pd-text);
   line-height: 1.8;
   letter-spacing: 0.15px;
   font-weight: 400;
   font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
   max-width: 68ch;
   padding: 20px;
   border-radius: 8px;
   overflow-wrap: break-word;
   word-break: break-word;
 }

 .property-description>*:first-child {
   margin-top: 0;
 }

 .property-description>*:last-child {
   margin-bottom: 0;
 }

 .property-description p {
   margin: 0 0 14px;
 }

 .property-description ol {
   padding-left: 26px;
   margin: 0 0 16px;
   counter-reset: item;
   list-style: none;
 }

 .property-description ol li {
   position: relative;
   padding-left: 8px;
   margin-bottom: 10px;
   counter-increment: item;
   line-height: 1.75;
 }

 .property-description ol li::before {
   content: counter(item) ".";
   position: absolute;
   left: -24px;
   top: 0;
   font-weight: 700;
   color: var(--pd-accent);
   font-size: 14px;
   min-width: 18px;
   text-align: right;
 }

 .property-description ul {
   padding-left: 24px;
   margin: 0 0 16px;
   list-style: none;
 }

 .property-description ul li {
   position: relative;
   padding-left: 8px;
   margin-bottom: 10px;
   line-height: 1.75;
 }

 .property-description ul li::before {
   content: '•';
   position: absolute;
   left: -16px;
   top: -1px;
   color: var(--pd-accent);
   font-size: 18px;
   line-height: 1;
 }

 .property-description ul ul li::before,
 .property-description ol ol li::before {
   opacity: 0.7;
 }

 .property-description strong,
 .property-description b {
   font-weight: 700;
   color: var(--pd-strong);
 }

 .property-description em,
 .property-description i {
   color: var(--pd-text);
   font-style: italic;
 }

 .property-description h1,
 .property-description h2,
 .property-description h3,
 .property-description h4 {
   font-weight: 700;
   color: var(--pd-accent-2);
   line-height: 1.4;
   margin: 22px 0 10px;
   letter-spacing: 0.2px;
 }

 .property-description h1 {
   font-size: 20px;
 }

 .property-description h2 {
   font-size: 18px;
 }

 .property-description h3 {
   font-size: 16px;
 }

 .property-description h4 {
   font-size: 15px;
 }

 .property-description hr {
   border: none;
   border-top: 1px solid var(--pd-border);
   margin: 24px 0;
 }

 .property-description blockquote {
   border-left: 3px solid var(--pd-accent);
   padding: 12px 18px;
   margin: 16px 0;
   background: var(--pd-bg-soft);
   border-radius: 0 8px 8px 0;
   color: var(--pd-text-dim);
   font-style: italic;
   line-height: 1.7;
 }

 .property-description blockquote p:last-child {
   margin-bottom: 0;
 }

 .property-description a {
   color: var(--pd-accent-3);
   text-decoration: underline;
   text-underline-offset: 3px;
   font-weight: 600;
   transition: color .15s ease;
 }

 .property-description a:hover {
   color: #ffb380;
   text-decoration: none;
 }

 .property-description code {
   background: var(--pd-bg-soft);
   color: #ffcf9e;
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 0.9em;
   font-family: 'JetBrains Mono', Consolas, monospace;
 }

 .property-description pre {
   background: var(--pd-bg-soft);
   padding: 14px 16px;
   border-radius: 8px;
   overflow-x: auto;
   margin: 0 0 16px;
   border: 1px solid var(--pd-border);
 }

 .property-description pre code {
   background: none;
   padding: 0;
 }

 .property-description img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin: 12px 0;
   display: block;
 }

 .property-description table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 16px;
   font-size: 14px;
   display: block;
   overflow-x: auto;
   border-radius: 8px;
 }

 .property-description table th {
   background: #241a14;
   color: var(--pd-accent-3);
   font-weight: 700;
   padding: 10px 14px;
   text-align: left;
   border: 1px solid var(--pd-border);
   white-space: nowrap;
 }

 .property-description table td {
   padding: 10px 14px;
   color: var(--pd-text);
   border: 1px solid var(--pd-border);
 }

 .property-description table tr:nth-child(even) td {
   background: var(--pd-bg-table);
 }

 @media (max-width: 480px) {
   .property-description {
     font-size: 14.5px;
     padding: 16px;
     max-width: 100%;
   }

   .property-description h1 {
     font-size: 18px;
   }

   .property-description h2 {
     font-size: 17px;
   }
 }

 /* =====================================================
   SR WORKSHOP.ID — DESIGN TOKENS
   ===================================================== */
 :root {
   --bg-0: #0a0a0b;
   --bg-1: #101012;
   --bg-2: #17171a;
   --bg-3: #1f1f23;
   --line: rgba(255, 255, 255, 0.08);
   --line-strong: rgba(255, 255, 255, 0.14);

   --gold-light: #f3d488;
   --gold: #d9ad4f;
   --gold-deep: #a9791f;
   --gold-grad: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);

   --white: #f5f4f2;
   --grey-1: #b7b6bd;
   --grey-2: #85848c;

   --font-head: "Plus Jakarta Sans", "Poppins", sans-serif;
   --font-body: "DM Sans", sans-serif;

   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 20px;

   --shadow-gold: 0 12px 30px -12px rgba(217, 173, 79, 0.35);
 }

 * {
   box-sizing: border-box;
 }

 /* Kunci utama pencegah halaman bergeser kanan-kiri */
 html,
 body {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
   scroll-behavior: smooth;
 }

 body {
   background: var(--bg-0);
   color: var(--grey-1);
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: var(--font-head);
   color: var(--white);
   font-weight: 700;
   margin: 0;
 }

 a {
   color: inherit;
   text-decoration: none;
   transition: color .2s ease, opacity .2s ease;
 }

 p {
   margin: 0;
 }

 ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }

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

 .container-fluid {
   max-width: 1400px;
 }

 /* =====================================================
   EFEK TEKS EMAS BERGERAK / SHIMMER GOLD
   ===================================================== */
 .gold-moving-text {
   background: linear-gradient(110deg,
       #a9791f 0%,
       #d9ad4f 25%,
       #fff2cb 50%,
       #d9ad4f 75%,
       #a9791f 100%);
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   animation: shineGold 3.5s linear infinite;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   font-weight: 800;
   font-size: clamp(1.4rem, 3vw, 2.2rem);
 }

 .gold-moving-text::before,
 .gold-moving-text::after {
   content: "";
   flex: 1;
   max-width: 120px;
   height: 2px;
   background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
   border-radius: 2px;
 }

 @keyframes shineGold {
   0% {
     background-position: 200% center;
   }

   100% {
     background-position: -200% center;
   }
 }

 @media (max-width: 575px) {
   .gold-moving-text {
     gap: 0.75rem;
   }

   .gold-moving-text::before,
   .gold-moving-text::after {
     max-width: 35px;
   }
 }

 /* =====================================================
   HERO SECTION
   ===================================================== */
 .hero-header-bg {
   position: relative;
   background: url('../../images/header-sr-wr-2.webp') center center / cover no-repeat;
   padding: 2rem;
   overflow: hidden;
 }

 .min-vh-80 {
   min-height: auto !important;
   padding-top: 1.5rem;
 }

 .hero-header-bg .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
       rgba(10, 10, 11, 0.95) 0%,
       rgba(10, 10, 11, 0.75) 50%,
       rgba(10, 10, 11, 0.4) 100%);
   z-index: 1;
 }

 .hero-header-bg .container-fluid {
   z-index: 2;
 }

 .hero-eyebrow {
   font-family: var(--font-head);
   color: var(--gold-light);
   font-weight: 700;
   font-size: 0.85rem;
   letter-spacing: 0.22em;
   margin-bottom: 0.75rem;
 }

 .hero-title {
   font-size: clamp(2.2rem, 4.5vw, 3.8rem);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.01em;
   color: var(--white);
   margin-bottom: 1.25rem;
 }

 .gold-text {
   background: var(--gold-grad);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .hero-desc {
   color: var(--grey-1);
   max-width: 36rem;
   font-size: 1.05rem;
   line-height: 1.6;
   margin-bottom: 2rem;
 }

 .hero-actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
 }

 /* Highlights Box */
 .hero-highlights {
   margin: 5rem 0 2rem !important;
   /* Jarak atas hanya 1rem */
   padding: 1rem !important;
   /* Padatkan isi dalam box */
   border: 1px solid var(--gold-deep);
   border-radius: var(--radius-md);
   background: rgba(23, 23, 26, 0.85);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .hero-highlights {
   margin: 3rem 0 0;
   border: 1px solid var(--gold-deep);
   border-radius: var(--radius-md);
   background: linear-gradient(160deg, rgba(217, 173, 79, 0.06), transparent 60%);
   padding: 1.75rem 1.5rem;
   box-shadow: 0 0 0 1px rgba(217, 173, 79, 0.08) inset;
 }

 .hero-highlights .row {
   display: flex;
   align-items: stretch;
 }

 .highlight-item {
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 0.9rem;
   margin-bottom: 0;
   padding: 0.25rem 1.1rem;
 }

 .highlight-item i {
   color: var(--gold);
   font-size: 1.4rem;
   margin-top: 0.15rem;
   flex-shrink: 0;
 }

 .highlight-item h6,
 .highlight-item h2 {
   font-size: 0.78rem;
   letter-spacing: 0.06em;
   color: var(--white);
   margin-bottom: 0.25rem;
   font-weight: 600;
   line-height: 1.2;
 }

 .highlight-item p {
   font-size: 0.82rem;
   color: var(--grey-2);
   line-height: 1.45;
 }

 @media (min-width: 992px) {
   .highlight-item:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     height: 65%;
     width: 1px;
     background: var(--line-strong);
   }
 }

 @media (max-width: 991px) {
   .hero-highlights {
     padding: 1.25rem 1rem;
     border-radius: var(--radius-sm);
   }

   .highlight-item {
     padding: 0.9rem 0.5rem;
   }

   .highlight-item:not(:nth-last-child(-n+2)) {
     border-bottom: 1px solid var(--line);
   }
 }

 @media (max-width: 575px) {
   .highlight-item {
     flex-direction: column;
     text-align: center;
     align-items: center;
     gap: 0.5rem;
   }

   .highlight-item i {
     font-size: 1.6rem;
   }
 }

 @media (max-width: 480px) {
   .hero-highlights .row>.highlight-item {
     flex: 0 0 100%;
     max-width: 100%;
     border-bottom: 1px solid var(--line);
   }

   .hero-highlights .row>.highlight-item:last-child {
     border-bottom: none;
   }
 }

 @media (max-width: 991px) {
   .hero-header-bg {
     padding: 4rem 0 2rem;
   }

   .hero-header-bg .hero-overlay {
     background: linear-gradient(180deg,
         rgba(10, 10, 11, 0.90) 0%,
         rgba(10, 10, 11, 0.80) 100%);
   }

   .hero-copy {
     text-align: center;
   }

   .hero-desc {
     margin-left: auto;
     margin-right: auto;
   }

   .hero-actions {
     justify-content: center;
   }
 }

 @media (max-width: 575px) {
   .hero-actions .btn {
     width: 100%;
   }
 }

 /* =====================================================
   BUTTONS
   ===================================================== */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 0.82rem;
   letter-spacing: 0.06em;
   padding: 0.85rem 1.6rem;
   border-radius: var(--radius-sm);
   border: 1px solid transparent;
   transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
 }

 .btn:hover {
   transform: translateY(-2px);
 }

 .btn-gold {
   background: var(--gold-grad);
   color: #1a1305;
   box-shadow: var(--shadow-gold);
 }

 .btn-gold:hover {
   color: #1a1305;
   box-shadow: 0 16px 34px -10px rgba(217, 173, 79, 0.5);
 }

 .btn-gold-outline {
   background: transparent;
   border-color: var(--gold);
   color: var(--gold-light);
   padding: 0.6rem 1.3rem;
 }

 .btn-gold-outline:hover {
   background: rgba(217, 173, 79, 0.1);
   color: var(--gold-light);
 }

 .btn-outline-light {
   background: transparent;
   border-color: var(--line-strong);
   color: var(--white);
 }

 .btn-outline-light:hover {
   border-color: var(--gold);
   color: var(--gold-light);
 }

 .hero-actions .btn i,
 .btn-gold-outline i {
   color: inherit;
 }

 /* =====================================================
   HEADER / NAVBAR
   ===================================================== */
 .site-header {
   background: rgba(10, 10, 11, 0.92);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--line);
   position: sticky;
   top: 0;
   z-index: 1000;
 }

 .navbar {
   padding: 0.9rem 0;
 }

 .navbar-brand {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }

 .brand-mark-img {
   height: 55px;
   width: auto;
   max-width: 100%;
   object-fit: contain;
   flex-shrink: 0;
 }

 .brand-mark {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   flex-shrink: 0;
   border-radius: 10px;
   background: radial-gradient(130% 150% at 30% 10%, #2b2b2b 0%, #0a0a0a 65%);
   border: 1px solid rgba(217, 173, 79, 0.4);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
     inset 0 -6px 10px rgba(0, 0, 0, 0.5),
     0 10px 20px -8px rgba(0, 0, 0, 0.65);
   overflow: hidden;
 }

 .brand-mark::before {
   content: "";
   position: absolute;
   inset: -50% -20%;
   background: linear-gradient(115deg,
       transparent 38%,
       rgba(255, 255, 255, 0.22) 47%,
       rgba(255, 255, 255, 0.05) 54%,
       transparent 62%);
   pointer-events: none;
 }

 .brand-mark-text {
   position: relative;
   z-index: 1;
   font-family: var(--font-head);
   font-weight: 900;
   font-size: 1.45rem;
   letter-spacing: -1px;
   line-height: 1;
   background: linear-gradient(180deg, #f8e4ab 0%, #e0b158 40%, #a97a24 75%, #7c5716 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
 }

 .brand-text {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
 }

 .brand-text strong {
   font-family: var(--font-head);
   color: var(--white);
   font-size: 1.05rem;
   letter-spacing: 0.03em;
 }

 .brand-text small {
   color: var(--grey-2);
   font-size: 0.6rem;
   letter-spacing: 0.08em;
   font-weight: 500;
 }

 .main-menu {
   gap: 0.35rem;
 }

 .main-menu .nav-link {
   position: relative;
   font-family: var(--font-head);
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   color: var(--grey-1);
   padding: 0.5rem 0.9rem !important;
   transition: color .2s ease;
 }

 .main-menu .nav-link::after {
   content: "";
   position: absolute;
   left: 0.9rem;
   right: 0.9rem;
   bottom: 0.15rem;
   height: 2px;
   border-radius: 2px;
   background: var(--gold-grad);
   transform: scaleX(0);
   transform-origin: center;
   transition: transform .25s ease;
 }

 .main-menu .nav-item.active .nav-link,
 .main-menu .nav-link:hover {
   color: var(--gold-light);
 }

 .main-menu .nav-item.active .nav-link::after,
 .main-menu .nav-link:hover::after {
   transform: scaleX(1);
 }

 .main-menu .dropdown-toggle::after {
   transition: transform .25s ease;
 }

 .main-menu .nav-item.dropdown.open .dropdown-toggle::after {
   transform: rotate(180deg);
 }

 .dropdown-menu {
   background: var(--bg-2);
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
 }

 .dropdown-item {
   color: var(--grey-1);
   font-size: 0.85rem;
   padding: 0.6rem 1.1rem;
   transition: background .15s ease, color .15s ease;
 }

 .dropdown-item:hover {
   background: var(--bg-3);
   color: var(--gold-light);
 }

 .navbar-toggler {
   border: 1px solid var(--line-strong);
   color: var(--gold-light);
   border-radius: var(--radius-sm);
   width: 42px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: border-color .2s ease, background .2s ease;
   cursor: pointer;
 }

 .navbar-toggler:hover,
 .navbar-toggler:focus {
   border-color: var(--gold);
   background: rgba(217, 173, 79, 0.08);
   outline: none;
 }

 .nav-link:focus-visible,
 .dropdown-item:focus-visible,
 .navbar-close:focus-visible {
   outline: 2px solid var(--gold);
   outline-offset: 2px;
   border-radius: 4px;
 }

 /* =====================================================
   MOBILE OFF-CANVAS NAVIGATION (PERBAIKAN KUNCI)
   ===================================================== */
 .nav-overlay {
   position: fixed;
   inset: 0;
   background: rgba(4, 4, 5, 0.75);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
   z-index: 1040;
 }

 .nav-overlay.show {
   opacity: 1;
   pointer-events: auto;
 }

 .navbar-close {
   display: none;
 }

 @media (max-width: 991px) {
   .site-header {
     z-index: 1055 !important;
   }

   .navbar-collapse {
     position: fixed;
     top: 0;
     right: 0;
     height: 100vh;
     width: min(82vw, 320px);
     background: var(--bg-2);
     border-left: 1px solid var(--line);
     box-shadow: -12px 0 30px rgba(0, 0, 0, 0.5);
     display: flex !important;
     flex-direction: column;
     align-items: flex-start;
     padding: 4.5rem 1.5rem 2rem;
     transform: translateX(100%);
     transition: transform .3s ease-in-out, visibility .3s ease-in-out;
     z-index: 1060 !important;
     overflow-y: auto;

     /* Sembunyikan sepenuhnya dari aliran layar agar tidak dapat digeser jika belum aktif */
     visibility: hidden;
     pointer-events: none;
   }

   .navbar-collapse.show {
     transform: translateX(0);
     visibility: visible;
     pointer-events: auto;
   }

   .navbar-close {
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 1.1rem;
     right: 1.2rem;
     background: transparent;
     border: 1px solid var(--line-strong);
     color: var(--gold-light);
     width: 36px;
     height: 36px;
     border-radius: 50%;
     font-size: 0.9rem;
     cursor: pointer;
   }

   .main-menu {
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     margin: 0 !important;
     gap: 0;
   }

   .main-menu .nav-item {
     width: 100%;
   }

   .main-menu .nav-link {
     padding: 0.85rem 0 !important;
     width: 100%;
     border-bottom: 1px solid var(--line);
   }

   .main-menu .dropdown-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }

   .dropdown-menu {
     position: static !important;
     transform: none !important;
     width: 100%;
     background: rgba(0, 0, 0, 0.2);
     border: none;
     padding-left: 0.75rem;
     margin: 0;
     box-shadow: none;
     display: block !important;
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease, margin .3s ease;
   }

   .nav-item.dropdown.open .dropdown-menu {
     max-height: 350px;
     opacity: 1;
     margin: 0.3rem 0 0.5rem;
   }

   .navbar-collapse .btn-gold-outline {
     display: inline-flex !important;
     width: 100%;
     justify-content: center;
     margin-top: 1.5rem;
   }

   .brand-mark-img {
     height: 40px;
   }

   .navbar .container-fluid {
     padding-left: 1rem;
     padding-right: 1rem;
   }

   .navbar-brand {
     gap: 0.5rem;
     min-width: 0;
     flex: 1 1 auto;
   }

   .navbar-toggler {
     flex-shrink: 0;
   }

   .brand-mark {
     width: 38px;
     height: 38px;
     flex-shrink: 0;
   }

   .brand-mark-text {
     font-size: 1.15rem;
   }

   .brand-text {
     min-width: 0;
   }

   .brand-text strong {
     font-size: 0.88rem;
   }

   .brand-text small {
     display: block;
     font-size: 0.52rem;
     letter-spacing: 0.03em;
     line-height: 1.3;
     white-space: normal;
   }
 }

 @media (max-width: 400px) {
   .brand-mark-img {
     height: 44px;
   }

   .navbar-brand {
     gap: 0.4rem;
   }

   .brand-mark {
     width: 34px;
     height: 34px;
   }

   .brand-mark-text {
     font-size: 1rem;
   }

   .brand-text strong {
     font-size: 0.8rem;
   }

   .brand-text small {
     font-size: 0.48rem;
     letter-spacing: 0.01em;
   }
 }

 @media (min-width: 992px) {
   .main-menu .nav-item.dropdown {
     position: relative;
   }

   .main-menu .dropdown-menu {
     display: block;
     position: absolute;
     top: calc(100% + 12px);
     left: 50%;
     min-width: 240px;
     margin: 0;
     padding: 0.5rem;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transform: translate(-50%, 8px);
     transition: opacity .2s ease, transform .2s ease, visibility .2s;
     box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.55);
   }

   .main-menu .nav-item.dropdown:hover .dropdown-menu,
   .main-menu .nav-item.dropdown:focus-within .dropdown-menu {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     transform: translate(-50%, 0);
   }

   .main-menu .dropdown-item {
     border-radius: var(--radius-sm);
   }
 }

 /* =====================================================
   SECTIONS & GRID SYSTEM
   ===================================================== */
 .section-dark {
   background: var(--bg-0);
   padding: 5rem 0;
 }

 .section-darker {
   background: var(--bg-1);
   padding: 5rem 0;
 }

 .section-heading {
   margin-bottom: 3rem;
 }

 .eyebrow-gold {
   font-family: var(--font-head);
   color: var(--gold);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.22em;
   margin-bottom: 0.6rem;
 }

 .section-heading h2 {
   font-size: clamp(1.4rem, 3vw, 2.2rem);
   font-weight: 800;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   width: 100%;
   margin: 0 auto;
 }

 .section-heading h2::before,
 .section-heading h2::after {
   content: "";
   flex: 1;
   max-width: 150px;
   height: 2px;
   background: var(--gold-grad);
   border-radius: 2px;
 }

 @media (max-width: 575px) {
   .section-heading h2 {
     gap: 0.75rem;
   }

   .section-heading h2::before,
   .section-heading h2::after {
     max-width: 40px;
   }
 }

 @media (min-width: 992px) {
   .col-lg-2-4 {
     flex: 0 0 20%;
     max-width: 20%;
   }
 }

 .service-grid {
   row-gap: 1.1rem;
   margin-left: -0.5rem;
   margin-right: -0.5rem;
 }

 .service-grid>[class*="col-"] {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }

 .service-card {
   display: flex;
   flex-direction: column;
   position: relative;
   background: var(--bg-2);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   padding: 1.25rem 1rem;
   height: 100%;
   overflow: hidden;
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
 }

 .service-card .service-img {
   width: 100%;
   height: 140px;
   border-radius: var(--radius-sm);
   overflow: hidden;
   margin-bottom: 1rem;
   background: var(--bg-3);
   border: 1px solid rgba(217, 173, 79, 0.2);
   display: block;
   line-height: 0;
 }

 .service-card .service-img a {
   display: block;
   width: 100%;
   height: 100%;
 }

 .service-card .service-img img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.3s ease;
 }

 .service-card:hover .service-img img {
   transform: scale(1.08);
 }

 .service-card .service-num {
   position: absolute;
   top: 1.5rem;
   right: 1.4rem;
   font-family: var(--font-head);
   font-weight: 800;
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.8);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
   z-index: 2;
 }

 @media (max-width: 575px) {
   .service-card {
     padding: 1rem 0.85rem;
   }

   .service-card .service-img {
     height: 110px;
   }

   .service-card h5,
   .service-card h3 {
     font-size: 0.9rem;
   }

   .service-card p {
     font-size: 0.78rem;
   }
 }

 .service-card:hover {
   transform: translateY(-6px);
   border-color: var(--gold-deep);
   box-shadow: var(--shadow-gold);
 }

 .service-card h5,
 .service-card h3 {
   font-size: 0.98rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   line-height: 1.3;
 }

 .service-card p {
   font-size: 0.83rem;
   color: var(--grey-2);
   margin-bottom: 1rem;
 }

 .service-card>a {
   font-family: var(--font-head);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   color: var(--gold);
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
 }

 .service-card>a:hover {
   color: var(--gold-light);
   gap: 0.6rem;
 }

 .service-card>a i {
   font-size: 0.7rem;
   transition: transform .2s ease;
 }

 /* =====================================================
   WHY CHOOSE US, PORTFOLIO & CLIENTS
   ===================================================== */
 .why-grid {
   row-gap: 2rem;
 }

 .why-card {
   text-align: center;
   padding: 0 0.5rem;
 }

 .why-card i {
   font-size: 1.8rem;
   color: var(--gold);
   margin-bottom: 1rem;
   display: inline-block;
 }

 .why-card h6,
 .why-card h3 {
   font-size: 0.85rem;
   letter-spacing: 0.05em;
   margin-bottom: 0.6rem;
 }

 .why-card p {
   font-size: 0.83rem;
   color: var(--grey-2);
 }

 .portfolio-grid {
   row-gap: 1.4rem;
 }

 .portfolio-card {
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--line);
   background: var(--bg-2);
   text-align: center;
   transition: border-color .25s ease, transform .25s ease;
 }

 .portfolio-card:hover {
   transform: translateY(-4px);
   border-color: var(--gold-deep);
 }

 .portfolio-img {
   aspect-ratio: 4 / 3;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(160deg, #1c1c20 0%, #0c0c0d 100%);
 }

 .portfolio-img i {
   font-size: 2.2rem;
   color: var(--gold);
   opacity: 0.85;
 }

 .portfolio-card span {
   display: block;
   padding: 0.85rem 0.6rem;
   font-family: var(--font-head);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: var(--grey-1);
 }

 .client-grid {
   row-gap: 2rem;
 }

 .client-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
 }

 .client-item i {
   font-size: 1.6rem;
   color: var(--gold);
   margin-bottom: 0.5rem;
   display: block;
 }

 .client-item span {
   display: block;
   width: 100%;
   font-family: var(--font-head);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: var(--grey-2);
 }

 /* Logo gambar klien (mis. Pertamina) supaya sejajar & seukuran dengan item ikon lainnya */
 .client-logo-img {
   display: block;
   height: 90px;
   width: auto;
   max-width: 100%;
   object-fit: contain;
   margin: 0 auto 0.5rem;

   opacity: 0.9;
   transition: filter .25s ease, opacity .25s ease, transform .25s ease;
 }

 .client-item:hover .client-logo-img {
   filter: none;
   opacity: 1;
   transform: translateY(-2px);
 }

 /* =====================================================
   CTA & FOOTER
   ===================================================== */
 .cta-section {
   background: linear-gradient(135deg, #14110a 0%, #0a0a0b 60%);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   padding: 3.5rem 0;
 }

 .cta-section h3 {
   font-size: clamp(1.5rem, 3vw, 2rem);
   margin-bottom: 0.75rem;
 }

 .cta-section p {
   color: var(--grey-1);
   margin-bottom: 1.5rem;
   max-width: 34rem;
 }

 .cta-icon {
   font-size: 8rem;
   color: var(--gold);
   opacity: 0.9;
 }

 .site-footer {
   background: var(--bg-1);
   padding: 4rem 0 1.5rem;
 }

 .site-footer .navbar-brand {
   margin-bottom: 0.75rem;
 }

 .site-footer p {
   color: var(--grey-2);
   font-size: 0.85rem;
 }

 .site-footer h6,
 .site-footer h3,
 .site-footer .footer-title {
   font-size: 0.75rem;
   letter-spacing: 0.1em;
   color: var(--gold);
   margin-bottom: 1.1rem;
   font-weight: 700;
   text-transform: uppercase;
 }

 .site-footer ul {
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }

 .site-footer ul li {
   margin-bottom: 0.6rem;
 }

 .site-footer ul li a {
   color: var(--grey-1);
   font-size: 0.85rem;
 }

 .site-footer ul li a i {
   color: var(--gold);
   font-size: 0.72rem;
   transition: transform 0.2s ease, color 0.2s ease;
 }

 .site-footer ul li a:hover {
   color: var(--gold-light);
 }

 .site-footer ul li a:hover i {
   color: var(--gold-light);
   transform: translateX(3px);
 }

 .contact-list li {
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
   color: var(--grey-1);
   font-size: 0.85rem;
 }

 .contact-list i {
   color: var(--gold);
   margin-top: 0.2rem;
 }

 .contact-list a {
   color: var(--grey-1);
   text-decoration: underline;
   text-underline-offset: 3px;
 }

 .contact-list a:hover {
   color: var(--gold-light);
 }

 .social-icons {
   display: flex;
   gap: 0.6rem;
   margin-top: 1rem;
 }

 .social-icons a {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 1px solid var(--line-strong);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--grey-1);
   font-size: 0.85rem;
 }

 .social-icons a:hover {
   border-color: var(--gold);
   color: var(--gold-light);
 }

 .site-footer hr {
   border-color: var(--line);
   margin: 2.5rem 0 1.5rem;
 }

 .site-footer .row:last-child p {
   color: var(--grey-2);
   font-size: 0.8rem;
 }

 #backToTop {
   position: fixed;
   right: 1.4rem;
   bottom: 1.4rem;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: var(--gold-grad);
   color: #1a1305;
   font-size: 0.95rem;
   box-shadow: var(--shadow-gold);
   cursor: pointer;
   z-index: 900;
   display: none;
 }

 #backToTop.show {
   display: block;
 }

 @media (max-width: 767px) {

   .section-dark,
   .section-darker {
     padding: 3.5rem 0;
   }

   .cta-section {
     text-align: center;
   }
 }

 /* =====================================================
   MODAL POPUP
   ===================================================== */
 .modal-backdrop.show {
   background: var(--bg-0);
   opacity: 0.88 !important;
 }

 .modal-dialog {
   filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
 }

 .modal-content {
   background: var(--bg-2);
   border: 1px solid var(--gold-deep);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(217, 173, 79, 0.12) inset;
 }

 .modal-header {
   background: linear-gradient(135deg, #14110a 0%, #0a0a0b 100%);
   border-bottom: 1px solid var(--line-strong);
   padding: 1.1rem 1.4rem;
   position: relative;
   align-items: center;
 }

 .modal-header .close {
   color: var(--gold-light) !important;
   opacity: 1;
   font-size: 1.6rem;
   font-weight: 400;
   transition: color .2s ease, transform .2s ease;
 }

 .modal-header .close:hover {
   color: var(--gold) !important;
   transform: rotate(90deg);
 }

 .modal-body {
   background: var(--bg-2);
   padding: 1.5rem;
 }

 .modal-body img.rounded {
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-md) !important;
 }

 .modal .caption-area h2,
 .modal .caption-area h3,
 .modal .caption-area h4 {
   color: var(--white);
   font-family: var(--font-head);
   letter-spacing: 0.02em;
   position: relative;
   padding-bottom: 0.7rem;
   margin-bottom: 0 !important;
 }

 .modal .caption-area h2::after,
 .modal .caption-area h3::after,
 .modal .caption-area h4::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 46px;
   height: 2px;
   background: var(--gold-grad);
   border-radius: 2px;
 }

 .modal .caption-area small {
   color: var(--grey-2) !important;
 }

 .modal .btn__secondary.btn__outlined {
   background: transparent;
   border: 1px solid var(--gold);
   color: var(--gold-light);
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.06em;
   border-radius: var(--radius-sm);
   padding: 0.75rem 1.9rem;
   transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
 }

 .modal .btn__secondary.btn__outlined:hover {
   background: var(--gold-grad);
   color: #1a1305;
   border-color: transparent;
   box-shadow: var(--shadow-gold);
   transform: translateY(-2px);
 }

 .modal .modal-footer {
   background: var(--bg-1);
   border-top: 1px solid var(--line);
 }

 .modal .modal-footer .btn-success {
   background: var(--gold-grad) !important;
   border: none !important;
   color: #1a1305 !important;
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.05em;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-gold);
   transition: box-shadow .2s ease, transform .2s ease;
 }

 .modal .modal-footer .btn-success:hover {
   box-shadow: 0 16px 34px -10px rgba(217, 173, 79, 0.5);
   transform: translateY(-2px);
 }

 .modal-body::-webkit-scrollbar {
   width: 6px;
 }

 .modal-body::-webkit-scrollbar-track {
   background: var(--bg-1);
 }

 .modal-body::-webkit-scrollbar-thumb {
   background: var(--gold-deep);
   border-radius: 10px;
 }

 @media (max-width: 575px) {
   .modal-header {
     padding: 1rem 1.1rem;
   }

   .modal-body {
     padding: 1.15rem;
   }
 }