@charset "utf-8";
/* CSS Document */

.slider {
  position: relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
}
.slide {
  display: none;
}
.slide.active {
  display: block;
  animation: fade 1s ease-in-out;
}
.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00ffff88;
  border: none;
  color: black;
  font-size: 1em;
  padding: 10px;
  cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.showcase {
  background: radial-gradient(circle, #202030, #0b0b15);
  text-align: center;
  padding: 60px 20px;
  color: white;
}
.kiosk {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px dashed #00ffff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 30px #00ffff66;
  backdrop-filter: blur(10px);
}
.kiosk img {
  border-radius: 10px;
  margin-bottom: 20px;
}
.desc h3 {
  color: #00ffff;
  margin-bottom: 10px;
}
.desc p {
  font-size: 0.75em;
  line-height: 1.6em;
}

body {
  background: radial-gradient(circle at center, #0f0f1a, #000);
  font-family: 'Oxanium', sans-serif;
  color: #fff;
}

.holo-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
  perspective: 0px;
}

.holo-frame {
  background: rgba(0, 255, 255, 0.1);
  border: 2px solid #0ff;
  box-shadow: 0 0 20px #0ff;
  padding: 2rem;
  border-radius: 12px;
  transform: rotateY(0deg);
  animation: pulseGlow 2s infinite;
  text-align: center;
}

.product-title {
  font-size: 1rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px #0ff;
}

.product-desc {
  font-size: 0.75rem;
  margin-bottom: 2rem;
}

.cta-button {
  background: transparent;
  border: 2px solid #0ff;
  color: #0ff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: #0ff;
  color: #000;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px #0ff; }
  50% { box-shadow: 0 0 40px #0ff; }
}

.portfolio {
  text-align: center;
  padding: 60px 20px;
}
.grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.card {
  background: #0f0f1a;
  border-radius: 10px;
  padding: 10px;
  width: 300px;
  box-shadow: 0 0 30px #00ffff44;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-10px) scale(1.03);
}
.card img {
  width: 100%;
  border-radius: 5px;
}
.card p {
  margin-top: 10px;
  color: #eee;
} 

body {
  margin: 0;
  font-family: 'Oxanium', sans-serif;
  background: radial-gradient(#01010c, #050014);
  color: white;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 255, 255, 0.05);
  border-bottom: 1px solid #0ff;
  padding: 1rem 2rem;
  z-index: 1000;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 0;
}

.navbar a {
  color: #0ff;
  text-decoration: none;
  transition: color 0.3s;
}

.navbar a:hover {
  color: #fff;
}

section {
  padding: 6rem 2rem;
  text-align: center;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url('https://www.transparenttextures.com/patterns/black-paper.png');
}

.hero h1 {
  font-size: 3rem;
  text-shadow: 0 0 10px #0ff;
}

.hero p {
  font-size: 0.75rem;
  opacity: 0.8;
}

.about {
  background: rgba(0, 255, 255, 0.04);
  border-top: 1px solid #0ff;
  border-bottom: 1px solid #0ff;
}

/* slide image responsive */
.portfolio h2 {
  font-size: 2.5em;
  margin-bottom: 40px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.card {
  background: #0f0f1a;
  border-radius: 10px;
  box-shadow: 0 0 20px #00ffff33;
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-8px);
}
.card img {
  width: 100%;
  border-radius: 5px;
}
.card p {
  padding: 10px;
  font-size: 0.85em;
}

/* center text */
.center-text {
  text-align: center;
}


/* logo hover */

#logo {
  transition: filter 0.4s ease, transform 0.4s ease;
}
#logo:hover {
  filter: drop-shadow(0 0 8px #00f6ff) brightness(1.4);
  transform: scale(1.07) rotate(1deg);
}

/* halaman fasilitas */
<style>
    /* Reset and base styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Oxanium', sans-serif;
      background: black;
      color: white;
      overflow-x: hidden;
    }

    /* Twinkling stars background */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: radial-gradient(white 1px, transparent 1px);
      background-size: 3px 3px;
      animation: twinkle 2s infinite alternate;
      z-index: -1;
      opacity: 0.2;
    }
    @keyframes twinkle {
      from { opacity: 0.2; }
      to { opacity: 0.4; }
    }

    /* Heading */
    header {
      text-align: center;
      padding: 2rem 1rem;
    }
    header h1 {
      font-size: 2.5rem;
      letter-spacing: 2px;
      color: #00ffff;
      text-shadow: 0 0 10px #00ffff;
      animation: pulse 3s infinite;
    }
    @keyframes pulse {
      0%, 100% { text-shadow: 0 0 10px #00ffff; }
      50% { text-shadow: 0 0 20px #00ffff; }
    }

    /* Gallery grid */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      padding: 2rem;
      max-width: 1200px;
      margin: auto;
    }

    .photo {
      position: relative;
      border: 2px solid #444;
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .photo:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px #00ffff;
      border-color: #00ffff;
    }

    .photo img {
      width: 100%;
      display: block;
      height: auto;
    }

    .caption {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      text-align: center;
      padding: 0.5rem;
      font-size: 0.75rem;
    }
  </style>
  
  /* Halaman fasilitas */
  <style>
    /* Base Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Oxanium', sans-serif;
      background: black;
      color: white;
      overflow-x: hidden;
      position: relative;
    }

    /* Twinkling Stars */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: transparent;
      z-index: -2;
    }
    body::after {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: url('https://www.transparenttextures.com/patterns/stardust.png');
      animation: twinkle 3s infinite alternate;
      z-index: -1;
      opacity: 0.3;
    }
    @keyframes twinkle {
      0% { opacity: 0.2; }
      100% { opacity: 0.4; }
    }

    /* Glowing Planet */
    .planet {
      position: fixed;
      bottom: -100px;
      right: -100px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, #00ffff55, transparent 70%);
      border-radius: 50%;
      z-index: -1;
      animation: floatPlanet 10s infinite ease-in-out;
    }
    @keyframes floatPlanet {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    /* Header */
    header {
      text-align: center;
      padding: 2rem 1rem;
    }
    header h1 {
      font-size: 2.5rem;
      letter-spacing: 2px;
      color: #00ffff;
      text-shadow: 0 0 10px #00ffff;
      animation: pulse 3s infinite;
    }
    @keyframes pulse {
      0%, 100% { text-shadow: 0 0 10px #00ffff; }
      50% { text-shadow: 0 0 20px #00ffff; }
    }

    /* Gallery Grid */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      padding: 2rem;
      max-width: 1200px;
      margin: auto;
    }

    .photo {
      position: relative;
      border: 2px solid #444;
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .photo:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px #00ffff;
      border-color: #00ffff;
    }

    .photo img {
      width: 100%;
      display: block;
      height: auto;
    }

    .caption {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      text-align: center;
      padding: 0.5rem;
      font-size: 0.75rem;
    }

/* section data kontak */

.info-section {
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 1rem;
}

    /* Pop-up Modal */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      background: rgba(0, 0, 0, 0.9);
      padding: 2rem;
      border-radius: 10px;
      color: #00ffff;
      text-shadow: 0 0 10px #00ffff;
      max-width: 90%;
      width: 400px;
      z-index: 10;
      transition: transform 0.3s ease;
    }

    .popup.active {
      transform: translate(-50%, -50%) scale(1);
    }

    .popup p {
      font-size: 0.85rem;
      line-height: 1.5;
    }

    /* Responsive tweaks */
    @media (max-width: 600px) {
      header h1 {
        font-size: 2rem;
      }
      .popup {
        width: 90%;
        padding: 1.5rem;
      }
    }
  </style>
 
 /* NEWSPAPER PROFILE PAGE */
  
/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Segoe UI', sans-serif;
  color: #e0f7fa;
  background-color: #000;
  overflow-x: hidden;
  position: relative;
}

/* Matrix-style Background */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.1) 0px,
    rgba(0, 255, 0, 0.1) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: scrollMatrix 20s linear infinite;
  opacity: 0.3;
}

@keyframes scrollMatrix {
  0% { background-position-y: 0; }
  100% { background-position-y: 1000px; }
}

/* Navigation Bar */
.navbar {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 1rem;
  text-align: center;
  box-shadow: 0 0 10px #00ffcc;
}
.navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.navbar li {
  margin: 0 1rem;
}
.navbar a {
  color: #00ffcc;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}
.navbar a:hover {
  color: #ffffff;
  text-shadow: 0 0 5px #00ffcc;
}

/* Content Layout */
.content {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
}
.article {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(0, 0, 0, 0.6);
  margin-bottom: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px #00ffcc;
  overflow: hidden;
}
.article img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  flex: 1;
}
.article .text {
  flex: 2;
  padding: 1rem;
}
.article h2 {
  margin-bottom: 0.5rem;
  color: #00ffcc;
}
.article p {
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .article {
    flex-direction: column;
    align-items: center;
  }
  .article img {
    max-width: 100%;
  }
}

/*scroll smooth profile page */
.news-item {
  opacity: 0;
  transform: translateY(30px);
}