/* =====================================================================
   Techno Creative — Design System v2 (Brand Orange)
   Palette: signal orange + charcoal ink + warm paper
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
   Icons: Bootstrap Icons (bi-*) as primary, Material Icons kept for
   compatibility with existing markup — both styled to match.
   ===================================================================== */

:root{
  --brand:       #FF6A1A;   /* primary brand orange */
  --brand-dark:  #E5590F;
  --brand-light: #FFE8DA;
  --amber:       #FFB020;   /* secondary accent for gradients */

  --ink:         #1C1917;
  --ink-2:       #2A2522;
  --paper:       #FFF9F5;
  --card:        #FFFFFF;
  --slate:       #57534E;
  --slate-2:     #A39A93;
  --line:        #F0E4DC;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(28,25,23,.04), 0 10px 26px rgba(28,25,23,.06);
  --shadow-card-hover: 0 6px 14px rgba(255,106,26,.12), 0 18px 36px rgba(28,25,23,.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
}

a{ color: var(--brand-dark); text-decoration:none; }
a:hover{ color: var(--brand); }
::selection{ background: var(--brand-light); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Unify Bootstrap Icons & Material Icons sizing so both read as one system */
.bi, .material-icons{ vertical-align: -0.15em; line-height:1; }
.material-icons{ font-size: 20px; }

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
.navbar{
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  padding-top: .85rem; padding-bottom: .85rem;
}
.navbar-brand{ font-family: var(--font-display); font-weight:700; color: var(--ink) !important; display:flex; align-items:center; }
.navbar-brand span::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:6px;
  border-radius:50%; background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-light);
}
.nav-link{ font-weight:500; color: var(--slate) !important; border-radius: var(--radius-sm); padding:.5rem .9rem !important; transition: color .15s ease, background .15s ease; }
.nav-link:hover{ color: var(--brand-dark) !important; background: var(--brand-light); }
.nav-link .bi, .nav-link .material-icons{ margin-right:5px; color: var(--brand); }
.nav-link.admin-link .bi, .nav-link.admin-link .material-icons{ color: var(--slate-2); }

/* ---------------------------------------------------------------------
   Hero — warm gradient with node accents
   --------------------------------------------------------------------- */
.hero-section{
  background: var(--ink) !important;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(255,106,26,.35), transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(255,176,32,.22), transparent 46%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%) !important;
  position: relative; overflow: hidden;
  border-radius: 24px !important;
}
.hero-section::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.45; pointer-events:none;
}
.hero-section::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--amber) 100%); opacity:.9;
}
.hero-section .container{ position:relative; z-index:1; }
.hero-section h1{ color:#fff; font-size: clamp(2rem, 4vw, 3rem); }
.hero-section .lead{ color: rgba(255,255,255,.75); max-width: 620px; }
.hero-section .btn-light{
  background: var(--brand); border:none; color:#fff; font-weight:600;
  box-shadow: 0 8px 20px rgba(255,106,26,.35);
}
.hero-section .btn-light:hover{ background: var(--brand-dark); }
.hero-section .btn-outline-light{ border-color: rgba(255,255,255,.35); font-weight:600; }
.hero-section .btn-outline-light:hover{ background: rgba(255,255,255,.08); border-color:#fff; }

/* ---------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------- */
.eyebrow{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform: uppercase; color: var(--brand-dark);
  display:inline-flex; align-items:center; gap:.4rem;
}
.eyebrow .bi{ font-size: .85em; }
section .text-muted.lead{ color: var(--slate-2) !important; }

/* ---------------------------------------------------------------------
   Cards — products & services
   --------------------------------------------------------------------- */
.card{
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hover-elevate:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(255,106,26,.35); }

/* Zoom preview gambar produk di halaman detail */
.product-image-zoom-wrap{ position: relative; cursor: zoom-in; overflow: hidden; border-radius: .5rem; }
.product-image-zoom-wrap img{ transition: transform .35s ease; }
.product-image-zoom-wrap:hover img{ transform: scale(1.06); }
.card-title{ font-family: var(--font-display); font-weight:600; color: var(--ink); }
.card-img-top{ border-radius: var(--radius) var(--radius) 0 0 !important; }

.badge.bg-info{
  background: var(--brand-light) !important; color: var(--brand-dark) !important;
  font-family: var(--font-mono); font-weight:600; font-size:.68rem; letter-spacing:.04em;
  padding:.4em .7em;
}

.text-primary.fw-bold{ color: var(--ink) !important; font-family: var(--font-mono); font-weight:700 !important; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{ border-radius: var(--radius-sm); font-weight:600; padding:.55rem 1.1rem; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; }
.btn-primary{ background: var(--brand); border-color: var(--brand); color:#fff; }
.btn-primary:hover, .btn-primary:focus{ background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 6px 16px rgba(229,89,15,.28); color:#fff; }
.btn-primary:active{ transform: translateY(1px); }
.btn-outline-primary{ color: var(--brand-dark); border-color: var(--brand); }
.btn-outline-primary:hover, .btn-outline-primary:focus{ background: var(--brand); border-color: var(--brand); color:#fff; box-shadow: 0 6px 16px rgba(229,89,15,.28); }
.btn-outline-primary:active{ transform: translateY(1px); }
.btn-outline-secondary{ border-color: var(--line); color: var(--slate); }
.btn-outline-secondary:hover{ background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-light); }
.btn-lg{ padding:.75rem 1.5rem; }
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Service icon nodes (Layanan) — now Bootstrap Icons on gradient discs
   --------------------------------------------------------------------- */
.service-icon{
  background: var(--brand-light) !important;
  position: relative;
}
.service-icon .bi, .service-icon .material-icons{ color: var(--brand) !important; }

/* ---------------------------------------------------------------------
   Testimonials — new, quote-styled with Bootstrap Icons
   --------------------------------------------------------------------- */
.testimonial-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; height:100%; position:relative;
}
.testimonial-card .bi-quote{
  font-size: 2rem; color: var(--brand-light); position:absolute; top:1rem; right:1.25rem;
}
.testimonial-card p{ color: var(--slate); font-style: italic; }
.testimonial-card .client-name{ font-weight:600; color: var(--ink); font-family: var(--font-display); }
.testimonial-card .client-role{ font-size:.8rem; color: var(--slate-2); }
.testimonial-card .stars{ color: var(--brand); font-size:.85rem; margin-bottom:.5rem; }

.testimonial-avatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover; margin-bottom:.6rem;
  border: 2px solid var(--brand-light);
}
.testimonial-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background: var(--brand-light); color: var(--brand-dark); font-size:1.4rem;
}

/* Slider testimoni */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next{
  width:auto; opacity:1;
}
#testimonialCarousel .carousel-control-prev{ left:-8px; }
#testimonialCarousel .carousel-control-next{ right:-8px; }
.testimonial-nav-icon{
  width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--brand-dark);
  box-shadow: var(--shadow-card); transition: background .2s ease, color .2s ease;
}
.testimonial-nav-icon:hover{ background: var(--brand); color:#fff; }
#testimonialCarousel .carousel-indicators button{
  width:9px; height:9px; border-radius:50%; opacity:.35; margin:0 4px;
}
#testimonialCarousel .carousel-indicators button.active{ opacity:1; }
@media (max-width: 767px){
  #testimonialCarousel .carousel-control-prev{ left:0; }
  #testimonialCarousel .carousel-control-next{ right:0; }
}

/* ---------------------------------------------------------------------
   Promo Slider — banner utama halaman depan (Admin > Slide Promo)
   --------------------------------------------------------------------- */
.promo-slide-bg{
  height: 420px; background-size: cover; background-position: center;
  display: flex; align-items: center; position: relative;
}
.promo-slide-overlay{
  position: absolute; inset: 0; width:100%; height:100%;
  /* Overlay gelap merata (bukan lagi gradasi memudar ke transparan) —
     supaya teks tetap terbaca jelas di atas gambar apa pun, termasuk
     gambar yang sudah ada tulisan/detail ramai di dalamnya. */
  background: rgba(20, 17, 15, .40);
  display: flex; align-items: center;
}
.promo-slide-content-box{
  max-width: 620px; padding: 1.75rem 2rem;
  background: rgba(20, 17, 15, .62);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  border-left: 4px solid var(--brand);
  margin-left: 1.5rem;
}
.promo-slide-content-box h1{ font-size: 2.25rem; line-height:1.2; margin-bottom:.5rem; color:#fff !important; }
.promo-slide-content-box .lead{ font-size: 1.05rem; opacity:.92; color:#fff !important; }

.btn-brand-solid{
  background: var(--brand); border-color: var(--brand); color:#fff; font-weight:600;
  padding: .5rem 1.25rem; font-size: .95rem;
}
.btn-brand-solid:hover, .btn-brand-solid:focus{
  background: var(--brand-dark); border-color: var(--brand-dark); color:#fff;
}

#promoSlider .carousel-control-prev,
#promoSlider .carousel-control-next{ width:auto; opacity:1; }
#promoSlider .carousel-control-prev{ left:16px; }
#promoSlider .carousel-control-next{ right:16px; }
#promoSlider .testimonial-nav-icon{ background: var(--brand); color:#fff; border-color: var(--brand); }
#promoSlider .testimonial-nav-icon:hover{ background: var(--brand-dark); }
#promoSlider .carousel-indicators{ margin-bottom:1rem; }
#promoSlider .carousel-indicators button{
  width:10px; height:10px; border-radius:50%; opacity:.4; margin:0 4px;
  background: var(--brand); border:none;
}
#promoSlider .carousel-indicators button.active{ opacity:1; background: var(--brand); }
@media (max-width: 767px){
  .promo-slide-bg{ height: 380px; }
  .promo-slide-content-box{ max-width:90%; padding:1.25rem 1.5rem; }
  .promo-slide-content-box h1{ font-size: 1.4rem; }
  .promo-slide-content-box .lead{ font-size: .9rem; }
}

/* ---------------------------------------------------------------------
   Kartu info lokasi mengambang di atas peta (section Kontak)
   --------------------------------------------------------------------- */
.map-with-card-wrap{ position: relative; }
.map-info-card{
  position: absolute; top: 20px; right: 20px; width: 300px; max-width: calc(100% - 40px);
  background: #fff; border-radius: 12px; padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  z-index: 10;
}
@media (max-width: 767px){
  .map-info-card{ position: static; width: 100%; max-width: 100%; margin-top: 1rem; box-shadow: var(--shadow-card); }
}

/* ---------------------------------------------------------------------
   Contact strip
   --------------------------------------------------------------------- */
.contact-strip{
  background: var(--ink); border-radius: var(--radius); color:#fff; padding: 2rem;
}
.contact-strip .contact-item{ display:flex; align-items:flex-start; gap:.85rem; }
.contact-strip .contact-item .bi{
  width:40px; height:40px; min-width:40px; border-radius:50%;
  background: rgba(255,106,26,.18); color: var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.contact-strip .contact-label{ font-size:.75rem; color: rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em; }
.contact-strip .contact-value{ font-weight:600; }

/* ---------------------------------------------------------------------
   Forms (checkout)
   --------------------------------------------------------------------- */
.form-label{ font-weight:600; color: var(--ink); font-size:.9rem; }
.form-control, .form-select{ border:1px solid var(--line); border-radius: var(--radius-sm); padding:.6rem .85rem; }
.form-control:focus, .form-select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,106,26,.16); }
.alert-info{ background: var(--ink); color:#fff; border:none; border-radius: var(--radius); }
.alert-info h6{ color:#fff; }
.alert-info .text-primary{ color: var(--brand) !important; font-family: var(--font-mono); }
.alert-info small.text-white-50{ color: rgba(255,255,255,.6) !important; }

/* Kotak ringkasan produk di checkout — sengaja BUKAN class .alert supaya
   tidak ikut ter-auto-hide oleh script flash-message di assets/js/script.js */
.product-summary{
  background: var(--ink); color:#fff; border:none; border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.product-summary h6{ color:#fff; }
.product-summary .text-primary{ color: var(--brand) !important; font-family: var(--font-mono); }
.product-summary small.text-white-50{ color: rgba(255,255,255,.6) !important; }
.alert-success{ background:#fff; border:1px solid var(--brand-light); border-radius: var(--radius); }
.alert-success strong{ font-family: var(--font-mono); }

/* ---------------------------------------------------------------------
   Footer — social icons via Bootstrap Icons
   --------------------------------------------------------------------- */
footer.bg-dark{
  background: var(--ink) !important;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand), var(--amber)) 1;
}
footer h5{ color:#fff; font-family: var(--font-display); }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.08); color:#fff; margin-right:.5rem;
  transition: background .15s ease, color .15s ease;
}
.footer-social a:hover{ background: var(--brand); color:#fff; }

/* ---------------------------------------------------------------------
   Footer 4-kolom (Logo | Link Cepat | Informasi Kontak | Jam Operasional)
   --------------------------------------------------------------------- */
.footer-logo-mark{
  width:40px; height:40px; border-radius:8px; background: var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.footer-logo-mark span{ color:#fff; font-weight:800; font-size:20px; font-family: var(--font-display); }
.footer-brand-text{ font-family: var(--font-display); line-height:1.1; font-size:.95rem; letter-spacing:.03em; }

.footer-heading{
  color:#fff; font-family: var(--font-display); font-weight:700; font-size:1rem;
  display:inline-block; padding-bottom:.5rem; margin-bottom:1rem;
  border-bottom: 2px solid var(--brand);
}

.footer-link-list li{ margin-bottom:.65rem; position:relative; padding-left:1rem; }
.footer-link-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:5px; height:5px;
  border-radius:50%; background: var(--brand);
}
.footer-link-list a{ color: rgba(255,255,255,.7); font-size:.9rem; text-decoration:none; transition: color .15s ease; }
.footer-link-list a:hover{ color: var(--brand); }

.footer-contact-list li{ display:flex; align-items:flex-start; }
.footer-contact-list i{ color: var(--brand); margin-right:.6rem; margin-top:.15rem; flex-shrink:0; }
.footer-contact-list span{ line-height:1.4; }

.footer-hours-box{
  background: rgba(255,255,255,.06); border-radius:10px; padding:.25rem .9rem;
}
.footer-hours-row{ border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-hours-box span:last-child{ font-weight:600; font-size:.88rem; }
.footer-hours-box span:first-child{ font-size:.85rem; }

.footer-divider{ border-color: rgba(255,255,255,.1); margin: 2rem 0 1.25rem; }

/* Judul section dengan garis bawah oranye kecil (mis. "Layanan Kami") */
.section-title{
  position: relative; display: inline-block; padding-bottom: .75rem;
}
.section-title::after{
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 48px; height: 3px; background: var(--brand); border-radius: 2px;
}

.team-social-icon{
  width:32px; height:32px; border-radius:50%; background: var(--brand-light); color: var(--brand-dark);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  transition: background .15s ease, color .15s ease;
}
.team-social-icon:hover{ background: var(--brand); color:#fff; }

.portfolio-photo-wrap{ cursor: zoom-in; }
.portfolio-photo-wrap img{ transition: transform .25s ease, opacity .25s ease; }
.portfolio-photo-wrap:hover img{ transform: scale(1.03); opacity: .92; }

/* ---------------------------------------------------------------------
   Grid Logo Klien ("Klien Kami")
   --------------------------------------------------------------------- */
.client-logo-card{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:1.25rem; height:110px;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.client-logo-card:hover{
  border-color: var(--brand); box-shadow: var(--shadow-card-hover); transform: translateY(-2px);
}
.client-logo-card img{
  max-width:100%; max-height:60px; object-fit:contain;
  filter: grayscale(0%); transition: filter .2s ease;
}

/* ---------------------------------------------------------------------
   Tab & Slider Produk (section Katalog di beranda)
   --------------------------------------------------------------------- */
.product-tab-nav .nav-link{
  color: var(--slate); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1.1rem; margin: 0 .25rem .5rem; font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.product-tab-nav .nav-link i{ margin-right: .35rem; }
.product-tab-nav .nav-link.active{
  background: var(--brand); border-color: var(--brand); color: #fff !important;
}
.product-tab-nav .nav-link.active .bi{ color: #fff !important; }
.product-tab-nav .nav-link:not(.active):hover{ border-color: var(--brand); color: var(--brand-dark); }

.product-slider-wrap{ position: relative; }
.product-slider{
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .25rem .25rem 1rem; margin: 0 -.25rem;
  cursor: grab; user-select: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.product-slider::-webkit-scrollbar{ display: none; }
.product-slider.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.product-slide-item{
  flex: 0 0 auto; width: 250px; scroll-snap-align: start;
}
.product-slider-nav{
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center;
  color: var(--brand-dark); transition: background .15s ease, color .15s ease;
}
.product-slider-nav:hover{ background: var(--brand); color: #fff; }
.product-slider-nav.prev{ left: -18px; }
.product-slider-nav.next{ right: -18px; }
@media (max-width: 767px){
  .product-slider-nav{ display: none; } /* di HP cukup swipe langsung, tombol panah mengganggu */
  .product-slide-item{ width: 200px; }
}

/* ---------------------------------------------------------------------
   FAQ Accordion
   --------------------------------------------------------------------- */
.faq-item{ border: 1px solid var(--line); border-radius: 10px !important; margin-bottom: .75rem; overflow: hidden; }
.faq-item .accordion-button{
  font-weight: 600; color: var(--ink); background: #fff;
}
.faq-item .accordion-button:not(.collapsed){
  background: var(--brand-light); color: var(--brand-dark); box-shadow: none;
}
.faq-item .accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(255,106,26,.15); }
.faq-item .accordion-button::after{ flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Zebra-stripe halus antar section (opacity brand oranye) — biar
   halaman depan terasa lebih hidup, bukan monoton putih semua.
   Warna dibuat FULL LEBAR LAYAR (bukan cuma selebar container) pakai
   trik box-shadow raksasa, TANPA nambah padding/margin konten sama
   sekali — jarak & tata letak section tetap persis seperti biasa.
   --------------------------------------------------------------------- */
.section-tint{
  position: relative;
  background: rgba(255, 106, 26, 0.035);
  box-shadow: 0 0 0 100vmax rgba(255, 106, 26, 0.035);
  clip-path: inset(0 -100vmax);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* ---------------------------------------------------------------------
   Floating WhatsApp CS button
   --------------------------------------------------------------------- */
.whatsapp-float{
  position: fixed; bottom: 24px; right: 24px; z-index: 1040;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size: 28px; box-shadow: 0 6px 20px rgba(37,211,102,.4);
  transition: transform .15s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); color:#fff; }
@media (max-width: 767px){
  .whatsapp-float{ width:50px; height:50px; font-size:24px; bottom:16px; right:16px; }
}

/* ---------------------------------------------------------------------
   Print (payment success receipt)
   --------------------------------------------------------------------- */
@media print{
  .navbar, footer, .btn, script{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:1px solid #ccc; }
}

/* ---------------------------------------------------------------------
   Blog
   --------------------------------------------------------------------- */
.blog-meta{ font-family: var(--font-mono); font-size:.75rem; color: var(--slate-2); }
.blog-content{ font-size: 1.05rem; line-height: 1.8; color: var(--slate); }

/* Tipografi konten artikel (hasil dari Quill editor) — supaya paragraf,
   heading, list, dan teks tebal punya jarak & hierarki yang rapi,
   bukan numpuk semua jadi satu blok tanpa jeda */
.blog-content p{ margin-bottom: 1.25rem; }
.blog-content p:last-child{ margin-bottom: 0; }
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4{
  color: var(--ink); font-family: var(--font-display); font-weight: 700;
  margin-top: 2rem; margin-bottom: 1rem; line-height: 1.3;
}
.blog-content h1{ font-size: 1.75rem; }
.blog-content h2{ font-size: 1.5rem; }
.blog-content h3{ font-size: 1.25rem; }
.blog-content h4{ font-size: 1.1rem; }
.blog-content > *:first-child{ margin-top: 0; }
.blog-content strong{ color: var(--ink); font-weight: 700; }
.blog-content a{ color: var(--brand-dark); text-decoration: underline; text-decoration-color: rgba(255,106,26,.35); }
.blog-content a:hover{ color: var(--brand); }

.blog-content ul, .blog-content ol{
  margin-bottom: 1.25rem; padding-left: 1.5rem;
}
.blog-content ul{ list-style: none; }
.blog-content ul li{ position: relative; padding-left: 1.5rem; margin-bottom: .6rem; }
.blog-content ul li::before{
  content: ''; position: absolute; left: 0; top: .65em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.blog-content ol li{ margin-bottom: .6rem; padding-left: .25rem; }
.blog-content ol{ list-style: decimal; }
.blog-content ol li::marker{ color: var(--brand); font-weight: 700; }

.blog-content hr{ border-color: var(--line); margin: 2rem 0; }
.blog-content table{ width: 100%; margin-bottom: 1.25rem; border-collapse: collapse; }
.blog-content table td, .blog-content table th{ border: 1px solid var(--line); padding: .6rem .8rem; }
.blog-content table th{ background: var(--brand-light); font-weight: 700; }
.blog-content h2, .blog-content h3{ margin-top: 1.75rem; }
.blog-content img{ max-width:100%; border-radius: var(--radius-sm); }
.blog-content blockquote{
  border-left: 3px solid var(--brand); padding: .5rem 1rem; color: var(--slate);
  background: var(--brand-light); border-radius: 0 8px 8px 0;
}
.footer-social-inline{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background: var(--brand-light);
  color: var(--brand-dark); margin-right:.4rem; transition: background .15s ease, color .15s ease;
}
.footer-social-inline:hover{ background: var(--brand); color:#fff; }

/* Pagination (blog) — template bawaan CI4 (default_full) TIDAK mencetak
   class "page-item"/"page-link" seperti Bootstrap standar, cuma <ul
   class="pagination"><li><a> polos, dan <li class="active"> untuk halaman
   aktif. Selector di bawah menarget markup ASLI itu. */
.pagination{ margin-bottom:0; list-style:none; padding-left:0; display:flex; flex-wrap:wrap; }
.pagination li{ margin:0 3px; }
.pagination li a{
  display:inline-block; padding:.5rem .85rem; font-size:.9rem;
  color: var(--brand-dark); background:#fff; border:1px solid var(--line); border-radius:8px;
  text-decoration:none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pagination li a:hover{ background: var(--brand-light); color: var(--brand-dark); }
.pagination li.active a{ background: var(--brand); border-color: var(--brand); color:#fff; font-weight:600; }

/* ---------------------------------------------------------------------
   Responsive tweaks
   --------------------------------------------------------------------- */
@media (max-width: 767px){
  .hero-section{ padding: 2.5rem 1.25rem !important; border-radius: 18px !important; }
  .hero-section .btn{ width:100%; margin-bottom:.5rem; }
  .contact-strip{ padding: 1.25rem; }
}