/* =====================================================
   ARYUZ ELEKTRIKAL — THEME.CSS (HERO MOBILE FONT SMALLER + KPI HORIZONTAL COMPACT)
   Light • Professional • Dropdown stable • Mobile drawer fixed
   ===================================================== */
/* ---------- ROOT VARIABLES ---------- */
:root{
  --stroke: rgba(15,23,42,.10);
  --muted: rgba(15,23,42,.68);
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 16px 40px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.18);
  --max: 1140px;
  /* Customizer vars (fallback) */
  --aryuz-primary: #ff3b1a;
  --aryuz-accent: #0f2238;
  --aryuz-bg: #f6f7fb;
  --aryuz-panel: #ffffff;
  --aryuz-text: #0f172a;
  --aryuz-btn-size: md; /* sm|md|lg */
  --aryuz-search-bg: #ffffff;
  --aryuz-search-text: #0f172a;
  --aryuz-search-border: #cfd6e3;
  --aryuz-wa-bg: #ff3b1a;
  --aryuz-wa-text: #ffffff;
  --aryuz-wa-border: #ff3b1a;
  --aryuz-nav-bg: #f6f7fb;
  --aryuz-nav-text: #0f172a;
  --aryuz-nav-border: #e6eaf2;
  /* Hero text color */
  --aryuz-hero-text: #ffffff;
  /* Derived sizes (default -> md) */
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;
  --btn-fs: 14px;
  --aryuz-clients-speed: 28s;

}
/* Size variants (from inline :root style output by customizer) */
:root[style*="--aryuz-btn-size: sm"]{ --btn-pad-y: 8px; --btn-pad-x: 12px; --btn-fs: 13px; }
:root[style*="--aryuz-btn-size: md"]{ --btn-pad-y: 10px; --btn-pad-x: 14px; --btn-fs: 14px; }
:root[style*="--aryuz-btn-size: lg"]{ --btn-pad-y: 12px; --btn-pad-x: 16px; --btn-fs: 15px; }
/* ---------- RESET ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
/* ---------- BODY ---------- */
html, body{
  background: var(--aryuz-bg) !important;
  color: var(--aryuz-text);
}
body.aryuz-theme{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--aryuz-text);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(255,59,26,.10), transparent 60%),
    radial-gradient(1100px 640px at 85% -10%, rgba(15,34,56,.08), transparent 62%),
    var(--aryuz-bg);
}
/* ---------- CONTAINER ---------- */
.container{
  width: min(var(--max), calc(100% - 36px));
  margin-inline:auto;
  background: transparent !important;
}
/* ---------- GLOBAL WRAPPERS ---------- */
.site, .site-content, main, .content, .section{
  background: transparent !important;
}
.card, .panel, .box{
  background: var(--aryuz-panel) !important;
  color: var(--aryuz-text);
}
/* =====================================================
   HEADER \
   ===================================================== */
.site-header{
  position: relative;
  top:auto;
  z-index:9999;
  background: color-mix(in srgb, var(--aryuz-nav-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--aryuz-nav-border);
  transition: box-shadow .25s ease, backdrop-filter .25s ease;
}

.header-inner{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 16px;
  padding: 14px 0;
}
/* LEFT */
.header-left{ display:flex; align-items:center; }
.brand{ display:flex; align-items:center; gap:12px; }
.custom-logo{ max-height:42px; width:auto; }
/* CENTER */
.header-center{ display:flex; justify-content:center; align-items:center; }
/* RIGHT */
.header-right{ display:flex; justify-content:flex-end; align-items:center; }
/* =====================================================
   NAV (Desktop hover dropdown)
   ===================================================== */
.nav{ display:flex; align-items:center; }
.nav .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:8px;
  align-items:center;
}
.nav .menu > li{ position:relative; }
.nav .menu a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--aryuz-nav-text);
}
.nav .menu a:hover{ background: rgba(15,23,42,.05); }
/* Remove old pseudo arrow */
.nav .menu > li.menu-item-has-children > a::after,
.nav .menu > li.menu-item-has-children > a:after{
  content:none !important;
  display:none !important;
}
/* Walker arrow */
.menu .menu-arrow{
  margin-left: 6px;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
}
.menu .menu-arrow svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke: currentColor;
  opacity:.7;
  pointer-events:none;
}
/* FORCE ARROW VISIBLE */
.nav .menu > li.menu-item-has-children > a .menu-arrow{
  display:inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
}
/* Submenu dropdown (DESKTOP) */
.nav .sub-menu{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width: 220px;
  background: var(--aryuz-panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: all .15s ease;
  z-index: 999;
}
.nav .sub-menu li a{
  width:100%;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--aryuz-text);
}
.nav .sub-menu li a:hover{
  background: color-mix(in srgb, var(--aryuz-primary) 10%, transparent);
}
/* Desktop open: hover/focus */
.nav .menu > li:hover > .sub-menu,
.nav .menu > li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
/* Hover bridge desktop */
.nav .menu > li.has-sub::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top: 100%;
  height: 12px;
}
/* =====================================================
   HEADER ICON ACTIONS (Search + WhatsApp)
   ===================================================== */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.12);
  background: var(--aryuz-panel);
  color: var(--aryuz-text);
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.22);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.icon-btn svg{
  width:18px;
  height:18px;
  fill: currentColor;
}
.icon-btn.btn-head{
  background: var(--aryuz-search-bg);
  border-color: var(--aryuz-search-border);
  color: var(--aryuz-search-text);
}
.icon-btn.btn-wa{
  background: var(--aryuz-wa-bg);
  border-color: var(--aryuz-wa-border);
  color: var(--aryuz-wa-text);
}
/* =====================================================
   SECTIONS
   ===================================================== */
.section{
  padding: 60px 0;
}
.section-title{ margin-bottom:16px; }
.section-title h2{
  margin:0;
  font-size:20px;
  font-weight:800;
  color: rgba(15,23,42,.92);
}
.section-title p{ margin:4px 0 0; font-size:13px; color: var(--muted); }
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.card{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.card h3{
  margin:10px 0 8px;
  font-size:16px;
  font-weight:800;
  color: rgba(15,23,42,.92);
}
.card p{ margin:0; font-size:14px; line-height:1.7; color: var(--muted); }
.card-thumb{ padding:16px; }
.card-thumb .card-thumb-img{
  width:100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--stroke);
}
/* =====================================================
   CATEGORY FILTER (chips)
   ===================================================== */
.cat-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: var(--aryuz-panel);
  color: var(--aryuz-text);
  font-size:13px;
  line-height:1;
  transition: transform .15s ease, border-color .15s ease;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(15,23,42,.20); }
.chip.is-active{
  border-color: var(--aryuz-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aryuz-primary) 18%, transparent);
}
/* =====================================================
   LATEST POSTS GRID
   ===================================================== */
.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
  padding:0;
}
.post-thumb-img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.post-thumb--empty{
  width:100%;
  aspect-ratio:16/9;
  background: color-mix(in srgb, var(--aryuz-panel) 70%, var(--aryuz-bg));
  border-bottom:1px solid rgba(15,23,42,.08);
}
.post-body{ padding:14px 14px 16px; }
.post-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  opacity:.8;
  margin-bottom:6px;
}
.post-pill{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  opacity:1;
}
.post-title{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.3;
  color: rgba(15,23,42,.92);
}
.post-excerpt{ margin:0; font-size:13px; opacity:.8; line-height:1.5; }
/* =====================================================
   LOAD MORE + PAGINATION
   ===================================================== */
.loadmore-wrap,
.pagination-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100%;
  margin-top:22px !important;
}
.pagination-wrap .page-numbers{
  min-width:44px !important;
  height:44px !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background: var(--aryuz-panel) !important;
  color: var(--aryuz-text) !important;
  text-decoration:none !important;
  margin: 0 5px !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}
.pagination-wrap .page-numbers:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.22) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}
.pagination-wrap .page-numbers.current{
  border-color: var(--aryuz-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aryuz-primary) 18%, transparent) !important;
}
#loadMorePosts{
  min-width: 240px !important;
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: var(--aryuz-panel) !important;
  color: var(--aryuz-text) !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}
#loadMorePosts:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.22) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}
#loadMorePosts:disabled{
  opacity:.6 !important;
  transform:none !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}
/* =====================================================
   SINGLE / PAGE
   ===================================================== */
.entry-head{ margin: 6px 0 18px;margin-top:16px; }
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  opacity:.75;
  margin-bottom:10px;
}
.breadcrumb a{ color: var(--aryuz-text); }
.breadcrumb .sep{ opacity:.55; }
.entry-title{
  margin:0 0 8px;
  font-size:32px;
  line-height:1.15;
  color: var(--aryuz-accent);
}
.entry-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size:13px;
  opacity:.75;
  margin-bottom:14px;
}
.entry-thumb{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background: var(--aryuz-panel);
  margin: 14px 0 10px;
}
.entry-thumb img{ width:100%; height:auto; display:block; }
/* ABSOLUTE: title never white */
body.page main h1,
body.single main h1,
body.archive main h1,
body.category main h1{
  color: var(--aryuz-accent) !important;
}
.entry-title,
body.page .entry-title,
body.single .entry-title,
body.archive .entry-title,
body.category .entry-title,
.wp-block-post-title,
.wp-block-query-title,
.wp-block-heading{
  color: var(--aryuz-accent) !important;
}
.wp-block-post-title a,
.wp-block-query-title a{
  color: var(--aryuz-accent) !important;
}
/* Share */
.post-share{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.post-share__label{ font-size:13px; opacity:.75; }
.post-share__actions{ display:flex; gap:10px; }
/* Content */
.prose{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:22px;
}
.prose p,.prose li{
  font-size:15px;
  line-height:1.85;
  color: rgba(15,23,42,.80);
}
/* FIX UL/LI size */
.entry-content, .prose{
  font-size: 15px;
  line-height: 1.85;
  color: rgba(15,23,42,.80);
}
.entry-content p,
.entry-content li{
  font-size: inherit !important;
  line-height: inherit !important;
}
.entry-content ul,
.entry-content ol{
  margin: 0 0 14px 0 !important;
  padding-left: 22px !important;
}
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul{
  margin-top: 8px !important;
}
/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
  border-top:1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  padding: 22px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.footer-left,
.footer-nav,
.footer-social {
  flex: 1;
}
.footer-social {
  text-align: right;
}
.footer-social a {
  margin-left: 12px;
  font-size: 20px;
  color: #666;
  transition: color 0.3s;
}
.footer-social a:hover {
  color: #0073aa;
}
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-nav,
  .footer-social {
    text-align: center;
  }
  .footer-social {
    order: 3;
    margin-top: 10px;
  }
  .footer-social a {
    margin: 0 8px;
  }
}
/* =====================================================
   RESPONSIVE BASE
   ===================================================== */
@media (max-width: 980px){
  .header-inner{ grid-template-columns: auto 1fr auto; }
  .header-center{ justify-content:flex-start; }
  .grid{ grid-template-columns:1fr; }
}
/* =====================================================
   MOBILE DRAWER MENU
   ===================================================== */
.btn-menu, .nav-toggle{ display:none !important; }
@media (max-width: 980px){
  .btn-menu, .nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.12);
    background: var(--aryuz-panel);
    color: var(--aryuz-text);
    cursor:pointer;
    position:relative;
    z-index: 10002;
  }
  .nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: min(320px, 86vw) !important;
    background: var(--aryuz-panel) !important;
    border-right: 1px solid rgba(15,23,42,.12) !important;
    box-shadow: 18px 0 50px rgba(15,23,42,.12) !important;
    padding: 18px 14px !important;
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    display:block !important;
  }
  html.nav-open::before{ content:none !important; display:none !important; }
  .nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(2px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;
  }
  html.nav-open .nav-overlay{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  html.nav-open .nav{
    transform: translateX(0) !important;
  }
  .nav .menu{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
    padding: 6px 0 0 !important;
  }
  .nav .menu > li{ width:100% !important; }
  .nav .menu a{
    width:100% !important;
    justify-content:space-between !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    white-space:normal !important;
  }
  .nav .sub-menu{
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 4px 0 0 12px !important;
    margin: 4px 0 0 !important;
    display:none !important;
  }
  .nav .menu > li.is-open > .sub-menu{
    display:block !important;
  }
  .nav .menu > li:hover > .sub-menu{
    display:none !important;
  }
}

/* =====================================================
   MODERN CONTACT CARD (tidak diubah)
   ===================================================== */
.contact-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: all 0.35s ease;
  box-shadow: 0 12px 36px rgba(15,23,42,.09);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,59,26,.05), transparent 60%);
  pointer-events: none;
  border-radius: var(--radius-lg);
}
.contact-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,59,26,.18);
}
.contact-card .icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: var(--aryuz-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 10px 28px rgba(255,59,26,.28);
}
.contact-card .icon svg {
  width: 40px;
  height: 40px;
}
.contact-card h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 800;
  color: var(--aryuz-accent);
}
.contact-card p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.contact-card a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--aryuz-primary);
  transition: all 0.25s ease;
}
.contact-card a:hover {
  color: var(--aryuz-accent);
  transform: translateX(6px);
}
.contact-card a svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}
.contact-card a:hover svg {
  transform: translateX(6px);
}
@media (max-width: 980px) {
  .contact-card {
    padding: 32px 24px;
  }
  .contact-card .icon {
    width: 70px;
    height: 70px;
  }
  .contact-card .icon svg {
    width: 36px;
    height: 36px;
  }
}

/* =====================================================
   HERO SLIDER - MOBILE OPTIMIZED (FONT SMALLER + KPI COMPACT HORIZONTAL)
   ===================================================== */
.hero-slider-full {
  position: relative;
  width: 100%;
  min-height: 70vh !important;
  max-height: 750px !important;
  overflow: hidden;
}
.hero-slides {
  position: relative;
  width: 100%;
  height: 70vh !important;
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
}
.hero-slide.active {
  opacity: 1;
  z-index: 2;
}
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--aryuz-hero-text);
  text-align: center;
}
.hero-content {
  max-width: 700px;
  margin: 0 auto;
}
.hero-content h1 {
  font-size: var(--aryuz-hero-title-size, 3rem);
  margin: 0 0 20px;
  line-height: 1.2;
}
.hero-content p {
  font-size: var(--aryuz-hero-subtitle-size, 1.2rem);
  margin-bottom: 30px;
  opacity: 0.95;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin-bottom: 15px;
}
.hero-badge .dot {
  width: 10px;
  height: 10px;
  background: var(--aryuz-primary);
  border-radius: 50%;
}
.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}
.hero-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px !important;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 170px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.hero-buttons .btn-primary {
  background: var(--aryuz-primary, #ff3b1a) !important;
  color: #fff !important;
  border: 2px solid var(--aryuz-primary, #ff3b1a) !important;
}
.hero-buttons .btn-primary:hover {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}
.hero-buttons .btn-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.hero-buttons .btn-secondary:hover {
  background: #fff !important;
  color: var(--aryuz-accent, #0f2238) !important;
}
.hero-kpis {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 300px;
  margin-top: 40px;
}
.hero-kpis .kpi {
  background: rgba(255,255,255,0.15);
  padding: 18px 22px;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}
.hero-kpis b {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.hero-kpis span {
  font-size: 0.95rem;
  opacity: 0.9;
}
/* Arrows & Dots */
.hero-prev, .hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  z-index: 10;
  border-radius: 8px;
  transition: background 0.3s;
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-prev:hover, .hero-next:hover {
  background: rgba(255,255,255,0.3);
}
.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.hero-dots .dot {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.hero-dots .dot.active {
  background: #fff;
  transform: scale(1.3);
}
/* Responsive Hero */
@media (min-width: 981px) {
  .hero-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 40px 20px !important;
  }
  .hero-content {
    margin: 0;
  }
  .hero-kpis {
    margin-top: 0;
  }
  .hero-buttons {
    justify-content: flex-start;
  }
}
@media (max-width: 980px) {
  .hero-slider-full,
  .hero-slides {
    min-height: 60vh !important;
    height: 60vh !important;
  }
  .hero-inner {
    padding: 50px 20px 40px !important; /* Kurangi padding atas agar lebih ringkas */
    gap: 20px;
  }
  /* Judul hero lebih kecil di mobile */
  .hero-content h1 {
    font-size: 2.2rem !important; /* Dari 3rem jadi lebih kecil & proporsional */
    line-height: 1.15;
  }
  .hero-content p {
    font-size: 1.1rem !important;
  }
  .hero-buttons .btn {
    min-width: 140px;
    padding: 12px 24px !important;
    font-size: 15px !important;
  }
  /* KPI horizontal kecil & kompak */
  .hero-kpis {
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px !important;
    max-width: 100%;
  }
  .hero-kpis .kpi {
    flex: 1;
    min-width: 0;
    padding: 12px 14px !important;
    border-radius: 10px;
  }
  .hero-kpis b {
    font-size: 0.95rem !important;
    margin-bottom: 4px;
  }
  .hero-kpis span {
    font-size: 0.85rem !important;
  }
  .hero-dots {
    bottom: 20px !important;
  }
}
/* =====================================================
   HERO OVERRIDES (DESKTOP LOWER + MOBILE SMALLER + KPI HIDE)
   Tempel paling bawah file CSS
   ===================================================== */

/* --- DESKTOP: hero jangan terlalu tinggi --- */
@media (min-width: 981px){
  .hero-slider-full{
    min-height: 56vh !important;   /* sebelumnya 70vh */
    max-height: 620px !important;  /* sebelumnya 750px */
  }
  .hero-slides{
    height: 56vh !important;       /* ikut turun */
  }

  /* biar padding dalam hero lebih ringkas */
  .hero-inner{
    padding: 34px 20px !important;
  }
}

/* --- MOBILE: teks lebih kecil + tombol lebih kecil + KPI di-hide --- */
@media (max-width: 980px){
  .hero-slider-full,
  .hero-slides{
    min-height: 52vh !important; /* sebelumnya 60vh */
    height: 52vh !important;
  }

  .hero-inner{
    padding: 38px 16px 30px !important;
    gap: 14px !important;
  }

  .hero-content h1{
    font-size: 1.85rem !important; /* lebih kecil dari 2.2rem */
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }

  .hero-content p{
    font-size: 0.98rem !important; /* lebih kecil dari 1.1rem */
    margin-bottom: 18px !important;
  }

  .hero-buttons{
    margin-top: 18px !important;
    gap: 10px !important;
  }
  .hero-buttons .btn{
    min-width: 120px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* KPI: hide saja di mobile */
  .hero-kpis{
    display: none !important;
  }

  .hero-dots{
    bottom: 16px !important;
  }
}
/* =====================================================
   CONTACT SECTION — Modern Elegant Minimal (Split Layout)
   ===================================================== */
.aryuz-contact-card{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  background: var(--aryuz-panel);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  overflow:hidden;
}

.aryuz-contact-info{
  padding: 22px 22px 20px;
}

.aryuz-contact-title{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  color: var(--aryuz-accent);
}

.aryuz-contact-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-bottom: 16px;
}

.aryuz-contact-item{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: #fff;
}

.aryuz-ci-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--aryuz-primary) 10%, #fff);
  color: var(--aryuz-accent);
  flex: 0 0 auto;
}

.aryuz-ci-ico svg{
  width: 20px;
  height: 20px;
  fill:none;
  stroke: currentColor;
}

.aryuz-ci-label{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(15,23,42,.70);
  margin-bottom: 2px;
}

.aryuz-ci-value{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,.88);
}

.aryuz-contact-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.aryuz-cbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: var(--aryuz-accent);
  text-decoration:none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.aryuz-cbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.22);
}

.aryuz-cbtn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.aryuz-cbtn-primary{
  background: var(--aryuz-primary);
  border-color: var(--aryuz-primary);
  color: #fff;
}

.aryuz-cbtn-primary svg{ fill: #fff; }

.aryuz-cbtn-ghost{
  background: transparent;
}

.aryuz-contact-map{
  border-left: 1px solid rgba(15,23,42,.10);
  min-height: 360px;
}

.aryuz-contact-map iframe{
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.aryuz-contact-map-empty{
  height: 100%;
  min-height: 360px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  text-align:center;
  color: rgba(15,23,42,.65);
}

/* Mobile: stack */
@media (max-width: 980px){
  .aryuz-contact-card{
    grid-template-columns: 1fr;
  }
  .aryuz-contact-map{
    border-left: 0;
    border-top: 1px solid rgba(15,23,42,.10);
    min-height: 320px;
  }
  .aryuz-contact-map iframe{
    min-height: 320px;
  }
}
/* =====================================================
   HOMEPAGE — LOAD MORE + PAGINATION (Modern Elegant)
   Tempel paling bawah theme.css
   ===================================================== */

/* Wrapper rapih */
.loadmore-wrap,
.pagination-wrap{
  margin-top: 26px !important;
}

/* ---------- LOAD MORE BUTTON ---------- */
#loadMorePosts{
  min-width: 260px !important;
  height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  color: var(--aryuz-accent) !important;

  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;

  box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease !important;
}

#loadMorePosts:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(15,23,42,.22) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.12) !important;
  background: color-mix(in srgb, var(--aryuz-primary) 6%, #fff) !important;
}

#loadMorePosts:active{
  transform: translateY(0) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
}

#loadMorePosts:disabled{
  opacity: .55 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ---------- PAGINATION ---------- */
.pagination-wrap{
  gap: 8px !important;
}

.pagination-wrap .page-numbers{
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;

  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: rgba(15,23,42,.86) !important;

  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .1px !important;

  box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease !important;
}

.pagination-wrap .page-numbers:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(15,23,42,.22) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
  background: color-mix(in srgb, var(--aryuz-primary) 6%, #fff) !important;
}

/* current page */
.pagination-wrap .page-numbers.current{
  background: var(--aryuz-primary) !important;
  border-color: var(--aryuz-primary) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(255,59,26,.22) !important;
}

/* dots ... */
.pagination-wrap .page-numbers.dots{
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
  min-width: auto !important;
  padding: 0 6px !important;
}

/* prev/next */
.pagination-wrap .page-numbers.prev,
.pagination-wrap .page-numbers.next{
  padding: 0 14px !important;
}

/* Mobile: lebih kecil dan rapi */
@media (max-width: 980px){
  #loadMorePosts{
    min-width: 220px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }
  .pagination-wrap .page-numbers{
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
}
@media (max-width: 980px){
  .nav .menu > li.menu-item-has-children > a{
    padding-right: 44px !important;
    position: relative;
  }
  .nav .menu-arrow{
    position:absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    background: rgba(15,23,42,.06);
  }
}
/* =====================================================
   FIX FINAL: overlay jangan nutup drawer menu (mobile)
   Tempel paling bawah theme.css
   ===================================================== */
@media (max-width: 980px){

  /* header jangan ikut ganggu stacking */
  .site-header{
    z-index: 9999 !important;
    position: relative !important;
  }

  /* overlay di bawah nav */
  .nav-overlay{
    z-index: 10000 !important;
    pointer-events: none !important;
  }
  html.nav-open .nav-overlay{
    pointer-events: auto !important;
  }

  /* nav wajib di atas overlay */
  .nav{
    z-index: 10001 !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
  }

  /* tombol wajib paling atas */
  .btn-menu, .nav-toggle{
    z-index: 10002 !important;
    position: relative !important;
  }
}
@media (max-width: 980px){
  .nav .menu-arrow{
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  .nav .menu-arrow svg{
    pointer-events: none !important; /* klik dianggap klik arrow, bukan svg */
  }
}
/* FIX: mobile submenu toggle lebih mudah diklik */
@media (max-width: 980px){

  /* parent link kasih ruang untuk tombol panah */
  .nav .menu > li.menu-item-has-children > a{
    padding-right: 54px !important;
    position: relative !important;
  }

  /* panah jadi tombol besar */
  .nav .menu-arrow{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(15,23,42,.06) !important;
    border: 1px solid rgba(15,23,42,.10) !important;

    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* SVG jangan "makan" klik */
  .nav .menu-arrow svg{
    pointer-events: none !important;
  }

  /* feedback saat open */
  .nav .menu > li.is-open > a .menu-arrow{
    background: color-mix(in srgb, var(--aryuz-primary) 10%, #fff) !important;
    border-color: color-mix(in srgb, var(--aryuz-primary) 22%, rgba(15,23,42,.12)) !important;
  }
}
/* ================================
   FIX SUBMENU MOBILE: reset gaya desktop dropdown
   ================================ */
@media (max-width: 980px){

  /* pastikan hover desktop tidak pernah memaksa tutup di mobile */
  .nav .menu > li:hover > .sub-menu{
    display: block !important;     /* jangan disembunyikan */
  }

  /* reset properti desktop dropdown yang bikin submenu "tak terlihat" */
  .nav .sub-menu{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;

    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;

    display: none !important;      /* default ditutup */
  }

  .nav .menu > li.is-open > .sub-menu{
    display: block !important;     /* buka ketika .is-open */
  }

  /* biar link submenu gampang diklik */
  .nav .sub-menu a{
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}
@media (max-width: 980px){
  /* hover jangan ikut campur di mobile */
  .nav .menu > li:hover > .sub-menu{
    display: none !important;
  }

  /* buka/tutup hanya lewat class is-open */
  .nav .menu > li.is-open > .sub-menu{
    display: block !important;
  }
}
/* =====================================================
   CLIENTS — Logo Marquee (Auto Slide)
   ===================================================== */
.aryuz-clients .section-title{
  margin-bottom: 14px;
}

.aryuz-clients-marquee{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  padding: 14px 0;
}

/* fade kiri-kanan biar cantik */
.aryuz-clients-marquee::before,
.aryuz-clients-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 60px;
  z-index:2;
  pointer-events:none;
}
.aryuz-clients-marquee::before{
  left:0;
  background: linear-gradient(to right, rgba(246,247,251,1), rgba(246,247,251,0));
}
.aryuz-clients-marquee::after{
  right:0;
  background: linear-gradient(to left, rgba(246,247,251,1), rgba(246,247,251,0));
}

.aryuz-marquee-track{
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  padding: 6px 16px;
  animation: aryuz-marquee var(--aryuz-clients-speed, 28s) linear infinite;
  will-change: transform;
}

.aryuz-clients-marquee:hover .aryuz-marquee-track{
  animation-play-state: paused;
}

.aryuz-logo-item{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.85);
}

.aryuz-logo-item img{
  height: 34px;
  width: auto;
  display:block;
  object-fit: contain;
  opacity: .92;
  filter: grayscale(1);
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

.aryuz-logo-item a{ display:block; }

.aryuz-logo-item:hover img{
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-1px);
}

@keyframes aryuz-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Mobile */
@media (max-width: 980px){
  .aryuz-logo-item img{ height: 28px; }
  .aryuz-clients-marquee::before,
  .aryuz-clients-marquee::after{ width: 40px; }
}
/* === Clients: kalau logo sedikit => tampil statis (tidak double, tidak jalan) === */
.aryuz-clients-marquee.is-static .aryuz-marquee-track{
  width: 100%;
  justify-content: center;
  animation: none !important;
}

.aryuz-clients-marquee.is-static::before,
.aryuz-clients-marquee.is-static::after{
  display: none !important; /* fade kiri/kanan tidak perlu kalau statis */
}

.aryuz-clients-marquee.is-static{
  padding: 16px 10px;
}

.aryuz-clients-marquee.is-static .aryuz-logo-item{
  background: rgba(255,255,255,.92);
}
/* =====================================================
   CLIENT SLIDER (Mobile 3 / Desktop 6 + arrows)
   ===================================================== */
.aryuz-client-slider{
  --gap: 14px;
  --per-view: 3; /* default mobile */
  position: relative;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 18px 46px; /* ruang untuk panah kiri kanan */
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  overflow: hidden;
}

@media (min-width: 981px){
  .aryuz-client-slider{ --per-view: 6; }
}

/* viewport scroll */
.aryuz-client-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.aryuz-client-viewport::-webkit-scrollbar{ display:none; }

.aryuz-client-track{
  display: flex;
  gap: var(--gap);
  align-items: center;
  padding: 4px 2px;
}

.aryuz-client-item{
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
}

.aryuz-client-item a{ display:flex; width:100%; align-items:center; justify-content:center; }
.aryuz-client-item img{
  max-height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .92;
  filter: grayscale(1);
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.aryuz-client-item:hover img{
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

/* arrows */
.aryuz-client-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 2;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.aryuz-client-nav svg{ width:18px; height:18px; }
.aryuz-client-nav:hover{ box-shadow: 0 10px 22px rgba(15,23,42,.10); }
.aryuz-client-nav:active{ transform: translateY(-50%) scale(.98); }
.aryuz-client-nav.is-prev{ left: 10px; }
.aryuz-client-nav.is-next{ right: 10px; }

/* hidden state (kalau logo sedikit, panah hilang + center) */
.aryuz-client-slider.is-fit{
  padding-inline: 18px;
}
.aryuz-client-slider.is-fit .aryuz-client-track{
  justify-content: center;
}
.aryuz-client-slider.is-fit .aryuz-client-nav{
  display:none !important;
}

/* disabled arrow */
.aryuz-client-nav[disabled]{
  opacity: .35;
  cursor: default;
  box-shadow: none;
}
/* pastikan link/logo bisa diklik */
.aryuz-client-item a,
.aryuz-client-item img{
  pointer-events: auto !important;
}
.aryuz-client-viewport{
  touch-action: pan-x;
}
.aryuz-client-viewport{
  touch-action: pan-x;
}
.aryuz-client-item a,
.aryuz-client-item img{
  pointer-events: auto !important;
}
/* rapatkan jarak icon-menu */
.site-header .menu-link{
  gap:0 !important;            /* kalau link pakai flex+gap */
}

.site-header .menu-link i{
  margin-right:6px !important; /* jarak icon ke teks */
  width:1.1em;                 /* biar rata kiri */
  text-align:center;
  font-size:0.95em;
  opacity:.95;
}
/* =========================
   FORCE FIX: Mobile menu text jangan ketarik ke kanan
   (taruh PALING BAWAH theme.css)
========================= */
@media (max-width: 980px){

  /* link menu: icon + teks nempel kiri */
  .site-header .header-center nav.nav ul.menu > li > a.menu-link,
  .site-header .header-center nav.nav ul.menu li a.menu-link{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    gap:10px !important;
    width:100% !important;
  }

  /* icon: jangan bikin jarak aneh */
  .site-header .header-center nav.nav ul.menu li a.menu-link > i{
    flex:0 0 auto !important;
    width:1.15em !important;
    margin:0 !important;
    text-align:center !important;
  }

  /* arrow submenu: dorong ke kanan */
  .site-header .header-center nav.nav ul.menu li a.menu-link .menu-arrow{
    margin-left:auto !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* kalau ada rule yang bikin semua <a> jadi rata kanan */
  .site-header .header-center nav.nav ul.menu,
  .site-header .header-center nav.nav ul.menu li{
    text-align:left !important;
  }
}
.content-grid{
  display:grid;
  gap:22px;
  align-items:start;
}

/* Desktop: 2 kolom */
.content-grid.has-sidebar{
  grid-template-columns: minmax(0,1fr) 320px;
}

/* Jika sidebar OFF */
.content-grid.no-sidebar{
  grid-template-columns: minmax(0,1fr);
}

/* Sidebar widget style (ikut gaya card kamu) */
.sidebar .widget{
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
}

.sidebar .widget + .widget{ margin-top:16px; }
.sidebar .widget-title{ margin:0 0 10px; font-size:16px; }

/* Mobile */
@media (max-width: 991px){
  .content-grid.has-sidebar{
    grid-template-columns: 1fr;
  }
}
/* ===== Trending Widget ===== */
.aryuz-trending{
  --aryuz-num-bg: #d50000;
  --aryuz-num-text: #ffffff;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.aryuz-trending__item{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
.aryuz-trending__item:first-child{ border-top:0; padding-top:0; }

.aryuz-trending__num{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:16px;
  background: var(--aryuz-num-bg);
  color: var(--aryuz-num-text);
}

.aryuz-trending__thumb img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}

.aryuz-trending__body{ display:flex; flex-direction:column; gap:6px; }
.aryuz-trending__title{
  font-weight:800;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.aryuz-trending__meta{
  font-size:12px;
  opacity:.7;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* cards */
.aryuz-trending--cards .aryuz-trending__item{
  grid-template-columns: 88px 1fr;
  padding:12px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
}
.aryuz-trending--cards .aryuz-trending__num{ display:none; }

/* compact */
.aryuz-trending--compact .aryuz-trending__item{
  grid-template-columns: 1fr;
  border-top:0;
  padding:8px 0;
}
.aryuz-trending--compact .aryuz-trending__num{ display:none; }
.aryuz-trending--compact .aryuz-trending__thumb{ display:none; }

/* ===== Tags Widget ===== */
.aryuz-tags{
  --aryuz-hash:#d50000;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.aryuz-tags__item{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  padding:6px 0;
}
.aryuz-tags__hash{
  color: var(--aryuz-hash);
  font-weight:900;
}
.aryuz-tags__name{
  font-weight:700;
}
/* =======================================
   TRENDING: fix layout (thumb hanya #1)
   ======================================= */

/* default item */
.aryuz-trending--numbered .aryuz-trending__item{
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}

/* angka */
.aryuz-trending--numbered .aryuz-trending__num{
  width:44px;
  height:44px;
}

/* thumbnail wrapper default (jangan bikin layout pecah) */
.aryuz-trending--numbered .aryuz-trending__thumb{
  display:block;
}

/* === KHUSUS ITEM PERTAMA: tampil sebagai "hero" === */
.aryuz-trending--numbered .aryuz-trending__item:first-child{
  grid-template-columns: 56px 1fr; /* tetap 2 kolom: angka + konten */
  align-items: start;
  padding-top: 0;
}

/* thumbnail pada item #1 jadi full lebar di kolom konten */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__thumb{
  grid-column: 2 / 3;      /* di kolom konten */
  width: 100%;
  margin-bottom: 10px;
}

/* gambar thumbnail */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__thumb img{
  width:100%;
  height:auto;
  border-radius: 14px;
  display:block;
}

/* body item #1 di bawah thumbnail */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__body{
  grid-column: 2 / 3;
}

/* item 2..n: thumbnail disembunyikan kalau thumb_first aktif */
.aryuz-trending--numbered .aryuz-trending__item:not(:first-child) .aryuz-trending__thumb{
  display:none;
}

/* judul jangan turun jadi "Bukan / Cu..." terlalu sempit */
.aryuz-trending--numbered .aryuz-trending__title{
  white-space: normal;
  word-break: break-word;
  -webkit-line-clamp: 2;
}
/* =========================================================
   OVERRIDE: LIST ANGKA -> MODEL PORTAL (gambar 2)
   - item #1: hero thumbnail + overlay
   - item 2..n: list normal
   ========================================================= */

/* base numbered list */
.aryuz-trending--numbered{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* item 2..n default */
.aryuz-trending--numbered .aryuz-trending__item{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  color:inherit;
}

.aryuz-trending--numbered .aryuz-trending__item:first-child{
  border-top:0;
  padding-top:0;
}

/* nomor bulat */
.aryuz-trending--numbered .aryuz-trending__num{
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
  background: var(--aryuz-num-bg);
  color: var(--aryuz-num-text);
}

/* item 2..n: thumbnail hilang (karena thumb_first) */
.aryuz-trending--numbered .aryuz-trending__item:not(:first-child) .aryuz-trending__thumb{
  display:none;
}
.aryuz-trending--numbered .aryuz-trending__item:not(:first-child) .aryuz-trending__body{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.aryuz-trending--numbered .aryuz-trending__item:not(:first-child) .aryuz-trending__title{
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  -webkit-line-clamp:2;
}
.aryuz-trending--numbered .aryuz-trending__item:not(:first-child) .aryuz-trending__meta{
  font-size:12px;
  opacity:.55;
}

/* =========================
   HERO ITEM #1 (seperti gambar 2)
   ========================= */
.aryuz-trending--numbered .aryuz-trending__item:first-child{
  position:relative;
  display:block;        /* ubah dari grid jadi block */
  padding:0;
  margin-bottom:10px;
  border-top:0;
}

/* thumbnail full */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__thumb{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:14px;
}

/* gambar tinggi tetap */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__thumb img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

/* overlay gelap */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.78) 100%);
}

/* nomor ditempel kiri seperti contoh */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__num{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
}

/* body (judul+meta) di atas overlay */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__body{
  position:absolute;
  left:86px;
  right:14px;
  bottom:12px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* judul putih */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__title{
  color:#fff;
  font-weight:900;
  font-size:16px;
  line-height:1.2;
  -webkit-line-clamp: 2;
}

/* meta putih pudar */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__meta{
  color:rgba(255,255,255,.85);
  font-size:12px;
  opacity:1;
}

/* hover */
.aryuz-trending--numbered .aryuz-trending__item:hover .aryuz-trending__title{
  text-decoration: underline;
}

@media (max-width: 480px){
  .aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__thumb img{
    height:165px;
  }
  .aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__body{
    left:78px;
  }
}
/* =========================================
   FIX: nomor sejajar dengan judul (hero item #1)
   untuk .aryuz-trending--numbered
   ========================================= */

.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__num{
  top: 22px;            /* sejajar judul (atas) */
  transform: none;      /* matikan center tengah */
}

.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__body{
  bottom: auto;         /* jangan nempel bawah */
  top: 18px;            /* ikut sejajar nomor */
}

/* (opsional) kalau judul terlalu nempel, rapikan */
.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__title{
  margin-top: 2px;
}
/* =========================================================
   HERO ITEM #1: nomor & judul sejajar mepet bawah (bukan atas)
   untuk style numbered + thumb_first
   ========================================================= */

.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__num{
  top:auto !important;
  bottom:18px !important;
  transform:none !important;
}

.aryuz-trending--numbered .aryuz-trending__item:first-child .aryuz-trending__body{
  top:auto !important;
  bottom:14px !important;
}
/* =========================================================
   STYLE: thumbs (semua full thumbnail portal, tanpa angka)
   ========================================================= */
.aryuz-trending--thumbs .aryuz-trending__item{
  position:relative;
  display:block;
  padding:0;
  margin:0 0 12px;
  border:0;
  text-decoration:none;
  color:inherit;
}

.aryuz-trending--thumbs .aryuz-trending__num{ display:none !important; }

.aryuz-trending--thumbs .aryuz-trending__thumb{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:14px;
}

.aryuz-trending--thumbs .aryuz-trending__thumb img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}

.aryuz-trending--thumbs .aryuz-trending__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.78) 100%);
}

.aryuz-trending--thumbs .aryuz-trending__body{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  z-index:3;
}

.aryuz-trending--thumbs .aryuz-trending__title{
  color:#fff;
  font-weight:900;
  font-size:15px;
  line-height:1.2;
  -webkit-line-clamp:2;
}

.aryuz-trending--thumbs .aryuz-trending__meta{
  color:rgba(255,255,255,.85);
  font-size:12px;
  opacity:1;
  margin-top:6px;
}
.aryuz-trending--circleonly .aryuz-trending__meta{
  display:block;
  font-size:12px;
  opacity:.55;
  margin-top:6px;
}
/* ===============================
   STICKY HEADER TERBATAS KONTEN
   =============================== */

/* wrapper pembatas */
.aryuz-sticky-scope{
  position: relative;
}

/* default: tidak sticky */
.site-header{
  position: relative !important;
  top: auto !important;
}

/* hanya single & page */
body.single .site-header,
body.page .site-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
/* Matikan sticky saat footer terlihat */
body.aryuz-footer-inview .site-header{
  position: relative !important;
  top: auto !important;
}
/* =========================================
   SIDEBAR STICKY (ikut konten, stop sebelum footer)
   tempel PALING BAWAH theme.css
========================================= */

@media (min-width: 992px){

  /* pastikan parent grid ngga menghalangi sticky */
  .content-grid.has-sidebar{
    align-items: start;
  }

  /* biar sidebar bisa sticky */
  .content-grid.has-sidebar .sidebar{
    position: sticky !important;
    top: calc(var(--aryuz-header-h, 76px) + 16px) !important; /* header + jarak */
    align-self: start !important;
    height: fit-content;
  }

  /* saat footer mulai kelihatan -> sidebar jadi normal (ngga nutup footer) */
  body.aryuz-footer-inview .content-grid.has-sidebar .sidebar{
    position: relative !important;
    top: auto !important;
  }
}
/* =========================================
   SIDEBAR: sticky + STOP nempel sebelum footer
========================================= */

.content-grid-wrap{ position: relative; }

@media (min-width: 992px){
  .content-grid.has-sidebar .sidebar{
    position: sticky !important;
    top: calc(var(--aryuz-header-h, 76px) + 16px) !important;
    align-self: start !important;
    height: fit-content;
  }

  /* saat footer terlihat -> sidebar jadi absolute dan "mentok bawah wrapper" */
  body.aryuz-footer-inview .content-grid.has-sidebar .sidebar{
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 320px; /* samakan dengan grid sidebar kamu */
  }
}
/* ================================
   SMOOTH STICKY SIDEBAR (FINAL)
   tempel PALING BAWAH theme.css
================================ */

/* penting: parent sticky jangan punya overflow yang memutus sticky */
.content-grid,
.container,
main{
  overflow: visible !important;
}

/* grid harus start biar sidebar nggak ikut stretch */
.content-grid{
  align-items: start !important;
}

/* desktop saja: sticky sidebar */
@media (min-width: 992px){

  /* kasih variabel jarak dari atas (nanti bisa diubah) */
  :root{
    --sticky-gap: 18px;     /* jarak bawah header */
    --header-h: 72px;       /* fallback kalau JS belum set */
  }

  .sidebar{
    position: sticky;
    top: calc(var(--header-h) + var(--sticky-gap));
    align-self: start;

    /* bikin lebih “smooth” di browser */
    will-change: top;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* halus saat ada perubahan kecil (mis. adminbar / font) */
    transition: top .18s ease;
  }
}
/* =====================================================
   SIDEBAR STICKY — AUTO OFF kalau konten pendek (desktop)
   Tempel PALING BAWAH theme.css
   ===================================================== */
@media (min-width: 992px){
  .sidebar.is-sticky{
    position: sticky;
    top: calc(var(--header-h, 72px) + 18px);
    align-self: start;
  }
  .sidebar.no-sticky{
    position: relative !important;
    top: auto !important;
  }
}
/* SEARCH HEADER */
.search-head{
  position:relative;
  overflow:hidden;
  padding:22px;
  margin-bottom:18px;
}
.search-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.18;
}
.search-head-inner{
  position:relative;
}
.search-head h1{
  margin:0 0 6px;
}
.search-count{
  opacity:.7;
  margin-left:6px;
}

/* GRID */
.search-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}

/* ITEM */
.search-item{
  transition:transform .15s ease, box-shadow .15s ease;
}
.search-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.search-title{
  margin:0 0 6px;
  font-size:17px;
}
.search-title a{
  text-decoration:none;
  color:inherit;
}
.search-excerpt{
  font-size:14px;
  opacity:.85;
}
.search-meta{
  margin-top:10px;
  font-size:12px;
  opacity:.6;
}

/* EMPTY */
.search-empty{
  text-align:center;
  padding:36px 22px;
}
.search-empty .btn{
  margin-top:12px;
  display:inline-block;
}
/* SEARCH WIDGET (Sidebar) */
.widget_search .search-form{ margin:0; }
.aryuz-searchwrap{
  display:flex;
  gap:10px;
  align-items:center;
}
.aryuz-searchinput{
  width:100%;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.8);
  outline:none;
}
.aryuz-searchinput:focus{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 4px rgba(6,182,212,.12);
}
.aryuz-searchbtn{
  height:42px;
  min-width:42px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.aryuz-searchbtn:hover{
  transform: translateY(-1px);
}
/* ===== News Filter Form (tanpa ubah HTML) ===== */
.news-filter-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.12);
  background:rgba(255,255,255,.75);
}

.news-filter-form select,
.news-filter-form input[type="date"]{
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.9);
  outline:none;
}

.news-filter-form input[type="date"]{
  padding:0 10px;
}

.news-filter-form label{
  margin:0;
  display:inline-flex;
}

.news-filter-form select:focus,
.news-filter-form input[type="date"]:focus{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 4px rgba(6,182,212,.12);
}

.news-filter-form button{
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:700;
}

.news-filter-form button:hover{
  transform: translateY(-1px);
}

/* Mobile: jadi 2 kolom/stack rapi */
@media (max-width: 640px){
  .news-filter-form{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .news-filter-form select{
    grid-column:1 / -1;
  }
  .news-filter-form button{
    grid-column:1 / -1;
  }
  .news-filter-form label{
    width:100%;
  }
  .news-filter-form input[type="date"]{
    width:100%;
  }
}

.btn-loadmore.is-loading i{
  animation: spin 1s linear infinite;
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
/* =========================
   PAGINATION FIX
========================= */
.pagination-wrap ul,
.page-numbers{
  list-style:none !important;
  padding:0;
  margin:0;
}

.pagination-wrap li{
  list-style:none !important;
}

/* optional: biar rapi inline */
.pagination-wrap ul{
  display:flex;
  gap:8px;
  justify-content:center;
}
/* =========================
   PAGINATION: HILANGKAN KOTAK WRAPPER (UL)
   taruh PALING BAWAH
========================= */

/* wrapper ul jangan jadi "card" */
.pagination-wrap ul.page-numbers{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;

  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* item li juga jangan punya bg/border */
.pagination-wrap ul.page-numbers > li{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* pastikan hanya tombolnya yang punya style */
.pagination-wrap a.page-numbers,
.pagination-wrap span.page-numbers{
  /* biarkan style tombol kamu yang sudah ada */
}

/* kalau ada style global yang bikin UL jadi inline-block + padding */
.pagination-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-footer .footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--aryuz-footer-gap, 18px);
}
@media (max-width:720px){
  /* stack mode akan override dari wp_head jika diaktifkan */
}
/* =========================
   SHARE (Sticky)
========================= */
.aryuz-share{ margin-top:14px; }
.aryuz-share--sticky{
  position: sticky;
  top: calc(var(--header-h, 72px) + 12px);
  z-index: 3;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--stroke, rgba(15,23,42,.10));
  border-radius: 14px;
  background: var(--aryuz-panel, #fff);
}

/* =========================
   RELATED POSTS
========================= */
.aryuz-related{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stroke, rgba(15,23,42,.10)); }
.aryuz-related__title{ margin: 0 0 10px; font-size: 18px; }
.aryuz-related__wrap{ gap: 12px; }

.aryuz-related__item{
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke, rgba(15,23,42,.10));
  background: var(--aryuz-panel, #fff);
  text-decoration: none;
}
.aryuz-related__thumb img{ width: 120px; height: 80px; object-fit: cover; border-radius: 12px; display:block; }
.aryuz-related__name{ margin: 4px 0 0; font-size: 15px; line-height: 1.25; }
.aryuz-related__meta{ font-size: 12px; opacity: .75; }

/* --- Grid --- */
.aryuz-related--grid .aryuz-related__wrap{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.aryuz-related--grid .aryuz-related__item{
  flex-direction: column;
}
.aryuz-related--grid .aryuz-related__thumb img{
  width: 100%;
  height: 140px;
}

/* --- List --- */
.aryuz-related--list .aryuz-related__wrap{
  display: grid;
  grid-template-columns: 1fr;
}

/* --- Slider (scroll) --- */
.aryuz-related--slider .aryuz-related__wrap{
  display: flex;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.aryuz-related--slider .aryuz-related__item{
  min-width: 260px;
  scroll-snap-align: start;
}

/* responsive */
@media (max-width: 980px){
  .aryuz-related--grid .aryuz-related__wrap{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .aryuz-related--grid .aryuz-related__wrap{ grid-template-columns: 1fr; }
  .aryuz-related__thumb img{ width: 110px; height: 76px; }
}
/* ===== Breadcrumb modern ===== */
.aryuz-bc{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted, rgba(15,23,42,.68));
}
.aryuz-bc a{ text-decoration:none; }
.aryuz-bc a:hover{ text-decoration:underline; }

/* ===== Meta modern ===== */
.aryuz-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted, rgba(15,23,42,.68));
}
.meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--stroke, rgba(15,23,42,.10));
  border-radius:999px;
  background: rgba(255,255,255,.7);
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--stroke, rgba(15,23,42,.10));
  background: rgba(255,255,255,.7);
}
.meta-chip--cat{
  color: var(--aryuz-primary, #ff3b1a);
}

/* ===== Share styles ===== */
.aryuz-sharebox{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0;
}
.aryuz-sharebox .share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  border:1px solid var(--stroke, rgba(15,23,42,.10));
  background: rgba(255,255,255,.85);
  text-decoration:none;
  padding:10px 12px;
}
.aryuz-sharebox--icon .share-btn span{ display:none; } /* icon only */
.aryuz-sharebox--button .share-btn{ padding:10px 14px; } /* button */
.aryuz-sharebox .share-btn.is-copied{
  transform: translateY(-1px);
}

/* sticky share existing kamu tetap jalan */
/* =========================
   SHARE BOX (modern)
========================= */
.post-share{
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--stroke, rgba(15,23,42,.10));
  border-radius: 16px;
  background: var(--aryuz-panel, #fff);
}
.post-share__label{
  font-size: 12px;
  letter-spacing: .2px;
  opacity: .75;
  margin-bottom: 10px;
}
.post-share__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.post-share .share-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--stroke, rgba(15,23,42,.10));
  background: rgba(255,255,255,.85);
  padding: 10px 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.post-share .share-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.post-share .share-btn svg{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
.post-share .share-btn__text{
  font-size: 13px;
  font-weight: 700;
}

/* --- ICON STYLE: hanya icon --- */
.post-share--icon .share-btn{
  width: 42px;
  height: 42px;
  padding: 0;
}
.post-share--icon .share-btn__text{ display:none; }

/* --- BUTTON STYLE: icon + label --- */
.post-share--button .share-btn{
  padding: 10px 14px;
}

/* Copy feedback (optional) */
.post-share .share-btn.is-copied{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
}
/* =========================
   COMMENTS
========================= */
.aryuz-comments{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke, rgba(15,23,42,.10));
}
.aryuz-comments h3,
.aryuz-comments .comments-title{
  font-size: 18px;
  margin-bottom: 12px;
}
.aryuz-comments .comment-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.aryuz-comments .comment{
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--aryuz-panel, #fff);
  border: 1px solid var(--stroke, rgba(15,23,42,.10));
}
/* =========================
   COMMENTS (Modern)
========================= */
.aryuz-cmt{ border:1px solid var(--stroke, rgba(15,23,42,.10)); border-radius:18px; background:var(--aryuz-panel,#fff); }
.aryuz-cmt__head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.aryuz-cmt__title{ margin:0; font-size:18px; }
.aryuz-cmt__closed{ margin-top:10px; opacity:.75; font-size:13px; }

.aryuz-cmt__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.aryuz-citem{ border:1px solid var(--stroke, rgba(15,23,42,.10)); background:rgba(255,255,255,.7); border-radius:16px; padding:12px; }
.aryuz-citem__inner{ display:flex; gap:12px; }
.aryuz-citem__avatar img{ border-radius:999px; }
.aryuz-citem__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aryuz-citem__author{ font-weight:800; font-size:14px; }
.aryuz-citem__time{ font-size:12px; opacity:.75; }
.aryuz-citem__dot{ opacity:.5; }
.aryuz-citem__pending{ margin:6px 0 0; font-size:12px; opacity:.75; }
.aryuz-citem__content{ margin-top:8px; }
.aryuz-citem__actions{ margin-top:8px; font-size:13px; display:flex; align-items:center; gap:10px; }
.aryuz-citem__actions a{ text-decoration:none; font-weight:700; }
.aryuz-citem__actions a:hover{ text-decoration:underline; }

.aryuz-cmt__formtitle{ margin:16px 0 10px; font-size:16px; }
.aryuz-cmt__form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke, rgba(15,23,42,.10));
  background:rgba(255,255,255,.85);
  outline:none;
}
.aryuz-cmt__form textarea:focus{ box-shadow:0 0 0 4px rgba(255,59,26,.10); border-color: rgba(255,59,26,.35); }

/* Google user card */
.aryuz-guser{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--stroke, rgba(15,23,42,.10)); border-radius:16px; background:rgba(255,255,255,.7); }
.aryuz-guser__avatar{ width:36px; height:36px; border-radius:999px; object-fit:cover; }
.aryuz-guser__avatar.ph{ background:rgba(15,23,42,.10); }
.aryuz-guser__name{ font-weight:800; font-size:13px; line-height:1.1; }
.aryuz-guser__email{ font-size:12px; opacity:.75; }
.aryuz-glogout{ padding:8px 10px; border-radius:12px; }
.aryuz-gis-hint{ font-size:12px; opacity:.75; margin-top:6px; }
.aryuz-cmt__mustlogin{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed var(--stroke, rgba(15,23,42,.18));
  background: rgba(255,255,255,.7);
}
/* =========================================
   KOMENTAR: HILANGKAN NOMOR + INDENT NESTED
   ========================================= */

/* 1) Hilangkan nomor list (angka 1,2,3) */
#comments ol,
#comments ul,
.comment-list,
.commentlist,
.wp-block-comment-template,
.comment-list ol,
.comment-list ul,
.commentlist ol,
.commentlist ul,
.children {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hilangkan marker bawaan browser */
#comments li::marker,
.comment-list li::marker,
.commentlist li::marker,
.wp-block-comment-template li::marker {
  content: "" !important;
}

/* 2) Kalau theme bikin nomor pakai ::before / counter */
#comments li::before,
.comment-list li::before,
.commentlist li::before,
.wp-block-comment-template li::before {
  content: none !important;
  display: none !important;
}
#comments,
.comment-list,
.commentlist,
.wp-block-comment-template {
  counter-reset: none !important;
}

/* 3) Buat indent untuk nested reply */
#comments .children,
.comment-list .children,
.commentlist .children,
.wp-block-comment-template .children {
  margin-left: 28px !important;   /* besar indent */
  padding-left: 18px !important;  /* jarak dalam */
  border-left: 2px solid rgba(15,23,42,.10); /* garis nested */
}

/* 4) Spasi antar level supaya rapi */
#comments .children > li {
  margin-top: 10px !important;
}

/* 5) Mobile: indent lebih kecil biar tidak sempit */
@media (max-width: 640px){
  #comments .children,
  .comment-list .children,
  .commentlist .children,
  .wp-block-comment-template .children {
    margin-left: 16px !important;
    padding-left: 12px !important;
  }
}
/* ===============================
   HOMEPAGE - LAYANAN MANUAL
================================= */

.services-list{
  display:flex;
  flex-direction:column;
  gap:80px;
}

.service-image{
  flex:0 0 40%;
  position:relative;
  overflow:hidden;
  border-radius:18px;
}

.service-image img{
  width:100%;
  height:380px;
  object-fit:cover;
  border-radius:18px;
  transition:transform .6s ease;
}

/* Hover zoom effect */
.service-item:hover .service-image img{
  transform:scale(1.05);
}

.service-content{
  flex:0 0 60%;
}

.service-content h3{
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
}

.service-content p{
  font-size:16px;
  line-height:1.8;
  color:var(--aryuz-text);
  opacity:.85;
  margin-bottom:28px;
}

/* Button */
.service-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:40px;
  border:2px solid var(--aryuz-primary);
  color:var(--aryuz-primary);
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease;
}

.service-btn:hover{
  background:var(--aryuz-primary);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
/* ===============================
   LAYANAN - FINAL CLEAN PREMIUM
================================= */

.layanan-section{
    margin-top:0px; 
  padding:50px 0;
  background:linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.services-list{
  display:flex;
  flex-direction:column;
  gap:120px;
}

/* =================================
   FLEX LAYOUT
================================= */

.service-item{
  display:flex;
  align-items:stretch;   /* bikin tinggi sama */
  gap:70px;
}

.service-item.reverse{
  flex-direction:row-reverse;
}

/* =================================
   IMAGE
================================= */

.service-image{
  flex:0 0 40%;
  display:flex;
  border-radius:18px;
  overflow:hidden;
}

.service-image img{
  width:100%;
  height:100%;            /* ikut tinggi card */
  object-fit:cover;
  transition:transform .6s ease;
}

.service-item:hover .service-image img{
  transform:scale(1.04);
}

/* =================================
   CARD CONTENT
================================= */

.glass-card{
  flex:1;
  padding:32px 36px;
  border-radius:24px;
  background:#ffffff;
  box-shadow:0 25px 55px rgba(15,34,56,0.06);
  transition:all .3s ease;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.service-item:hover .glass-card{
  transform:translateY(-4px);
}

/* =================================
   TITLE
================================= */

.service-content h3{
  font-size:34px;
  font-weight:700;
  margin:0 0 4px 0;
  position:relative;
}

.service-content h3:after{
  content:'';
  display:block;
  width:50px;
  height:3px;
  background:var(--aryuz-primary);
  margin-top:6px;
}

/* =================================
   SUBTITLE
================================= */

.service-subtitle{
  font-size:15px;
  font-weight:500;
  color:rgba(0,0,0,0.75);
  margin:4px 0 34px 0;
}

/* =================================
   TEXT
================================= */

.service-content p{
  font-size:16px;
  line-height:1.8;
  margin:0 0 20px 0;
  color:#374151;
}

/* =================================
   BUTTON
================================= */

.service-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:50px;
  background:var(--aryuz-primary);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease;
}

.service-btn:hover{
  background:#000;
  transform:translateY(-2px);
}

/* =================================
   RESPONSIVE
================================= */

@media (max-width: 992px){

  .service-item,
  .service-item.reverse{
    flex-direction:column;
    gap:40px;
  }

  .service-image,
  .glass-card{
    flex:100%;
  }

  .service-image img{
    height:auto;
  }

  .glass-card{
    padding:26px;
  }

  .service-content h3{
    font-size:26px;
  }
}
/* ===============================
   CTA 3 CARDS — MODERN PREMIUM
================================= */
.cta-cards-section{
    padding: 20px 0;
  background:linear-gradient(180deg,#f8fafc 0%, #ffffff 100%);
}
.cta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
}

/* CARD BASE */
.cta-card{
  position:relative;
  padding:55px 45px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(15,34,56,0.05);
  box-shadow:0 20px 60px rgba(15,34,56,0.06);
  transition:all .35s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:280px;
}

.cta-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(15,34,56,0.12);
}

/* TITLE */
.cta-card h3{
  font-size:24px;
  font-weight:700;
  margin:0 0 16px 0;
  letter-spacing:-0.3px;
}

/* TEXT */
.cta-card p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 30px 0;
  color:#4b5563;
}

/* BUTTON */
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:50px;
  font-weight:600;
  font-size:14px;
  background:var(--aryuz-primary);
  color:#fff;
  text-decoration:none;
  transition:all .3s ease;
}

.cta-btn:hover{
  background:#000;
  transform:translateY(-2px);
}

/* ===============================
   HIGHLIGHT CARD
================================= */

.cta-card.highlight{
  background:var(--aryuz-cta-highlight-bg);
  color:#fff;
  border:none;
  transform:scale(1.04);
  box-shadow:0 35px 100px rgba(0,0,0,.18);
}

.cta-card.highlight h3{
  color:var(--aryuz-cta-highlight-title);
}

.cta-card.highlight p{
  color:var(--aryuz-cta-highlight-text);
}

.cta-card.highlight .cta-btn{
  background:var(--aryuz-cta-highlight-btn);
  color:var(--aryuz-cta-highlight-btn-text);
}

.cta-card.highlight:hover{
  transform:scale(1.06);
}

/* RESPONSIVE */

@media (max-width:992px){
  .cta-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .cta-card{
    padding:40px 30px;
  }
}
.cta-card.highlight h3{
  color: var(--aryuz-cta-highlight-title, #ffffff) !important;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.cta-icon{
  width:18px;
  height:18px;
  transition:transform .3s ease;
}

.cta-btn:hover .cta-icon{
  transform:translateX(4px);
}
/* =================================
   CTA CORNER ICON — CLEAN VERSION
================================= */

.cta-card{
  position:relative;
}

/* base icon style */
.cta-card::after{
  content:'';
  position:absolute;
  top:18px;
  right:18px;
  width:28px;
  height:28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.65;
}

/* CARD 1 — Pendaftaran Online (Form icon) */
.cta-card-1::after{
  background-image:url("data:image/svg+xml;utf8,\
  <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'>\
  <rect x='4' y='3' width='16' height='18' rx='2'/>\
  <line x1='8' y1='8' x2='16' y2='8'/>\
  <line x1='8' y1='12' x2='16' y2='12'/>\
  <line x1='8' y1='16' x2='13' y2='16'/>\
  </svg>");
}

/* CARD 2 — Majalah (Book icon) */
.cta-card-2::after{
  background-image:url("data:image/svg+xml;utf8,\
  <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'>\
  <path d='M4 5a3 3 0 0 1 3-3h13v18H7a3 3 0 0 0-3 3V5z'/>\
  <path d='M7 2v18'/>\
  </svg>");
}

/* CARD 3 — Gallery (Image icon) */
.cta-card-3::after{
  background-image:url("data:image/svg+xml;utf8,\
  <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'>\
  <rect x='3' y='5' width='18' height='14' rx='2'/>\
  <circle cx='8.5' cy='10.5' r='1.5'/>\
  <path d='M21 15l-5-5L5 21'/>\
  </svg>");
}

/* Warna card biasa */
.cta-card:not(.highlight)::after{
  color:#6b7280;
}

/* Highlight card */
.cta-card.highlight::after{
  color:#ffffff;
  opacity:.9;
}