/* =========================================================
   COMIC LANDING UNIVERSAL PRO — ONE CSS FILE
   Paste at the end of the existing stylesheet, or include this file after it.

   QUICK FONT CUSTOMIZATION (edit these two variables below):
   Comic display: "Bangers" / "Bungee" / "Permanent Marker" / "Space Grotesk"
   Body text:     "Nunito Sans" / "Space Grotesk" / Arial

   No JavaScript required. Includes comic pop-in, hover punch, halftone,
   title shadow, button impact, card lift, responsive design, and reduced-motion support.
   ========================================================= */

/* Optional web fonts: if Google Fonts cannot load, the CSS fallback fonts will be used. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Bungee&family=Nunito+Sans:wght@400;500;600;700;800;900&family=Permanent+Marker&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* FONT STYLE: edit these values to change the entire site's typography. */
  --comic-display-font: "Bangers", Impact, "Arial Black", sans-serif;
  --comic-body-font: "Nunito Sans", "Trebuchet MS", Arial, sans-serif;
  /* For a different look, try:
     --comic-display-font: "Bungee", Impact, sans-serif;
     --comic-display-font: "Permanent Marker", "Arial Black", sans-serif;
     --comic-display-font: "Space Grotesk", Arial, sans-serif;
     --comic-body-font: "Space Grotesk", Arial, sans-serif;
  */
  --comic-motion-speed: 220ms;
  --comic-motion-distance: 8px;
  --comic-paper: #fff9e9;
  --comic-paper-2: #fffdf6;
  --comic-ink: #171717;
  --comic-muted: #4d4a45;
  --comic-red: #f03b35;
  --comic-yellow: #ffdc35;
  --comic-blue: #29b8ef;
  --comic-purple: #a77bff;
  --comic-green: #b9ed57;
  --comic-border: 3px solid var(--comic-ink);
  --comic-shadow: 6px 6px 0 var(--comic-ink);
  --comic-shadow-small: 4px 4px 0 var(--comic-ink);
  --comic-radius: 16px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  color: var(--comic-ink) !important;
  background-color: var(--comic-paper) !important;
  background-image: radial-gradient(rgba(23, 23, 23, .12) .8px, transparent .8px) !important;
  background-size: 12px 12px !important;
  font-family: var(--comic-body-font) !important;
  line-height: 1.65;
}

/* Predictable sizing without modifying the HTML structure */
body *,
body *::before,
body *::after {
  box-sizing: border-box;
}

/* Typography */
body :where(h1, h2, h3, h4, h5, h6) {
  color: var(--comic-ink) !important;
  font-family: var(--comic-display-font) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: .035em;
  font-stretch: condensed;
  text-wrap: balance;
}

body h1 {
  font-size: clamp(2.25rem, 6vw, 4.8rem) !important;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--comic-yellow), 4px 4px 0 var(--comic-ink);
}

body h2 {
  font-size: clamp(1.7rem, 3.7vw, 2.65rem) !important;
  text-transform: uppercase;
  display: inline-block;
  max-width: 100%;
  padding-bottom: .12em;
  text-decoration: underline;
  text-decoration-color: var(--comic-red);
  text-decoration-thickness: .14em;
  text-underline-offset: .12em;
}

body h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
}

body p,
body li,
body label,
body blockquote {
  color: var(--comic-muted);
}

body a {
  color: #a51e1b;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--comic-motion-speed) ease, transform var(--comic-motion-speed) ease, box-shadow var(--comic-motion-speed) ease;
}

body a:hover {
  color: #171717;
}

body :where(img, video, iframe) {
  max-width: 100%;
}

body img {
  border-radius: 10px;
}

/* Page headers and navigation — common class-name coverage */
body :where(header, .header, .site-header, .main-header, .page-header, .navbar, .nav-bar, .site-nav, .main-nav, .topbar, .top-bar) {
  border-bottom: var(--comic-border) !important;
}

body :where(header, .header, .site-header, .main-header, .navbar, .nav-bar, .site-nav, .main-nav, .topbar, .top-bar) {
  background-color: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
  box-shadow: 0 4px 0 rgba(23, 23, 23, .12);
}

body :where(header, .header, .site-header, .main-header, .navbar, .nav-bar, .site-nav, .main-nav) a {
  color: var(--comic-ink) !important;
  font-weight: 800;
  text-decoration: none;
}

body :where(header, .header, .site-header, .main-header, .navbar, .nav-bar, .site-nav, .main-nav) a:hover {
  color: var(--comic-red) !important;
}

/* Hero / banner / intro sections */
body :where(.hero, .hero-section, .banner, .main-banner, .intro, .page-hero, .jumbotron, .headline, .main-content) {
  position: relative;
  isolation: isolate;
}

body :where(.hero, .hero-section, .banner, .main-banner, .intro, .page-hero, .jumbotron) {
  background-color: var(--comic-blue) !important;
  color: var(--comic-ink) !important;
  border: var(--comic-border) !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 0 var(--comic-ink) !important;
  padding: clamp(1.25rem, 4vw, 3rem) !important;
  overflow: hidden;
}

body :where(.hero, .hero-section, .banner, .main-banner, .intro, .page-hero, .jumbotron)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  right: -65px;
  bottom: -80px;
  border: 4px solid var(--comic-ink);
  border-radius: 50%;
  background-image: radial-gradient(var(--comic-ink) 1.4px, transparent 1.5px);
  background-size: 9px 9px;
  opacity: .12;
  pointer-events: none;
}

/* Sections: subtle panels, leaving layout dimensions intact */
body main > section,
body .section,
body .content-section,
body .page-section {
  position: relative;
}

/* Cards, articles, products, blog entries, feature panels */
body :where(.card, .article-card, .feature-card, .product-card, .service-card, .blog-card, .post-card, .item-card, .info-card, .content-card, .box, .panel, .widget, .support-grid > a, .footer-links a) {
  color: var(--comic-ink) !important;
  background-color: var(--comic-paper-2) !important;
  border: 2px solid var(--comic-ink) !important;
  border-radius: var(--comic-radius) !important;
  box-shadow: var(--comic-shadow-small) !important;
  transition: transform var(--comic-motion-speed) ease, box-shadow var(--comic-motion-speed) ease, background-color var(--comic-motion-speed) ease;
}

body :where(.card, .article-card, .feature-card, .product-card, .service-card, .blog-card, .post-card, .item-card, .info-card, .content-card, .box, .panel, .widget):hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--comic-ink) !important;
}

/* Common button classes and semantic buttons */
body :where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .button, .btn-primary, .btn-daftar, .cta, .cta-button, .read-more, .wp-block-button__link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .75rem 1.15rem !important;
  color: var(--comic-ink) !important;
  background: var(--comic-yellow) !important;
  border: 2px solid var(--comic-ink) !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 var(--comic-ink) !important;
  font-family: inherit !important;
  font-size: 1rem;
  font-weight: 900 !important;
  line-height: 1.25;
  text-decoration: none !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--comic-motion-speed) ease, box-shadow var(--comic-motion-speed) ease, background-color var(--comic-motion-speed) ease;
}

body :where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .button, .btn-primary, .btn-daftar, .cta, .cta-button, .read-more, .wp-block-button__link):hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--comic-ink) !important;
  background: var(--comic-red) !important;
  color: #fff !important;
}

body :where(button, input[type="button"], input[type="submit"], input[type="reset"]):focus-visible,
body a:focus-visible {
  outline: 3px dashed var(--comic-red) !important;
  outline-offset: 4px;
}

body :where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Variants for existing colors/buttons */
body :where(.btn-secondary, .button-secondary, .btn-outline, .secondary) {
  background: var(--comic-blue) !important;
}

body :where(.btn-danger, .btn-daftar, .btn-register, .register-button, .cta-primary) {
  background: var(--comic-red) !important;
  color: #fff !important;
}

/* Forms */
body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
  max-width: 100%;
  min-height: 42px;
  padding: .7rem .85rem;
  color: var(--comic-ink) !important;
  background: #fffdf7 !important;
  border: 2px solid var(--comic-ink) !important;
  border-radius: 9px !important;
  box-shadow: 3px 3px 0 rgba(23, 23, 23, .18);
  font: inherit;
}

body :where(input, select, textarea):focus {
  outline: 3px solid var(--comic-blue) !important;
  outline-offset: 2px;
}

body input::placeholder,
body textarea::placeholder {
  color: #68645e;
  opacity: 1;
}

/* Tables and lists */
body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--comic-paper-2);
  border: 2px solid var(--comic-ink);
  border-radius: 12px;
  box-shadow: var(--comic-shadow-small);
}

body :where(th, td) {
  padding: .75rem;
  border-right: 1px solid rgba(23, 23, 23, .2);
  border-bottom: 1px solid rgba(23, 23, 23, .2);
  text-align: left;
}

body th {
  color: var(--comic-ink) !important;
  background: var(--comic-yellow) !important;
  font-weight: 900;
}

body blockquote {
  padding: 1rem 1.25rem;
  background: #fff0ad;
  border: 0;
  border-left: 6px solid var(--comic-red);
  border-radius: 0 12px 12px 0;
  font-weight: 700;
}

body hr {
  height: 3px;
  border: 0;
  background: var(--comic-ink);
  opacity: .8;
}

/* Labels, badges, pills */
body :where(.badge, .label, .tag, .chip, .pill, .article-label, .category, .category-label) {
  display: inline-block;
  padding: .3rem .65rem;
  color: var(--comic-ink) !important;
  background: var(--comic-yellow) !important;
  border: 2px solid var(--comic-ink) !important;
  border-radius: 999px !important;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .035em;
}

/* Footer */
body :where(footer, .footer, .site-footer, .main-footer) {
  margin-top: 2rem;
  padding-top: 2rem;
  color: #fff9e9 !important;
  background: var(--comic-ink) !important;
  border-top: 5px solid var(--comic-red) !important;
}

body :where(footer, .footer, .site-footer, .main-footer) :where(p, li, h1, h2, h3, h4, h5, h6, span) {
  color: #fff9e9 !important;
}

body :where(footer, .footer, .site-footer, .main-footer) a {
  color: var(--comic-yellow) !important;
}

/* Common decorative section headers */
body :where(.section-title, .section-heading, .block-title, .title-bar) {
  display: inline-block;
  max-width: 100%;
  padding: .5rem .85rem;
  color: var(--comic-ink) !important;
  background: var(--comic-yellow) !important;
  border: 2px solid var(--comic-ink) !important;
  box-shadow: 4px 4px 0 var(--comic-ink) !important;
  transform: rotate(-.5deg);
}

/* =========================================================
   EXTRA COMIC EFFECTS — CSS ONLY
   ========================================================= */

/* Bring key elements in with a subtle comic-book entrance. */
@keyframes comic-pop-in {
  0% { opacity: 0; transform: translateY(var(--comic-motion-distance)) scale(.975); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes comic-drop-in {
  0% { opacity: 0; transform: translateY(-12px); }
  75% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes comic-bob {
  from { background-position: 0 0; }
  to { background-position: 18px 12px; }
}

@keyframes comic-label-pop {
  0% { transform: scale(.9) rotate(-3deg); }
  65% { transform: scale(1.04) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes comic-impact {
  0% { box-shadow: 4px 4px 0 var(--comic-ink); }
  50% { box-shadow: 7px 7px 0 var(--comic-ink); }
  100% { box-shadow: 2px 2px 0 var(--comic-ink); }
}

body :where(header, .header, .site-header, .main-header, .navbar, .nav-bar, .site-nav, .main-nav) {
  animation: comic-drop-in .55s cubic-bezier(.2,.8,.2,1) both;
}

body :where(.hero, .hero-section, .banner, .main-banner, .intro, .page-hero, .jumbotron) {
  background-image: radial-gradient(rgba(23, 23, 23, .12) 1px, transparent 1px) !important;
  background-size: 11px 11px !important;
  animation: comic-pop-in .65s cubic-bezier(.2,.8,.2,1) both;
}

body :where(h1, h2, .section-title, .section-heading, .block-title, .title-bar) {
  animation: comic-pop-in .6s cubic-bezier(.2,.8,.2,1) both;
}

body :where(.card, .article-card, .feature-card, .product-card, .service-card, .blog-card, .post-card, .item-card, .info-card, .content-card, .box, .panel, .widget) {
  animation: comic-pop-in .55s ease-out both;
}

body :where(.badge, .label, .tag, .chip, .pill, .article-label, .category, .category-label) {
  animation: comic-label-pop .5s ease-out both;
}

/* Punchy hover behaviour on interactive cards. */
body :where(.card, .article-card, .feature-card, .product-card, .service-card, .blog-card, .post-card, .item-card, .info-card, .content-card, .box, .panel, .widget):hover {
  transform: translate(-3px, -3px) rotate(-.25deg);
  box-shadow: 7px 7px 0 var(--comic-ink) !important;
}

/* Button press: tactile comic impact. */
body :where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .button, .btn-primary, .btn-daftar, .cta, .cta-button, .read-more, .wp-block-button__link):active:not(:disabled) {
  transform: translate(3px, 3px) scale(.99);
  box-shadow: 1px 1px 0 var(--comic-ink) !important;
}

/* Images feel like panels without changing their source or dimensions. */
body :where(img, video) {
  transition: transform var(--comic-motion-speed) ease, filter var(--comic-motion-speed) ease;
}

body a:hover img,
body :where(.card, .article-card, .feature-card, .product-card, .service-card):hover img {
  filter: contrast(1.04) saturate(1.06);
}

body :where(.section-title, .section-heading, .block-title, .title-bar):hover {
  transform: rotate(.5deg) translateY(-1px);
}

/* Smoothly underline text links without touching button-like links. */
body main p a:not(.btn):not(.button),
body article p a:not(.btn):not(.button) {
  text-decoration-line: underline;
  text-decoration-color: var(--comic-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--comic-motion-speed) ease, text-decoration-thickness var(--comic-motion-speed) ease;
}

body main p a:hover,
body article p a:hover {
  text-decoration-thickness: 4px;
}

/* Keep form controls crisp and visible against comic backgrounds. */
body :where(input, select, textarea, button):focus-visible {
  outline: 3px dashed var(--comic-red) !important;
  outline-offset: 3px;
}

/* Accessible animation and responsive layout */
@media (max-width: 768px) {
  body {
    background-size: 10px 10px !important;
  }

  body :where(.hero, .hero-section, .banner, .main-banner, .intro, .page-hero, .jumbotron) {
    border-radius: 15px !important;
    box-shadow: 5px 5px 0 var(--comic-ink) !important;
  }

  body :where(.card, .article-card, .feature-card, .product-card, .service-card, .blog-card, .post-card, .item-card, .info-card, .content-card, .box, .panel, .widget) {
    box-shadow: 3px 3px 0 var(--comic-ink) !important;
  }

  body :where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .button, .btn-primary, .btn-daftar, .cta, .cta-button, .read-more, .wp-block-button__link) {
    max-width: 100%;
    white-space: normal;
  }

  body table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body *,
  body *::before,
  body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}