/* JazaTH Child Theme - Combined CSS */

/* === admin-float.css === */
/* Floating admin quick-grid — front-end only (for logged-in users) */
#jz-admin-float{position:fixed;right:10px;bottom:14px;z-index:9999999999999999 !important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif;pointer-events:auto !important}
#jz-admin-float *, #jz-admin-float button {pointer-events:auto !important;}
.jz-admin-float-btn{width:56px;height:56px;border-radius:999px;border:0;background:linear-gradient(135deg,#0f1724,#111827);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(2,6,23,.45);cursor:pointer;backdrop-filter:blur(6px);transition:all .2s ease;z-index:10}
.jz-admin-float-btn:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(59,130,246,.35)}
.jz-admin-float-btn:active{transform:scale(.98)}
.jz-admin-float-panel{position:fixed;right:8px;bottom:72px;z-index:9999999999999998 !important;width:calc(100vw - 40px);max-width:380px;background:linear-gradient(180deg,rgba(255,255,255,.99),#fff);color:#0f1724;border-radius:16px;box-shadow:0 20px 60px rgba(2,6,23,.4);padding:18px;display:none;opacity:0;transition:opacity .25s cubic-bezier(0.34, 1.56, 0.64, 1),visibility .25s ease,transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);visibility:hidden;transform:scale(0.95);box-sizing:border-box;overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 100px)}
.jz-admin-float-panel.open{display:block;visibility:visible;opacity:1;transform:scale(1)}
.jz-admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.jz-admin-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;padding:14px 10px;border-radius:14px;transition:all .2s ease;background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(14,165,132,.08));border:1.5px solid rgba(59,130,246,.12);min-height:90px;justify-content:center}
.jz-admin-item:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(59,130,246,.2);background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(14,165,132,.12))}
.jz-admin-item svg{width:24px;height:24px;opacity:.95;display:block}
.jz-admin-item .label{font-size:13px;color:#111827;line-height:1.3;text-align:center;font-weight:600}

/* Tablet responsiveness */
@media (max-width:768px){
  #jz-admin-float{right:12px;bottom:12px}
  .jz-admin-float-btn{width:54px;height:54px}
  .jz-admin-float-panel{right:6px;bottom:68px;width:calc(100vw - 50px);max-width:380px;padding:16px}
  .jz-admin-grid{gap:12px}
  .jz-admin-item{padding:12px 10px;min-height:85px;gap:6px;border-radius:12px}
  .jz-admin-item svg{width:22px;height:22px}
  .jz-admin-item .label{font-size:12px;font-weight:500}
}

/* Ensure admin float uses bottom placement on non-home pages to avoid overlapping hero/sections */
body:not(.home) #jz-admin-float{right:12px;left:auto;top:auto;bottom:16px}
@media (max-width:768px){
  body:not(.home) #jz-admin-float{right:12px;bottom:12px;transform:none}
}
@media (max-width:480px){
  body:not(.home) #jz-admin-float{right:10px;bottom:10px;transform:none}
}
@media (max-width:360px){
  body:not(.home) #jz-admin-float{right:8px;bottom:8px;transform:none}
}

/* Mobile responsiveness - 2x2 GRID MODERN */
@media (max-width:480px){
  #jz-admin-float{right:8px;bottom:10px}
  .jz-admin-float-btn{width:52px;height:52px;box-shadow:0 8px 20px rgba(59,130,246,.4)}
  /* On mobile, center the panel so menu items are visually centered */
  .jz-admin-float-panel{left:50%;right:auto;bottom:74px;transform-origin:50% 100%;transform:translateX(-50%) scale(0.92);width:auto;max-width:320px;padding:14px;border-radius:14px;margin:0;display:none !important;opacity:0 !important;visibility:hidden !important}
  .jz-admin-float-panel.open{display:block !important;visibility:visible !important;opacity:1 !important;transform:translateX(-50%) scale(1) !important;box-shadow:0 24px 60px rgba(2,6,23,.4) !important}
  .jz-admin-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .jz-admin-item{padding:12px 10px;gap:6px;min-height:80px;border-radius:10px;font-size:.9rem}
  .jz-admin-item svg{width:20px;height:20px}
  .jz-admin-item .label{font-size:11px;font-weight:600;line-height:1.2}
}

/* Ultra-mobile responsiveness - 2x2 COMPACT */
@media (max-width:360px){
  #jz-admin-float{right:6px;bottom:8px}
  .jz-admin-float-btn{width:50px;height:50px;box-shadow:0 6px 16px rgba(59,130,246,.35)}
  .jz-admin-float-panel{left:50%;right:auto;bottom:66px;transform-origin:50% 100%;transform:translateX(-50%) scale(0.90);width:auto;padding:12px;border-radius:12px;max-width:300px;margin:0;display:none !important;opacity:0 !important;visibility:hidden !important}
  .jz-admin-float-panel.open{display:block !important;visibility:visible !important;opacity:1 !important;transform:translateX(-50%) scale(1) !important;box-shadow:0 20px 50px rgba(2,6,23,.35) !important}
  .jz-admin-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .jz-admin-item{padding:10px 8px;gap:4px;min-height:70px;border-radius:8px;font-size:.85rem}
  .jz-admin-item svg{width:18px;height:18px}
  .jz-admin-item .label{font-size:10px;font-weight:600;line-height:1.1}
}

/* Fallback: ensure the panel is visible on narrow screens and not clipped
   This forces a full-but-padded layout for open panels when viewport is small.
   Keep high specificity to override inline or other theme rules. */
@media (max-width:480px){
  #jz-admin-float .jz-admin-float-panel.open{
    left:12px !important;
    right:12px !important;
    transform:none !important;
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
    bottom:64px !important;
    z-index:2147483647 !important;
  }
}

/* light accessibility focus */
.jz-admin-item:focus{outline:2px solid rgba(59,130,246,.35);outline-offset:2px}


/* === admin-icons.css === */
/* Admin menu icons: modern service icon for CPT 'service' */
#adminmenu li#menu-posts-service .wp-menu-image:before{
  content: "" !important;
  display:inline-block !important;
  width:20px!important;height:20px!important;
  vertical-align:middle!important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23607D8B' d='M39.6,27.2c0.1-0.7,0.2-1.4,0.2-2.2s-0.1-1.5-0.2-2.2l4.5-3.2c0.4-0.3,0.6-0.9,0.3-1.4L40,10.8c-0.3-0.5-0.8-0.7-1.3-0.4l-5,2.3c-1.2-0.9-2.4-1.6-3.8-2.2l-0.5-5.5c-0.1-0.5-0.5-0.9-1-0.9h-8.6c-0.5,0-1,0.4-1,0.9l-0.5,5.5c-1.4,0.6-2.7,1.3-3.8,2.2l-5-2.3c-0.5-0.2-1.1,0-1.3,0.4l-4.3,7.4c-0.3,0.5-0.1,1.1,0.3,1.4l4.5,3.2c-0.1,0.7-0.2,1.4-0.2,2.2s0.1,1.5,0.2,2.2L4,30.4c-0.4,0.3-0.6,0.9-0.3,1.4L8,39.2c0.3,0.5,0.8,0.7,1.3,0.4l5-2.3c1.2,0.9,2.4,1.6,3.8,2.2l0.5,5.5c0.1,0.5,0.5,0.9,1,0.9h8.6c0.5,0,1-0.4,1-0.9l0.5-5.5c1.4-0.6,2.7-1.3,3.8-2.2l5,2.3c0.5,0.2,1.1,0,1.3-0.4l4.3-7.4c0.3-0.5,0.1-1.1-0.3-1.4L39.6,27.2z M24,35c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34,30.5,29.5,35,24,35z'/><path fill='%23455A64' d='M24,13c-6.6,0-12,5.4-12,12c0,6.6,5.4,12,12,12s12-5.4,12-12C36,18.4,30.6,13,24,13z M24,30c-2.8,0-5-2.2-5-5c0-2.8,2.2-5,5-5s5,2.2,5,5C29,27.8,26.8,30,24,30z'/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Ensure contrast on dark admin menus */
#adminmenu #menu-posts-service .wp-menu-image:before{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }
#adminmenu #menu-posts-service .wp-menu-image{ line-height:24px }

/* Templates CPT admin icon: user-provided SVG (covers many menu ID and href variants) */
#adminmenu li#menu-posts-template .wp-menu-image:before,
#adminmenu li#menu-posts-templates .wp-menu-image:before,
#adminmenu li#menu-posts-wp_template .wp-menu-image:before,
#adminmenu li#menu-posts-wp_template_part .wp-menu-image:before,
#adminmenu a[href*="post_type=template"] .wp-menu-image:before,
#adminmenu a[href*="post_type=templates"] .wp-menu-image:before,
#adminmenu a[href*="post_type=wp_template"] .wp-menu-image:before,
#adminmenu a[href*="post_type=wp_template_part"] .wp-menu-image:before{
  content: "" !important;
  display:inline-block !important;
  width:16px!important;height:16px!important;
  vertical-align:middle!important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAALL0lEQVR4nO2df5DU1B3Av/xSLC0U2By01TLVs1Ydp9q75MRBz0uWDr3kNjntOtUqFC5ZRIsI8qta5+hoa/tHtYhcdrHVji3WuUJyKsI4eiQCgzLFqVTbaat1Wq0Iba1w2UN+Ha/zsrfHcrd795LNJlmaz8ybmztm8zLvk+973/cjC0BERERERERERERERERERERERMT/Ke3t7aObuxINfFdirqBJK3hNWsJrrcnmzuR0qHLQT+E8lIE4SsPtKA2r7J8qNKOnYAKEjURX4jO8Lq7hNekDQZfQkKJJp3hd3NWiSQJUGUiFi1EankRpOILSgIYUFT5BKnSi9XAphAFBkxp5TTpQVESRwmvSJn4LPxlCDkIwCqmwBKXhaFERQ8sJpMIa/LnAbhp3R7wuHiOVUSBln6RJUyHEIBUeIRQxuDyN2mG07zfMaxLD6+IRpzIKurEdyc7kGAghKA13u5SRLw/6esO4IQVdfNO1jHzpSiyFkIEeg9qS4wV56UMb4ErfblrQxdvKlpHrug40PjlvPIQIpEKmTBn5wX6Lbzct6OI2L4TYUroS34QwpbYq9HoiBA/y66Dy4yR+ot0M5KWL+EtBk2bymqTwurhK0MUf8bp4L/5d0KRZwnPCpzzLmjJwEVKhFamwFGVgNUpDuz2fyACPHodpqAOu9UhGrnTAt6DS8JtuuNA7GUSD/wlBk15q0cU2N3KQCgxS4TGUhn8SdDOHPBWiwvfAj+zKVyF6QfemiwcFXVye7EyeM6KIDDSgNHR72sDOy8MVF5LoSlwSlBDhdDKwL9GVuKrkOJCGh5EKJwOWgVAG7q+4kNkvzp4g6OLxwKXoeA4k3niGjAzEkAq7Axdxegy5DfyA18WdQQsRcpHyAV5Hs2WshwtQGv4auIR8UeEUWgef90cIzoCClqGLB1uebbnclpGBL6I0/C1wCWeWbvALnPoKuvj34ISIHzZr0qWhlYGjIw3XgZ+0bG5leV3sC6CbOjAgA3dTKrwTuIChQh6FIBC6EvPxXkcg3dR6e8wIV2TkygtoLZwLQS7BC5p02MNG7ysVGYmuxGWeRUauW/G2m1JBRZ0w4hyp8lKe57/A66LKa1KvSwm7mjXpBlEXP4uvh3/i3/HfPZWhwkcoDd9HHXAJ6oQxuPFQB9QhFdY62IgqJuJllIEmCBt4aYPXpCccCdGk+6DULhuCUYImLfNIxu+GS0NRBr5GtLxy+nq9SIW5aAN8CcIMr0m6gwGaeGkBbYDzy5CxG62FiSPW0QFXOYqUDqiBsCPo4n7SARrP+isuIw2vksgYqCvXfZGKboYw02g0jiVNhXlNWu+LjAxMwtex2IZpRPXhMYX8+ikIM/j8lYPuSvFLRg/LXJvl6J4erv6OEevMwDh7C5YsQu6DMNO6ubWGVEiLLn6ngmPGa4NkWFmOQRbHnOqJ04uGrbcdRtu7fWR13QthBi/0OUh1H/RTRra/jCSl/5ADWV0ZuAvCjqCLHxF2WX/ER0/9lJEtkNLL0rcXu3+kwkoH9bVC2OF10XTbbSEfZAwnBaexSIV/Edf5GNRC2MFdkYOBvRcfzs5/Fqmg+yGjlBT7KCh5nfsDOaHolG90JeqdLZ2Ih/JSUAdMRmnY61DIXvw5/HmLa7jeYpleEhkDUlimL8vSdqTayykqbCSslyhtDx4Eo/D44FpKBmIoDfucRgbGYpk78VPvRMgQKbm097cE9c+EagGPDc6E5KS0bG692kGkDERGIb0ss9CVFLv7YhYORAo+NF36QTChmqjLpMbxmvSWGynN+Uj5BVAlI2VQZAzGYhuWlC0lFymbitTfhzIwC6qN/tPxJ8uS0lEkUlR4HT0OU0aq32KZu50KGei+OHreMJGyDqoVQZNWOxci2VKw0CKRsme4yKiIlMJIwQ9DGF9hc4Kgixs8kvKkExmeS8HHUf061lPpd0l4TXrKrZTmgnmKW7yQclbRL2VjuZFSDhZL3+NeCjMXzhZmzDPGBxkptYu3nguARpUnhT5psfW3QrUzZfFrE2Oy+QalmHcEIaV28dZzKcV8nlKMn0M7spc5LI5Z6lZKL1vfAlVLOxodk82XKMVElGz0xVKG7KeUGfOM8THZ3GbXn7uHdD5Ssk3McjdS7E2ueEM43kd3CiUbiwcawy7GqcJIEXTxVxWTknzrnFxkFNZv30P5kcLRr6O6unFQTdS0vTwtJpvWkAYZFCmVkDJjcGQMvYfTkcIxK1wO9HdCNRGTjZ+UbBAcKSljUUWkJEtFxmAp5uOnI4Ve5iJK3kdzaoM7LuqE85fuPo9SjJ7hG8Toi8mvtA2MKbr4tBspvCb9e87WORPzkUHJxtYRZfSXmGKqA5HCMitdSPk2VAOUsv1GskYpL1J4XTzZokk3D0SGbDxHKsOLSLFY5nmoBmKK+YSDp/QtaDfGOpXCF8iwU1sHkTEoUvdPXbBrYDnE4pgHHQg5WhXdVkw2/kDYGH3Uwu6vFn42SSAlt4Is3uKNjO5LCuvHW7IWx+whldLL1dMQapKdYyjZPEHYIFuLXyJZUsoQGYrxgmsZKeMrxeq3WCbpYF4S7nWuiW27pxB3V7K5rNR1kkWk+CEDc2jWrMnEQpqY5RBmpi/onkHaMDVtxrBrQ8kCKX7JyGNx9CeEmdYPIMx8LmXEiCMkZY546i/Zv8zSokk3+SXjYGPjp4kjhGVWQqhpN8ZSinmSSIhibHZy6Vp7ADe3uJERk80PSWRgsk0NzeRCaHvVIdRQivEnwif2ONVm1IZJBsbi6BdJhRxuqr8GwsykRTsnU4qxg7yxjN35/ZKSkC6HlJAxpc3MvUINI385JT7F6HC2ftdhjv4yhA2cz1OK8Yz91DttNMXchZMBKAL+O/73cmUc+Xr9BVmO3mfF6VuKicGrt1mWvg/veThdQslNEulXe5saEhAGKMX4bkw2j7oaaE833lFKMX6N17dq5O0i/knJxka31x0qg3mn4Kl+Pcsy9/bE62+wmpibLZZ5yGLpd92IKDLIP4OTggBlmA+UI6ISJSYbB6fJ3ZcXk+FHsVhm93/jdY5Px5QNnkcE3fjU0O7vQD4yehuZ87Mc/bafMgqyr02+ypg+fwdFKebHoZOxcMdlgcvIR0qctudOvkApxpqgBVAhltE/nrxJktl5Qkwx3g1aAhVmGfkym74yVOtVFS+y8Y+8DIzFMg8ELuHMsqLiQqa2GdcHLkKxy97CzaU8WY6+382rCBXqtir/lhWeJwQcFcfxGAapvSWP4vQ00ddlWeYvIRCyseJCKOWVa4KRYRzD56qoVPdFJPeJGhvH26+4eTXpc1Xon1VcCO4mvGzomGK+TSnGeyUkvBeTTR3P3PHml5v7RcnkGKuJYbMs86jF0W/gvfDBDWf/jWV2WSyd8VIIfpML/CCmmL/3SkiNbNjvFU679cUJNfN3XliTMq/AicPUBbvsr3/1GtTYOPZI08wZh+MNF1vxq6+wZs8c+IolnKbiM1deCfFt4XFqyrzHIyF/zp+NCgsWR//Qk+jgmD0+H4Yz3y+7u5JN/2azhPQ01sWyHPNx2ULiNAd+UtNmziY+YVI0WzJ/AyHFitM3lRcddDqQG5+qvLLQPl/lPHXdjscMCDHZOL3a3UDObAv0dHwstZ2nFOMjwtT1FD59jrs8qAKyHDM3y9KHHbyP+AhOGkKxdRtTjB/jvYgSMk7ae+Ipo+peuO/F62Mssxa/rFNCxDGLo5/NcvVF//uMYGlHo3EaS8nmXEo2VuR2Ew1h0jzD/j7eagbV1Y2zv2koTitZll6Fvy4wG2f4/8xhiL9gMyIiIiIiIiIiIiIiIiIiIiIiAs4S/gcXOBR+BG4XvQAAAABJRU5ErkJggg==") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: transparent !important;
}

#adminmenu #menu-posts-template .wp-menu-image:before, 
#adminmenu #menu-posts-templates .wp-menu-image:before{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }
#adminmenu #menu-posts-template .wp-menu-image,
#adminmenu #menu-posts-templates .wp-menu-image{ line-height:24px }

/* Fallback: apply icon directly on .wp-menu-image and hide any <img> or inline <svg> to ensure override */
#adminmenu li#menu-posts-template .wp-menu-image,
#adminmenu li#menu-posts-templates .wp-menu-image,
#adminmenu li#menu-posts-wp_template .wp-menu-image,
#adminmenu li#menu-posts-wp_template_part .wp-menu-image,
#adminmenu a[href*="post_type=template"] .wp-menu-image,
#adminmenu a[href*="post_type=templates"] .wp-menu-image,
#adminmenu a[href*="post_type=wp_template"] .wp-menu-image,
#adminmenu a[href*="post_type=wp_template_part"] .wp-menu-image{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAALL0lEQVR4nO2df5DU1B3Av/xSLC0U2By01TLVs1Ydp9q75MRBz0uWDr3kNjntOtUqFC5ZRIsI8qta5+hoa/tHtYhcdrHVji3WuUJyKsI4eiQCgzLFqVTbaat1Wq0Iba1w2UN+Ha/zsrfHcrd795LNJlmaz8ybmztm8zLvk+973/cjC0BERERERERERERERERERERERMT/Ke3t7aObuxINfFdirqBJK3hNWsJrrcnmzuR0qHLQT+E8lIE4SsPtKA2r7J8qNKOnYAKEjURX4jO8Lq7hNekDQZfQkKJJp3hd3NWiSQJUGUiFi1EankRpOILSgIYUFT5BKnSi9XAphAFBkxp5TTpQVESRwmvSJn4LPxlCDkIwCqmwBKXhaFERQ8sJpMIa/LnAbhp3R7wuHiOVUSBln6RJUyHEIBUeIRQxuDyN2mG07zfMaxLD6+IRpzIKurEdyc7kGAghKA13u5SRLw/6esO4IQVdfNO1jHzpSiyFkIEeg9qS4wV56UMb4ErfblrQxdvKlpHrug40PjlvPIQIpEKmTBn5wX6Lbzct6OI2L4TYUroS34QwpbYq9HoiBA/y66Dy4yR+ot0M5KWL+EtBk2bymqTwurhK0MUf8bp4L/5d0KRZwnPCpzzLmjJwEVKhFamwFGVgNUpDuz2fyACPHodpqAOu9UhGrnTAt6DS8JtuuNA7GUSD/wlBk15q0cU2N3KQCgxS4TGUhn8SdDOHPBWiwvfAj+zKVyF6QfemiwcFXVye7EyeM6KIDDSgNHR72sDOy8MVF5LoSlwSlBDhdDKwL9GVuKrkOJCGh5EKJwOWgVAG7q+4kNkvzp4g6OLxwKXoeA4k3niGjAzEkAq7Axdxegy5DfyA18WdQQsRcpHyAV5Hs2WshwtQGv4auIR8UeEUWgef90cIzoCClqGLB1uebbnclpGBL6I0/C1wCWeWbvALnPoKuvj34ISIHzZr0qWhlYGjIw3XgZ+0bG5leV3sC6CbOjAgA3dTKrwTuIChQh6FIBC6EvPxXkcg3dR6e8wIV2TkygtoLZwLQS7BC5p02MNG7ysVGYmuxGWeRUauW/G2m1JBRZ0w4hyp8lKe57/A66LKa1KvSwm7mjXpBlEXP4uvh3/i3/HfPZWhwkcoDd9HHXAJ6oQxuPFQB9QhFdY62IgqJuJllIEmCBt4aYPXpCccCdGk+6DULhuCUYImLfNIxu+GS0NRBr5GtLxy+nq9SIW5aAN8CcIMr0m6gwGaeGkBbYDzy5CxG62FiSPW0QFXOYqUDqiBsCPo4n7SARrP+isuIw2vksgYqCvXfZGKboYw02g0jiVNhXlNWu+LjAxMwtex2IZpRPXhMYX8+ikIM/j8lYPuSvFLRg/LXJvl6J4erv6OEevMwDh7C5YsQu6DMNO6ubWGVEiLLn6ngmPGa4NkWFmOQRbHnOqJ04uGrbcdRtu7fWR13QthBi/0OUh1H/RTRra/jCSl/5ADWV0ZuAvCjqCLHxF2WX/ER0/9lJEtkNLL0rcXu3+kwkoH9bVC2OF10XTbbSEfZAwnBaexSIV/Edf5GNRC2MFdkYOBvRcfzs5/Fqmg+yGjlBT7KCh5nfsDOaHolG90JeqdLZ2Ih/JSUAdMRmnY61DIXvw5/HmLa7jeYpleEhkDUlimL8vSdqTayykqbCSslyhtDx4Eo/D44FpKBmIoDfucRgbGYpk78VPvRMgQKbm097cE9c+EagGPDc6E5KS0bG692kGkDERGIb0ss9CVFLv7YhYORAo+NF36QTChmqjLpMbxmvSWGynN+Uj5BVAlI2VQZAzGYhuWlC0lFymbitTfhzIwC6qN/tPxJ8uS0lEkUlR4HT0OU0aq32KZu50KGei+OHreMJGyDqoVQZNWOxci2VKw0CKRsme4yKiIlMJIwQ9DGF9hc4Kgixs8kvKkExmeS8HHUf061lPpd0l4TXrKrZTmgnmKW7yQclbRL2VjuZFSDhZL3+NeCjMXzhZmzDPGBxkptYu3nguARpUnhT5psfW3QrUzZfFrE2Oy+QalmHcEIaV28dZzKcV8nlKMn0M7spc5LI5Z6lZKL1vfAlVLOxodk82XKMVElGz0xVKG7KeUGfOM8THZ3GbXn7uHdD5Ssk3McjdS7E2ueEM43kd3CiUbiwcawy7GqcJIEXTxVxWTknzrnFxkFNZv30P5kcLRr6O6unFQTdS0vTwtJpvWkAYZFCmVkDJjcGQMvYfTkcIxK1wO9HdCNRGTjZ+UbBAcKSljUUWkJEtFxmAp5uOnI4Ve5iJK3kdzaoM7LuqE85fuPo9SjJ7hG8Toi8mvtA2MKbr4tBspvCb9e87WORPzkUHJxtYRZfSXmGKqA5HCMitdSPk2VAOUsv1GskYpL1J4XTzZokk3D0SGbDxHKsOLSLFY5nmoBmKK+YSDp/QtaDfGOpXCF8iwU1sHkTEoUvdPXbBrYDnE4pgHHQg5WhXdVkw2/kDYGH3Uwu6vFn42SSAlt4Is3uKNjO5LCuvHW7IWx+whldLL1dMQapKdYyjZPEHYIFuLXyJZUsoQGYrxgmsZKeMrxeq3WCbpYF4S7nWuiW27pxB3V7K5rNR1kkWk+CEDc2jWrMnEQpqY5RBmpi/onkHaMDVtxrBrQ8kCKX7JyGNx9CeEmdYPIMx8LmXEiCMkZY546i/Zv8zSokk3+SXjYGPjp4kjhGVWQqhpN8ZSinmSSIhibHZy6Vp7ADe3uJERk80PSWRgsk0NzeRCaHvVIdRQivEnwif2ONVm1IZJBsbi6BdJhRxuqr8GwsykRTsnU4qxg7yxjN35/ZKSkC6HlJAxpc3MvUINI385JT7F6HC2ftdhjv4yhA2cz1OK8Yz91DttNMXchZMBKAL+O/73cmUc+Xr9BVmO3mfF6VuKicGrt1mWvg/veThdQslNEulXe5saEhAGKMX4bkw2j7oaaE833lFKMX6N17dq5O0i/knJxka31x0qg3mn4Kl+Pcsy9/bE62+wmpibLZZ5yGLpd92IKDLIP4OTggBlmA+UI6ISJSYbB6fJ3ZcXk+FHsVhm93/jdY5Px5QNnkcE3fjU0O7vQD4yehuZ87Mc/bafMgqyr02+ypg+fwdFKebHoZOxcMdlgcvIR0qctudOvkApxpqgBVAhltE/nrxJktl5Qkwx3g1aAhVmGfkym74yVOtVFS+y8Y+8DIzFMg8ELuHMsqLiQqa2GdcHLkKxy97CzaU8WY6+382rCBXqtir/lhWeJwQcFcfxGAapvSWP4vQ00ddlWeYvIRCyseJCKOWVa4KRYRzD56qoVPdFJPeJGhvH26+4eTXpc1Xon1VcCO4mvGzomGK+TSnGeyUkvBeTTR3P3PHml5v7RcnkGKuJYbMs86jF0W/gvfDBDWf/jWV2WSyd8VIIfpML/CCmmL/3SkiNbNjvFU679cUJNfN3XliTMq/AicPUBbvsr3/1GtTYOPZI08wZh+MNF1vxq6+wZs8c+IolnKbiM1deCfFt4XFqyrzHIyF/zp+NCgsWR//Qk+jgmD0+H4Yz3y+7u5JN/2azhPQ01sWyHPNx2ULiNAd+UtNmziY+YVI0WzJ/AyHFitM3lRcddDqQG5+qvLLQPl/lPHXdjscMCDHZOL3a3UDObAv0dHwstZ2nFOMjwtT1FD59jrs8qAKyHDM3y9KHHbyP+AhOGkKxdRtTjB/jvYgSMk7ae+Ipo+peuO/F62Mssxa/rFNCxDGLo5/NcvVF//uMYGlHo3EaS8nmXEo2VuR2Ew1h0jzD/j7eagbV1Y2zv2koTitZll6Fvy4wG2f4/8xhiL9gMyIiIiIiIiIiIiIiIiIiIiIiAs4S/gcXOBR+BG4XvQAAAABJRU5ErkJggg==") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: transparent !important;
}
#adminmenu li#menu-posts-template .wp-menu-image img,
#adminmenu li#menu-posts-templates .wp-menu-image img,
#adminmenu li#menu-posts-template .wp-menu-image svg,
#adminmenu li#menu-posts-templates .wp-menu-image svg{ display: none !important; }
#adminmenu li#menu-posts-template .wp-menu-image .dashicons,
#adminmenu li#menu-posts-templates .wp-menu-image .dashicons,
#adminmenu li#menu-posts-template .wp-menu-image::before,
#adminmenu li#menu-posts-templates .wp-menu-image::before,
#adminmenu li#menu-posts-wp_template .wp-menu-image .dashicons,
#adminmenu li#menu-posts-wp_template_part .wp-menu-image .dashicons,
#adminmenu a[href*="post_type=template"] .wp-menu-image .dashicons,
#adminmenu a[href*="post_type=templates"] .wp-menu-image .dashicons,
#adminmenu a[href*="post_type=wp_template"] .wp-menu-image .dashicons,
#adminmenu a[href*="post_type=wp_template_part"] .wp-menu-image .dashicons{ display:none !important; color: transparent !important; }
/* Extra: hide any child nodes under .wp-menu-image to handle unexpected markup */
#adminmenu li#menu-posts-template .wp-menu-image *{ display: none !important; }
#adminmenu li#menu-posts-template .wp-menu-image::before,
#adminmenu li#menu-posts-templates .wp-menu-image::before,
#adminmenu li#menu-posts-wp_template .wp-menu-image::before,
#adminmenu li#menu-posts-wp_template_part .wp-menu-image::before,
#adminmenu a[href*="post_type=template"] .wp-menu-image::before,
#adminmenu a[href*="post_type=templates"] .wp-menu-image::before,
#adminmenu a[href*="post_type=wp_template"] .wp-menu-image::before,
#adminmenu a[href*="post_type=wp_template_part"] .wp-menu-image::before{ content: none !important; display: none !important; }

/* Testimonial CPT admin icon: simple SVG speech bubble (covers singular & plural menu IDs) */
#adminmenu li#menu-posts-testimonial .wp-menu-image:before,
#adminmenu li#menu-posts-testimonials .wp-menu-image:before{
  content: "" !important;
  display:inline-block !important;
  width:20px!important;height:20px!important;
  vertical-align:middle!important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23607D8B' d='M2 3c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8l-6 4V3z'/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#adminmenu #menu-posts-testimonial .wp-menu-image:before,
#adminmenu #menu-posts-testimonials .wp-menu-image:before{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }
#adminmenu #menu-posts-testimonial .wp-menu-image,
#adminmenu #menu-posts-testimonials .wp-menu-image{ line-height:24px }


/* === admin-panel.css === */
/* REMOVED — panel styles moved to `assets/css/panel-jazath.css` */
/* File retained only to avoid accidental 404s during deploy. Delete this file from the repo when ready. */
/* No CSS in this file. */

.jzth-admin-wrap{max-width:1300px;margin:18px auto;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif}
.jzth-admin-panel{display:flex;background:transparent;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(2,6,23,.06)}
/* SIDEBAR */
.jzth-sidebar{width:260px;background:var(--jzth-sidebar-gradient);color:#fff;padding:18px 0;display:flex;flex-direction:column}
.jzth-sidebar .brand{display:flex;gap:12px;align-items:center;padding:0 20px;margin-bottom:8px}
.jzth-sidebar .brand h3{margin:0;font-size:1.05rem}
.jzth-nav{display:flex;flex-direction:column;margin-top:6px}
.jzth-nav-item{display:flex;align-items:center;gap:12px;padding:12px 18px;color:rgba(255,255,255,.88);text-decoration:none;font-weight:600;border-left:3px solid transparent;cursor:pointer}
.jzth-nav-item .dashicons{font-size:18px;opacity:.98}
.jzth-nav-item:hover{background:rgba(255,255,255,.02)}
.jzth-nav-item.active{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent);border-left-color:rgba(255,255,255,.18)}
.jzth-nav-section{margin-top:8px;padding:8px 14px;color:rgba(255,255,255,.6);font-size:.85rem}
/* CONTENT */
.jzth-content{flex:1;position:relative;padding:28px;min-height:640px;overflow:hidden;color:#e6eef8;background:linear-gradient(180deg,#071a28 0%, #0a2b33 40%, #072033 100%);background-color:#0a2b33}
/* subtle animated blobs */
.jzth-content::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 360px at 18% 18%, rgba(14,165,132,0.06), transparent 18%), radial-gradient(420px 240px at 82% 78%, rgba(59,130,246,0.035), transparent 22%);filter:blur(34px);mix-blend-mode:screen;animation:jzth-move 22s ease-in-out infinite;pointer-events:none;z-index:0;opacity:.7}
/* patterned overlay (modern corak) */
.jzth-content::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 48px), radial-gradient(circle at 90% 70%, rgba(255,255,255,0.02), transparent 20%);mix-blend-mode:overlay;opacity:.28;pointer-events:none;z-index:0}
@keyframes jzth-move{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4%) rotate(2deg)}100%{transform:translateY(0) rotate(0deg)}}
.jzth-content-body,.jzth-panel-header,.jzth-section{position:relative;z-index:1}
.jzth-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.jzth-panel-header h1{margin:0;font-size:1.4rem;color:#e6eef8}
.jzth-panel-header .version{color:rgba(255,255,255,.45);font-size:.9rem}
.jzth-content-body{display:block}
.jzth-section{display:none;padding-bottom:22px}
.jzth-section.active{display:block}

/* cards (panels) */
.jzth-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:18px;box-shadow:0 10px 40px rgba(2,6,23,.35);min-height:140px;color:#e6eef8}
.jzth-card h2{margin:0 0 8px;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;color:#e6eef8}
.jzth-card .description{color:rgba(255,255,255,0.65);font-size:.95rem;margin-bottom:10px}

.jzth-accordion{border-top:1px solid rgba(255,255,255,0.03)}
.jzth-accordion-item{display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer}
.jzth-accordion-item .title{font-weight:600;color:rgba(255,255,255,0.92)}
.jzth-accordion-item .chev{color:rgba(255,255,255,0.45)}
.jzth-accordion-panel{padding:14px;border-top:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.02);display:none;color:#e6eef8}
.jzth-accordion-item.open + .jzth-accordion-panel{display:block}
/* form controls inside panels */
.jzth-form-row{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.jzth-form-row label{width:220px;color:rgba(255,255,255,0.85);font-weight:600}
.jzth-form-row .control{flex:1}
.jzth-form-row input[type="text"],.jzth-form-row select,.jzth-form-row textarea{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#e6eef8}
.jzth-color{width:56px;height:34px;padding:3px;border-radius:6px;border:1px solid #e6e6e6;display:inline-block}
.jzth-ql-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
/* utilities */
.jzth-actions{display:flex;gap:8px;align-items:center;margin:6px 0 12px}
.jzth-notice{margin:10px 0}
/* Save button fixed */
.jzth-save-fixed{position:fixed;right:34px;bottom:28px;z-index:9999}
.jzth-save-fixed .button-primary{background:var(--jzth-accent);border-color:var(--jzth-accent);color:#fff;padding:12px 18px;border-radius:8px;box-shadow:0 8px 30px rgba(2,6,23,.12)}
/* responsive */
@media (max-width:980px){
  .jzth-sidebar{width:84px}
  .jzth-nav-item{padding:10px 12px;font-size:.85rem}
  .jzth-form-row label{width:160px}
}

@media (max-width:768px){
  .jzth-admin-panel{flex-direction:column}
  .jzth-sidebar{width:100%;display:flex;overflow-x:auto;overflow-y:hidden;padding:8px;flex-direction:row;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-bottom:1px solid rgba(255,255,255,.05)}
  .jzth-nav{flex-direction:row;gap:6px;flex-wrap:nowrap;padding:0 4px}
  .jzth-nav-item{padding:10px 14px;font-size:.75rem;flex:0 0 auto;border-left:none;border-bottom:none;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.88);transition:all .2s ease;white-space:nowrap}
  .jzth-nav-item:hover{background:rgba(255,255,255,.12);transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,6,23,.15)}
  .jzth-nav-item.active{background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(14,165,132,.2));color:#fff;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 16px rgba(59,130,246,.12)}
  .jzth-nav-section{display:none}
  .jzth-sidebar .brand{padding:0 8px;font-size:.9rem;flex:0 0 auto}
  .jzth-content{padding:16px}
  .jzth-form-row{flex-direction:column;align-items:flex-start;gap:6px}
  .jzth-form-row label{width:100%;font-size:.9rem}
  .jzth-form-row .control{width:100%}
  .jzth-save-fixed{right:12px;bottom:12px;width:calc(100% - 24px)}
}

@media (max-width:480px){
  .jzth-admin-wrap{margin:8px;padding:0 8px}
  .jzth-admin-panel{box-shadow:0 2px 8px rgba(2,6,23,.08);border-radius:12px}
  .jzth-sidebar{padding:10px;flex-direction:row;overflow-x:auto;overflow-y:hidden;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border-radius:12px 12px 0 0}
  .jzth-nav{flex-direction:row;gap:4px;flex-wrap:nowrap;padding:0 2px}
  .jzth-nav-item{padding:8px 12px;font-size:.7rem;flex:0 0 auto;border-bottom:none;border-left:none;border-radius:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);transition:all .15s ease;white-space:nowrap}
  .jzth-nav-item:hover{background:rgba(255,255,255,.15);box-shadow:0 2px 8px rgba(2,6,23,.1)}
  .jzth-nav-item.active{background:linear-gradient(135deg,rgba(59,130,246,.35),rgba(14,165,132,.25));color:#fff;box-shadow:0 3px 10px rgba(59,130,246,.15);font-weight:600}
  .jzth-sidebar .brand{padding:0 6px;margin-bottom:0;gap:6px;font-size:.85rem;flex:0 0 auto}
  .jzth-content{padding:12px;min-height:auto;border-radius:0 0 12px 12px}
  .jzth-panel-header{flex-direction:column;align-items:flex-start;gap:4px}
  .jzth-panel-header h1{font-size:1.1rem;font-weight:700}
  .jzth-panel-header .version{font-size:.85rem}
  .jzth-card{padding:12px;min-height:auto;border-radius:10px}
  .jzth-card h2{font-size:.95rem}
  .jzth-card .description{font-size:.9rem}
  .jzth-form-row input[type="text"],.jzth-form-row select,.jzth-form-row textarea{padding:6px;font-size:.9rem;border-radius:6px}
  .jzth-accordion-item{padding:10px;font-size:.85rem}
  .jzth-accordion-panel{padding:10px;border-radius:6px}
  .jzth-actions{flex-wrap:wrap}
  .jzth-save-fixed{width:calc(100% - 24px)}
  .jzth-save-fixed .button-primary{padding:10px 14px;font-size:.85rem;border-radius:8px}
  .jzth-ql-row{flex-wrap:wrap}
}

@media (max-width:360px){
  .jzth-admin-wrap{margin:4px;padding:0 4px}
  .jzth-admin-panel{border-radius:10px}
  .jzth-sidebar{padding:8px;border-radius:10px 10px 0 0}
  .jzth-sidebar .brand{padding:0 6px;gap:4px;font-size:.8rem}
  .jzth-sidebar .brand h3{font-size:.75rem}
  .jzth-nav{gap:3px;padding:0 1px}
  .jzth-nav-item{padding:6px 10px;font-size:.65rem;border-radius:5px;background:rgba(255,255,255,.1)}
  .jzth-nav-item.active{background:linear-gradient(135deg,rgba(59,130,246,.4),rgba(14,165,132,.3))}
  .jzth-content{padding:8px;border-radius:0 0 10px 10px}
  .jzth-panel-header{gap:2px}
  .jzth-panel-header h1{font-size:.95rem;font-weight:700}
  .jzth-card{padding:8px;border-radius:8px}
  .jzth-card h2{font-size:.85rem}
  .jzth-form-row label{font-size:.8rem}
  .jzth-form-row input[type="text"],.jzth-form-row select,.jzth-form-row textarea{padding:4px;font-size:.8rem;border-radius:4px}
  .jzth-accordion-item{padding:8px;font-size:.75rem}
  .jzth-save-fixed{bottom:8px;right:8px}
  .jzth-save-fixed .button-primary{padding:8px 12px;font-size:.8rem;border-radius:6px}
}

/* Page background behind the panel — subtle modern corak (only on JazaTH page) */
body.toplevel_page_jzth-settings {
  background-color: #eef3f5; /* not plain white */
  background-image:
    radial-gradient(circle at 8% 12%, rgba(14,165,132,0.03), transparent 12%),
    radial-gradient(circle at 92% 88%, rgba(59,130,246,0.02), transparent 14%),
    repeating-linear-gradient(135deg, rgba(2,6,23,0.02) 0 1px, transparent 1px 60px);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Slight vignette to focus on panel */
body.toplevel_page_jzth-settings::before{
  content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(1200px 600px at 50% 60%, rgba(2,6,23,0.03), transparent 40%);mix-blend-mode:multiply;opacity:.7;z-index:0;
}

/* keep the centered panel visually elevated */
.jzth-admin-panel{position:relative;z-index:1}


/* === archive-layanan.css === */
/**
 * Archive Layanan CSS
 * Modern, responsive, and SEO-optimized styles for service archive page
 * 
 * Features:
 * - Responsive grid (2 col mobile, auto-fit desktop)
 * - Modern hero section with gradient and animations
 * - Service cards with color palette
 * - Accessibility optimized
 * - Performance oriented
 */

/* ============================================================================
   ROOT & VARIABLES
   ============================================================================ */

:root {
  /* Colors */
  --color-indigo: #6366f1;
  --color-indigo-light: #e0e7ff;
  --color-indigo-dark: #4f46e5;
  
  --color-pink: #ec4899;
  --color-pink-light: #fce7f3;
  --color-pink-dark: #db2777;
  
  --color-teal: #14b8a6;
  --color-teal-light: #ccfbf1;
  --color-teal-dark: #0d9488;
  
  --color-amber: #f59e0b;
  --color-amber-light: #fef3c7;
  --color-amber-dark: #d97706;
  
  --color-purple: #8b5cf6;
  --color-purple-light: #ede9fe;
  --color-purple-dark: #7c3aed;
  
  --color-emerald: #10b981;
  --color-emerald-light: #d1fae5;
  --color-emerald-dark: #059669;
  
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-text-lighter: #9ca3af;
  --color-bg: #ffffff;
  --color-bg-light: #f9fafb;
  --color-border: #e5e7eb;
  --color-shadow: rgba(0, 0, 0, 0.1);
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Monaco", "Courier New", monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
}

/* ============================================================================
   GLOBAL RESET & BASE
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layanan-archive {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: var(--line-height-normal);
}

/* Container Utilities */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.layanan-container {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

@media (max-width: 768px) {
  .layanan-container {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-indigo);
  color: white;
  box-shadow: 0 4px 6px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover {
  background-color: var(--color-indigo-dark);
  box-shadow: 0 10px 15px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}

.btn-primary:focus {
  outline: 2px solid var(--color-indigo-dark);
  outline-offset: 2px;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-indigo);
  border: 2px solid var(--color-indigo);
}

.btn-secondary:hover {
  background-color: var(--color-indigo-light);
  border-color: var(--color-indigo-dark);
}

.btn-large {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-base);
  min-height: 50px;
}

.btn svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.layanan-hero {
  position: relative;
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.layanan-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  opacity: 0.85;
  z-index: 0;
}

/* Particle Animations */
.layanan-hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  animation: float 20s infinite;
}

.particle-1 {
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  top: -50px;
  left: -50px;
  animation-delay: 0s;
}

.particle-2 {
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.15);
  top: 50%;
  right: -30px;
  animation-delay: 2s;
  animation-duration: 25s;
}

.particle-3 {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  bottom: 10%;
  left: 10%;
  animation-delay: 4s;
  animation-duration: 30s;
}

.particle-4 {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.2);
  top: 30%;
  left: 50%;
  animation-delay: 1s;
  animation-duration: 22s;
}

.particle-5 {
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.1);
  bottom: -50px;
  right: 5%;
  animation-delay: 3s;
  animation-duration: 26s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(30px, -30px) rotate(180deg);
  }
}

.layanan-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.layanan-hero__badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-6);
  backdrop-filter: blur(10px);
}

.layanan-hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-6);
  color: #ffffff;
}

.layanan-hero__subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-8);
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--line-height-relaxed);
}

.layanan-hero__cta {
  display: flex;
  gap: var(--spacing-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-12);
}

.layanan-hero__trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-8);
  justify-items: center;
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.trust-item strong {
  font-size: var(--font-size-2xl);
  font-weight: 800;
}

.trust-item span {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
  .layanan-hero {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }

  .layanan-hero__title {
    margin-bottom: var(--spacing-4);
  }

  .layanan-hero__cta {
    gap: var(--spacing-2);
  }

  .layanan-hero__cta .btn {
    flex: 1;
    min-width: 200px;
  }
}

/* ============================================================================
   SEO CONTENT SECTION
   ============================================================================ */

.layanan-seo-content {
  padding: var(--spacing-24) 0;
  background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%);
}

.seo-content__wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.seo-content__title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  margin-bottom: var(--spacing-8);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.seo-content__body {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
}

.seo-content__body p {
  margin-bottom: var(--spacing-6);
}

.seo-content__body h2,
.seo-content__body h3 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-4);
  color: var(--color-text);
}

.seo-content__body h2 {
  font-size: var(--font-size-2xl);
}

.seo-content__body h3 {
  font-size: var(--font-size-xl);
}

.seo-content__body ul,
.seo-content__body ol {
  margin-left: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

.seo-content__body li {
  margin-bottom: var(--spacing-2);
}

@media (max-width: 768px) {
  .layanan-seo-content {
    padding: var(--spacing-16) 0;
  }

  .seo-content__title {
    font-size: var(--font-size-2xl);
  }

  .seo-content__body {
    font-size: var(--font-size-base);
  }
}

/* ============================================================================
   SERVICES SECTION
   ============================================================================ */

.layanan-section {
  padding: var(--spacing-24) 0;
  background: var(--color-bg);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  margin-bottom: var(--spacing-4);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* Responsive Grid - 2 col mobile, auto-fit desktop */
.layanan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-8);
}

@media (max-width: 768px) {
  .layanan-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
  }
}

@media (max-width: 480px) {
  .layanan-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   SERVICE CARDS
   ============================================================================ */

.layanan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* Color Variants */
.layanan-card--indigo {
  --card-color: var(--color-indigo);
  --card-color-light: var(--color-indigo-light);
}

.layanan-card--pink {
  --card-color: var(--color-pink);
  --card-color-light: var(--color-pink-light);
}

.layanan-card--teal {
  --card-color: var(--color-teal);
  --card-color-light: var(--color-teal-light);
}

.layanan-card--amber {
  --card-color: var(--color-amber);
  --card-color-light: var(--color-amber-light);
}

.layanan-card--purple {
  --card-color: var(--color-purple);
  --card-color-light: var(--color-purple-light);
}

.layanan-card--emerald {
  --card-color: var(--color-emerald);
  --card-color-light: var(--color-emerald-light);
}

.layanan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-color), transparent);
}

.layanan-card:hover {
  border-color: var(--card-color);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-8px);
}

/* Card Header */
.layanan-card__header {
  position: relative;
  margin-bottom: var(--spacing-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.layanan-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-color-light);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  color: var(--card-color);
}

.icon-emoji {
  font-size: 2rem;
  line-height: 1;
}

.layanan-card__icon svg {
  stroke: var(--card-color);
}

.layanan-card__icon img {
  max-width: 100%;
  max-height: 100%;
}

.layanan-card__badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--card-color);
  color: white;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Card Meta */
.layanan-card__meta {
  margin-bottom: var(--spacing-6);
  flex-grow: 1;
}

.layanan-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-2);
  color: var(--color-text);
}

.layanan-card__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.layanan-card__link:hover {
  color: var(--card-color);
}

/* Card Price */
.layanan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  color: var(--card-color);
  font-weight: 600;
}

.price-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.price-value {
  font-size: var(--font-size-sm);
}

.price-amount {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

/* Card Description */
.layanan-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-6);
  flex-grow: 1;
}

/* Card Features */
.layanan-card__features {
  list-style: none;
  margin-bottom: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.feature-item svg {
  flex-shrink: 0;
  stroke: var(--card-color);
}

/* Card Footer */
.layanan-card__footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-6);
  margin-top: auto;
}

.layanan-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: linear-gradient(135deg, var(--card-color-light), transparent);
  color: var(--card-color);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-color-light);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: all var(--transition-base);
}

.layanan-card__cta:hover {
  background: var(--card-color);
  color: white;
  border-color: var(--card-color);
  transform: translateX(4px);
}

/* No Services Message */
.no-services-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-12);
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
  color: var(--color-text-light);
}

/* ============================================================================
   ABOUT SECTION
   ============================================================================ */

.layanan-about-section {
  padding: var(--spacing-24) 0;
  background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%);
  border-top: 1px solid var(--color-border);
}

.about-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.about-content {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--spacing-12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border);
}

.about-title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--spacing-8);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.about-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
}

.about-body p {
  margin-bottom: var(--spacing-6);
  text-align: justify;
}

.about-body p:first-child::first-letter {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--color-indigo);
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
}

.about-body h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-4);
  color: var(--color-text);
  padding-bottom: var(--spacing-3);
  border-bottom: 3px solid var(--color-indigo-light);
}

.about-body h3:first-of-type {
  margin-top: var(--spacing-4);
}

.about-body ul,
.about-body ol {
  margin-left: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.about-body li {
  margin-bottom: var(--spacing-2);
}

.about-body strong {
  color: var(--color-indigo);
  font-weight: 600;
}

.about-body em {
  color: var(--color-text);
  font-style: italic;
}

@media (max-width: 768px) {
  .layanan-about-section {
    padding: var(--spacing-16) 0;
  }

  .about-content {
    padding: var(--spacing-8);
  }

  .about-title {
    font-size: var(--font-size-2xl);
  }

  .about-body {
    font-size: var(--font-size-sm);
  }

  .about-body h3 {
    font-size: var(--font-size-lg);
  }

  .about-body p {
    text-align: left;
  }
}

/* ============================================================================
   FAQ SECTION
   ============================================================================ */

.layanan-faq {
  padding: var(--spacing-24) 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 100%);
}

.faq-container {
  margin-top: var(--spacing-16);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
}

@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ Item */
.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

.faq-item:hover {
  border-color: var(--color-indigo);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

/* FAQ Question (Accordion Trigger) */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-6);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--transition-base);
}

.faq-question:hover {
  color: var(--color-indigo);
}

.faq-question[aria-expanded="true"] {
  color: var(--color-indigo);
  background: var(--color-indigo-light);
}

.faq-question__text {
  flex: 1;
  line-height: var(--line-height-tight);
}

.faq-question__icon {
  flex-shrink: 0;
  margin-left: var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-indigo);
  transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"] .faq-question__icon {
  transform: rotate(180deg);
}

/* FAQ Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
  background: transparent;
}

.faq-question[aria-expanded="true"] ~ .faq-answer {
  max-height: 500px;
}

.faq-answer__content {
  padding: 0 var(--spacing-6) var(--spacing-6) var(--spacing-6);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
  animation: slideDown var(--transition-base);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FAQ CTA */
.faq-cta {
  text-align: left;
  padding: var(--spacing-12);
  background: #0b3d2e;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.faq-cta__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #e6f2ec;
  margin: 0;
}

.faq-cta__lead {
  font-size: var(--font-size-base);
  color: rgba(230, 242, 236, 0.8);
  margin: 0;
}

.faq-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-3);
  width: 100%;
  margin: 0;
  padding: 0;
}

.faq-feature {
  background: #0f4a38;
  border: 1px solid #145a45;
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: #e6f2ec;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.faq-cta__action {
  display: flex;
  width: 100%;
}

.faq-cta__action .btn {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .faq-cta {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .faq-cta__action .btn {
    width: 100%;
  }
}

/* ============================================================================
   CTA SECTION
   ============================================================================ */

.layanan-cta-section {
  position: relative;
  padding: var(--spacing-24) 0;
  overflow: hidden;
}

.layanan-cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 0;
}

.cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}

.cta-title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-tight);
}

.cta-subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.9);
}

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

@media (max-width: 1024px) {
  .layanan-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .cta-title {
    font-size: var(--font-size-2xl);
  }
}

@media (max-width: 768px) {
  .layanan-section {
    padding: var(--spacing-16) 0;
  }

  .section-header {
    margin-bottom: var(--spacing-12);
  }

  .layanan-card {
    padding: var(--spacing-6);
  }

  .layanan-card__icon {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .layanan-grid {
    gap: var(--spacing-4);
  }

  .layanan-card {
    padding: var(--spacing-4);
  }

  .section-title {
    font-size: var(--font-size-2xl);
  }

  .layanan-card__title {
    font-size: var(--font-size-base);
  }

  .cta-title {
    font-size: var(--font-size-xl);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f3f4f6;
    --color-text-light: #d1d5db;
    --color-text-lighter: #9ca3af;
    --color-bg: #111827;
    --color-bg-light: #1f2937;
    --color-border: #374151;
  }

  .layanan-card {
    background: var(--color-bg);
    border-color: var(--color-border);
  }

  .section-header {
    background: var(--color-bg-light);
  }
}


/* === archive-posts.css === */
/*
 * Modern Archive (Category/Tag) Styles
 * Fokus: SEO-friendly, fast loading, and mobile responsive
 */

.archive-posts {
    background: #0b1a2b;
    color: #eef4ff;
}

.archive-hero {
    position: relative;
    padding: 70px 20px 50px;
    overflow: hidden;
    background: radial-gradient(1200px 400px at 10% -10%, rgba(98, 211, 255, 0.18), transparent 60%),
                radial-gradient(900px 500px at 90% 0%, rgba(16, 185, 129, 0.18), transparent 60%),
                linear-gradient(135deg, #0b1a2b 0%, #0f2f25 55%, #0a241d 100%);
}

.archive-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
    pointer-events: none;
}

.archive-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.archive-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 18px;
}

.archive-breadcrumb a {
    color: #62d3ff;
    text-decoration: none;
    font-weight: 600;
}

.archive-breadcrumb a:hover {
    text-decoration: underline;
}

.archive-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(28px, 6vw, 46px);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.archive-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    max-width: 720px;
    line-height: 1.7;
}

.archive-badges {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e9f6ff;
    font-size: 12px;
    font-weight: 700;
}

.archive-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.archive-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    margin-bottom: 30px;
}

.archive-featured-media {
    position: relative;
    min-height: 260px;
    background: #0f2238;
}

.archive-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-featured-content {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-featured-title {
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
}

.archive-featured-title a {
    color: #ffffff;
    text-decoration: none;
}

.archive-featured-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.archive-featured-excerpt {
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    font-size: 14px;
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.archive-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25);
}

.archive-card-media {
    position: relative;
    height: 160px;
    background: #0f2238;
}

.archive-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.archive-card-title {
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.archive-card-title a {
    color: #e9f6ff;
    text-decoration: none;
}

.archive-card-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-card-excerpt {
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    line-height: 1.5;
}

.archive-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #e9f6ff;
    text-decoration: none;
    margin: 0 4px;
    border: 1px solid rgba(255,255,255,0.12);
}

.archive-pagination .current {
    background: linear-gradient(135deg, #62d3ff, #10b981);
    color: #0b1a2b;
    font-weight: 800;
}

@media (max-width: 1024px) {
    .archive-featured {
        grid-template-columns: 1fr;
    }

    .archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .archive-hero {
        padding: 50px 16px 40px;
    }

    .archive-main {
        padding: 30px 16px 60px;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .archive-featured-media {
        min-height: 200px;
    }

    .archive-card-media {
        height: 180px;
    }
}


/* === beli-templates.css === */
/* Removed: archived to jazaTH-child/disabled/beli-templates.css on 2026-02-08 */
/* File intentionally emptied to remove templates assets (per user request). */
 























/* === blog-landing.css === */
/* ============================================================================
   Blog Landing - Modern Editorial
   Navy (#0b1f2a) + Coral (#f97316)
   ============================================================================ */

:root {
  --blog-primary: #0b1f2a;
  --blog-secondary: #112835;
  --blog-accent: #f97316;
  --blog-accent-light: #fdba74;
  --blog-text: #e2e8f0;
  --blog-text-muted: #94a3b8;
  --blog-border: rgba(148, 163, 184, 0.18);
  --blog-card: rgba(17, 40, 53, 0.75);
}

.blog-landing {
  background: linear-gradient(180deg, #06141d 0%, var(--blog-primary) 55%, #0f2a37 100%);
  color: var(--blog-text);
  min-height: 100vh;
}

.blog-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-hero {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
  background: radial-gradient(900px 500px at 15% 10%, rgba(249, 115, 22, 0.12), transparent 65%),
              radial-gradient(800px 400px at 85% 0%, rgba(56, 189, 248, 0.12), transparent 60%);
}

.blog-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.25;
}

.blog-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}

.blog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 29, 0.6), rgba(6, 20, 29, 0.9));
  z-index: 0;
}

.blog-shell {
  position: relative;
  z-index: 1;
}

.blog-breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 20px;
  opacity: 0.85;
}

.blog-breadcrumb a {
  color: var(--blog-accent-light);
  text-decoration: none;
  font-weight: 600;
}

.blog-breadcrumb a:hover {
  text-decoration: underline;
}

.blog-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
}

.blog-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.15);
  color: var(--blog-accent-light);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.blog-title {
  font-size: 44px;
  margin: 12px 0;
  line-height: 1.1;
  color: #ffffff;
}

.blog-lead {
  font-size: 16px;
  line-height: 1.7;
  max-width: 600px;
  color: var(--blog-text-muted);
}

.blog-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.blog-meta__item {
  padding: 16px;
  border-radius: 12px;
  background: rgba(17, 40, 53, 0.7);
  border: 1px solid var(--blog-border);
}

.blog-meta__label {
  font-size: 12px;
  color: var(--blog-text-muted);
}

.blog-meta__value {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  color: #ffffff;
}

.blog-search {
  display: flex;
  gap: 10px;
  background: var(--blog-card);
  border: 1px solid var(--blog-border);
  padding: 10px;
  border-radius: 12px;
}

.blog-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 10px 12px;
  font-size: 14px;
}

.blog-search input:focus {
  outline: none;
}

.blog-search button {
  background: var(--blog-accent);
  border: none;
  color: #1f1204;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.blog-hero__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--blog-text-muted);
}

.blog-featured {
  padding: 20px 0 40px;
}

.blog-featured__card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--blog-card);
  border: 1px solid var(--blog-border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.blog-featured__media {
  display: block;
  min-height: 260px;
}

.blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-featured__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  background: rgba(249, 115, 22, 0.12);
}

.blog-featured__content {
  padding: 26px;
}

.blog-section__head {
  text-align: center;
  margin-bottom: 32px;
}

.blog-section__head h2 {
  margin: 0 0 10px;
  font-size: 32px;
  color: #ffffff;
}

.blog-section__head p {
  margin: 0;
  color: var(--blog-text-muted);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.blog-card {
  background: var(--blog-card);
  border: 1px solid var(--blog-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.blog-card__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.blog-card__placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--blog-accent-light);
  background: rgba(249, 115, 22, 0.12);
}

.blog-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.blog-card__meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--blog-text-muted);
}

.blog-card__title {
  margin: 0;
  font-size: 18px;
}

.blog-card__title a {
  color: #ffffff;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--blog-accent-light);
}

.blog-card__excerpt {
  margin: 0;
  color: var(--blog-text-muted);
  font-size: 14px;
  line-height: 1.6;
  flex: 1;
}

.blog-card__cta {
  color: var(--blog-accent-light);
  text-decoration: none;
  font-weight: 600;
}

.blog-card__cta:hover {
  color: var(--blog-accent);
}

.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1.5px solid var(--blog-border);
  background: rgba(17, 40, 53, 0.5);
  color: var(--blog-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.blog-pagination .page-numbers:hover {
  border-color: var(--blog-accent);
  background: rgba(249, 115, 22, 0.1);
  color: var(--blog-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(249, 115, 22, 0.15);
}

.blog-pagination .page-numbers::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blog-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.blog-pagination .page-numbers:hover::before {
  opacity: 0.05;
}

.blog-pagination .current {
  background: linear-gradient(135deg, var(--blog-accent), #fb923c);
  color: #1f1204;
  border-color: var(--blog-accent);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.blog-pagination .current:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(249, 115, 22, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.blog-pagination .prev,
.blog-pagination .next {
  font-weight: 600;
  min-width: 48px;
}

.blog-pagination .prev:hover,
.blog-pagination .next:hover {
  border-color: var(--blog-accent-light);
  color: var(--blog-accent-light);
  background: rgba(253, 186, 116, 0.08);
}

.blog-pagination .dots {
  color: var(--blog-text-muted);
  padding: 0 4px;
  font-weight: 600;
  letter-spacing: 2px;
}

.blog-empty {
  text-align: center;
  padding: 40px;
  border-radius: 16px;
  border: 1px dashed var(--blog-border);
  background: rgba(17, 40, 53, 0.6);
}

@media (max-width: 1024px) {
  .blog-hero__grid {
    grid-template-columns: 1fr;
  }

  .blog-hero__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-featured__card {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .blog-shell {
    padding: 0 16px;
  }

  .blog-title {
    font-size: 32px;
  }

  .blog-hero__meta {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-pagination {
    gap: 6px;
    margin-top: 32px;
  }

  .blog-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
    border-radius: 8px;
  }

  .blog-pagination .prev,
  .blog-pagination .next {
    min-width: 44px;
    font-size: 12px;
  }
}


/* === contact-page.css === */
/**
 * Contact Page Styles
 * Modern contact page with dark blue-green theme
 */

/* Main Container */
.jz-contact-main {
  width: 100%;
  background: #0a0f1a;
}

/* ===== HERO SECTION ===== */
.contact-hero {
  position: relative;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(16, 185, 129, 0.35), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(14, 116, 144, 0.35), transparent 55%),
    linear-gradient(135deg, #0b1a2b 0%, #0f2f25 52%, #0a241d 100%);
  padding: clamp(4rem, 10vw, 6rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 0 0 32px 32px;
  overflow: hidden;
}

.contact-hero::before {
  content: '';
  position: absolute;
  inset: 15% 50% auto -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25), transparent 70%);
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
}

.contact-hero::after {
  content: '';
  position: absolute;
  inset: auto -5% 10% 55%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.03) 50%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(16, 185, 129, 0.05) 2px, rgba(16, 185, 129, 0.05) 4px);
  opacity: 0.3;
  pointer-events: none;
}

.contact-hero__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.contact-hero__content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.contact-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(110, 231, 183, 0.3);
  border-radius: 99px;
  color: #d1fae5;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 1.5rem;
}

.contact-hero__badge svg {
  flex-shrink: 0;
}

.contact-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  color: #ecfdf5;
  margin: 0 0 1.2rem 0;
  letter-spacing: -0.5px;
}

.contact-hero__subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  color: #c6f6e5;
  margin: 0 0 3rem 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.contact-hero__stats {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.contact-stat {
  text-align: center;
}

.contact-stat__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: #6ee7b7;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.contact-stat__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #a7f3d0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ===== MAIN CONTACT SECTION ===== */
.contact-section {
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  background: #0a0f1a;
}

.contact-section__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* ===== CONTACT INFO SIDEBAR ===== */
.contact-info {
  position: sticky;
  top: 2rem;
}

.contact-info__card {
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
}

.contact-info__title {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 0.5rem 0;
}

.contact-info__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact-method {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.15);
  transition: all 0.3s ease;
}

.contact-method:hover {
  background: rgba(15, 118, 110, 0.18);
  border-color: rgba(110, 231, 183, 0.3);
  transform: translateX(4px);
}

.contact-method__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.contact-method__content {
  flex: 1;
  min-width: 0;
}

.contact-method__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.contact-method__value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #e2fdf2;
  font-weight: 600;
  text-decoration: none;
  display: block;
  word-break: break-word;
}

.contact-method__value:hover {
  color: #6ee7b7;
}

/* Support Features */
.support-features {
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  padding: 1.8rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.support-features__title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 1.5rem 0;
}

.support-feature {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.9rem;
  margin-bottom: 0.8rem;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.1);
}

.support-feature:last-child {
  margin-bottom: 0;
}

.support-feature__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.support-feature__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.support-feature__text strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #f0fdfa;
  font-weight: 700;
}

.support-feature__text span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: #b7f5dd;
}

/* ===== CONTACT FORM AREA ===== */
.contact-form-area {
  width: 100%;
}

.contact-form-card {
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
}

.contact-form-header {
  margin-bottom: 2rem;
}

.contact-form-title {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 0.5rem 0;
}

.contact-form-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
}

.contact-form-body {
  width: 100%;
}

/* Fallback Form Styles */
.contact-fallback-form {
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #e2fdf2;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.2);
  border-radius: 10px;
  color: #f0fdfa;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #64748b;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: rgba(15, 118, 110, 0.15);
  border-color: rgba(110, 231, 183, 0.4);
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-submit-btn {
  width: 100%;
  padding: 1.1rem 2rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.contact-submit-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.contact-submit-btn svg {
  flex-shrink: 0;
}

.cf7-notice {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
}

.cf7-notice p {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #93c5fd;
}

/* Contact Form 7 Custom Styles */
.wpcf7-form {
  width: 100%;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  width: 100%;
}

.form-row-half {
  grid-column: span 1;
}

.form-row-full {
  grid-column: span 2;
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #e2fdf2;
  font-weight: 600;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.2);
  border-radius: 10px;
  color: #f0fdfa;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  outline: none;
  box-sizing: border-box;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #64748b;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  background: rgba(15, 118, 110, 0.15);
  border-color: rgba(110, 231, 183, 0.4);
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.1);
}

.wpcf7-form textarea {
  resize: vertical;
  min-height: 140px;
}

.wpcf7-form select,
.form-group select {
  cursor: pointer;
  appearance: none;
  background-color: rgba(15, 118, 110, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236ee7b7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

.wpcf7-form select option,
.form-group select option {
  background: #0f1729;
  color: #f0fdfa;
  padding: 0.5rem;
}

.wpcf7-form input[type="submit"] {
  width: 100%;
  padding: 1.1rem 2rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.wpcf7-form input[type="submit"]:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form input[type="submit"].disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.wpcf7-not-valid-tip {
  color: #fca5a5;
  font-size: 0.8rem;
  margin-top: 0.3rem;
  font-family: 'Space Grotesk', sans-serif;
}

.wpcf7-response-output {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  border: none;
}

.wpcf7-mail-sent-ok {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.wpcf7-spinner {
  margin-left: 1rem;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(110, 231, 183, 0.3);
  border-radius: 50%;
  border-top-color: #6ee7b7;
  animation: wpcf7-spin 0.8s linear infinite;
}

@keyframes wpcf7-spin {
  to { transform: rotate(360deg); }
}

/* Trust Badges */
.trust-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.2);
  border-radius: 10px;
}

.trust-badge__icon {
  font-size: 1.2rem;
  line-height: 1;
}

.trust-badge__text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #b7f5dd;
  font-weight: 600;
}

/* ===== FAQ SECTION ===== */
.contact-faq {
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  background: linear-gradient(180deg, #0a0f1a 0%, #0b1a2b 100%);
}

.contact-faq__container {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-faq__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  color: #ecfdf5;
  text-align: center;
  margin: 0 0 3rem 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.faq-item {
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 16px;
  padding: 1.8rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(110, 231, 183, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.faq-question {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 0.8rem 0;
}

.faq-answer {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.7;
  margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .contact-section__container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact-info {
    position: relative;
    top: 0;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 3rem 1.5rem;
    border-radius: 0 0 20px 20px;
  }

  .contact-hero__stats {
    gap: 2rem;
  }

  .contact-stat__num {
    font-size: 32px;
  }

  .contact-section {
    padding: 2.5rem 1.5rem;
  }

  .contact-info__card,
  .support-features,
  .contact-form-card {
    padding: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .form-row-half,
  .form-row-full {
    grid-column: span 1;
  }

  .contact-faq {
    padding: 2.5rem 1.5rem;
  }

  .faq-item {
    padding: 1.5rem;
  }

  .trust-badges {
    flex-direction: column;
  }

  .trust-badge {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .contact-hero__badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }

  .contact-hero__stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .contact-info__card,
  .contact-form-card {
    padding: 1.2rem;
  }

  .contact-method {
    flex-direction: column;
    text-align: center;
  }

  .contact-method__icon {
    margin: 0 auto;
  }

  .support-feature {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}


/* === contact.css === */
/* Contact section refinements to match design screenshot
   - Left info column, right rounded form card
   - Icon boxes, labels, small text, inputs and CTA button styles
*/
.wrap.contact .contact-grid{display:grid;grid-template-columns:1fr 760px;gap:48px;align-items:start}
.wrap.contact .contact-info{max-width:460px;padding-right:8px}
.contact-item{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.icon-box{width:54px;height:54px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.02)}
.icon-box svg{width:20px;height:20px;color:#62d3ff}
.detail-title{font-weight:800;margin:0 0 6px}
.detail-text{margin:0;color:var(--muted)}
.wrap.contact .contact-form-wrapper{max-width:760px;margin:0;padding:36px;border-radius:28px;background:linear-gradient(180deg, rgba(6,12,24,0.85), rgba(6,12,24,0.78));border:1px solid rgba(255,255,255,0.03);box-shadow:0 30px 60px rgba(2,8,20,0.6);justify-self:end}
.wrap.contact .contact-form-wrapper .form-group{margin-bottom:14px}
.input{width:100%;padding:18px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);box-sizing:border-box}
.input::placeholder{color:rgba(255,255,255,0.28)}
.contact-form-wrapper textarea.input{min-height:140px;resize:vertical;padding-top:18px}

/* Landscape form: two-column grid on desktop */
.wrap.contact .contact-form-wrapper .form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.wrap.contact .contact-form-wrapper .form .form-group{margin-bottom:0}
.wrap.contact .contact-form-wrapper textarea.input{grid-column:1 / -1;min-height:120px}
.wrap.contact .contact-form-wrapper .cta-btn.full-width{grid-column:1 / -1}
.wrap.contact .contact-form-wrapper .form .form-group--full{grid-column:1 / -1}

.cta-btn.full-width{display:block;width:100%;padding:18px 20px;border-radius:36px;border:none;font-weight:800;text-align:center;background:linear-gradient(90deg,#62d3ff,#6ad8ff);color:#021424;box-shadow:0 6px 20px rgba(6,20,36,0.6)}

.wrap.contact{max-width:var(--content-max,1200px);margin:0 auto;padding:60px 24px}

/* Responsive */
@media (max-width:1100px){
  .wrap.contact .contact-grid{grid-template-columns:1fr}
  .wrap.contact .contact-form-wrapper{margin-top:18px}
  section#contact.contact{padding:48px 6vw}


/* === dashboard-floating-widget-responsive.css === */
/* ========================================
   Dashboard Floating Widget Mobile Responsive
   ======================================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    .jz-admin-bar-compact {
        width: 152px !important;
        right: 16px !important;
        padding: 12px !important;
        gap: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .jz-admin-bar-compact__btn {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    .jz-admin-bar-compact__btn svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Small phone (480px and below) */
@media (max-width: 480px) {
    .jz-admin-bar-compact {
        width: 140px !important;
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
        bottom: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 10px !important;
        gap: 8px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .jz-admin-bar-compact__btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        border-width: 1.5px !important;
        border-radius: 12px !important;
    }

    .jz-admin-bar-compact__btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Compact view for very small screens (320px) */
@media (max-width: 360px) {
    .jz-admin-bar-compact {
        width: 130px !important;
        right: 6px !important;
        left: auto !important;
        max-width: calc(100vw - 12px) !important;
        box-sizing: border-box !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    .jz-admin-bar-compact__btn {
        width: 45px !important;
        height: 45px !important;
    }

    .jz-admin-bar-compact__btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}


/* === dashboard-sidebar-widget.css === */
/**
 * Dashboard Sidebar Widget - Admin Notifications
 * Modern floating widget untuk quick actions & notifications
 * Tidak menutupi header, posisi di sidebar kanan
 */

/* ========================================
   CRITICAL: DISABLE OLD WIDGET COMPLETELY
   ======================================== */
.jz-dashboard-widget,
.jz-dashboard-widget *,
.jz-dashboard-widget:hover,
.jz-dashboard-widget.collapsed,
div[class*="jz-dashboard-widget"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ========================================
   Dashboard Quick Actions Widget - DISABLED
   Widget ini sudah diganti dengan .jz-admin-bar-compact
   ======================================== */

.jz-dashboard-widget {
    display: none !important; /* DISABLED - menggunakan .jz-admin-bar-compact */
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 72px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 16px 12px;
     box-shadow: 
        0 12px 40px rgba(102, 126, 234, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jz-dashboard-widget:hover {
    width: 280px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 16px 50px rgba(102, 126, 234, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.2);
}

.jz-dashboard-widget__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jz-dashboard-widget:hover .jz-dashboard-widget__header {
    opacity: 1;
}

.jz-dashboard-widget__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    transition: all 0.3s ease;
}

.jz-dashboard-widget:hover .jz-dashboard-widget__icon {
    transform: rotate(180deg) scale(1.1);
}

.jz-dashboard-widget__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}

.jz-dashboard-widget__subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Quick Action Buttons */
.jz-dashboard-widget__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jz-widget-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.jz-widget-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.jz-widget-btn:hover::before {
    left: 100%;
}

.jz-widget-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-4px);
    box-shadow: 
        -4px 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.jz-widget-btn svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.jz-widget-btn__text {
    flex: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jz-dashboard-widget:hover .jz-widget-btn__text {
    opacity: 1;
}

/* Badge Notifications */
.jz-widget-btn__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    background: #ff3e3e;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 2px 8px rgba(255, 62, 62, 0.5);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* Close Button */
.jz-dashboard-widget__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.jz-dashboard-widget:hover .jz-dashboard-widget__close {
    opacity: 1;
}

.jz-dashboard-widget__close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

/* Collapsed State */
.jz-dashboard-widget.collapsed {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jz-dashboard-widget.collapsed .jz-dashboard-widget__actions,
.jz-dashboard-widget.collapsed .jz-dashboard-widget__header {
    display: none;
}

.jz-dashboard-widget.collapsed::after {
    content: '⚡';
    font-size: 28px;
}

/* Responsive */
@media (max-width: 768px) {
    .jz-dashboard-widget {
        right: 16px;
        width: 56px;
    }
    
    .jz-dashboard-widget:hover {
        width: 240px;
    }
    
    .jz-dashboard-widget__close {
        opacity: 1;
    }
}

/* ========================================
    Modern Dashboard Quick Actions - Grid Style
    Posisi: Floating bottom-right (tidak menutupi header)
    ======================================== */

.jz-admin-bar-compact {
    position: fixed !important;
    top: 50% !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
    width: 160px !important;
    height: auto !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(168, 85, 247, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 14px !important;
    box-shadow: 
        0 20px 60px rgba(99, 102, 241, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    place-content: center !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.jz-admin-bar-compact::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
    border-radius: 24px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.jz-admin-bar-compact:hover::before {
    opacity: 1;
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Grid Items - Individual Buttons */
.jz-admin-bar-compact__btn {
    width: 60px !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px;
    color: #fff;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    gap: 0 !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: visible !important;
    text-decoration: none;
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.jz-admin-bar-compact__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jz-admin-bar-compact__btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.jz-admin-bar-compact__btn:hover::before {
    opacity: 1;
}

.jz-admin-bar-compact__btn:active {
    transform: translateY(-2px) scale(1.02);
}

.jz-admin-bar-compact__btn svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
    flex-shrink: 0 !important;
    justify-self: center !important;
}

.jz-admin-bar-compact__btn:hover svg {
    transform: scale(1.15) rotate(-5deg);
}

/* Icon Labels */
.jz-admin-bar-compact__btn::after {
    content: attr(data-tooltip);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Separator - Hidden in grid */
.jz-admin-bar-compact__sep {
    display: none;
}

/* Hover Tooltip - Larger description */
.jz-admin-bar-compact__btn[data-desc]::before {
    content: attr(data-desc);
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    background: rgba(17, 24, 39, 0.98);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(4px);
    z-index: 100;
}

.jz-admin-bar-compact__btn:hover[data-desc]::before {
    opacity: 1;
    transform: translateY(0);
}

/* Active State */
.jz-admin-bar-compact__btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 0 0 3px rgba(255, 255, 255, 0.2),
        inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .jz-admin-bar-compact {
        top: 50% !important;
        right: 16px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        padding: 16px;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .jz-admin-bar-compact__btn {
        width: 60px;
        height: 60px;
    }
    
    .jz-admin-bar-compact__btn svg {
        width: 24px;
        height: 24px;
    }
    
    .jz-admin-bar-compact__btn::after {
        font-size: 9px;
    }
}

/* Collapsed/Minimized State */
.jz-admin-bar-compact.minimized {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    grid-template-columns: 1fr;
    gap: 0;
    cursor: pointer;
}

.jz-admin-bar-compact.minimized .jz-admin-bar-compact__btn {
    display: none;
}

.jz-admin-bar-compact.minimized::after {
    content: '⚡';
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Entrance Animation */
@keyframes slide-in-bounce {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateX(-10px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.jz-admin-bar-compact {
    animation: slide-in-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}


/* === dashboard.css === */
/* ========================================
   WordPress Admin Bar Fix
   ======================================== */

/* Hide WordPress admin bar untuk subscriber/customer */
body.logged-in.page-template-page-dashboard #wpadminbar {
    display: none !important;
}

/* Reset top margin jika admin bar dihide */
body.logged-in.page-template-page-dashboard {
    margin-top: 0 !important;
}

body.admin-bar.page-template-page-dashboard .jz-dashboard-page {
    margin-top: 0 !important;
}

/* Alternative: Reposition admin bar ke bottom untuk admin/editor */
body.admin-bar.user-role-administrator #wpadminbar,
body.admin-bar.user-role-editor #wpadminbar {
    position: fixed;
    top: auto;
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(31, 41, 55, 0.98) 100%);
    backdrop-filter: blur(20px);
}

body.admin-bar.user-role-administrator .jz-dashboard-page,
body.admin-bar.user-role-editor .jz-dashboard-page {
    margin-top: 0 !important;
    padding-bottom: 32px;
}

/* ========================================
   Dashboard Layout
   ======================================== */

.jz-dashboard-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    position: relative;
}

.dashboard-hero {
    position: relative;
    padding: 60px 20px 40px; /* Extra top padding untuk breathing room */
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 107, 53, 0.1);
    margin-top: 0; /* Reset margin */
}

.dashboard-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 152, 0, 0.04) 100%);
}

.dashboard-hero__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.1), transparent 50%);
}

.dashboard-hero__content {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.dashboard-hero__content h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.dashboard-hero__content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.dashboard-content {
    flex: 1;
    padding: 20px;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ========================================
   Dashboard Sidebar Navigation
   ======================================== */

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    position: sticky;
    top: 20px;
}

.dashboard-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 13px;
    border: 1px solid transparent;
}

.dashboard-nav__item:hover {
    background: rgba(255, 107, 53, 0.15);
    color: #fff;
    border-color: rgba(255, 107, 53, 0.3);
}

.dashboard-nav__item.is-active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.25), rgba(255, 152, 0, 0.15));
    color: #fff;
    border: 1px solid rgba(255, 107, 53, 0.4);
}

.dashboard-nav__item .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.5;
}

.dashboard-nav__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

.dashboard-nav__item--logout {
    color: rgba(255, 107, 107, 0.7);
}

.dashboard-nav__item--logout:hover {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
}

/* ========================================
   Dashboard Main Content
   ======================================== */

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard-tab {
    display: none;
    opacity: 0;
}

.dashboard-tab.is-active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) padding-box,
                linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 152, 0, 0.08)) border-box;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.dashboard-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.dashboard-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.dashboard-card p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 14px;
}

/* ========================================
   Dashboard Stats
   ======================================== */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 107, 53, 0.08);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 10px;
    padding: 16px;
}

.stat-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.stat-content h3 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8);
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #FF6B35;
}

/* ========================================
   Forms
   ======================================== */

.profile-form,
.change-password-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

.form-group input,
.form-group textarea {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 107, 53, 0.6);
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.15);
}

.form-message {
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    display: none;
    border: 1px solid transparent;
}

.form-message.error {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff8787;
}

.form-message.success {
    background: rgba(81, 207, 102, 0.15);
    border-color: rgba(81, 207, 102, 0.4);
    color: #69db7c;
}

.form-message.loading {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.4);
    color: #ffa500;
}

.form-message {
    display: block;
}

.form-actions {
    display: flex;
    gap: 10px;
}

/* ========================================
   Settings
   ======================================== */

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.setting-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.setting-info h3 {
    font-size: 14px;
    margin-bottom: 3px;
}

.setting-info p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   Security
   ======================================== */

.security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 16px;
}

.security-info h3 {
    font-size: 14px;
    margin-bottom: 3px;
}

.security-info p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.security-item hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 16px 0;
}

/* ========================================
   Toggle Switch
   ======================================== */

.toggle-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.toggle-switch input {
    display: none;
}

.toggle {
    width: 48px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    position: relative;
    transition: all 0.3s ease;
}

.toggle::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle {
    background: linear-gradient(135deg, #FF6B35, #FFA500);
    border-color: #FF6B35;
}

.toggle-switch input:checked + .toggle::before {
    left: 24px;
}

/* ========================================
   Orders List
   ======================================== */

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.order-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.order-info p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 3px;
}

.order-info p strong {
    color: #fff;
}

.order-status {
    display: inline-block;
    padding: 6px 10px;
    background: rgba(255, 107, 53, 0.2);
    border: 1px solid rgba(255, 107, 53, 0.4);
    color: #FF6B35;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 30px 20px;
    font-size: 14px;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.25);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ========================================
   Mobile Responsive (768px and below)
   ======================================== */

@media (max-width: 768px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dashboard-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 8px;
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
    }

    .dashboard-nav__item {
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        font-size: 11px;
        justify-content: center;
        text-align: center;
    }

    .dashboard-nav__item span {
        line-height: 1.2;
    }

    .dashboard-nav__item.is-active {
        border: 1px solid rgba(255, 107, 53, 0.5);
    }

    .dashboard-card {
        padding: 16px;
    }

    .dashboard-card h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .dashboard-hero__content h1 {
        font-size: 22px;
    }

    .dashboard-hero {
        padding: 30px 16px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        gap: 10px;
        padding: 12px;
    }

    .stat-icon {
        font-size: 24px;
    }

    .stat-content h3 {
        font-size: 11px;
    }

    .stat-value {
        font-size: 18px;
    }

    .setting-item,
    .security-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .form-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn {
        width: 100%;
        padding: 10px 16px;
    }

    .order-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dashboard-nav__divider {
        display: none;
    }
}

/* ========================================
   Mobile Responsive (480px and below)
   ======================================== */

@media (max-width: 480px) {
    .dashboard-content {
        padding: 12px;
    }

    .dashboard-layout {
        gap: 12px;
    }

    .dashboard-hero {
        padding: 20px 12px;
    }

    .dashboard-hero__content h1 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .dashboard-hero__content p {
        font-size: 12px;
    }

    .dashboard-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
        padding: 6px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .dashboard-nav__item {
        padding: 6px 4px;
        font-size: 10px;
    }

    .dashboard-card {
        padding: 12px;
        border-radius: 10px;
    }

    .dashboard-card h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .dashboard-card h3 {
        font-size: 14px;
    }

    .profile-form,
    .change-password-form {
        gap: 12px;
    }

    .form-group label {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .form-group input,
    .form-group textarea {
        padding: 8px 10px;
        font-size: 13px;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stat-card {
        padding: 10px;
        gap: 8px;
    }

    .stat-icon {
        font-size: 20px;
    }

    .stat-value {
        font-size: 16px;
    }

    .setting-item,
    .security-item {
        padding: 12px;
    }

    .btn {
        padding: 10px 14px;
        font-size: 13px;
    }

    .form-actions {
        gap: 6px;
    }
}

/* ========================================
   Dashboard Sidebar Navigation
   ======================================== */

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
}


/* ========================================
   Main Content
   ======================================== */

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard-tab {
    display: none;
    opacity: 0;
}

.dashboard-tab.is-active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === faq-page.css === */
/* Page-only FAQ styles (simple, accessible) */
.page-faq{margin:20px 0;padding:20px;border-radius:12px;background:var(--card-bg,#fff);border:1px solid rgba(2,6,23,0.04)}
/* Force visible white text for FAQ title — overrides parent theme's
   `.section-title { -webkit-background-clip: text; color: transparent }` rule. */
.page-faq .section-header{display:flex;justify-content:center;align-items:center}
.page-faq .section-title{display:inline-block;padding:6px 14px;border-radius:999px;background:linear-gradient(90deg,#06b6d4 0%,#60a5fa 60%);color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;font-weight:800;box-shadow:0 8px 24px rgba(2,6,23,0.18);text-shadow:0 2px 6px rgba(2,6,23,0.35);border:1px solid rgba(255,255,255,0.06);-webkit-background-clip:padding-box !important;background-clip:padding-box !important;position:relative;z-index:1;-webkit-font-smoothing:antialiased;transform:translateY(4px);margin-top:4px;margin-bottom:8px;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
@media (max-width:720px){
  .page-faq .section-title{transform:translateY(3px);margin-top:3px;margin-bottom:6px}
}
.page-faq .faq-content{max-width:980px;margin:12px auto;color:var(--muted,#6b7280)}
.page-faq details.faq-item{margin-bottom:12px;border-radius:10px;padding:0}
.page-faq summary{cursor:pointer;padding:12px 14px;font-weight:700;display:block;border-radius:8px;background:transparent;border:1px solid rgba(2,6,23,0.03)}

/* homepage FAQ uses .faq rather than .page-faq; ensure opened items show overflow */
#faq .faq-item, .page-faq .faq-item{overflow:hidden;}
#faq .faq-item.opened, .page-faq .faq-item.opened{overflow:visible;}
#faq .faq-item .faq-body, #faq [itemprop="acceptedAnswer"], #faq [itemprop="text"] { max-height: none !important; }

.page-faq summary:focus{outline:2px solid rgba(59,130,246,0.12);outline-offset:3px}
.page-faq .faq-body{padding:12px 14px;border-left:3px solid rgba(2,6,23,0.02);background:transparent;color:var(--text,#0b1220);}
.page-faq details[open] summary{background:rgba(6,182,212,0.03)}
@media (max-width:720px){ .page-faq .faq-content{padding:0 8px} }

/* mobile: dark blue/green gradient background for FAQ */
@media (max-width:600px){
  .page-faq, #faq { background: linear-gradient(135deg, #0a0f1c 0%, #0a1c1f 40%, #10302a 100%); }
  .page-faq .faq-body, #faq .faq-body, #faq [itemprop="text"] { color: #e0e7ff; }
}

/* === hero.css === */
/* Full-bleed hero & USP styles (child theme)
  - Designed to match front-page hero and single post hero
  - Responsive, mobile-first, accessible
*/
:root{--page-gutter:20px;--content-max:1320px;--hero-vertical:48px}

/* Make the hero section full-bleed */
.hero--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:32px 0 8px;background:linear-gradient(180deg,#081427 0%, #071026 60%);color:#eaf0ff}
.hero--full-bleed .wrap.hero-grid{max-width:var(--content-max);display:grid;grid-template-columns:minmax(620px,1fr) minmax(420px,560px);gap:36px;align-items:center;padding:0 calc(var(--page-gutter) * 2);margin:0 auto}

/* Offset control: move the hero slightly right on larger viewports so left card
   is not visually cramped. Adjust values per breakpoint for better balance. */
@media (min-width:1000px){
  .hero--full-bleed .wrap.hero-grid{padding-left:calc(var(--page-gutter) * 2 + 48px)}
  /* bump vertical padding beneath header on desktop */
  .hero--full-bleed { padding-top: calc(var(--hero-vertical) + 32px); }
}
@media (min-width:1300px){
  .hero--full-bleed .wrap.hero-grid{padding-left:calc(var(--page-gutter) * 2 + 88px)}
}
@media (min-width:1600px){
  .hero--full-bleed .wrap.hero-grid{padding-left:calc(var(--page-gutter) * 2 + 140px)}
}

/* Left content card */
.hero-left .hero-card-inner{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:18px;padding:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 20px 50px rgba(3,10,20,0.6);border:1px solid rgba(255,255,255,0.03)}
.hero-left .template-badges{margin-bottom:16px}
.template-badge{display:inline-block;background:transparent;border:1px solid rgba(255,255,255,0.05);padding:6px 10px;border-radius:999px;margin-right:8px;color:#bfe9ff;font-weight:700;font-size:.9rem}

/* Right image card */
.hero-right .hero-image-wrap{border-radius:18px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 20px 50px rgba(3,10,20,0.6);border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center}
.hero-right img.wp-image{width:100%;height:auto;border-radius:12px;display:block;object-fit:cover}
.hero-image-fallback{width:100%;height:360px;border-radius:12px;background:linear-gradient(180deg,#061227,#021021)}

/* Spacer preserves document flow on tall hero */
.hero-spacer{display:none;height:0;min-height:0}

/* Responsive: stack on smaller screens */
@media (max-width: 1000px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:1fr;gap:18px;padding:0 18px}
  .hero-left .hero-card-inner{padding:28px;border-radius:14px}
  .hero-right .hero-image-wrap{padding:16px}
  .hero-title{font-size:2rem}
  .hero-excerpt{font-size:1rem}
  .hero-spacer{display:none}
}

/* Small screens: tighten spacing */
@media (max-width: 640px){
  .hero-title{font-size:1.6rem}
  .cta-primary{padding:12px 20px}
}

/* Modern sidebar styles */
.col-aside{display:block}
.col-aside .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 12px 30px rgba(3,8,12,0.5);margin-bottom:18px}
.col-aside .card img{width:100%;height:auto;border-radius:10px;display:block;margin-bottom:12px}
.col-aside .card .price{font-weight:800;color:#b8f0ff;font-size:1.1rem;margin-bottom:8px}
.col-aside .card .includes{color:rgba(234,240,255,0.85);font-size:.95rem}
.col-aside .card .meta-actions{display:flex;gap:8px;margin-top:12px}
.col-aside .card .meta-actions .btn{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.02);color:#eaf6ff;text-decoration:none}
.col-aside .related-terms{background:transparent;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.col-aside .related-terms h4{margin:0 0 8px;color:#cbefff}
.col-aside .latest-posts{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.col-aside .latest-posts h4{margin:0 0 12px;color:#cfefff}
.latest-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.latest-list li{display:flex;gap:12px;align-items:center}
.latest-list img{width:64px;height:48px;object-fit:cover;border-radius:8px;flex:0 0 64px}
.latest-list a{color:#e6f7ff;text-decoration:none;font-weight:700}
.latest-list a:hover{text-decoration:underline}

.latest-meta{display:flex;flex-direction:column}
.latest-meta strong{display:block;color:#e6f7ff;font-weight:800;margin-bottom:6px}
.latest-excerpt{font-size:.95rem;color:rgba(234,240,255,0.78);margin:0}
.latest-excerpt{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Placeholder thumb when no image available */
.latest-thumb-placeholder{width:64px;height:48px;border-radius:8px;background:linear-gradient(135deg,#0e2940,#06202b);display:flex;align-items:center;justify-content:center;flex:0 0 64px}
.latest-thumb-placeholder .thumb-initial{color:#bfe9ff;font-weight:800;font-size:1rem}

/* Sticky sidebar on wide viewports */
@media (min-width:1000px){
  .two-col{align-items:start}
  .col-aside{position:sticky;top:96px}
}

/* Article layout: main content left, sidebar right */
.two-col{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;max-width:var(--content-max);padding:0 calc(var(--page-gutter) * 2);margin:0 auto}
.two-col .col-main{order:1}
.two-col .col-aside{order:2}

@media (max-width: 1000px){
  .two-col{grid-template-columns:1fr;gap:24px;padding:0 18px}
  .two-col .col-main{order:1}
  .two-col .col-aside{order:2}
}
/* Full-bleed hero & USP styles (child theme)
   - Designed to match front-page hero and single post hero
   - Responsive, mobile-first, accessible
*/
:root{--page-gutter:20px;--content-max:1200px;--hero-vertical:48px}

/* Make the hero section full-bleed */
.hero--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:calc(var(--hero-vertical)) 0;background:linear-gradient(180deg,rgba(11,18,32,.98),#080c18);color:var(--text, #eaf0ff)}
.hero--full-bleed .wrap.hero-grid{max-width:var(--content-max);display:grid;grid-template-columns:minmax(560px,1fr) minmax(320px,560px);gap:36px;align-items:center;padding:0 calc(var(--page-gutter) * 2);margin:0 auto}

/* Hero left content */
.hero--full-bleed .hero-card{background:transparent;border:none;padding:0}
.hero--full-bleed .hero-kicker{font-weight:700;color:#62d3ff;margin-bottom:8px;font-size:.95rem}
.hero--full-bleed .hero-title{font-size:2.25rem;margin:0 0 12px;color:#ffffff;font-weight:900;line-height:1.05;max-width:none}
.hero--full-bleed .hero-excerpt{color:rgba(234,240,255,.9);margin-bottom:18px;line-height:1.6;max-width:110ch}
.hero--full-bleed .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero--full-bleed .cta-btn{background:linear-gradient(90deg,#62d3ff,#00bfff);color:#021424;padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none}

/* make left column breathe more for title/description */
.hero--full-bleed .wrap.hero-grid > .hero-card:first-child{padding-left:64px}

/* Hero image column */
.hero--full-bleed .hero-card + .hero-card{display:flex;justify-content:center}
.hero--full-bleed img.wp-image{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);display:block}

/* Spacer used to reserve hero height when image is anchored to viewport */
.hero-spacer{display:none}

@media (min-width: 1200px){
  /* anchor the hero image to the right edge of the viewport (keeps it visually close to edge)
     while the spacer preserves layout below the hero */
  .hero--full-bleed .wrap.hero-grid{position:relative}
  .hero--full-bleed .hero-card:last-child{position:absolute;right:calc((100vw - var(--content-max))/2 + 36px);top:50%;transform:translateY(-50%);width:480px;max-width:44%;display:block}
  .hero-spacer{display:block;height:clamp(520px,58vh,880px)}
}

/* USP (section under hero) full-bleed */
.usp--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:28px 0;background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.005));color:var(--text)}
.usp--full-bleed .wrap{max-width:var(--content-max);padding:0 var(--page-gutter);margin:0 auto}
.usp--full-bleed .card{background:transparent;padding:10px;border-radius:10px}

/* Responsive tweaks */
@media (max-width: 900px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:1fr;gap:14px;padding:0 12px}
  .hero--full-bleed .hero-card + .hero-card{order:-1}
  /* Reduce heading size slightly on narrow screens to avoid heavy wrapping */
  .hero--full-bleed .hero-title{font-size:1.75rem}
  /* Allow description to use full width and reduce left padding */
  .hero--full-bleed .wrap.hero-grid > .hero-card:first-child{padding-left:12px}
  .hero--full-bleed .hero-excerpt{max-width:none}
  .hero--full-bleed{padding:18px 0}
}

/* Mid-range breakpoint: give left column more room before the image anchors */
@media (min-width:1000px) and (max-width:1199px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:minmax(620px,1fr) minmax(360px,560px)}
  .hero--full-bleed .hero-title{font-size:2rem}
}

/* Small helpers */
.hero--full-bleed .lead, .hero--full-bleed .hero-excerpt{font-size:1rem}

/* spacer element to reserve space when hero image is anchored */
.hero-spacer{display:none}
@media (min-width:1100px){
  .hero-spacer{display:block;height:clamp(520px,58vh,880px)}
}

/* Defensive override: if absolute positioning causes overlap, keep image in-flow
   and add padding to the hero so following content is pushed down. */
@media (min-width:1100px){
  .hero--full-bleed .wrap.hero-grid > .hero-card:last-child{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    transform:translateX(min(40vw,360px)) !important;
    width:auto !important;
    margin:0 !important;
    padding-right:0 !important;
    z-index:2 !important;
    justify-self:end !important;
  }
  .template-hero{min-height:unset !important; padding-bottom:0.5rem !important}
  .hero-spacer{display:none !important}
}


/* === home-hero.css === */
/* Home hero isolated overrides
	 Scope: home/front-page only (enqueued conditionally from functions.php)
	 Purpose: keep home hero frame/content tuning separate from global overrides.
*/

@media (min-width:901px){
	/* Home desktop: frame/background layer only */
	body.home .hero {
		margin-top: 0 !important;
		position: relative;
		isolation: isolate;
		background: transparent !important;
	}

	body.home .hero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -160px;
		bottom: 0;
		background: radial-gradient(1200px 340px at 50% 0%, rgba(76,201,240,.16), transparent 60%), linear-gradient(180deg,#0b1020 0%, #121735 100%);
		z-index: -1;
		pointer-events: none;
	}

	/* Home desktop: nudge content up only slightly; previous value still
	   left it too high so reduce the negative offset further. */
	body.home .hero .wrap.hero-grid {
		transform: translateY(-10px); /* less upward shift to drop content down */
	}
}

@media (min-width:721px) and (max-width:900px) {
	body.home .hero {
		margin-top: 0 !important;
		padding-top: clamp(52px, 9vw, 84px) !important;
		padding-bottom: clamp(16px, 3vw, 28px) !important;
	}
}

@media (max-width:900px){
	/* Home baseline mobile hero spacing (copied from overrides, isolated here) */
	body.home .hero {
		padding: 0 0 !important;
		margin-top: 0 !important;
	}

	/* Home mobile: frame extends upward while preserving current visual spacing;
	   increase lift so content starts closer to top of viewport */
	body.home .hero {
		margin-top: -160px !important; /* extra negative to pull frame upward */
		padding-top: 140px !important; /* reduce top padding accordingly */
		padding-bottom: 0 !important;
	}

	/* Home mobile: full-bleed hero shell */
	body.home .hero {
		position: relative !important;
		left: 50% !important;
		right: 50% !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		width: 100vw !important;
		border-radius: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	body.home .hero .wrap.hero-grid {
		max-width: none !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		transform: translateY(48px) !important; /* push content even further down */
	}

	/* Home mobile: left align content */
	body.home .hero .hero-card,
	body.home .hero .hero-card .title,
	body.home .hero .hero-card .lead {
		text-align: left !important;
	}

	/* Home mobile: inner hero card edge-to-edge */
	body.home .hero .wrap.hero-grid {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: none !important;
	}

	body.home .hero .hero-card {
		width: 100% !important;
		margin: 0 !important;
		border-radius: 16px !important;
		box-shadow: 0 10px 30px rgba(2,6,23,0.45) !important;
		background-clip: padding-box !important;
		overflow: hidden !important;
		border-left: none !important;
		border-right: none !important;
	}

	body.home .hero .hero-card > div[style] {
		border-radius: 16px !important;
	}

	body.home .hero .hero-card .title,
	body.home .hero .hero-card .lead,
	body.home .hero .hero-card .hero-ctas {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Home mobile: pills */
	body.home .hero .grid {
		gap: 8px !important;
	}

	body.home .hero .grid .pill,
	body.home .hero .hero-card .pill {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 6px 8px !important;
		font-size: 10px !important;
		font-weight: 800 !important;
		border-radius: 10px !important;
		background: rgba(255,255,255,0.02) !important;
		border: 1px solid rgba(255,255,255,0.06) !important;
		color: #eaf6ff !important;
		line-height: 1 !important;
		min-height: 32px !important;
		box-sizing: border-box !important;
		text-align: center !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		letter-spacing: 0.01em !important;
		text-transform: none !important;
	}

	/* Keep 3 equal-width pills on small screens */
	@media (max-width:900px) {
		body.home .hero .grid {
			display: grid !important;
			grid-template-columns: repeat(3, 1fr) !important;
			gap: 8px !important;
		}

		body.home .hero .grid .pill,
		body.home .hero .hero-card .pill {
			width: 100% !important;
			padding: 6px 6px !important;
			font-size: 10px !important;
		}
	}

	@media (max-width:420px) {
		body.home .hero .grid .pill,
		body.home .hero .hero-card .pill {
			padding: 4px 6px !important;
			font-size: 9px !important;
			min-height: 28px !important;
		}
	}
}


/* === jasa-audit.css === */
/* Styles for Jasa Audit Website template */
/* Styles for Jasa Audit Website template (enhanced) */
.service-jasa-audit .hero{padding:36px;background:linear-gradient(180deg,#081226,#061426);color:#fff;border-radius:12px;margin-bottom:18px;box-shadow:var(--wp--preset--shadow--deep)}
.service-jasa-audit .hero-inner{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:center}
.service-jasa-audit .hero-title{font-size:2.25rem;margin:0 0 8px;color:#fff}
.service-jasa-audit .hero-sub{color:rgba(255,255,255,.85);margin-bottom:12px}
.service-jasa-audit .hero-ctas .btn{margin-right:8px}
.service-jasa-audit .hero-aside{display:block}
.service-jasa-audit .sticky-quick{position:sticky;top:24px}
.service-jasa-audit .deliverables-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-jasa-audit .deliverable-item{padding:18px;border-radius:10px;background:var(--card);border:1px solid rgba(255,255,255,.02)}
.service-jasa-audit .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-jasa-audit .feature-item{padding:12px;border-radius:8px;background:var(--card)}
.process-list{list-style:none;padding:0;margin:0}
.process-list li{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.02)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.price-card{padding:18px;border-radius:8px;background:var(--card);}
.price-card.recommended{border:2px solid #25a3ff}
.cases-grid,.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.faq-list .faq-item{margin-bottom:8px}
@media (max-width:900px){.service-jasa-audit .hero-inner{grid-template-columns:1fr}.service-jasa-audit .deliverables-grid,.service-jasa-audit .features-grid,.service-jasa-audit .cases-grid,.service-jasa-audit .testimonials-grid{grid-template-columns:1fr}.service-jasa-audit .hero-aside{display:none}}


/* === jasa-domain.css === */
/* Child override: Jasa Domain styles (copied from parent and safe to edit) */
/* synced-test: 2026-02-01  */
.service-jasa-domain .hero{padding:36px;background:linear-gradient(180deg,#0b1220, #061426);color:#fff;border-radius:12px;margin-bottom:18px}
.service-jasa-domain .hero-inner{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:center}
.service-jasa-domain .hero-title{font-size:2rem;margin:0 0 8px;color:#fff !important}
.service-jasa-domain .hero-sub{color:rgba(255,255,255,.85);margin-bottom:12px}
.service-jasa-domain .hero-ctas .btn{margin-right:8px}
.service-jasa-domain .hero-media{height:220px;background-size:cover;background-position:center;border-radius:8px}

/* Modern hero additions */
.service-jasa-domain .hero-modern{padding:36px;border-radius:12px;background:linear-gradient(180deg, #081229 0%, #071827 100%);color:#fff;overflow:hidden}
.service-jasa-domain .hero-badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--brand));color:#04202b;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem;margin-bottom:10px}
.service-jasa-domain .hero-lead{color:rgba(255,255,255,.88);margin:8px 0 16px;font-size:1.05rem}
.service-jasa-domain .hero-stats{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.service-jasa-domain .hero-stat{background:rgba(255,255,255,.03);padding:10px 12px;border-radius:10px;min-width:110px}
.service-jasa-domain .hero-stat strong{display:block;font-size:1.05rem;color:#fff}
.service-jasa-domain .hero-media{position:relative;overflow:visible;border-radius:12px;min-height:320px;align-self:stretch}
.service-jasa-domain .hero-media-bg{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:12px;filter:brightness(.86);transform:scale(1.02);}
.service-jasa-domain .hero-visual{position:absolute;right:28px;top:50%;transform:translateY(-50%) translateY(20px);width:440px;max-width:46%;box-shadow:0 26px 48px rgba(3,18,27,.56);border-radius:16px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));transition:transform .6s cubic-bezier(.16,.84,.24,1),opacity .6s ease;opacity:0}
.service-jasa-domain .hero-visual img{display:block;width:100%;height:auto;transform:translateZ(0);transition:transform .25s linear}
.service-jasa-domain .hero-animate.inview .hero-visual{transform:translateY(-50%) translateY(0);opacity:1}
@media (max-width:900px){.service-jasa-domain .hero-visual{position:relative;display:block;width:100%;max-width:100%;right:auto;top:auto;transform:none;margin-top:14px}}
.service-jasa-domain .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,26,40,0.12), rgba(2,8,18,0.40));pointer-events:none}
.service-jasa-domain .hero-animate{transform:translateY(8px);opacity:0;transition:transform .6s cubic-bezier(.16,.84,.24,1),opacity .6s ease}
.service-jasa-domain .hero-animate.inview{transform:none;opacity:1}

.service-jasa-domain .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-jasa-domain .feature-item{padding:12px;border-radius:8px;background:var(--card);}
.service-jasa-domain .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.price-card{padding:18px;border-radius:8px;background:var(--card);}
.faq-list .faq-item{margin-bottom:8px}
@media (max-width:900px){.service-jasa-domain .hero-inner{grid-template-columns:1fr;}.service-jasa-domain .features-grid{grid-template-columns:1fr}.service-jasa-domain .pricing-grid{grid-template-columns:1fr}}

/* === layanan-jasa-cloud-hosting.css === */
/* ============================================================================
   Jasa Cloud Hosting - Modern Tech Design
   Purple (#8b5cf6) + Cyan (#06b6d4) + Slate (#1e293b)
   ============================================================================ */

:root {
  --ch-primary: #8b5cf6;
  --ch-primary-light: #a78bfa;
  --ch-primary-dark: #7c3aed;
  --ch-accent: #06b6d4;
  --ch-accent-light: #22d3ee;
  --ch-accent-dark: #0891b2;
  --ch-dark: #0f172a;
  --ch-darker: #020617;
  --ch-slate: #1e293b;
  --ch-text-light: #cbd5e1;
  --ch-text-lighter: #e2e8f0;
  --ch-border: rgba(148, 163, 184, 0.1);
  --ch-border-light: rgba(148, 163, 184, 0.15);
}

.ch-single {
  background: linear-gradient(135deg, var(--ch-dark) 0%, var(--ch-slate) 100%);
  color: var(--ch-text-light);
  overflow: hidden;
}

/* UTILITY CLASSES */
.ch-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  gap: 8px;
}

.ch-btn--primary {
  background: linear-gradient(135deg, var(--ch-primary) 0%, var(--ch-accent) 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.ch-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
}

.ch-btn--ghost {
  background: transparent;
  color: var(--ch-accent);
  border: 2px solid var(--ch-accent);
}

.ch-btn--ghost:hover {
  background: rgba(6, 182, 212, 0.1);
}

.ch-btn--large {
  padding: 16px 40px;
  font-size: 16px;
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */

.ch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1001;
  pointer-events: auto !important;
}

.ch-breadcrumb a {
  color: var(--ch-accent-light);
  text-decoration: none;
  transition: color 0.2s;
  pointer-events: auto !important;
  cursor: pointer;
}

.ch-breadcrumb a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
}

.ch-breadcrumb span {
  color: var(--ch-text-light);
  opacity: 0.5;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.ch-hero {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  margin-top: -100px;
}

.ch-hero .ch-shell {
  position: relative;
  z-index: 1000;
  pointer-events: auto;
}

.ch-hero .ch-breadcrumb,
.ch-hero .ch-breadcrumb * {
  pointer-events: auto !important;
}

.ch-hero__bg {
  position: absolute;
  top: -140px;
  left: 0;
  width: 100%;
  height: calc(100% + 140px);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.ch-hero__bg,
.ch-hero__bg * {
  pointer-events: none !important;
}

.ch-hero__shapes {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ch-shape {
  position: absolute;
  opacity: 0.08;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ch-primary), var(--ch-accent));
}

.ch-shape--1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -50px;
}

.ch-shape--2 {
  width: 300px;
  height: 300px;
  bottom: 100px;
  left: 10%;
  background: radial-gradient(circle at 30% 30%, var(--ch-accent), var(--ch-primary));
}

.ch-shape--3 {
  width: 250px;
  height: 250px;
  top: 50%;
  right: 5%;
  background: radial-gradient(circle at 30% 30%, var(--ch-primary-light), var(--ch-accent-light));
  opacity: 0.06;
}

.ch-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}

.ch-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ch-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid var(--ch-primary);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ch-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, var(--ch-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ch-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ch-text-lighter);
  margin: 0;
  max-width: 540px;
}

.ch-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ch-hero__image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ch-border-light);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(6, 182, 212, 0.05));
}

.ch-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metrics Strip */
.ch-metrics-strip {
  background: rgba(139, 92, 246, 0.05);
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
  margin-top: 40px;
  padding: 32px 0;
  position: relative;
  z-index: 1;
}

.ch-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}

.ch-metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ch-metric__icon {
  font-size: 28px;
}

.ch-metric__stat {
  font-weight: 700;
  font-size: 20px;
  color: var(--ch-text-lighter);
}

.ch-metric__label {
  font-size: 13px;
  color: var(--ch-text-light);
  opacity: 0.8;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.ch-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--ch-border);
}

.ch-section--highlights {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
}

.ch-section--packages {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
}

.ch-packages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1200px) {
  .ch-packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ch-packages-grid {
    grid-template-columns: 1fr;
  }
}

.ch-package-card {
  position: relative;
  border: 1px solid var(--ch-border-light);
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.06);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ch-package-card.is-featured {
  border-color: var(--ch-accent);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.35);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(6, 182, 212, 0.10));
}

.ch-package-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ch-accent);
  color: var(--ch-accent-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.ch-package-title {
  margin: 0;
  font-size: 22px;
  color: var(--ch-text-lighter);
}

.ch-package-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ch-package-price-old {
  color: var(--ch-text-light);
  opacity: 0.7;
  text-decoration: line-through;
  font-size: 14px;
}

.ch-package-price {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ch-text-lighter);
}

.ch-package-price.is-custom {
  font-size: 20px;
  color: var(--ch-accent-light);
}

.ch-package-desc {
  margin: 0;
  color: var(--ch-text-light);
  line-height: 1.7;
}

.ch-package-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ch-package-features li {
  position: relative;
  padding-left: 24px;
  color: var(--ch-text-light);
  line-height: 1.6;
}

.ch-package-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ch-accent);
  font-weight: 700;
}

.ch-section--alt {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
}

.ch-section--kpis {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.ch-section--cta {
  background: linear-gradient(135deg, var(--ch-primary) 0%, var(--ch-accent) 100%);
}

.ch-section__head {
  text-align: center;
  margin-bottom: 60px;
}

.ch-section__head h2 {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 16px;
  background: linear-gradient(135deg, var(--ch-accent-light), var(--ch-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ch-section--cta .ch-section__head h2 {
  color: white;
  -webkit-text-fill-color: unset;
  background: none;
}

.ch-section__head p {
  font-size: 16px;
  color: var(--ch-text-light);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ch-section--cta .ch-section__head p {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   HIGHLIGHTS GRID
   ============================================================================ */

.ch-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.ch-highlight-card {
  padding: 32px;
  border: 1px solid var(--ch-border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.05));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-highlight-card:hover {
  border-color: var(--ch-accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(6, 182, 212, 0.08));
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(139, 92, 246, 0.1);
}

.ch-highlight__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.ch-highlight__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ch-text-lighter);
}

.ch-highlight__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-light);
  margin: 0;
}

/* ============================================================================
   FEATURES GRID
   ============================================================================ */

.ch-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.ch-feature-item {
  padding: 24px;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.04);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-feature-item:hover {
  border-color: var(--ch-accent);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.15);
}

.ch-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: var(--ch-accent);
  margin-bottom: 12px;
}

.ch-feature__name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ch-text-lighter);
}

.ch-feature__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ch-text-light);
  margin: 0;
}

/* ============================================================================
   KPI CARDS
   ============================================================================ */

.ch-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.ch-kpi-card {
  padding: 40px 24px;
  border: 2px solid rgba(6, 182, 212, 0.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.05));
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-kpi-card:hover {
  border-color: var(--ch-accent);
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.2);
}

.ch-kpi__value {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--ch-accent-light), var(--ch-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.ch-kpi__suffix {
  font-size: 14px;
  color: var(--ch-text-light);
  margin-bottom: 8px;
  opacity: 0.8;
}

.ch-kpi__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ch-text-lighter);
  margin: 0;
}

/* ============================================================================
   TIMELINE
   ============================================================================ */

.ch-timeline {
  position: relative;
  padding: 40px 0;
}

.ch-timeline::before {
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ch-primary), var(--ch-accent), transparent);
  transform: scaleY(0);
  transform-origin: top;
  animation: timelineGrow 1s ease-out 0.3s forwards;
}

@keyframes timelineGrow {
  to { transform: scaleY(1); }
}

.ch-timeline__item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 40px;
  position: relative;
}

.ch-timeline__item:nth-child(even) {
  grid-template-columns: 1fr auto 1fr;
}

.ch-timeline__item:nth-child(even) .ch-timeline__content {
  text-align: right;
}

.ch-timeline__marker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 24px;
  z-index: 2;
  box-shadow: 0 0 0 8px var(--ch-dark);
}

.ch-timeline__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
}

.ch-timeline__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ch-text-lighter);
  margin: 0 0 8px;
}

.ch-timeline__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-light);
  margin: 0 0 12px;
}

.ch-timeline__time {
  font-size: 13px;
  color: var(--ch-accent-light);
  font-weight: 600;
}

/* ============================================================================
   USE CASES GRID
   ============================================================================ */

.ch-usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.ch-usecase-card {
  padding: 28px;
  border: 1px solid var(--ch-border-light);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.04), rgba(139, 92, 246, 0.04));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-usecase-card:hover {
  border-color: var(--ch-primary);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.08));
  transform: translateY(-4px);
}

.ch-usecase__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ch-text-lighter);
}

.ch-usecase__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-light);
  margin: 0 0 16px;
}

.ch-usecase__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ch-accent-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
}

.ch-usecase__link:hover {
  color: var(--ch-accent);
  gap: 8px;
}

/* ============================================================================
   CONTENT SECTION
   ============================================================================ */

.ch-section--content {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.02), rgba(139, 92, 246, 0.02));
}

.ch-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
}

.ch-content h2:not(:first-of-type) {
  display: none;
}

.ch-content p {
  margin: 0 0 20px;
  color: var(--ch-text-light);
}

.ch-content p:last-child {
  margin-bottom: 0;
}

.ch-content a {
  color: var(--ch-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

.ch-content a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
}

.ch-content strong {
  color: var(--ch-text-lighter);
  font-weight: 700;
}

.ch-content em {
  color: var(--ch-accent-light);
}

.ch-content ul,
.ch-content ol {
  margin: 24px 0;
  padding: 0;
  color: var(--ch-text-light);
  list-style: none;
}

.ch-content ul {
  display: grid;
  gap: 10px;
}

.ch-content ul li {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 44px;
  border: 1px solid var(--ch-border-light);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.05);
}

.ch-content ul li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  box-shadow: inset 0 0 0 4px var(--ch-dark);
}

.ch-content ol {
  counter-reset: ch-ol;
  display: grid;
  gap: 10px;
}

.ch-content ol li {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 50px;
  border: 1px solid var(--ch-border-light);
  border-radius: 12px;
  background: rgba(6, 182, 212, 0.07);
}

.ch-content ol li::before {
  counter-increment: ch-ol;
  content: counter(ch-ol);
  position: absolute;
  left: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  color: var(--ch-text-lighter);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-content li {
  margin-bottom: 0;
}

.ch-content blockquote {
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--ch-border-light);
  border-left: 4px solid var(--ch-accent);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.10), rgba(139, 92, 246, 0.08));
  color: var(--ch-text-lighter);
  font-size: 17px;
  line-height: 1.75;
}

.ch-content blockquote p {
  margin: 0;
  color: inherit;
}

.ch-content blockquote cite {
  display: block;
  margin-top: 10px;
  color: var(--ch-accent-light);
  font-size: 14px;
  font-style: normal;
}

/* ============================================================================
   FAQ SECTION
   ============================================================================ */

.ch-faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ch-faq__item {
  border: 1px solid var(--ch-border-light);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.05);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-faq__item:hover {
  border-color: var(--ch-accent);
  background: rgba(139, 92, 246, 0.08);
}

.ch-faq__item[open] {
  border-color: var(--ch-accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.05));
}

.ch-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ch-text-lighter);
  user-select: none;
  list-style: none;
}

.ch-faq__summary::-webkit-details-marker {
  display: none;
}

.ch-faq__question {
  flex: 1;
  font-size: 16px;
  text-align: left;
}

.ch-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  color: white;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-faq__item[open] .ch-faq__toggle {
  transform: rotate(45deg);
}

.ch-faq__answer {
  padding: 0 24px 24px;
  color: var(--ch-text-light);
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px solid var(--ch-border);
  max-height: 400px;
  overflow: hidden;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 400px;
  }
}

.ch-faq__answer a {
  color: var(--ch-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

.ch-faq__answer a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
}

/* ============================================================================
   CTA BLOCK
   ============================================================================ */

.ch-cta-block {
  text-align: center;
  padding: 60px 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ch-section--cta .ch-cta-block {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ch-cta__title {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 12px;
  color: white;
}

.ch-section--cta .ch-cta__title {
  color: white;
}

.ch-cta__desc {
  font-size: 16px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.9);
}

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

@media (max-width: 1024px) {
  .ch-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ch-title {
    font-size: 36px;
  }

  .ch-lead {
    font-size: 16px;
  }

  .ch-section__head h2 {
    font-size: 32px;
  }

  .ch-timeline::before {
    left: 30px;
  }

  .ch-timeline__item {
    grid-template-columns: auto 1fr;
    gap: 24px;
  }

  .ch-timeline__item:nth-child(even) {
    grid-template-columns: auto 1fr;
  }

  .ch-timeline__item:nth-child(even) .ch-timeline__content {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .ch-shell {
    padding: 0 16px;
  }

  .ch-section {
    padding: 60px 0;
  }

  .ch-hero {
    padding: 60px 0;
  }

  .ch-title {
    font-size: 28px;
  }

  .ch-lead {
    font-size: 15px;
  }

  .ch-hero__cta {
    gap: 12px;
  }

  .ch-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .ch-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .ch-section__head h2 {
    font-size: 24px;
  }

  .ch-highlights-grid,
  .ch-features-grid,
  .ch-kpis-grid,
  .ch-usecases-grid {
    grid-template-columns: 1fr;
  }

  .ch-timeline__marker {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .ch-cta-block {
    padding: 40px 24px;
  }

  .ch-cta__title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .ch-shell {
    padding: 0 12px;
  }

  .ch-section {
    padding: 40px 0;
  }

  .ch-hero {
    padding: 40px 0;
  }

  .ch-title {
    font-size: 24px;
  }

  .ch-lead {
    font-size: 14px;
  }

  .ch-badge {
    font-size: 12px;
  }

  .ch-breadcrumb {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .ch-metrics {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ch-metric {
    gap: 8px;
  }

  .ch-metric__stat {
    font-size: 18px;
  }

  .ch-section__head h2 {
    font-size: 20px;
  }

  .ch-section__head p {
    font-size: 14px;
  }

  .ch-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
  }

  .ch-hero__cta {
    flex-direction: column;
  }

  .ch-timeline__item {
    gap: 16px;
  }

  .ch-timeline__title {
    font-size: 16px;
  }

  .ch-cta-block {
    padding: 32px 16px;
  }

  .ch-cta__title {
    font-size: 20px;
  }

  .ch-cta__desc {
    font-size: 14px;
  }
}



/* === layanan-jasa-digital-marketing.css === */
/* ============================================================================
   Jasa Digital Marketing - Bold Modern Design
   Red (#ef4444) + Pink (#ec4899) + Orange accent
   ============================================================================ */

:root {
  --dm-primary: #ef4444;
  --dm-primary-light: #f87171;
  --dm-primary-dark: #dc2626;
  --dm-accent: #ec4899;
  --dm-accent-light: #f472b6;
  --dm-accent-dark: #db2777;
  --dm-orange: #f97316;
  --dm-orange-light: #fb923c;
  --dm-dark: #18181b;
  --dm-darker: #09090b;
  --dm-slate: #27272a;
  --dm-text: #e4e4e7;
  --dm-text-light: #f4f4f5;
  --dm-border: rgba(244, 63, 94, 0.15);
}

.dm-single {
  background: linear-gradient(180deg, var(--dm-darker) 0%, var(--dm-dark) 50%, var(--dm-slate) 100%);
  color: var(--dm-text);
  overflow: hidden;
}

/* UTILITY CLASSES */
.dm-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
  gap: 8px;
  border: none;
}

.dm-btn--primary {
  background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent));
  color: white;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

.dm-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(239, 68, 68, 0.5);
}

.dm-btn--outline {
  background: transparent;
  color: var(--dm-primary-light);
  border: 2px solid var(--dm-primary);
}

.dm-btn--outline:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--dm-accent);
  color: var(--dm-accent-light);
}

.dm-btn--large {
  padding: 18px 48px;
  font-size: 17px;
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */

.dm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.dm-breadcrumb a {
  color: var(--dm-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

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

.dm-breadcrumb span {
  color: var(--dm-text);
  opacity: 0.4;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.dm-hero {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
}

.dm-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.dm-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}

.dm-gradient-orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--dm-primary), transparent);
  top: -100px;
  right: -100px;
}

.dm-gradient-orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--dm-accent), transparent);
  bottom: 0;
  left: -50px;
}

.dm-gradient-orb--3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--dm-orange), transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dm-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.dm-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dm-badge {
  display: inline-flex;
  width: fit-content;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(236, 72, 153, 0.2));
  border: 2px solid var(--dm-primary);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dm-primary-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dm-hero__title {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(135deg, var(--dm-primary-light), var(--dm-accent-light), var(--dm-orange-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dm-hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--dm-text);
  margin: 0;
  max-width: 560px;
}

.dm-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dm-hero__stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--dm-border);
}

.dm-stat-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dm-stat-mini__icon {
  font-size: 24px;
}

.dm-stat-mini__number {
  font-size: 18px;
  font-weight: 800;
  color: var(--dm-text-light);
}

.dm-stat-mini__label {
  font-size: 12px;
  color: var(--dm-text);
  opacity: 0.7;
}

.dm-hero__image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--dm-border);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(236, 72, 153, 0.1));
  box-shadow: 0 20px 60px rgba(239, 68, 68, 0.2);
}

.dm-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.dm-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--dm-border);
}

.dm-section--stats {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(236, 72, 153, 0.05));
  padding: 60px 0;
}

.dm-section--channels {
  background: rgba(249, 115, 22, 0.03);
}

.dm-section--funnel {
  background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.05), transparent);
}

.dm-section--kpis {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(236, 72, 153, 0.06));
}

.dm-section--faq {
  background: rgba(239, 68, 68, 0.02);
}

.dm-section--cta {
  background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent), var(--dm-orange));
  border: none;
}

.dm-section__head {
  text-align: center;
  margin-bottom: 60px;
}

.dm-section__head h2 {
  font-size: 42px;
  font-weight: 900;
  margin: 0 0 16px;
  background: linear-gradient(135deg, var(--dm-primary-light), var(--dm-accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dm-section--cta .dm-section__head h2 {
  color: white;
  -webkit-text-fill-color: unset;
  background: none;
}

.dm-section__head p {
  font-size: 16px;
  color: var(--dm-text);
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

/* ============================================================================
   STATS GRID
   ============================================================================ */

.dm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.dm-stat-card {
  text-align: center;
  padding: 32px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(236, 72, 153, 0.08));
  border: 2px solid var(--dm-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-stat-card:hover {
  border-color: var(--dm-accent);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(236, 72, 153, 0.12));
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(239, 68, 68, 0.2);
}

.dm-stat-card__icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.dm-stat-card__number {
  font-size: 36px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dm-primary-light), var(--dm-accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.dm-stat-card__label {
  font-size: 14px;
  color: var(--dm-text);
  opacity: 0.8;
}

/* ============================================================================
   SERVICES GRID
   ============================================================================ */

.dm-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.dm-service-card {
  padding: 32px;
  border-radius: 16px;
  background: rgba(39, 39, 42, 0.6);
  border: 1px solid var(--dm-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.dm-service-card:hover {
  border-color: var(--dm-primary);
  background: rgba(39, 39, 42, 0.8);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(239, 68, 68, 0.15);
}

.dm-service-card__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.dm-service-card__title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--dm-text-light);
}

.dm-service-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dm-text);
  margin: 0 0 16px;
  opacity: 0.9;
}

.dm-service-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-service-card__features li {
  font-size: 13px;
  color: var(--dm-text);
  padding-left: 0;
}

/* ============================================================================
   CHANNELS GRID
   ============================================================================ */

.dm-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.dm-channel-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid var(--dm-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-channel-badge:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--dm-primary);
  transform: scale(1.05);
}

.dm-channel-badge__icon {
  font-size: 24px;
}

.dm-channel-badge__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dm-text-light);
}

/* ============================================================================
   PRICING PACKAGES
   ============================================================================ */

.dm-section--pricing {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(236, 72, 153, 0.08));
}

.dm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.dm-pricing-card {
  position: relative;
  padding: 40px 32px;
  border-radius: 20px;
  background: rgba(39, 39, 42, 0.6);
  border: 2px solid var(--dm-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.dm-pricing-card:hover {
  transform: translateY(-8px);
  border-color: var(--dm-primary);
  box-shadow: 0 16px 40px rgba(239, 68, 68, 0.2);
}

.dm-pricing-card--popular {
  border-color: var(--dm-accent);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(236, 72, 153, 0.1));
  transform: scale(1.05);
  box-shadow: 0 20px 50px rgba(236, 72, 153, 0.25);
}

.dm-pricing-card--popular:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 24px 60px rgba(236, 72, 153, 0.35);
}

.dm-pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 20px;
  background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent));
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.dm-pricing-card__header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--dm-border);
}

.dm-pricing-card__name {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 8px;
  background: linear-gradient(135deg, var(--dm-primary-light), var(--dm-accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dm-pricing-card__tagline {
  font-size: 14px;
  color: var(--dm-text);
  margin: 0 0 20px;
  opacity: 0.8;
}

.dm-pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.dm-pricing-card__amount {
  font-size: 42px;
  font-weight: 900;
  color: var(--dm-text-light);
}

.dm-pricing-card__period {
  font-size: 16px;
  color: var(--dm-text);
  opacity: 0.7;
}

.dm-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dm-pricing-card__features li {
  font-size: 15px;
  color: var(--dm-text);
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dm-pricing-card__features li::before {
  content: '✓';
  color: var(--dm-primary-light);
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

.dm-btn--block {
  width: 100%;
  justify-content: center;
}

/* ============================================================================
   FUNNEL
   ============================================================================ */

.dm-funnel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.dm-funnel__stage {
  padding: 32px;
  border-radius: 16px;
  border: 2px solid var(--dm-border);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-funnel__stage--top {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(236, 72, 153, 0.08));
  border-color: var(--dm-primary);
}

.dm-funnel__stage--mid {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(249, 115, 22, 0.08));
  border-color: var(--dm-accent);
  margin-left: 40px;
}

.dm-funnel__stage--bottom {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(239, 68, 68, 0.08));
  border-color: var(--dm-orange);
  margin-left: 80px;
}

.dm-funnel__stage--end {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(236, 72, 153, 0.1));
  border-color: var(--dm-accent);
  margin-left: 120px;
}

.dm-funnel__stage:hover {
  transform: translateX(10px);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.2);
}

.dm-funnel__title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--dm-text-light);
}

.dm-funnel__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dm-text);
  margin: 0 0 16px;
}

.dm-funnel__tactics {
  font-size: 13px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  color: var(--dm-primary-light);
  font-weight: 600;
  border-left: 3px solid var(--dm-primary);
}

/* ============================================================================
   KPI BOXES
   ============================================================================ */

.dm-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.dm-kpi-box {
  padding: 40px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(236, 72, 153, 0.08));
  border: 2px solid var(--dm-primary);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-kpi-box:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 40px rgba(239, 68, 68, 0.25);
}

.dm-kpi-box__metric {
  font-size: 14px;
  font-weight: 700;
  color: var(--dm-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.dm-kpi-box__value {
  font-size: 52px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dm-primary-light), var(--dm-accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.dm-kpi-box__period {
  font-size: 13px;
  color: var(--dm-text);
  opacity: 0.8;
}

/* ============================================================================
   PROCESS
   ============================================================================ */

.dm-process {
  display: grid;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.dm-process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 32px;
  border-radius: 16px;
  background: rgba(39, 39, 42, 0.6);
  border: 1px solid var(--dm-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-process__step:hover {
  border-color: var(--dm-primary);
  background: rgba(39, 39, 42, 0.8);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.15);
}

.dm-process__number {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}

.dm-process__title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--dm-text-light);
}

.dm-process__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dm-text);
  margin: 0 0 16px;
}

.dm-process__deliverable {
  font-size: 14px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--dm-primary);
  color: var(--dm-text);
}

.dm-process__deliverable strong {
  color: var(--dm-primary-light);
}

/* ============================================================================
   CONTENT SECTION
   ============================================================================ */

.dm-section--content {
  background: rgba(236, 72, 153, 0.02);
}

.dm-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
}

.dm-content h2:not(:first-of-type) {
  display: none;
}

.dm-content p {
  margin: 0 0 20px;
  color: var(--dm-text);
}

.dm-content a {
  color: var(--dm-primary-light);
  text-decoration: none;
  transition: color 0.2s;
}

.dm-content a:hover {
  color: var(--dm-accent-light);
  text-decoration: underline;
}

.dm-content strong {
  color: var(--dm-text-light);
  font-weight: 700;
}

.dm-content ul,
.dm-content ol {
  margin: 20px 0;
  padding-left: 24px;
}

.dm-content li {
  margin-bottom: 8px;
  color: var(--dm-text);
}

/* ============================================================================
   FAQ SECTION
   ============================================================================ */

.dm-faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dm-faq__item {
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.06);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-faq__item:hover {
  border-color: var(--dm-primary);
  background: rgba(239, 68, 68, 0.1);
}

.dm-faq__item[open] {
  border-color: var(--dm-accent);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(236, 72, 153, 0.08));
}

.dm-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  color: var(--dm-text-light);
  user-select: none;
  list-style: none;
}

.dm-faq__summary::-webkit-details-marker {
  display: none;
}

.dm-faq__question {
  flex: 1;
  font-size: 16px;
}

.dm-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent));
  color: white;
  font-size: 20px;
  font-weight: 900;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-faq__item[open] .dm-faq__icon {
  transform: rotate(45deg);
}

.dm-faq__answer {
  padding: 0 24px 24px;
  color: var(--dm-text);
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px solid var(--dm-border);
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   CTA BOX
   ============================================================================ */

.dm-cta-box {
  text-align: center;
  padding: 80px 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.dm-cta-box__title {
  font-size: 40px;
  font-weight: 900;
  margin: 0 0 16px;
  color: white;
}

.dm-cta-box__desc {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.95);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

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

@media (max-width: 1024px) {
  .dm-hero__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .dm-hero__title {
    font-size: 42px;
  }

  .dm-section__head h2 {
    font-size: 32px;
  }

  .dm-services-grid {
    grid-template-columns: 1fr;
  }

  .dm-funnel__stage--mid {
    margin-left: 20px;
  }

  .dm-funnel__stage--bottom {
    margin-left: 40px;
  }

  .dm-funnel__stage--end {
    margin-left: 60px;
  }
}

@media (max-width: 768px) {
  .dm-shell {
    padding: 0 16px;
  }

  .dm-section {
    padding: 60px 0;
  }

  .dm-hero {
    padding: 80px 0 60px;
  }

  .dm-hero__title {
    font-size: 32px;
  }

  .dm-hero__lead {
    font-size: 16px;
  }

  .dm-hero__actions {
    flex-direction: column;
  }

  .dm-btn {
    width: 100%;
  }

  .dm-hero__stats {
    flex-direction: column;
    gap: 16px;
  }

  .dm-section__head h2 {
    font-size: 28px;
  }

  .dm-stats-grid,
  .dm-channels-grid,
  .dm-pricing-grid,
  .dm-kpis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dm-pricing-card--popular {
    transform: scale(1);
  }

  .dm-pricing-card--popular:hover {
    transform: translateY(-8px) scale(1);
  }

  .dm-funnel__stage {
    margin-left: 0 !important;
  }

  .dm-process__step {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dm-process__number {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin: 0 auto;
  }

  .dm-cta-box {
    padding: 60px 24px;
  }

  .dm-cta-box__title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .dm-hero__title {
    font-size: 26px;
  }

  .dm-hero__lead {
    font-size: 15px;
  }

  .dm-badge {
    font-size: 11px;
    padding: 8px 16px;
  }

  .dm-section__head h2 {
    font-size: 24px;
  }

  .dm-section__head p {
    font-size: 14px;
  }

  .dm-stat-card__number {
    font-size: 28px;
  }

  .dm-service-card {
    padding: 24px;
  }

  .dm-pricing-card {
    padding: 32px 24px;
  }

  .dm-pricing-card__name {
    font-size: 24px;
  }

  .dm-pricing-card__amount {
    font-size: 36px;
  }

  .dm-funnel__title {
    font-size: 18px;
  }

  .dm-kpi-box__value {
    font-size: 36px;
  }

  .dm-cta-box__title {
    font-size: 24px;
  }

  .dm-cta-box__desc {
    font-size: 15px;
  }
}



/* === layanan-jasa-landing-page.css === */
/* ============================================================================
   Jasa Landing Page - Modern Conversion Design
   Teal (#0f766e) + Amber (#f59e0b)
   ============================================================================ */

:root {
  --lp-primary: #0f766e;
  --lp-primary-light: #14b8a6;
  --lp-primary-dark: #0f4c45;
  --lp-accent: #f59e0b;
  --lp-accent-light: #fbbf24;
  --lp-dark: #0b1214;
  --lp-darker: #05090a;
  --lp-slate: #121b1e;
  --lp-text: #cbd5e1;
  --lp-text-light: #e2e8f0;
  --lp-border: rgba(148, 163, 184, 0.12);
}

.lp-single {
  background: linear-gradient(180deg, var(--lp-darker) 0%, var(--lp-dark) 55%, var(--lp-slate) 100%);
  color: var(--lp-text);
  overflow: hidden;
}

.lp-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  gap: 8px;
}

.lp-btn--primary {
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-accent));
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 118, 110, 0.35);
}

.lp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15, 118, 110, 0.45);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--lp-accent-light);
  border-color: var(--lp-accent);
}

.lp-btn--ghost:hover {
  background: rgba(245, 158, 11, 0.1);
}

.lp-btn--large {
  padding: 16px 40px;
  font-size: 16px;
}

.lp-btn--block {
  width: 100%;
}

/* Breadcrumb */
.lp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.lp-breadcrumb a {
  color: var(--lp-accent-light);
  text-decoration: none;
}

.lp-breadcrumb a:hover {
  text-decoration: underline;
}

.lp-breadcrumb span {
  color: var(--lp-text);
  opacity: 0.6;
}

/* Hero */
.lp-hero {
  position: relative;
  padding: 80px 0;
}

.lp-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(20, 184, 166, 0.18), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(245, 158, 11, 0.18), transparent 40%);
  pointer-events: none;
}

.lp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.lp-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(15, 118, 110, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.5);
  color: var(--lp-primary-light);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.lp-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--lp-text-light);
}

.lp-lead {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: var(--lp-text);
}

.lp-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lp-border);
}

.lp-stat {
  text-align: left;
}

.lp-stat__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--lp-text-light);
}

.lp-stat__label {
  font-size: 12px;
  color: var(--lp-text);
  opacity: 0.8;
}

.lp-hero__image {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  background: rgba(15, 118, 110, 0.06);
}

.lp-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections */
.lp-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--lp-border);
}

.lp-section--soft {
  background: rgba(15, 118, 110, 0.04);
}

.lp-section--alt {
  background: rgba(245, 158, 11, 0.04);
}

.lp-section--content {
  background: rgba(20, 184, 166, 0.03);
}

.lp-section--cta {
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-accent));
}

.lp-section__head {
  text-align: center;
  margin-bottom: 48px;
}

.lp-section__head h2 {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--lp-text-light);
}

.lp-section__head p {
  margin: 0 auto;
  max-width: 640px;
  font-size: 16px;
  color: var(--lp-text);
}

/* Outcomes */
.lp-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lp-card {
  padding: 28px;
  border-radius: 14px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--lp-text-light);
}

.lp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Structure grid */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-panel {
  padding: 24px;
  border-radius: 12px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-panel h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--lp-text-light);
}

.lp-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Steps */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-step {
  padding: 24px;
  border-radius: 12px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  color: var(--lp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 12px;
}

.lp-step__content h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--lp-text-light);
}

.lp-step__content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Pricing */
.lp-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lp-price {
  position: relative;
  padding: 28px 24px;
  border-radius: 16px;
  background: rgba(18, 27, 30, 0.75);
  border: 1px solid var(--lp-border);
  display: flex;
  flex-direction: column;
}

.lp-price--popular {
  border-color: var(--lp-accent);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.2);
  transform: translateY(-4px);
}

.lp-price__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lp-accent);
  color: #1f1300;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
}

.lp-price__header h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--lp-text-light);
}

.lp-price__header p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--lp-text);
}

.lp-price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}

.lp-price__amount span {
  font-size: 28px;
  font-weight: 800;
  color: var(--lp-text-light);
}

.lp-price__amount small {
  font-size: 13px;
  opacity: 0.8;
}

.lp-price__features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-price__features li {
  font-size: 13px;
}

/* Stack */
.lp-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-stack__item {
  padding: 20px;
  border-radius: 12px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-stack__item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--lp-text-light);
}

.lp-stack__item p {
  margin: 0;
  font-size: 13px;
}

/* Content */
.lp-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
}

.lp-content h2:not(:first-of-type) {
  display: none;
}

.lp-content p {
  margin: 0 0 18px;
}

.lp-content a {
  color: var(--lp-accent-light);
  text-decoration: none;
}

.lp-content a:hover {
  text-decoration: underline;
}

/* FAQ */
.lp-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-faq__item {
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(18, 27, 30, 0.7);
  overflow: hidden;
}

.lp-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  color: var(--lp-text-light);
  list-style: none;
}

.lp-faq__summary::-webkit-details-marker {
  display: none;
}

.lp-faq__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  transition: transform 0.3s ease;
}

.lp-faq__item[open] .lp-faq__icon {
  transform: rotate(45deg);
}

.lp-faq__answer {
  padding: 0 20px 18px;
  border-top: 1px solid var(--lp-border);
  font-size: 14px;
  line-height: 1.7;
}

/* CTA */
.lp-cta {
  text-align: center;
  padding: 60px 32px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.lp-cta h2 {
  margin: 0 0 10px;
  font-size: 32px;
  color: #ffffff;
}

.lp-cta p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 1024px) {
  .lp-hero__grid {
    grid-template-columns: 1fr;
  }

  .lp-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-outcomes,
  .lp-grid,
  .lp-steps,
  .lp-pricing,
  .lp-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .lp-shell {
    padding: 0 16px;
  }

  .lp-title {
    font-size: 32px;
  }

  .lp-lead {
    font-size: 16px;
  }

  .lp-hero__cta {
    flex-direction: column;
  }

  .lp-btn {
    width: 100%;
  }

  .lp-outcomes,
  .lp-grid,
  .lp-steps,
  .lp-pricing,
  .lp-stack {
    grid-template-columns: 1fr;
  }

  .lp-section {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  .lp-title {
    font-size: 26px;
  }

  .lp-section__head h2 {
    font-size: 24px;
  }

  .lp-cta h2 {
    font-size: 24px;
  }
}



/* === legacy-base.css === */
/*
Theme Name: JazaTH
Theme URI: https://jazath.dev
Author: JazaTH.dev
Author URI: https://jazath.dev
Description: Tema JazaTH — responsive, mobile-first landing theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jazath-theme
*/

/* =========================================
   TEMPLATE CSS (extracted from JazaTH.html)
   ========================================= */
:root{
  --bg:#0b1220;
  --card:#121a33;
  --text:#eaf0ff;
  --muted:#9fb2d9;
  --brand:#62d3ff;
  --accent:#ffd34d;
  --grad:linear-gradient(135deg,#19b4ff,#6ac7ff 40%,#ffd84d);
  --radius:12px;
  --headH:44px;
}  
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;padding-top:var(--headH)}
a{color:#cfe6ff;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;height:auto}

/* =========================================
   UTILITIES & COMPONENTS
   ========================================= */

/* Service card styles: use CSS variable --svc-color provided inline from template */
.svc.price-card{background:var(--card);border-radius:12px;padding:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);border-left:6px solid var(--svc-color);transition:transform .14s ease,box-shadow .14s ease}
.svc.price-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(2,6,23,.6)}
.svc.price-card .price-head{font-weight:900;font-size:0.9rem;margin-bottom:6px;color:var(--text);} 
.svc.price-card .price-body{color:var(--muted);line-height:1.5}
.svc.price-card .svc-cta{margin-top:12px}
.svc.price-card .svc-cta .btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.06)}

/* Accent small circle using the service color */
.svc.price-card::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--svc-color);display:inline-block;margin-right:8px;vertical-align:middle}

 .wrap{max-width:1200px;margin:0 auto;padding:12px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
.grid{display:grid;gap:12px}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-weight:900;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eaf0ff}
/* Loading state for small inline feedback on click */
.btn.is-loading{pointer-events:none;opacity:0.9;position:relative}
.btn.is-loading::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.14);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-btn{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;font-weight:900;background:linear-gradient(90deg,#19b4ff,#6ac7ff,#ffd84d,#19b4ff);background-size:300% 100%;color:#0b1220;transition:background-position .4s ease,transform .12s ease,box-shadow .12s ease}
.cta-btn:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 8px 22px rgba(25,180,255,.25)}
.nav-link:focus-visible,.chip:focus-visible,.btn:focus-visible,.cta-btn:focus-visible{outline:2px solid #62d3ff;outline-offset:2px}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */

/* Jaza namespaced menu groups 🔧
   Use `.jz-header-*`, `.jz-chips-*` and `.jz-sidebar-*` for new styles
   (keeps legacy class names for backward compatibility)
*/
/* Aliases to help gradual migration */
.jz-header{ }
.jz-header .brand{ /* header brand area (alias) */ }
.jz-header-menu .nav-link{ /* header-specific nav-link styling (alias to .nav-link) */ }
.jz-chips{ }
.jz-chips .chip{ /* alias to .chip */ }
.jz-sidebar{ }
.jz-sidebar .jzv2-sidebar{ /* alias container for sidebar-v2 */ }


header.site{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(11,18,32,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:none;transition:transform .2s cubic-bezier(.4,0,.2,1);will-change:transform}
header.site.hide{transform:translateY(-100%)}
header.site.no-anim{transition:none}

.head{display:flex;align-items:center;gap:10px;padding:8px 20px;min-height:var(--headH)}
.head{position:relative;z-index:22;background:rgba(11,18,32,.98);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid transparent;border-image:linear-gradient(90deg, rgba(25,180,255,0) 0%, rgba(25,180,255,0.3) 20%, rgba(255,216,77,0.3) 80%, rgba(255,216,77,0) 100%) 1}
.brand{font-weight:900;font-size:1.5rem;letter-spacing:-0.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.head .brand{position:relative;z-index:10005}
/* Ensure the menu button stays at the far-right of the header on all viewports (mobile + desktop) */
.head .jzv2-menu-btn{margin-left:auto;position:relative;z-index:10070}
/* Ensure WP menu outputs (.primary-menu) render inline on desktop */
nav.primary .primary-menu{display:flex;align-items:center;gap:12px;margin:0;padding:0;list-style:none}
nav.primary .primary-menu a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800;font-size:1.05rem}
.nav-link{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800;font-size:1.05rem}
.nav-link.active{border-color:rgba(98,211,255,.38);background:rgba(255,255,255,.08);color:#eaf0ff}

.menu-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:900;border:1px solid rgba(255,255,255,.06);background:rgba(7,11,18,.45);color:#eaf0ff;position:relative;z-index:10006;box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.02)}

/* Chips (Sub-nav) */
.chips{position:fixed;top:calc(var(--headH) + 14px);left:0;right:0;z-index:19;background:linear-gradient(180deg,#061022 0%,#071427 60%,#081a2c 100%);border-top:1px solid rgba(255,255,255,.03);box-shadow:0 8px 20px rgba(0,0,0,.45);border-radius:0;padding:2px 0;transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform}
.chips.hide{transform:translateY(calc(-100% - var(--headH) - 14px));}

/* When chips are hidden, collapse the reserved space (global) */
html.chips-hidden, body.chips-hidden{padding-top:var(--headH) !important} 


/* Ensure hide transforms fully off-screen on desktop */
@media (min-width:900px){
  .chips.hide{transform:translateY(calc(-100% - var(--headH) - 14px));}
}
.chips-scroll{display:flex;justify-content:flex-start;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 10px;scroll-padding-left:16px;scrollbar-width:none;-ms-overflow-style:none}
.chips-scroll::-webkit-scrollbar{display:none}
/* When using wp_nav_menu for chips, the menu may render an <li><a> structure; make anchors look like chips */
.chips-scroll ul{display:flex;gap:10px;align-items:center;margin:0;padding:0}
.chips-scroll ul li{list-style:none}
.chips-scroll ul li a{display:inline-flex;padding:6px 18px;border-radius:12px;font-weight:800;color:#eaf0ff;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 -3px 10px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.24);backdrop-filter:blur(4px);text-decoration:none}
.chips-scroll ul li a:hover{transform:translateY(-2px)}
.chip{flex:0 0 auto;padding:6px 18px;border-radius:999px;font-weight:800;color:#eaf0ff;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);font-size:0.95rem;box-shadow:inset 0 -3px 10px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.24);backdrop-filter:blur(4px);margin-right:10px;min-height:28px;display:inline-flex;align-items:center}
.chip.active{background:linear-gradient(90deg,#62d3ff,#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent;border-color:rgba(98,211,255,.22);box-shadow:0 6px 18px rgba(98,211,255,.08)}

/* Legacy sidebar styles removed — use namespaced `.jzv2-*` styles defined below. */
/* NOTE: The previous `.sidebar`, `.overlay`, `.side-menu` rules were removed to avoid collisions with the new Sidebar V2 implementation. */

/* small tweaks for mobile: keep header nav hidden on mobile (menu button uses .jzv2-menu-btn) */
@media(max-width:899px){nav.primary{display:none !important;visibility:hidden !important}}


/* HERO SECTION */
.hero{position:relative;padding:8px 0 14px;background:radial-gradient(1200px 340px at 50% 0%, rgba(76,201,240,.16), transparent 60%),linear-gradient(180deg,#0b1020 0%, #121735 100%)}
@media (min-width:900px){
  /* add extra top spacing on desktop so hero doesn't sit too close to the chips/header */
  .hero{padding:28px 0 14px}
  /* Lower chips a bit more on desktop and ensure hide transforms them fully out of view */
  .chips{top:calc(var(--headH) + 14px)}
  .chips.hide{transform:translateY(calc(-100% - var(--headH) - 14px));}
}

/* Sidebar footer & overlay-related rules removed */



/* Mobile: ensure hero content is pushed below fixed header + chips to avoid overlap */
@media (max-width:900px){
  /* Reserve space only for the fixed header on mobile; chips space is applied to the hero so it sits directly under the chips */
  html,body{padding-top:var(--headH);}
  .hero{padding-top:calc(var(--chipsH,48px) + 2px) !important; }
  /* Mobile: keep chips fixed (position set globally), adjust sizing */
  /* Shift chips slightly up on mobile so they sit closer to the header */
  .chips{top:calc(var(--headH) + 8px);padding:6px 0;height:var(--chipsH,48px);background:linear-gradient(90deg,#042a3f 0%, #063147 60%);border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 12px 30px rgba(4,42,63,.6);backdrop-filter:none}
  .chips.hide{transform:translateY(calc(-100% - var(--headH) - 8px));}
  .chips-scroll{padding:6px 10px;scroll-padding-left:12px}
} 
.hero-grid{display:grid;grid-template-columns:1.2fr;gap:14px;align-items:center}
.hero .wrap{padding-top:0}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.25)}


h1.title{margin:0 0 8px;font-size:clamp(1.3rem, 3.2vw, 1.9rem);line-height:1.15;font-weight:900;background:linear-gradient(90deg,#62d3ff 0%,#9fe3ff 35%,#ffd34d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);margin:0 0 14px}

/* SHOP HERO: polished hero match to provided design (arrows, bottom-left dots, right-side small CTA) */
.shop-hero{margin-bottom:22px}
.shop-hero-grid{display:grid;grid-template-columns:1fr 480px;gap:18px;align-items:stretch}
.shop-hero-banner{position:relative;border-radius:14px;overflow:hidden;min-height:220px;max-height:340px;height:calc(min(340px,30vh));box-shadow:0 20px 40px rgba(8,12,20,.6);display:flex;align-items:stretch}

/* FEATURES: Kategori Populer + Top Up card (dark-blue + green scheme) */
.wrap-card{background:linear-gradient(180deg,#031428,#071a33);border-radius:12px;padding:18px;margin:18px 0;box-shadow:0 20px 50px rgba(4,10,24,.6);color:var(--text);border:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden}
.features-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.features-title h2{margin:0;font-size:1.4rem;color:var(--text)}
.features-title .muted{margin:6px 0 0;color:var(--muted)}
.features-actions h3{margin:0;font-size:1.05rem;color:var(--text)}
.features-actions .view-all{font-weight:800;color:var(--brand);margin-left:8px}
.features-grid{display:grid;grid-template-columns:1fr 480px;gap:18px}
.features-left .banner-green{background:linear-gradient(90deg,#0fb45c,#0b8f4a);border-radius:10px;padding:18px;color:#061426;display:flex;align-items:center;min-height:120px;position:relative;overflow:hidden}
.banner-inner h3{margin:0;font-size:1.2rem;font-weight:900;color:#061426}
.banner-inner p{margin:8px 0;color:rgba(0,0,0,.8)}
.banner-inner .cta-small{margin-top:6px;background:rgba(255,255,255,.06);color:#061426;border:1px solid rgba(255,255,255,.06);font-weight:900;padding:8px 10px;border-radius:8px}

/* When banner shows an image, keep green look via dark overlay but use image as background */
.banner-green.has-image{background-color:transparent}
.banner-green.has-image::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(6,10,18,.5), rgba(6,10,18,.18));z-index:1}
.banner-green.has-image .banner-inner{position:relative;z-index:2;color:#fff}
.banner-green.has-image .banner-inner h3{color:#fff}
.banner-green.has-image .banner-inner p{color:rgba(255,255,255,.9)}
.banner-green.has-image .banner-inner .cta-small{background:rgba(0,0,0,.45);color:#fff;border:none;box-shadow:0 8px 18px rgba(0,0,0,.4)}
/* When banner uses an image, invert colors for readability */
.banner-green.has-image{background-size:cover;background-position:center}
.wrap-card.has-image{background-color:transparent;background-size:cover;background-position:center}
.wrap-card.has-image::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(6,10,18,.62), rgba(6,10,18,.22));border-radius:12px;z-index:1}
.wrap-card.has-image > *{position:relative;z-index:2}
.banner-green.has-image .banner-inner h3{color:#fff}
.banner-green.has-image .banner-inner p{color:rgba(255,255,255,.9)}
.banner-green.has-image .banner-inner .cta-small{background:rgba(0,0,0,.45);color:#fff;border:none;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.features-right .topup-card{display:flex;flex-direction:column;overflow:hidden}
.topup-card .tabs{display:flex;gap:12px;list-style:none;padding:0;margin:0 0 12px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.topup-card .tabs{display:flex;gap:14px;list-style:none;padding:0;margin:0 0 12px 0;border-bottom:1px solid rgba(255,255,255,.04);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-right:28px}
.topup-card .tabs::-webkit-scrollbar{display:none}
.topup-card .tabs::after{content:"";flex:0 0 44px}
.topup-card .tabs li{padding:8px 14px;border-radius:8px 8px 0 0;cursor:pointer;font-weight:800;color:var(--muted);background:transparent;white-space:nowrap;flex:0 0 auto}
.topup-card .tabs li.active{border-bottom:3px solid var(--brand);color:var(--brand)}
.topup-card .tab-body{padding:6px 0}
.topup-card .tab-body{padding-right:8px}
.topup-card .tab-panel{display:none}
.topup-card .tab-panel.active{display:block}
.topup-card .form-row{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.topup-card .form-row .input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02);color:var(--text)}

/* Ensure selects and filter inputs use dark backgrounds so options/text remain readable */
.topup-card select,
.topup-card .form-row .input,
.template-filter-mobile .input{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));color:var(--text);border:1px solid rgba(255,255,255,.06)}
.topup-card select:focus,.template-filter-mobile .input:focus{outline:none;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.topup-card select option,
.template-filter-mobile .input option{background:var(--card);color:var(--text)}

.category-chips{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;width:100%;padding:12px 6px}
.category-chips .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04);border-radius:999px;font-weight:800;color:var(--text);box-shadow:inset 0 -6px 12px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.28)}
.category-chips .chip .chip-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--text)}

@media (max-width:1160px){.features-grid{grid-template-columns:1fr}.wrap-card{padding:12px}.features-actions{margin-top:6px}.shop-hero-aside{order:2}}
@media (max-width:720px){.banner-inner{padding:12px}.category-chips{gap:8px}}
.hero-slides{position:relative;height:100%}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;transform:scale(0.995);border-radius:12px;overflow:hidden;display:grid}
.hero-slide.active{opacity:1;visibility:visible;position:relative;transform:scale(1)}
.hero-slide-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide-placeholder{width:100%;height:100%;background:linear-gradient(180deg,#0b1220,#071427);display:block}
/* small black CTA on right bottom to match example */
.hero-banner-cta{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.85);color:#fff;padding:8px 10px;border-radius:8px;font-weight:800;font-size:0.9rem;text-decoration:none;z-index:6;box-shadow:0 6px 18px rgba(0,0,0,.5),0 6px 18px rgba(98,211,255,.04)}
/* ensure header remains above hero CTA so CTA sits behind header when scrolled */
/* arrows */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.95);color:#061426;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.4);z-index:22}
.hero-arrow.hero-prev{left:12px}
.hero-arrow.hero-next{right:12px}
/* dots bottom-left */
.hero-dots{position:absolute;left:12px;bottom:12px;display:flex;gap:10px;align-items:center;z-index:22}
.hero-dots .dot{width:12px;height:12px;border-radius:50%;border:none;background:rgba(255,255,255,.14);cursor:pointer;transition:transform .18s ease}
.hero-dots .dot.active{background:linear-gradient(90deg,var(--accent),var(--brand));box-shadow:0 10px 28px rgba(98,211,255,.12);transform:scale(1.18)}

/* retain larger overlay for devices where needed but hide by default to match banner-first design */
.slide-overlay{display:none}

.shop-hero-aside .card{padding:12px;border-radius:12px;height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.shop-hero-aside .tabs{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 12px 0;flex-wrap:wrap}
.shop-hero-aside .tabs li{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);font-weight:900;cursor:pointer;white-space:nowrap}
.shop-hero-aside .tabs li.active{background:linear-gradient(90deg,#62d3ff,#9fe3ff);color:#0b1220}
.shop-hero-aside .tab-body{min-height:60px}
.shop-hero-aside .tab-body .tab-panel{display:none}
.shop-hero-aside .tab-body .tab-panel.active{display:block}
.shop-hero-aside .tab-body .tab-panel small{color:var(--muted)}

/* Category chips (unified) */
.category-chips{margin-top:12px}

/* ensure chips wrap nicely and align rows */
.category-chips .chip{margin-bottom:8px}

@media (max-width:720px){
  .category-chips{padding:10px 6px}
  .category-chips .chip{flex:1 1 auto;min-width:140px}
}

/* Responsive tweaks */
@media (max-width:1160px){.shop-hero-grid{grid-template-columns:1fr}.shop-hero-banner{min-height:160px}.shop-hero-aside{order:2}}
@media (max-width:720px){.hero-banner-cta{right:10px;bottom:10px;padding:8px 10px}.hero-arrow{width:40px;height:40px}.hero-dots{left:10px;bottom:8px}.category-chips{gap:8px}}

/* CONTENT SECTIONS */
.usp{padding:16px 0;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.usp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;display:flex;gap:10px;align-items:flex-start;min-width:0;box-shadow:0 10px 26px rgba(0,0,0,.26)}
.ico{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(68% 68% at 30% 30%, rgba(98,211,255,.18), transparent 60%),linear-gradient(180deg,#0a1430,#152a58);border:1px solid rgba(255,255,255,.12)}

.section-title{margin:0 0 6px;font-size:1.35rem;line-height:1.15;font-weight:900;background:linear-gradient(90deg,#62d3ff 0%,#9fe3ff 35%,#ffd34d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-desc{margin:0 0 18px;color:var(--muted);max-width:72ch}

/* Template filter (taxonomy submenu) */
.template-filter{margin:12px 0 18px}
.template-filter .filter-list{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.template-filter .filter-item{flex:0 0 auto}
.template-filter .filter-item a{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);font-weight:800;color:var(--text)}
.template-filter .filter-item a:hover{background:rgba(255,255,255,.04)}
.template-filter .filter-item a.active{background:linear-gradient(90deg,#62d3ff,#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent;border-color:transparent}

/* Mobile select filter */
.template-filter-mobile{display:none;margin:10px 0}
.template-filter-mobile .input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:var(--text)}

/* Template badge */
.template-badge{display:inline-flex;align-items:center;gap:8px;margin-right:8px;padding:6px 10px;border-radius:999px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04)}
.template-badge .badge-text{font-weight:900;font-size:0.9rem}
.template-badge svg{width:16px;height:16px;flex-shrink:0;display:block;fill:currentColor}

/* Template Shop Grid & Cards */
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:12px;margin-top:14px}

/* ensure cards stretch to column height and don't collapse */
.template-grid > .template-card{display:flex;flex-direction:column;width:100%;max-width:100%;align-self:stretch}

.template-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.04);transition:transform .16s ease,box-shadow .16s ease}
.template-card{box-shadow:0 6px 20px rgba(2,6,23,.45)}
.template-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(2,6,23,.6)}
.template-card .card-thumb{height:auto;display:block;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--tpl-color, #62d3ff), rgba(255,255,255,0.12));color:#061426;font-weight:900}
/* Make image fill the entire landscape frame and center via object-fit */
.template-card .card-thumb img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.template-card .card-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.template-card .tpl-title{color:var(--text);text-decoration:none;font-size:1.05rem}
.template-card .tpl-excerpt{color:var(--muted);font-size:0.95rem}
.template-card .card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.template-card .tpl-price{font-weight:900;color:var(--text);background:rgba(0,0,0,.12);padding:6px 8px;border-radius:8px}
.template-card .tpl-price.free{background:linear-gradient(90deg,#4dd9a6,#19b4ff);color:#061426}
.template-card .card-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:center;justify-content:center}
/* Ensure buttons inside cards don't truncate text */
.template-card .card-actions .btn{padding:10px 14px;min-width:86px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:10px;font-weight:900;position:relative;z-index:12}
..template-card .template-quickview{background:rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.04);color:var(--text);padding:10px 14px;transition:transform .14s ease,box-shadow .14s ease,background .12s ease;cursor:pointer}
.template-card .template-quickview:hover,.template-card .template-quickview:focus{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.32);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.template-card .template-quickview:focus-visible{outline:3px solid rgba(98,211,255,.28);outline-offset:3px}
.template-card .demo-btn{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--text);padding:10px 14px;transition:transform .14s ease,box-shadow .14s ease,background .12s ease;cursor:pointer}
.template-card .demo-btn:hover,.template-card .demo-btn:focus{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.32);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.template-card .demo-btn:focus-visible{outline:3px solid rgba(98,211,255,.18);outline-offset:3px}
.template-card .buy-btn{background:var(--brand);color:#061426;border:none;padding:10px 14px;transition:transform .14s ease,box-shadow .14s ease,filter .12s ease;cursor:pointer}
.template-card .buy-btn:hover,.template-card .buy-btn:focus{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35);filter:brightness(1.02)}
.template-card .buy-btn:focus-visible{outline:3px solid rgba(255,214,77,.18);outline-offset:3px}
/* Make share button text-friendly inside cards (override global circular style) */
.template-card .share-btn{width:auto;height:auto;min-width:86px;padding:10px 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.template-card .rating{color:#ffd34d;font-weight:900}
.tpl-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#061426;font-weight:900}
.template-card .tpl-excerpt{min-height:42px}
.template-card .tpl-title{display:block;margin-bottom:6px}
/* Thumb overlay for hover */
.template-card .card-thumb{position:relative}
.template-card .card-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.14));opacity:0;transition:opacity .18s ease;pointer-events:none}
.template-card:hover .card-thumb::after{opacity:1}
/* Quickview modal adjustments */
.quickview-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:200}
.quickview-modal[hidden]{display:none}
.quickview-panel{max-width:980px;width:calc(100% - 32px);background:var(--card);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,.06);position:relative}
.quickview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quickview-image img{width:100%;height:auto;border-radius:8px;display:block}
.quickview-title{margin:0 0 8px;font-weight:900}
.quickview-price{margin-bottom:8px}
.quickview-actions{display:flex;gap:8px;margin-top:12px}
.close-quickview{position:absolute;right:18px;top:12px;background:transparent;border:none;color:var(--muted);font-size:21px}

/* Badges and share */
.tpl-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);font-weight:800;margin-right:8px;margin-bottom:8px}
.tpl-badge:first-child{margin-left:0}
.tpl-price.free{background:linear-gradient(90deg,#4dd9a6,#19b4ff);color:#061426;padding:6px 8px;border-radius:8px;font-weight:900}
.share-btn{background:transparent;border:1px solid rgba(255,255,255,.06);padding:8px 10px;border-radius:8px;color:var(--text)}

/* Hover shine */
.template-card{position:relative;overflow:hidden}
.template-card::before{content:'';position:absolute;left:-50%;top:0;bottom:0;width:50%;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.12), rgba(255,255,255,0.03));transform:skewX(-20deg) translateX(-120%);opacity:0;transition:transform .6s ease,opacity .4s ease;pointer-events:none}
.template-card:hover::before{transform:skewX(-20deg) translateX(220%);opacity:1}

/* Responsive badge layout */
.tpl-badge{font-size:0.85rem}
.template-card .card-meta .sold{color:var(--muted);font-size:0.9rem}

/* ---------------------------------------------
   Responsive typography and grid
   - clamp() used for fluid font sizes
   - explicit grid breakpoints for templates
   --------------------------------------------- */

/* Fluid type for major headings */
h1.title{font-size:clamp(1.3rem, 3.2vw, 1.9rem)}
.section-title{font-size:clamp(1.25rem, 1.8vw, 1.4rem)}
.tpl-title{font-size:clamp(0.95rem, 1.2vw, 1.05rem)}
.tpl-excerpt{font-size:clamp(0.82rem, 1.0vw, 0.92rem)}

/* Buttons scale slightly */
.btn{font-size:clamp(0.82rem, 1.0vw, 0.92rem);padding:clamp(6px,1vw,8px) clamp(8px,2vw,10px)}

/* Template grid breakpoints: enforce 2 columns for desktop/tablet/mobile; 1 column only for very-small screens */
/* Default: 2 columns */
.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}

@media (min-width:1024px){
  /* Desktop: 2 columns */
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (min-width:640px) and (max-width:1023px){
  /* Tablet: 2 columns */
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:639px){
  /* Mobile: 2 columns */
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:420px){
  /* Very small phones: single column */
  .template-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:10px}
}

/* Quickview modal responsiveness */
@media (max-width:720px){
  .quickview-grid{grid-template-columns:1fr}
  .quickview-panel{padding:12px}
  .quickview-image{order:-1}
}

/* Desktop: 3 columns */
@media (min-width:981px){
  .template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
/* Mobile: 2 columns for compact, modern look (all sizes <=980px) */
@media (max-width:980px){
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .template-card .card-thumb{height:120px}
  .template-card .card-body{padding:12px}
}
/* Responsive, auto-fill grid ensures consistent horizontal flow */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;align-items:stretch}
.template-grid > *{height:auto}

/* Card layout: column on mobile, row on desktop (equal heights) */
 .template-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;height:100%;min-height:180px;align-items:stretch}
.template-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45)}

/* Image area - consistent aspect ratio on mobile, fixed width on desktop */
.template-thumb{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#071427,#061022);display:block;flex-shrink:0}
.template-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
@media (min-width:720px){
  /* Keep card stacked (image on top) for clearer, consistent layout across sizes */
  .template-card{flex-direction:column;min-height:260px}
  .template-thumb{width:100%;aspect-ratio:16/9;height:auto;flex:0 0 auto;border-radius:12px}
  /* small spacing tweak so body content breathes on wider screens */
  .template-card .template-body{padding-top:8px}
}

/* Body/content stretches to fill available card height and keeps CTA at bottom */
.template-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.template-body > *{min-width:0}
.template-card .template-title{font-weight:900;font-size:1.05rem;line-height:1.15;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3rem}
.template-excerpt{margin:8px 0;color:var(--muted);font-size:1rem;flex:1;min-width:0}

/* Ensure action buttons align to bottom and are visually consistent */
.svc-cta{display:flex;gap:8px;align-items:center;margin-top:auto;justify-content:flex-start;flex-wrap:wrap}
.svc-cta .btn{padding:8px 12px;border-radius:10px;white-space:nowrap}
.svc-cta .cta-btn{padding:8px 14px}
/* Price styling: center and visually distinctive */
.svc-cta .price-amount{flex-basis:100%;margin-left:0;margin-top:10px;align-self:center;display:block;text-align:center;font-weight:900;font-size:1.05rem;padding:6px 12px;border-radius:10px;color:transparent;background:linear-gradient(90deg,#62d3ff,#9fe3ff);-webkit-background-clip:text;background-clip:text;border:1px solid rgba(98,211,255,.06);background-color:rgba(9,20,34,.35);box-shadow:0 8px 18px rgba(98,211,255,.03)}

/* Ensure free/download links inside price-amount are visible and clickable */
.svc-cta .price-amount a,
.svc-cta .price-amount .free-link{color:var(--brand);background:none;-webkit-background-clip:unset;background-clip:unset;display:inline-block;padding:6px 12px;border-radius:8px;text-decoration:none;pointer-events:auto}
.svc-cta .price-amount a:hover{opacity:0.95}

/* Ensure free button is above price area and clickable */
.svc-cta{position:relative}
.svc-cta .btn.free-btn{position:relative;z-index:80;pointer-events:auto}
.svc-cta .price-amount{position:relative;z-index:10}

/* Prominent download button for free items */
.svc-cta .btn.free-btn{background:linear-gradient(90deg,#62d3ff,#9fe3ff);color:#061426;border:1px solid rgba(255,255,255,.06);font-weight:900;padding:10px 14px;border-radius:10px}
.svc-cta .btn.free-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.svc-cta .btn.free-btn:active{transform:translateY(0)}


/* Pagination: centered, pill-style, accessible */
.pagination-wrap{margin-top:28px;text-align:center}
.pagination-wrap .page-numbers{display:inline-flex;gap:8px;align-items:center;list-style:none;margin:0;padding:0}
.pagination-wrap .page-numbers li{margin:0}
.pagination-wrap .page-numbers a,.pagination-wrap .page-numbers span{display:inline-block;padding:8px 12px;border-radius:999px;background:transparent;color:var(--muted);min-width:40px;text-align:center;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}
.pagination-wrap .page-numbers a{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);color:#9fe3ff;border:1px solid rgba(255,255,255,0.04);text-decoration:none}
.pagination-wrap .page-numbers a:hover{transform:translateY(-3px);filter:brightness(1.05)}
.pagination-wrap .page-numbers .prev,.pagination-wrap .page-numbers .next{padding:6px 10px;min-width:auto}
.pagination-wrap .page-numbers .current{background:linear-gradient(90deg,#62d3ff,#9fe3ff);color:#061426}
.pagination-wrap .page-numbers .dots{color:var(--muted);padding:8px 10px}

@media (max-width:640px){
  .pagination-wrap .page-numbers{gap:6px}
  .pagination-wrap .page-numbers a,.pagination-wrap .page-numbers span{padding:6px 8px;min-width:34px}
}

/* SEO article block (shop) */
.shop-seo{margin:28px 0;padding:22px;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.03)}
.shop-seo{margin:28px 0;padding:22px;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.03)}
/* Title pill for SEO page header */
.shop-seo .section-header{display:flex;justify-content:center}
.shop-seo .section-header h2{margin:0 0 10px;font-size:1.25rem;text-align:center;display:inline-block;padding:10px 20px;border-radius:999px;background:linear-gradient(90deg,#1ec5ff,#62d3ff 45%,#ffd86a);color:#061426;font-weight:900;box-shadow:0 10px 30px rgba(30,197,255,.12),inset 0 1px rgba(255,255,255,.06)}
/* Constrain SEO article to a centered column and keep paragraphs left-aligned */
.shop-seo .seo-content{max-width:980px;margin:0 auto;text-align:left}
.shop-seo .seo-content p{color:var(--muted);line-height:1.8;margin:0 0 12px}
.shop-seo .seo-content .btn{background:linear-gradient(90deg,#2fb1ff,#5ee0ff);color:#061426;font-weight:800}

/* FAQ block styles */
.shop-faq{margin:18px 0;padding:20px;border-radius:12px;background:linear-gradient(180deg,#051224,#0b1630);border:1px solid rgba(255,255,255,.02)}
.shop-faq .section-header{display:flex;justify-content:center;margin-bottom:12px}
.shop-faq .section-header h2{display:inline-block;padding:8px 18px;border-radius:999px;background:linear-gradient(90deg,#ffd86a,#62d3ff);color:#061426;font-weight:900}
.shop-faq .faq-content{max-width:980px;margin:0 auto;color:var(--muted);line-height:1.8;text-align:left}
.shop-faq .faq-content h3,.shop-faq .faq-content h4{color:var(--text);margin-top:14px}
.shop-faq .faq-content p{margin:0 0 12px}

/* Accordion / FAQ styles */
.shop-faq details.faq-item{border-radius:10px;padding:8px;margin-bottom:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,.02)}
.shop-faq .faq-intro{margin-bottom:10px}
.shop-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-weight:900;color:var(--text);border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));transition:background .18s ease,transform .12s ease}
.shop-faq summary:hover{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));transform:translateY(-2px)}
.shop-faq summary:focus{outline:2px solid rgba(98,211,255,.18);outline-offset:4px}
.shop-faq summary::-webkit-details-marker{display:none}
.shop-faq .faq-body{overflow:hidden;transition:max-height .36s cubic-bezier(.2,.9,.3,1),opacity .28s ease,padding .28s ease;color:var(--muted);padding:0 14px}
.shop-faq .faq-body p{margin:12px 0}
.shop-faq summary::after{content:'';width:18px;height:18px;display:inline-block;border-right:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);transform:rotate(45deg);transition:transform .28s cubic-bezier(.2,.9,.3,1),border-color .2s ease;opacity:0.95}
.shop-faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}

/* Page title row: title + action */
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.page-title-actions{display:flex;gap:10px;align-items:center}
.btn-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:900;background:linear-gradient(90deg,#42c0ff,#7de0ff 45%,#ffd86a);color:#061426;border:none;box-shadow:0 12px 30px rgba(66,192,255,.12),0 4px 10px rgba(0,0,0,.35);transition:transform .14s ease,box-shadow .14s ease}
.btn-pill:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(66,192,255,.16),0 6px 18px rgba(0,0,0,.4)}
.btn-pill:active{transform:translateY(0)}

@media (max-width:720px){
  .page-title-row{flex-direction:column;align-items:flex-start}
  .page-title-actions{width:100%;display:flex;justify-content:flex-start}
}



/* Small polish: make preview placeholders consistent */
.template-thumb.placeholder{display:grid;place-items:center;padding:12px;color:var(--muted);font-weight:700}

/* Quick View / small screens adjustments */
@media(max-width:520px){
  .template-grid{gap:12px}
  .template-card{min-height:200px}
  .template-thumb{aspect-ratio:16/10}
}

/* Ensure card title wraps and doesn't overflow */
.template-card .template-title a{display:block;word-break:break-word;max-width:100%;overflow-wrap:break-word}
.template-card .template-thumb img{border-radius:8px}
.price-tag{display:inline-flex;gap:8px;align-items:center}
.price-current{font-weight:900;color:#62d3ff}
.price-old{text-decoration:line-through;color:rgba(255,255,255,.45);font-weight:700}
.rating{color:#ffd34d}

/* Compact front-page template list */
.template-front-list{display:flex;gap:12px;margin:12px 0 18px}
.template-mini{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.02);padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.04)}
.template-mini .mini-thumb{width:64px;height:48px;flex:0 0 64px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#061427,#071427);display:grid;place-items:center}
.template-mini .mini-thumb img{width:100%;height:100%;object-fit:cover}
.template-mini .tpl-placeholder{padding:6px;color:var(--muted);font-weight:700;text-align:center}
.template-mini .mini-body{min-width:0}
.template-mini .mini-body a{display:block;color:#eaf0ff;font-weight:800}
.template-mini .mini-price{color:#62d3ff;font-weight:900;margin-top:6px}
.template-mini .mini-demo .btn{padding:6px 8px;font-size:0.9rem;border-radius:8px}
@media (max-width:760px){.template-front-list{flex-direction:column}.template-mini{gap:8px}}

/* Controls layout */
.template-shop-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.template-controls-left{flex:1}
.template-controls-right{display:flex;gap:8px;align-items:center}
.template-search .input{min-width:220px}

/* Quick View Modal */
.quickview-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:200;}
.quickview-modal[hidden]{display:none}
.quickview-panel{max-width:980px;width:calc(100% - 32px);background:var(--card);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,.06)}
.quickview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quickview-image img{width:100%;height:auto;border-radius:8px;display:block}
.quickview-title{margin:0 0 8px;font-weight:900}
.quickview-price{margin-bottom:8px}
.quickview-actions{display:flex;gap:8px;margin-top:12px}
.close-quickview{position:absolute;right:18px;top:12px;background:transparent;border:none;color:var(--muted);font-size:21px}




/* Single Template Styles */
.template-single{padding:20px 0}
.breadcrumbs{color:var(--muted);font-size:1rem;margin-bottom:10px}
/* Hero grid: left content + right sidebar */
.template-hero{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start;margin-bottom:18px}
.template-title{font-size:1.9rem;line-height:1.15;margin:0 0 8px}

/* Sidebar column (image above price) */
.hero-right{display:flex;flex-direction:column;gap:18px;align-items:stretch}

/* Rating badge — more vertical (taller) layout to avoid a wide/landscape look */
.hero-left .template-score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#06b6d4 0%,#7c3aed 100%);color:#fff;padding:18px 24px;border-radius:14px;box-shadow:0 14px 40px rgba(12,18,28,.6);max-width:300px;min-height:128px;width:auto;text-align:center}
.hero-left .template-score .score-icon{display:block;margin:0 auto 6px}
.hero-left .template-score .score-icon svg{width:32px;height:32px;fill:currentColor;opacity:0.98}
.hero-left .template-score .score-body{display:flex;flex-direction:column;align-items:center}
.hero-left .template-score .score-value{font-size:21px;font-weight:900;line-height:1;margin-bottom:2px}
.hero-left .template-score .score-meta{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;opacity:0.95}
.hero-left .template-score .stars{display:flex;gap:4px}
.hero-left .template-score .star{width:12px;height:12px;fill:rgba(255,255,255,0.98)}
.hero-left .template-score .star.empty{fill:rgba(255,255,255,0.18)}
@media(max-width:900px){.hero-left .template-score{max-width:160px;padding:10px;min-height:96px}.hero-left .template-score .score-value{font-size:19px}}
.single-thumb{display:block;border-radius:18px;padding:6px;background:linear-gradient(180deg,#0b1420,#071022);overflow:hidden;box-shadow:0 18px 50px rgba(9,22,41,.7), 0 6px 18px rgba(98,211,255,.04);border:1px solid rgba(255,255,255,.04);position:relative;transition:transform .28s ease,box-shadow .28s ease}
.single-thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(11,18,32,0),rgba(11,18,32,.6));pointer-events:none}
.hero-right .single-thumb img{width:100%;height:100%;display:block;object-fit:cover;border-radius:12px;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.single-thumb:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(9,22,41,.8),0 14px 36px rgba(98,211,255,.06)}
.single-thumb:hover .single-thumb-img{transform:scale(1.05)}
/* optional small overlay actions if present */
.single-thumb .thumb-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:40}
.single-thumb .thumb-actions .btn{padding:6px 10px;border-radius:10px;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}



/* Price box styling and spacing */
.price-box{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.06);text-align:center;margin-top:0}
.price-box .price-old{margin-bottom:8px;display:block}
.price-current{font-weight:900;color:#62d3ff;font-size:1.45rem}
.sale-info{margin-top:12px;display:flex;flex-direction:column;gap:8px;align-items:center}
.sale-countdown{color:#ffd34d;font-weight:900}
.scarcity{background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;padding:8px 12px;border-radius:14px;font-weight:900}
.price-box.ended .sale-countdown{opacity:.6;text-decoration:line-through}
.price-old{font-weight:700;color:rgba(255,255,255,.55);text-decoration:line-through;font-size:0.95rem}

/* Make sidebar sticky on wide screens so it doesn't collide with content when scrolling */
@media(min-width:1160px){.hero-right{position:sticky;top:96px}}
.template-badges{margin:8px 0 12px;display:flex;gap:8px}
.template-badges .template-badge{margin-right:8px}
.template-single .template-body{display:grid;grid-template-columns:2fr 360px;gap:18px;position:relative}
/* Ensure main content and sidebar occupy correct grid columns */
.template-single .template-body > section{grid-column:1}
.template-single .template-body > aside{grid-column:2}
/* Force sidebar into the second grid column and align it to top */
.template-sidebar{position:relative;grid-column:2;align-self:start}
/* Constrain sidebar inner width so sticky behavior doesn't expand it full-width */
.template-sidebar .sidebar-inner{width:100%;max-width:360px;margin-left:auto;box-sizing:border-box}

/* Layout for right column: keep elements stacked tightly under price-box */
.hero-right{display:flex;flex-direction:column;gap:8px}
.hero-right .related-posts-card{margin-top:0;position:relative;z-index:12;pointer-events:auto}
.hero-right .related-posts-card h2{margin-top:0;margin-bottom:8px}
/* Ensure left-side template cards don't overlap and block interaction */
.template-grid .template-card{position:relative;z-index:5}
/* Make sidebar content visually separated */
.template-sidebar .card{margin-bottom:12px}
/* Inner wrapper is sticky on wide screens */
.template-sidebar .sidebar-inner{position:static}
@media(min-width:1160px){.template-sidebar .sidebar-inner{position:sticky;top:64px;z-index:1 /* reduced to avoid overlapping content */}}
/* When bottom reached, switch to absolute inside the .template-body container */
.template-sidebar .sidebar-inner.stuck-bottom{position:absolute;bottom:12px;top:auto;width:100%;z-index:1;right:0}
.template-features h2,.template-includes h2,.template-seo h2,.template-features h4,.template-includes h4,.template-seo h4{margin:0 0 8px}
.template-features ul{margin:0;padding-left:18px}
.template-includes p{margin:0}

/* Template Description card */
.template-description{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.04);margin:12px 0}
.template-description h2{margin:0 0 10px}
.template-desc-body{color:var(--muted);line-height:1.7;font-size:1rem} 
.template-related{margin-top:28px;position:relative;z-index:3 /* ensure related templates appear above sticky sidebar if they overlap */}
.archive-desc{color:var(--muted);margin:6px 0 14px}
.archive-desc p{margin:0 0 10px;line-height:1.6;text-align:left}
.archive-desc strong{color:#62d3ff;font-weight:800}

/* Product description specific (same style but separate class) */
.product-desc{margin-top:6px}
.product-desc p{margin:0 0 10px;line-height:1.6;text-align:left}
.product-desc ol{margin:8px 0 12px 1.2rem;padding-left:18px}
.product-desc li{margin-bottom:8px}

.template-info-grid{display:grid;grid-template-columns:1fr minmax(200px,320px);gap:18px;align-items:stretch;margin-top:12px}
@media (max-width:1160px){.template-info-grid{grid-template-columns:1fr;gap:12px}
  /* When stacked, ensure main content comes before sidebar */
  .template-single .template-body > section{grid-column:1;grid-row:1}
  .template-single .template-body > aside{grid-column:1;grid-row:2}
}
.template-benefits{background:linear-gradient(180deg, rgba(18,26,48,.7), rgba(10,16,28,.6));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.04);margin:0}
.template-benefits .benefits-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0;padding:0;list-style:none}
.template-benefits .benefits-list li{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));padding:10px 12px;border-radius:10px;font-weight:800;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.03)}
.template-benefits .benefits-list li::before{content:'✓';display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:linear-gradient(180deg,#62d3ff,#9fe3ff);color:#061426;font-weight:900}

.template-benefits h2{ text-align:center; margin:0 0 12px; background: linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Gradient only for Garansi & Support title */
.template-info-grid .template-guarantee h2{ text-align:left; margin:0 0 12px; background: linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.template-guarantee{background:linear-gradient(90deg,#061427,#071427);padding:18px;border-radius:14px;color:#eaf0ff;margin:0;border:1px solid rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px;transition:transform .18s ease;max-width:100%;box-sizing:border-box;width:100%;min-height:0}
.guarantee-panel{display:flex;gap:12px;align-items:center}
.guarantee-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:84px;padding:8px;border-radius:12px;background:linear-gradient(180deg,#ffd34d,#ffb46a);color:#0b1220;font-weight:900}
.g-num{font-size:1.9rem;line-height:1}
.g-unit{font-size:.8rem;opacity:.95}
.guarantee-text{color:var(--muted);font-weight:700}

@media(min-width:900px){
  /* nudge guarantee panel higher and center number/title */
  .template-info-grid .template-guarantee{transform:translateY(-14px);align-self:stretch;height:100%}
  .template-info-grid .template-guarantee h2{ text-align:center; margin-bottom:6px }
  .template-info-grid .template-guarantee .guarantee-panel{ justify-content:center; align-items:center; gap:18px }
  /* keep descriptive text readable on wide layouts */
  .template-info-grid .template-guarantee .guarantee-text{ text-align:left; max-width:260px }
}

@media(max-width:900px){.template-info-grid{grid-template-columns:1fr;}.template-benefits .benefits-list{grid-template-columns:1fr}.guarantee-panel{flex-direction:row;justify-content:flex-start}}


.template-guarantee{background:linear-gradient(90deg,#061427,#071427);padding:12px;border-radius:12px;color:#eaf0ff;margin:12px 0}
.template-testimonials .testi{background:var(--card);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.06);margin-bottom:10px}
.template-faq .faq-item{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);padding:10px;border-radius:8px;margin-bottom:8px}

.post-content{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.06);line-height:1.7;color:var(--text)}

.template-cta .cta-btn{width:100%;display:inline-block}
.template-share a{margin-right:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);font-weight:800}

/* New compact share UI */
.share-row{display:flex;align-items:center;gap:12px}
.share-label{padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.03);font-weight:900}
.share-icons{display:flex;gap:8px;align-items:center}
.share-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;position:relative;overflow:hidden}
.share-btn svg{width:18px;height:18px}
.share-btn:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.share-btn:focus{outline:2px solid #62d3ff;outline-offset:2px}
/* tooltip from title attribute */
.share-btn[title]:hover::after, .share-btn[title]:focus::after{content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(11,18,32,.95);color:#cfe6ff;padding:6px 8px;border-radius:8px;font-weight:700;white-space:nowrap;box-shadow:0 8px 18px rgba(0,0,0,.5);z-index:220}
/* ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
/* chips hover & ripple */
.highlight-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-weight:800;min-width:120px;text-align:center;cursor:pointer;position:relative;overflow:hidden}
.highlight-chip:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.4)}
.highlight-chip:focus{outline:2px solid #62d3ff;outline-offset:3px}
/* visually-hidden for aria status */
.sr-only{position:absolute;border:0;padding:0;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;clip-path:inset(50%);}
@media (max-width:560px){.share-label{display:none}}

/* Highlight strip above breadcrumbs: features, rating snippet, CTAs */
.template-highlight{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:12px 0;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.04)}
.highlight-features{display:flex;gap:8px;flex-wrap:wrap}
.highlight-chip{background:rgba(255,255,255,.03);padding:6px 10px;border-radius:999px;font-weight:800;color:var(--text);border:1px solid rgba(255,255,255,.04)}
.highlight-rating{justify-self:center;text-align:center}
.rating-pill{background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;padding:6px 10px;border-radius:999px;font-weight:900}
.highlight-actions{display:flex;gap:8px;justify-content:flex-end}
.btn.small{padding:6px 10px;font-size:0.92rem;border-radius:10px}
.cta-btn.small{padding:8px 12px;font-size:0.95rem;border-radius:10px}
@media (max-width:900px){.template-highlight{grid-template-columns:1fr;gap:8px;text-align:center}.highlight-actions{justify-content:center}}

/* Hero inline highlight to fill empty left space (below title) */
.hero-highlight{display:grid;grid-template-columns:160px 1fr auto;gap:18px;align-items:center;margin-top:14px;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.04);opacity:0;transform:translateY(8px);transition:opacity .48s ease,transform .48s ease}
.hero-highlight.visible{opacity:1;transform:none}
.hero-left{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-chips{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.highlight-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-weight:800;min-width:120px;text-align:center}
.hero-rating-wrap{margin-top:6px}
.rating-pill{background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;padding:8px 12px;border-radius:14px;font-weight:900;display:inline-block}
.hero-summary{color:var(--muted);font-weight:700;line-height:1.6}
.hero-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.hero-review-snippet{font-weight:700;color:var(--text);background:rgba(255,255,255,.02);padding:8px 12px;border-radius:10px;max-width:320px;text-align:right}
.hero-action-buttons{display:flex;gap:8px}
/* Chips wrap: place above description and allow scrolling when many */
.hero-chips-wrap{grid-column:1/-1;margin-bottom:10px;display:flex;gap:12px;align-items:center}
.hero-chips{display:flex;flex-wrap:wrap;gap:12px;max-height:140px;overflow:auto;padding-right:6px}
.hero-chips.has-more{max-height:140px}
.hero-chips.expanded{max-height:600px}
.chips-toggle{margin-left:6px}
/* subtle scroll fade on right */
.hero-chips{position:relative}
/* subtle right fade that only appears when overflow exists */
.hero-chips::after{content:'';position:absolute;right:0;top:0;width:28px;height:100%;pointer-events:none;background:linear-gradient(90deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.35) 60%, rgba(11,18,32,0.6) 100%);display:none;opacity:0;transform:translateX(6px);transition:opacity .18s ease, transform .18s ease;border-radius:0 10px 10px 0}
.hero-chips.overflowing::after{display:block;opacity:1;transform:none}
/* when user scrolls a little, hide overlay briefly to avoid visual block */
.hero-chips.scrolling::after{opacity:0;transform:translateX(6px);}
.hero-chips.scrolled-end::after{opacity:0;transform:translateX(6px)}
.hero-chips.expanded::after{display:none} 
.hero-chips::-webkit-scrollbar{width:8px;height:8px}
.hero-chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:6px}
@media (max-width:1100px){.hero-highlight{grid-template-columns:120px 1fr;}.hero-actions{align-items:flex-start;text-align:left}}
@media (max-width:900px){.hero-highlight{grid-template-columns:1fr;gap:12px;text-align:center}.hero-left{align-items:center}.hero-chips{flex-direction:row;justify-content:center;max-height:80px}.highlight-chip{min-width:0;padding:8px 10px}.hero-actions{align-items:center}.hero-review-snippet{max-width:100%;text-align:center}.hero-chips::after{display:none}}
@media (prefers-reduced-motion: reduce){.hero-highlight{transition:none;transform:none;opacity:1}}
@media (max-width:1160px){
  .template-hero{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start}
  .template-hero > div{grid-row:2}
  .hero-right{grid-row:1;align-self:start}
  .template-single .template-body{grid-template-columns:1fr}
  .template-benefits .benefits-list{grid-template-columns:1fr}
}

/* small polish for related cards */
.template-card{align-items:flex-start;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);display:flex;gap:12px;flex-direction:column}
.template-card .price-body{padding:0}

/* Card thumbnail: force landscape ratio and center the image */
.card-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));display:block;margin:0 0 12px;position:relative}
.card-thumb img,.card-thumb picture img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:0}

/* Fallback placeholder center alignment */
.tpl-placeholder{display:grid;place-items:center;padding:12px;color:var(--muted);font-weight:700;text-align:center}

/* Modern content cards (SEO / Fitur / Termasuk) */
.content-cards{display:grid;gap:12px;margin-top:12px}
@media(min-width:980px){.content-cards{grid-template-columns:minmax(320px,1fr) 360px;align-items:start}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:120px} 
.card h2{margin:0 0 10px;font-size:1.3rem;font-weight:900;background:linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.card p{margin:0;color:var(--muted);line-height:1.6}

/* Features: two-column list on wide screens and nice bullets */
.features-card ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}

/* Related posts card */
.related-posts-card{padding:12px}
.related-filter{margin-bottom:10px}
.related-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cat-btn{background:transparent;border:1px solid rgba(255,255,255,.06);padding:8px 12px;border-radius:10px;font-weight:800;color:var(--text);cursor:pointer}
.cat-btn.active{background:linear-gradient(90deg,#62d3ff,#ffd34d);color:#0b1220;border-color:rgba(255,255,255,.06);box-shadow:0 8px 18px rgba(0,0,0,.35)}

/* Category pill used in article heading */
.cat-pill{display:inline-block;padding:8px 14px;border-radius:12px;font-weight:900;background:linear-gradient(90deg,#62d3ff,#ffd34d);color:#0b1220;box-shadow:0 8px 18px rgba(0,0,0,.35)}

.article-head{display:flex;align-items:center;justify-content:flex-start;gap:18px;margin-bottom:12px}
.article-head .share-buttons{margin-left:auto;display:flex;gap:8px;align-items:center}
.share-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);background:transparent;color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:16px;transition:transform .14s ease,box-shadow .14s ease,opacity .12s ease}
.share-btn svg{display:block;width:18px;height:18px}
.share-native{background:linear-gradient(90deg,#9be1ff,#6ac7ff);color:#03212a;box-shadow:0 8px 20px rgba(106,199,255,.12);border-color:transparent}
.share-twitter{background:#1DA1F2;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(29,161,242,.12)}
.share-facebook{background:#1877F2;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(24,119,242,.12)}
.share-whatsapp{background:#25D366;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(37,211,102,.12)}
.share-copy{background:linear-gradient(90deg,#ffd34d,#62d3ff);color:#0b1220;border-color:transparent;box-shadow:0 8px 20px rgba(255,211,77,.08)}
.share-btn:hover{transform:translateY(-4px);opacity:0.98}
.share-btn:focus{outline:3px solid rgba(255,255,255,.06);outline-offset:3px}
.share-btn.copied{background:#62d3ff;color:#0b1220;border-color:rgba(255,255,255,.06)}

.related-posts-list{display:grid;gap:12px}
.related-post{display:flex;gap:12px;align-items:flex-start;padding:8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent);border:1px solid rgba(255,255,255,.03)}
.related-post .rp-thumb img{width:110px;height:66px;object-fit:cover;border-radius:8px}
.related-post .rp-title{font-weight:800;color:#eaf0ff;font-size:1rem}
.related-post .rp-meta{color:var(--muted);font-size:0.85rem;margin-top:6px}
.related-posts-list .loading{padding:12px;text-align:center;color:var(--muted)}
@media(min-width:720px){.features-card ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.features-card li{position:relative;padding-left:28px;color:var(--text);font-weight:700}
.features-card li::before{content:'✓';position:absolute;left:0;top:0;color:#62d3ff;background:rgba(255,255,255,.03);width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:900}

/* Includes card smaller type */
.includes-card p{font-weight:700;color:var(--muted)}

/* Includes chips */
.includes-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.include-chip{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);padding:8px 12px;border-radius:10px;font-weight:800;color:var(--text);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.include-chip:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(0,0,0,.36)}
.include-chip:focus{outline:2px solid #62d3ff;outline-offset:3px}
/* When includes card is present keep card spacing modest */
.includes-card{padding-top:14px;padding-bottom:14px}

/* Footer recent posts */
.footer-recent-item{display:flex;gap:12px;align-items:stretch;text-decoration:none;padding:8px;border-radius:10px;transition:background .12s ease}
.footer-recent-item:hover{background:rgba(255,255,255,.02)}
.footer-recent-thumb-wrap{width:54px;flex:0 0 54px;display:block;border-radius:8px;overflow:hidden;align-self:stretch;height:auto}
.footer-recent-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.footer-recent-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:4px 0}
.footer-recent-title{font-size:0.96rem;margin:0}
.footer-recent-item .footer-recent-title{white-space:normal;overflow:hidden;text-overflow:ellipsis}

/* Fallback highlights card */
.highlights-card{padding:14px;}
.highlights-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.highlights-list li{padding-left:28px;position:relative;color:var(--text);font-weight:800}
.highlights-list li::before{content:'✔';position:absolute;left:0;top:0;color:#62d3ff;background:transparent;border-radius:6px;display:grid;place-items:center}

@media (max-width:720px){.includes-chips{justify-content:center}}

/* Rating in card style */
.rating-pill{display:inline-block;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;font-weight:900}

/* FAQ accordion — modern style */
.template-faq{margin-top:18px}
.faq-list{display:grid;gap:8px}
.faq-item{border:1px solid rgba(255,255,255,.05);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent)}
.faq-item summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:800}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .caret{transition:transform .22s ease}
.faq-item[open] summary .caret{transform:rotate(90deg)}
.faq-item div{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .28s ease;padding-bottom:0}
.faq-item.opened div{padding:12px 16px}

/* small polish */
.template-seo{padding-bottom:6px;min-height:120px;display:block}
.template-seo p{margin:0 0 14px;line-height:1.65;white-space:pre-line;text-align:left;word-break:normal;hyphens:auto}
.template-seo p + p{margin-top:8px}
.template-seo ol{margin:8px 0 14px 1.2rem;padding-left:18px}
.template-seo ol li{margin-bottom:8px;line-height:1.6}

/* Numbered headings pattern: bold prefix then description — responsive */
.template-seo p strong{color:#62d3ff;font-weight:900;display:inline-block;margin-right:10px}
@media (min-width:720px){.template-seo p strong{min-width:140px}}
@media (max-width:720px){.template-seo p strong{display:block;margin-bottom:6px}}

/* Lists: spacing and clearer items */
.template-seo ol, .template-seo ul{margin:8px 0 12px 1.1rem;padding-left:18px}
.template-seo li{margin-bottom:8px;line-height:1.6}

/* Inline links and highlights */
.template-seo a{color:#62d3ff;text-decoration:underline}
.template-seo mark{background:rgba(98,211,255,.08);padding:2px 6px;border-radius:6px}


/* Code styling for SEO Summary: inline and blocks */
.template-seo code{background:rgba(255,255,255,.02);padding:2px 6px;border-radius:6px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;font-size:.92rem}
.template-seo pre{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.03);padding:12px;border-radius:10px;overflow-x:auto;white-space:pre;line-height:1.5;margin:0 0 12px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;font-size:.95rem}
.template-seo pre code{background:transparent;padding:0;border-radius:0}

.includes-card{padding-top:14px;padding-bottom:14px;min-height:120px;display:flex;flex-direction:column;justify-content:center}
.highlights-card{padding:14px;min-height:120px;display:flex;flex-direction:column;gap:8px;justify-content:center} 

@media (prefers-reduced-motion: reduce){.faq-item div,.hero-highlight{transition:none!important}}


/* Taxonomy (Theme) styles */
.term-hero{padding:36px 0 24px;background:linear-gradient(90deg,#061427,#071427);background-size:cover;background-position:center;color:#eaf0ff;border-radius:12px;margin-bottom:14px}
.term-hero .term-title{font-size:1.8rem;margin:0}
.term-hero .term-tagline{color:#bce9ff;margin-top:8px;font-weight:700}
.term-hero .term-desc{color:var(--muted);margin-top:10px}
.term-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.template-search .input{min-width:220px}
.template-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Keep two columns on most mobile viewports; collapse to one column on very small screens */
@media (max-width:360px){.template-grid{grid-template-columns:1fr}}


/* Theme-specific hero fallback gradients */
.term-hero[data-slug="wordpress"]{background:linear-gradient(90deg,#21759b,#1ea0d7);color:#fff}
.term-hero[data-slug="blogger"]{background:linear-gradient(90deg,#ff8a00,#ffb16a);color:#0b1220}
.term-hero[data-slug="html"]{background:linear-gradient(90deg,#6a1b9a,#ab47bc);color:#fff}
.term-hero[data-slug="amp"]{background:linear-gradient(90deg,#ffb74d,#ff8a65);color:#0b1220}

/* Taxonomy index styles */
.tax-index .theme-list{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:720px){.tax-index .theme-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1160px){.tax-index .theme-list{grid-template-columns:repeat(3,1fr)}}
.theme-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
.theme-hero{height:140px;display:block;background-size:cover;background-position:center}
.theme-body{padding:12px}
.theme-name{margin:0 0 6px;font-weight:900}
.theme-tagline{color:#bce9ff;font-weight:700;margin-bottom:8px}
.theme-desc{color:var(--muted);margin-bottom:10px}
.theme-previews{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.theme-preview{display:inline-block;padding:6px 8px;background:rgba(255,255,255,.02);border-radius:8px;border:1px solid rgba(255,255,255,.04)}
.theme-meta{display:flex;gap:10px;align-items:center;justify-content:space-between}
.theme-meta .count{color:var(--muted)}


/* Color variants */
.template-badge.badge-wordpress{background:linear-gradient(90deg,#21759b,#1ea0d7);color:#ffffff}
.template-badge.badge-blogger{background:linear-gradient(90deg,#ff8a00,#ffb16a);color:#0b1220}
.template-badge.badge-html{background:linear-gradient(90deg,#6a1b9a,#ab47bc);color:#ffffff}
.template-badge.badge-amp{background:linear-gradient(90deg,#ffb74d,#ff8a65);color:#0b1220}

/* Ensure price head shows badges neatly */
.price-head{display:flex;align-items:center;gap:12px}

/* Responsive: show select on small screens and hide desktop nav */
@media (max-width:900px){
  .template-filter{display:none}
  .template-filter-mobile{display:block}
  /* Chips responsive: stack below header and reduce visual weight — do not override the mobile gradient set earlier */
  .chips{padding:4px 0;border-radius:0;border-top:none;border-bottom:1px solid rgba(255,255,255,.04);margin-top:6px}
  .chips-scroll{padding:4px 10px;scroll-padding-left:12px}
  .chip{padding:5px 10px;font-size:0.9rem;min-height:26px;margin-right:8px}
}
.price-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.26);display:flex;flex-direction:column;min-width:0}
.price-head{padding:14px;background:linear-gradient(90deg,#62d3ff,#ffd34d);color:#0b1220;font-weight:900}
.price-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.list li{display:flex;align-items:center;gap:8px}

.services{padding:22px 0 10px;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.services-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
.svc{display:flex;flex-direction:column;gap:10px;min-width:0;transition:transform .15s ease,border-color .15s ease}
.svc:hover{transform:translateY(-2px);border-color:rgba(98,211,255,.28)}
.svc h3{margin:0;font-size:1.05rem;line-height:1.25;font-weight:900}
.svc p{margin:0;color:var(--muted)}

.pricing{padding:22px 0;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06)}
.price-grid{grid-template-columns:repeat(1,minmax(0,1fr))}

.testi{padding:22px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%)}
.testi-grid{grid-template-columns:repeat(1,minmax(0,1fr))}

.faq{padding:22px 0;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06)}
.faq-item{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px}

.contact{padding:60px 0;background:radial-gradient(1000px 420px at 50% 0%, rgba(76,201,240,.08), transparent 60%),linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06)}
.contact-grid{display:grid;gap:40px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-details{display:grid;gap:24px;margin-top:12px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.icon-box{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#62d3ff}
.detail-title{margin:0 0 4px;font-size:1rem;font-weight:700;color:#eaf0ff}
.detail-text{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.5}

.contact-form-wrapper{background:var(--card);padding:32px;border-radius:24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.2)}
.form{display:grid;gap:16px}
.input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:#eaf0ff;transition:border-color .2s, background .2s,font-size .12s; font-size:0.95rem}
.input:focus{outline:none;border-color:#62d3ff;background:rgba(0,0,0,.4)}
.input::placeholder{color:rgba(255,255,255,.3)}

/* Centered modern contact form */
.wrap.contact{display:block;text-align:center}
.wrap.contact .section-title,.wrap.contact .section-desc{margin-left:auto;margin-right:auto;max-width:820px;text-align:center}
.wrap.contact .contact-form-wrapper{max-width:720px;margin:24px auto;padding:36px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));box-shadow:0 30px 70px rgba(2,8,20,.75);border:1px solid rgba(255,255,255,.04)}
.wrap.contact .contact-form{display:block;text-align:left}
.wrap.contact .contact-form label{display:block;font-weight:700;color:var(--muted);margin-bottom:8px}
.wrap.contact .contact-form input,.wrap.contact .contact-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text);margin-bottom:12px}
.wrap.contact .contact-form textarea{min-height:130px}
.wrap.contact .form-actions{display:flex;justify-content:center;margin-top:8px}
.wrap.contact .btn-pill{padding:12px 30px;border-radius:999px;background:linear-gradient(90deg,#22b8ff,#ffd36b);color:#061426;font-weight:900;box-shadow:0 16px 50px rgba(34,184,255,.08);border:none;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.wrap.contact .btn-pill:hover{transform:translateY(-3px);box-shadow:0 22px 64px rgba(34,184,255,.12)}

@media (max-width:980px){
  .wrap.contact .contact-form-wrapper{padding:20px;margin:18px}
  .wrap.contact .contact-form{padding:0}
}

select.input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239fb2d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.full-width{width:100%;justify-content:center;padding:14px;font-size:1rem}

/* FOOTER */
.footer{margin-top:24px;flex-shrink:0;padding:0}
.footer-layout{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:60px}
.footer-brand{flex:1 1 320px}
.footer-links{flex:0 0 auto;min-width:140px}
.footer-group{flex:2 1 600px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1024px){.footer-group{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.footer-group{grid-template-columns:1fr}}
.footGlass{width:100%;margin:0;padding:18px 16px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));border-top:1px solid rgba(255,255,255,.18);backdrop-filter:saturate(160%) blur(10px);text-align:center}

/* MEDIA QUERIES */
@media (min-width:720px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (min-width:900px){
  html,body{padding-top:var(--headH)}
  /* Header CTA: show dedicated CTA on desktop and hide duplicate CTA inside nav */
  .header-cta{display:inline-flex;order:2;margin-left:8px;margin-right:8px}
  .menu-btn{order:3}
  .head nav.primary .cta-btn{display:none}
  }

/* Reduce base font-size slightly on very small screens to avoid layout issues */
@media (max-width:480px){
  html,body{font-size:17px}
}
  nav.primary{display:flex;align-items:center;gap:12px;margin-right:12px;order:1}
  /* Desktop: show anchors inside primary (static or generated) */
  nav.primary .nav-link{display:inline-flex;padding:8px 10px;font-size:0.98rem}
  .menu-btn{order:2}
  .head{padding-left:20px;padding-right:20px;min-height:var(--headH);align-items:center}
  .chips{z-index:9999;left:0;right:0;border-radius:0}
  .head .brand{font-size:1.8rem;letter-spacing:-0.5px}
  .hero-grid{grid-template-columns:1.2fr 1fr}
  .usp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Desktop: templates grid use 3 columns to avoid overly large cards */
  .template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .testi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr 1.2fr;align-items:start;gap:80px}
}

@supports (content-visibility: auto){
  .services,.pricing,.testi,.faq,.contact{content-visibility:auto;contain-intrinsic-size:800px}
}
/* Card-specific share button override (ensure Share label not clipped) */
.template-card .card-actions .share-btn,
.template-card .card-actions .btn.share-btn{
  width: auto !important;
  height: auto !important;
  min-width: 96px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* MOBILE: hide desktop primary nav & header CTA; keep hamburger and chips visible */
@media (max-width:899px){
  /* Hide the full primary navigation on mobile to avoid layout break */
  nav.primary{display:none !important; visibility:hidden !important}
  /* Hide the header CTA; move CTA to sidebar if needed (sidebar already has actions)
     This prevents CTA overlapping on small screens */
  .header-cta{display:none !important; visibility:hidden !important}
  /* Ensure menu button is visible and ordered appropriately */
  .menu-btn{display:inline-flex !important; order:2}
  /* Ensure chips remain visible as alternative quick nav */
  .chips{display:block !important}

  /* Chips: allow horizontal scrolling and smaller chips on mobile */
  .wrap.chips-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .wrap.chips-scroll::-webkit-scrollbar{height:6px}
  .wrap.chips-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}
  .chip{white-space:nowrap;padding:6px 10px;font-size:0.92rem}

  /* Hero: stack columns and hide heavy right side (image) to speed mobile */
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-grid .hero-right{display:none}
  .hero-grid .hero-left h1{font-size:1.45rem;line-height:1.18}
  .head{padding:8px 12px}

  /* Sidebar CTA: show mobile-only consult button */
  .consult-mobile{display:block !important;margin-bottom:12px}
  .cta-btn.full-width{display:block;width:100%;padding:12px 14px;border-radius:10px;text-align:center}

  /* USP (features) — make compact 2-column grid and vertical cards on mobile */
  .usp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .usp .card{flex-direction:column;align-items:flex-start;padding:12px;border-radius:12px;min-height:auto}
  .usp .ico{width:44px;height:44px;border-radius:10px;margin-bottom:10px}
  .usp .card b{display:block;margin-bottom:6px;font-size:1.02rem}
  .usp .card small{display:block;color:var(--muted);font-size:0.92rem}

  /* Reduce repeated buttons in lists to avoid long stacks on mobile */
  .services .btn:nth-of-type(n+4){display:none !important}

  /* Make services & templates 2-column on mobile/tablet widths */
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .services-grid .svc, .services-grid .price-card, .services-grid .service-card {padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));min-height:110px;display:flex;flex-direction:column;justify-content:center}
  .services-grid .svc h3{font-size:1.02rem;margin-bottom:6px}
  .services-grid .svc p{font-size:0.92rem;color:var(--muted);line-height:1.3}

  /* CONTACT: stack and tidy on mobile */
  .contact-grid{grid-template-columns:1fr;gap:20px}
  .contact-left{order:1}
  .contact-panel{order:2}
  .contact-left .contact-item{align-items:center;gap:12px}
  .contact-left .ci-icon{width:44px;height:44px;border-radius:10px}
  .contact-left .ci-body{min-width:0}
  .contact-left .ci-text{font-size:0.95rem;color:var(--muted)}
  .contact-panel .panel-form{display:block;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));border-radius:14px;border:1px solid rgba(255,255,255,.04)}
  .contact-panel .panel-form input, .contact-panel .panel-form select, .contact-panel .panel-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.01);color:var(--text);margin-bottom:12px}
  .contact-panel .panel-form textarea{min-height:110px}
  .contact-panel .submit-cta{display:block;width:100%;padding:14px;border-radius:12px;background:linear-gradient(90deg,#19b4ff,#6ac7ff,#ffd84d);color:#061426;font-weight:900;border:none}

  /* MOBILE: custom select replacement styling (mobile-only) */
  .mobile-select{display:block;margin-bottom:12px}
  .mobile-select-button{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);color:var(--text);width:100%;text-align:left}
  .mobile-select-button::after{content:'▾';margin-left:8px;opacity:.9}
  .mobile-select-panel{position:relative;display:block;margin-top:6px}
  .mobile-select-list{max-height:320px;overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));border-radius:10px;border:1px solid rgba(255,255,255,.04)}
  .mobile-select-item{display:block;width:100%;text-align:left;padding:12px 14px;border:none;background:transparent;color:var(--text);cursor:pointer}
  .mobile-select-item:hover, .mobile-select-item.focus{background:rgba(255,255,255,.02)}
  .mobile-select-item.selected{background:linear-gradient(90deg,#19b4ff,#6ac7ff);color:#061426;font-weight:800}
  .mobile-select-panel[hidden]{display:none}


  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .template-card{margin:0}
  .template-card .card-thumb{height:110px}
  .template-card .tpl-title{font-size:1rem}
  .template-card .tpl-excerpt{display:none}

}

/* MOBILE (narrow phones): make services & templates 2-column for compact modern look */
@media (max-width:599px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .services-grid .service-card{padding:12px;min-height:90px}

  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .template-card{margin:0}
  .template-card .card-thumb{height:120px}
  .template-card .tpl-title{font-size:0.98rem}
  .template-card .tpl-excerpt{display:none}

  /* Slightly reduce CTA/button sizing in these grids */
  .template-card .card-actions .btn, .services-grid .btn{padding:8px 10px;min-width:64px}
}



  overflow: visible !important;
}
@media (prefers-reduced-motion: reduce){*{animation:none;transition:none;scroll-behavior:auto}}

/* == Sidebar V2 (namespaced, fresh) == */
:root{--jzv2-w:320px;--jzv2-bg:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));--jzv2-acc:#62d3ff}
.jzv2-menu-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,var(--jzv2-acc),#ffd34d);color:#061426;border:none;font-weight:900;cursor:pointer;box-shadow:0 12px 40px rgba(98,211,255,.06);transition:transform .12s ease;margin-left:12px}
.jzv2-menu-btn:active{transform:translateY(1px)}
.jzv2-hamburger{width:22px;height:22px}
.jzv2-menu-btn .jzv2-label{display:none}
@media(min-width:900px){.jzv2-menu-btn .jzv2-label{display:inline-block}}
@media(min-width:900px){
  /* Ensure the menu button stays at the far-right of the header on desktop */
  .head .jzv2-menu-btn{order:3;margin-left:auto;position:relative;z-index:10070}
  /* jzv2-hamburger-right:20260131 */
  .head nav.primary{order:2}
}

.jzv2-sidebar{position:fixed;top:0;right:0;height:100vh;width:var(--jzv2-w);max-width:94vw;transform:translateX(110%);transition:transform .34s cubic-bezier(.2,.9,.2,1);background:#061426;/* solid, non-transparent */box-shadow:-30px 40px 90px rgba(2,6,23,.6);z-index:10060;padding:18px;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.04);backdrop-filter:none}
/* Always start closed unless opened programmatically */
.jzv2-sidebar[aria-hidden="true"]{transform:translateX(110%);visibility:visible}
.jzv2-sidebar.jzv2-open{transform:translateX(0)}

/* Left-side variant: keep hamburger on right but slide sidebar from the left */
.jzv2-sidebar.jzv2-left{ left:0; right:auto; transform:translateX(-110%); box-shadow:30px 40px 90px rgba(2,6,23,.6); border-left:none; border-right:1px solid rgba(255,255,255,.04) }
.jzv2-sidebar.jzv2-left[aria-hidden="true"]{ transform:translateX(-110%); }
.jzv2-sidebar.jzv2-left.jzv2-open{ transform:translateX(0) }

.jzv2-sidebar-inner{display:flex;flex-direction:column;height:100%;gap:12px}
.jzv2-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.jzv2-close{background:transparent;border:0;padding:8px;border-radius:8px;color:var(--text);cursor:pointer;font-size:18px}
/* Search visible by default in sidebar */
.jzv2-search{margin-bottom:12px;display:block}
.jzv2-search input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text)}

/* Social */
.jzv2-social{margin-bottom:10px}
.jzv2-social .jzv2-section-title{font-weight:900;margin:0 0 8px;color:var(--jzv2-acc)}
.jzv2-social-list{display:flex;gap:8px;padding:0;margin:0;list-style:none}
.jzv2-social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.02);color:var(--jzv2-acc);text-decoration:none;border:1px solid rgba(255,255,255,.04);transition:transform .12s,box-shadow .12s}
.jzv2-social-link:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(98,211,255,.06)}

/* Newsletter */
.jzv2-newsletter{margin-bottom:12px}
.jzv2-newsletter-form{display:flex;gap:8px;align-items:center}
.jzv2-newsletter-form input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text)}
.jzv2-newsletter-form .btn.subscribe{padding:8px 10px;border-radius:8px}

/* Recent posts */
.jzv2-recent{margin-bottom:12px}
.jzv2-recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jzv2-recent-list a{display:block;padding:8px;border-radius:8px;background:rgba(255,255,255,.02);color:var(--text);text-decoration:none;font-weight:700}
.jzv2-recent-list a:hover{background:rgba(255,255,255,.04)}

/* Actions and footer tweaks */
.jzv2-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.jzv2-foot{margin-top:12px}

.jzv2-search{margin-bottom:12px;display:none}
.jzv2-sidebar.jzv2-open .jzv2-search{display:block}
.jzv2-overlay{position:fixed;inset:0;background:rgba(2,6,23,.6);opacity:0;visibility:hidden;transition:opacity .28s;z-index:10050}
.jzv2-overlay.jzv2-show{opacity:1;visibility:visible}

/* Reset menu list styles and ensure clean vertical styling */
.jzv2-side-menu{display:flex;flex-direction:column;gap:6px;overflow:auto;padding-right:6px;list-style:none;margin:0;padding:0}
.jzv2-side-menu, .jzv2-side-menu ul{list-style:none;margin:0;padding:0}
.jzv2-side-menu li{list-style:none}
/* Make sidebar menu items visually consistent and clearly visible (non-invasive) */
.jzv2-side-menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);font-weight:800;text-decoration:none;background:rgba(255,255,255,.02);transition:background .12s,transform .08s}
.jzv2-side-menu a:hover{background:rgba(255,255,255,.04);transform:translateY(-2px)}
.jzv2-side-menu a .icon{margin-right:8px;opacity:.95}

/* Debug styles removed for production */

/* Make the sidebar inner able to shrink so children that are flex:1 can scroll */
.jzv2-sidebar-inner{ position:relative; min-height:0 }

/* Scrolling wrapper for the menu - prevents overlap with newsletter/recent blocks */
.jzv2-side-menu-wrap{ flex:1 1 auto; min-height:0; overflow:auto; padding-right:6px }

/* Ensure menu has an obvious scroll area on small screens */
.jzv2-side-menu{ max-height: calc(100vh - 260px); overflow:auto }

/* Submenu flyout panel (appears to the left of the sidebar) */
.jzv2-subpanel{ position:absolute; top:0; right:100%; width:var(--jzv2-w); max-width:94vw; background:#061426; box-shadow:-18px 24px 60px rgba(2,6,23,.6); z-index:11000; transform:translateX(8px); opacity:0; visibility:hidden; transition:transform .22s ease, opacity .18s ease; padding:12px; border-left:1px solid rgba(255,255,255,.04); border-radius:8px }
.jzv2-subpanel.jzv2-open{ transform:translateX(0); opacity:1; visibility:visible }
.jzv2-subpanel .jzv2-subpanel-back{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; background:transparent; border-radius:8px; border:1px solid rgba(255,255,255,.04); color:var(--jzv2-acc); cursor:pointer; font-weight:700 }
.jzv2-subpanel ul{ margin-top:12px; list-style:none; padding:0 }
.jzv2-subpanel li a{ display:block; padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.02); color:var(--text); font-weight:700; text-decoration:none }

/* Make sure subpanel doesn't block overlay interactions */
.jzv2-subpanel{ pointer-events:auto }

/* When the sidebar is on the left, the subpanel should fly out to the right */
.jzv2-sidebar.jzv2-left .jzv2-subpanel{ left:100%; right:auto; transform:translateX(-8px); box-shadow:18px 24px 60px rgba(2,6,23,.48); border-left:none; border-right:1px solid rgba(255,255,255,.04) }
.jzv2-sidebar.jzv2-left .jzv2-subpanel.jzv2-open{ transform:translateX(0); opacity:1; visibility:visible }

/* Keep default submenu inline behavior as fallback for non-JS */
.jzv2-has-submenu > ul{ display:none }
.jzv2-has-submenu[aria-expanded="true"] > ul{ display:block }

/* Submenu progressive enhancement */
.jzv2-has-submenu .jzv2-sub-toggle{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px}
/* Inline accordion modern style */
.jzv2-has-submenu > ul{margin-top:6px;padding-left:8px;display:block;max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.2,.9,.2,1),opacity .18s ease;opacity:0;border-left:2px solid rgba(255,255,255,.02);padding-left:10px}
.jzv2-has-submenu > ul[hidden]{display:block;/* keep block so animation works; JS will set hidden attr */}
.jzv2-has-submenu.jzv2-sub-open > ul{max-height:1000px;opacity:1}
.jzv2-has-submenu[aria-expanded="true"] > ul{max-height:1000px;opacity:1}
.jzv2-has-submenu[aria-expanded="false"] > ul{max-height:0;opacity:0}
.jzv2-sub-toggle .jzv2-caret{display:inline-block;transition:transform .18s ease;transform-origin:center}
.jzv2-sub-toggle[aria-expanded="true"] .jzv2-caret{transform:rotate(180deg);color:var(--brand)}

/* Make caret a larger, right-aligned touch target */
.jzv2-has-submenu{position:relative}
.jzv2-has-submenu > a{display:flex;align-items:center;padding-right:54px}
.jzv2-has-submenu .jzv2-sub-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border-radius:8px;padding:6px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02)}
.jzv2-has-submenu .jzv2-sub-toggle:focus{outline:2px solid rgba(98,211,255,.18);outline-offset:2px}

.jzv2-side-menu ul li a{padding:10px 12px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));font-weight:700}
.jzv2-side-menu ul li a:hover{background:rgba(255,255,255,.04);transform:translateY(-1px)}
.jzv2-has-submenu.jzv2-sub-open > a{box-shadow:inset 0 -4px 12px rgba(0,0,0,.28)}
.jzv2-side-menu .jzv2-has-submenu > ul{will-change: max-height, opacity}

/* Safety override: ensure sidebar submenus are rendered as block inside the sidebar
   This prevents global `.sub-menu { display:none }` from hiding our animated accordions
   and is narrowly scoped to the sidebar menu only to avoid affecting templates. */
#jzv2-side-nav .sub-menu,
#jzv2-side-nav .sub-menu[hidden],
.jzv2-side-menu .sub-menu,
.jzv2-side-menu .sub-menu[hidden]{
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}

/* keep existing open states functional */
.jzv2-has-submenu.jzv2-sub-open > ul,
.jzv2-has-submenu[aria-expanded="true"] > ul{max-height:1000px;opacity:1}

/* Temporary guard: hide legacy menu button to avoid duplicate hamburger UI */
.menu-btn.modern{display:none !important}

/* Defensive: ensure overlay is above header */
.jzv2-overlay{z-index:10059}
.jzv2-sidebar{z-index:10060}

/* simple morph lines when open */
.jzv2-menu-btn.jzv2-open .jzv2-line.a{transform-origin:center;transform:translateY(5px) rotate(45deg)}
.jzv2-menu-btn.jzv2-open .jzv2-line.b{opacity:0}
.jzv2-menu-btn.jzv2-open .jzv2-line.c{transform-origin:center;transform:translateY(-5px) rotate(-45deg)}

/* Ensure legacy sidebar UI remains hidden while v2 is active */
.menu-btn{display:none !important}
#sidebar{display:none !important}
#overlay{display:none !important}

/* mobile: hide primary nav to keep header compact */
@media(max-width:899px){ nav.primary{display:none !important;visibility:hidden !important} .header-cta{display:none !important} }

/* End Sidebar V2 */

/* Sidebar removed — ensure no legacy hamburger or overlay shows */
.menu-btn{display:none !important}
#sidebar, #overlay{display:none !important}


/* === meta-boxes.css === */
.jz-meta-section.wrap-card{background:linear-gradient(180deg,rgba(6,12,28,0.6),rgba(6,16,36,0.55));border-radius:14px;padding:22px;border:1px solid rgba(255,255,255,0.03);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 18px 40px rgba(2,6,23,0.55)}
.jz-meta-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
/* Author card: separate modern background; center all inner content */
.meta-author{display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border-radius:14px;padding:16px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,23,0.28);margin-bottom:12px;flex-wrap:wrap}
.meta-author-avatar{display:flex;flex-direction:column;gap:8px;align-items:center;min-width:84px}
.meta-author-avatar img{border-radius:12px;display:block;transform:none;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 8px 30px rgba(2,6,23,0.18)}
.meta-author-avatar .meta-author-name{margin:0;padding:6px 12px;font-size:.92rem;text-align:center;width:100%}
.meta-author-body{flex:1 1 auto;text-align:center}
.meta-author-body h3{margin:0 0 6px;font-size:1rem}
.meta-author-name{margin:0;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 24px rgba(2,6,23,0.25);color:var(--text);font-weight:800;font-size:.95rem;transition:transform .16s ease,box-shadow .16s ease;text-decoration:none}
.meta-author-name a{color:inherit;text-decoration:none}
.meta-author-name:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(2,6,23,0.32)}
.meta-author-bio{margin:.5rem 0 0;color:var(--muted);line-height:1.45}
.meta-cta h3{margin:0 0 6px;font-size:1.05rem}
.meta-cta-desc{color:var(--muted);margin-bottom:12px}
.meta-cta-actions{display:flex;gap:10px;align-items:center}
.meta-cta .cta-btn{padding:10px 16px;border-radius:999px;font-weight:800;background:linear-gradient(90deg,#62d3ff,#00bfff);color:#021424;box-shadow:0 8px 30px rgba(0,186,255,0.12)}
.meta-cta .btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:10px 14px;border-radius:10px}
.meta-cta .meta-related-pills{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.meta-cta .meta-related-pill{padding:6px 10px;font-size:.9rem}
.meta-related h4{margin:0 0 8px}
/* .meta-tags styles removed (Tags section deleted) */

/* Paket tiers (jenis paket) inside meta box */
.meta-tiers{margin-top:12px}
.meta-tiers h4{margin:0 0 8px}
.meta-tiers-list{display:flex;flex-wrap:wrap;gap:8px}
.meta-author-avatar .meta-tiers{margin-top:8px}
.meta-author-avatar .meta-tiers h4{font-size:.85rem;margin:0 0 6px}
.meta-author-avatar .tier-pill{padding:6px 10px;font-size:.85rem}
.tier-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03);text-decoration:none;color:var(--text);font-weight:700;font-size:.95rem;transition:transform .12s ease,box-shadow .12s ease}
.tier-pill:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(2,6,23,0.3)}

/* Meta-related: layanan as modern pills */
.meta-related--layanan{margin-top:8px}
/* Heading: modern green gradient pill for 'Layanan Terkait' */
.meta-related--layanan h4{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(90deg,#16a34a 0%, #34d399 100%); /* modern green gradient */
  color:#ffffff;
  font-weight:800;
  box-shadow:0 10px 30px rgba(16,185,129,0.12);
  border:1px solid rgba(255,255,255,0.04);
  text-align:left;
  margin-left:0;
}
/* Mobile: make the 'Layanan Terkait' heading full-width inside the meta box */
@media (max-width:980px){
  .meta-related--layanan h4{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 14px; /* larger tap target on mobile */
    border-radius:12px; /* less rounded when full-width */
    margin-left:0;
    text-align:left;
  }
}
.meta-related-pills{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;align-items:flex-start}
.meta-related-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);text-decoration:none;color:var(--text);font-weight:700;font-size:.95rem;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease;justify-content:flex-start;text-align:left}
.meta-related-pill::before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,#62d3ff,#ffd34d);box-shadow:0 6px 16px rgba(98,211,255,0.08);display:inline-block}
.meta-related-pill:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(2,6,23,0.18)}

.meta-related ul{margin:0;padding-left:1rem}
.meta-related li{margin:.4rem 0}
.meta-related a{color:var(--text)}

@media (max-width:980px){
  .jz-meta-grid{grid-template-columns:1fr;align-items:stretch}
  /* Stack author card on mobile and center content */
  .meta-author{flex-direction:column;align-items:center;text-align:center}
  .meta-author-avatar{margin-bottom:8px}
  .meta-author-avatar .meta-author-name{width:auto;max-width:220px;margin:0 auto}
  .meta-author-body{width:100%;text-align:center}
  .meta-cta-actions{flex-wrap:wrap}
  .meta-cta .cta-btn,.meta-cta .btn-outline{flex:1 1 48%}
  .meta-author-avatar img{transform:none}

  /* Mobile: center the related‑layanan pills while keeping pill text left-aligned */
  .meta-related-pills{ justify-content:center; align-items:center; }
  .meta-related-pill{ justify-content:flex-start; text-align:left; }

  /* Small phones: render pills in 2 responsive columns */
  @media (max-width:600px) {
    .meta-related-pills{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      justify-items:center;
      align-items:start;
    }
    .meta-related-pill{
      width:100%;
      box-sizing:border-box;
      white-space:normal; /* allow wrapping on small screens */
      justify-content:flex-start;
      text-align:left;
      padding:8px 12px;
    }
  }
}


/* === overrides.css === */
/* overrides.css — loaded after built child CSS
   Purpose: quick fixes and compact layout overrides applied after minified stylesheet
*/

/* Fix duplicated divider */
.usp,
.services,
.testi { border-bottom: none !important; }

.seo-content,
.contact,
.footGlass,
footer .footer-inner { border-top: none !important; }

section + section { border-top: none !important; }

/* Compact layout adjustments */
section { padding-top: clamp(20px, 3.5vw, 40px) !important; padding-bottom: clamp(20px, 3.5vw, 40px) !important; }
.section-title { margin-bottom: 12px !important; }
.section-desc { margin-bottom: 12px !important; max-width: 56ch; color: var(--muted) !important; }


h1{
  margin-top:0;
  margin-bottom:0.6rem;
  /* default H1 gradient (light-blue → yellow) */
  background: linear-gradient(90deg,#62d3ff 0%, #ffd34d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 6px 18px rgba(2,6,23,0.24) !important;
}
h2{margin-top:1.6rem;margin-bottom:0.9rem}
h3{margin-top:1.2rem;margin-bottom:0.75rem}
h4{margin-top:1rem;margin-bottom:0.6rem}
h5,h6{margin-top:0.8rem;margin-bottom:0.5rem;font-weight:600}
@media (max-width:720px){h1{margin-top:0}h2{margin-top:1.2rem}h3{margin-top:1rem}h4{margin-top:0.9rem}}
.hero { padding-top: clamp(40px, 8vw, 88px) !important; padding-bottom: clamp(32px, 6vw, 72px) !important; margin-top: 0 !important; }
/* Front‑page: avoid being covered by header/chips — keep hero below header on desktop */

/* junk: tweak hero container padding on home/front – significantly shorter background */
body.home .hero, body.front-page .hero { padding-top: clamp(44px, 6vw, 68px) !important; padding-bottom: clamp(30px, 5vw, 52px) !important; }

/* center the layanan lengkap description on homepage */
body.home .services .section-desc,
body.front-page .services .section-desc { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }

/* also center descriptions for pricing packages and templates shop on home/front page */
body.home .pricing .section-desc,
body.front-page .pricing .section-desc,
body.home .templates .section-desc,
body.front-page .templates .section-desc,
body.home .jasa-website .section-desc,
body.front-page .jasa-website .section-desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 720px !important;
}

@media (min-width:901px){
  /* pull the outer hero frame up so it sits directly below the header bar */
  body.home .hero, body.front-page .hero {
    /* keep the container padding defined above; do not reset it */
    /* lift the frame up by the header height so hero background sits beneath header */
    margin-top: 0 !important;

    /* inner top padding left intact for home’s downward shift */

    /* further reduced bottom spacing (user requested smaller gap) */
    padding-bottom: clamp(18px, 3vw, 38px) !important;
  }

}   

/* Tablet: 721px — 900px — keep frame attached but adjust spacing/layout */
@media (min-width:721px) and (max-width:900px) {
  body.front-page .hero {
    margin-top: 0 !important;

    padding-top: clamp(52px, 9vw, 84px) !important;

    padding-bottom: clamp(16px, 3vw, 28px) !important;
  }

  /* layout: maintain two columns with comfortable gap */
  body.front-page .hero .hero-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; align-items: center; }
  body.front-page .hero .hero-card { padding: 28px 18px 18px !important; border-radius: 16px !important; }

  /* chips: ensure consistent placement on tablet */
  .chips { top: calc(var(--headH) + 10px) !important; height: var(--chipsH,48px); }
}

/* CPT-specific: slightly raise hero area on desktop for single CPT pages */
@media (min-width:901px){
  body.single-layanan .layanan-hero { margin-top: -32px !important; }
  body.single-paket_harga .pkg-hero { margin-top: -72px !important; }
  body.single-lp_template .cpt-hero { margin-top: -32px !important; }
}

/* paket-tier: responsive refinements (moved from templates/paket-harga/paket-tier.php)
   - smoother fluid scaling for hero, tier-grid, and paket cards
   - improved touch/scroll behaviour and no horizontal overflow
   - scoped to `.paket-tier-base` / related selectors to avoid site-wide effects
*/
.paket-tier-base{overflow-x:hidden}
.paket-hero__inner{grid-template-columns:1fr minmax(220px, min(420px, 42%));gap:clamp(16px,2.5vw,28px)}
.paket-hero__visual{max-width:min(420px,42%);width:100%;height:auto;margin:0 auto}
.paket-hero__left h1{font-size:clamp(1.45rem,3.8vw,2.1rem)}

/* tier-grid: smoother horizontal scrolling and better tap targets */
.tier-grid{ -webkit-overflow-scrolling:touch; scroll-padding-left:12px; gap:12px; padding-bottom:6px }
.tier-card{ min-width:110px; scroll-snap-align:start; flex:0 0 auto }

/* paket cards: fluid heights, clamp price sizes, improved CTAs on mobile */
.paket-tier-base .jz-price{font-size:clamp(1.05rem,2.6vw,3.2rem);white-space:nowrap}
@media (max-width:1100px){
  .paket-listing .jz-paket-cards.jz-cols-4{grid-template-columns:repeat(3,1fr);gap:20px}
  .paket-tier-base .jz-paket-card{min-height:440px}
}
@media (max-width:900px){
  .paket-listing .jz-paket-cards.jz-cols-4{grid-template-columns:repeat(2,1fr);gap:16px}
  .paket-tier-base .jz-paket-card{min-height:360px;padding:20px}
}
@media (max-width:600px){
  .paket-listing .jz-paket-cards.jz-cols-4{grid-template-columns:1fr;gap:14px}
  .paket-tier-base .jz-paket-card{min-height:auto;padding:14px}
  .jz-card-price{min-height:0}
  .jz-card-footer .jz-card-cta{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;text-align:center}
  .paket-hero__actions{flex-direction:column;gap:10px;align-items:center}
  .paket-hero__visual{max-width:320px}
}

/* accessibility: visible focus for keyboard users */
.tier-card:focus-visible, .jz-card-cta:focus-visible, .paket-hero__actions .btn:focus-visible{outline:3px solid rgba(99,102,241,0.18);outline-offset:4px}

/* defensive: prevent accidental horizontal overflow on small devices */
html,body{ -webkit-overflow-scrolling:touch }
.paket-tier-base, .paket-listing, .paket-service-row{ overflow-x:hidden }

/* ensure hero illustration scales cleanly */
.hero-illustration{width:100%;height:auto;max-width:420px;display:block;margin:0 auto}

@media (max-width:900px){ .hero { margin-top: 0 !important; } }
@media (max-width:600px){ .hero { margin-top: 0 !important; } }

/* Front‑page hero — mobile tidy overrides (apply only to front page/home) */
@media (max-width:900px) {
  /* mobile: raise hero so it's directly below chips by eliminating top padding */
  body.front-page .hero {
    padding: 0 0 !important; /* no top padding on home/front page */
    margin-top: 0 !important;
  }

  body.front-page .hero .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.front-page .hero .hero-card {
    padding: 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
    box-shadow: none !important;
  }

  body.front-page .hero .hero-card .title {
    font-size: 20px !important;
    line-height: 1.12 !important;
    margin-bottom: 6px !important;
  }

  body.front-page .hero .hero-card .lead {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    color: var(--muted) !important;
  }

  body.front-page .hero .hero-card .pill {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* primary hero CTA only when explicitly marked full-width */
  body.front-page .hero .hero-card a.cta-btn.full-width {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* also nudge the shop-specific hero up below chips */
  .beli-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* generic fix: if a hero appears immediately after chips on mobile, remove its
     built-in vertical padding so there’s no blank gap beneath the nav strip */
  .chips + .hero,
  .chips + .beli-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  /* keep secondary hero button compact */
  body.front-page .hero .hero-card a.btn {
    display: inline-flex !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* stronger, more specific fallback for hero CTAs on front page */
  .hero-ctas { gap: 10px; }
  @media (max-width:900px) {
    body.front-page .hero .hero-card .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: center !important; }
    /* primary CTA -> full width; secondary stays compact */
    body.front-page .hero .hero-card .hero-ctas .hero-cta.cta-btn.full-width { display: block !important; width: 100% !important; box-sizing: border-box !important; }
    body.front-page .hero .hero-card .hero-ctas .hero-cta.btn { display: inline-flex !important; width: auto !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
    body.front-page .hero .hero-card .hero-ctas .hero-cta.cta-btn { padding: 12px 14px !important; border-radius: 12px !important; }

    /* extra safety for very small screens */
    @media (max-width:480px) {
      body.front-page .hero .hero-card .hero-ctas { gap: 8px !important; }
      body.front-page .hero .hero-card .hero-ctas .hero-cta { padding: 12px 12px !important; font-size: 15px !important; }
    }
  }

  /* hide decorative texture/hairlines for small screens */
  body.front-page .hero::before,
  body.front-page .hero .hero-card::before { display: none !important; }

  /* ensure image/card keeps rounded corners */
  body.front-page .hero .hero-card:nth-child(2) > div { border-radius: 12px !important; overflow: hidden !important; }

  /* Mobile: make front-page/home hero full-bleed and left-aligned */
  @media (max-width:900px) {
    body.front-page .hero {
      position: relative !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      width: 100vw !important;
      border-radius: 0 !important;
      padding-left: 0 !important; /* flush to viewport on small screens */
      padding-right: 0 !important; /* flush to viewport on small screens */
      box-shadow: none !important;
      overflow: visible !important;
    }

    body.front-page .hero .wrap.hero-grid {
      max-width: none !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    /* left-align hero content on mobile */
    body.front-page .hero .hero-card { text-align: left !important; }
    body.front-page .hero .hero-card .title { text-align: left !important; }
    body.front-page .hero .hero-card .lead { text-align: left !important; }

    /* make the inner hero-card edge-to-edge on mobile */
    body.front-page .hero .wrap.hero-grid { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
    body.front-page .hero .hero-card {
      width: 100% !important;
      margin: 0 !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(2,6,23,0.45) !important;
      background-clip: padding-box !important;
      overflow: hidden !important;
      border-left: none !important;
      border-right: none !important;
    }
    /* ensure the hero image/frame preserves rounded corners */
    body.front-page .hero .hero-card > div[style] { border-radius: 16px !important; }

    /* keep comfortable inner padding for content */
    body.front-page .hero .hero-card .title,
    body.front-page .hero .hero-card .lead,
    body.front-page .hero .hero-card .hero-ctas { padding-left: 16px !important; padding-right: 16px !important; }
  }

  /* front/home hero pills — enforce very small horizontal text and 3-equal columns */
  body.front-page .hero .grid { gap: 8px !important; }
  body.front-page .hero .grid .pill,
  body.front-page .hero .hero-card .pill {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 8px !important;
    font-size: 10px !important;           /* much smaller text */
    font-weight: 800 !important;          /* bold */
    border-radius: 10px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #eaf6ff !important;
    line-height: 1 !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }

  /* Ensure 3 equal-width pills on small screens (keeps them horizontal) */
  @media (max-width:900px) {
    body.front-page .hero .grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    body.front-page .hero .grid .pill,
    body.front-page .hero .hero-card .pill { width: 100% !important; padding: 6px 6px !important; font-size: 10px !important; }
  }

  /* smallest fallback */
  @media (max-width:420px) {
    body.front-page .hero .grid .pill,
    body.front-page .hero .hero-card .pill { padding: 4px 6px !important; font-size: 9px !important; min-height: 28px !important; }
  }
}

/* Specific compact overrides */
.usp, .services, .pricing, .testi, .faq, .templates, .templates-shop, .seo-content { padding: 16px 0 !important; }
.contact { padding: 40px 0 !important; }

/* Jasa Website — section content: features, references, tips */
body.front-page .jasa-website { padding: clamp(32px, 4.2vw, 56px) 0 !important; }
body.front-page .jasa-website .jasa-grid{ display:grid; grid-template-columns: 1fr 360px; gap:32px; align-items:start; }
body.front-page .jasa-website .jasa-intro { max-width:880px; }
body.front-page .jasa-website .section-desc { margin-bottom:18px; color:var(--muted); }
/* cards-combo: modern mix — large rounded, 3-column tile card, small landscape, testimonial */
body.front-page .jasa-website .cards-combo{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: auto; gap:32px 20px; align-items:start; }
/* fallback for cases where `body.front-page` class is not present */
.jasa-website .cards-combo{ grid-template-columns: repeat(4,minmax(0,1fr)); gap:32px; }
body.front-page .jasa-website .card{ margin:8px 0; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.03); border-radius:14px; padding:16px; box-shadow:0 12px 36px rgba(2,6,23,0.12); display:flex; flex-direction:column; gap:10px; transition:transform .16s ease, box-shadow .16s ease; }
body.front-page .jasa-website .card:hover{ transform:translateY(-6px); box-shadow:0 28px 60px rgba(2,6,23,0.28); }

/* Big landscape rounded hero (no price) */
body.front-page .jasa-website .card--hero-rounded{ grid-column: 1 / span 2; display:flex; gap:20px; align-items:center; padding:22px; margin-bottom:12px; border-radius:20px; min-height:180px; background:linear-gradient(135deg, rgba(98,211,255,0.06), rgba(255,211,77,0.03)); box-shadow:0 22px 60px rgba(2,6,23,0.28); }
body.front-page .jasa-website .card--hero-rounded .hero-media{ width:120px; height:88px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:900; background:linear-gradient(135deg,#62d3ff,#8be6ff); color:#041124; }
body.front-page .jasa-website .card--hero-rounded .hero-body .card-kicker{ display:inline-block; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.9); font-weight:900; color:#041124; font-size:0.78rem; }
body.front-page .jasa-website .card--hero-rounded .pill{ display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); font-weight:800; font-size:12px; }

/* hero + small-feature-cards layout */
body.front-page .jasa-website .card--hero-rounded.card--three{
  display: grid;
  grid-template-columns: 120px 1fr 360px;
  gap: 20px;
  align-items: center;
}
body.front-page .jasa-website .card--hero-rounded.card--three .three-wrap{
  margin: 0;
  gap: 12px;
}
body.front-page .jasa-website .card--hero-rounded.card--three .card--tile{
  padding: 12px;
  border-radius: 12px;
  box-shadow: none;
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.02);
}
@media (max-width:980px){
  body.front-page .jasa-website .card--hero-rounded.card--three{ grid-template-columns: 1fr; }
}


/* three-wrap: three standalone cards (3 col inner at desktop) */
/* larger gutter + modern accents */
.jasa-website .three-wrap{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
body.front-page .jasa-website .three-wrap{ grid-column: 3 / span 2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; margin-top:6px; }

/* tile — increased padding, subtle elevation and decorative gradient accent */
body.front-page .jasa-website .card--tile, .jasa-website .card--tile{
  position: relative;
  min-width: 0;
  padding: 18px 16px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.00));
  box-shadow: 0 12px 40px rgba(2,6,23,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: visible;
}

/* small decorative gradient line inside the tile (modern accent) */
body.front-page .jasa-website .card--tile::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 14px;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,#62d3ff 0%, #9b72ff 50%, #ffd34d 100%);
  box-shadow: 0 10px 30px rgba(98,211,255,0.05);
  pointer-events: none;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0.98;
}

/* hover — lift + colorful glow */
body.front-page .jasa-website .card--tile:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 80px rgba(2,6,23,0.28), 0 6px 30px rgba(98,211,255,0.04);
}
body.front-page .jasa-website .card--tile:hover::before{
  transform: translateY(-4px) scaleX(1.08);
  opacity: 1;
}

body.front-page .jasa-website .card--tile h5{ margin:0 0 8px; font-weight:900; padding-top:6px; }
@media (max-width:720px){
  body.front-page .jasa-website .card--tile::before{ display:none; }
  body.front-page .jasa-website .three-wrap{ gap:12px; }
  body.front-page .jasa-website .card--tile{ padding:14px; border-radius:12px; }
}

/* Small landscape cards */
body.front-page .jasa-website .card--landscape{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; min-height:86px; }
body.front-page .jasa-website .card--landscape .land-left{ width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,#ffd166,#ffbf33); display:flex; align-items:center; justify-content:center; font-weight:900; color:#041124; }
body.front-page .jasa-website .card--landscape .land-left svg{ width:28px; height:28px; display:block; fill:currentColor; }
body.front-page .jasa-website .card--hero-rounded .hero-media svg{ width:48px; height:48px; display:block; fill:currentColor; }
body.front-page .jasa-website .card--landscape h5{ margin:0; font-size:1rem; font-weight:800; }
body.front-page .jasa-website .card--landscape p{ margin:0; color:var(--muted); font-size:0.95rem; }
/* fallback selectors */
.jasa-website .card--landscape .land-left svg{ width:28px; height:28px; display:block; fill:currentColor; }
.jasa-website .card--hero-rounded .hero-media svg{ width:48px; height:48px; display:block; fill:currentColor; }

/* Testimonial */
body.front-page .jasa-website .card--testimonial blockquote{ margin:0; color:var(--muted); font-style:normal; }

/* Rounded utility */
body.front-page .jasa-website .card--rounded{ border-radius:18px; }

@media (max-width:980px){
  body.front-page .jasa-website .cards-combo{ grid-template-columns:repeat(2,1fr); gap:20px; }
  body.front-page .jasa-website .card{ margin:10px 0; }
  body.front-page .jasa-website .card--hero-rounded{ grid-column:1 / span 2; margin-bottom:12px; }
  body.front-page .jasa-website .card--three{ grid-column: 1 / span 2; }
  body.front-page .jasa-website .card--three .three-wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  body.front-page .jasa-website .cards-combo{ grid-template-columns:1fr; gap:16px; }
  body.front-page .jasa-website .card--hero-rounded, body.front-page .jasa-website .card--landscape, body.front-page .jasa-website .card--three, body.front-page .jasa-website .card--testimonial{ grid-column:auto !important; margin:10px 0 !important; }
  body.front-page .jasa-website .card--three .three-wrap{ grid-template-columns:1fr; }
  body.front-page .jasa-website .card--three .three-wrap > .card--tile{
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  body.front-page .jasa-website .card--three .three-wrap > .card--tile h5,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile p,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.front-page .jasa-website .jasa-side{ order:2; margin-top:20px; }
}
body.front-page .jasa-website .jasa-side { background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.03); padding:18px; border-radius:12px; }

/* wrap reference & tips into distinct large cards */
body.front-page .jasa-website .ref-box.card,
body.front-page .jasa-website .tips-box.card{
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius:14px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.08);
  margin-bottom:14px;
}

/* header inside the card stays centered; list grid is constrained and centered horizontally */
body.front-page .jasa-website .ref-box.card h3,
body.front-page .jasa-website .tips-box.card h3{ text-align:center; margin:0 0 12px; font-weight:800; }

body.front-page .jasa-website .ref-box.card .ref-list,
body.front-page .jasa-website .tips-box.card .tips-list{
  max-width:720px; /* centers the two-column grid while list text remains left-aligned */
  margin:0 auto;
}

/* responsive: single column on small screens */
@media (max-width:720px){
  body.front-page .jasa-website .ref-box.card .ref-list,
  body.front-page .jasa-website .tips-box.card .tips-list{ grid-template-columns:1fr; max-width:none; }
}

/* fallback selectors (if body.front-page absent) */
.jasa-website .ref-box.card,
.jasa-website .tips-box.card{ padding:18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border: 1px solid rgba(255,255,255,0.03); border-radius:14px; box-shadow: 0 12px 30px rgba(2,6,23,0.08); margin-bottom:14px; }
.jasa-website .ref-box.card h3, .jasa-website .tips-box.card h3{ text-align:center; margin:0 0 12px; font-weight:800; }
.jasa-website .ref-box.card .ref-list, .jasa-website .tips-box.card .tips-list{ max-width:720px; margin:0 auto; }
@media (max-width:720px){ .jasa-website .ref-box.card .ref-list, .jasa-website .tips-box.card .tips-list{ grid-template-columns:1fr; max-width:none; } }
/* Convert reference & tips lists into 2-column card grid (desktop) */
body.front-page .jasa-website .ref-list,
body.front-page .jasa-website .tips-list {
  margin: 0 0 12px 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
/* fallback (no `body.front-page` present) */
.jasa-website .ref-list,
.jasa-website .tips-list {
  margin: 0 0 12px 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* individual list items become compact cards (more visible) */
body.front-page .jasa-website .ref-list li,
body.front-page .jasa-website .tips-list li {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 14px 18px 14px 32px; /* extra left padding for stripe */
  border-radius: 14px;
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center; /* vertical center content */
  gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
  overflow: visible;
}
/* ensure card children render above decorative stripe */
body.front-page .jasa-website .ref-list li > *,
body.front-page .jasa-website .tips-list li > * { position: relative; z-index: 1; }
/* make link area fill the card for easier tap/click */
body.front-page .jasa-website .ref-list li a,
body.front-page .jasa-website .tips-list li a { display: inline-block; width: 100%; }
@media (max-width:720px){
  body.front-page .jasa-website .ref-list li,
  body.front-page .jasa-website .tips-list li{ min-height:54px; padding-left:24px; }
} 

/* left color stripe (brand palette) — more visible */
body.front-page .jasa-website .ref-list li::before,
body.front-page .jasa-website .tips-list li::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 12px;
  width: 8px;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(2,6,23,0.18);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease;
  z-index: 0;
}
body.front-page .jasa-website .ref-list li:hover::before,
body.front-page .jasa-website .tips-list li:hover::before{ transform: translateY(-4px) scaleY(1.02); opacity: 1; }
@media (max-width:720px){
  body.front-page .jasa-website .ref-list li::before,
  body.front-page .jasa-website .tips-list li::before{ left:12px; width:6px; }
}
/* cycle brand accents */
body.front-page .jasa-website .ref-list li:nth-child(1)::before,
body.front-page .jasa-website .tips-list li:nth-child(1)::before,
.jasa-website .ref-list li:nth-child(1)::before,
.jasa-website .tips-list li:nth-child(1)::before { background: linear-gradient(180deg,#62d3ff,#8be6ff); }
body.front-page .jasa-website .ref-list li:nth-child(2)::before,
body.front-page .jasa-website .tips-list li:nth-child(2)::before,
.jasa-website .ref-list li:nth-child(2)::before,
.jasa-website .tips-list li:nth-child(2)::before { background: linear-gradient(180deg,#9b72ff,#cfa6ff); }
body.front-page .jasa-website .ref-list li:nth-child(3)::before,
body.front-page .jasa-website .tips-list li:nth-child(3)::before,
.jasa-website .ref-list li:nth-child(3)::before,
.jasa-website .tips-list li:nth-child(3)::before { background: linear-gradient(180deg,#ffd34d,#ffbf33); }

/* Home articles (Blog + Templates) */
.home-articles{ padding: clamp(24px,3.6vw,48px) 0; background: #0b3a2e; color: #e6f7ef; }
.home-articles .wrap{ position:relative; z-index:1; }
.home-articles .section-title{ text-align:center; margin-bottom:6px; color: #eaf7ef; }
.home-articles .section-desc{ text-align:center; color: rgba(234,247,239,0.85); margin:0 auto 18px; max-width:720px; }
.home-articles .posts-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; align-items:stretch; }
@media (max-width:1199px){ .home-articles .posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:980px){ .home-articles .posts-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.home-articles .post-card{ display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 36px rgba(2,6,23,0.12); min-height:320px; overflow:visible; }
/* full-bleed thumbnail inside the post card (touch left & right edges) */
.home-articles .post-thumb{ border-radius:14px 14px 0 0; overflow:hidden; height:180px; background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.12)); margin: -16px -16px 12px -16px; width: calc(100% + 32px); display:block; }
.home-articles .post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-articles .post-meta{ font-size:0.85rem; color: rgba(255,255,255,0.75); display:flex; gap:8px; align-items:center; }
.home-articles .post-title{ margin:6px 0 6px; font-size:1.05rem; font-weight:800; color: #fff; }
.home-articles .post-title a{ color: #fff; }
.home-articles .post-excerpt{ color: rgba(255,255,255,0.85); font-size:0.95rem; flex:1; }
.home-articles .post-card .btn.small{ align-self:flex-start; margin-top:8px; }
@media (max-width:980px){ .home-articles .posts-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .home-articles .posts-grid{ grid-template-columns: 1fr; } .home-articles .post-thumb{ height:160px; margin: -12px -12px 12px -12px; width: calc(100% + 24px); border-radius:12px 12px 0 0; } }

/* fallbacks (no body.front-page) */
/* empty selector removed */
.home-articles .posts-grid{ gap:18px; }
@media (max-width:980px){ .home-articles .posts-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .home-articles .posts-grid{ grid-template-columns: 1fr; } }
body.front-page .jasa-website .ref-list li:nth-child(4)::before,
body.front-page .jasa-website .tips-list li:nth-child(4)::before,
.jasa-website .ref-list li:nth-child(4)::before,
.jasa-website .tips-list li:nth-child(4)::before { background: linear-gradient(180deg,#4dd9a6,#9feed0); } 

body.front-page .jasa-website .ref-list a{ color:#9fdcff; font-weight:700; }
body.front-page .jasa-website .tips-list li{ list-style:none; }

body.front-page .jasa-website .ref-list li:hover,
body.front-page .jasa-website .tips-list li:hover,
.jasa-website .ref-list li:hover,
.jasa-website .tips-list li:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 54px rgba(2,6,23,0.28);
}

/* DEBUG: force-visible cards for ref/tips — high-specificity + !important */
html body .jasa-website .ref-list li,
html body .jasa-website .tips-list li {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(2,6,23,0.32) !important;
  padding: 14px 18px 14px 40px !important;
  border-radius: 14px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}
html body .jasa-website .ref-list li::before,
html body .jasa-website .tips-list li::before {
  width: 10px !important;
  left: 12px !important;
  top: 12px !important;
  bottom: 12px !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  display: block !important;
}
html body .jasa-website .ref-list li > *,
html body .jasa-website .tips-list li > * { position: relative !important; z-index: 2 !important; }

/* remove debug after verification */

@media (max-width:720px){
  body.front-page .jasa-website .ref-list,
  body.front-page .jasa-website .tips-list { grid-template-columns: 1fr; gap:12px; }
  body.front-page .jasa-website .ref-list li::before,
  body.front-page .jasa-website .tips-list li::before{ left:12px; top:12px; bottom:12px; width:5px; }
}

/* Desktop: center the 2‑column grid horizontally while keeping text left-aligned */
@media (min-width:721px){
  body.front-page .jasa-website .ref-box,
  body.front-page .jasa-website .tips-box { text-align: center; }
  /* make the grid shrink-to-fit and center via inline-grid */
  body.front-page .jasa-website .ref-list,
  body.front-page .jasa-website .tips-list { display: inline-grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; justify-items: start; }
  /* ensure card content remains left-aligned */
  body.front-page .jasa-website .ref-list li,
  body.front-page .jasa-website .tips-list li { text-align: left; margin-left: 18px; }
  /* fallback selectors if body.front-page missing */
  .jasa-website .ref-box,
  .jasa-website .tips-box { text-align: center; }
  .jasa-website .ref-list,
  .jasa-website .tips-list { display: inline-grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; justify-items: start; }
  .jasa-website .ref-list li,
  .jasa-website .tips-list li { text-align: left; margin-left: 18px; }
}
body.front-page .jasa-website .btn-cta{ display:flex; width:fit-content; margin:18px auto 0; justify-content:center; align-items:center; padding:10px 20px; border-radius:999px; background:linear-gradient(90deg,#1faaff 0%,#4dd9a6 100%); color:#041124; font-weight:900; text-decoration:none; box-shadow:0 14px 40px rgba(13,90,78,0.12); border:0; transition:transform .14s ease, box-shadow .14s ease; }
body.front-page .jasa-website .btn-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 56px rgba(13,90,78,0.18); }
/* fallback (no body.front-page) */
.jasa-website .btn-cta{ display:flex; width:fit-content; margin:18px auto 0; justify-content:center; align-items:center; padding:10px 20px; border-radius:999px; background:linear-gradient(90deg,#1faaff 0%,#4dd9a6 100%); color:#041124; font-weight:900; text-decoration:none; box-shadow:0 14px 40px rgba(13,90,78,0.12); border:0; transition:transform .14s ease, box-shadow .14s ease; }
.jasa-website .btn-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 56px rgba(13,90,78,0.18); }
@media (max-width:980px){ body.front-page .jasa-website .jasa-grid{ grid-template-columns:1fr 1fr; } body.front-page .jasa-website .features-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ body.front-page .jasa-website .jasa-grid{ grid-template-columns:1fr; } body.front-page .jasa-website .features-list{ grid-template-columns:1fr; } body.front-page .jasa-website .jasa-side{ order:2; } }

/* Hard fallback: ensure 3 feature cards never stay 3-up on mobile (home/front-page/any body class) */
@media (max-width:900px){
  body.front-page .jasa-website .card--hero-rounded.card--three,
  body.home .jasa-website .card--hero-rounded.card--three,
  .jasa-website .card--hero-rounded.card--three{
    grid-template-columns: 1fr !important;
  }

  body.front-page .jasa-website .card--three .three-wrap,
  body.home .jasa-website .card--three .three-wrap,
  .jasa-website .card--three .three-wrap{
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
  }

  body.front-page .jasa-website .card--three .three-wrap > .card--tile,
  body.home .jasa-website .card--three .three-wrap > .card--tile,
  .jasa-website .card--three .three-wrap > .card--tile{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  body.front-page .jasa-website .card--three .three-wrap > .card--tile h5,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile p,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile a,
  body.home .jasa-website .card--three .three-wrap > .card--tile h5,
  body.home .jasa-website .card--three .three-wrap > .card--tile p,
  body.home .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  body.home .jasa-website .card--three .three-wrap > .card--tile a,
  .jasa-website .card--three .three-wrap > .card--tile h5,
  .jasa-website .card--three .three-wrap > .card--tile p,
  .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  .jasa-website .card--three .three-wrap > .card--tile a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* home-services styles removed — duplicate of existing layanan section */
.wrap.contact .contact-form-wrapper { padding: 24px !important; margin: 0; max-width: 720px; }
.wrap.contact .contact-form-wrapper .form-group { margin-bottom: 12px !important; }

  /* Modern quote styles for `.seo-content` — supports Gutenberg `wp-block-quote` and editors' `.pull-quote` */
  .seo-content blockquote,
  .seo-content .wp-block-quote,
  .seo-content .wp-block-pullquote,
  .seo-content .pull-quote {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008));
    border-left: 6px solid rgba(98,211,255,0.12);
    padding: 22px 26px;
    border-radius: 14px;
    color: #eaf6ff;
    font-style: italic;
    font-size: clamp(1rem, 1.02rem + 0.6vw, 1.18rem);
    line-height: 1.6;
    margin: 1.25rem 0;
    box-shadow: 0 18px 40px rgba(2,6,23,0.55);
    overflow: hidden;
    backdrop-filter: blur(4px);
  }

  .seo-content blockquote::before,
  .seo-content .wp-block-quote::before,
  .seo-content .wp-block-pullquote::before,
  .seo-content .pull-quote::before {
    content: "“";
    position: absolute;
    left: 18px;
    top: -6px;
    font-size: 76px;
    color: rgba(98,211,255,0.06);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: translateY(0);
  }

  .seo-content blockquote p,
  .seo-content .wp-block-quote p,
  .seo-content .wp-block-pullquote p,
  .seo-content .pull-quote p { margin: 0; font-weight: 700; }

  .seo-content blockquote cite,
  .seo-content .wp-block-quote cite,
  .seo-content .wp-block-pullquote cite { display: block; margin-top: 10px; color: var(--muted); font-weight: 700; font-style: normal; }

  @media (max-width:720px) {
    .seo-content blockquote,
    .seo-content .wp-block-quote,
    .seo-content .wp-block-pullquote,
    .seo-content .pull-quote {
      padding: 16px 18px;
      border-radius: 12px;
      font-size: 1rem;
    }
    .seo-content blockquote::before,
    .seo-content .wp-block-quote::before, .seo-content .wp-block-pullquote::before { font-size: 44px; left: 12px; top: -8px; opacity: 0.9; }
  }

  /* utility: editors can add `.pull-quote` in content to get the same look */
  .seo-content .pull-quote { display: block; }

  /* Paragraph spacing inside SEO content — single Enter provides visible gap */
  .seo-content p { margin: 0 0 1rem !important; /* one-line gap */ line-height: 1.8; }
  .seo-content p + p { margin-top: 1rem !important; }
  .seo-content p:first-child { margin-top: 0 !important; }
  .seo-content p:last-child { margin-bottom: 0 !important; }

  /* Keep headings inside seo-content compact but separated from paragraphs */
  .seo-content h2, .seo-content h3, .seo-content h4 { margin: 1.1rem 0 0.6rem !important; }
  .seo-content h2 + p, .seo-content h3 + p { margin-top: 0.6rem !important; }

  /* Anchor/link color for text inside SEO content: green default, blue on hover/focus */
  .seo-content a:not(.btn):not(.cta-btn) {
    color: #4dd9a6 !important; /* green */
    text-decoration: none !important;
    font-weight: 800 !important;
    transition: color .14s ease, transform .12s ease;
  }
  .seo-content a:not(.btn):not(.cta-btn):hover,
  .seo-content a:not(.btn):not(.cta-btn):focus {
    color: #62d3ff !important; /* blue on hover */
    text-decoration: underline !important;
    transform: translateY(-1px);
  }
  .seo-content a:not(.btn):not(.cta-btn):focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(98,211,255,0.08) !important;
    border-radius: 6px !important;
  }
  .seo-content a:not(.btn):not(.cta-btn):visited { color: #3bb388 !important; }

  @media (max-width:720px) {
    .seo-content a:not(.btn):not(.cta-btn) { font-weight: 700 !important; }
  }

  /* Modern list styles inside `.seo-content` — bullets & numbered lists */
  .seo-content ul,
  .seo-content ol { margin: 0 0 1rem 0; padding: 0; list-style: none; }

  .seo-content ul li,
  .seo-content ol li {
    position: relative;
    padding-left: 58px; /* shift list content to the right */
    margin: 0 0 0.9rem;
    color: #dbe6ff;
    font-weight: 700;
    line-height: 1.6;
  }

  /* custom circular bullet */
  .seo-content ul li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(90deg,#62d3ff 0%,#8be6ff 100%);
    box-shadow: 0 6px 18px rgba(98,211,255,0.12);
    border: 2px solid rgba(255,255,255,0.02);
  }

  /* numbered badge */
  .seo-content ol { counter-reset: seo-ol; }
  .seo-content ol li { counter-increment: seo-ol; }
  .seo-content ol li::before {
    content: counter(seo-ol);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #041124;
    background: linear-gradient(90deg,#ffd34d 0%, #ffbf66 100%);
    box-shadow: 0 8px 30px rgba(2,6,23,0.45);
  }

  /* nested lists: subtler markers */
  .seo-content ul ul li::before,
  .seo-content ol ol li::before {
    width: 8px; height: 8px; left: 20px; background: rgba(255,255,255,0.06); box-shadow: none; border: 0; transform: translateY(-50%);
  }

  .seo-content ul ul li,
  .seo-content ol ol li { padding-left: 48px; font-weight: 600; }

  /* keep strong/emphasis visible inside lists */
  .seo-content ul li strong,
  .seo-content ol li strong { color: #ffffff; font-weight: 900; }

  @media (max-width:720px) {
    .seo-content ul li,
    .seo-content ol li { padding-left: 46px; }
    .seo-content ul li::before,
    .seo-content ol li::before { left: 12px; }
    .seo-content ol li::before { width: 30px; height: 30px; font-size: 0.95rem; }
  }
  .section-title{margin-bottom:10px}
  .section-desc{margin-bottom:10px}
  .wrap.contact .contact-form-wrapper{padding:20px}
  section{padding-top:20px;padding-bottom:20px}
}

/* Chips placement moved to `assets/css/components/chips.css` — keep page‑specific tweaks below */

/* Fix: ensure header chips are correctly positioned on paket single pages where
   the hero uses a negative margin; scope narrowly to avoid site-wide shifts. */
.single-paket_harga .chips {
  top: calc(var(--headH) + 10px) !important;
}
@media (max-width:900px){
  .single-paket_harga .chips { top: calc(var(--headH) + 10px) !important; }
}

/* FAQ styles removed from child theme */


/* Testimonial (Apa Kata Klien) — avatar + improved cards */
.testi-grid { gap:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.testi .price-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; gap:12px; border-radius:14px; transition:transform .18s ease, box-shadow .18s ease; }
.testi .price-card .price-body { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.testi .price-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,0.45); }
.testi-avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text); margin:0 auto; margin-bottom:6px }
.testi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; margin:0 auto }
.testi-avatar--fallback{ background:linear-gradient(135deg,#62d3ff,#ffd34d); color:#061022 }
.testi-content{ color:var(--muted); line-height:1.6; max-width:48ch; text-align:center }
.testi-cite{ display:block; margin-top:8px; color:var(--muted); font-weight:700; }
@media (max-width:980px){ .testi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:720px){
  body.front-page #testi .testi-grid,
  body.home #testi .testi-grid,
  #testi .testi-grid,
  .testi .testi-grid{
    grid-template-columns: 1fr !important;
  }

  body.front-page #testi .price-card,
  body.home #testi .price-card,
  #testi .price-card,
  .testi .price-card{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.front-page #testi .testi-content,
  body.home #testi .testi-content,
  #testi .testi-content,
  .testi .testi-content{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Make archive / paket-tier badges match the same centered top style */
.jz-paket-card .lp-badge, .paket-tier-base .lp-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:12}


/* When both recommended + visible badge are present, push the visible badge lower so nothing overlaps */

/* description / features separator */





/* Sidebar layout & search styles moved to `assets/css/components/sidebar.css` */
/* (see `assets/css/components/sidebar.css`) */
@media (max-width:480px){ .jzv2-search-input-wrap input[type="search"]{padding:10px 12px;border-radius:12px} .jzv2-search-btn{padding:8px 10px} }
/* Service tier grid: 4 cols on desktop, 2 cols on mobile */
.service-tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.tier-card{padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03);min-height:220px;display:flex;flex-direction:column}
.tier-head{font-weight:800;margin-bottom:8px}
.tier-price{font-weight:900;font-size:1.15rem;margin-bottom:8px}
.tier-features{list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:8px}
.tier-cta{margin-top:auto}
@media (max-width:720px){ .service-tier-grid{grid-template-columns:repeat(2,1fr)} .tier-card{min-height:200px;padding:14px} }
@media (max-width:420px){ .service-tier-grid{grid-template-columns:repeat(1,1fr)} }
@media (max-width:360px){ .pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{grid-template-columns:repeat(1,1fr) !important} .service-packages .price-card{padding:12px} }

/* Pricing page hero specifics */
.hero-pricing{background:linear-gradient(180deg, rgba(6,16,34,0.9), rgba(6,16,34,0.85));color:#fff;padding:48px 0;border-radius:12px;margin-bottom:18px;border:1px solid rgba(255,255,255,0.03)}
.hero-pricing .hero-grid{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:48px;align-items:start;align-content:center}
.hero-pricing .hero-text{padding:6px 6px;display:flex;flex-direction:column;gap:18px;justify-content:flex-start;max-width:64ch}
/* Large screens: give image a stable column width */
@media (min-width:1200px){ .hero-pricing .hero-grid{grid-template-columns:1fr 520px;gap:56px} }
/* Ensure hero keeps two columns even on small phones (min image width preserved) */
@media (max-width:720px){
  .hero-pricing .hero-grid{grid-template-columns:1fr minmax(220px,420px);gap:28px}
  .hero-pricing .hero-title{font-size:clamp(1.6rem,4.6vw,2.6rem)}
  .hero-pricing .hero-lead{font-size:0.98rem}
}
@media (max-width:420px){
  .hero-pricing .hero-grid{grid-template-columns:1fr minmax(180px,320px);gap:18px}
  .hero-pricing .hero-title{font-size:1.4rem}
  .hero-pricing .hero-lead{font-size:0.9rem}
}
.hero-pricing .hero-title{font-size:clamp(2.4rem,6.6vw,4.2rem);margin:0 0 12px;line-height:1.02;font-weight:900;background:linear-gradient(90deg,#7fe7ff,#fff59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pricing .hero-lead{margin:0 0 18px;color:var(--muted);max-width:64ch;font-size:1.05rem}
.hero-pricing .hero-features{display:flex;gap:12px;margin-top:10px;margin-bottom:14px;flex-wrap:wrap}
.hero-pricing .hero-features .pill{padding:10px 18px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:#e6f7ff;font-weight:700;font-size:0.98rem}
.hero-pricing .hero-features .pill:first-child{background:linear-gradient(90deg,#0fd3ff,#4cc9ff);color:#04182a;box-shadow:0 6px 30px rgba(9,49,72,0.35)}
.hero-pricing .hero-actions{display:none !important}
/* Desktop: primary on left, secondary pushed to right for compact hero */

/* Button visuals */
.hero-pricing .hero-actions .btn-primary{padding:14px 34px;border-radius:24px;font-weight:900;background:linear-gradient(90deg,#19c7ff,#1faaff);color:#041124;box-shadow:0 10px 30px rgba(15,89,124,0.35);border:0}
.hero-pricing .hero-actions .btn-outline{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:#dfe9f5;padding:12px 20px;border-radius:20px}
/* Mobile: stacked full-width */
@media (max-width:720px){
  .hero-pricing .hero-actions{flex-direction:column;align-items:stretch}
  .hero-pricing .hero-actions .btn-primary{width:100%}
  .hero-pricing .hero-actions .btn-outline{width:100%;margin-left:0;margin-top:10px}
}
.hero-pricing .hero-media{display:block}
.hero-pricing .hero-media{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:6px}
.hero-pricing .hero-image{width:100%;max-width:520px;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(2,6,23,0.65);display:block;border:10px solid rgba(255,255,255,0.03);object-fit:cover}
.hero-pricing .hero-placeholder{height:300px;min-width:260px;border-radius:18px;background:linear-gradient(135deg,#0e1a2b,#08101a)}
@media (max-width:980px){ .hero-pricing .hero-image{max-width:420px} }
@media (max-width:720px){ .hero-pricing .hero-image{max-width:340px} }
@media (max-width:420px){ .hero-pricing .hero-image{max-width:300px} }
@media (max-width:980px){ .hero-pricing .hero-title{font-size:clamp(1.8rem,6vw,2.6rem); } .hero-pricing .hero-placeholder{height:260px} }
@media (max-width:480px){ .hero-pricing .hero-title{font-size:1.6rem} .hero-pricing .hero-lead{font-size:0.98rem} }
@media (max-width:980px){ .hero-pricing .hero-grid{grid-template-columns:1fr 340px} }
@media (max-width:720px){
  .hero-pricing .hero-grid{grid-template-columns:1fr; }
  .hero-pricing .hero-media{order:-1;margin-bottom:18px;justify-content:center;padding:0}
  /* Make hero image full-width inside its column and reduce heavy framing so it blends */
  .hero-pricing .hero-image{width:100%;max-width:100%;border-radius:14px;border:8px solid rgba(255,255,255,0.02);box-shadow:0 18px 44px rgba(2,6,23,0.45)}
  .hero-pricing .hero-placeholder{height:auto;min-height:160px}
  .hero-pricing .hero-inner{align-items:flex-start}
}

/* Extra override applied when JS detects small viewport to avoid caching issues */
.jz-mobile-hero .hero-pricing .hero-media{justify-content:center!important;padding:0!important}
.jz-mobile-hero .hero-pricing .hero-media .hero-image{display:block;width:100%!important;max-width:100%!important;border-radius:12px!important;border:6px solid rgba(255,255,255,0.02)!important;box-shadow:0 14px 36px rgba(2,6,23,0.45)!important;margin:0 auto!important}
.jz-mobile-hero .hero-pricing .wrap{padding-left:12px!important;padding-right:12px!important}
.jz-mobile-hero .hero-pricing .hero-inner{align-items:flex-start!important}
@media (max-width:480px){ .hero-pricing .hero-grid{grid-template-columns:1fr} .hero-pricing .hero-title{font-size:1.6rem} }

/* Pricing page hero */
.hero-pricing{background-size:cover;background-position:center;color:#fff;padding:64px 0;border-radius:12px;margin-bottom:18px}
.hero-pricing .hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-pricing .hero-title{font-size:clamp(1.4rem,2.6vw,2.2rem);margin:0 0 10px;line-height:1.03;font-weight:700;max-width:48ch;background:linear-gradient(90deg,#7fe7ff,#fff59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pricing .hero-lead{margin:0;color:var(--muted);max-width:56ch}
@media (max-width:980px){.hero-pricing .hero-inner{flex-direction:column;align-items:flex-start}}
.hero-pricing .btn-primary{background:var(--brand);border:0;padding:12px 18px;border-radius:10px;color:#042033}

/* Hide the generic "Postingan Terbaru" widget on lp_template single pages (child override)
  This avoids editing parent templates — non-destructive and easily reversible. */
.single-lp_template .widget-latest { display: none !important; }
/* Broad hide for any remaining 'latest posts' markup in sidebar columns */
.single-lp_template .col-aside .latest-posts,
.single-lp_template .latest-posts,
.single-lp_template .col-aside .widget-latest,
.col-aside .latest-posts { display: none !important; }

/* Product panel styling for single lp_template */
.product-panel{border-radius:12px;border:0;overflow:hidden;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:0;color:#0b1220;box-shadow:0 14px 36px rgba(2,6,23,0.08)}
.product-panel .product-gallery{display:flex;gap:8px;padding:12px;background:transparent;border-bottom:1px solid rgba(6,16,34,0.04);overflow:auto}
.product-panel .pg-item{flex:0 0 96px;border-radius:8px;overflow:hidden}
.product-panel .pg-item img{display:block;width:100%;height:64px;object-fit:cover}
.product-panel .product-body{padding:16px}
.product-panel .product-title h3{margin:0 0 8px;font-size:1.15rem;color:#061124}
.product-panel .product-rating{color:#ffb020;margin-bottom:8px}
.product-panel .product-price{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.product-panel .price-now{font-weight:900;font-size:1.2rem;color:#061124}
.product-panel .price-old{text-decoration:line-through;color:#7b8691;opacity:0.9}
.product-panel .product-features ul,.product-panel .product-includes ul{margin:6px 0 0 0;padding-left:18px;color:#0f1724}
.product-panel .product-features h4,.product-panel .product-includes h4{margin:0 0 6px;font-size:0.98rem;color:#0b1220}
.product-panel .product-actions{display:flex;gap:8px;margin-top:12px}
.product-panel .btn{padding:8px 12px;border-radius:8px;text-decoration:none;border:1px solid rgba(6,16,34,0.06);background:transparent;color:#061124}
.product-panel .btn-primary{background:linear-gradient(90deg,#62d3ff,#1faaff);color:#041124;border:0}
.product-panel .rating-stars{font-size:1rem}

/* Finalize modern solid gold stars: stronger contrast, size, and subtle glow */
.col-aside .product-panel .rating-stars,
.product-panel .rating-stars {
  display: inline-block !important;
  font-size: 1.28rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #ffbf33 !important; /* warm gold */
  -webkit-text-fill-color: #ffbf33 !important;
  background-image: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.06) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 6px 18px rgba(255,191,51,0.10) !important;
  transform: translateY(0) scale(1) !important;
  animation: none !important;
}

/* Modern feature list: turn simple bullets into responsive feature cards */
.col-aside .product-panel .product-features{
  padding-top:6px; padding-bottom:6px;
}
.col-aside .product-panel .product-features h4{
  margin:0 0 12px; font-size:1.02rem; font-weight:800; color: rgba(255,255,255,0.96);
}

/* ensure cart button is colored even if parent rules override */
.product-price .product-actions .add-to-cart,
.product-price .product-actions .add-to-cart-btn {
    background: var(--jz-primary) !important;
    color: white !important;
}

/* hard-fix single shop CTA visibility on live pages */
.jz-single-product .product-price .product-actions .add-to-cart,
.jz-single-product .product-price .product-actions .add-to-cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  min-height: 48px !important;
  padding: .85rem 1.25rem !important;
  border: 0 !important;
  border-radius: .55rem !important;
  background: var(--jz-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

.jz-single-product .product-price .product-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  gap: .6rem !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: auto !important;
  align-items: center !important;
}

.jz-single-product .product-price .product-actions > button,
.jz-single-product .product-price .product-actions > a {
  width: 100% !important;
  min-height: 44px !important;
  max-height: 46px !important;
  height: 46px !important;
  padding: .65rem .9rem !important;
  border-radius: .5rem !important;
  flex: none !important;
}

.jz-single-product .product-price .product-actions .add-to-cart.disabled,
.jz-single-product .product-price .product-actions .add-to-cart-btn.disabled {
  background: var(--jz-gray-300) !important;
  color: var(--jz-gray-700) !important;
  cursor: not-allowed !important;
}

@media (max-width: 768px) {
  .jz-single-product .product-price .product-actions {
    grid-template-columns: 1fr !important;
  }
}

.col-aside .product-panel .product-features ul{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.col-aside .product-panel .product-features li{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04); color:#fff; font-weight:700; font-size:0.98rem;
  box-shadow: 0 6px 20px rgba(2,6,23,0.45); transition:transform .16s ease, box-shadow .16s ease;
}
.col-aside .product-panel .product-features li:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,0.6); }
.col-aside .product-panel .product-features li::before{
  content:"✓"; color:#ffbf33; font-weight:900; font-size:1.05rem; margin-right:6px; display:inline-block; transform:translateY(-1px);
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

/* Keep includes list visually similar but slightly lighter */
.col-aside .product-panel .product-includes h4{ margin:0 0 8px; color:rgba(255,255,255,0.92); }
.col-aside .product-panel .product-includes ul{ list-style:none; margin:0; padding:0; }
.col-aside .product-panel .product-includes li{ padding:6px 0; color:rgba(255,255,255,0.92); font-weight:600 }

@media (max-width:520px){
  .col-aside .product-panel .product-features ul{ grid-template-columns: repeat(2, 1fr); }
  .col-aside .product-panel .product-features li{ padding:10px; font-size:0.95rem }
}

/* Main content 'Fitur' section: modern responsive feature cards */
.template-section#features { padding-top: 18px; padding-bottom: 8px; }
.template-section#features .features-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.template-section#features .features-list li{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); padding:16px 18px; border-radius:12px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 12px 40px rgba(2,6,23,0.45); transition:transform .16s ease, box-shadow .16s ease; color: #eaf6ff; font-weight:700 }
.template-section#features .features-list li:hover{ transform:translateY(-6px); box-shadow:0 22px 60px rgba(2,6,23,0.6) }
.template-section#features .features-list li::before{ content:''; width:14px; height:14px; border-radius:50%; flex:0 0 auto; background:linear-gradient(90deg,#ffd166 0%,#ffbf33 100%); box-shadow:0 6px 18px rgba(255,191,51,0.12); margin-top:6px }
.template-section#features h2{ margin-bottom:12px; font-weight:900 }
@media (max-width:520px){ .template-section#features .features-list{ grid-template-columns:repeat(1,1fr); } }

@media (max-width:900px){
  .product-panel .pg-item{flex:0 0 80px}
  .product-panel .pg-item img{height:56px}
}

/* Ensure titles inside dark card containers remain visible (white text) */
.card h3,
.card .card-title,
.layanan-card__title,
.layanan-card h3,
.col-aside .card h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Ensure layanan FAQ H2 is visible and centered on dark/gradient FAQ backgrounds */
.layanan-faq #layanan-faq-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center !important;
}

/* Exceptions: force dark text for known white/aside cards */
.pkg-aside__card h3,
.product-panel .product-title h3,
.paket-intro__card h3,
.pkg-related-card__title,
.pkg-card__title {
  color: #0f1724 !important;
  -webkit-text-fill-color: #0f1724 !important;
}

/* Ensure sidebar card containers don't add extra framed background */
.col-aside .card, .col-aside .card * { background: transparent !important; box-shadow: none !important; border: 0 !important }
.col-aside .product-panel { margin: 0; }
.col-aside .product-panel .product-gallery{padding:10px}
.col-aside .product-panel .pg-item img{border-radius:6px}

/* Improve contrast for lists inside product panel */
.product-panel ul li{color:#0f1724;line-height:1.5}

/* Final fix: lock hero position directly below chips (home/front) */
/* Home/front-page hero rules have been moved to assets/css/home-hero.css
   to keep home-specific layout separate for maintainability. */

/* Cloud hosting hero positioning with padding on background only */
@media (min-width: 721px) {
  .ch-hero {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
  
  .ch-hero__bg {
    padding-top: 320px !important;
    top: -320px !important;
    height: calc(100% + 320px) !important;
  }
  
  .ch-hero__image {
    margin-top: -60px !important;
  }
}



/* === page.css === */
.page-hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:center}

/* Make the whole hero a rounded "card" so both left + right sides are curved */
.page-header.hero{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.02);padding:28px}

.page-hero-media{border-radius:0;overflow:hidden;box-shadow:0 30px 60px rgba(2,6,23,.65);min-height:260px;max-height:420px;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent)}
.page-hero-media .page-hero-img,.page-hero-media img.page-hero-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}

/* Services/features grid under hero (responsive horizontal cards) */
.page-services { margin-top: 28px; margin-bottom: 6px; }
.page-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:20px; align-items:stretch; }
.service-card { display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.02); box-shadow: 0 18px 40px rgba(2,6,23,0.45); transition: transform .18s ease, box-shadow .18s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(2,6,23,0.55); }
.service-icon { flex:0 0 56px; width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(98,211,255,0.06), rgba(255,211,77,0.06)); box-shadow: inset 0 1px rgba(255,255,255,0.02); color: #eaf0ff; }
.service-body h4 { margin:0 0 8px; /* gradient title: light-blue -> yellow */ background: linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-size:1.05rem; font-weight:800; text-shadow:0 4px 18px rgba(2,6,23,0.28); }
.service-body p { margin:0; color:var(--muted); line-height:1.6; max-width:42ch; }

/* Jasa Website (pills) */
.jasa-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.jasa-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);text-decoration:none;color:var(--text);font-weight:700;transition:transform .12s ease,box-shadow .12s ease}
.jasa-pill:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(2,6,23,0.25)}

/* Paket Harga section */
.page-paket{margin-top:22px;margin-bottom:10px}
.page-paket-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:12px}
.paket-card{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 30px rgba(2,6,23,0.35);display:flex;flex-direction:column;gap:10px}
.paket-card h4{margin:0;font-size:1rem}
.paket-price{font-weight:900;color:var(--brand);font-size:1rem}
.paket-desc{color:var(--muted);font-size:.95rem}
.paket-actions{margin-top:auto}
@media (max-width:1100px){ .page-paket-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .page-paket-grid{grid-template-columns:repeat(1,1fr)} .jasa-pill{padding:6px 10px} }

/* Sidebar — compact stacked variants for Paket/Jasa when rendered in sidebar */
.page-paket--sidebar .page-paket-grid--sidebar{display:grid;grid-template-columns:1fr;gap:12px}
.page-paket--sidebar .paket-card{padding:12px;border-radius:10px}
.page-paket-grid--sidebar .paket-actions .btn{padding:8px 12px}
.btn.btn-sm{padding:7px 12px;font-size:.92rem;min-width:0}
.jasa-pills{gap:8px}
.jasa-pill{font-size:.95rem;padding:7px 10px}


@media (max-width:1100px){ .page-services-grid{grid-template-columns:repeat(2,1fr); gap:16px} .service-card{padding:18px} }
@media (max-width:640px){ .page-services-grid{grid-template-columns:repeat(1,1fr)} .service-card{padding:14px;gap:12px} .service-icon{width:48px;height:48px} .service-body h4{font-size:1rem} }

/* Hero content inset: move title/description slightly to the right so text isn't flush to the edge */
.page-header.hero .hero-left{padding-left:8px}

/* CTA buttons: horizontal on wider viewports; responsive on mobile */
.page-header.hero .hero-actions{margin-top:16px;display:flex;gap:12px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.page-header.hero .hero-actions .cta-btn,
.page-header.hero .hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-width:140px}

@media (max-width:900px){
  .page-header.hero{padding:18px}
  .page-header.hero .hero-actions{justify-content:center;gap:10px}
  .page-header.hero .hero-actions .cta-btn,
  .page-header.hero .hero-actions .btn{flex:1 1 48%;min-width:0}
}
.hero-left .page-title{font-size:clamp(1.6rem, 4vw, 2.6rem);line-height:1.03;margin-bottom:8px}
.hero-left .lead{color:var(--muted);margin-bottom:12px;max-width:64ch}
.hero-left .page-meta{margin-top:6px;color:var(--muted)}
/* Center author name when rendered in page meta */
.hero-left .page-meta [itemprop="author"],
.page-meta [itemprop="author"] { display: inline-block; text-align: center; min-width: 0; }
/* ensure author links inherit centered alignment */
.page-meta [itemprop="author"] a{ display:inline-block; text-align:center; color:inherit; text-decoration:none }

/* Page-specific heading gradient — light blue -> yellow
   Applies to hero title and all headings inside page content (H1–H6).
   Uses high-specificity + !important to override global visibility rules. */
.page-article .page-title,
.page-article .page-content h1,
.page-article .page-content h2,
.page-article .page-content h3,
.page-article .page-content h4,
.page-article .page-content h5,
.page-article .page-content h6 {
  background: linear-gradient(90deg, #62d3ff 0%, #ffd34d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 6px 18px rgba(2,6,23,0.24) !important;
}

/* Slightly reduce opacity for deeper heading levels for better contrast */
.page-article .page-content h2 { opacity: 0.98 }
.page-article .page-content h3 { opacity: 0.95 }
.page-article .page-content h4 { opacity: 0.92 }
.page-article .page-content h5, .page-article .page-content h6 { opacity: 0.9 }

.hero-actions{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sidebar-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.recent-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.recent-list li a{color:var(--text);text-decoration:none}
.recent-list li a:hover{color:var(--brand)}

/* Main content two-column: article + sidebar */
.page-main{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-top:28px;align-items:start}
.page-article-col{min-width:0}
.page-sidebar{position:relative;top:0;display:flex;flex-direction:column;gap:14px}
.page-sidebar .wrap-card{padding:14px;border-radius:12px}
.page-sidebar .section-title{font-size:1rem;margin-bottom:6px}

/* Mobile responsiveness */
@media (max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;gap:12px}
  .page-hero-media{min-height:180px;max-height:300px}
  .page-main{grid-template-columns:1fr;gap:18px}
  .hero-left .page-title{font-size:clamp(1.4rem,5.6vw,1.9rem)}
  .hero-left .lead{max-width:100%}
}

/* Content typography — ensure editor text renders with clear paragraphs (prevents "stacking") */
.page-content{font-size:1rem;line-height:1.85;color:inherit;white-space:normal;word-break:normal;hyphens:auto}
.page-content p{margin:0 0 1.25rem}
.page-content p + p{margin-top:1rem}
.page-content h2,.page-content h3,.page-content h4{margin:1.6rem 0 .6rem;line-height:1.2}
.page-content ul,.page-content ol{margin:0 0 1rem 1.4rem;padding-left:0}
.page-content blockquote{margin:1rem 0;padding-left:14px;border-left:4px solid rgba(255,255,255,0.06);color:var(--muted)}
/* Make single line-breaks visually separated when user pasted plain text */
.page-content br{display:block;content:'';margin-bottom:.85rem;line-height:0}
.page-content img{max-width:100%;height:auto;display:block;margin:0.75rem 0}
.page-content pre{overflow:auto;padding:12px;border-radius:8px;margin:1rem 0;background:rgba(255,255,255,0.02)}

/* Improve TOC card spacing so list items are not flush to the left */
.page-toc.wrap-card{padding:20px;border-radius:12px}
.page-toc strong{display:block;margin-bottom:10px}
.page-toc ul{margin:0;padding-left:1.25rem;list-style-position:outside}
.page-toc li{margin:0.45rem 0;line-height:1.45;color:var(--text)}
.page-toc li::marker{color:var(--muted)}
@media (max-width:900px){
  .page-toc.wrap-card{padding:16px}
  .page-toc ul{padding-left:1rem}
}

/* Modern inline TOC (injected into article after paragraph 2) */
.page-toc--inline{display:block;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:0 14px 40px rgba(2,6,23,0.06);border-left:4px solid var(--brand);margin:1.6rem 0}
.page-toc__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.page-toc__meta{font-size:.85rem;color:var(--muted)}
.page-toc__list{list-style:none;padding-left:0;margin:0;counter-reset:toc}
.page-toc__list li{counter-increment:toc;position:relative;padding-left:30px;margin:8px 0}
.page-toc__list li::before{content:counter(toc);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:6px;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#ffffff));color:#041124;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;box-shadow:0 6px 16px rgba(2,6,23,0.08)}
.page-toc__list a{text-decoration:none;color:var(--text);transition:color .12s ease}
.page-toc__list a:hover{color:var(--brand);text-decoration:underline}
/* Indent/visual scale for deeper heading levels */
.page-toc__list li.level-3{padding-left:42px;font-size:.95rem;color:var(--muted)}
.page-toc__list li.level-4{padding-left:58px;font-size:.92rem;color:var(--muted);opacity:.95}
@media (max-width:720px){.page-toc--inline{margin:1rem 0;padding:14px}.page-toc__list li{padding-left:26px}.page-toc__list li::before{width:18px;height:18px;font-size:.65rem}}



/* === paket-admin-sync.css === */
/* Modern toast notifications for Paket admin */
.jz-toast-wrap{position:fixed;right:20px;bottom:20px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.jz-toast{min-width:280px;max-width:360px;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,0.12);border-radius:10px;padding:12px 14px;display:flex;align-items:flex-start;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease;pointer-events:auto}
.jz-toast.show{opacity:1;transform:none}
.jz-toast .icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 36px}
.jz-toast .body{flex:1}
.jz-toast .body .title{font-weight:600;margin-bottom:2px}
.jz-toast .body .msg{font-size:13px;color:#444}
.jz-toast .close{margin-left:12px;background:transparent;border:0;color:#777;font-size:16px;cursor:pointer}
.jz-toast.success .icon{background:linear-gradient(135deg,#2ecc71,#27ae60)}
.jz-toast.error .icon{background:linear-gradient(135deg,#ff6b6b,#e74c3c)}
.jz-toast.info .icon{background:linear-gradient(135deg,#4dabf7,#2b8ef7)}
.jz-toast .progress{height:3px;background:rgba(0,0,0,0.06);border-radius:2px;margin-top:8px;overflow:hidden}
.jz-toast .progress > i{display:block;height:100%;background:linear-gradient(90deg,rgba(0,0,0,0.08),rgba(0,0,0,0.02));width:0%;transition:width linear}
/* Small responsive tweak */
@media (max-width:420px){.jz-toast{min-width:220px;margin-right:6px;right:12px;left:12px}}

/* === paket-harga-hero.css === */
/* Paket Harga (Pricing Packages) Hero Section Styles
 * Modern, professional design with gradient backgrounds and animations
 */

:root {
  --pkg-bg: #0f0520;
  --pkg-ink: #fafafa;
  --pkg-muted: #9ca3af;
  --pkg-accent: #6366f1;
  --pkg-accent-2: #a78bfa;
  --pkg-accent-3: #8b5cf6;
  --pkg-card: #1a1a2e;
  --pkg-stroke: #333855;
}

/* Hero Section Container */
.paket-hero {
  background: radial-gradient(135% 150% at 50% 0%, #1e1b3f 0%, #0f0520 45%, #050310 100%);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5rem) clamp(2rem, 6vw, 4rem);
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  min-height: 500px;
}

/* Background Orbs - Floating Animation */
.paket-hero__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.6;
}

.paket-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.paket-hero__orb--a {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
  top: -100px;
  right: 10%;
  animation: pkg-float-a 8s ease-in-out infinite;
}

.paket-hero__orb--b {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
  bottom: -80px;
  left: 5%;
  animation: pkg-float-b 10s ease-in-out infinite;
}

.paket-hero__orb--c {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
  top: 40%;
  left: 50%;
  animation: pkg-float-c 12s ease-in-out infinite;
}

@keyframes pkg-float-a {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-20px, 15px); }
  66% { transform: translate(20px, -10px); }
}

@keyframes pkg-float-b {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(15px, -20px); }
  66% { transform: translate(-15px, 20px); }
}

@keyframes pkg-float-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -15px); }
}

/* Hero Content */
.paket-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: var(--pkg-ink);
}

.paket-hero__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pkg-accent);
  font-weight: 700;
  margin: 0 0 1rem 0;
}

#paket-hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1.2rem 0;
  color: var(--pkg-ink);
  letter-spacing: -0.02em;
}

.paket-hero__lead {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.8);
  margin: 0 0 2rem 0;
  max-width: 600px;
}

/* Action Buttons */
.paket-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.paket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: 2px solid transparent;
}

.paket-btn--primary {
  background: linear-gradient(135deg, var(--pkg-accent), var(--pkg-accent-3));
  color: #fff;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.paket-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
}

.paket-btn--ghost {
  background: transparent;
  color: var(--pkg-ink);
  border-color: var(--pkg-muted);
}

.paket-btn--ghost:hover {
  border-color: var(--pkg-accent);
  color: var(--pkg-accent);
}

/* Meta Chips */
.paket-hero__meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.paket-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pkg-accent-2);
}

/* Stats Section */
.paket-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(167, 139, 250, 0.2);
}

.paket-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.paket-stat__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--pkg-accent-2), var(--pkg-accent));
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.paket-stat__label {
  font-size: 0.85rem;
  color: var(--pkg-muted);
  font-weight: 500;
}

/* Archive Header - Filter Bar (below hero) */
.paket-archive-header {
  margin-bottom: 2rem;
}

.paket-filters {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: rgba(26, 26, 46, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.1);
}

.tier-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tier-filter {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--pkg-stroke);
  background: var(--pkg-card);
  color: var(--pkg-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tier-filter:hover {
  border-color: var(--pkg-accent);
  color: var(--pkg-accent);
}

.tier-filter.active {
  background: linear-gradient(135deg, var(--pkg-accent), var(--pkg-accent-3));
  color: #fff;
  border-color: transparent;
}

.service-filter {
  flex: 1;
  min-width: 200px;
}

.service-filter select {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--pkg-stroke);
  background: var(--pkg-card);
  color: var(--pkg-ink);
  font-size: 0.95rem;
  cursor: pointer;
}

.service-filter select:hover {
  border-color: var(--pkg-accent);
}

.service-filter select:focus {
  outline: none;
  border-color: var(--pkg-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .paket-hero {
    min-height: auto;
    padding: 2.5rem 1.5rem;
    margin-bottom: 2rem;
  }

  .paket-hero__content {
    max-width: 100%;
  }

  #paket-hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .paket-hero__actions {
    flex-direction: column;
  }

  .paket-btn {
    width: 100%;
  }

  .paket-hero__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .paket-filters {
    flex-direction: column;
    gap: 1rem;
  }

  .tier-filters {
    width: 100%;
  }

  .service-filter {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .paket-hero {
    padding: 1.5rem 1rem;
  }

  .paket-hero__eyebrow {
    font-size: 0.75rem;
  }

  #paket-hero-title {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .paket-hero__lead {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }

  .paket-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .paket-hero__meta {
    gap: 0.5rem;
  }

  .paket-chip {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }

  .paket-hero__stats {
    gap: 0.75rem;
  }

  .paket-stat__num {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }

  .paket-stat__label {
    font-size: 0.75rem;
  }
}

/* Typography Fallback (if Fraunces font not available) */
@font-face {
  font-family: 'Fraunces';
  src: url('https://fonts.gstatic.com/s/fraunces/v30/6NUi8-xKszvOKPIIVh5mP0Z0nG8.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* Ensure fonts are loaded */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@800&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* === panel-jazath.css === */
/* Panel JazaTH (moved from admin-panel.css) */
/* Keeps same selectors — canonical file for the JazaTH admin settings panel */
:root{--jzth-accent:#0ea5a0;--jzth-dark:#0f1724;--jzth-sidebar:#0b3b4f;--jzth-sidebar-gradient:linear-gradient(180deg,#0b3b4f 0%,#0a2e3a 100%);--jzth-muted:#6b7280}
.jzth-admin-wrap{max-width:1300px;margin:18px auto;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif}
.jzth-admin-panel{display:flex;background:transparent;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(2,6,23,.06)}
/* SIDEBAR */
.jzth-sidebar{width:260px;background:var(--jzth-sidebar-gradient);color:#fff;padding:18px 0;display:flex;flex-direction:column}
.jzth-sidebar .brand{display:flex;gap:12px;align-items:center;padding:0 20px;margin-bottom:8px}
.jzth-sidebar .brand h3{margin:0;font-size:1.05rem}
.jzth-nav{display:flex;flex-direction:column;margin-top:6px}
.jzth-nav-item{display:flex;align-items:center;gap:12px;padding:12px 18px;color:rgba(255,255,255,.88);text-decoration:none;font-weight:600;border-left:3px solid transparent;cursor:pointer}
.jzth-nav-item .dashicons{font-size:18px;opacity:.98}
.jzth-nav-item:hover{background:rgba(255,255,255,.02)}
.jzth-nav-item.active{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent);border-left-color:rgba(255,255,255,.18)}
.jzth-nav-section{margin-top:8px;padding:8px 14px;color:rgba(255,255,255,.6);font-size:.85rem}
/* CONTENT */
.jzth-content{flex:1;position:relative;padding:28px;min-height:640px;overflow:hidden;color:#e6eef8;background:linear-gradient(180deg,#071a28 0%, #0a2b33 40%, #072033 100%);background-color:#0a2b33}
/* subtle animated blobs */
.jzth-content::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 360px at 18% 18%, rgba(14,165,132,0.06), transparent 18%), radial-gradient(420px 240px at 82% 78%, rgba(59,130,246,0.035), transparent 22%);filter:blur(34px);mix-blend-mode:screen;animation:jzth-move 22s ease-in-out infinite;pointer-events:none;z-index:0;opacity:.7}
/* patterned overlay (modern corak) */
.jzth-content::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 48px), radial-gradient(circle at 90% 70%, rgba(255,255,255,0.02), transparent 20%);mix-blend-mode:overlay;opacity:.28;pointer-events:none;z-index:0}
@keyframes jzth-move{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4%) rotate(2deg)}100%{transform:translateY(0) rotate(0deg)}}
.jzth-content-body,.jzth-panel-header,.jzth-section{position:relative;z-index:1}
.jzth-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.jzth-panel-header h1{margin:0;font-size:1.4rem;color:#e6eef8}
.jzth-panel-header .version{color:rgba(255,255,255,.45);font-size:.9rem}
.jzth-content-body{display:block}
.jzth-section{display:none;padding-bottom:22px}
.jzth-section.active{display:block}

/* cards (panels) */
.jzth-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:18px;box-shadow:0 10px 40px rgba(2,6,23,.35);min-height:140px;color:#e6eef8}
.jzth-card h2{margin:0 0 8px;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;color:#e6eef8}
.jzth-card .description{color:rgba(255,255,255,0.65);font-size:.95rem;margin-bottom:10px}

.jzth-accordion{border-top:1px solid rgba(255,255,255,0.03)}
.jzth-accordion-item{display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer}
.jzth-accordion-item .title{font-weight:600;color:rgba(255,255,255,0.92)}
.jzth-accordion-item .chev{color:rgba(255,255,255,0.45)}
.jzth-accordion-panel{padding:14px;border-top:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.02);display:none;color:#e6eef8}
.jzth-accordion-item.open + .jzth-accordion-panel{display:block}
/* form controls inside panels */
.jzth-form-row{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.jzth-form-row label{width:220px;color:rgba(255,255,255,0.85);font-weight:600}
.jzth-form-row .control{flex:1}
.jzth-form-row input[type="text"],.jzth-form-row select,.jzth-form-row textarea{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#e6eef8}
.jzth-color{width:56px;height:34px;padding:3px;border-radius:6px;border:1px solid #e6e6e6;display:inline-block}
.jzth-ql-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
/* utilities */
.jzth-actions{display:flex;gap:8px;align-items:center;margin:6px 0 12px}
.jzth-notice{margin:10px 0}
/* Save button fixed */
.jzth-save-fixed{position:fixed;right:34px;bottom:28px;z-index:9999}
.jzth-save-fixed .button-primary{background:var(--jzth-accent);border-color:var(--jzth-accent);color:#fff;padding:12px 18px;border-radius:8px;box-shadow:0 8px 30px rgba(2,6,23,.12)}
/* responsive */
@media (max-width:980px){.jzth-sidebar{width:84px}.jzth-nav-item{padding:10px 12px;font-size:.85rem}.jzth-form-row label{width:160px}}
@media (max-width:720px){.jzth-admin-panel{flex-direction:column}.jzth-sidebar{width:100%;display:flex;overflow:auto}.jzth-content{padding:16px}.jzth-save-fixed{right:12px;bottom:12px}}

/* Page background behind the panel — subtle modern corak (only on JazaTH page) */
body.toplevel_page_jzth-settings {
  background-color: #0a1825; /* default dark teal - now customizable via panel */
  background-image:
    radial-gradient(circle at 8% 12%, rgba(14,165,132,0.06), transparent 18%),
    radial-gradient(circle at 92% 88%, rgba(59,130,246,0.04), transparent 20%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 60px);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Slight subtle overlay to add depth */
body.toplevel_page_jzth-settings::before{
  content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(1400px 700px at 50% 50%, rgba(14,165,132,0.02), transparent 50%);mix-blend-mode:screen;opacity:.4;z-index:0;
}

/* keep the centered panel visually elevated */
.jzth-admin-panel{position:relative;z-index:1}


/* === post-single.css === */
/* 
 * Modern Single Post Template Styles
 * Design system: Dark blue-green gradient theme
 * Responsive: Desktop > 1024px, Mobile < 768px
 */

html {
    scroll-behavior: smooth;
}

.post-single__wrapper {
    background: #ffffff;
}

/* ===== HERO SECTION ===== */
.post-single__hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 60px;
    overflow: hidden;
}

.post-single__hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 26, 43, 0.95) 0%, rgba(15, 47, 37, 0.95) 52%, rgba(10, 36, 29, 0.95) 100%);
    z-index: 1;
}

.post-single__hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 60px 40px;
    animation: fadeInUp 0.8s ease-out;
}

/* Breadcrumb */
.post-single__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 14px;
    opacity: 0.85;
    letter-spacing: 0.5px;
}

.post-single__breadcrumb a {
    color: #10b981;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.post-single__breadcrumb a:hover {
    color: #06d6a0;
    text-decoration: underline;
}

.post-single__breadcrumb span,
.post-single__breadcrumb .current {
    color: rgba(255, 255, 255, 0.7);
}

/* Title */
.post-single__title {
    font-family: 'Fraunces', serif;
    /* increased scale for clearer H1/H2 hierarchy */
    font-size: clamp(36px, 9vw, 72px);
    font-weight: 800;
    line-height: 1.08;
    margin: 8px 0 6px;
    letter-spacing: -1px;

    /* gradient title: light-blue → yellow */
    background: linear-gradient(90deg, #93c5fd 0%, #facc15 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* keep subtle shadow for contrast against busy hero backgrounds */
    text-shadow: 0 6px 18px rgba(11, 26, 43, 0.35);
}

/* Subtitle (SEO-friendly secondary heading under H1) */
.post-single__subtitle {
    /* keep subtitle distinctly smaller than H1 */
    font-size: clamp(14px, 2.2vw, 18px);

    /* gradient subtitle: light-blue → yellow (subtle) */
    background: linear-gradient(90deg, #93c5fd 0%, #facc15 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    margin: 6px 0 18px;
    font-weight: 600;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
    letter-spacing: -0.2px;
    opacity: 0.95;
}

@media (max-width:720px){
    .post-single__title{font-size: clamp(24px, 7vw, 40px);line-height:1.12}
    .post-single__subtitle{font-size: clamp(13px, 3.2vw, 16px)}
}

/* Meta Info */
.post-single__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.9;
}

.post-single__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-single__meta-item .label {
    opacity: 0.7;
    font-weight: 500;
}

.post-single__meta-item a {
    color: #10b981;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.post-single__meta-item a:hover {
    color: #06d6a0;
}

.post-single__meta .sep {
    opacity: 0.5;
}

/* Share Buttons */
.post-single__share {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.share-label {
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-size: 11px;
    opacity: 0.8;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.4px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, var(--share-color), color-mix(in srgb, var(--share-color) 65%, black));
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.share-text {
    display: none;
}

.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.share-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.share-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
}

.share-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.25), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.share-btn:hover::after {
    opacity: 1;
}

.share-wa { --share-color: #22c55e; }
.share-fb { --share-color: #1877f2; }
.share-x { --share-color: #111827; }
.share-ln { --share-color: #0a66c2; }
.share-tg { --share-color: #229ed9; }

@media (max-width: 600px) {
    .post-single__share {
        gap: 8px;
    }

    .share-btn {
        padding: 7px 12px;
        font-size: 11px;
    }
}

/* ===== CONTAINER & GRID ===== */
.post-single__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.post-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    margin-bottom: 80px;
}

@media (max-width: 1024px) {
    .post-single__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ===== MAIN CONTENT ===== */
.post-single__content {
    width: 100%;
}

.post-single__featured {
    width: 100%;
    margin: 0 0 40px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.post-single__featured img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Article Text */
.post-single__text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    word-spacing: 0.05em;
}

.post-single__text h2 {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 700;
    margin: 2.4rem 0 1rem; /* consistent rhythm */
    color: #0b1a2b;
    line-height: 1.3;
    scroll-margin-top: calc(var(--headH,88px) + 8px);
}

.post-single__text h3 {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 700;
    margin: 1.6rem 0 0.8rem; /* consistent rhythm */
    color: #0f2f25;
    scroll-margin-top: calc(var(--headH,88px) + 8px);
} 

.post-single__text p {
    margin: 0 0 20px 0;
}

.post-single__text a {
    color: #10b981;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.post-single__text a:hover {
    border-bottom-color: #10b981;
}

.post-single__text ul,
.post-single__text ol {
    margin: 20px 0 20px 30px;
    line-height: 2;
}

.post-single__text li {
    margin-bottom: 10px;
}

/* ===== BLOCKQUOTE STYLES (Modern & Beautiful) ===== */

/* Default Blockquote - Gradient dengan Quote Icon */
.post-single__text blockquote {
    position: relative;
    border: none;
    border-left: 4px solid transparent;
    border-image: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
    border-image-slice: 1;
    padding: 30px 40px 30px 70px;
    margin: 40px 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(11, 26, 43, 0.03) 100%);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: clamp(16px, 1.125rem, 20px);
    line-height: 1.8;
    color: #0b1a2b;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
    transition: all 0.3s ease;
}

.post-single__text blockquote::before {
    content: '"';
    position: absolute;
    left: 20px;
    top: 20px;
    font-family: 'Georgia', serif;
    font-size: 60px;
    line-height: 1;
    color: #10b981;
    opacity: 0.3;
    font-style: normal;
}

.post-single__text blockquote:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15);
}

.post-single__text blockquote p {
    margin: 0 0 15px 0;
}

.post-single__text blockquote p:last-child {
    margin-bottom: 0;
}

/* Blockquote dengan Author/Citation */
.post-single__text blockquote cite,
.post-single__text blockquote footer {
    display: block;
    margin-top: 20px;
    font-style: normal;
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
    padding-top: 15px;
}

.post-single__text blockquote cite::before,
.post-single__text blockquote footer::before {
    content: '— ';
    color: #0b1a2b;
}

/* Blockquote Highlight - Full Gradient Background */
.post-single__text blockquote.blockquote-highlight {
    background: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
    color: #ffffff;
    border-left: none;
    padding: 30px 40px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}

.post-single__text blockquote.blockquote-highlight::before {
    color: rgba(255, 255, 255, 0.4);
}

.post-single__text blockquote.blockquote-highlight cite,
.post-single__text blockquote.blockquote-highlight footer {
    color: rgba(255, 255, 255, 0.9);
    border-top-color: rgba(255, 255, 255, 0.3);
}

.post-single__text blockquote.blockquote-highlight:hover {
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.35);
}

/* Blockquote Bordered - Tebal dengan Shadow */
.post-single__text blockquote.blockquote-bordered {
    border: 3px solid #10b981;
    border-radius: 12px;
    padding: 30px 40px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.post-single__text blockquote.blockquote-bordered::before {
    display: none;
}

.post-single__text blockquote.blockquote-bordered::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, #10b981, #06d6a0, #10b981);
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-single__text blockquote.blockquote-bordered:hover::after {
    opacity: 0.5;
}

/* Blockquote Simple - Minimalist dengan Line */
.post-single__text blockquote.blockquote-simple {
    border-left: 3px solid #10b981;
    padding: 15px 30px;
    margin: 30px 0;
    background: transparent;
    font-style: normal;
    font-size: 16px;
    box-shadow: none;
}

.post-single__text blockquote.blockquote-simple::before {
    display: none;
}

.post-single__text blockquote.blockquote-simple:hover {
    transform: none;
    border-left-width: 5px;
    padding-left: 28px;
}

/* Blockquote Warning/Info Variants */
.post-single__text blockquote.blockquote-warning {
    border-image: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    border-image-slice: 1;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.03) 100%);
}

.post-single__text blockquote.blockquote-warning::before {
    content: '⚠';
    color: #f59e0b;
    font-style: normal;
}

.post-single__text blockquote.blockquote-info {
    border-image: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-image-slice: 1;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.03) 100%);
}

.post-single__text blockquote.blockquote-info::before {
    content: 'ℹ';
    color: #3b82f6;
    font-style: normal;
}

/* Responsive Blockquote */
@media (max-width: 768px) {
    .post-single__text blockquote {
        padding: 20px 30px 20px 50px;
        margin: 30px 0;
        font-size: 16px;
    }

    .post-single__text blockquote::before {
        font-size: 40px;
        left: 15px;
        top: 15px;
    }

    .post-single__text blockquote.blockquote-simple {
        padding: 15px 20px;
    }

    .post-single__text blockquote cite,
    .post-single__text blockquote footer {
        font-size: 13px;
    }
}

.post-single__text pre {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.5;
}

.post-single__text code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 14px;
}

/* ===== TAGS ===== */
.post-single__tags {
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.post-single__tags strong {
    color: #0b1a2b;
    font-weight: 600;
}

.post-single__tag {
    display: inline-block;
    background: #f0fdf4;
    color: #0b5c37;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #d1fae5;
}

.post-single__tag:hover {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

/* ===== SIDEBAR ===== */
.post-single__sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Box Styles */
.post-single__box {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.post-single__box:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.post-single__box h3 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 700;
    color: #0b1a2b;
    margin: 0 0 20px 0;
}

/* Author Card */
.post-single__author-card {
    background: linear-gradient(135deg, rgba(11, 26, 43, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}

.post-single__author-card h3 {
    font-size: 18px;
    margin: 0 0 15px 0;
    color: #0b1a2b;
}

.post-single__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid #10b981;
    display: block;
}

.post-single__author-name {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 700;
    margin: 15px 0;
    color: #0b1a2b;
}

.post-single__author-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-single__author-name a:hover {
    color: #10b981;
}

.post-single__author-bio {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 12px 0;
}

.post-single__author-btn {
    display: inline-block;
    background: linear-gradient(135deg, #0b1a2b 0%, #0f2f25 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

.post-single__author-btn:hover {
    background: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
    transform: translateY(-2px);
}

/* ===== KILAS WIDGET (Featured Posts) ===== */
.post-single__kilas-widget {
    background: linear-gradient(145deg, 
        rgba(11, 36, 71, 0.15) 0%,
        rgba(25, 55, 109, 0.15) 50%,
        rgba(16, 185, 129, 0.15) 100%);
    border-radius: 20px;
    position: relative;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
    animation: widget-float 7s ease-in-out infinite;
    will-change: transform;
    contain: layout style paint;
}

.post-single__kilas-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(25, 55, 109, 0.1) 0%, 
        transparent 50%),
        radial-gradient(circle at 80% 80%, 
        rgba(16, 185, 129, 0.1) 0%, 
        transparent 50%);
    animation: gradient-rotate 20s linear infinite;
    pointer-events: none;
}

.post-single__kilas-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.kilas-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px 10px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    position: relative;
    z-index: 10;
    margin: -40px 0 16px 0;
}

.kilas-accent {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: icon-pulse 2.5s ease-in-out infinite;
}

.kilas-accent::after {
    content: '⚡';
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.kilas-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
}

/* Featured Post with Large Image */
.kilas-featured {
    position: relative;
    overflow: hidden;
    margin: 0 12px 8px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.kilas-featured-link {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    border-radius: 16px;
}

.kilas-featured img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: brightness(0.9);
}

.kilas-featured-link:hover img {
    transform: scale(1.15) rotate(2deg);
    filter: brightness(1);
}

.kilas-featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, 
        rgba(11, 36, 71, 0.95) 0%, 
        rgba(11, 36, 71, 0.7) 60%, 
        transparent 100%);
    padding: 16px 18px 14px;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(8px);
}

.kilas-featured-overlay h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

.kilas-featured-link:hover .kilas-featured-overlay {
    background: linear-gradient(to top, 
        rgba(16, 185, 129, 0.95) 0%, 
        rgba(16, 185, 129, 0.7) 60%, 
        transparent 100%);
    transform: translateY(-5px);
}

.kilas-featured-link:hover .kilas-featured-overlay h4 {
    transform: translateX(5px);
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* List of Posts */
.kilas-list {
    padding: 0 8px 12px;
    margin: 0;
    background: transparent;
    position: relative;
    z-index: 1;
}

.kilas-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    margin: 0 4px 8px;
    border-radius: 12px;
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.kilas-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, transparent 100%);
    transition: width 0.4s ease;
}

.kilas-item:hover::before {
    width: 100%;
}

.kilas-item:hover {
    background: rgba(16, 185, 129, 0.1);
    padding-left: 20px;
    border-left-color: #10b981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
    transform: translateX(5px);
}

.kilas-item:last-child {
    margin-bottom: 0;
}

.kilas-item h5 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    transition: all 0.3s ease;
    flex: 1;
    position: relative;
    z-index: 1;
}

.kilas-item:hover h5 {
    color: #10b981;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.kilas-arrow {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    margin-left: 8px;
    opacity: 0;
    transform: translateX(-10px);
}

.kilas-item:hover .kilas-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #10b981;
}

/* Responsive */
@media (max-width: 768px) {
    .post-single__popular-widget,
    .post-single__recommend-widget {
        padding-top: 8px;
    }

    .kilas-header {
        margin: -20px 0 12px 0;
    }
    
    .popular-header {
        margin: 0 0 12px 0;
        padding-top: 10px;
    }

    .popular-header h3 {
        line-height: 1.35;
        padding-top: 2px;
    }
    
    .recommend-header {
        margin: 0 0 12px 0;
        padding-top: 10px;
    }

    .recommend-header h3 {
        line-height: 1.35;
        padding-top: 2px;
    }
    
    .category-modern-header {
        margin: 0 0 12px 0;
        padding-top: 14px;
    }
    
    .kilas-featured img {
        height: 220px;
    }

    .kilas-featured-overlay h4 {
        font-size: 14px;
    }

    .kilas-item {
        padding: 14px 16px;
    }

    .kilas-item h5 {
        font-size: 13px;
    }
}

/* Categories List */
.post-single__categories-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-single__category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    color: #0b1a2b;
    transition: all 0.3s ease;
    font-weight: 500;
}

.post-single__category-link:hover {
    padding-left: 5px;
    color: #10b981;
}

.post-single__category-link small {
    color: #999;
    font-size: 12px;
}

/* Table of Contents (Sidebar - removed, now inline) */

/* Table of Contents - Inline (after first paragraph) */
.post-toc-inline {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(11, 26, 43, 0.05) 100%);
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.post-toc-inline:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.post-toc-inline__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

.post-toc-inline__icon {
    font-size: 24px;
    line-height: 1;
}

.post-toc-inline__header h3 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 700;
    color: #10b981;
    margin: 0;
    flex: 1;
}

.post-toc-inline__toggle {
    background: none;
    border: none;
    color: #10b981;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.post-toc-inline__toggle:hover {
    transform: scale(1.1);
}

.post-toc-inline.collapsed .post-toc-inline__toggle svg {
    transform: rotate(-90deg);
}

.post-toc-inline__list {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 1000px;
    opacity: 1;
}

.post-toc-inline.collapsed .post-toc-inline__list {
    max-height: 0;
    opacity: 0;
}

.post-toc-inline__list ol {
    list-style: none;
    counter-reset: toc-counter;
    margin: 0;
    padding: 0;
}

.post-toc-inline__list li {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 0;
}

.post-toc-inline__list li::before {
    content: counter(toc-counter) '.';
    color: #10b981;
    font-weight: 700;
    margin-right: 10px;
    font-size: 15px;
    display: inline-block;
    min-width: 25px;
}

.post-toc-inline__list a {
    text-decoration: none;
    color: #0b1a2b;
    font-size: 15px;
    line-height: 1.6;
    transition: all 0.2s ease;
    display: inline-block;
    font-weight: 500;
}

.post-toc-inline__list a:hover {
    color: #10b981;
    transform: translateX(5px);
}

.post-toc-inline__list a.active {
    color: #10b981;
    font-weight: 700;
    position: relative;
}

.post-toc-inline__list a.active::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #10b981;
    border-radius: 50%;
}

.post-toc-inline__list .toc-level-3 {
    padding-left: 30px;
    font-size: 14px;
    margin-bottom: 8px;
}

.post-toc-inline__list .toc-level-3::before {
    content: '→';
    color: #666;
    margin-right: 8px;
    min-width: 20px;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Highlight heading when scrolled to */
h2[id]:target,
h3[id]:target {
    animation: highlight-heading 2s ease;
}

@keyframes highlight-heading {
    0% {
        background-color: rgba(16, 185, 129, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

/* ===== RELATED ARTICLES (Modern Design) ===== */
.post-single__related {
    margin: 80px 0;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(11, 26, 43, 0.02) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.post-single__related h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(28px, 2.5rem, 42px);
    font-weight: 700;
    color: #0b1a2b;
    margin: 0 0 50px 0;
    text-align: center;
    position: relative;
    display: inline-block;
    width: 100%;
}

.post-single__related h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #10b981 0%, #06d6a0 100%);
    border-radius: 2px;
}

/* Grid Layout: 4 columns desktop, 2 columns mobile */
.post-single__related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .post-single__related-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

@media (max-width: 900px) {
    .post-single__related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .post-single__related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Modern Card Design */
.post-single__related-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

.post-single__related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 214, 160, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    border-radius: 16px;
}

.post-single__related-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2);
}

.post-single__related-card:hover::before {
    opacity: 1;
}

/* Thumbnail with Overlay */
.post-single__related-thumb {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    display: block;
    background: linear-gradient(135deg, #0b1a2b 0%, #0f2f25 100%);
}

.post-single__related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-single__related-card:hover .post-single__related-thumb img {
    transform: scale(1.1);
}

/* Gradient Overlay on Image */
.post-single__related-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(11, 26, 43, 0) 0%, rgba(11, 26, 43, 0.6) 100%);
    opacity: 0.5;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.post-single__related-card:hover .post-single__related-overlay {
    opacity: 0.7;
}

/* Category Badge */
.post-single__related-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: transform 0.3s ease;
}

.post-single__related-card:hover .post-single__related-badge {
    transform: scale(1.05);
}

/* Placeholder for posts without image */
.post-single__related-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e7ff 0%, #d1fae5 100%);
    color: #10b981;
}

/* Content Area */
.post-single__related-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Meta (Date) */
.post-single__related-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.post-single__related-meta time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Title */
.post-single__related-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(14px, 1.125rem, 18px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

.post-single__related-title a {
    color: #0b1a2b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-single__related-card:hover .post-single__related-title a {
    color: #10b981;
}

/* Excerpt */
.post-single__related-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 15px 0;
    flex: 1;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read More Button */
.post-single__related-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.05);
}

.post-single__related-btn svg {
    transition: transform 0.3s ease;
}

.post-single__related-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    gap: 12px;
}

.post-single__related-btn:hover svg {
    transform: translateX(4px);
}

/* Mobile Optimizations */
@media (max-width: 600px) {
    .post-single__related {
        padding: 40px 15px;
        margin: 60px 0;
    }

    .post-single__related h2 {
        font-size: 24px;
        margin-bottom: 35px;
    }

    .post-single__related h2::after {
        width: 60px;
        height: 3px;
        bottom: -12px;
    }

    .post-single__related-thumb {
        height: 160px;
    }

    .post-single__related-badge {
        top: 10px;
        left: 10px;
        padding: 5px 12px;
        font-size: 10px;
    }

    .post-single__related-content {
        padding: 15px;
    }

    .post-single__related-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .post-single__related-excerpt {
        font-size: 12px;
        margin-bottom: 12px;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    .post-single__related-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ===== COMMENTS SECTION ===== */
.post-single__comments {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 60px 20px;
    border-top: 2px solid #e0e0e0;
}

.post-single__comments h2 {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 700;
    color: #0b1a2b;
    margin: 0 0 40px 0;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .post-single__hero {
        min-height: 350px;
        margin-bottom: 40px;
    }

    .post-single__hero-content {
        padding: 40px 20px;
    }

    .post-single__title {
        font-size: 28px;
    }

    .post-single__meta {
        font-size: 12px;
        gap: 8px;
    }

    .post-single__text {
        font-size: 15px;
    }

    .post-single__text h2 {
        font-size: 24px;
        margin: 1.8rem 0 0.9rem; /* responsive rhythm */
    }

    .post-single__text h3 {
        font-size: 20px;
        margin: 1.2rem 0 0.7rem; /* responsive rhythm */
    }

    .post-single__related {
        margin: 60px 0;
    }

    .post-single__comments {
        padding: 40px 20px;
    }
}
/* Accessibility helper */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Post hero card (image right, text left) */
.post-hero.hero-card{display:grid;grid-template-columns:1fr 480px;gap:24px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:16px;margin-bottom:20px;align-items:center}
.post-hero .hero-left{padding:12px}
.post-hero .hero-kicker{font-weight:700;color:#62d3ff;margin-bottom:8px;font-size:0.95rem}
.post-hero .hero-title{font-size:2rem;margin:0 0 12px;color:#eaf0ff;font-weight:900}
.post-hero .hero-excerpt{color:rgba(255,255,255,.82);margin-bottom:16px;line-height:1.6}
.post-hero .hero-ctas .btn{margin-right:12px;padding:10px 18px;border-radius:999px;text-decoration:none;display:inline-block}
.post-hero .btn.primary{background:linear-gradient(90deg,#62d3ff,#00bfff);color:#021424;font-weight:800}
.post-hero .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.08);color:#eaf0ff}
.post-hero .hero-right .hero-image{height:260px;background-size:cover;background-position:center;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
@media (max-width:900px){.post-hero.hero-card{grid-template-columns:1fr;padding:18px}.post-hero .hero-right{order:-1;margin-bottom:12px}.post-hero .hero-right .hero-image{height:180px}}

/* ===== MODERN COMMENTS SECTION - DARK GREEN THEME ===== */
.comments-section {
    background: linear-gradient(135deg, #0a3d2c 0%, #064d3b 50%, #0a3d2c 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    margin: 0;
}

.comments-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(6, 214, 160, 0.08) 0%, transparent 50%);
    pointer-events: none;
    animation: gradientPulse 8s ease-in-out infinite;
}

@keyframes gradientPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.comments-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.comments-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 50px 40px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Comments Title */
.comments-title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 40px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(16, 185, 129, 0.3);
}

.comments-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #06d6a0);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
}

.comments-icon {
    width: 28px;
    height: 28px;
    stroke: #10b981;
    stroke-width: 2;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

/* Comment List */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.comment-item {
    margin-bottom: 25px;
}

.comment-body {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    border-left: 3px solid #10b981;
    transition: all 0.3s ease;
}

.comment-body:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateX(5px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar .avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #10b981;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.comment-content-wrap {
    flex: 1;
    min-width: 0;
}

.comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.comment-author-name {
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
}

.comment-author-name a {
    color: #10b981;
    text-decoration: none;
}

.comment-author-name a:hover {
    color: #06d6a0;
    text-decoration: underline;
}

.comment-metadata {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.comment-text {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 10px;
}

.comment-text p {
    margin: 0 0 8px 0;
}

.comment-awaiting-moderation {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 6px;
    color: #fbbf24;
    font-size: 12px;
    margin-bottom: 10px;
    font-style: normal;
}

.reply-link-wrap a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    color: #10b981;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.reply-link-wrap a:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    transform: translateX(3px);
}

/* Nested Comments */
.children {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 25px;
}

.children .comment-body {
    background: rgba(255, 255, 255, 0.04);
}

/* Comment Form */
.comment-respond-wrap {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.comment-reply-title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reply-icon {
    width: 24px;
    height: 24px;
    stroke: #10b981;
    stroke-width: 2;
    flex-shrink: 0;
}

.comment-form {
    display: grid;
    gap: 18px;
}

.comment-form p {
    margin: 0;
}

.comment-form label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.comment-form .required {
    color: #f87171;
    margin-left: 2px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15),
                0 4px 12px rgba(16, 185, 129, 0.2);
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.comment-form-comment {
    grid-column: 1 / -1;
}

.comment-form .form-submit {
    margin: 10px 0 0 0;
}

.submit-btn,
.comment-form .submit,
.comment-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    letter-spacing: 0.3px;
}

.submit-btn:hover,
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.submit-btn:active,
.comment-form .submit:active,
.comment-form input[type="submit"]:active {
    transform: translateY(0);
}

.submit-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Checkbox */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
}

.comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #10b981;
}

.comment-form-cookies-consent label {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-weight: 400;
}

/* Logged in as */
.comment-form .logged-in-as {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0 0 15px 0;
}

.comment-form .logged-in-as a {
    color: #10b981;
    text-decoration: none;
}

.comment-form .logged-in-as a:hover {
    color: #06d6a0;
    text-decoration: underline;
}

/* Comments Closed */
.comments-closed {
    padding: 25px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 15px;
    text-align: center;
    margin: 0;
}

/* Comment Navigation */
.comment-navigation {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.comment-navigation a {
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

.comment-navigation a:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .comments-section {
        padding: 60px 0;
    }

    .comments-container {
        padding: 35px 25px;
        border-radius: 16px;
    }

    .comments-title {
        font-size: 26px;
        gap: 8px;
        margin-bottom: 30px;
    }

    .comments-icon {
        width: 24px;
        height: 24px;
    }

    .comment-body {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .comment-avatar .avatar-img {
        width: 40px;
        height: 40px;
    }

    .children {
        margin-left: 15px;
    }

    .comment-reply-title {
        font-size: 22px;
    }

    .reply-icon {
        width: 20px;
        height: 20px;
    }

    .submit-btn,
    .comment-form .submit,
    .comment-form input[type="submit"] {
        width: 100%;
    }

    .comment-navigation {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .comments-container {
        padding: 25px 18px;
    }

    .comments-title {
        font-size: 22px;
    }

    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* live-reload-test: comments-modern-green */

/* ===== TERPOPULER WIDGET (Numbered List Design) ===== */
.post-single__popular-widget {
    background: linear-gradient(145deg, 
        rgba(45, 27, 78, 0.15) 0%,
        rgba(74, 44, 107, 0.15) 50%,
        rgba(251, 191, 36, 0.15) 100%);
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    animation: widget-float 8s ease-in-out infinite;
    will-change: transform;
    contain: layout style paint;
}

.post-single__popular-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(74, 44, 107, 0.1) 0%, 
        transparent 50%),
        radial-gradient(circle at 80% 80%, 
        rgba(251, 191, 36, 0.1) 0%, 
        transparent 50%);
    animation: gradient-rotate 18s linear infinite;
    pointer-events: none;
}

.post-single__popular-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.popular-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 8px 12px 10px;
    background: transparent;
    text-align: center;
    position: relative;
    z-index: 10;
    margin: -40px 0 16px 0;
}

.popular-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: icon-pulse 2.2s ease-in-out infinite;
}

.popular-icon svg {
    width: 18px;
    height: 18px;
    color: #1f2937;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.popular-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.2);
}

.popular-list {
    padding: 0 8px 12px;
    position: relative;
    z-index: 1;
}

.popular-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 0 4px 10px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border: 1px solid transparent;
}

.popular-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(251, 191, 36, 0.15) 0%, 
        rgba(245, 158, 11, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.popular-item:hover::before {
    opacity: 1;
}

.popular-item:last-child {
    margin-bottom: 0;
}

.popular-item:hover {
    background: rgba(251, 191, 36, 0.12);
    transform: translateX(8px) scale(1.02);
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.25),
                0 0 30px rgba(251, 191, 36, 0.1);
}

.popular-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 8px;
    color: #1f2937;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.popular-item:hover .popular-number {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6),
                0 0 25px rgba(251, 191, 36, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.popular-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(251, 191, 36, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.popular-item:hover .popular-thumb {
    border-color: #fbbf24;
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4),
                0 0 25px rgba(251, 191, 36, 0.2);
}

.popular-title {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.popular-item:hover .popular-title {
    color: #fbbf24;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

/* ===== REKOMENDASI WIDGET (Grid Design) ===== */
.post-single__recommend-widget {
    background: linear-gradient(145deg, 
        rgba(19, 78, 74, 0.15) 0%,
        rgba(15, 118, 110, 0.15) 50%,
        rgba(20, 184, 166, 0.15) 100%);
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    animation: widget-float 9s ease-in-out infinite;
    will-change: transform;
    contain: layout style paint;
}

.post-single__recommend-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(15, 118, 110, 0.1) 0%, 
        transparent 50%),
        radial-gradient(circle at 80% 80%, 
        rgba(20, 184, 166, 0.1) 0%, 
        transparent 50%);
    animation: gradient-rotate 22s linear infinite;
    pointer-events: none;
}

.post-single__recommend-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.recommend-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 8px 12px 10px;
    background: transparent;
    text-align: center;
    position: relative;
    z-index: 10;
    margin: -40px 0 16px 0;
}

.recommend-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: icon-pulse 2.8s ease-in-out infinite;
}

.recommend-icon svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.recommend-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(20, 184, 166, 0.2);
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 12px 12px;
    position: relative;
    z-index: 1;
}

.recommend-card {
    display: block;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(20, 184, 166, 0.15);
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.recommend-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.recommend-card:hover::before {
    opacity: 1;
}

.recommend-card:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(20, 184, 166, 0.3),
                0 0 40px rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.6);
}

.recommend-thumb {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.recommend-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: brightness(0.85);
}

.recommend-card:hover .recommend-thumb img {
    transform: scale(1.2) rotate(3deg);
    filter: brightness(1);
}

.recommend-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(19, 78, 74, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.recommend-card:hover .recommend-overlay {
    opacity: 1;
    background: linear-gradient(to bottom, 
        rgba(20, 184, 166, 0.3) 0%, 
        rgba(20, 184, 166, 0.8) 100%);
}

.recommend-title {
    padding: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    transition: all 0.3s ease;
    min-height: 60px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.recommend-card:hover .recommend-title {
    color: #14b8a6;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .recommend-grid {
        grid-template-columns: 1fr;
    }
    
    .recommend-thumb {
        height: 140px;
    }
}

/* ===== CATEGORY WIDGET (Modern Pill Design) ===== */
/* ===== ULTRA MODERN CATEGORY WIDGET ===== */
.category-modern-widget {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.15) 0%,
        rgba(59, 130, 246, 0.15) 50%,
        rgba(6, 182, 212, 0.15) 100%);
    border-radius: 20px;
    padding: 24px 20px;
    position: relative;
    overflow: visible;
    margin-bottom: 24px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: widget-float 6s ease-in-out infinite;
    will-change: transform;
    contain: layout style paint;
}

@keyframes widget-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Animated gradient background */
.category-modern-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(139, 92, 246, 0.1) 0%, 
        transparent 50%),
        radial-gradient(circle at 80% 80%, 
        rgba(6, 182, 212, 0.1) 0%, 
        transparent 50%);
    animation: gradient-rotate 15s linear infinite;
    pointer-events: none;
}

@keyframes gradient-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .post-single__kilas-widget,
    .post-single__popular-widget,
    .post-single__recommend-widget,
    .category-modern-widget,
    .category-icon-wrapper,
    .kilas-accent,
    .category-sparkle {
        animation: none !important;
        transform: none !important;
    }
}

/* Glassmorphism overlay */
.category-modern-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

/* Header */
.category-modern-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: -30px 0 16px 0;
    position: relative;
    z-index: 10;
}

.category-icon-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6); }
}

.category-icon-wrapper svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.category-modern-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}

.category-sparkle {
    font-size: 18px;
    animation: sparkle-rotate 3s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes sparkle-rotate {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(20deg) scale(1.2); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(-20deg) scale(1.2); }
}

/* Tag Grid */
.category-modern-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Modern Tag Pills */
.category-modern-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: tag-appear 0.6s ease forwards;
    animation-delay: var(--animation-delay, 0s);
}

@keyframes tag-appear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animated border gradient */
.category-modern-tag::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, 
        var(--tag-color, #8b5cf6), 
        color-mix(in srgb, var(--tag-color, #8b5cf6) 60%, #06b6d4));
    border-radius: 50px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Inner glow effect */
.category-modern-tag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, 
        rgba(255, 255, 255, 0.2) 0%, 
        transparent 60%);
    border-radius: 50px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.category-modern-tag:hover::before {
    opacity: 1;
}

.category-modern-tag:hover::after {
    opacity: 1;
}

.category-modern-tag:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: var(--tag-color, #8b5cf6);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3),
                0 0 30px color-mix(in srgb, var(--tag-color, #8b5cf6) 40%, transparent);
}

/* Glow effect on hover */
.tag-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, 
        color-mix(in srgb, var(--tag-color, #8b5cf6) 20%, transparent) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.category-modern-tag:hover .tag-glow {
    opacity: 1;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Tag Icon (hash symbol) */
.tag-icon {
    font-size: 16px;
    font-weight: 700;
    color: var(--tag-color, #8b5cf6);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tag-color, #8b5cf6) 60%, transparent));
}

.category-modern-tag:hover .tag-icon {
    transform: rotate(360deg) scale(1.2);
    color: #ffffff;
}

/* Tag Name */
.tag-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.category-modern-tag:hover .tag-name {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Tag Count Badge */
.tag-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: linear-gradient(135deg, 
        var(--tag-color, #8b5cf6),
        color-mix(in srgb, var(--tag-color, #8b5cf6) 70%, black));
    border-radius: 13px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.category-modern-tag:hover .tag-count {
    transform: scale(1.15) rotate(5deg);
    background: #ffffff;
    color: var(--tag-color, #8b5cf6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
                0 0 15px color-mix(in srgb, var(--tag-color, #8b5cf6) 40%, transparent);
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-modern-widget {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    .category-modern-header h3 {
        font-size: 18px;
    }
    
    .category-icon-wrapper {
        width: 28px;
        height: 28px;
    }
    
    .category-icon-wrapper svg {
        width: 16px;
        height: 16px;
    }
    
    .category-modern-grid {
        gap: 10px;
    }
    
    .category-modern-tag {
        padding: 8px 14px;
        font-size: 13px;
    }
    
    .tag-icon {
        font-size: 14px;
    }
    
    .tag-name {
        font-size: 13px;
    }
    
    .tag-count {
        min-width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .post-single__popular-widget,
    .post-single__recommend-widget,
    .category-modern-widget {
        padding-top: 12px;
    }

    .popular-header,
    .recommend-header,
    .category-modern-header {
        margin: 6px 0 12px 0;
        padding-top: 10px;
    }

    .popular-header h3,
    .recommend-header h3,
    .category-modern-header h3 {
        line-height: 1.35;
        padding-top: 4px;
    }
}


/* === shop-archive.css === */
/**
 * Shop Archive CSS - Modern E-Commerce Design
 * 
 * Features:
 * - Responsive grid layout
 * - Modern card designs with hover effects
 * - Smooth animations & transitions
 * - Gradient effects
 * - Glassmorphism elements
 * - Mobile-first approach
 * - Dark mode ready
 * - Accessibility optimized
 * 
 * @package JazaTH
 * @version 2.0.0
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --jz-primary: #6366f1;
    --jz-primary-dark: #4f46e5;
    --jz-primary-light: #818cf8;
    --jz-secondary: #ec4899;
    --jz-success: #10b981;
    --jz-warning: #f59e0b;
    --jz-danger: #ef4444;
    --jz-dark: #1f2937;
    --jz-light: #f9fafb;
    --jz-gray-50: #f9fafb;
    --jz-gray-100: #f3f4f6;
    --jz-gray-200: #e5e7eb;
    --jz-gray-300: #d1d5db;
    --jz-gray-400: #9ca3af;
    --jz-gray-500: #6b7280;
    --jz-gray-600: #4b5563;
    --jz-gray-700: #374151;
    --jz-gray-800: #1f2937;
    --jz-gray-900: #111827;
    
    --jz-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --jz-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --jz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --jz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --jz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   
    --jz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --jz-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Base & Container
   ======================================== */
.jz-shop-archive {
    background: var(--jz-light);
    min-height: 100vh;
}

.jz-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   Hero Section
   ======================================== */
.jz-shop-hero {
    position: relative;
    padding: 6rem 0 4rem;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.jz-shop-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.jz-shop-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.9) 0%, 
        rgba(118, 75, 162, 0.9) 100%);
}

.jz-shop-hero__orbs {
    position: absolute;
    inset: 0;
}

.jz-shop-hero__orbs .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.jz-shop-hero__orbs .orb-1 {
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.3);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.jz-shop-hero__orbs .orb-2 {
    width: 300px;
    height: 300px;
    background: rgba(236, 72, 153, 0.3);
    bottom: -50px;
    right: 10%;
    animation-delay: 5s;
}

.jz-shop-hero__orbs .orb-3 {
    width: 250px;
    height: 250px;
    background: rgba(99, 102, 241, 0.3);
    top: 50%;
    right: -50px;
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -20px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.9); }
    75% { transform: translate(20px, 10px) scale(1.05); }
}

.jz-shop-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.jz-shop-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.jz-shop-hero__badge svg {
    color: #fbbf24;
}

.jz-shop-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.jz-shop-hero__desc {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.jz-shop-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.jz-shop-hero__stats .stat {
    text-align: center;
}

.jz-shop-hero__stats .stat strong {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.jz-shop-hero__stats .stat span {
    font-size: 0.875rem;
    opacity: 0.9;
}

.jz-shop-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.jz-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--jz-transition);
    text-align: center;
}

.jz-btn--primary {
    background: white;
    color: var(--jz-primary);
    box-shadow: var(--jz-shadow-lg);
}

.jz-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--jz-shadow-xl);
}

.jz-btn--outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.jz-btn--outline:hover {
    background: white;
    color: var(--jz-primary);
}

/* ========================================
   Features Bar
   ======================================== */
.jz-shop-features {
    background: white;
    padding: 2rem 0;
    border-bottom: 1px solid var(--jz-gray-200);
}

.jz-shop-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feature-item .icon {
    flex-shrink: 0;
    color: var(--jz-primary);
}

.feature-item strong {
    display: block;
    font-weight: 600;
    color: var(--jz-gray-900);
    margin-bottom: 0.25rem;
}

.feature-item span {
    font-size: 0.875rem;
    color: var(--jz-gray-600);
}

/* ========================================
   Categories Section
   ======================================== */
.jz-shop-categories {
    padding: 4rem 0;
    background: var(--jz-gray-50);
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--jz-gray-900);
}

.jz-shop-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border-radius: 1rem;
    text-decoration: none;
    color: var(--jz-gray-900);
    transition: var(--jz-transition);
    border: 2px solid transparent;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--jz-shadow-xl);
    border-color: var(--jz-primary);
}

.category-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--jz-primary), var(--jz-primary-light));
    border-radius: 1rem;
    color: white;
    margin-bottom: 1rem;
    transition: var(--jz-transition);
}

.category-card:hover .category-card__icon {
    transform: scale(1.1) rotate(5deg);
}

.category-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.category-card .count {
    font-size: 0.875rem;
    color: var(--jz-gray-600);
}

/* ========================================
   Products Section
   ======================================== */
.jz-shop-products {
    padding: 4rem 0;
    background: white;
}

/* Toolbar */
.jz-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--jz-gray-200);
}

.products-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jz-gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.products-title .count {
    font-size: 1rem;
    font-weight: 400;
    color: var(--jz-gray-500);
}

.jz-shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--jz-gray-100);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.view-btn {
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--jz-gray-600);
    cursor: pointer;
    transition: var(--jz-transition-fast);
}

.view-btn:hover {
    color: var(--jz-gray-900);
}

.view-btn.active {
    background: white;
    color: var(--jz-primary);
    box-shadow: var(--jz-shadow-sm);
}

/* Sort Select */
.sort-wrapper {
    position: relative;
}

.sort-select {
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    background: white;
    border: 1px solid var(--jz-gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--jz-gray-900);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    transition: var(--jz-transition-fast);
}

.sort-select:hover {
    border-color: var(--jz-primary);
}

.sort-select:focus {
    outline: none;
    border-color: var(--jz-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Search */
.search-wrapper {
    position: relative;
}

.search-input {
    width: 250px;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    background: white;
    border: 1px solid var(--jz-gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--jz-gray-900);
    transition: var(--jz-transition-fast);
}

.search-input:hover {
    border-color: var(--jz-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--jz-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jz-gray-400);
    pointer-events: none;
}

/* ========================================
   Products Grid
   ======================================== */
.jz-shop-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Product Card */
.product-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    transition: var(--jz-transition);
    border: 1px solid var(--jz-gray-200);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--jz-shadow-xl);
    border-color: var(--jz-primary-light);
}

/* Product Image */
.product-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--jz-gray-100);
}

.product-card__image .image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--jz-transition);
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jz-gray-400);
}

/* Badges */
.badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: var(--jz-shadow);
}

.badge-sale {
    background: var(--jz-danger);
    color: white;
}

.badge-new {
    background: var(--jz-success);
    color: white;
}

.badge-stock {
    background: var(--jz-warning);
    color: white;
}

/* Product Actions */
.product-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(10px);
    transition: var(--jz-transition);
    z-index: 2;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--jz-gray-700);
    box-shadow: var(--jz-shadow-md);
    transition: var(--jz-transition-fast);
}

.action-btn:hover {
    background: var(--jz-primary);
    color: white;
    transform: scale(1.1);
}

.action-btn.wishlist-btn.active {
    background: var(--jz-danger);
    color: white;
}

.action-btn.wishlist-btn.active svg {
    fill: currentColor;
}

/* Stock Overlay */
.stock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    z-index: 1;
}

/* Product Content */
.product-card__content {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--jz-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.product-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: var(--jz-gray-900);
}

.product-title a {
    color: inherit;
    text-decoration: none;
    transition: var(--jz-transition-fast);
}

.product-title a:hover {
    color: var(--jz-primary);
}

/* Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stars {
    display: flex;
    gap: 0.125rem;
}

.star {
    color: var(--jz-gray-300);
}

.star-full {
    color: #fbbf24;
}

.star-half {
    color: #fbbf24;
}

.rating-text {
    font-size: 0.875rem;
    color: var(--jz-gray-600);
}

/* Price */
.product-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.price-old {
    font-size: 0.875rem;
    color: var(--jz-gray-500);
    text-decoration: line-through;
}

.price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--jz-primary);
}

/* Add to Cart Button */
.add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--jz-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--jz-transition);
    margin-top: auto;
}

.add-to-cart-btn:hover {
    background: var(--jz-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--jz-shadow-md);
}

.add-to-cart-btn.disabled {
    background: var(--jz-gray-300);
    color: var(--jz-gray-600);
    cursor: not-allowed;
}

.add-to-cart-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* No Products */
.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--jz-gray-500);
}

.no-products svg {
    margin: 0 auto 1.5rem;
}

.no-products h3 {
    font-size: 1.5rem;
    color: var(--jz-gray-700);
    margin-bottom: 0.5rem;
}

/* ========================================
   Pagination
   ======================================== */
.jz-shop-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.jz-shop-pagination ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.jz-shop-pagination a,
.jz-shop-pagination span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    border: 1px solid var(--jz-gray-300);
    border-radius: 0.5rem;
    color: var(--jz-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: var(--jz-transition-fast);
}

.jz-shop-pagination a:hover {
    background: var(--jz-primary);
    color: white;
    border-color: var(--jz-primary);
}

.jz-shop-pagination .current {
    background: var(--jz-primary);
    color: white;
    border-color: var(--jz-primary);
}

/* ========================================
   Newsletter
   ======================================== */
.jz-shop-newsletter {
    background: linear-gradient(135deg, var(--jz-primary) 0%, var(--jz-primary-dark) 100%);
    color: white;
    padding: 4rem 0;
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.newsletter-content p {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 1rem;
    transition: var(--jz-transition-fast);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
    .jz-shop-hero {
        padding: 4rem 0 3rem;
    }
    
    .jz-shop-hero__title {
        font-size: 2.5rem;
    }
    
    .jz-shop-categories__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .jz-shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .jz-shop-hero {
        padding: 3rem 0 2rem;
    }
    
    .jz-shop-hero__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .jz-shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .jz-shop-toolbar__right {
        flex-direction: column;
    }
    
    .search-input {
        width: 100%;
    }
    
    .jz-shop-features__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .jz-shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    .newsletter-form {
        flex-direction: column;
    }

    /* Cart badge bounce and fly-to-cart image */
    .cart-badge.bounce {
        animation: bounce 0.3s ease;
    }

    @keyframes bounce {
        0% { transform: scale(1); }
        25% { transform: scale(1.3); }
        50% { transform: scale(0.9); }
        75% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .fly-img {
        position: fixed;
        pointer-events: none;
        z-index: 10000;
        border-radius: 8px;
        will-change: top, left, width, height, opacity;
    }
    }
}

@media (max-width: 480px) {
    .jz-container {
        padding: 0 1rem;
    }
    
    .jz-shop-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .jz-btn {
        width: 100%;
        justify-content: center;
    }
    
    .jz-shop-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .jz-shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .jz-shop-hero,
    .jz-shop-newsletter,
    .product-actions,
    .add-to-cart-btn,
    .jz-shop-toolbar {
        display: none;
    }
    
    .product-card {
        break-inside: avoid;
    }
}


/* === shop-cart.css === */
/**
 * Shop Cart + Checkout Styles
 * Bold ecommerce styling with modern layout.
 */

:root {
    --jz-cart-bg: #f6f7fb;
    --jz-cart-ink: #0f172a;
    --jz-cart-accent: #ff6a3d;
    --jz-cart-accent-dark: #e4572e;
    --jz-cart-muted: #64748b;
    --jz-cart-card: #ffffff;
    --jz-cart-border: #e2e8f0;
    --jz-cart-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    --jz-cart-radius: 18px;
}

.jz-cart-page,
.jz-checkout-page {
    background: var(--jz-cart-bg);
    color: var(--jz-cart-ink);
    font-family: "Plus Jakarta Sans", "Manrope", "Poppins", sans-serif;
}

.cart-hero,
.checkout-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 3rem;
    color: white;
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.cart-hero__bg,
.checkout-hero__bg {
    position: absolute;
    inset: 0;
}

.cart-hero__gradient,
.checkout-hero__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(255, 106, 61, 0.6), transparent 60%);
}

.cart-hero__glow,
.checkout-hero__glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 45%);
}

.cart-hero__content,
.checkout-hero__content {
    position: relative;
    z-index: 1;
    text-align: left;
}

.cart-hero__title,
.checkout-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0.75rem 0 0.5rem;
}

.cart-hero__subtitle,
.checkout-hero__subtitle {
    color: rgba(255, 255, 255, 0.8);
    max-width: 560px;
}

.cart-steps {
    display: inline-flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cart-step {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.cart-step.is-active {
    background: var(--jz-cart-accent);
    color: white;
}

.cart-content,
.checkout-content {
    padding: 3rem 0 4rem;
}

.cart-layout,
.checkout-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.cart-items,
.checkout-summary {
    background: var(--jz-cart-card);
    border-radius: var(--jz-cart-radius);
    border: 1px solid var(--jz-cart-border);
    box-shadow: var(--jz-cart-shadow);
    padding: 1.5rem;
}

.cart-items__header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jz-cart-muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--jz-cart-border);
}

.cart-items__list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--jz-cart-border);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item__info {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cart-item__img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    background: #e2e8f0;
}

.cart-item__title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.cart-item__meta {
    font-size: 0.85rem;
    color: var(--jz-cart-muted);
}

.cart-item__price,
.cart-item__subtotal {
    font-weight: 600;
}

.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--jz-cart-border);
    border-radius: 999px;
    overflow: hidden;
}

.qty-control button {
    border: none;
    background: #f1f5f9;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

.qty-control input {
    width: 44px;
    text-align: center;
    border: none;
    padding: 0.4rem 0;
    font-weight: 600;
    background: white;
}

.cart-item__remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.85rem;
}

.cart-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cart-summary__card {
    background: var(--jz-cart-card);
    border-radius: var(--jz-cart-radius);
    border: 1px solid var(--jz-cart-border);
    box-shadow: var(--jz-cart-shadow);
    padding: 1.5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 0.75rem 0;
    color: var(--jz-cart-muted);
}

.summary-total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--jz-cart-ink);
}

.cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-btn--primary {
    background: var(--jz-cart-accent);
    color: white;
    box-shadow: 0 12px 30px rgba(255, 106, 61, 0.35);
}

.cart-btn--primary:hover {
    background: var(--jz-cart-accent-dark);
    transform: translateY(-1px);
}

.cart-btn--ghost {
    background: white;
    border-color: var(--jz-cart-border);
    color: var(--jz-cart-ink);
}

.cart-btn--link {
    background: transparent;
    color: var(--jz-cart-muted);
}

.cart-trust {
    display: grid;
    gap: 1rem;
}

.trust-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--jz-cart-muted);
}

.trust-icon {
    font-size: 1.4rem;
}

.cart-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--jz-cart-border);
    border-radius: var(--jz-cart-radius);
    margin-top: 1.5rem;
}

.cart-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.checkout-form {
    display: grid;
    gap: 1.5rem;
}

.form-card {
    background: var(--jz-cart-card);
    border-radius: var(--jz-cart-radius);
    border: 1px solid var(--jz-cart-border);
    box-shadow: var(--jz-cart-shadow);
    padding: 1.5rem;
}

.form-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-card label {
    display: grid;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--jz-cart-muted);
}

.form-card input,
.form-card textarea,
.form-card select {
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--jz-cart-border);
    font-size: 0.95rem;
    font-family: inherit;
}

.checkout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.checkout-items {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.95rem;
}

.checkout-help {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #111827;
    color: white;
    border-radius: var(--jz-cart-radius);
}

@media (max-width: 1024px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cart-items__header,
    .cart-item {
        grid-template-columns: 1fr;
    }

    .cart-item__info {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cart-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .cart-step {
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        padding: 0.3rem 0.65rem;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* === shop-notifications.css === */
/**
 * Shop Notifications & Cart Badge
 * Modern toast notifications and cart counter
 * Updated: Bottom-right position untuk tidak menutupi header
 */

/* ========================================
   Toast Notifications - Bottom Right Position
   ======================================== */

.jz-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    min-width: 340px;
    max-width: 420px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 
        0 10px 30px rgba(102, 126, 234, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(100px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.jz-toast--show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.jz-toast__content {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
}

.jz-toast--success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    box-shadow: 
        0 10px 30px rgba(17, 153, 142, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.jz-toast--error {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    box-shadow: 
        0 10px 30px rgba(235, 51, 73, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.jz-toast--info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 
        0 10px 30px rgba(79, 172, 254, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.jz-toast--success .jz-toast__content::before {
    content: '';
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.24);
}

.jz-toast--success .jz-toast__content::after {
    content: '✓';
    position: absolute;
    left: 38px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.jz-toast--error .jz-toast__content::before {
    content: '';
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.24);
}

.jz-toast--error .jz-toast__content::after {
    content: '!';
    position: absolute;
    left: 44px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

/* Override parent theme menu button positioning for cart icon */
.jz-header .head .jzv2-menu-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 3;
}

.jz-header .head .primary {
    order: 1;
}

/* ========================================
   Cart Badge in Header
   ======================================== */

.jz-header .head {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.jz-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)) padding-box,
                linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA500 100%) border-box;
    border: 2px solid transparent;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    white-space: nowrap;
    z-index: 10069;
    order: 2;
    box-shadow: inset 0 0 15px rgba(255, 107, 53, 0.15);
}

.jz-cart-link:hover {
    background: linear-gradient(rgba(255, 107, 53, 0.12), rgba(255, 107, 53, 0.12)) padding-box,
                linear-gradient(135deg, #FFA500 0%, #FF8C42 50%, #FF6B35 100%) border-box;
    box-shadow: inset 0 0 20px rgba(255, 107, 53, 0.25), 0 0 20px rgba(255, 107, 53, 0.3);
    transform: scale(1.05);
}

.jz-cart-link:active {
    background: linear-gradient(rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.2)) padding-box,
                linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA500 100%) border-box;
    transform: scale(0.98);
}

.jz-cart-link svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    flex-shrink: 0;
}

/* ========================================
   Mobile Responsive - Cart Icon
   ======================================== */

@media (max-width: 768px) {
    .jz-cart-link {
        padding: 8px 10px;
        border-radius: 12px;
    }

    .jz-cart-link svg {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   Checkout & Dashboard Login Required Page
   ======================================== */

.jz-checkout-login-page,
.jz-dashboard-login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-required-hero {
    position: relative;
    padding: 60px 20px;
    margin-bottom: 40px;
    overflow: hidden;
}

.login-required-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
}

.login-required-hero__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.15), transparent 50%);
}

.login-required-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.login-required-hero__content h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.login-required-hero__content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.login-required-content {
    flex: 1;
    padding: 40px 20px;
}

.login-required-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto 40px;
    align-items: center;
}

.login-required-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) padding-box,
                linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 152, 0, 0.1)) border-box;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.login-required-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.login-required-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.login-required-divider {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 14px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%);
    color: #fff;
    width: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.back-to-cart {
    text-align: center;
}

.back-to-cart .btn-secondary {
    display: inline-block;
    width: auto;
    min-width: 200px;
}

/* ========================================
   Registration Form
   ======================================== */

.jz-register-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-group input {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 107, 53, 0.6);
    box-shadow: 0 0 16px rgba(255, 107, 53, 0.2);
}

.form-group input:disabled {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.form-help {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
    display: none;
}

.form-help.error {
    color: #ff6b6b;
    display: block;
}

.form-help.success {
    color: #51cf66;
    display: block;
}

.register-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    display: none;
}

.register-message.error {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
    display: block;
}

.register-message.success {
    background: rgba(81, 207, 102, 0.2);
    border: 1px solid rgba(81, 207, 102, 0.4);
    color: #51cf66;
    display: block;
}

.register-message.loading {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid rgba(255, 152, 0, 0.4);
    color: #ffa500;
    display: block;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .login-required-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .login-required-divider {
        display: none;
    }

    .login-required-hero__content h1 {
        font-size: 24px;
    }

    .login-required-card {
        padding: 24px 16px;
    }

    .login-required-card h2 {
        font-size: 18px;
    }
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 2px 8px rgba(245, 158, 11, 0.4),
        0 0 0 3px #0b1220;
    animation: cartBadgePulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cartBadgePulse {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* ========================================
   Mobile Responsive
   ======================================== */

@media (max-width: 768px) {
    .jz-toast {
        top: auto;
        left: auto;
        right: 12px;
        bottom: 14px;
        min-width: 0;
        width: auto;
        max-width: min(92vw, 340px);
        padding: 12px 14px;
        border-radius: 14px;
        transform: translateY(20px) scale(0.96);
        box-shadow:
            0 10px 24px rgba(17, 153, 142, 0.24),
            0 4px 10px rgba(0, 0, 0, 0.18);
    }

    .jz-toast--show {
        transform: translateY(0) scale(1);
    }
    
    .jz-toast__content {
        font-size: 13px;
        gap: 8px;
        line-height: 1.4;
    }
    
    .jz-toast--success .jz-toast__content::before,
    .jz-toast--error .jz-toast__content::before {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }
    
    .jz-toast--success .jz-toast__content::after {
        left: 25px;
        font-size: 16px;
    }
    
    .jz-toast--error .jz-toast__content::after {
        left: 28px;
        font-size: 16px;
    }
    
    .jz-cart-link {
        padding: 8px 10px;
        margin-right: 8px;
        gap: 4px;
    }
    
    .jz-cart-link span {
        display: none;
    }
    
    .jz-cart-link svg {
        width: 20px;
        height: 20px;
    }
}


/* === shop-single.css === */
/**
 * Shop Single Product CSS
 * 
 * @package JazaTH
 * @version 2.0.0
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --jz-primary: #6366f1;
    --jz-primary-dark: #4f46e5;
    --jz-primary-light: #818cf8;
    --jz-secondary: #ec4899;
    --jz-success: #10b981;
    --jz-warning: #f59e0b;
    --jz-danger: #ef4444;
    --jz-dark: #1f2937;
    --jz-light: #f9fafb;
    --jz-gray-50: #f9fafb;
    --jz-gray-100: #f3f4f6;
    --jz-gray-200: #e5e7eb;
    --jz-gray-300: #d1d5db;
    --jz-gray-400: #9ca3af;
    --jz-gray-500: #6b7280;
    --jz-gray-600: #4b5563;
    --jz-gray-700: #374151;
    --jz-gray-800: #1f2937;
    --jz-gray-900: #111827;
    
    --jz-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --jz-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --jz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --jz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --jz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   
    --jz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --jz-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Base & Container
   ======================================== */
.jz-single-product {
    background: var(--jz-light);
    min-height: 100vh;
}

.jz-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   Breadcrumbs
   ======================================== */
.jz-breadcrumbs {
    padding: 1.5rem 0;
    background: var(--jz-gray-50);
    border-bottom: 1px solid var(--jz-gray-200);
}

.jz-breadcrumbs nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.jz-breadcrumbs nav ol li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--jz-gray-600);
}

.jz-breadcrumbs nav ol li:not(:last-child)::after {
    content: '›';
    color: var(--jz-gray-400);
}

.jz-breadcrumbs nav ol li a {
    color: var(--jz-gray-700);
    text-decoration: none;
    transition: var(--jz-transition-fast);
}

.jz-breadcrumbs nav ol li a:hover {
    color: var(--jz-primary);
}

.jz-breadcrumbs nav ol li:last-child {
    color: var(--jz-gray-900);
    font-weight: 500;
}

/* ========================================
   Product Detail
   ======================================== */
.jz-product-detail {
    padding: 3rem 0;
    background: white;
}

.jz-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* ========================================
   Product Gallery
   ======================================== */
.jz-product-gallery {
    position: sticky;
    top: 2rem;
}

.gallery-main {
    position: relative;
    background: var(--jz-gray-50);
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
}

.gallery-main .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-main .placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--jz-gray-400);
    gap: 1rem;
}

.jz-product-gallery .badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
}

.zoom-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--jz-shadow-md);
    transition: var(--jz-transition);
    z-index: 2;
}

.zoom-btn:hover {
    background: var(--jz-primary);
    color: white;
    transform: scale(1.1);
}

/* Gallery Thumbnails */
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
}

.thumb-item {
    aspect-ratio: 16 / 9;
    border: 2px solid var(--jz-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    background: white;
    padding: 0;
    transition: var(--jz-transition-fast);
}

.thumb-item:hover {
    border-color: var(--jz-primary-light);
}

.thumb-item.active {
    border-color: var(--jz-primary);
    box-shadow: 0 0 0 1px var(--jz-primary);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   Product Info
   ======================================== */
.jz-product-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-header .product-category {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--jz-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: var(--jz-transition-fast);
}

.product-header .product-category:hover {
    color: var(--jz-primary-dark);
}

.product-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--jz-gray-900);
    margin-bottom: 1rem;
}

.jz-product-info .product-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--jz-gray-200);
}

.jz-product-info .product-price {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--jz-gray-200);
}

.jz-product-info .price-old {
    font-size: 1.25rem;
    color: var(--jz-gray-500);
    text-decoration: line-through;
}

.jz-product-info .price-current {
    font-size: 2rem;
    font-weight: 700;
    color: var(--jz-primary);
}

/* Product Description */
.product-description {
    line-height: 1.7;
    color: var(--jz-gray-700);
}

.product-description p {
    margin-bottom: 1rem;
}

.product-description ul,
.product-description ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.product-description li {
    margin-bottom: 0.5rem;
}

/* Stock Info */
.stock-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--jz-gray-50);
    border-radius: 0.5rem;
}

.stock-info svg {
    flex-shrink: 0;
}

.stock-info .in-stock {
    color: var(--jz-success);
    font-weight: 500;
}

.stock-info .low-stock {
    color: var(--jz-warning);
    font-weight: 500;
}

.stock-info .out-of-stock {
    color: var(--jz-danger);
    font-weight: 500;
}

/* Product Meta */
.product-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    background: var(--jz-gray-50);
    border-radius: 0.75rem;
    margin: 0;
}

.product-meta .meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.product-meta dt {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--jz-gray-600);
}

.product-meta dd {
    font-size: 1rem;
    font-weight: 600;
    color: var(--jz-gray-900);
    margin: 0;
}

/* Product Tags */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.product-tags strong {
    color: var(--jz-gray-700);
}

.tag-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--jz-gray-100);
    color: var(--jz-gray-700);
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--jz-transition-fast);
}

.tag-badge:hover {
    background: var(--jz-primary);
    color: white;
}

/* Product Actions */
.product-actions {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--jz-gray-200);
    position: static;
    top: auto;
    right: auto;
    opacity: 1;
    transform: none;
}

/* when actions are placed alongside the price (moved into .product-price) */
.product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.product-price .product-actions {
    margin-top: 0; /* already inside price container */
    border-top: none;
    padding-top: 0;
    display: flex;
    gap: 1rem;
    flex: 1 1 100%;
    width: 100%;
}
.product-price .product-actions button,
.product-price .product-actions a {
    width: 100%;
}

.product-actions button,
.product-actions a {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--jz-transition);
}

.product-actions .add-to-cart,
.product-actions .add-to-cart-btn,
.product-actions .buy-now {
    background: var(--jz-primary);
    color: white;
    opacity: 1;
    visibility: visible;
    min-height: 48px;
}

.product-actions .add-to-cart:hover,
.product-actions .buy-now:hover {
    background: var(--jz-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--jz-shadow-lg);
}

.product-actions .wishlist-btn {
    background: white;
    color: var(--jz-primary);
    border: 2px solid var(--jz-primary);
}

.product-actions .wishlist-btn:hover {
    background: var(--jz-primary);
    color: white;
}

.product-actions .add-to-cart-btn.disabled,
.product-actions .add-to-cart.disabled {
    background: var(--jz-gray-300);
    color: var(--jz-gray-600);
    cursor: not-allowed;
    opacity: 1;
}

.product-actions .add-to-cart-btn.disabled:hover,
.product-actions .add-to-cart.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Product Share */
.product-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--jz-gray-200);
}

.product-share strong {
    color: var(--jz-gray-700);
}

.share-buttons {
    display: flex;
    gap: 0.75rem;
}

.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: var(--jz-transition);
}

.share-facebook {
    background: #1877f2;
    color: white;
}

.share-facebook:hover {
    background: #0d65d9;
    transform: translateY(-2px);
}

.share-twitter {
    background: #1da1f2;
    color: white;
}

.share-twitter:hover {
    background: #0c8dd6;
    transform: translateY(-2px);
}

.share-whatsapp {
    background: #25d366;
    color: white;
}

.share-whatsapp:hover {
    background: #1ebe57;
    transform: translateY(-2px);
}

/* ========================================
   Product Tabs
   ======================================== */
.jz-product-tabs {
    padding: 4rem 0;
    background: var(--jz-gray-50);
}

.tabs-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--jz-gray-200);
    overflow-x: auto;
}

.tab-btn {
    padding: 1rem 2rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--jz-gray-600);
    font-weight: 600;
    cursor: pointer;
    transition: var(--jz-transition-fast);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--jz-gray-900);
}

.tab-btn.active {
    color: var(--jz-primary);
    border-bottom-color: var(--jz-primary);
}

.tabs-content {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    min-height: 400px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Description Tab */
.content-wrapper {
    max-width: 800px;
}

.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--jz-gray-900);
}

.content-wrapper p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--jz-gray-700);
}

.content-wrapper ul,
.content-wrapper ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.content-wrapper li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Reviews Tab */
.reviews-wrapper {
    max-width: 800px;
}

.reviews-summary {
    padding: 2rem;
    background: var(--jz-gray-50);
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.rating-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--jz-gray-900);
}

.rating-stars {
    display: flex;
    gap: 0.25rem;
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-item {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--jz-gray-200);
    border-radius: 0.75rem;
}

.review-header {
    margin-bottom: 1rem;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--jz-gray-900);
    margin-bottom: 0.25rem;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--jz-gray-600);
}

.review-body {
    line-height: 1.6;
    color: var(--jz-gray-700);
}

.text-muted {
    color: var(--jz-gray-500);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Shipping Tab */
.shipping-info {
    max-width: 800px;
    display: grid;
    gap: 2rem;
}

.info-section h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--jz-gray-900);
    margin-bottom: 1rem;
}

.info-section h3 svg {
    color: var(--jz-primary);
}

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

.info-section li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--jz-gray-100);
    color: var(--jz-gray-700);
    line-height: 1.6;
}

.info-section li:last-child {
    border-bottom: none;
}

/* ========================================
   Related Products
   ======================================== */
.jz-related-products {
    padding: 4rem 0;
    background: white;
}

.jz-related-products .section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--jz-gray-900);
}

.jz-related-products .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
}

.jz-related-products .product-card {
    background: white;
    border: 1px solid var(--jz-gray-200);
    border-radius: 1rem;
    overflow: hidden;
    transition: var(--jz-transition);
}

.jz-related-products .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--jz-shadow-xl);
    border-color: var(--jz-primary-light);
}

.jz-related-products .product-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--jz-gray-100);
}

.jz-related-products .product-card__image a {
    display: block;
    height: 100%;
}

.jz-related-products .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--jz-transition);
}

.jz-related-products .product-card:hover img {
    transform: scale(1.05);
}

.jz-related-products .product-card__content {
    padding: 1.25rem;
}

.jz-related-products .product-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.jz-related-products .product-title a {
    color: var(--jz-gray-900);
    text-decoration: none;
    transition: var(--jz-transition-fast);
}

.jz-related-products .product-title a:hover {
    color: var(--jz-primary);
}

.jz-related-products .product-rating {
    margin-bottom: 0.75rem;
}

.jz-related-products .product-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
    .jz-product-grid {
        gap: 3rem;
    }
    
    .jz-product-gallery {
        position: static;
    }
}

@media (max-width: 768px) {
    .jz-product-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .jz-product-detail {
        padding: 2rem 0;
    }
    
    .product-title {
        font-size: 1.5rem;
    }
    
    .jz-product-info .price-current {
        font-size: 1.5rem;
    }
    
    .product-actions {
        grid-template-columns: 1fr;
    }
    
    .product-meta {
        grid-template-columns: 1fr;
    }
    
    .tabs-nav {
        margin-bottom: 1.5rem;
    }
    
    .tab-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .tabs-content {
        padding: 1.5rem;
    }
    
    .jz-related-products .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .jz-breadcrumbs nav ol li {
        font-size: 0.75rem;
    }
    
    .product-share {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .jz-related-products .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .jz-breadcrumbs,
    .zoom-btn,
    .product-actions,
    .product-share,
    .jz-product-tabs,
    .jz-related-products {
        display: none;
    }
    
    .jz-product-grid {
        grid-template-columns: 1fr;
    }
    
    .jz-product-gallery {
        max-width: 400px;
    }
}


/* === shop-taxonomy.css === */
/**
 * Shop Category & Tag Taxonomy Styles
 * Modern, responsive styling for category and tag pages
 * 
 * @version 2.0.0
 */

/* ========================================
   VARIABLES
   ======================================== */
:root {
    --jz-category-hero-height: 320px;
    --jz-category-card-gap: 1.5rem;
    --jz-tag-pill-padding: 0.5rem 1rem;
}

/* ========================================
   CATEGORY PAGE
   ======================================== */

.category-hero {
    position: relative;
    overflow: hidden;
    min-height: var(--jz-category-hero-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-bottom: 3rem;
}

.category-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.category-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
    z-index: 1;
}

.category-hero__placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.category-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.category-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    width: 100%;
}

.category-hero__text {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

.category-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.category-hero__description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 300;
    opacity: 0.95;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.category-hero__meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.breadcrumb__link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--jz-transition-fast);
}

.breadcrumb__link:hover {
    color: white;
    text-decoration: underline;
}

.breadcrumb__separator {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb__current {
    color: white;
    font-weight: 600;
}

/* ========================================
   TAG PAGE
   ======================================== */

.tag-hero {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5f7df9 0%, #6b8cff 100%);
    margin-bottom: 3rem;
}

.tag-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tag-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #5f7df9, #6b8cff);
}

.tag-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px);
    z-index: 0;
}

.tag-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    width: 100%;
    padding: 3rem 2rem;
}

.tag-hero__text {
    max-width: 600px;
    margin: 0 auto;
}

.tag-badge {
    display: inline-block;
    font-size: 3rem;
    font-weight: 700;
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

.tag-hero__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    margin: 0.5rem 0;
    line-height: 1.2;
}

.tag-hero__description {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 300;
    opacity: 0.95;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.tag-hero__meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* ========================================
   PRODUCTS TOOLBAR
   ======================================== */

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--jz-gray-200);
    flex-wrap: wrap;
}

.toolbar-left {
    flex: 1;
    min-width: 160px;
}

.result-count {
    font-size: 0.9rem;
    color: var(--jz-gray-600);
    font-weight: 500;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sort-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--jz-gray-300);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    transition: var(--jz-transition-fast);
}

.sort-select:hover,
.sort-select:focus {
    border-color: var(--jz-primary);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0.5rem;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--jz-gray-300);
    background: white;
    border-radius: 0.5rem;
    cursor: pointer;
    color: var(--jz-gray-600);
    transition: var(--jz-transition-fast);
}

.view-toggle__btn:hover {
    border-color: var(--jz-primary);
    color: var(--jz-primary);
}

.view-toggle__btn.active {
    background: var(--jz-primary);
    border-color: var(--jz-primary);
    color: white;
}

/* ========================================
   PRODUCTS GRID
   ======================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* ========================================
   CATEGORY INDEX PAGE
   ======================================== */

.categories-hero {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-bottom: 3rem;
}

.categories-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.categories-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.categories-hero__shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,0));
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
}

.shape-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: 10%;
}

.shape-3 {
    width: 250px;
    height: 250px;
    top: 50%;
    right: -100px;
}

.categories-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 3rem 2rem;
}

.categories-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.categories-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 300;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
}

/* Search */
.categories-search,
.tags-search {
    position: relative;
    margin-bottom: 2.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.category-search__input,
.tag-search__input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--jz-gray-300);
    border-radius: 2rem;
    font-size: 0.95rem;
    transition: var(--jz-transition-fast);
}

.category-search__input:focus,
.tag-search__input:focus {
    outline: none;
    border-color: var(--jz-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.category-search__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jz-gray-400);
    pointer-events: none;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--jz-category-card-gap);
    margin-bottom: 3rem;
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
    border-radius: 1rem;
    border: 1px solid var(--jz-gray-200);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--jz-transition-fast);
}

.category-card:hover {
    border-color: var(--jz-primary);
    box-shadow: var(--jz-shadow-lg);
    transform: translateY(-4px);
}

.category-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--jz-gray-100);
}

.category-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-card:hover .category-card__img {
    transform: scale(1.05);
}

.category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.7), rgba(118, 75, 162, 0.7));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card:hover .category-card__overlay {
    opacity: 1;
}

.category-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    color: var(--jz-gray-300);
}

.category-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.category-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.3;
    transition: color var(--jz-transition-fast);
}

.category-card:hover .category-card__title {
    color: var(--jz-primary);
}

.category-card__description {
    font-size: 0.9rem;
    color: var(--jz-gray-600);
    margin: 0 0 auto;
    line-height: 1.4;
}

.category-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jz-gray-200);
}

.category-count {
    font-size: 0.85rem;
    color: var(--jz-gray-500);
    font-weight: 500;
}

.category-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--jz-gray-100);
    color: var(--jz-primary);
    transition: var(--jz-transition-fast);
}

.category-card:hover .category-card__arrow {
    background: var(--jz-primary);
    color: white;
    transform: translateX(4px);
}

/* Categories Stats */
.categories-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    color: white;
}

.stat-card__label {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
    font-weight: 500;
}

.stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

/* ========================================
   TAG CLOUD (Index Page)
   ======================================== */

.tags-hero {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-bottom: 3rem;
}

.tags-hero__bg {
    position: absolute;
    inset: 0;
}

.tags-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.tags-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 3rem 2rem;
}

.tags-hero__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.tags-hero__subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 300;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
}

/* Tags Cloud */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    max-width: 100%;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--jz-tag-pill-padding);
    background: var(--jz-gray-100);
    border: 1px solid var(--jz-gray-300);
    border-radius: 2rem;
    color: var(--jz-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: var(--jz-transition-fast);
    white-space: nowrap;
}

.tag-pill:hover {
    background: var(--jz-primary);
    border-color: var(--jz-primary);
    color: white;
    transform: translateY(-2px);
}

.tag-icon {
    color: currentColor;
    opacity: 0.7;
}

.tag-count {
    font-size: 0.85em;
    opacity: 0.8;
}

/* Tag sizes */
.tag-pill.size-1 { font-size: 0.8rem; }
.tag-pill.size-2 { font-size: 0.95rem; }
.tag-pill.size-3 { font-size: 1rem; font-weight: 600; }
.tag-pill.size-4 { font-size: 1.15rem; font-weight: 600; }
.tag-pill.size-5 { font-size: 1.35rem; font-weight: 700; }

/* Popular Tags List */
.popular-tags-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.popular-tag-item {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--jz-gray-50);
    border: 1px solid var(--jz-gray-200);
    border-radius: 0.75rem;
    transition: var(--jz-transition-fast);
}

.popular-tag-item:hover {
    background: var(--jz-gray-100);
    border-color: var(--jz-primary);
}

.popular-tag-link {
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.75rem;
}

.popular-tag-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--jz-primary);
}

.tag-hash {
    opacity: 0.6;
}

.popular-tag-count {
    font-size: 0.85rem;
    color: var(--jz-gray-600);
}

/* Tips Section */
.tags-tips {
    margin-top: 3rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.tip-card {
    padding: 2rem 1.5rem;
    background: var(--jz-gray-50);
    border: 1px solid var(--jz-gray-200);
    border-radius: 1rem;
    text-align: center;
    transition: var(--jz-transition-fast);
}

.tip-card:hover {
    border-color: var(--jz-primary);
    box-shadow: var(--jz-shadow-md);
}

.tip-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.tip-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--jz-gray-900);
}

.tip-description {
    font-size: 0.9rem;
    color: var(--jz-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Related Categories */
.related-categories {
    background: var(--jz-gray-50);
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-top: 3rem;
}

.related-tags {
    background: var(--jz-gray-50);
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-top: 3rem;
}

.section-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
}

/* No results */
.no-products,
.no-categories,
.no-tags {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--jz-gray-50);
    border-radius: 1rem;
    border: 2px dashed var(--jz-gray-300);
}

.no-products p,
.no-categories p,
.no-tags p {
    color: var(--jz-gray-600);
    font-size: 1.1rem;
    margin: 0;
}

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

@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --jz-category-hero-height: 260px;
        --jz-category-card-gap: 1rem;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .toolbar-left,
    .toolbar-right {
        width: 100%;
    }
    
    .toolbar-right {
        justify-content: space-between;
    }
    
    .sort-select {
        flex: 1;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .tags-cloud {
        gap: 0.75rem;
    }
    
    .tag-pill {
        font-size: 0.85rem;
    }
    
    .popular-tags-list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .category-hero,
    .tag-hero,
    .categories-hero,
    .tags-hero {
        min-height: 200px;
    }
    
    .category-hero__title,
    .tag-hero__title,
    .categories-hero__title,
    .tags-hero__title {
        font-size: 1.5rem;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .tags-cloud {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .popular-tags-list {
        grid-template-columns: 1fr;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* === single-layanan-jasa-audit-website.css === */
:root {
  --aw-ink: #f8fafc;
  --aw-ink-soft: #9aa6b2;
  --aw-accent: #10b981;
  --aw-accent-2: #1d4ed8;
  --aw-bg: #061018;
  --aw-card: rgba(255, 255, 255, 0.05);
  --aw-border: rgba(255, 255, 255, 0.08);
  --aw-shadow: 0 20px 60px rgba(4, 8, 14, 0.45);
}

.aw-page {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(16, 185, 129, 0.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(29, 78, 216, 0.25), transparent 55%),
    linear-gradient(145deg, #050b12 0%, #081a1c 50%, #061018 100%);
  color: var(--aw-ink);
}

.aw-shell {
  width: min(1160px, 92%);
  margin: 0 auto;
}

.aw-hero {
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}

.aw-hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 280px at 15% 10%, rgba(16, 185, 129, 0.25), transparent 60%),
    radial-gradient(420px 260px at 80% 20%, rgba(29, 78, 216, 0.28), transparent 60%);
  z-index: 0;
  opacity: 0.85;
}

.aw-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--aw-ink-soft);
}

.aw-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.aw-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  margin-top: 24px;
  align-items: center;
}

.aw-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #d6fff1;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aw-title {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  margin: 16px 0 12px;
}

.aw-lead {
  font-size: 18px;
  color: var(--aw-ink-soft);
}

.aw-hero__bullets {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.aw-hero__bullets div {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
}

.aw-hero__bullets strong {
  font-size: 14px;
}

.aw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 16px;
}

.aw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.aw-btn--primary {
  background: linear-gradient(135deg, var(--aw-accent), #34d399);
  color: #062017;
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35);
}

.aw-btn--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--aw-ink);
  background: rgba(255, 255, 255, 0.04);
}

.aw-hero__trust {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--aw-ink-soft);
}

.aw-hero__trust span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.aw-hero__card {
  background: rgba(6, 14, 18, 0.7);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--aw-shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.aw-card__top {
  display: grid;
  gap: 8px;
}

.aw-card__price span {
  display: block;
  font-size: 12px;
  color: var(--aw-ink-soft);
}

.aw-card__price strong {
  font-size: 22px;
}

.aw-card__note {
  font-size: 13px;
  color: var(--aw-ink-soft);
}

.aw-card__media {
  margin: 18px 0;
}

.aw-card__media img,
.aw-card__placeholder {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(16, 185, 129, 0.25), rgba(29, 78, 216, 0.25));
}

.aw-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
}

.aw-card__stats strong {
  display: block;
  font-size: 18px;
}

.aw-card__stats span {
  font-size: 12px;
  color: var(--aw-ink-soft);
}

.aw-section {
  padding: 64px 0;
}

.aw-section--soft {
  background: rgba(255, 255, 255, 0.02);
}

.aw-section--alt {
  background: rgba(8, 16, 20, 0.65);
}

.aw-section__head {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

.aw-section__head h2 {
  margin: 0;
}

.aw-section__head p {
  color: var(--aw-ink-soft);
}

/* Hide FAQ headings in content - only h2 that's not the first one */
.aw-content h2:not(:first-of-type) {
  display: none;
}

.aw-grid {
  display: grid;
  gap: 18px;
}

.aw-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.aw-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--aw-border);
  background: var(--aw-card);
  box-shadow: 0 10px 30px rgba(4, 8, 14, 0.35);
}

.aw-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.aw-chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
}

.aw-steps {
  display: grid;
  gap: 16px;
}

.aw-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
}

.aw-step__num {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(16, 185, 129, 0.12);
  color: #d6fff1;
  font-weight: 700;
}

.aw-price-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.aw-price-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--aw-border);
  background: rgba(6, 14, 18, 0.7);
  display: grid;
  gap: 14px;
}

.aw-price-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--aw-ink-soft);
}

.aw-price {
  font-size: 22px;
  font-weight: 700;
}

.aw-price span {
  font-size: 13px;
  color: var(--aw-ink-soft);
}

.aw-price-card--featured {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.aw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.aw-kpi {
  padding: 18px;
  border-radius: 16px;
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
  text-align: center;
}

.aw-kpi strong {
  display: block;
  font-size: 22px;
}

.aw-kpi span {
  color: var(--aw-ink-soft);
  font-size: 13px;
}

.aw-content {
  background: rgba(6, 14, 18, 0.7);
  border-radius: 18px;
  padding: 24px;
  border: 1px solid var(--aw-border);
}

.aw-content :where(h2, h3) {
  margin-top: 18px;
}

.aw-faq {
  display: grid;
  gap: 14px;
}

.aw-faq__item {
  border: 1.5px solid var(--aw-border);
  border-radius: 16px;
  padding: 0;
  background: rgba(16, 185, 129, 0.05);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aw-faq__item:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.aw-faq__item[open] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(29, 78, 216, 0.08));
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(52, 211, 153, 0.1);
}

.aw-faq__item summary {
  font-weight: 600;
  cursor: pointer;
  padding: 18px 20px 18px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--aw-ink);
  user-select: none;
  position: relative;
  transition: all 0.3s ease;
  text-align: center;
}

.aw-faq__item summary:hover {
  color: #34d399;
}

.aw-faq__item summary::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--aw-accent), #34d399);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #062017;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  left: 20px;
}

.aw-faq__item[open] summary::before {
  transform: rotate(90deg);
}

.aw-faq__item details[open] > summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
}

.aw-faq__item p {
  padding: 0 20px 18px 20px;
  margin: 0;
  color: var(--aw-ink-soft);
  line-height: 1.6;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aw-cta-block {
  padding: 56px 0 80px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(29, 78, 216, 0.2));
}

.aw-cta-block__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 20px;
  background: rgba(6, 14, 18, 0.7);
  border: 1px solid var(--aw-border);
  box-shadow: var(--aw-shadow);
}

@media (max-width: 980px) {
  .aw-hero__grid {
    grid-template-columns: 1fr;
  }

  .aw-grid--3,
  .aw-price-grid {
    grid-template-columns: 1fr;
  }

  .aw-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .aw-cta-block__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .aw-hero {
    padding-top: 56px;
  }

  .aw-card__stats {
    grid-template-columns: 1fr 1fr;
  }

  .aw-kpi-grid {
    grid-template-columns: 1fr;
  }
}


/* === single-layanan-jasa-backlink.css === */
/* Styles for Single Layanan - Jasa Backlink
   Modern, accessible, responsive, SEO-friendly
   Placed: assets/css/single-layanan-jasa-backlink.css
*/
:root{
  --bg:#07171a;
  --card:#062a23;
  --muted:#94a3b8;
  --accent:#10b981;
  --accent-2:#06b6d4;
  --glass:rgba(255,255,255,0.03);
  --max-w:1180px;
}

/* Base shell */
.bl-shell{max-width:var(--max-w);margin:0 auto;padding:0 1rem;box-sizing:border-box}
.bl-page{background:var(--bg);color:#e6fff4;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, 'Space Grotesk', sans-serif}

/* Breadcrumb */
.bl-breadcrumb{display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.bl-breadcrumb a{color:var(--muted);text-decoration:none}
.bl-breadcrumb span{opacity:.6}

/* Hero */
.bl-hero{padding:3.2rem 0;border-bottom:1px solid rgba(255,255,255,0.02);position:relative}
.bl-hero__grid{display:grid;grid-template-columns:1fr 380px;gap:2.2rem;align-items:center}
@media (max-width:880px){.bl-hero__grid{grid-template-columns:1fr}}

.bl-hero__copy{padding:1.2rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:14px}
.bl-badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#07221a;padding:.45rem .75rem;border-radius:999px;font-weight:700;font-size:.9rem;margin-bottom:.6rem}
.bl-title{font-size:clamp(1.6rem,3.8vw,2.6rem);margin:.25rem 0 1rem;color:#e8fff6;line-height:1.05}
.bl-lead{color:var(--muted);margin:0 0 1rem;font-size:1rem}

.bl-hero__bullets{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.bl-hero__bullets div{background:var(--glass);padding:.6rem .8rem;border-radius:10px;font-size:.95rem}
.bl-cta{display:flex;gap:.8rem;margin-top:1.1rem;flex-wrap:wrap}
.bl-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:700}
.bl-btn--primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06221a}
.bl-btn--ghost{background:transparent;color:var(--accent);border:1px solid rgba(110,231,183,0.12)}

/* Card */
.bl-hero__card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:1rem;border:1px solid rgba(255,255,255,0.02)}
.bl-card__top{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.bl-card__price span{display:block;color:var(--muted);font-size:.9rem}
.bl-card__price strong{display:block;color:#e6fff4;font-size:1.5rem}
.bl-card__media img{width:100%;border-radius:10px;display:block;margin-top:.8rem}
.bl-card__stats{display:flex;gap:.8rem;margin-top:.8rem}
.bl-card__stats div{background:var(--glass);padding:.5rem .6rem;border-radius:10px;flex:1;text-align:center}

/* Sections */
.bl-section{padding:2.4rem 0}
.bl-section--soft{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:12px;margin-bottom:1rem;padding:2rem}
.bl-section__head h2{margin:0 0 .6rem;color:#e9fff4}
.bl-grid{display:grid;gap:1rem}
.bl-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.bl-grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bl-grid--3{grid-template-columns:1fr}}
.bl-card h3{margin:0 0 .4rem;color:#e6fff4}
.bl-card p{margin:0;color:var(--muted)}

/* Chips */
.bl-chip-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.bl-chip{background:rgba(255,255,255,0.02);padding:.55rem .8rem;border-radius:10px;color:var(--muted);font-weight:600}

/* Steps */
.bl-steps{display:grid;gap:1rem}
.bl-step{display:flex;gap:1rem;align-items:flex-start}
.bl-step__num{width:42px;height:42px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#06221a}

/* Price grid */
.bl-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.bl-price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bl-price-grid{grid-template-columns:1fr}}
.bl-price-card{background:var(--card);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.bl-price-card--featured{box-shadow:0 18px 40px rgba(2,20,16,0.45);transform:translateY(-6px)}
.bl-price{font-size:1.2rem;font-weight:800;color:#e6fff4}
.bl-price span{font-weight:400;color:var(--muted);font-size:.9rem}
.bl-price-card ul{margin:.8rem 0 0;padding-left:1.2rem;color:var(--muted)}

/* KPI */
.bl-kpi-grid{display:flex;gap:1rem;flex-wrap:wrap}
.bl-kpi{background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);padding:.8rem 1rem;border-radius:10px;flex:1;min-width:140px}
.bl-kpi strong{display:block;font-size:1.2rem}

/* Content */
.bl-content{line-height:1.7;color:#dffae6}
.bl-content img{max-width:100%;height:auto}

/* FAQ */
.bl-faq details{background:var(--card);padding:.9rem;border-radius:10px;margin-bottom:.6rem}
.bl-faq summary{cursor:pointer;font-weight:700}
.bl-faq p{margin:.6rem 0 0;color:var(--muted)}

/* CTA block */
.bl-cta-block{background:linear-gradient(90deg, rgba(16,185,129,0.06), rgba(6,182,212,0.04));padding:1.4rem;border-radius:12px;margin-top:1.2rem}
.bl-cta-block__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
@media (max-width:800px){.bl-cta-block__inner{flex-direction:column;align-items:flex-start}}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Small polish */
a.bl-btn:focus, .bl-card a:focus{outline:3px solid rgba(16,185,129,0.18);outline-offset:2px}

/* End */


/* === single-layanan-jasa-cloud-hosting.css === */
/* ============================================================================
   Jasa Cloud Hosting - Modern Tech Design
   Purple (#8b5cf6) + Cyan (#06b6d4) + Slate (#1e293b)
   ============================================================================ */

:root {
  --ch-primary: #8b5cf6;
  --ch-primary-light: #a78bfa;
  --ch-primary-dark: #7c3aed;
  --ch-accent: #06b6d4;
  --ch-accent-light: #22d3ee;
  --ch-accent-dark: #0891b2;
  --ch-dark: #0f172a;
  --ch-darker: #020617;
  --ch-slate: #1e293b;
  --ch-text-light: #cbd5e1;
  --ch-text-lighter: #e2e8f0;
  --ch-border: rgba(148, 163, 184, 0.1);
  --ch-border-light: rgba(148, 163, 184, 0.15);
}

.ch-single {
  background: linear-gradient(135deg, var(--ch-dark) 0%, var(--ch-slate) 100%);
  color: var(--ch-text-light);
  overflow: hidden;
}

/* UTILITY CLASSES */
.ch-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  gap: 8px;
}

.ch-btn--primary {
  background: linear-gradient(135deg, var(--ch-primary) 0%, var(--ch-accent) 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.ch-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
}

.ch-btn--ghost {
  background: transparent;
  color: var(--ch-accent);
  border: 2px solid var(--ch-accent);
}

.ch-btn--ghost:hover {
  background: rgba(6, 182, 212, 0.1);
}

.ch-btn--large {
  padding: 16px 40px;
  font-size: 16px;
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */

.ch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.ch-breadcrumb a {
  color: var(--ch-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

.ch-breadcrumb a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
}

.ch-breadcrumb span {
  color: var(--ch-text-light);
  opacity: 0.5;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.ch-hero {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

.ch-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.ch-hero__shapes {
  position: relative;
  width: 100%;
  height: 100%;
}

.ch-shape {
  position: absolute;
  opacity: 0.08;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ch-primary), var(--ch-accent));
}

.ch-shape--1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -50px;
}

.ch-shape--2 {
  width: 300px;
  height: 300px;
  bottom: 100px;
  left: 10%;
  background: radial-gradient(circle at 30% 30%, var(--ch-accent), var(--ch-primary));
}

.ch-shape--3 {
  width: 250px;
  height: 250px;
  top: 50%;
  right: 5%;
  background: radial-gradient(circle at 30% 30%, var(--ch-primary-light), var(--ch-accent-light));
  opacity: 0.06;
}

.ch-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}

.ch-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ch-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid var(--ch-primary);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ch-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, var(--ch-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ch-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ch-text-lighter);
  margin: 0;
  max-width: 540px;
}

.ch-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ch-hero__image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ch-border-light);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(6, 182, 212, 0.05));
}

.ch-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metrics Strip */
.ch-metrics-strip {
  background: rgba(139, 92, 246, 0.05);
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
  margin-top: 40px;
  padding: 32px 0;
  position: relative;
  z-index: 1;
}

.ch-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}

.ch-metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ch-metric__icon {
  font-size: 28px;
}

.ch-metric__stat {
  font-weight: 700;
  font-size: 20px;
  color: var(--ch-text-lighter);
}

.ch-metric__label {
  font-size: 13px;
  color: var(--ch-text-light);
  opacity: 0.8;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.ch-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--ch-border);
}

.ch-section--highlights {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
}

.ch-section--alt {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
}

.ch-section--kpis {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.ch-section--cta {
  background: linear-gradient(135deg, var(--ch-primary) 0%, var(--ch-accent) 100%);
}

.ch-section__head {
  text-align: center;
  margin-bottom: 60px;
}

.ch-section__head h2 {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 16px;
  background: linear-gradient(135deg, var(--ch-accent-light), var(--ch-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ch-section--cta .ch-section__head h2 {
  color: white;
  -webkit-text-fill-color: unset;
  background: none;
}

.ch-section__head p {
  font-size: 16px;
  color: var(--ch-text-light);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ch-section--cta .ch-section__head p {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   HIGHLIGHTS GRID
   ============================================================================ */

.ch-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.ch-highlight-card {
  padding: 32px;
  border: 1px solid var(--ch-border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.05));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-highlight-card:hover {
  border-color: var(--ch-accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(6, 182, 212, 0.08));
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(139, 92, 246, 0.1);
}

.ch-highlight__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.ch-highlight__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ch-text-lighter);
}

.ch-highlight__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-light);
  margin: 0;
}

/* ============================================================================
   FEATURES GRID
   ============================================================================ */

.ch-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.ch-feature-item {
  padding: 24px;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.04);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-feature-item:hover {
  border-color: var(--ch-accent);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.15);
}

.ch-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: var(--ch-accent);
  margin-bottom: 12px;
}

.ch-feature__name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ch-text-lighter);
}

.ch-feature__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ch-text-light);
  margin: 0;
}

/* ============================================================================
   KPI CARDS
   ============================================================================ */

.ch-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.ch-kpi-card {
  padding: 40px 24px;
  border: 2px solid rgba(6, 182, 212, 0.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.05));
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-kpi-card:hover {
  border-color: var(--ch-accent);
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.2);
}

.ch-kpi__value {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--ch-accent-light), var(--ch-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.ch-kpi__suffix {
  font-size: 14px;
  color: var(--ch-text-light);
  margin-bottom: 8px;
  opacity: 0.8;
}

.ch-kpi__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ch-text-lighter);
  margin: 0;
}

/* ============================================================================
   TIMELINE
   ============================================================================ */

.ch-timeline {
  position: relative;
  padding: 40px 0;
}

.ch-timeline::before {
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ch-primary), var(--ch-accent), transparent);
  transform: scaleY(0);
  transform-origin: top;
  animation: timelineGrow 1s ease-out 0.3s forwards;
}

@keyframes timelineGrow {
  to { transform: scaleY(1); }
}

.ch-timeline__item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 40px;
  position: relative;
}

.ch-timeline__item:nth-child(even) {
  grid-template-columns: 1fr auto 1fr;
}

.ch-timeline__item:nth-child(even) .ch-timeline__content {
  text-align: right;
}

.ch-timeline__marker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 24px;
  z-index: 2;
  box-shadow: 0 0 0 8px var(--ch-dark);
}

.ch-timeline__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
}

.ch-timeline__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ch-text-lighter);
  margin: 0 0 8px;
}

.ch-timeline__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-light);
  margin: 0 0 12px;
}

.ch-timeline__time {
  font-size: 13px;
  color: var(--ch-accent-light);
  font-weight: 600;
}

/* ============================================================================
   USE CASES GRID
   ============================================================================ */

.ch-usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.ch-usecase-card {
  padding: 28px;
  border: 1px solid var(--ch-border-light);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.04), rgba(139, 92, 246, 0.04));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-usecase-card:hover {
  border-color: var(--ch-primary);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.08));
  transform: translateY(-4px);
}

.ch-usecase__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ch-text-lighter);
}

.ch-usecase__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-light);
  margin: 0 0 16px;
}

.ch-usecase__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ch-accent-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
}

.ch-usecase__link:hover {
  color: var(--ch-accent);
  gap: 8px;
}

/* ============================================================================
   CONTENT SECTION
   ============================================================================ */

.ch-section--content {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.02), rgba(139, 92, 246, 0.02));
}

.ch-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
}

.ch-content h2:not(:first-of-type) {
  display: none;
}

.ch-content p {
  margin: 0 0 20px;
  color: var(--ch-text-light);
}

.ch-content p:last-child {
  margin-bottom: 0;
}

.ch-content a {
  color: var(--ch-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

.ch-content a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
}

.ch-content strong {
  color: var(--ch-text-lighter);
  font-weight: 700;
}

.ch-content em {
  color: var(--ch-accent-light);
}

.ch-content ul,
.ch-content ol {
  margin: 20px 0;
  padding-left: 24px;
  color: var(--ch-text-light);
}

.ch-content li {
  margin-bottom: 8px;
}

/* ============================================================================
   FAQ SECTION
   ============================================================================ */

.ch-faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ch-faq__item {
  border: 1px solid var(--ch-border-light);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.05);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-faq__item:hover {
  border-color: var(--ch-accent);
  background: rgba(139, 92, 246, 0.08);
}

.ch-faq__item[open] {
  border-color: var(--ch-accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.05));
}

.ch-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ch-text-lighter);
  user-select: none;
  list-style: none;
}

.ch-faq__summary::-webkit-details-marker {
  display: none;
}

.ch-faq__question {
  flex: 1;
  font-size: 16px;
  text-align: left;
}

.ch-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  color: white;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-faq__item[open] .ch-faq__toggle {
  transform: rotate(45deg);
}

.ch-faq__answer {
  padding: 0 24px 24px;
  color: var(--ch-text-light);
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px solid var(--ch-border);
  max-height: 400px;
  overflow: hidden;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 400px;
  }
}

.ch-faq__answer a {
  color: var(--ch-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

.ch-faq__answer a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
}

/* ============================================================================
   CTA BLOCK
   ============================================================================ */

.ch-cta-block {
  text-align: center;
  padding: 60px 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ch-section--cta .ch-cta-block {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ch-cta__title {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 12px;
  color: white;
}

.ch-section--cta .ch-cta__title {
  color: white;
}

.ch-cta__desc {
  font-size: 16px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.9);
}

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

@media (max-width: 1024px) {
  .ch-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ch-title {
    font-size: 36px;
  }

  .ch-lead {
    font-size: 16px;
  }

  .ch-section__head h2 {
    font-size: 32px;
  }

  .ch-timeline::before {
    left: 30px;
  }

  .ch-timeline__item {
    grid-template-columns: auto 1fr;
    gap: 24px;
  }

  .ch-timeline__item:nth-child(even) {
    grid-template-columns: auto 1fr;
  }

  .ch-timeline__item:nth-child(even) .ch-timeline__content {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .ch-shell {
    padding: 0 16px;
  }

  .ch-section {
    padding: 60px 0;
  }

  .ch-hero {
    padding: 60px 0;
  }

  .ch-title {
    font-size: 28px;
  }

  .ch-lead {
    font-size: 15px;
  }

  .ch-hero__cta {
    gap: 12px;
  }

  .ch-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .ch-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .ch-section__head h2 {
    font-size: 24px;
  }

  .ch-highlights-grid,
  .ch-features-grid,
  .ch-kpis-grid,
  .ch-usecases-grid {
    grid-template-columns: 1fr;
  }

  .ch-timeline__marker {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .ch-cta-block {
    padding: 40px 24px;
  }

  .ch-cta__title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .ch-shell {
    padding: 0 12px;
  }

  .ch-section {
    padding: 40px 0;
  }

  .ch-hero {
    padding: 40px 0;
  }

  .ch-title {
    font-size: 24px;
  }

  .ch-lead {
    font-size: 14px;
  }

  .ch-badge {
    font-size: 12px;
  }

  .ch-breadcrumb {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .ch-metrics {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ch-metric {
    gap: 8px;
  }

  .ch-metric__stat {
    font-size: 18px;
  }

  .ch-section__head h2 {
    font-size: 20px;
  }

  .ch-section__head p {
    font-size: 14px;
  }

  .ch-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
  }

  .ch-hero__cta {
    flex-direction: column;
  }

  .ch-timeline__item {
    gap: 16px;
  }

  .ch-timeline__title {
    font-size: 16px;
  }

  .ch-cta-block {
    padding: 32px 16px;
  }

  .ch-cta__title {
    font-size: 20px;
  }

  .ch-cta__desc {
    font-size: 14px;
  }
}


/* === single-layanan-jasa-domain.css === */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

:root {
  --jd-bg: #081014;
  --jd-ink: #f8fafc;
  --jd-muted: #9aa6b2;
  --jd-accent: #12d38e;
  --jd-accent-2: #2bb8ff;
  --jd-card: rgba(255, 255, 255, 0.05);
  --jd-border: rgba(255, 255, 255, 0.08);
  --jd-shadow: 0 20px 60px rgba(4, 8, 14, 0.45);
}

.jd-page {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(18, 211, 142, 0.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(43, 184, 255, 0.25), transparent 55%),
    linear-gradient(145deg, #070c10 0%, #0b1b1a 50%, #081014 100%);
  color: var(--jd-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.jd-shell {
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.jd-hero {
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
}

.jd-hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 280px at 20% 10%, rgba(18, 211, 142, 0.25), transparent 60%),
    radial-gradient(420px 260px at 80% 20%, rgba(43, 184, 255, 0.25), transparent 60%);
  filter: blur(0px);
  opacity: 0.7;
  pointer-events: none;
}

.jd-breadcrumb {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--jd-muted);
  margin-bottom: 32px;
}

.jd-breadcrumb a {
  color: var(--jd-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.jd-breadcrumb a:hover {
  color: var(--jd-ink);
}

.jd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 36px;
  align-items: stretch;
}

.jd-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jd-badge {
  background: rgba(18, 211, 142, 0.12);
  border: 1px solid rgba(18, 211, 142, 0.4);
  color: #d7fff0;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 8px 14px;
  border-radius: 999px;
  align-self: flex-start;
}

.jd-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.05;
  margin: 0;
}

.jd-lead {
  font-size: 18px;
  color: var(--jd-muted);
  max-width: 560px;
}

.jd-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.jd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.jd-btn--primary {
  background: linear-gradient(135deg, var(--jd-accent), #0fbf78);
  color: #05130f;
  box-shadow: 0 12px 30px rgba(18, 211, 142, 0.35);
}

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

.jd-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--jd-ink);
  border-color: rgba(255, 255, 255, 0.15);
}

.jd-btn--ghost:hover {
  border-color: var(--jd-accent);
}

.jd-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.jd-stat {
  background: var(--jd-card);
  border: 1px solid var(--jd-border);
  padding: 14px 18px;
  border-radius: 14px;
  min-width: 120px;
}

.jd-stat strong {
  display: block;
  font-size: 20px;
}

.jd-stat span {
  font-size: 12px;
  color: var(--jd-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jd-tlds {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.jd-tld {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--jd-muted);
}

.jd-hero__panel {
  background: rgba(6, 14, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--jd-shadow);
  backdrop-filter: blur(10px);
}

.jd-panel__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.jd-panel__price strong {
  display: block;
  font-size: 24px;
}

.jd-panel__note {
  color: var(--jd-muted);
  font-size: 13px;
}

.jd-panel__media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a151a;
}

.jd-panel__media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.jd-panel__trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--jd-muted);
}

.jd-panel__trust span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.jd-section {
  padding: 70px 0;
}

.jd-section--alt {
  background: rgba(5, 10, 12, 0.9);
}

.jd-section__head {
  margin-bottom: 36px;
}

.jd-section__head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 8px;
}

.jd-section__head p {
  color: var(--jd-muted);
}

.jd-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.jd-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 14px;
  background: var(--jd-card);
  border: 1px solid var(--jd-border);
}

.jd-feature span {
  color: var(--jd-accent);
  font-weight: 700;
}

.jd-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.jd-price-card {
  border-radius: 18px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jd-price-card--featured {
  border-color: rgba(18, 211, 142, 0.6);
  box-shadow: 0 18px 50px rgba(18, 211, 142, 0.15);
}

.jd-price {
  font-size: 28px;
  font-weight: 700;
}

.jd-price span {
  font-size: 14px;
  color: var(--jd-muted);
  margin-left: 6px;
}

.jd-price-card ul {
  padding-left: 18px;
  color: var(--jd-muted);
}

.jd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.jd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px;
  background: var(--jd-card);
  border: 1px solid var(--jd-border);
  border-radius: 16px;
}

.jd-step__num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18, 211, 142, 0.2);
  color: #d8fff1;
  font-weight: 700;
}

.jd-section--content .jd-content {
  background: rgba(255, 255, 255, 0.04);
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--jd-border);
}

.jd-content :where(h2, h3, h4) {
  color: var(--jd-ink);
}

.jd-faq {
  display: grid;
  gap: 12px;
}

.jd-faq__item {
  background: var(--jd-card);
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  padding: 14px 16px;
}

.jd-faq__item summary {
  font-weight: 700;
  cursor: pointer;
}

.jd-faq__body {
  margin-top: 10px;
  color: var(--jd-muted);
}

.jd-cta-final {
  padding: 80px 0 100px;
  background: linear-gradient(140deg, rgba(18, 211, 142, 0.2), rgba(43, 184, 255, 0.1));
}

.jd-cta-final__inner {
  background: rgba(6, 12, 16, 0.9);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.jd-cta-final__inner h2 {
  font-family: 'Fraunces', serif;
  margin-bottom: 10px;
}

.jd-cta-final__inner p {
  color: var(--jd-muted);
  margin-bottom: 20px;
}

@media (max-width: 960px) {
  .jd-hero__grid {
    grid-template-columns: 1fr;
  }

  .jd-panel__media img {
    height: 220px;
  }
}

@media (max-width: 640px) {
  .jd-hero {
    padding-top: 70px;
  }

  .jd-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .jd-btn {
    width: 100%;
  }

  .jd-cta-final__inner {
    padding: 28px;
  }
}


/* === single-layanan-jasa-iklan-google-ads.css === */
:root {
  --ga-ink: #f8fafc;
  --ga-ink-soft: #9aa6b2;
  --ga-accent: #f59e0b;
  --ga-accent-2: #2bb8ff;
  --ga-bg: #081014;
  --ga-card: rgba(255, 255, 255, 0.05);
  --ga-border: rgba(255, 255, 255, 0.08);
  --ga-shadow: 0 20px 60px rgba(4, 8, 14, 0.45);
}

.ga-page {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(37, 99, 235, 0.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(245, 158, 11, 0.25), transparent 55%),
    linear-gradient(145deg, #070c10 0%, #0b1b1a 50%, #081014 100%);
  color: var(--ga-ink);
}

.ga-shell {
  width: min(1160px, 92%);
  margin: 0 auto;
}

.ga-hero {
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}

.ga-hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 280px at 15% 10%, rgba(37, 99, 235, 0.25), transparent 60%),
    radial-gradient(420px 260px at 80% 20%, rgba(245, 158, 11, 0.28), transparent 60%);
  z-index: 0;
  opacity: 0.8;
}

.ga-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--ga-ink-soft);
}

.ga-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.ga-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  margin-top: 24px;
  align-items: center;
}

.ga-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(43, 184, 255, 0.12);
  color: #d8f1ff;
  border: 1px solid rgba(43, 184, 255, 0.4);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ga-title {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  margin: 16px 0 12px;
}

.ga-lead {
  font-size: 18px;
  color: var(--ga-ink-soft);
}

.ga-hero__bullets {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.ga-hero__bullets div {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ga-card);
  border: 1px solid var(--ga-border);
}

.ga-hero__bullets strong {
  font-size: 14px;
}

.ga-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 16px;
}

.ga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.ga-btn--primary {
  background: linear-gradient(135deg, var(--ga-accent), #fbbf24);
  color: #1b1203;
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.35);
}

.ga-btn--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ga-ink);
  background: rgba(255, 255, 255, 0.04);
}

.ga-hero__trust {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ga-ink-soft);
}

.ga-hero__trust span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.ga-hero__card {
  background: rgba(6, 14, 18, 0.7);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--ga-shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.ga-card__top {
  display: grid;
  gap: 8px;
}

.ga-card__price span {
  display: block;
  font-size: 12px;
  color: var(--ga-ink-soft);
}

.ga-card__price strong {
  font-size: 22px;
}

.ga-card__note {
  font-size: 13px;
  color: var(--ga-ink-soft);
}

.ga-card__media {
  margin: 18px 0;
}

.ga-card__media img,
.ga-card__placeholder {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(37, 99, 235, 0.25), rgba(245, 158, 11, 0.25));
}

.ga-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
}

.ga-card__stats strong {
  display: block;
  font-size: 18px;
}

.ga-card__stats span {
  font-size: 12px;
  color: var(--ga-ink-soft);
}

.ga-section {
  padding: 64px 0;
}

.ga-section--soft {
  background: rgba(255, 255, 255, 0.02);
}

.ga-section--alt {
  background: rgba(8, 16, 20, 0.65);
}

.ga-section__head {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

.ga-section__head p {
  color: var(--ga-ink-soft);
}

/* Hide FAQ headings in content - only h2 that's not the first one */
.ga-content h2:not(:first-of-type) {
  display: none;
}

.ga-grid {
  display: grid;
  gap: 18px;
}

.ga-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.ga-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--ga-border);
  background: var(--ga-card);
  box-shadow: 0 10px 30px rgba(4, 8, 14, 0.35);
}

.ga-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ga-chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
}

.ga-steps {
  display: grid;
  gap: 16px;
}

.ga-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--ga-card);
  border: 1px solid var(--ga-border);
}

.ga-step__num {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(43, 184, 255, 0.12);
  color: #d8f1ff;
  font-weight: 700;
}

.ga-price-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.ga-price-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--ga-border);
  background: rgba(6, 14, 18, 0.7);
  display: grid;
  gap: 14px;
}

.ga-price-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ga-ink-soft);
}

.ga-price {
  font-size: 22px;
  font-weight: 700;
}

.ga-price span {
  font-size: 13px;
  color: var(--ga-ink-soft);
}

.ga-price-card--featured {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.2);
}

.ga-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ga-kpi {
  padding: 18px;
  border-radius: 16px;
  background: var(--ga-card);
  border: 1px solid var(--ga-border);
  text-align: center;
}

.ga-kpi strong {
  display: block;
  font-size: 22px;
}

.ga-kpi span {
  color: var(--ga-ink-soft);
  font-size: 13px;
}

.ga-content {
  background: rgba(6, 14, 18, 0.7);
  border-radius: 18px;
  padding: 24px;
  border: 1px solid var(--ga-border);
}

.ga-faq {
  display: grid;
  gap: 14px;
}

.ga-faq__item {
  border: 1.5px solid var(--ga-border);
  border-radius: 16px;
  padding: 0;
  background: rgba(245, 158, 11, 0.05);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ga-faq__item:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.ga-faq__item[open] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(43, 184, 255, 0.08));
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 193, 7, 0.1);
}

.ga-faq__item summary {
  font-weight: 600;
  cursor: pointer;
  padding: 18px 20px 18px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--ga-ink);
  user-select: none;
  position: relative;
  transition: all 0.3s ease;
  text-align: center;
}

.ga-faq__item summary:hover {
  color: #fcd34d;
}

.ga-faq__item summary::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--ga-accent), #fcd34d);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #0f0700;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  left: 20px;
}

.ga-faq__item[open] summary::before {
  transform: rotate(90deg);
}

.ga-faq__item details[open] > summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
}

.ga-faq__item p {
  padding: 0 20px 18px 20px;
  margin: 0;
  color: var(--ga-ink-soft);
  line-height: 1.6;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ga-cta-block {
  padding: 56px 0 80px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(245, 158, 11, 0.2));
}

.ga-cta-block__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 20px;
  background: rgba(6, 14, 18, 0.7);
  border: 1px solid var(--ga-border);
  box-shadow: var(--ga-shadow);
}

@media (max-width: 980px) {
  .ga-hero__grid {
    grid-template-columns: 1fr;
  }

  .ga-grid--3,
  .ga-price-grid {
    grid-template-columns: 1fr;
  }

  .ga-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ga-cta-block__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .ga-hero {
    padding-top: 56px;
  }

  .ga-card__stats {
    grid-template-columns: 1fr 1fr;
  }

  .ga-kpi-grid {
    grid-template-columns: 1fr;
  }
}


/* === single-layanan-jasa-landing-page.css === */
/* ============================================================================
   Jasa Landing Page - Modern Conversion Design
   Teal (#0f766e) + Amber (#f59e0b)
   ============================================================================ */

:root {
  --lp-primary: #0f766e;
  --lp-primary-light: #14b8a6;
  --lp-primary-dark: #0f4c45;
  --lp-accent: #f59e0b;
  --lp-accent-light: #fbbf24;
  --lp-dark: #0b1214;
  --lp-darker: #05090a;
  --lp-slate: #121b1e;
  --lp-text: #cbd5e1;
  --lp-text-light: #e2e8f0;
  --lp-border: rgba(148, 163, 184, 0.12);
}

.lp-single {
  background: linear-gradient(180deg, var(--lp-darker) 0%, var(--lp-dark) 55%, var(--lp-slate) 100%);
  color: var(--lp-text);
  overflow: hidden;
}

.lp-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  gap: 8px;
}

.lp-btn--primary {
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-accent));
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 118, 110, 0.35);
}

.lp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15, 118, 110, 0.45);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--lp-accent-light);
  border-color: var(--lp-accent);
}

.lp-btn--ghost:hover {
  background: rgba(245, 158, 11, 0.1);
}

.lp-btn--large {
  padding: 16px 40px;
  font-size: 16px;
}

.lp-btn--block {
  width: 100%;
}

/* Breadcrumb */
.lp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.lp-breadcrumb a {
  color: var(--lp-accent-light);
  text-decoration: none;
}

.lp-breadcrumb a:hover {
  text-decoration: underline;
}

.lp-breadcrumb span {
  color: var(--lp-text);
  opacity: 0.6;
}

/* Hero */
.lp-hero {
  position: relative;
  padding: 80px 0;
}

.lp-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(20, 184, 166, 0.18), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(245, 158, 11, 0.18), transparent 40%);
  pointer-events: none;
}

.lp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.lp-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(15, 118, 110, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.5);
  color: var(--lp-primary-light);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.lp-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--lp-text-light);
}

.lp-lead {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: var(--lp-text);
}

.lp-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lp-border);
}

.lp-stat {
  text-align: left;
}

.lp-stat__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--lp-text-light);
}

.lp-stat__label {
  font-size: 12px;
  color: var(--lp-text);
  opacity: 0.8;
}

.lp-hero__image {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  background: rgba(15, 118, 110, 0.06);
}

.lp-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections */
.lp-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--lp-border);
}

.lp-section--soft {
  background: rgba(15, 118, 110, 0.04);
}

.lp-section--alt {
  background: rgba(245, 158, 11, 0.04);
}

.lp-section--content {
  background: rgba(20, 184, 166, 0.03);
}

.lp-section--cta {
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-accent));
}

.lp-section__head {
  text-align: center;
  margin-bottom: 48px;
}

.lp-section__head h2 {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--lp-text-light);
}

.lp-section__head p {
  margin: 0 auto;
  max-width: 640px;
  font-size: 16px;
  color: var(--lp-text);
}

/* Outcomes */
.lp-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lp-card {
  padding: 28px;
  border-radius: 14px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--lp-text-light);
}

.lp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Structure grid */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-panel {
  padding: 24px;
  border-radius: 12px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-panel h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--lp-text-light);
}

.lp-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Steps */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-step {
  padding: 24px;
  border-radius: 12px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  color: var(--lp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 12px;
}

.lp-step__content h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--lp-text-light);
}

.lp-step__content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Pricing */
.lp-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lp-price {
  position: relative;
  padding: 28px 24px;
  border-radius: 16px;
  background: rgba(18, 27, 30, 0.75);
  border: 1px solid var(--lp-border);
  display: flex;
  flex-direction: column;
}

.lp-price--popular {
  border-color: var(--lp-accent);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.2);
  transform: translateY(-4px);
}

.lp-price__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lp-accent);
  color: #1f1300;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
}

.lp-price__header h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--lp-text-light);
}

.lp-price__header p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--lp-text);
}

.lp-price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}

.lp-price__amount span {
  font-size: 28px;
  font-weight: 800;
  color: var(--lp-text-light);
}

.lp-price__amount small {
  font-size: 13px;
  opacity: 0.8;
}

.lp-price__features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-price__features li {
  font-size: 13px;
}

/* Stack */
.lp-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-stack__item {
  padding: 20px;
  border-radius: 12px;
  background: rgba(18, 27, 30, 0.7);
  border: 1px solid var(--lp-border);
}

.lp-stack__item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--lp-text-light);
}

.lp-stack__item p {
  margin: 0;
  font-size: 13px;
}

/* Content */
.lp-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
}

.lp-content h2:not(:first-of-type) {
  display: none;
}

.lp-content p {
  margin: 0 0 18px;
}

.lp-content a {
  color: var(--lp-accent-light);
  text-decoration: none;
}

.lp-content a:hover {
  text-decoration: underline;
}

/* FAQ */
.lp-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-faq__item {
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(18, 27, 30, 0.7);
  overflow: hidden;
}

.lp-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  color: var(--lp-text-light);
  list-style: none;
}

.lp-faq__summary::-webkit-details-marker {
  display: none;
}

.lp-faq__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  transition: transform 0.3s ease;
}

.lp-faq__item[open] .lp-faq__icon {
  transform: rotate(45deg);
}

.lp-faq__answer {
  padding: 0 20px 18px;
  border-top: 1px solid var(--lp-border);
  font-size: 14px;
  line-height: 1.7;
}

/* CTA */
.lp-cta {
  text-align: center;
  padding: 60px 32px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.lp-cta h2 {
  margin: 0 0 10px;
  font-size: 32px;
  color: #ffffff;
}

.lp-cta p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 1024px) {
  .lp-hero__grid {
    grid-template-columns: 1fr;
  }

  .lp-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-outcomes,
  .lp-grid,
  .lp-steps,
  .lp-pricing,
  .lp-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .lp-shell {
    padding: 0 16px;
  }

  .lp-title {
    font-size: 32px;
  }

  .lp-lead {
    font-size: 16px;
  }

  .lp-hero__cta {
    flex-direction: column;
  }

  .lp-btn {
    width: 100%;
  }

  .lp-outcomes,
  .lp-grid,
  .lp-steps,
  .lp-pricing,
  .lp-stack {
    grid-template-columns: 1fr;
  }

  .lp-section {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  .lp-title {
    font-size: 26px;
  }

  .lp-section__head h2 {
    font-size: 24px;
  }

  .lp-cta h2 {
    font-size: 24px;
  }
}


/* === single-layanan-jasa-maintenance-it.css === */
/* ============================================================================
   Jasa Maintenance IT - Enterprise Professional
   Green (#10b981) + Blue (#0ea5e9) + Slate
   ============================================================================ */

:root {
  --mit-primary: #10b981;
  --mit-primary-light: #34d399;
  --mit-secondary: #0ea5e9;
  --mit-secondary-light: #38bdf8;
  --mit-accent: #06b6d4;
  --mit-dark: #0f172a;
  --mit-dark-light: #1e293b;
  --mit-text: #e2e8f0;
  --mit-text-muted: #cbd5e1;
  --mit-border: rgba(203, 213, 225, 0.15);
  --mit-card: rgba(30, 41, 59, 0.8);
  --mit-overlay: rgba(15, 23, 42, 0.75);
}

.maintenance-it-landing {
  background: linear-gradient(180deg, #020617 0%, var(--mit-dark) 30%, #0f172a 70%, #182754 100%);
  color: var(--mit-text);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

.mit-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== HERO SECTION ===== */
.mit-hero {
  position: relative;
  padding: 100px 0 60px;
  overflow: hidden;
  background: radial-gradient(900px 600px at 20% -10%, rgba(16, 185, 129, 0.15), transparent 50%),
              radial-gradient(800px 500px at 80% 20%, rgba(14, 165, 233, 0.12), transparent 50%);
}

.mit-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
}

.mit-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.6);
}

.mit-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9));
  z-index: 1;
  pointer-events: none;
}

.mit-shell {
  position: relative;
  z-index: 2;
}

.mit-breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 24px;
  opacity: 0.8;
}

.mit-breadcrumb a {
  color: var(--mit-secondary-light);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

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

.mit-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--mit-primary-light);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
  animation: fadeIn 0.6s ease-out;
}

.mit-hero__title {
  font-size: 52px;
  margin: 0 0 16px;
  line-height: 1.1;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 0%, var(--mit-secondary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mit-hero__lead {
  font-size: 18px;
  max-width: 700px;
  color: var(--mit-text-muted);
  margin-bottom: 28px;
}

.mit-hero__actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.mit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

.mit-btn--primary {
  background: linear-gradient(135deg, var(--mit-primary) 0%, var(--mit-primary-light) 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.25);
}

.mit-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35);
}

.mit-btn--primary svg {
  width: 18px;
  height: 18px;
}

.mit-btn--secondary {
  background: rgba(14, 165, 233, 0.15);
  border: 1.5px solid var(--mit-secondary);
  color: var(--mit-secondary-light);
}

.mit-btn--secondary:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: var(--mit-secondary-light);
  transform: translateY(-2px);
}

.mit-btn--lg {
  padding: 16px 40px;
  font-size: 16px;
}

.mit-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.mit-stat {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  backdrop-filter: blur(8px);
}

.mit-stat__icon {
  font-size: 28px;
}

.mit-stat__number {
  font-size: 20px;
  font-weight: 700;
  color: var(--mit-primary-light);
}

.mit-stat__label {
  font-size: 12px;
  color: var(--mit-text-muted);
}

/* ===== SERVICES GRID ===== */
.mit-services {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(16, 185, 129, 0.02));
}

.mit-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.mit-section__header h2 {
  font-size: 42px;
  margin: 0 0 12px;
  color: #ffffff;
}

.mit-section__header p {
  font-size: 16px;
  color: var(--mit-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.mit-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.mit-service__card {
  padding: 28px;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mit-service__card:hover {
  transform: translateY(-8px);
  border-color: var(--mit-primary);
  box-shadow: 0 20px 48px rgba(16, 185, 129, 0.15);
  background: rgba(16, 185, 129, 0.05);
}

.mit-service__icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.mit-service__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #ffffff;
}

.mit-service__desc {
  font-size: 14px;
  color: var(--mit-text-muted);
  margin-bottom: 16px;
  flex: 1;
}

.mit-service__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mit-service__features li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--mit-text-muted);
}

.mit-service__features svg {
  width: 16px;
  height: 16px;
  color: var(--mit-primary-light);
  flex-shrink: 0;
}

/* ===== SLA SECTION ===== */
.mit-sla {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.02), rgba(16, 185, 129, 0.02));
}

.mit-sla__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.mit-sla__card {
  padding: 24px;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.mit-sla__card:hover {
  border-color: var(--mit-secondary-light);
  box-shadow: 0 16px 40px rgba(14, 165, 233, 0.15);
  transform: translateY(-4px);
}

.mit-sla__level {
  margin-bottom: 16px;
}

.mit-sla__badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(14, 165, 233, 0.2);
  color: var(--mit-secondary-light);
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
}

.mit-sla__level h3 {
  font-size: 18px;
  margin: 0;
  color: #ffffff;
}

.mit-sla__desc {
  font-size: 13px;
  color: var(--mit-text-muted);
  margin: 12px 0 16px;
}

.mit-sla__metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mit-metric {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 8px;
}

.mit-metric__label {
  font-size: 12px;
  color: var(--mit-text-muted);
}

.mit-metric strong {
  color: var(--mit-primary-light);
  font-weight: 700;
}

/* ===== BENEFITS SECTION ===== */
.mit-benefits {
  padding: 80px 0;
}

.mit-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.mit-benefit__item {
  text-align: center;
}

.mit-benefit__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mit-primary), var(--mit-secondary));
  border-radius: 50%;
  color: #ffffff;
}

.mit-benefit__icon svg {
  width: 28px;
  height: 28px;
}

.mit-benefit__item h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: #ffffff;
}

.mit-benefit__item p {
  font-size: 14px;
  color: var(--mit-text-muted);
  margin: 0;
}

/* ===== PROCESS SECTION ===== */
.mit-process {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(16, 185, 129, 0.02));
}

.mit-process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  position: relative;
}

.mit-step {
  padding: 28px;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  border-radius: 14px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.mit-step:hover {
  border-color: var(--mit-primary);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.1);
}

.mit-step__number {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mit-primary), var(--mit-primary-light));
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
}

.mit-step__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.mit-step__desc {
  font-size: 13px;
  color: var(--mit-text-muted);
  margin: 0;
}

.mit-step__arrow {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mit-dark-light);
  border: 1px solid var(--mit-border);
  border-radius: 50%;
  color: var(--mit-primary);
  z-index: 1;
}

.mit-step__arrow svg {
  width: 20px;
  height: 20px;
}

/* ===== TECHNOLOGY STACK ===== */
.mit-tech {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.02), transparent);
}

.mit-tech__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.mit-tech__item {
  padding: 16px;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
  cursor: default;
}

.mit-tech__item:hover {
  border-color: var(--mit-secondary-light);
  background: rgba(14, 165, 233, 0.08);
  transform: translateY(-3px);
}

.mit-tech__name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 4px;
}

.mit-tech__category {
  display: block;
  font-size: 12px;
  color: var(--mit-primary-light);
}

/* ===== PRICING SECTION ===== */
.mit-pricing {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(16, 185, 129, 0.02));
}

.mit-pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.mit-pricing__card {
  position: relative;
  padding: 32px;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mit-pricing__card:hover {
  transform: translateY(-8px);
  border-color: var(--mit-primary);
  box-shadow: 0 20px 48px rgba(16, 185, 129, 0.2);
}

.mit-pricing__card.gold,
.mit-pricing__card.platinum {
  border: 2px solid var(--mit-primary);
  background: rgba(16, 185, 129, 0.08);
}

.mit-pricing__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--mit-primary), var(--mit-primary-light));
  color: #ffffff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.mit-pricing__name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.mit-pricing__tagline {
  font-size: 13px;
  color: var(--mit-text-muted);
  margin: 0 0 16px;
}

.mit-pricing__price {
  margin: 16px 0 24px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 10px;
}

.mit-pricing__amount {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--mit-primary-light);
}

.mit-pricing__period {
  font-size: 13px;
  color: var(--mit-text-muted);
}

.mit-pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mit-pricing__features li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--mit-text-muted);
}

.mit-pricing__features svg {
  width: 16px;
  height: 16px;
  color: var(--mit-primary-light);
  flex-shrink: 0;
}

.mit-pricing__cta {
  padding: 12px 20px;
  background: var(--mit-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
}

.mit-pricing__cta:hover {
  background: var(--mit-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
}

/* ===== CONTENT SECTION ===== */
.mit-content {
  padding: 60px 0;
}

.mit-content__body {
  max-width: 900px;
  margin: 0 auto;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  padding: 40px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.8;
}

.mit-content__body h2,
.mit-content__body h3,
.mit-content__body h4 {
  color: #ffffff;
  margin: 24px 0 12px;
}

.mit-content__body p {
  margin: 0 0 16px;
  color: var(--mit-text-muted);
}

.mit-content__body ul,
.mit-content__body ol {
  margin: 0 0 16px 20px;
  color: var(--mit-text-muted);
}

.mit-content__body li {
  margin-bottom: 8px;
}

.mit-content__body a {
  color: var(--mit-secondary-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mit-content__body a:hover {
  color: var(--mit-primary-light);
  text-decoration: underline;
}

/* ===== FAQ SECTION ===== */
.mit-faq {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(14, 165, 233, 0.02));
}

.mit-faq__items {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mit-faq__item {
  padding: 0;
  background: none;
  border: none;
}

.mit-faq__item details {
  padding: 20px;
  background: var(--mit-card);
  border: 1px solid var(--mit-border);
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mit-faq__item details:hover {
  border-color: var(--mit-primary);
  background: rgba(16, 185, 129, 0.05);
}

.mit-faq__item details[open] {
  border-color: var(--mit-primary);
  background: rgba(16, 185, 129, 0.08);
}

.mit-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.mit-faq__question svg {
  width: 20px;
  height: 20px;
  color: var(--mit-primary-light);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.mit-faq__item details[open] .mit-faq__question svg {
  transform: rotate(180deg);
}

.mit-faq__answer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mit-border);
}

.mit-faq__answer p {
  margin: 0;
  color: var(--mit-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ===== CTA FINAL SECTION ===== */
.mit-cta-final {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(14, 165, 233, 0.1));
  border-top: 1px solid var(--mit-border);
  border-bottom: 1px solid var(--mit-border);
}

.mit-cta__content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.mit-cta__content h2 {
  font-size: 42px;
  margin: 0 0 16px;
  color: #ffffff;
}

.mit-cta__content p {
  font-size: 16px;
  color: var(--mit-text-muted);
  margin: 0 0 28px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .mit-shell {
    padding: 0 16px;
  }

  .mit-hero {
    padding: 60px 0 40px;
  }

  .mit-hero__title {
    font-size: 36px;
  }

  .mit-hero__lead {
    font-size: 16px;
  }

  .mit-hero__actions {
    flex-direction: column;
  }

  .mit-btn {
    width: 100%;
    justify-content: center;
  }

  .mit-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Services Grid */
  .mit-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* SLA Grid */
  .mit-sla__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Benefits Grid */
  .mit-benefits__grid {
    grid-template-columns: 1fr;
  }

  /* Process Grid */
  .mit-process__steps {
    grid-template-columns: 1fr;
  }

  .mit-step__arrow {
    display: none;
  }

  /* Tech Grid */
  .mit-tech__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  /* Pricing Grid */
  .mit-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Section Headers */
  .mit-section__header h2 {
    font-size: 32px;
  }

  .mit-section__header p {
    font-size: 14px;
  }

  /* CTA Final */
  .mit-cta__content h2 {
    font-size: 32px;
  }

  .mit-cta__content p {
    font-size: 14px;
  }

  /* Content */
  .mit-content__body {
    padding: 20px;
  }

  /* Spacing */
  .mit-services,
  .mit-sla,
  .mit-benefits,
  .mit-process,
  .mit-tech,
  .mit-pricing,
  .mit-faq,
  .mit-cta-final {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  .mit-hero__title {
    font-size: 28px;
  }

  .mit-hero__lead {
    font-size: 14px;
  }

  .mit-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mit-stat {
    padding: 12px;
    flex-direction: column;
    text-align: center;
  }

  .mit-services__grid,
  .mit-sla__grid,
  .mit-pricing__grid {
    grid-template-columns: 1fr;
  }

  .mit-tech__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mit-section__header h2 {
    font-size: 24px;
  }

  .mit-cta__content h2 {
    font-size: 24px;
  }

  .mit-btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .mit-service__card,
  .mit-pricing__card {
    padding: 16px;
  }
}


/* === single-layanan.css === */
/* Modern Gradient Divider */
.promo-fullblend-cards {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, #0ea5e9 0%, #10b981 50%, #6366f1 100%);
  color: #fff;
  /* pull up closer to previous section */
  margin-top: -2.8rem; /* moved up further */
  padding: 0.8rem 0 1rem 0; /* tighter vertical spacing */
  position: relative;
  overflow: hidden; /* prevent horizontal scroll */
}
.promo-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  padding-inline: max(12px, env(safe-area-inset-left, 12px));
  text-align: center; /* center lead and CTA */
  box-sizing: border-box;
}
.promo-section__lead {
  display: block;
  max-width: 980px;
  margin: 0 auto 1rem auto;
  color: rgba(236,255,244,0.92);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  text-align: center;
}
.promo-cards__title {
  text-align: center;
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.promo-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 1fr; /* ensure cards stretch to equal heights */
  gap: clamp(1rem, 1.5vw, 2rem);
  max-width: min(1180px, calc(100% - 2rem));
  width: 100%;
  margin: 0 auto 2.6rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow: visible;
  align-items: stretch;
  justify-items: stretch; /* ensure children fill each column */
  grid-auto-columns: 1fr;
}

.promo-cards__grid > .promo-card {
  width: 100%;
  align-self: stretch;
  justify-self: stretch;
}

/* extra mobile safety: force single column on very small screens */
@media (max-width: 420px) {
  .promo-cards__grid { grid-template-columns: 1fr; max-width: 100%; padding: 0 12px; gap: 0.9rem; width:100% }
  .promo-fullblend-cards { overflow-x: hidden; padding-left:12px; padding-right:12px; margin-left:0; margin-right:0 }
  .promo-section__inner { padding-left:0.5rem; padding-right:0.5rem }
  .promo-card { word-break: break-word; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 12px)); min-height: 150px; align-self: stretch; }
  /* safety: force no horizontal overflow on body within promo */
  .promo-fullblend-cards, .promo-fullblend-cards * { box-sizing: border-box; }
}
.promo-card__icon {
  /* small circular icon used inside cards */
  background: rgba(10,70,46,0.32);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aef3c9;
  margin-bottom: 1rem;
  box-shadow: 0 6px 18px rgba(2, 20, 16, 0.32), inset 0 1px 0 rgba(255,255,255,0.02);
}
.promo-card__icon svg { width: 28px; height: 28px; }
.promo-card__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #e6fff4;
  text-align: center;
}
.promo-card__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.7rem;
  width: 100%;
  margin-top: 1.2rem;
}
.promo-mini {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 4px 14px rgba(3, 20, 16, 0.28);
  border: 1px solid rgba(16,185,129,0.06);
  min-height: 44px;
  min-width: 0; /* allow shrinking inside grid */
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.promo-mini__icon { font-size: 1.05rem; color: #bff6d1; display:inline-block; width:22px; text-align:center }
.promo-mini__label { font-size: 0.95rem; color: #e6fff4; font-weight:600 }

.promo-cards__cta {
  display: inline-block;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  color: #07221a;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.95rem 2.2rem;
  border-radius: 28px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(16,185,129,0.12);
  transition: background 0.18s, transform 0.18s;
  margin: 1.6rem auto 0 auto;
  box-sizing: border-box;
  z-index: 4;
  /* ensure button content wraps and doesn't overflow */
  overflow: visible;
  white-space: normal;
  text-align: center;
}
@media (max-width: 700px) {
  .promo-cards__cta { display:block; width: min(420px, calc(100% - 2rem)); max-width: 100%; padding: 0.85rem 1rem; box-sizing: border-box; }
}
@media (max-width: 420px) {
  .promo-cards__cta { width: calc(100% - 2rem); padding: 0.78rem 0.9rem; }
}

.promo-cards__cta:hover {
  background: linear-gradient(90deg, #06b6d4 0%, #10b981 100%);
  transform: translateY(-2px) scale(1.03);
}
@media (max-width: 1100px) {
  .promo-cards__grid { max-width: 980px; gap: 1.6rem; }
}
@media (max-width: 900px) {
  .promo-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .promo-cards__title { font-size: 1.3rem; }
  .promo-card__features { grid-template-columns: repeat(2, 1fr); gap:0.6rem }
}
@media (max-width: 700px) {
  .promo-card__title { font-size: 1rem; }
  .promo-fullblend-cards { padding: 0.6rem 0; margin-top: -1.4rem }
  .promo-cards__cta { display:block; width: calc(100% - 2rem); max-width: 420px; margin: 0.8rem auto 0 auto; }
  .promo-card__features { grid-template-columns: repeat(2, 1fr); }
  .promo-mini { padding: 0.5rem; min-height: 40px }
  .promo-card { padding: 1.1rem; min-height: 0 }
  .promo-card__icon { width: 52px; height: 52px }
}
@media (max-width: 480px) {
  .promo-section__inner { padding: 0 0.75rem }
  .promo-cards__title { font-size: 1.05rem; margin-bottom: 0.6rem }
  .promo-section__lead { font-size: 0.95rem; margin-bottom: 0.6rem }
  .promo-cards__grid { grid-template-columns: 1fr; gap: 1rem }
  .promo-card { padding: 1rem 0.9rem 1.2rem; min-height: 140px; border-radius: 14px }
  .promo-card__icon { width: 48px; height: 48px }
  .promo-card__features { grid-template-columns: repeat(2, 1fr); gap: 0.5rem }
  .promo-mini { padding: 0.45rem; min-height: 40px }
  .promo-mini__label { font-size: 0.92rem }
  .promo-cards__cta { width: calc(100% - 1.5rem); padding: 0.85rem; margin-top: 0.6rem }
  .promo-fullblend-cards { margin-top: -1.0rem; padding-top: 0.5rem; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 12px)) }
}
/**
 * Single Layanan Template Styles
 * Modern service detail page with dark blue-green theme
 */

/* Main Container */
.layanan-single {
  width: 100%;
  background: #0a0f1a;
}

/* ===== HERO SECTION ===== */
.layanan-hero {
  position: relative;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(16, 185, 129, 0.35), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(14, 116, 144, 0.35), transparent 55%),
    linear-gradient(135deg, #0b1a2b 0%, #0f2f25 52%, #0a241d 100%);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 0 0 32px 32px;
  overflow: hidden;
  margin-bottom: 4rem;
}

.layanan-hero__bg {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.03) 50%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(16, 185, 129, 0.05) 2px, rgba(16, 185, 129, 0.05) 4px);
  opacity: 0.3;
  pointer-events: none;
}

.layanan-hero__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Breadcrumb */
.layanan-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
}

.layanan-hero__breadcrumb a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.layanan-hero__breadcrumb a:hover {
  color: #6ee7b7;
}

.layanan-hero__breadcrumb .separator {
  color: #475569;
}

.layanan-hero__breadcrumb .current {
  color: #e2fdf2;
  font-weight: 600;
}

/* Hero Content Layout */
.layanan-hero__content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.layanan-hero__left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.layanan-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  color: #ecfdf5;
  margin: 0;
  letter-spacing: -0.5px;
}

.layanan-hero__excerpt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: #c6f6e5;
}

.layanan-hero__excerpt p {
  margin: 0;
}

/* Highlights Section (After Hero) */
.layanan-highlights {
  margin-top: -2.25rem;
  margin-bottom: 3rem;
}

.layanan-highlights__container {
  max-width: 1280px;
  margin: 0 auto 0 2.5rem;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  background: linear-gradient(120deg, rgba(16,185,129,0.04) 0%, rgba(10,36,29,0.10) 100%);
  border-radius: 24px;
  box-shadow: 0 2px 16px rgba(16,185,129,0.06);
  transition: box-shadow 0.2s;
}
.layanan-highlights__container:hover {
  box-shadow: 0 8px 32px rgba(16,185,129,0.13);
}

.layanan-highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  padding: 2rem 1.5rem 2rem 2.5rem;
  background: linear-gradient(120deg, rgba(16,185,129,0.10) 0%, rgba(10,36,29,0.85) 100%);
  border: 1.5px solid rgba(110, 231, 183, 0.18);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(16,185,129,0.10), 0 1.5px 8px rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
  margin-right: 1.5rem; /* geser ke kanan */
}

.layanan-meta-item {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(16,185,129,0.07);
  padding: 1.2rem 1.1rem 1.2rem 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
  border: 1px solid rgba(110,231,183,0.10);
  position: relative;
}
.layanan-meta-item:hover {
  box-shadow: 0 6px 24px rgba(16,185,129,0.18), 0 2px 8px rgba(0,0,0,0.10);
  transform: translateY(-2px) scale(1.025);
  z-index: 2;
}
.layanan-meta-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(110,231,183,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
  font-size: 1.3rem;
  box-shadow: 0 1.5px 6px rgba(16,185,129,0.10);
}

/* Meta Items */
.layanan-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(15, 118, 110, 0.12);
  border: 1px solid rgba(110, 231, 183, 0.2);
  border-radius: 16px;
}

.layanan-meta-item {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.layanan-meta-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.layanan-meta-item__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.layanan-meta-item__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.layanan-meta-item__value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  color: #e2fdf2;
  font-weight: 700;
}

.layanan-meta-item__note {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* Hero Actions */
.layanan-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.layanan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.layanan-btn--primary {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.layanan-btn--primary:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.layanan-btn--secondary {
  background: rgba(15, 118, 110, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.3);
}

.layanan-btn--secondary:hover {
  background: rgba(15, 118, 110, 0.25);
  border-color: rgba(110, 231, 183, 0.5);
  transform: translateY(-2px);
}

.layanan-btn--large {
  padding: 1.2rem 2rem;
  font-size: 1rem;
}

.layanan-btn svg {
  flex-shrink: 0;
}

/* Hero Image */
.layanan-hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layanan-hero__image {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(8, 15, 30, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.layanan-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

.layanan-hero__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Promo card shape adjustments: less 'lonjong', more rounded + responsive safety */
.promo-card {
  border-radius: 22px !important;
  padding: 1.15rem 0.9rem 1.3rem !important; /* extra bottom padding to avoid cutoff */
  padding-bottom: calc(1.3rem + env(safe-area-inset-bottom, 12px)) !important;
  min-height: 140px !important; /* increased min-height for mobile comfort */
  box-shadow: 0 8px 18px rgba(2,20,16,0.42) !important;
  overflow: hidden !important;
  position: relative;
  box-sizing: border-box;
  max-width: 100% !important;
}
.promo-card__icon { width:56px; height:56px; margin-bottom:0.8rem }
.promo-card__title { font-size:1rem }
@media (max-width: 700px) {
  .promo-card { min-height: 110px; padding: 1rem }
  .promo-card__icon { width:48px; height:48px }
}

/* Ensure cards fill their grid cells and not narrow columns */
.promo-cards__grid { align-items: stretch; justify-items: stretch }
.promo-cards__grid > .promo-card { align-self: stretch; justify-self: stretch; width:100% }

/* ===== MAIN CONTENT SECTION ===== */
.layanan-content {
  padding: 0 clamp(1.5rem, 5vw, 3rem) 4rem;
  background: #0a0f1a;
}

.layanan-content__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.layanan-content__main {
  grid-column: 1;
}
.layanan-sidebar {
  grid-column: 2;
}

.layanan-content__main {
  min-width: 0;
}

/* Responsive: stack content on small screens */
@media (max-width: 900px) {
  .layanan-content__container {
    grid-template-columns: 1fr; /* single column */
    gap: 1.25rem;
    padding: 0 1rem;
  }
  .layanan-content__main { grid-column: 1; order: 1; }
  .layanan-sidebar { grid-column: 1; order: 2; margin-top: 0.75rem; }
  .layanan-content__body { font-size: 0.98rem; }
}

@media (max-width: 480px) {
  .layanan-content__container { padding: 0 0.75rem; gap: 1rem; }
  .layanan-sidebar { margin-top: 0.6rem; }
  .layanan-content__body { font-size: 0.96rem; line-height: 1.7 }
}

/* =========== Fixes & additional responsive safeguards ===========
   - Remove stray CSS that previously broke the stylesheet
   - Stack hero on medium/smaller screens to avoid overlap/clip
   - Disable sticky sidebar on small screens and constrain its height on large
   - Breadcrumb scroll safety, prevent horizontal overflow site-wide
*/
@media (max-width: 900px) {
  /* stack hero content and reduce padding so hero won't push chips/menu */
  .layanan-hero { padding: clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem); border-radius: 0 0 20px 20px; }
  .layanan-hero__content { grid-template-columns: 1fr; gap: clamp(12px,3vw,24px); }
  .layanan-hero__left { order: 1; }
  .layanan-hero__right { order: 2; margin: 0 auto; max-width: 360px; }
  .layanan-hero__title { font-size: clamp(1.6rem,6vw,2.4rem); word-break: break-word; hyphens: auto; }
  .layanan-hero__excerpt { text-align: left; }

  /* avoid horizontal overflow from highlights area */
  .layanan-highlights__container { margin-right: 0; padding-left: 1rem; padding-right: 1rem; }
  .layanan-highlights__grid { padding-left: 0; padding-right: 0; }

  /* disable sticky sidebar on small screens to prevent overlaying content */
  .layanan-sidebar { position: static; top: auto; max-height: none; overflow: visible; }
}

/* small devices: stack feature items & make CTAs full-width */
@media (max-width: 600px) {
  .layanan-feature-item { flex-direction: column; gap: .6rem; padding: .8rem; }
  .layanan-feature-item__text { font-size: 0.92rem; }
  .layanan-hero__actions { flex-direction: column; align-items: stretch; }
  .layanan-btn { width: 100%; justify-content: center; }
  .layanan-hero__breadcrumb { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
}

/* Mobile: make the Highlights section full-bleed (full blend) while keeping content readable
   - section becomes full-width viewport bleed
   - inner container background removed so blend spans edge-to-edge
   - scoped to small screens to avoid changing desktop visuals */
@media (max-width: 720px) {
  /* reliable full-bleed using margin trick + safe-area insets */
  .layanan-single { overflow-x: visible; }
  .layanan-highlights {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 8px 0 12px !important; /* slightly reduced vertical padding */
    background: linear-gradient(180deg, rgba(6,182,212,0.06), rgba(16,185,129,0.04)) !important;
    border-radius: 0 !important; /* full-bleed edge */
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* inner container removes extra horizontal padding so cards sit flush to edges */
  .layanan-highlights__container {
    width: 100% !important;
    max-width: none !important;
    /* remove horizontal inset so cards can sit flush to viewport edges; still respect device safe-area */
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important; /* inner cards will retain their own radius */
  }

  /* remove any extra grid padding and make each meta-item span full width */
  .layanan-highlights__grid {
    gap: 10px;
    padding: 0;
    grid-template-columns: 1fr !important;
    margin: 0 !important;                /* remove extra right/left spacing on small screens */
    width: 100% !important;             /* ensure grid fills the viewport container */
    box-sizing: border-box;
  }
  .layanan-meta-item { background: rgba(255,255,255,0.02); padding: 14px; border-radius: 12px; width:100%; box-sizing:border-box; margin: 0; }

  /* ensure background reaches device edge on devices with notch */
  .layanan-highlights { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); }

  /* Make sidebar cards & the features block full-bleed on small screens */
  .layanan-card,
  .layanan-card.layanan-card--testimonial,
  .layanan-features {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(1rem + env(safe-area-inset-left, 12px)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right, 12px)) !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background-clip: padding-box; /* avoid halo from box-shadow when flush */
  }

  /* reduce inner padding for features block when full-bleed so content isn't cramped */
  .layanan-features { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* preserve vertical spacing between stacked full-bleed cards */
  .layanan-card + .layanan-card,
  .layanan-features + .layanan-card,
  .layanan-card + .layanan-features {
    margin-top: 1rem !important;
  }
}


/* constrain sidebar on large viewports so it never overlaps hero/chips */
@media (min-width: 901px) {
  .layanan-sidebar { max-height: calc(100vh - var(--headH, 88px) - 64px); overflow: auto; -webkit-overflow-scrolling: touch; }
}

/* general safety: prevent any accidental horizontal overflow */
body, .layanan-single { overflow-x: hidden; }

.layanan-content__body h3 {
  font-size: 1.4rem;
}

.layanan-content__body h4 {
  font-size: 1.2rem;
}

.layanan-content__body p {
  margin-bottom: 1.2rem;
}

.layanan-content__body ul,
.layanan-content__body ol {
  margin: 1.2rem 0;
  padding-left: 1.5rem;
}

.layanan-content__body li {
  margin-bottom: 0.6rem;
  color: #cbd5e1;
}

.layanan-content__body a {
  color: #6ee7b7;
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 231, 183, 0.3);
  transition: all 0.3s ease;
}

.layanan-content__body a:hover {
  color: #34d399;
  border-bottom-color: #34d399;
}

/* Ensure headings inside article are visible on dark background */
.layanan-content__body h2,
.layanan-content__body h3,
.layanan-content__body h4,
.layanan-content__body h5,
.layanan-content__body h6 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* override clipped/gradient text */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

/* links inside headings should also be white */
.layanan-content__body h2 a,
.layanan-content__body h3 a,
.layanan-content__body h4 a,
.layanan-content__body h5 a,
.layanan-content__body h6 a {
  color: #ffffff !important;
  border-bottom: none !important;
}

/* Slightly increase h2 weight/size for hierarchy */
.layanan-content__body h2 { font-size: 1.6rem; font-weight:800; }
.layanan-content__body h3 { font-size: 1.3rem; font-weight:700; }

/* Features Section */
.layanan-features {
  margin-top: 3rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.layanan-features__title {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 1.5rem 0;
}

.layanan-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* ===== LAYANAN PRICING CARDS (Silver → Diamond) — responsive fixes to prevent overlap ===== */
/* DM + layanan aliases so page-specific CSS overrides global rules */
.layanan-pricing, .dm-section--pricing { margin: 2.25rem 0; padding-top: 40px; scroll-margin-top: 120px; position:relative; z-index:2; overflow:visible; }

/* Pricing header: centered large title + centered subtitle (matches design) */
.layanan-pricing__head {
  text-align: center;
  padding: 3.5rem 1rem 2.25rem;
  margin-bottom: 1.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-radius: 8px;
}
.layanan-pricing__title, .dm-section--pricing .dm-section__head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 6vw, 64px);
  margin: 0 0 0.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  /* force plain white and remove any background-clip/gradient overrides */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #ffffff !important;
  text-shadow: 0 6px 20px rgba(2,6,23,0.45);
  transition: transform .18s ease;
}
.layanan-pricing__title:hover { transform: translateY(-2px); }
.layanan-pricing__subtitle {
  max-width: 980px;
  margin: 0 auto;
  color: rgba(255,255,255,0.85);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .layanan-pricing__head { padding: 2.25rem 1rem 1.25rem; }
  .layanan-pricing__title { font-size: clamp(26px, 6vw, 36px); }
  .layanan-pricing__subtitle { font-size: 15px; }
}

/* responsive grid: allow cards to wrap instead of forcing 4 equal columns */
.layanan-pricing-grid, .dm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(0.75rem, 1.2vw, 1.6rem);
  align-items: start;            /* align cards to top so taller cards don't push neighbors */
  align-content: start;          /* ensure grid rows start at the top (avoid vertical centering that can look broken) */
  justify-items: stretch;        /* make grid items stretch to equal width/height */
  grid-auto-rows: 1fr;           /* keep rows consistent and prevent uneven wrapping */
  grid-auto-flow: row dense;     /* allow denser packing when content varies */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  isolation: isolate;            /* create a stacking context so transforms/z-index don't leak */
}

/* card container — reduced min-height and consistent padding to avoid overflow */
.layanan-pricing-card, .dm-pricing-card {
  position: relative;
  z-index: 1;                    /* ensure cards sit above decorative/hero elements */
  min-height: 360px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,12,18,0.7), rgba(13,17,26,0.6));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 14px 40px rgba(2,6,23,0.5);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  overflow: hidden; /* prevent large children from spilling out */
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, border-color .28s;
  break-inside: avoid;          /* keep cards intact in any columned context */
  min-width: 0;                 /* allow inner flex items to shrink properly */
}
/* subtle animated overlay for hover */
.layanan-pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(600px 240px at 10% 10%, rgba(255,255,255,0.02), transparent 20%), radial-gradient(400px 160px at 90% 90%, rgba(124,58,237,0.02), transparent 18%);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .38s cubic-bezier(.2,.9,.2,1), transform .38s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
  z-index: 0;
}

.layanan-pricing-card:hover, .dm-pricing-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 48px 120px rgba(2,6,23,0.66);
}
.layanan-pricing-card:hover::after { opacity: 1; transform: scale(1); }

/* badge / pill micro-interactions */
.layanan-pricing-card .lp-badge { transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s ease, opacity .32s ease; transform-origin: center; }
.layanan-pricing-card:hover .lp-badge { opacity:1; pointer-events:auto; }
.layanan-pricing-card:hover .lp-badge { transform: translateY(-6px) scale(1.06); box-shadow: 0 22px 60px rgba(255,65,90,0.16); }

.layanan-pricing-card .lp-tier-label { transition: transform .28s ease, box-shadow .28s ease; }
.layanan-pricing-card:hover .lp-tier-label { transform: translateY(-3px); }

/* price emphasis */
.layanan-pricing-card .lp-price__figure { transition: transform .28s ease, color .28s ease, text-shadow .28s ease; }
.layanan-pricing-card:hover .lp-price__figure { transform: translateY(-2px) scale(1.03); text-shadow: 0 8px 32px rgba(0,0,0,0.5); }

/* feature items lift slightly on hover */
.lp-features li { transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease; }
.layanan-pricing-card:hover .lp-features li { transform: translateY(-4px); }

/* CTA micro-interaction */
.layanan-cta-btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.layanan-pricing-card:hover .layanan-cta-btn--outline { transform: translateY(-3px); background: rgba(255,255,255,0.06); box-shadow: 0 8px 28px rgba(0,0,0,0.25); }

/* small accessible preference */
@media (prefers-reduced-motion: reduce) {
  .layanan-pricing-card, .layanan-pricing-card * { transition: none !important; animation: none !important; }
}

/* badge / popular */
.lp-badge, .dm-pricing-card__badge { position:absolute; left:50%; transform:translateX(-50%); top:14px; z-index:3; padding:8px 18px; border-radius:999px; font-weight:900; font-size:.72rem; color:#fff; background: rgba(0,0,0,0.25); box-shadow:0 8px 30px rgba(0,0,0,0.18); }

/* Badge colors per tier (override default) */
.layanan-pricing-card.layanan-tier-silver .lp-badge { background: linear-gradient(90deg,#60a5fa 0%,#6366f1 100%); color: #071430; box-shadow: 0 10px 30px rgba(99,102,241,0.12); }
.layanan-pricing-card.layanan-tier-gold .lp-badge   { background: linear-gradient(90deg,#ffd27a 0%,#fb923c 100%); color: #081018; box-shadow: 0 10px 30px rgba(251,146,60,0.12); }
.layanan-pricing-card.layanan-tier-platinum .lp-badge { background: linear-gradient(90deg,#c7b3ff 0%,#a78bfa 100%); color: #0b0b14; box-shadow: 0 10px 30px rgba(124,58,237,0.12); }
.layanan-pricing-card.layanan-tier-diamond .lp-badge { background: linear-gradient(90deg,#7dd3fc 0%,#06b6d4 100%); color: #04202a; box-shadow: 0 10px 30px rgba(6,182,212,0.12); }

/* MOST POPULAR badge (forced red) */
.layanan-pricing-card.is-popular .lp-badge { background: linear-gradient(90deg,#ff6b6b 0%, #ff3b30 100%); color: #ffffff; box-shadow: 0 16px 40px rgba(255,59,48,0.18); border: 1px solid rgba(255,59,48,0.12); }

/* fallback: keep strong contrast for any custom tier using white text */
.layanan-pricing-card[class*="layanan-tier-"] .lp-badge { color: #ffffff; }

.layanan-pricing-card.is-popular, .dm-pricing-card--popular { border:1px solid rgba(255,65,152,0.18); box-shadow:0 36px 80px rgba(99,102,241,0.12); background:linear-gradient(180deg, rgba(35,9,21,0.9), rgba(22,6,30,0.95)); transform:translateY(-6px); }

.lp-card-header, .dm-pricing-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; /* ensure badge doesn't overlap label/price */ padding-top:18px; min-height:150px; }
.lp-tier-label, .dm-pricing-card__name { font-weight:900;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.02);color:#e6edf3;font-size:.95rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02) }

/* ensure price container can shrink and won't force overflow */
.lp-price-wrap, .dm-pricing-card__price { min-width:0; max-width:100%; flex-shrink:1; display:flex; align-items:baseline; justify-content:center; gap:.5rem; }

/* responsive, clamped font-size to prevent overflow */
.layanan-single .lp-price-main, .layanan-single .lp-price__amount, .layanan-single .lp-price__amount span, .layanan-single .dm-pricing-card__amount, .dm-single .dm-pricing-card__amount {
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight:900;
  color:#fff;
  letter-spacing:-0.02em;
  line-height:1;
  /* allow long numbers/text to break instead of forcing the card to overflow */
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.layanan-single .lp-price-sale, .layanan-single .dm-pricing-card__amount--sale { font-size: clamp(1.2rem, 2.8vw, 2.2rem); color:#ff6b6b; font-weight:900 }
.layanan-single .lp-price-original, .layanan-single .dm-pricing-card__amount--original { font-size:.9rem; color:rgba(255,255,255,0.25); text-decoration:line-through; margin-right:8px }
.layanan-single .lp-period, .layanan-single .dm-pricing-card__period { font-size:.92rem; color:rgba(255,255,255,0.55); font-weight:700; margin-left:8px }

.lp-features, .dm-pricing-card__features { margin:0;padding:0;list-style:none;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:14px }
.lp-features li, .dm-pricing-card__features li { display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0;color:#dbeafe;font-weight:600;font-size:.96rem;max-width:360px;margin:0 auto }
.lp-features li .lp-check, .dm-pricing-card__features li svg { width:18px;height:18px;color:#ff7aa2;flex-shrink:0;margin-top:0;margin-right:8px }
.lp-features .muted, .dm-pricing-card__features .muted { color:#94a3b8;font-weight:700;text-align:center }

.lp-card-cta, .dm-pricing-card__cta { text-align:center;margin-top:8px }

/* modern pill CTA for `Pilih Paket` */
.layanan-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  cursor: pointer;
  min-width: 140px;
  box-sizing: border-box;
}

.layanan-cta-btn--highlight {
  background: linear-gradient(90deg,#ff6bcb 0%,#ff415a 60%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(255,65,90,0.12);
}
.layanan-cta-btn--highlight:hover { transform: translateY(-3px); box-shadow: 0 20px 60px rgba(255,65,90,0.18); }
.layanan-cta-btn--highlight:active { transform: translateY(-1px); }

.layanan-cta-btn--outline {
  background: rgba(255,255,255,0.03);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(4px);
}
.layanan-cta-btn--outline:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.layanan-cta-btn--outline:active { transform: translateY(0); }

.layanan-cta-btn:focus { outline: 3px solid rgba(124,58,237,0.14); outline-offset: 3px; }

@media (max-width:700px) {
  .layanan-cta-btn { width: 100%; min-width: 0; padding: 0.9rem 1rem; }
}

/* reuse existing button tokens (dm-btn / layanan-cta-btn are both supported) */

/* tier accent tweaks (each tier gets its own pill color) */
.layanan-tier-silver .lp-tier-label{background:linear-gradient(90deg,#cbd5e1 0%, #93c5fd 100%);color:#0f1729}
.layanan-tier-gold .lp-tier-label{background:linear-gradient(90deg,#fef3c7 0%, #f59e0b 100%);color:#0b1220}
.layanan-tier-platinum .lp-tier-label{background:linear-gradient(90deg,#e9d5ff 0%, #a78bfa 100%);color:#0b1220}
.layanan-tier-diamond .lp-tier-label{background:linear-gradient(90deg,#dbeafe 0%, #7dd3fc 100%);color:#0b1220}

/* fallback for any custom/non-canonical tiers */
.layanan-pricing-card[class*="layanan-tier-"] .lp-tier-label { opacity: 0.98; }

/* top accent stripe per tier (colored band at top of each pricing card) */
.layanan-pricing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  z-index: 2; /* below badge (badge is z-index:3) */
  pointer-events: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.layanan-pricing-card.layanan-tier-silver::before { background: linear-gradient(90deg,#cbd5e1 0%, #93c5fd 100%); opacity: .12; }
.layanan-pricing-card.layanan-tier-gold::before   { background: linear-gradient(90deg,#fef3c7 0%, #f59e0b 100%); opacity: .14; }
.layanan-pricing-card.layanan-tier-platinum::before { background: linear-gradient(90deg,#e9d5ff 0%, #a78bfa 100%); opacity: .12; }
.layanan-pricing-card.layanan-tier-diamond::before { background: linear-gradient(90deg,#dbeafe 0%, #7dd3fc 100%); opacity: .12; }

/* highlight stripe for popular card */
.layanan-pricing-card.is-popular::before { box-shadow: 0 10px 30px rgba(255,65,152,0.08); transform: translateY(1px); opacity: .18; }

@media (max-width:680px) {
  .layanan-pricing-card::before { height: 8px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
}

/* responsive breakpoints: modern 4-column desktop layout + responsive steps */
@media (min-width:1024px) {
  /* Desktop: limit to maximum 4 cards per row; extra cards wrap to next row */
  .layanan-pricing-grid, .dm-pricing-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: clamp(1rem, 1.2vw, 2rem); }
  .layanan-pricing-card { min-height:420px; padding:32px; height:100%; }
  .layanan-pricing-card.is-popular { /* highlighted by border & shadow only — same size as others */
    transform: translateY(-6px);
    border: 1px solid rgba(255,65,152,0.22);
    box-shadow: 0 42px 100px rgba(99,102,241,0.14);
  }
  .lp-features { border-top:1px solid rgba(255,255,255,0.03); padding-top:16px; margin-top:14px; }
  .layanan-single .lp-price__figure { font-size: clamp(2.2rem, 2.4vw, 4rem); }
  .lp-badge { top:18px; padding:10px 20px; font-size:.8rem }
  /* Desktop: stack header vertically and center content — order: original price, promo price, tier label */
  .lp-card-header, .dm-pricing-card__header { display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:26px; min-height:200px; gap:6px; }
  .lp-price-wrap, .dm-pricing-card__price { order:1; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
  .lp-price-original, .dm-pricing-card__amount--original { order:1; display:block; margin:0; color:rgba(255,255,255,0.45); font-size:1rem; }
  .lp-price__amount, .dm-pricing-card__amount { order:2; display:block; text-align:center; }
  .lp-tier-label, .dm-pricing-card__name { order:3; margin-top:6px; }
  /* ensure figure remains centered and doesn't force overflow */
  .layanan-single .lp-price__figure { display:block; text-align:center; line-height:1; }

  /* when there's NO promo, nudge the single (normal) price down slightly for visual balance */
  .layanan-pricing-card.no-promo .lp-price__amount { margin-top: 18px; }
  /* slightly reduce size if it still wraps to multiple lines */
  .layanan-pricing-card.no-promo .lp-price__figure { font-size: clamp(1.6rem, 2.2vw, 3.2rem); }

}
@media (min-width:900px) and (max-width:1199px) {
  .layanan-pricing-grid, .dm-pricing-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width:899px) {
  .layanan-pricing-grid, .dm-pricing-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: clamp(0.6rem, 1.2vw, 1.2rem); }
  .layanan-single .lp-price__figure { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
}
@media (max-width:700px) {
  .layanan-pricing-grid, .dm-pricing-grid { grid-template-columns: 1fr; }
  .layanan-pricing-card, .dm-pricing-card { min-height:auto; padding:18px; }
  .layanan-single .dm-pricing-card__amount { font-size: 1.45rem; }
  .lp-features li, .dm-pricing-card__features li { font-size:.95rem }
  .lp-badge, .dm-pricing-card__badge { top:10px;padding:6px 12px;font-size:.7rem }

  /* MOBILE: stack header and center price area so the struck (original) price sits centered under the badge */
  .layanan-pricing-card .lp-card-header,
  .dm-pricing-card .dm-pricing-card__header { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding-top:22px; min-height:140px; }

  .layanan-pricing-card .lp-price-wrap,
  .dm-pricing-card .dm-pricing-card__price { justify-content:center; width:100%; gap:8px; flex-direction:column; align-items:center; }

  .layanan-pricing-card .lp-price-original,
  .dm-pricing-card__amount--original { display:block; margin:0 auto; color:rgba(255,255,255,0.55); font-size:.95rem; margin-bottom:6px; }

  .layanan-pricing-card .lp-price__amount,
  .dm-pricing-card__amount { display:block; width:100%; text-align:center; }

  .layanan-pricing-card .lp-tier-label { margin-bottom:4px; }
}

.layanan-feature-item {
  display: flex;
  gap: 1rem;
  align-items: center; /* vertically center icon + text */
  justify-content: center; /* center content horizontally */
  padding: 1rem;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
}

.layanan-feature-item:hover {
  background: rgba(15, 118, 110, 0.18);
  border-color: rgba(110, 231, 183, 0.3);
  transform: translateX(4px);
}

.layanan-feature-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.layanan-feature-item__icon svg {
  width: 20px;
  height: 20px;
}

/* Layanan features title: ensure high contrast on dark backgrounds */
.layanan-features__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.layanan-feature-item__text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #e2fdf2;
  font-weight: 600;
  line-height: 1.5;
  text-align: center; /* center the text content */
}

/* Chat-style FAQ (modern chat bubbles) */
.layanan-faq{
  margin-top:28px;
  padding:22px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border:1px solid rgba(255,255,255,0.02);
}
/* Make the FAQ section title visible and centered on dark backgrounds */
.layanan-faq #layanan-faq-title{ color: #ffffff; text-align: center; }
.layanan-faq__list{display:flex;flex-direction:column;gap:14px;max-width:980px;margin:0 auto}
.layanan-faq__item{position:relative;padding:6px 0}
.layanan-faq__item summary{list-style:none}
.layanan-faq__item summary::-webkit-details-marker{display:none}
.layanan-faq__q{display:block;margin:0 auto;text-align:left;background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);color:#fff;padding:12px 16px;border-radius:18px 18px 18px 6px;box-shadow:0 12px 30px rgba(2,6,23,0.12);max-width:78%;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;position:relative}
.layanan-faq__q::before{content:"Q";position:absolute;left:-44px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg,#34d399 0%,#10b981 100%);color:#07221a;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 6px 16px rgba(2,6,23,0.12);font-size:.85rem}
.layanan-faq__q::after{content:"";position:absolute;left:16px;bottom:-6px;width:12px;height:12px;background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);transform:rotate(45deg);border-radius:2px;box-shadow:0 6px 16px rgba(2,6,23,0.06)}
.layanan-faq__a{display:block;background:#fff;color:#0f1724;padding:12px 16px;border-radius:18px 18px 6px 18px;box-shadow:0 10px 30px rgba(2,6,23,0.06);max-width:78%;margin-left:auto;margin-right:auto;transition:max-height .28s ease,opacity .18s ease;overflow:hidden;max-height:0;opacity:0;position:relative}
/* alignment helpers: answers can be left / center / right depending on .layanan-faq__item class */
.layanan-faq__item.align-left .layanan-faq__a{margin-left:0;margin-right:auto}
.layanan-faq__item.align-right .layanan-faq__a{margin-left:auto;margin-right:0}
.layanan-faq__item.align-center .layanan-faq__a{margin-left:auto;margin-right:auto}

/* avatar positioning for different alignments */
.layanan-faq__item.align-left .layanan-faq__a::after{left:-44px;right:auto}
.layanan-faq__item.align-right .layanan-faq__a::after{right:-44px;left:auto}
.layanan-faq__item.align-center .layanan-faq__a::after{display:none}

details[open] .layanan-faq__a{max-height:1200px;opacity:1;padding-top:12px;padding-bottom:12px}
.layanan-faq__a::after{content:"A";position:absolute;right:-44px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg,#f3f4f6 0%,#e6edf3 100%);color:#0b1220;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 6px 16px rgba(2,6,23,0.06);font-size:.85rem}
.layanan-faq__q:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(2,6,23,0.12)}
summary:focus-visible{outline:3px solid rgba(79,140,255,0.28);outline-offset:6px;border-radius:10px}
@media(max-width:720px){.layanan-faq{padding:16px}.layanan-faq__q,.layanan-faq__a{max-width:100%}.layanan-faq__q::before,.layanan-faq__a::after{display:none}.layanan-faq__q::after,.layanan-faq__a::before{display:none}}

/* ===== SIDEBAR ===== */
.layanan-sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.layanan-card {
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 16px;
  padding: 1.8rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.layanan-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 1rem 0;
}

.layanan-card__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.layanan-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

/* ===== All‑device responsive polish (large → tablet → mobile) ===== */
.layanan-single * { box-sizing: border-box; }

@media (min-width:1400px) {
  :root { --layanan-max-width: 1400px; }
  .layanan-hero__container,
  .layanan-content__container,
  .layanan-pricing-grid { max-width: var(--layanan-max-width); }

  .layanan-hero {
    padding: clamp(4rem, 5.2vw, 6rem);
    border-radius: 0 0 36px 36px;
  }
  .layanan-hero__content { grid-template-columns: 1.45fr 1fr; gap: clamp(3rem, 4vw, 5rem); }
  .layanan-hero__right { max-width: 520px; }

  .layanan-content__container { grid-template-columns: 1fr minmax(320px, 420px); gap: clamp(2.5rem, 3vw, 5rem); }
  .layanan-sidebar { top: calc(var(--headH, 88px) + 12px); }

  .layanan-pricing-grid { grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 2rem; }
  .layanan-pricing-card { min-height: 520px; padding: 36px; }
  .layanan-features__grid { grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 1.25rem; }
}

@media (min-width:1200px) and (max-width:1399px) {
  .layanan-content__container { grid-template-columns: 1fr minmax(300px, 380px); }
  .layanan-hero__content { grid-template-columns: 1.25fr 1fr; gap: 2.5rem; }
  .layanan-features__grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .layanan-pricing-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

@media (min-width:900px) and (max-width:1199px) {
  .layanan-content__container { grid-template-columns: 1fr minmax(260px, 340px); gap: 2rem; padding-left: 1rem; padding-right: 1rem; }
  .layanan-hero__content { grid-template-columns: 1fr 0.95fr; gap: 2rem; }
  .layanan-pricing-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (min-width:600px) and (max-width:899px) {
  .layanan-hero__title { font-size: clamp(1.6rem, 5.6vw, 2.4rem); }
  .layanan-feature-item { padding: 0.9rem; }
  .layanan-features__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 1rem; }
  .layanan-highlights__container { padding-left: 1rem; padding-right: 1rem; }
  .layanan-card { padding: 1.2rem; border-radius: 14px; }
}

@media (max-width:599px) {
  /* single column + full-bleed safety */
  .layanan-content__container { grid-template-columns: 1fr; padding-left: 0.75rem; padding-right: 0.75rem; gap: 1rem; }
  .layanan-hero__content { grid-template-columns: 1fr; gap: 1rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .layanan-pricing-grid { grid-template-columns: 1fr; gap: 0.9rem; max-width: 100%; padding: 0; }
  .layanan-features__grid { grid-template-columns: 1fr; }

  /* keep sidebar cards & fitur full-bleed on small phones */
  .layanan-card,
  .layanan-card.layanan-card--testimonial,
  .layanan-features {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    padding-left: calc(1rem + env(safe-area-inset-left, 12px)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right, 12px)) !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .layanan-hero { padding: clamp(2rem, 6vw, 3rem); border-radius: 0 0 14px 14px; }
  .layanan-hero__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .layanan-hero__image { max-width: 560px; margin: 0 auto; }
  .layanan-sidebar { position: static; top: auto; max-height: none; }
  .layanan-meta-item { padding: 12px; gap: 0.8rem; }
  .layanan-content__body { font-size: 0.98rem; line-height: 1.7; }
  .layanan-pricing-card { padding: 16px; border-radius: 12px; }
}

/* tiny devices: tighten spacing and text to avoid wraps */
@media (max-width:420px) {
  .layanan-hero { padding: 1.8rem 0.8rem; }
  .layanan-hero__title { font-size: 1.4rem; }
  .layanan-card__title { font-size: 1.05rem; }
  .layanan-card__desc { font-size: 0.88rem; }
  .layanan-feature-item__text { font-size: 0.92rem; }
  .layanan-pricing-card .lp-price__figure { font-size: clamp(1.2rem, 6vw, 1.9rem); }
}


.layanan-card__btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.layanan-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #6ee7b7;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.layanan-card__link:hover {
  color: #34d399;
}

/* Service List */
.layanan-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.layanan-list-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.1);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.layanan-list-item:hover {
  background: rgba(15, 118, 110, 0.15);
  border-color: rgba(110, 231, 183, 0.25);
  transform: translateX(4px);
}

.layanan-list-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.layanan-list-item__text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #e2fdf2;
  font-weight: 600;
}

/* Testimonial Card */
.layanan-card--testimonial {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(14, 116, 144, 0.1) 100%);
  border: 1px solid rgba(110, 231, 183, 0.2);
}

.testimonial-quote {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #6ee7b7;
}

.testimonial-content {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 1rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(110, 231, 183, 0.15);
}

.testimonial-author strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #e2fdf2;
  font-weight: 700;
}

.testimonial-author span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* ===== CTA SECTION ===== */
.layanan-cta {
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  background: radial-gradient(1000px 400px at 50% 50%, rgba(16, 185, 129, 0.15), transparent 70%),
    linear-gradient(135deg, #0b1a2b 0%, #0f2f25 52%, #0a241d 100%);
  position: relative;
  overflow: hidden;
}

.layanan-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(16, 185, 129, 0.04) 2px, rgba(16, 185, 129, 0.04) 4px);
  opacity: 0.5;
  pointer-events: none;
}

.layanan-cta__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.layanan-cta__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  color: #ecfdf5;
  margin: 0 0 1rem 0;
}

.layanan-cta__subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: #c6f6e5;
  margin: 0 0 2.5rem 0;
}

.layanan-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .layanan-hero__content {
    grid-template-columns: 1fr;
  }

  .layanan-hero__right {
    order: -1;
  }

  .layanan-content__container {
    grid-template-columns: 1fr;
  }

  .layanan-sidebar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .layanan-hero {
    padding: 2.5rem 1.5rem;
    border-radius: 0 0 20px 20px;
    margin-bottom: 2.5rem;
  }

  .layanan-hero__meta {
    padding: 1.2rem;
  }

  .layanan-hero__actions {
    flex-direction: column;
  }

  .layanan-btn {
    width: 100%;
    justify-content: center;
  }

  .layanan-content {
    padding: 0 1.5rem 2.5rem;
  }

  .layanan-features {
    padding: 1.5rem;
  }

  .layanan-features__grid {
    grid-template-columns: 1fr;
  }

  .layanan-card {
    padding: 1.5rem;
  }

  .layanan-cta {
    padding: 2.5rem 1.5rem;
  }

  .layanan-cta__actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .layanan-hero__title {
    font-size: 28px;
  }

  .layanan-meta-item {
    flex-direction: column;
    text-align: center;
  }

  .layanan-btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
  }
}



/* === single-service.css === */
/**
 * Single Service Template Styles
 * Modern service detail page with dark blue-green theme
 */

/* Main Container */
.service-single {
  width: 100%;
  background: #0a0f1a;
}

/* ===== HERO SECTION ===== */
.service-hero {
  position: relative;
  background: radial-gradient(1200px 500px at 50% -10%, rgba(16, 185, 129, 0.35), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(14, 116, 144, 0.35), transparent 55%),
    linear-gradient(135deg, #0b1a2b 0%, #0f2f25 52%, #0a241d 100%);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 0 0 32px 32px;
  overflow: hidden;
  margin-bottom: 4rem;
}

.service-hero__bg {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.03) 50%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(16, 185, 129, 0.05) 2px, rgba(16, 185, 129, 0.05) 4px);
  opacity: 0.3;
  pointer-events: none;
}

.service-hero__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Breadcrumb */
.service-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
}

.service-hero__breadcrumb a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-hero__breadcrumb a:hover {
  color: #6ee7b7;
}

.service-hero__breadcrumb .separator {
  color: #475569;
}

.service-hero__breadcrumb .current {
  color: #e2fdf2;
  font-weight: 600;
}

/* Hero Content Layout */
.service-hero__content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.service-hero__left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.service-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  color: #ecfdf5;
  margin: 0;
  letter-spacing: -0.5px;
}

.service-hero__excerpt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: #c6f6e5;
}

.service-hero__excerpt p {
  margin: 0;
}

/* Meta Items */
.service-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(15, 118, 110, 0.12);
  border: 1px solid rgba(110, 231, 183, 0.2);
  border-radius: 16px;
}

.service-meta-item {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.service-meta-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.service-meta-item__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.service-meta-item__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.service-meta-item__value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  color: #e2fdf2;
  font-weight: 700;
}

/* Hero Actions */
.service-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.service-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.service-btn--primary {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.service-btn--primary:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.service-btn--secondary {
  background: rgba(15, 118, 110, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.3);
}

.service-btn--secondary:hover {
  background: rgba(15, 118, 110, 0.25);
  border-color: rgba(110, 231, 183, 0.5);
  transform: translateY(-2px);
}

.service-btn--large {
  padding: 1.2rem 2rem;
  font-size: 1rem;
}

.service-btn svg {
  flex-shrink: 0;
}

/* Hero Image */
.service-hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-hero__image {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(8, 15, 30, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.service-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

.service-hero__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

/* ===== MAIN CONTENT SECTION ===== */
.service-content {
  padding: 0 clamp(1.5rem, 5vw, 3rem) 4rem;
  background: #0a0f1a;
}

.service-content__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.service-content__main {
  min-width: 0;
}

.service-content__body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #cbd5e1;
}

.service-content__body h2,
.service-content__body h3,
.service-content__body h4 {
  font-family: 'Fraunces', serif;
  color: #ecfdf5;
  margin: 2rem 0 1rem 0;
  font-weight: 700;
}

.service-content__body h2 {
  font-size: 1.8rem;
}

.service-content__body h3 {
  font-size: 1.4rem;
}

.service-content__body h4 {
  font-size: 1.2rem;
}

.service-content__body p {
  margin-bottom: 1.2rem;
}

.service-content__body ul,
.service-content__body ol {
  margin: 1.2rem 0;
  padding-left: 1.5rem;
}

.service-content__body li {
  margin-bottom: 0.6rem;
  color: #cbd5e1;
}

.service-content__body a {
  color: #6ee7b7;
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 231, 183, 0.3);
  transition: all 0.3s ease;
}

.service-content__body a:hover {
  color: #34d399;
  border-bottom-color: #34d399;
}

/* Features Section */
.service-features {
  margin-top: 3rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.service-features__title {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 1.5rem 0;
}

.service-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.service-feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.service-feature-item:hover {
  background: rgba(15, 118, 110, 0.18);
  border-color: rgba(110, 231, 183, 0.3);
  transform: translateX(4px);
}

.service-feature-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.service-feature-item__icon svg {
  width: 20px;
  height: 20px;
}

.service-feature-item__text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #e2fdf2;
  font-weight: 600;
  line-height: 1.5;
}

/* ===== SIDEBAR ===== */
.service-sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.service-card {
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border-radius: 16px;
  padding: 1.8rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.service-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ecfdf5;
  margin: 0 0 1rem 0;
}

.service-card__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.service-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.service-card__btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #6ee7b7;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.service-card__link:hover {
  color: #34d399;
}

/* Service List */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.service-list-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.1);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-list-item:hover {
  background: rgba(15, 118, 110, 0.15);
  border-color: rgba(110, 231, 183, 0.25);
  transform: translateX(4px);
}

.service-list-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  flex-shrink: 0;
}

.service-list-item__text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #e2fdf2;
  font-weight: 600;
}

/* Testimonial Card */
.service-card--testimonial {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(14, 116, 144, 0.1) 100%);
  border: 1px solid rgba(110, 231, 183, 0.2);
}

.testimonial-quote {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #6ee7b7;
}

.testimonial-content {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 1rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(110, 231, 183, 0.15);
}

.testimonial-author strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #e2fdf2;
  font-weight: 700;
}

.testimonial-author span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* ===== CTA SECTION ===== */
.service-cta {
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  background: radial-gradient(1000px 400px at 50% 50%, rgba(16, 185, 129, 0.15), transparent 70%),
    linear-gradient(135deg, #0b1a2b 0%, #0f2f25 52%, #0a241d 100%);
  position: relative;
  overflow: hidden;
}

.service-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(16, 185, 129, 0.04) 2px, rgba(16, 185, 129, 0.04) 4px);
  opacity: 0.5;
  pointer-events: none;
}

.service-cta__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.service-cta__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  color: #ecfdf5;
  margin: 0 0 1rem 0;
}

.service-cta__subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: #c6f6e5;
  margin: 0 0 2.5rem 0;
}

.service-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .service-hero__content {
    grid-template-columns: 1fr;
  }

  .service-hero__right {
    order: -1;
  }

  .service-content__container {
    grid-template-columns: 1fr;
  }

  .service-sidebar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .service-hero {
    padding: 2.5rem 1.5rem;
    border-radius: 0 0 20px 20px;
    margin-bottom: 2.5rem;
  }

  .service-hero__meta {
    padding: 1.2rem;
  }

  .service-hero__actions {
    flex-direction: column;
  }

  .service-btn {
    width: 100%;
    justify-content: center;
  }

  .service-content {
    padding: 0 1.5rem 2.5rem;
  }

  .service-features {
    padding: 1.5rem;
  }

  .service-features__grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 1.5rem;
  }

  .service-cta {
    padding: 2.5rem 1.5rem;
  }

  .service-cta__actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .service-hero__title {
    font-size: 28px;
  }

  .service-meta-item {
    flex-direction: column;
    text-align: center;
  }

  .service-btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
  }
}


/* === single-templates-modern.css === */
/* Modern single template for CPT 'templates' - styles
   File: assets/css/single-templates-modern.css
   Minimal, accessible, responsive and SEO-friendly
*/
:root{--bg:#07171a;--card:#082a24;--muted:#9fb3a7;--accent:#10b981;--accent-2:#06b6d4;--maxw:1180px}

.tpl-shell{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
.tpl-modern{background:var(--bg);color:#e7fff3;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto, 'Space Grotesk'}

.tpl-breadcrumb{font-size:.95rem;color:var(--muted);margin:1rem 0}
.tpl-breadcrumb a{color:var(--muted);text-decoration:none}

/* Hero */
.tpl-hero.modern{padding:2.4rem 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.tpl-hero__inner{display:grid;grid-template-columns:1fr 360px;gap:1.6rem;align-items:center}
@media(max-width:900px){.tpl-hero__inner{grid-template-columns:1fr}}
.tpl-badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:.35rem .7rem;border-radius:999px;color:#06221a;font-weight:800}
.tpl-title{font-size:clamp(1.4rem,3.2vw,2.4rem);margin:.5rem 0}
.tpl-lead{color:var(--muted);margin:0 0 .8rem}

.tpl-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.tpl-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:10px;font-weight:700;text-decoration:none}
.tpl-btn--primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#05221a}
.tpl-btn--ghost{background:transparent;color:var(--accent);border:1px solid rgba(110,231,183,0.08)}

.tpl-hero__media img{width:100%;border-radius:10px;display:block}

/* Features grid */
.tpl-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:.8rem}
@media(max-width:900px){.tpl-features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tpl-features-grid{grid-template-columns:1fr}}
.tpl-feature{background:var(--card);padding:.8rem;border-radius:10px}

/* Gallery */
.tpl-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:900px){.tpl-gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tpl-gallery-grid{grid-template-columns:1fr}}
.tpl-figure img{width:100%;border-radius:8px}

/* Related */
.tpl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.tpl-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tpl-related-grid{grid-template-columns:1fr}}
.tpl-card--small{background:var(--card);padding:.6rem;border-radius:8px;text-align:center}

/* CTA */
.tpl-cta{margin-top:1rem;background:linear-gradient(90deg, rgba(16,185,129,0.04), rgba(6,182,212,0.03));padding:1rem;border-radius:8px}
.tpl-cta__inner{display:flex;align-items:center;justify-content:space-between}
@media(max-width:800px){.tpl-cta__inner{flex-direction:column;align-items:flex-start}}

/* Utility */
.tpl-section{padding:1.2rem 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.tpl-section__head h2{margin:0 0 .6rem}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Focus states */
a:focus{outline:3px solid rgba(16,185,129,0.14);outline-offset:2px}

/* End */

/* === single-templates.css === */
/* Single CPT Templates - Modern, semantic, SEO-friendly
   Path: assets/css/single-templates.css
*/
:root{--bg:#0a0f1a;--card:#071f1a;--muted:#9fb3a7;--accent:#10b981;--accent-2:#06b6d4;--glass:rgba(255,255,255,0.02);--max-w:1140px}

.tpl-page{background:var(--bg);color:#eafff3;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Space Grotesk'}
.tpl-shell{max-width:var(--max-w);margin:0 auto;padding:0 1rem}

/* Breadcrumb */
.tpl-breadcrumb{display:flex;gap:.5rem;color:var(--muted);font-size:.95rem;margin:0 0 .8rem}
.tpl-breadcrumb a{color:var(--muted);text-decoration:none}

/* Hero */
.tpl-hero{padding:2.6rem 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.tpl-hero__grid{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;align-items:start}
@media (max-width:900px){.tpl-hero__grid{grid-template-columns:1fr}}

.tpl-badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06221a;padding:.45rem .75rem;border-radius:999px;font-weight:800}
.tpl-title{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:.6rem 0;color:#eafff3}
.tpl-lead{color:var(--muted);margin:0 0 1rem}

.tpl-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.tpl-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:700}
.tpl-btn--primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06221a}
.tpl-btn--ghost{background:transparent;color:var(--accent);border:1px solid rgba(110,231,183,0.08)}

/* Info Card */
.tpl-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:12px;padding:1rem;border:1px solid rgba(255,255,255,0.02)}
.tpl-card__media img{width:100%;border-radius:8px}
.tpl-price{font-weight:800;color:#eafff3;margin:.8rem 0}

/* Sections and grid */
.tpl-section{padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.tpl-section__head h2{margin:0 0 .6rem;color:#eafff3}
.tpl-content{line-height:1.8;color:#dff6e8}

.tpl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media (max-width:900px){.tpl-features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tpl-features{grid-template-columns:1fr}}
.tpl-feature{background:var(--card);padding:.8rem;border-radius:10px}

.tpl-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media (max-width:900px){.tpl-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tpl-gallery{grid-template-columns:1fr}}
.tpl-figure img{width:100%;border-radius:8px;display:block}

.tpl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.tpl-related-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tpl-related-grid{grid-template-columns:1fr}}
.tpl-card--small{background:var(--card);border-radius:8px;padding:.6rem;text-align:center}
.tpl-card--small img{width:100%;border-radius:6px}

.tpl-cta{background:linear-gradient(90deg, rgba(16,185,129,0.04), rgba(6,182,212,0.03));border-radius:10px;padding:1rem}
.tpl-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
@media (max-width:800px){.tpl-cta__inner{flex-direction:column;align-items:flex-start}}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Small polish */
.tpl-faq details{background:var(--card);padding:.9rem;border-radius:8px;margin-bottom:.6rem}
.tpl-faq summary{cursor:pointer;font-weight:700}

a.tpl-btn:focus, .tpl-card a:focus{outline:3px solid rgba(16,185,129,0.14);outline-offset:2px}

/* End */


/* === taxonomy-format-hero.css === */
/*
 * Single Template Format Taxonomy - Modern Hero & Template Grid
 * Responsive, modern design with gradient backgrounds and smooth animations
 */

/* ==========================================
   Reset & Base
========================================== */
.tf-single-main {
    --tf-color: #667eea;
    --tf-color-light: color-mix(in srgb, var(--tf-color) 20%, white);
    --tf-color-dark: color-mix(in srgb, var(--tf-color) 80%, black);
    background: #0a0a0f;
    color: #e5e7eb;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ==========================================
   Hero Section
========================================== */
.tf-hero {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 20px 0;
    background: #0a0a0f;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

/* Hero Background */
.tf-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.tf-hero__gradient {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    filter: blur(60px);
}

.tf-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 40px 40px;
    opacity: 0.3;
}

/* Animated Orbs */
.tf-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float-orb 20s ease-in-out infinite;
}

.tf-hero__orb--1 {
    width: 400px;
    height: 400px;
    background: var(--tf-color);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.tf-hero__orb--2 {
    width: 300px;
    height: 300px;
    background: color-mix(in srgb, var(--tf-color) 50%, #f093fb);
    bottom: -100px;
    left: -100px;
    animation-delay: 7s;
}

.tf-hero__orb--3 {
    width: 350px;
    height: 350px;
    background: color-mix(in srgb, var(--tf-color) 70%, #00f2fe);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-30px, -30px) scale(1.1); }
    50% { transform: translate(30px, -20px) scale(0.9); }
    75% { transform: translate(-20px, 30px) scale(1.05); }
}

/* Hero Container */
.tf-hero__container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    overflow: visible;
}

/* Hero Content */
.tf-hero__content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.tf-hero__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-pulse 3s ease-in-out infinite;
}

.tf-hero__icon svg {
    width: 100%;
    height: 100%;
    color: var(--tf-color);
    filter: drop-shadow(0 0 20px var(--tf-color));
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.tf-hero__badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--tf-color), var(--tf-color-dark));
    color: #fff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.tf-hero__title {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
    background: linear-gradient(135deg, #fff, var(--tf-color-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-glow 2s ease-in-out infinite alternate;
}

@keyframes title-glow {
    from { filter: drop-shadow(0 0 20px rgba(255,255,255,0.3)); }
    to { filter: drop-shadow(0 0 40px var(--tf-color)); }
}

.tf-hero__subtitle {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 600;
    color: var(--tf-color);
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tf-hero__desc {
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.7;
    color: #9ca3af;
    margin: 0 0 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Feature Chips */
.tf-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.tf-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: #e5e7eb;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.tf-feature-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--tf-color);
    transform: translateY(-2px);
}

.tf-feature-chip svg {
    width: 16px;
    height: 16px;
    color: var(--tf-color);
}

/* Hero Actions */
.tf-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.tf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.tf-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.tf-btn--primary {
    background: linear-gradient(135deg, var(--tf-color), var(--tf-color-dark));
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 40px var(--tf-color-light);
}

.tf-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 60px var(--tf-color);
}

.tf-btn--primary:hover svg {
    transform: translateY(4px);
}

.tf-btn--ghost {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
}

.tf-btn--ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--tf-color);
    transform: translateY(-2px);
}

.tf-btn--ghost:hover svg {
    transform: translateX(4px);
}

/* Hero Stats */
.tf-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
}

.tf-stat {
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.tf-stat:hover {
    transform: translateY(-4px);
    border-color: var(--tf-color);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.tf-stat__num {
    display: block;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    background: linear-gradient(135deg, #fff, var(--tf-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.tf-stat__label {
    display: block;
    font-size: 14px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   Templates Section
========================================== */
.tf-templates {
    padding: 0 20px 80px;
    background: #0a0a0f;
    position: relative;
    margin-top: 0;
}

.tf-templates__container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.tf-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.tf-section-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    background: linear-gradient(135deg, #fff, var(--tf-color-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 16px;
}

.tf-section-desc {
    font-size: 18px;
    color: #9ca3af;
    margin: 0;
}

/* Templates Grid */
.tf-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Template Card */
.tf-template-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tf-template-card:hover {
    transform: translateY(-8px);
    border-color: var(--tf-color);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 40px var(--tf-color-light);
}

/* Card Thumbnail */
.tf-template-card__thumb {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.3));
}

.tf-template-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tf-template-card:hover .tf-template-card__thumb img {
    transform: scale(1.1);
}

.tf-template-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.2);
}

.tf-template-card__thumb-placeholder svg {
    width: 80px;
    height: 80px;
}

/* Card Overlay */
.tf-template-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tf-template-card:hover .tf-template-card__overlay {
    opacity: 1;
}

.tf-template-card__demo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.95);
    color: #1f2937;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tf-template-card__demo:hover {
    background: #fff;
    transform: scale(1.05);
}

.tf-template-card__demo svg {
    width: 20px;
    height: 20px;
}

/* Card Body */
.tf-template-card__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tf-template-card__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.tf-template-card__title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tf-template-card__title a:hover {
    color: var(--tf-color);
}

.tf-template-card__excerpt {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.6;
    flex: 1;
}

/* Card Footer */
.tf-template-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.tf-template-card__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--tf-color);
}

.tf-template-card__price--free {
    color: #10b981;
}

.tf-template-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.tf-template-card__link:hover {
    color: var(--tf-color);
    gap: 10px;
}

.tf-template-card__link svg {
    width: 16px;
    height: 16px;
}

/* No Results */
.tf-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #6b7280;
}

.tf-no-results svg {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.tf-no-results p {
    font-size: 18px;
    margin: 0;
}

/* Load More */
.tf-templates__load-more {
    text-align: center;
    padding-top: 40px;
}

.tf-btn--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
}

.tf-btn--outline:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--tf-color);
}

/* ==========================================
   Responsive Design
========================================== */
@media (max-width: 768px) {
    .tf-hero {
        min-height: auto;
        padding: 80px 20px 60px;
    }
    
    .tf-hero__container {
        gap: 40px;
    }
    
    .tf-hero__icon {
        width: 60px;
        height: 60px;
        padding: 15px;
    }
    
    .tf-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .tf-btn {
        width: 100%;
        justify-content: center;
    }
    
    .tf-templates-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tf-hero__wave svg {
        height: 40px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tf-templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .tf-templates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================================
 * Compatibility Modern Styles for existing `tax-theme` markup
 * ============================================================================ */
.tax-theme {
    background: #0b1020;
    color: #e5e7eb;
    padding-bottom: 48px;
}

.tax-theme .term-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    margin: 20px auto 24px;
    padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 48px);
    background:
        radial-gradient(900px 360px at 15% -10%, rgba(34,197,94,.25), transparent 60%),
        radial-gradient(700px 340px at 95% 10%, rgba(59,130,246,.22), transparent 55%),
        linear-gradient(135deg, #0f172a 0%, #13213b 48%, #10263b 100%);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 20px 50px rgba(2,6,23,.45);
}

.tax-theme .term-hero .term-title {
    color: #f8fafc;
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1.1;
    margin: 0 0 10px;
    letter-spacing: -.02em;
}

.tax-theme .term-hero .term-tagline {
    color: #93c5fd;
    font-weight: 700;
    margin: 0 0 10px;
    font-size: clamp(14px, 2vw, 18px);
}

.tax-theme .term-hero .term-desc {
    color: #cbd5e1;
    margin: 0;
    max-width: 900px;
    line-height: 1.7;
}

.tax-theme .term-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 0 auto 22px;
}

.tax-theme .template-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.tax-theme .template-search .input,
.tax-theme #templateSortSelect {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.3);
    background: rgba(15,23,42,.75);
    color: #e2e8f0;
    padding: 10px 14px;
}

.tax-theme .template-search .btn {
    border-radius: 12px;
    min-height: 44px;
    border: 1px solid rgba(99,102,241,.45);
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    font-weight: 700;
    padding: 0 18px;
}

.tax-theme .template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.tax-theme .template-card {
    background: linear-gradient(165deg, rgba(15,23,42,.92), rgba(20,35,60,.85));
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2,6,23,.35);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tax-theme .template-card:hover {
    transform: translateY(-6px);
    border-color: rgba(99,102,241,.6);
    box-shadow: 0 18px 42px rgba(15,23,42,.5), 0 0 0 1px rgba(99,102,241,.25) inset;
}

.tax-theme .template-thumb {
    aspect-ratio: 16 / 10;
    background: #111827;
    overflow: hidden;
}

.tax-theme .template-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.tax-theme .template-card:hover .template-thumb img {
    transform: scale(1.05);
}

.tax-theme .price-head,
.tax-theme .price-body {
    padding-left: 14px;
    padding-right: 14px;
}

.tax-theme .price-head {
    padding-top: 12px;
}

.tax-theme .template-title a {
    color: #f8fafc;
    text-decoration: none;
    font-weight: 700;
}

.tax-theme .template-title a:hover {
    color: #a5b4fc;
}

.tax-theme .template-excerpt {
    color: #cbd5e1;
    margin-top: 8px;
    line-height: 1.6;
}

.tax-theme .price-tag {
    margin-top: 10px;
}

.tax-theme .price-current {
    color: #86efac;
    font-weight: 800;
}

.tax-theme .svc-cta {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 14px;
}

.tax-theme .svc-cta .btn {
    flex: 1;
    min-height: 40px;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(30,41,59,.75);
    color: #e2e8f0;
    font-weight: 700;
}

.tax-theme .svc-cta .cta-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border-color: transparent;
}

.tax-theme .pagination {
    margin-top: 18px;
}

.tax-theme .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0 4px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.28);
    color: #e2e8f0;
    background: rgba(15,23,42,.7);
    text-decoration: none;
}

.tax-theme .pagination .page-numbers.current {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border-color: transparent;
}

@media (max-width: 900px) {
    .tax-theme .term-controls {
        grid-template-columns: 1fr;
    }

    .tax-theme .template-search {
        grid-template-columns: 1fr;
    }

    .tax-theme .template-grid {
        grid-template-columns: 1fr;
    }
}


/* === template-format-hero.css === */
.format-card__tpl-list {
  border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 1px 6px 0 rgba(30,40,90,0.06);
}
/* List postingan di dalam card */
.format-card__tpl-list {
  list-style: none;
  margin: 18px 1.5rem 0 1.5rem;
  padding: 0;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.format-card__tpl-item {
  font-size: 1rem;
  color: #f8fafc !important;
  background: rgba(255,255,255,0.06);
  border-radius: 7px;
  padding: 7px 12px;
  font-weight: 500;
  transition: background 0.18s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.format-card__tpl-link {
  color: inherit !important;
  text-decoration: none;
  display: block;
  width: 100%;
  transition: color 0.18s;
}
.format-card__tpl-link:hover {
  color: var(--format-color) !important;
  text-decoration: underline;
}
.format-card__tpl-item--empty {
  color: #bfc7d5 !important;
  background: none;
  font-style: italic;
  padding: 7px 0;
}
/* Template Format Archive Hero Section - Modern Design
 * Professional gradient with floating animations and responsive format cards
 * NOTE: This CSS is loaded ONLY on template-format taxonomy archives (/template-format/)
 */

/* ============================================================================
 * Critical CSS Reset - Prevent inherited styles from interfering
 * ============================================================================ */
.jz-format-main {
  all: revert;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

.jz-format-main * {
  box-sizing: border-box;
}

.jz-format-main *::before,
.jz-format-main *::after {
  box-sizing: border-box;
}

/* Force display on critical sections */
.jz-format-main section {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.jz-format-main div {
  display: block;
}

/* Exception: Hero layout should not be overridden by global div rules */
.jz-format-main .format-hero {
  display: grid;
}

.jz-format-main .format-hero__left,
.jz-format-main .format-hero__visual {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.jz-format-main .format-hero__strip {
  display: grid;
}

:root {
  --format-bg: #0a1628;
  --format-ink: #fafafa;
  --format-muted: #9ca3af;
  --format-accent: #f59e0b;
  --format-accent-2: #8b5cf6;
  --format-accent-3: #06b6d4;
  --format-card: #1a2642;
  --format-stroke: #2d3748;
}

/* Hero Section Container */
.format-hero {
  background: radial-gradient(1200px 500px at 20% -10%, rgba(16, 185, 129, 0.35), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(14, 116, 144, 0.35), transparent 55%),
    linear-gradient(135deg, #0b1a2b 0%, #0f2f25 52%, #0a241d 100%);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 6rem) clamp(3rem, 8vw, 5rem);
  margin: 0 0 4rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  justify-content: space-between;
  min-height: 560px;
  width: 100%;
  gap: clamp(2rem, 5vw, 4rem);
}

.format-hero::before {
  content: '';
  position: absolute;
  inset: 10% 40% auto -10%;
  height: 260px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25), transparent 70%);
  filter: blur(12px);
  opacity: 0.8;
  pointer-events: none;
}

.format-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% 5% 45%;
  height: 280px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
  filter: blur(16px);
  opacity: 0.7;
  pointer-events: none;
}

/* Left Column */
.format-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  z-index: 3;
  grid-column: 2 / 3;
  min-width: 0;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
}

/* Background Orbs - Hidden in new design */
.format-hero__bg {
  display: none;
}

.format-hero__orb {
  display: none;
}

.format-hero__orb--a {
  display: none;
}

.format-hero__orb--b {
  display: none;
}

.format-hero__orb--c {
  display: none;
}

/* Hero Content */
.format-hero__kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7ff3c6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.format-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
  color: #ecfdf5;
  letter-spacing: -0.5px;
}

.format-hero__subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.7;
  color: #c6f6e5;
  margin: 0;
}

.format-hero__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.format-hero__feature {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.18);
  border: 1px solid rgba(110, 231, 183, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.format-hero__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.3);
  color: #ecfdf5;
  font-size: 16px;
  flex-shrink: 0;
}

.format-hero__feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #e2fdf2;
  font-size: 0.9rem;
}

.format-hero__feature-text strong {
  font-weight: 700;
  color: #f0fdfa;
}

.format-hero__feature-text span {
  color: #b7f5dd;
  font-size: 0.85rem;
}

.format-hero__cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.format-hero__note {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #9fecca;
}

.format-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.format-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.format-btn--primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
}

.format-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.25);
}

.format-btn--ghost {
  background: transparent;
  color: #f0fdfa;
  border: 2px solid #6ee7b7;
}

.format-btn--ghost:hover {
  border-color: #1e293b;
  background: rgba(15, 23, 42, 0.05);
}

/* Meta Chips */
.format-hero__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.format-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(110, 231, 183, 0.1);
  border-radius: 99px;
  color: #d1fae5;
  font-size: 13px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  border: 1px solid rgba(110, 231, 183, 0.3);
}

/* Stats */
.format-hero__stats {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: clamp(1.5rem, 3vw, 2rem);
  z-index: 3;
  width: 100%;
  margin: 0;
  padding: 1.5rem 0 0 0;
  flex-wrap: wrap;
}

.format-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
}

.format-stat__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 900;
  color: #6ee7b7;
  line-height: 1;
}

.format-stat__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  color: #a7f3d0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Right Column - Visual */
.format-hero__visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
  position: relative;
  grid-column: 1 / 2;
  min-width: 0;
  padding-right: clamp(1rem, 3vw, 2.5rem);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.format-hero__strip {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 24px 48px rgba(8, 15, 30, 0.35);
  backdrop-filter: blur(8px);
  animation: format-float 6s ease-in-out infinite;
}

.format-hero__tile {
  border-radius: 14px;
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 120px;
  color: #f8fafc;
  font-family: 'Space Grotesk', sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.format-hero__tile span {
  font-weight: 700;
  font-size: 1rem;
}

.format-hero__tile small {
  font-size: 0.8rem;
  opacity: 0.85;
}

.format-hero__tile--amp {
  background: linear-gradient(135deg, #5b6dfc, #7a5cff);
}

.format-hero__tile--blogger {
  background: linear-gradient(135deg, #f472b6, #f97316);
}

.format-hero__tile--html {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.format-hero__tile--wp {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

@keyframes format-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-20px) scale(1.02); }
}

/* Format Archive Section */
.jz-format-archive {
  width: 100%;
  padding-top: 2rem;
}

.section-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 32px;
  color: #1f2937;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Format Cards Grid - Responsive Design */
/* Modern Grid for Format Cards */
.format-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 1360px;
  margin: 0 auto 3rem auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  align-items: stretch;
}

/* Responsive Hero Layout */
@media (max-width: 768px) {
  .format-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 2rem 1rem;
    gap: 2.5rem;
    display: flex;
    flex-direction: column;
  }
  
  .format-hero__visual {
    min-height: auto;
    order: 1;
    padding: 0;
    grid-column: auto;
    width: 100%;
    justify-content: center;
  }
  
  .format-hero__left {
    order: 2;
    padding: 0 0.8rem;
    grid-column: auto;
    width: 100%;
  }
  
  .format-hero__title {
    font-size: clamp(26px, 7vw, 36px);
    text-align: center;
    line-height: 1.15;
  }
  
  .format-hero__subtitle {
    text-align: center;
    font-size: clamp(13px, 3.5vw, 15px);
    padding: 0 0.5rem;
  }
  
  .format-hero__features {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  
  .format-hero__feature {
    padding: 0.75rem 0.9rem;
  }
  
  .format-hero__feature-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .format-hero__feature-text {
    font-size: 0.85rem;
  }
  
  .format-hero__feature-text strong {
    font-size: 0.9rem;
  }
  
  .format-hero__feature-text span {
    font-size: 0.8rem;
  }

  .format-hero__cta {
    justify-content: center;
    flex-direction: column;
    gap: 0.7rem;
  }

  .format-hero__strip {
    max-width: 100%;
    margin: 0;
    padding: 0.9rem;
    gap: 0.8rem;
    grid-template-columns: 1fr;
  }
  
  .format-hero__tile {
    min-height: auto;
    padding: 1rem 0.9rem;
    width: 100%;
  }
  
  .format-hero__tile span {
    font-size: 0.95rem;
    font-weight: 600;
  }
  
  .format-hero__tile small {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .format-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .format-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 600px) {
  .format-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Modern Card Design - Clean & Elegant */
.format-card {
  --format-color: #6366f1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
  background: linear-gradient(135deg, #0f1729 0%, #1a1f3a 50%, #151d2f 100%);
  border: 2px solid transparent;
  border-radius: 20px;
  overflow: hidden !important;
  box-sizing: border-box;
  background-clip: padding-box;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

/* Gradient border effect - HIDDEN */
.format-card::before {
  display: none;
}

.format-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 48px rgba(0, 0, 0, 0.4),
    0 0 50px rgba(16, 185, 129, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

/* Card content wrapper */
.format-card > * {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  max-width: 100% !important;
  flex-shrink: 0;
  overflow: hidden;
  min-width: 0;
}

/* Top accent bar */
.format-card__top-bar {
  width: 100% !important;
  max-width: 100% !important;
  height: 5px;
  background: linear-gradient(90deg, var(--format-color), transparent);
  transition: background 0.3s ease, height 0.3s ease;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.format-card:hover .format-card__top-bar {
  background: linear-gradient(90deg, var(--format-color) 40%, transparent 100%);
  opacity: 1;
  height: 6px;
}

/* Icon styling */
.format-card__icon {
  width: 48px !important;
  height: 48px;
  max-width: 48px !important;
  margin: 1rem auto 0.6rem auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--format-color), rgba(99, 102, 241, 0.6));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
  color: #fff;
  overflow: hidden !important;
  position: relative;
  align-self: center;
}

.format-card__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Title styling */
.format-card__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  margin: 0 auto 0.7rem auto;
  padding: 0;
  color: #f1f5f9 !important;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  text-align: center;
}

/* Description styling */
.format-card__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #cbd5e1 !important;
  margin: 0 auto 1rem auto;
  padding: 0;
  line-height: 1.55;
  flex-grow: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  max-height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: center;
}

/* Meta badges */
.format-card__meta {
  display: flex;
  gap: 0.5rem;
  margin: 0.8rem auto 0.8rem auto;
  flex-wrap: wrap;
  max-width: calc(100% - 0rem);
  justify-content: center;
}

.format-card__count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--format-color) !important;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  transition: all 0.2s;
}

.format-card:hover .format-card__count {
  background: rgba(99, 102, 241, 0.25);
  border-color: var(--format-color);
}
.format-card:hover .format-card__count {
  background: rgba(99, 102, 241, 0.25);
  border-color: var(--format-color);
}

/* Tag styling */
.format-card__tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: #cbd5e1 !important;
  background: rgba(100, 116, 139, 0.2);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  transition: all 0.2s;
}

.format-card:hover .format-card__tag {
  background: rgba(100, 116, 139, 0.3);
  border-color: #cbd5e1;
}

/* Template list styling */
.format-card__tpl-list {
  list-style: none;
  margin: 0.8rem 1.5rem;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 50px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex: 1 1 auto;
}

.format-card__tpl-item {
  font-size: 0.85rem;
  color: #e2e8f0 !important;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-weight: 500;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.format-card__tpl-link {
  color: inherit !important;
  text-decoration: none;
  display: block;
  width: 100%;
  transition: all 0.2s;
  padding: 0.3rem 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}

.format-card__tpl-link:hover {
  color: var(--format-color) !important;
  padding-left: 0.4rem;
  text-decoration: underline;
}

.format-card__tpl-item--empty {
  color: #94a3b8 !important;
  font-style: italic;
  font-weight: 400;
}

/* No results message */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: #94a3b8;
  font-size: 1rem;
}

/* ============================================================================
 * Responsive Design
 * ============================================================================ */

/* Tablet & Small Desktop */
@media (min-width: 768px) and (max-width: 1023px) {
  .format-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .format-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
  
  .format-hero__stats {
    gap: clamp(2.5rem, 5vw, 4rem);
    justify-content: center;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Mobile Tablets */
@media (max-width: 768px) {
  .jz-format-main {
    padding: 0 1rem;
  }
  
  .format-hero {
    border-radius: 24px;
    padding: 2.5rem 2rem;
    min-height: auto;
    margin: 0 0 3rem 0;
  }
  
  .format-hero__content {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .format-hero h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 16px 0;
  }
  
  .format-hero__lead {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 100%;
    padding: 0;
  }
  
  .format-hero__actions {
    gap: 10px;
    margin-bottom: 16px;
    max-width: 100%;
  }
  
  .format-hero__meta {
    gap: 10px;
    margin-bottom: 16px;
    max-width: 100%;
  }
  
  .format-btn {
    font-size: 13px;
    padding: 10px 22px;
  }
  
  .format-chip {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .format-hero__stats {
    gap: 1.5rem;
    margin: 1.5rem auto 0;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
  }
  
  .format-stat__num {
    font-size: 24px;
  }
  
  .format-stat__label {
    font-size: 11px;
  }
  
  .format-cards-grid {
    gap: 1.5rem;
  }
  
  .section-title {
    font-size: 24px;
    margin-bottom: 24px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .jz-format-main {
    padding: 0 1rem;
  }
  
  .format-hero {
    border-radius: 16px;
    padding: 2rem 1.5rem;
    min-height: auto;
    margin: 0 0 2rem 0;
  }
  
  .format-hero__content {
    width: 100%;
    max-width: 100%;
    padding: 0 0.75rem;
  }
  
  .format-hero h1 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 12px;
    margin-right: 0;
  }
  
  .format-hero__eyebrow {
    font-size: 11px;
    margin-bottom: 8px;
  }
  
  .format-hero__lead {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    max-width: 100%;
    padding: 0;
  }
  
  .format-hero__actions {
    gap: 8px;
    margin-bottom: 12px;
    flex-direction: column;
    width: 100%;
  }
  
  .format-hero__actions .format-btn {
    width: 100%;
  }
  
  .format-hero__meta {
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  
  .format-btn {
    font-size: 12px;
    padding: 10px 20px;
  }
  
  .format-chip {
    font-size: 11px;
    padding: 6px 10px;
    flex: 1 1 calc(50% - 4px);
  }
  
  .format-hero__stats {
    gap: 1rem;
    margin: 16px auto 0;
    padding-top: 16px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    justify-content: center;
  }
  .format-stat {
    flex: 0 1 auto;
    text-align: center;
    min-width: auto;
    align-items: center;
  }
  
  .format-stat__num {
    font-size: 20px;
  }
  
  .format-stat__label {
    font-size: 10px;
  }
  
  /* Hapus duplikat grid di mobile kecil, gunakan aturan utama */
  
  .format-card {
    border-radius: 12px;
  }
  
  .format-card__icon {
    width: 44px;
    height: 44px;
    margin: 1rem 1rem 0 1rem;
  }
  
  .format-card__icon svg {
    width: 22px;
    height: 22px;
  }
  
  .format-card__title {
    font-size: 14px;
    margin: 8px 1rem 6px;
  }
  
  .format-card__desc {
    font-size: 12px;
    margin: 0 1rem 10px;
  }
  
  .format-card__meta {
    font-size: 12px;
    margin: 0 1rem 10px;
  }
  
  .format-card__cta {
    font-size: 12px;
    padding: 10px 1rem;
    margin: 0 1rem 1rem;
  }
  
  .section-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

/* Extra small mobile */
@media (max-width: 360px) {
  .jz-format-main {
    padding: 0 0.5rem;
  }
  
  .format-hero {
    padding: 1.5rem 0.75rem;
    margin: 0 0 1.5rem 0;
  }
  
  .format-hero h1 {
    font-size: 18px;
  }
  
  .format-hero__lead {
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .format-chip {
    flex: 1 1 100%;
  }
  
  .format-hero__meta {
    flex-direction: column;
  }
  
  .format-hero__stats {
    gap: 0.75rem;
    margin: 12px auto 0;
    padding-top: 12px;
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: center;
  }
  .format-stat {
    flex: 0 1 auto;
    text-align: center;
    align-items: center;
  }
  
  .format-stat__num {
    font-size: 18px;
  }
  
  .format-stat__label {
    font-size: 9px;
  }
  
  .format-card__title {
    font-size: 13px;
  }
  
  .format-card__desc {
    font-size: 11px;
  }
}

/* ==========================================
   Modern Format Card Design
========================================== */
.format-section-header {
  text-align: center;
  margin-bottom: 3.5rem;
  padding: 0 1rem;
}

.format-section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
}

.format-section-desc {
  font-size: 1.1rem;
  color: #cbd5e1;
  max-width: 600px;
  margin: 0 auto;
}

/* Modern card grid */
.format-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .format-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .format-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Modern Card - Glassmorphism + Gradient */
.format-card-modern {
  --format-main: #667eea;
  --format-light: rgba(102, 126, 234, 0.1);
  
  position: relative;
  height: 100%;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Background gradient */
.format-card-modern__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.format-card-modern:hover .format-card-modern__bg {
  opacity: 0.12;
}

/* Illustration Header */
.format-card-modern__illustration {
  position: relative;
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 0.5rem;
  box-sizing: border-box;
  z-index: 1;
  overflow: hidden;
}

.format-card-modern__illustration svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  opacity: 0.7;
  transition: all 0.4s ease;
}

.format-card-modern:hover .format-card-modern__illustration svg {
  opacity: 1;
  transform: scale(1.05);
}

/* Floating orbs */
.format-card-modern__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.format-card-modern__orb--1 {
  width: 180px;
  height: 180px;
  background: var(--format-main);
  top: -60px;
  right: -50px;
}

.format-card-modern__orb--2 {
  width: 150px;
  height: 150px;
  background: color-mix(in srgb, var(--format-main) 80%, #ffffff 20%);
  bottom: -40px;
  left: -40px;
}

.format-card-modern:hover .format-card-modern__orb {
  opacity: 0.08;
}

/* Card content wrapper */
.format-card-modern__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  height: 100%;
  box-sizing: border-box;
}

/* Icon box */
.format-card-modern__icon-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.format-card-modern__icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.format-card-modern__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
  position: relative;
  z-index: 1;
}

.format-card-modern:hover .format-card-modern__icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 24px var(--format-main),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.format-card-modern__tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--format-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  align-self: center;
  margin-top: 0.25rem;
}

/* Header - Title & Count */
.format-card-modern__header {
  flex-grow: 0;
}

.format-card-modern__title {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.format-card-modern:hover .format-card-modern__title {
  color: var(--format-main);
}

.format-card-modern__count {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--format-main);
  background: var(--format-light);
  border: 1px solid rgba(var(--format-main), 0.3);
  padding: 0.4rem 0.9rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.format-card-modern:hover .format-card-modern__count {
  background: var(--format-light);
  border-color: var(--format-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Features chips */
.format-card-modern__features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.format-feature-chip {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: #cbd5e1;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--format-main);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.format-card-modern:hover .format-feature-chip {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--format-main);
  transform: translateX(4px);
}

/* CTA Button */
.format-card-modern__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: linear-gradient(135deg, var(--format-main), color-mix(in srgb, var(--format-main) 80%, #ffffff 20%));
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  margin-top: auto;
}

.format-card-modern__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.format-card-modern__cta:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.25),
    0 0 30px var(--format-main);
}

.format-card-modern__cta:hover::before {
  opacity: 1;
}

.format-card-modern__cta svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.3s ease;
}

.format-card-modern__cta:hover svg {
  transform: translateX(3px);
}

/* Main container hover effect */
.format-card-modern:hover {
  transform: translateY(-12px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .format-section-title {
    font-size: 1.75rem;
  }
  
  .format-card-modern {
    min-height: 580px;
  }
  
  .format-card-modern__content {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  
  .format-card-modern__icon {
    width: 56px;
    height: 56px;
  }
  
  .format-card-modern__icon svg {
    width: 28px;
    height: 28px;
  }
  
  .format-card-modern__title {
    font-size: 1.15rem;
  }
}

/* =========================================================================
 * Enhanced Card Styling - Tagline, Features, CTA
 * ========================================================================= */

/* Card Tagline */
.format-card__tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--format-color) !important;
  opacity: 0.9;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}

/* Features Container */
.format-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
  margin: 0 !important;
  padding: 0 !important;
}

/* Feature Item */
.format-feature {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  color: #cbd5e1 !important;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  transition: all 0.2s ease;
}

.format-feature:hover {
  color: var(--format-color) !important;
  transform: translateX(3px);
}

.format-feature span:first-child {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.9rem;
}

/* CTA Container */
.format-card__cta {
  display: flex;
  gap: 0.8rem;
  margin-top: auto !important;
  padding: 0.3rem 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  justify-content: center;
}

.format-card__cta a.format-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 2rem !important;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  color: white;
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
  margin: 0;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
  white-space: nowrap;
  min-height: 28px;
  box-sizing: border-box;
  max-width: 90%;
}

.format-card__cta a.format-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  pointer-events: none;
}

.format-card__cta a.format-btn:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  opacity: 0.95;
}

.format-card__cta a.format-btn:hover::before {
  opacity: 0.5;
}

/* Info Section Styling */
.jz-format-section {
  width: 100%;
  margin-top: 4rem !important;
  padding: 3rem 2rem !important;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 16px;
  box-sizing: border-box;
}

.jz-format-section h2 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 1rem 0;
  color: #1f2937;
}

.jz-format-section p {
  font-size: 16px;
  color: #6b7280;
  margin: 0 0 2rem 0;
  line-height: 1.6;
  max-width: 900px;
}

.jz-format-section a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.jz-format-section a[style*="background: #3730a3"] {
  box-shadow: 0 4px 12px rgba(55, 48, 163, 0.3);
}

.jz-format-section a[style*="background: #3730a3"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(55, 48, 163, 0.4);
}

.jz-format-section a[style*="border: 2px solid"]:hover {
  background: rgba(55, 48, 163, 0.05);
}

/* Additional responsive tweaks */
@media (max-width: 768px) {
  .jz-format-section {
    margin-top: 3rem !important;
    padding: 2rem 1.5rem !important;
  }
  
  .jz-format-section h2 {
    font-size: 22px;
  }
  
  .jz-format-section p {
    font-size: 14px;
  }
  
  .format-card__cta {
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.2rem 1.5rem !important;
  }
  
  .format-card__cta a {
    width: 100%;
  }
  
  .format-feature {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .jz-format-section {
    margin-top: 2rem !important;
    padding: 1.5rem 1rem !important;
  }
  
  .jz-format-section h2 {
    font-size: 18px;
  }
  
  .jz-format-section p {
    font-size: 13px;
    margin: 0 0 1.5rem 0;
  }
  
  .jz-format-section a {
    padding: 0.7rem 1.5rem;
    font-size: 14px;
  }
  
  .format-card__cta {
    padding: 1rem 1rem !important;
    gap: 0.5rem;
  }
  
  .format-card__cta a {
    padding: 0.7rem 1rem !important;
    font-size: 0.85rem;
  }
}




/* === templates-hero.css === */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Space+Grotesk:wght@400;500;600&display=swap");

.tpl-archive {
  --tpl-bg: #0c0f1f;
  --tpl-ink: #e8ecff;
  --tpl-muted: #a8b2d8;
  --tpl-accent: #f6c453;
  --tpl-accent-2: #4ce0b3;
  --tpl-card: rgba(255, 255, 255, 0.06);
  --tpl-stroke: rgba(255, 255, 255, 0.14);
  color: var(--tpl-ink);
}

.tpl-hero {
  position: relative;
  margin: 18px 0 28px;
  padding: 48px 48px 40px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 10% 0%, #1a2148 0%, #0c0f1f 55%, #080a15 100%);
  overflow: hidden;
  border: 1px solid var(--tpl-stroke);
}

.tpl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.25;
  pointer-events: none;
}

.tpl-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tpl-hero__orb {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(0px);
  opacity: 0.55;
  animation: tpl-float 10s ease-in-out infinite;
}

.tpl-hero__orb--a {
  background: radial-gradient(circle at 30% 30%, #ff8a00 0%, transparent 70%);
  top: -80px;
  right: 10%;
}

.tpl-hero__orb--b {
  background: radial-gradient(circle at 30% 30%, #3cf0c5 0%, transparent 70%);
  bottom: -120px;
  left: -60px;
  animation-delay: 1.5s;
}

.tpl-hero__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.tpl-hero__eyebrow {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--tpl-accent-2);
  margin: 0 0 10px;
}

.tpl-hero h1 {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 4vw, 48px);
  margin: 0 0 12px;
  line-height: 1.1;
}

.tpl-hero__lead {
  font-family: "Space Grotesk", sans-serif;
  color: var(--tpl-muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 18px;
}

.tpl-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tpl-btn {
  font-family: "Space Grotesk", sans-serif;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  border: 1px solid transparent;
}

.tpl-btn--primary {
  background: linear-gradient(135deg, #ff8a00, #f6c453);
  color: #111;
  box-shadow: 0 12px 30px rgba(246, 196, 83, 0.25);
}

.tpl-btn--ghost {
  background: transparent;
  color: var(--tpl-ink);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Mobile hero refinements: tighter spacing, readable typography, full‑width CTA */
@media (max-width:720px) {
  .tpl-hero {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .tpl-hero h1 {
    font-size: 20px;
    line-height: 1.12;
    margin-bottom: 8px;
  }

  .tpl-hero__eyebrow { font-size: 10px; margin-bottom: 6px; }

  .tpl-hero__lead {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .tpl-hero__actions {
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
  }

  .tpl-btn--primary,
  .tpl-btn--ghost {
    display: block;
    width: 100%;
    padding: 12px 14px;
    text-align: center;
  }

  .tpl-hero__content { max-width: 100%; }
  .tpl-hero__orb { display: none; }

  /* chips / badges inside hero — make them compact and wrap nicely */
  .tpl-hero__actions .chip,
  .tpl-hero .chip { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; border-radius: 999px; }

  /* hide decorative grid on small screens (already reduced elsewhere) */
  .tpl-hero::before { display: none !important; }
}


.tpl-hero__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tpl-chip {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  color: var(--tpl-ink);
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tpl-hero__stats {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.tpl-stat {
  background: var(--tpl-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
}

.tpl-stat__num {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 24px;
}

.tpl-stat__label {
  font-family: "Space Grotesk", sans-serif;
  color: var(--tpl-muted);
  font-size: 12px;
}

@keyframes tpl-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 720px) {
  .tpl-hero {
    padding: 30px 20px 26px;
  }
  .tpl-hero__stats {
    grid-template-columns: 1fr;
  }
}

/* Home/front-page hero — mobile-only tidy (overrides parent .hero rules) */
@media (max-width:720px) {
  body.front-page .hero,
  body.home .hero {
    padding: 18px 12px;
  }

  body.front-page .hero .hero-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.front-page .hero .hero-card {
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  }

  body.front-page .hero .hero-card .title {
    font-size: 20px;
    line-height: 1.12;
    margin-bottom: 8px;
  }

  body.front-page .hero .hero-card .lead {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--muted);
  }

  body.front-page .hero .hero-card .pill {
    font-size: 12px;
    padding: 6px 10px;
  }

  body.front-page .hero .hero-card a.cta-btn,
  body.front-page .hero .hero-card a.btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: center;
  }

  /* reduce hero background texture/hairlines on small screens */
  body.front-page .hero::before,
  body.front-page .hero .hero-card::before {
    display: none !important;
  }

  /* ensure hero image/card keeps rounded corners on mobile */
  body.front-page .hero .hero-card:nth-child(2) > div { border-radius: 12px; overflow: hidden; }
}