@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");


/*==================== 🎨 VARIABEL CSS GLOBAL ====================*/
:root {
  --header-height: 3rem;

  --hue-color: 225;
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);

  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;

  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

  --body-font: 'Poppins', sans-serif;
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  --font-medium: 500;
  --font-semi-bold: 600;

  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/*==================== 💻 VARIABEL UNTUK LAYAR LEBAR (DESKTOP) ====================*/
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/*==================== 🌑 VARIABEL MODE GELAP (DARK THEME) ====================*/
:root.dark-theme {
  --first-color-second: hsl(var(--hue-color), 30%, 8%);
  --title-color: hsl(var(--hue-color), 8%, 95%);
  --text-color: hsl(var(--hue-color), 8%, 75%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --body-color: hsl(var(--hue-color), 28%, 12%);
  --container-color: hsl(var(--hue-color), 29%, 16%);
  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

/*==================== 🔄 BASE RESET ====================*/
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }

body {
  margin: 0 0 var(--header-height) 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background-color 0.6s ease, color 0.6s ease;
  animation: fadeInBody 1.2s ease-out;
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color 0.6s ease;
  -webkit-transition: color 0.6s ease;
  -moz-transition: color 0.6s ease;
  -ms-transition: color 0.6s ease;
  -o-transition: color 0.6s ease;
}

ul { list-style: none; }

a { text-decoration: none; color: inherit; transition: color 0.3s ease; }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}
img:hover { transform: scale(1.02); }

/*==================== 📦 SECTION STYLE ====================*/
.section { padding: 2rem 0 4rem; animation: fadeUp 0.8s ease both; }
.section__title { font-size: var(--h1-font-size); color: var(--title-color); text-align: center; margin-bottom: var(--mb-0-75); }
.section__subtitle { display: block; font-size: var(--small-font-size); margin-bottom: var(--mb-3); text-align: center; color: var(--text-color-light); }

/*==================== 📐 LAYOUT STRUCTURE ====================*/
.container { max-width: 768px; margin-left: var(--mb-1-5); margin-right: var(--mb-1-5); transition: background-color 0.6s ease, color 0.6s ease; }
.grid { display: grid; gap: 1.5rem; }

/*==================== 🧰 UTILITY CLASSES ====================*/
.text-center { text-align: center; }
.mt-1 { margin-top: var(--mb-1); }
.mb-2 { margin-bottom: var(--mb-2); }
.p-1  { padding: var(--mb-1); }
.rounded { border-radius: 0.5rem; }

/*==================== 📐 GRID RESPONSIVE ====================*/
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }

@media screen and (min-width: 768px) {
  .grid-md { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}


@keyframes fadeInBody { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

body { cursor: none !important; }

.wave { animation-name: wave-animation; animation-duration: 2.5s; animation-iteration-count: infinite; transform-origin: 70% 70%; display: inline-block; }
@keyframes wave-animation {
  0% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); } 100% { transform: rotate(0deg); }
}

@keyframes fadeInApple {
  0% { opacity: 0; transform: scale(0.92) translateY(10px); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

html.loading, body.loading { overflow: hidden; height: 100vh; }

@media screen and (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100vw; margin: 0; padding: 0; overscroll-behavior: contain; }
  .section { padding-bottom: 2rem !important; margin-bottom: 0 !important; }
  body > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
}

noscript { display: block; }
noscript style { display: none !important; }

.circle { height: 24px; width: 24px; border-radius: 24px; background-color: black; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999999; }

@media screen and (max-width: 350px) {
  .container { margin-left: var(--mb-1); margin-right: var(--mb-1); padding-left: 1rem; padding-right: 1rem; }
  .nav__list { column-gap: 0; }
}

@media screen and (max-width: 812px) and (orientation: landscape) {
  body { font-size: 0.9rem; }
}

@media screen and (min-width: 768px) {
  .container { margin-left: auto; margin-right: auto; }
  body { margin: 0; transition: background-color 0.6s ease, color 0.6s ease; scroll-behavior: smooth; }
  .section { padding: 6rem 0 2rem; }
  .section__subtitle { margin-bottom: 4rem; }
  .nav__icon-img { display: none; }
  .nav__list { display: flex; column-gap: 2rem; }
  .change-theme { margin: 0; transition: transform 0.4s ease, color 0.4s ease; }
}

@media screen and (min-width: 1024px) {
  .swiper-container-horizontal > .swiper-pagination-bullets { bottom: -4.5rem; }
}



/* ====================  SCROLLBAR  ==================== */
html { scrollbar-gutter: stable both-edges; }

:root{
  --sb-track: var(--scroll-bar-color, #eef1f5);
  --sb-thumb: var(--scroll-thumb-color, #c7ccd1);
  --sb-accent: var(--first-color, #6c5ce7);
  --sb-ring: color-mix(in srgb, var(--sb-accent) 22%, transparent);
  --sb-thumb-start: color-mix(in srgb, var(--sb-accent) 55%, #ffffff 0%);
  --sb-thumb-end:   color-mix(in srgb, var(--sb-accent) 35%, #000000 0%);
}

:is(html.dark-theme, :root.dark-theme, body.dark-theme){
  --sb-track: hsl(var(--hue-color, 225), 12%, 22%);
  --sb-thumb: hsl(var(--hue-color, 225), 12%, 38%);
  --sb-ring:  color-mix(in srgb, var(--sb-accent) 28%, transparent);
  --sb-thumb-start: color-mix(in srgb, var(--sb-accent) 58%, #0b0b0b 0%);
  --sb-thumb-end:   color-mix(in srgb, var(--sb-accent) 38%, #000000 0%);
}

body, .scroll-area{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg, var(--sb-thumb-start), var(--sb-thumb-end));
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

::-webkit-scrollbar-thumb:hover{
  box-shadow: 0 0 0 3px var(--sb-ring);
  transform: translateY(-1px);
}

::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sb-accent) 70%, #ffffff 0%),
      color-mix(in srgb, var(--sb-accent) 50%, #000000 0%));
  transform: translateY(0);
}

@media (max-width: 768px){
  ::-webkit-scrollbar{ width: 8px; height: 8px; }
  body, .scroll-area{ scrollbar-width: thin; }
}

.scroll-area{ overflow: auto; }
.scroll-y   { overflow-y: auto; overflow-x: hidden; }
.scroll-x   { overflow-x: auto; overflow-y: hidden; }


/* ==================== 🌙 Dark Theme Tuning ==================== */
:root.dark-theme,
html.dark-theme {
  --scroll-bar-color: hsl(var(--hue-color, 225), 12%, 22%);
  --scroll-thumb-color: hsl(var(--hue-color, 225), 12%, 38%);
}

:root.dark-theme ::-webkit-scrollbar-track,
html.dark-theme ::-webkit-scrollbar-track {
  background: var(--scroll-bar-color);
}

:root.dark-theme ::-webkit-scrollbar-thumb,
html.dark-theme ::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--first-color, #6c5ce7) 55%, #0b0b0b 0%),
      color-mix(in srgb, var(--first-color, #6c5ce7) 35%, #000 0%));
}



/* ==================== 1) LIGHT MODE: KONTRAS TINGGI ==================== */
:root:not(.dark-theme),
html:not(.dark-theme) {
  --title-color: #0f172a;
  --text-color: #111827;
  --text-color-light: #374151;
}

.section,
.home, .about, .skills, .services, .portfolio, .project, .contact,
.footer__bg,
.nav__logo, .nav__link,
.skill-item p,
.about__info-name,
.contact__subtitle,
.section__title,
.section__subtitle {
  color: inherit;
}

/* ==================== 2) TRANSISI THEME BIAR CEPAT ==================== */
html, body {
  transition: background-color .18s ease, color .18s ease;
}
h1, h2, h3, h4 {
  transition: color .18s ease;
}

html.no-theme-transition, html.no-theme-transition * {
  transition: none !important;
}



/* ==================== BUTTON / MODE GELAP DAN TERANG ==================== */
:is(html.dark-theme, :root.dark-theme, body.dark-theme) .btn-premium{
  --btn-bg-1:#ffffff;
  --btn-bg-2:#f6f8fc;
  --btn-fg:#0b1220;
  --btn-border:rgba(17,24,39,.12);
  --btn-glow:rgba(17,24,39,.10);
  --btn-elev:0 10px 22px rgba(17,24,39,.16);

  background:linear-gradient(180deg,var(--btn-bg-1),var(--btn-bg-2));
  color:var(--btn-fg);
  border:1px solid var(--btn-border);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(17,24,39,.06),
    var(--btn-elev);
}

:is(html.dark-theme, :root.dark-theme, body.dark-theme) .btn-premium:hover{
  box-shadow:
    0 0 0 4px var(--btn-glow),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(17,24,39,.08),
    0 16px 30px rgba(17,24,39,.18);
}

:is(html.dark-theme, :root.dark-theme, body.dark-theme) .btn-premium:focus-visible{
  box-shadow:
    0 0 0 5px rgba(17,24,39,.15),
    inset 0 1px 0 #fff,
    0 18px 34px rgba(17,24,39,.22);
}

.btn-premium__icon{
  width:1.6rem;height:1.6rem;object-fit:contain;
  filter:brightness(0) invert(1);
  transition:transform .22s ease, filter .25s ease, opacity .25s ease;
}
:is(html.dark-theme, :root.dark-theme, body.dark-theme) .btn-premium__icon{
  filter:none;
}