/* assets/css/jadul.css */
a:hover, button:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FF0000" d="M10 4 L20 8 L14 14 L18 20 L8 16 L4 24 L4 4 Z"/></svg>'), pointer;
}
.loading {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FFFF00" d="M12 2 L2 12 L6 12 L6 22 L18 22 L18 12 L22 12 Z"/></svg>'), wait;
}


/* CRT Effect (dari file Anda) */
.crt::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 100; /* Z-index harus tinggi agar overlay */
}

/* Guestbook entry background */
.guestbook-entry {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAOUlEQVR42u3OMQ0AAAgDsM2/aRBw4MDBwX5JkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJegK1bQdZ3Q9wPAAAAABJRU5ErkJggg==');
}

/* Glitch Image Effect */
.glitch-img {
  position: relative;
  animation: glitch-skew 1.5s infinite linear alternate;
  transition: all 0.3s; /* Untuk hover effect */
}
.glitch-img:hover {
  filter: contrast(1.5) brightness(1.2);
  transform: translate(-2px, 2px);
  box-shadow: 4px -4px 0px #FF00FF, -4px 4px 0px #00FFFF;
}

@keyframes glitch-skew {
  0% { transform: skew(0.5deg); }
  10% { transform: skew(-0.5deg); }
  20% { transform: skew(1deg); }
  30% { transform: skew(-1deg); }
  40% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}


/* Paper Texture */
.paper-texture {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Blackboard texture */
.blackboard {
  background-color: #0a3200;
  background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #f0f0f0;
  border: 10px solid #5a3d2b;
}

/* Glow Pulse Effect */
.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px #fff4, 0 0 20px #fff5;
}
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px #fff2, 0 0 10px #fff3;
  }
  50% {
    box-shadow: 0 0 15px #fff4, 0 0 25px #fff5;
  }
}
.bg-jadul-grainy-film {
  background-color: #333;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.04) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px, 5px 5px, 5px 5px;
  animation: grain-animation 0.5s steps(2) infinite;
}

@keyframes grain-animation {
  0% { background-position: 0 0, 50% 50%, 0 0, 0 0; }
  100% { background-position: 100% 100%, 0% 0%, 100% 100%, 100% 100%; }
}

.bg-jadul-diagonal-stripe {
  background-color: #fca311;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.bg-jadul-vintage-dot {
  background-color: #b5c4b1;
  background-image:
    radial-gradient(circle, #f0f0f0 3px, transparent 3px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* 3D Button */
.btn-3d {
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    background-color: #444; /* Tambahkan warna latar belakang */
    border-radius: 4px; /* Tambahkan border-radius */
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1); /* Tambahkan shadow */
}
.btn-3d:active {
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

/* Blink Animation dihapus karena sudah ada di tailwind.config.js */
/* Jika Anda ingin menggunakan utility class `animate-blink` dari Tailwind, maka definisikan di tailwind.config.js */
/* @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.animate-blink {
    animation: blink 1s step-end infinite;
} */

/* Typing Effect */
/* @keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
.type-animation {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3s steps(40) infinite alternate;
}

/* Custom retro text shadow */
.text-shadow-retro {
    text-shadow: 2px 2px #7C2D12, -2px -2px #BF4B1F; /* darker amber, lighter amber */
}

/* Retro box shadow for cards */
.shadow-retro-box {
    box-shadow: 8px 8px 0px rgba(0,0,0,0.7); /* Hard shadow for retro feel */
}

/* Retro button shadow */
.shadow-retro-btn {
    box-shadow: 6px 6px 0px rgba(0,0,0,0.7);
}

/* Styles for the glitch effects that are controlled by JS (for initial state or fallback) */
/* Jika di `tailwind.config.js`, bisa pakai utility class seperti `animate-glitch-text` */

/* Jika Anda ingin keyframes di jadul.css dan menerapkan langsung */
@keyframes text-glitch-anim {
    0% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    20% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    40% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    60% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    80% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    100% { text-shadow: none; }
}

@keyframes price-glitch-anim {
    0% { transform: translate(0px, 0px); }
    10% { transform: translate(1px, 1px); }
    20% { transform: translate(-1px, -1px); }
    30% { transform: translate(2px, 0px); }
    40% { transform: translate(0px, 2px); }
    50% { transform: translate(-2px, -2px); }
    60% { transform: translate(1px, -1px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(0px, -2px); }
    90% { transform: translate(2px, 1px); }
    100% { transform: translate(0px, 0px); }
}

/* Tambahan untuk animasi ikon */
@keyframes wrench {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    75% { transform: rotate(5deg); }
}
.animate-wrench { animation: wrench 1.5s infinite; }

@keyframes lock {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(0.9); }
}
.animate-lock { animation: lock 2s infinite; }

@keyframes pulse-slow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.animate-pulse-slow { animation: pulse-slow 2s infinite; }

@keyframes key-spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.animate-key-spin { animation: key-spin 3s linear infinite; }

@keyframes disk-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-disk-spin { animation: disk-spin 1s linear infinite; }

@keyframes cloud-upload {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.animate-cloud-upload { animation: cloud-upload 1s ease-in-out infinite alternate; }

@keyframes transfer {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px) rotate(180deg); }
}
.animate-transfer { animation: transfer 1.5s ease-in-out infinite; }


/* Styles untuk domain */
#domainForm {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antar elemen */
}
#domainInput {
    flex: 1; /* Agar input lebih lebar */
}
#domainExamples {
    display: none !important;
}
/* bg jadul css */
.bg-jadul-kertas-css {
  background-color: #f7e6c7; /* Warna krem dasar */
  background-image:
    /* Serat kertas halus */
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    /* Noda atau bintik samar */
    radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 0, 0, 0.02) 2px, transparent 2px);
  background-size: 20px 20px, 20px 20px, 50px 50px, 70px 70px;
  background-position: 0 0, 0 0, 10px 10px, 30px 30px;
}
.bg-jadul-tekstur-usang-css {
  background-color: #555; /* Warna dasar abu-abu gelap */
  background-image:
    /* Lapisan noise halus */
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    /* Bintik-bintik kasar/grunge */
    radial-gradient(circle, rgba(0, 0, 0, 0.2) 2px, transparent 2px),
    radial-gradient(circle, rgba(0, 0, 0, 0.15) 3px, transparent 3px);
  background-size: 4px 4px, 4px 4px, 15px 15px, 25px 25px;
  background-position: 0 0, 0 0, 5px 5px, 12px 12px;
  background-blend-mode: multiply; /* Untuk efek perpaduan yang lebih gelap */
  opacity: 0.9;
}
.bg-jadul-tv-noise-css {
  background-color: #000; /* Latar belakang hitam */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 2px, transparent 2px);
  background-size: 3px 3px, 5px 5px;
  animation: noise-animation-css 0.1s steps(2) infinite;
}

@keyframes noise-animation-css {
  0% { background-position: 0 0, 50% 50%; }
  100% { background-position: 100% 100%, 0% 0%; }
}
.bg-jadul-burn-edge {
  background-color: #fcebc7;
  background-image:
    radial-gradient(circle at top left, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(circle at top right, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(circle at bottom left, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(circle at bottom right, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 20px 20px, 20px 20px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0;
}

.bg-jadul-plaid {
  background-color: #9c4a4a;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.3) 5px, transparent 5px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 5px, transparent 5px);
  background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

.bg-jadul-color-bleed {
  background-color: #1a1a1a;
  background-image:
    linear-gradient(to right, rgba(255, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(to right, transparent 50%, rgba(0, 255, 0, 0.1) 51%, transparent 51%),
    linear-gradient(to right, transparent 75%, rgba(0, 0, 255, 0.1) 76%, transparent 76%);
  background-size: 3px 100%;
  filter: blur(0.8px);
  animation: color-shift 3s infinite alternate;
}

@keyframes color-shift {
  0% { background-position: 0 0; }
  100% { background-position: 5px 0; }