/*-----------------------------------*\
  #style.css (Versi Minimal untuk Tailwind CDN)
\*-----------------------------------*/

/* * RESET & BASE STYLES
 * Sebagian besar di-handle oleh Tailwind.
 * Kita hanya perlu menambahkan beberapa hal dasar.
 */
::selection {
  background: hsl(45, 100%, 72%); /* --orange-yellow-crayola */
  color: hsl(0, 0%, 7%); /* --smoky-black */
}

:focus { 
  outline-color: hsl(45, 100%, 72%); /* --orange-yellow-crayola */
}

/* * ATURAN UNTUK KELAS .active YANG DITAMBAHKAN OLEH JAVASCRIPT
 */

/* 1. Halaman (Article) Tampil / Sembunyi */
article.page {
  display: none;
}
article.page.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

/* 2. Sidebar Toggle */
.sidebar {
  max-height: 112px; /* Mobile (default) */
}
.sidebar.active {
  max-height: 420px; /* Mobile (active) */
}
@media (min-width: 450px) { /* xs */
  .sidebar { max-height: 203px; }
  .sidebar.active { max-height: 384px; }
}
@media (min-width: 580px) { /* sm */
  .sidebar { max-height: 217px; }
  .sidebar.active { max-height: 584px; }
}
/* ==============================================
  PERBAIKAN 3: min-width: 50px -> min-width: 1250px
  ==============================================
*/
@media (min-width: 1250px) { /* xl */
  /* Di desktop, sidebar selalu terbuka */
  .sidebar, .sidebar.active { 
    max-height: max-content; 
    opacity: 1;
    visibility: visible;
  }
  .sidebar-info_more {
    opacity: 1;
    visibility: visible;
  }
}

/* 3. Navbar Link Active */
.navbar-link.active {
  color: hsl(45, 100%, 72%); /* --orange-yellow-crayola */
}

/* 4. Portfolio Filter (jika Anda putuskan untuk memakainya lagi) */
.filter-item button.active {
  color: hsl(45, 100%, 72%); /* --orange-yellow-crayola */
}
.filter-select.active .select-icon {
  transform: rotate(0.5turn);
}
.filter-select.active + .select-list {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.project-item { 
  display: none; 
}
.project-item.active {
  display: block;
  animation: scaleUp 0.25s ease forwards;
}

/* * STYLING KHUSUS (Icon & Scrollbar)
 */
.icon-box ion-icon { 
  --ionicon-stroke-width: 35px; 
}
body::-webkit-scrollbar { 
  width: 20px; 
}
body::-webkit-scrollbar-track { 
  background: hsl(0, 0%, 7%); /* --smoky-black */
}
body::-webkit-scrollbar-thumb {
  border: 5px solid hsl(0, 0%, 7%); /* --smoky-black */
  background: hsla(0, 0%, 100%, 0.1);
  border-radius: 20px;
  box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11), inset -1px -1px 0 hsla(0, 0%, 0, 1);
}
body::-webkit-scrollbar-thumb:hover { 
  background: hsla(0, 0%, 100%, 0.15); 
}
body::-webkit-scrollbar-button { 
  height: 60px; 
}

/* Garis bawah judul (di-style di sini agar tidak berulang di HTML) */
.article-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: linear-gradient( to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%) );
  border-radius: 3px;
}
@media (min-width: 580px) {
  .article-title {
    padding-bottom: 15px;
  }
  .article-title::after {
    width: 40px;
    height: 5px;
  }
}


/*-----------------------------------*\
  #ANIMASI @keyframes (WAJIB DISIMPAN)
\*-----------------------------------*/

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes scaleUp {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

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

/* ... Animasi Kucing (Tidak berubah) ... */
.loading-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: hsl(240, 2%, 12%); /* --eerie-black-2 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
.cat-animation-container {
  width: 220px;
  margin-bottom: 20px;
  transform: scale(0.9);
  position: relative;
}
.cat-animation-container .cat {
  position: relative;
  width: 188px;
  height: 260px;
  color: #fff;
  margin: 0 auto;
}
.cat-animation-container .cat .paw {
  position: absolute;
  top: 176px;
  left: 88px;
  width: 20px;
  height: 80px;
  background: currentColor;
  border-radius: 20px/0 0 80px 40px;
  transform: rotate(10deg);
  animation: paw_l 0.45s infinite linear;
}
.cat-animation-container .cat .paw:after {
  position: absolute;
  content: "";
  bottom: -5px;
  left: -4px;
  width: 20px;
  height: 26px;
  background: currentColor;
  border-radius: 50%;
  transform: rotate(24deg);
}
.cat-animation-container .cat .paw:nth-child(2) {
  left: 130px;
  animation: paw_r 0.45s infinite linear;
}
.cat-animation-container .cat .shake {
  position: absolute;
  width: 100%;
  top: 0;
  animation: shake 0.45s infinite linear;
}
.cat-animation-container .cat:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 130px;
  height: 30px;
  margin-left: -50px;
  margin-top: -20px;
  background: #616161;
  opacity: 0.4;
  border-radius: 50%;
  animation: shadow 0.45s infinite linear;
  animation-delay: calc(0.45s / 2);
}
.cat-animation-container .cat:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 100%;
  width: 15px;
  height: 10px;
  margin-left: -30px;
  margin-top: -10px;
  background: #616161;
  opacity: 0.3;
  border-radius: 50%;
  box-shadow: 50px 0 #616161, 100px 0 #616161, 150px 0 #616161, 200px 0 #616161, 250px 0 #616161, 300px 0 #616161;
  animation: track calc(0.45s / 2) infinite linear;
}
.cat-animation-container .cat .tail {
  position: absolute;
  top: 0;
  right: -4px;
  width: 160px;
  height: 150px;
  border: 20px solid;
  border-color: currentColor transparent transparent currentColor;
  transform: rotate(45deg);
  border-radius: 120px/106px 120px 0 120px;
  box-sizing: border-box;
  animation: tail 0.45s infinite linear;
}
.cat-animation-container .cat .tail:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  border-radius: 50%;
  bottom: 0;
  box-shadow: 2px 4px currentColor, 2px 7px currentColor, 2px 10px currentColor, 1px 14px currentColor, -1px 18px currentColor, -5px 22px currentColor, -10px 25px currentColor, -15px 28px currentColor, -20px 30px currentColor;
}
.cat-animation-container .cat .main { position: absolute; top: 14px; right: 0; width: 144px; height: 216px; color: currentColor; }
.cat-animation-container .cat .main .head { position: absolute; bottom: -10px; left: 20px; width: 104px; height: 180px; background: currentColor; border-radius: 55px/100px 100px 65px 65px; transform: rotate(40deg); }
.cat-animation-container .cat .main .body { position: absolute; right: 0; width: 130px; height: 180px; background: currentColor; border-radius: 65px/70px 70px 100px 100px; }
.cat-animation-container .cat .main .body .leg { position: absolute; right: -10px; top: 20px; width: 50px; height: 116px; background: currentColor; border-radius: 25px/0 60px 50px 0; }
.cat-animation-container .cat .main .body .leg:before { position: absolute; content: ""; bottom: -4px; right: 0; width: 20px; height: 40px; border: 3px solid transparent; border-radius: 50%; border-left-color: #616161; transform: rotate(6deg); }
.cat-animation-container .cat .main .body .leg:after { position: absolute; content: ""; left: 3px; bottom: 35px; width: 76px; height: 70px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: #616161; transform: rotate(65deg); }
.cat-animation-container .cat .main .face { position: absolute; bottom: 0; width: 76px; height: 80px; }
.cat-animation-container .cat .main .face .nose { position: absolute; bottom: 8px; left: 50%; width: 18px; height: 9px; margin-left: -10px; background: #9c1b4d; border-radius: 20px/10px 10px 20px 20px; }
.cat-animation-container .cat .main .face .mustache_cont { position: absolute; bottom: 5px; width: 20px; height: 10px; animation: mustache_l 0.45s infinite linear; }
.cat-animation-container .cat .main .face .mustache_cont:nth-child(2) { right: 0; animation: mustache_r 0.45s infinite linear; }
.cat-animation-container .cat .main .face .mustache { position: absolute; top: 0; width: 100%; border: 1px solid #616161; transform-origin: 100% 0; transform: rotate(-10deg); }
.cat-animation-container .cat .main .face .mustache:last-child { top: 6px; transform: rotate(-20deg); }
.cat-animation-container .cat .main .face .eye { position: absolute; top: 28px; left: -8px; width: 30px; height: 30px; background: #fff; border: 3px solid #000; border-radius: 50%; box-sizing: border-box; }
.cat-animation-container .cat .main .face .eye:nth-child(5) { top: 26px; left: 36px; }
.cat-animation-container .cat .main .face .eye:after { position: absolute; content: ""; width: 10px; height: 10px; right: 1px; top: 4px; background: #000; border-radius: 50%; animation: eye 0.45s infinite linear; }
.cat-animation-container .cat .main .face .brow_cont { position: absolute; top: 14px; left: 10px; width: 10px; height: 10px; }
.cat-animation-container .cat .main .face .brow_cont:nth-child(7) { transform: rotateY(180deg) rotateZ(0); left: 38px; }
.cat-animation-container .cat .main .face .brow { position: absolute; top: 20%; height: 60%; border: 1px solid #616161; transform-origin: 100% 0; transform: rotate(10deg); }
.cat-animation-container .cat .main .face .brow:last-child { top: 0; height: 100%; left: 6px; transform: rotate(3deg); }
.cat-animation-container .cat .main .face .ear_l { position: absolute; top: -17px; width: 20px; height: 30px; background: currentColor; border-radius: 20px/55px 55px 0 0; transform-origin: 50% 100%; overflow: hidden; transform: rotate(-20deg); animation: ear_l 0.45s infinite linear; }
.cat-animation-container .cat .main .face .ear_l .inner { position: absolute; top: 5px; left: 50%; width: 6px; height: 14px; margin-left: -4px; background: #616161; border-radius: 7px/20px 20px 0 0; }
.cat-animation-container .cat .main .face .ear_r { position: absolute; right: 0; margin-top: -22px; width: 36px; height: 30px; transform-origin: 50% 100%; overflow: hidden; transform: rotate(20deg); animation: ear_r 0.45s infinite linear; }
.cat-animation-container .cat .main .face .ear_r .outer { position: absolute; width: 30px; height: 200%; border: 3px solid #616161; border-radius: 20px/55px 55px 0 0; }
.cat-animation-container .cat .main .face .ear_r .inner { position: absolute; top: 50%; left: 50%; width: 12px; height: 26px; margin-left: -6px; background: #616161; border-radius: 50%; }

@keyframes paw_l {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-8deg); }
}
@keyframes paw_r {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-8deg); }
}
@keyframes shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(4px) rotate(1deg); }
}
@keyframes shadow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.9); }
}
@keyframes track {
  0% { transform: translateX(0); opacity: 0.3; }
  100% { transform: translateX(-300px); opacity: 0; }
}
@keyframes tail {
  0%, 100% { transform: rotate(45deg); }
  50% { transform: rotate(35deg); }
}
@keyframes mustache_l {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-10deg); }
}
@keyframes mustache_r {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(10deg); }
}
@keyframes eye {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}
@keyframes ear_l {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(-25deg); }
}
@keyframes ear_r {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-animation-container .cat * { animation: none !important; transition: none !important; }
}
.loading-text {
  color: hsl(45, 100%, 72%); /* --orange-yellow-crayola */
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 20px;
}

/* OFFLINE PAGE */
.offline-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arvo', serif;
}
.page_404 {
  padding: 40px 0;
  background: #fff;
  font-family: 'Arvo', serif;
}
.page_404 img { width: 100%; }
.four_zero_four_bg {
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.four_zero_four_bg h1 { font-size: 80px; color: #333; }
.four_zero_four_bg h3 { font-size: 28px; color: #333; }
.link_404 {
  color: #fff !important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
}
.contant_box_404 { margin-top: -50px; color: #333; }