body {
    background-color: hsl(220, 33%, 98%);
    overflow-x: hidden;
}
/* bacground perpus */

.view {
    --color-0: #fff;
    --color-1: #111;
    --color-2: #222;
    --color-3: #333;
    --color-4: #2e2e2e;
    --color-5: #d2b48c;
    --color-6: #b22222;
    --color-7: #871a1a;
    --color-8: #ff6347;
    --color-9: #ff3814;
    width: 100%;
    height: 100%;
    background-color: var(--color-1);
    background-image:
        linear-gradient(to top, var(--color-2) 5%, var(--color-1) 6%, var(--color-1) 7%, transparent 7%), linear-gradient(to bottom, var(--color-1) 30%, transparent 80%),
        linear-gradient(to right, var(--color-2), var(--color-4) 5%, transparent 5%), linear-gradient(to right, transparent 6%, var(--color-2) 6%, var(--color-4) 9%, transparent 9%),
        linear-gradient(to right, transparent 27%, var(--color-2) 27%, var(--color-4) 34%, transparent 34%),
        linear-gradient(to right, transparent 51%, var(--color-2) 51%, var(--color-4) 57%, transparent 57%), linear-gradient(to bottom, var(--color-1) 35%, transparent 35%),
        linear-gradient(to right, transparent 42%, var(--color-2) 42%, var(--color-4) 44%, transparent 44%),
        linear-gradient(to right, transparent 45%, var(--color-2) 45%, var(--color-4) 47%, transparent 47%),
        linear-gradient(to right, transparent 48%, var(--color-2) 48%, var(--color-4) 50%, transparent 50%),
        linear-gradient(to right, transparent 87%, var(--color-2) 87%, var(--color-4) 91%, transparent 91%), linear-gradient(to bottom, var(--color-1) 37.5%, transparent 37.5%),
        linear-gradient(to right, transparent 14%, var(--color-2) 14%, var(--color-4) 20%, transparent 20%), linear-gradient(to bottom, var(--color-1) 40%, transparent 40%),
        linear-gradient(to right, transparent 10%, var(--color-2) 10%, var(--color-4) 13%, transparent 13%),
        linear-gradient(to right, transparent 21%, var(--color-2) 21%, #1a1a1a 25%, transparent 25%),
        linear-gradient(to right, transparent 58%, var(--color-2) 58%, var(--color-4) 64%, transparent 64%),
        linear-gradient(to right, transparent 92%, var(--color-2) 92%, var(--color-4) 95%, transparent 95%), linear-gradient(to bottom, var(--color-1) 48%, transparent 48%),
        linear-gradient(to right, transparent 96%, var(--color-2) 96%, #1a1a1a 99%, transparent 99%),
        linear-gradient(
            to bottom,
            transparent 68.5%,
            transparent 76%,
            var(--color-1) 76%,
            var(--color-1) 77.5%,
            transparent 77.5%,
            transparent 86%,
            var(--color-1) 86%,
            var(--color-1) 87.5%,
            transparent 87.5%
        ),
        linear-gradient(to right, transparent 35%, var(--color-2) 35%, var(--color-4) 41%, transparent 41%), linear-gradient(to bottom, var(--color-1) 68%, transparent 68%),
        linear-gradient(to right, transparent 78%, var(--color-3) 78%, var(--color-3) 80%, transparent 80%, transparent 82%, var(--color-3) 82%, var(--color-3) 83%, transparent 83%),
        linear-gradient(to right, transparent 66%, var(--color-2) 66%, var(--color-4) 85%, transparent 85%);
    background-size: 300px 150px;
    background-position: center bottom;
}

.view:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: var(--color-1);
    background-image:
        linear-gradient(to top, var(--color-5) 5%, var(--color-1) 6%, var(--color-1) 7%, transparent 7%), linear-gradient(to bottom, var(--color-1) 30%, transparent 30%),
        linear-gradient(to right, var(--color-6), var(--color-7) 5%, transparent 5%), linear-gradient(to right, transparent 6%, var(--color-8) 6%, var(--color-9) 9%, transparent 9%),
        linear-gradient(to right, transparent 27%, #556b2f 27%, #39481f 34%, transparent 34%), linear-gradient(to right, transparent 51%, #fa8072 51%, #f85441 57%, transparent 57%),
        linear-gradient(to bottom, var(--color-1) 35%, transparent 35%), linear-gradient(to right, transparent 42%, #008080 42%, #004d4d 44%, transparent 44%),
        linear-gradient(to right, transparent 45%, #008080 45%, #004d4d 47%, transparent 47%), linear-gradient(to right, transparent 48%, #008080 48%, #004d4d 50%, transparent 50%),
        linear-gradient(to right, transparent 87%, #789 87%, #4f5d6a 91%, transparent 91%), linear-gradient(to bottom, var(--color-1) 37.5%, transparent 37.5%),
        linear-gradient(to right, transparent 14%, #bdb76b 14%, #989244 20%, transparent 20%), linear-gradient(to bottom, var(--color-1) 40%, transparent 40%),
        linear-gradient(to right, transparent 10%, #808000 10%, #4d4d00 13%, transparent 13%), linear-gradient(to right, transparent 21%, #8b4513 21%, #5e2f0d 25%, transparent 25%),
        linear-gradient(to right, transparent 58%, #8b4513 58%, #5e2f0d 64%, transparent 64%), linear-gradient(to right, transparent 92%, #2f4f4f 92%, #1c2f2f 95%, transparent 95%),
        linear-gradient(to bottom, var(--color-1) 48%, transparent 48%), linear-gradient(to right, transparent 96%, #2f4f4f 96%, #1c2f2f 99%, transparent 99%),
        linear-gradient(
            to bottom,
            transparent 68.5%,
            transparent 76%,
            var(--color-1) 76%,
            var(--color-1) 77.5%,
            transparent 77.5%,
            transparent 86%,
            var(--color-1) 86%,
            var(--color-1) 87.5%,
            transparent 87.5%
        ),
        linear-gradient(to right, transparent 35%, #cd5c5c 35%, #bc3a3a 41%, transparent 41%), linear-gradient(to bottom, var(--color-1) 68%, transparent 68%),
        linear-gradient(to right, transparent 78%, #bc8f8f 78%, #bc8f8f 80%, transparent 80%, transparent 82%, #bc8f8f 82%, #bc8f8f 83%, transparent 83%),
        linear-gradient(to right, transparent 66%, #a52a2a 66%, #7c2020 85%, transparent 85%);
    background-size: 300px 150px;
    background-position: center bottom;
    clip-path: circle(150px at center center);
    animation: flashlight 20s ease infinite;
}

.view:after {
    content: '';
    width: 25px;
    height: 10px;
    position: absolute;
    left: calc(50% + 59px);
    bottom: 100px;
    background-repeat: no-repeat;
    background-image: radial-gradient(circle, #fff 50%, transparent 50%), radial-gradient(circle, #fff 50%, transparent 50%);
    background-size: 10px 10px;
    background-position:
        left center,
        right center;
    animation: eyes 20s infinite;
}

@keyframes flashlight {
    0% {
        clip-path: circle(150px at -25% 10%);
    }

    38% {
        clip-path: circle(150px at 60% 20%);
    }

    39% {
        opacity: 1;
        clip-path: circle(150px at 60% 86%);
    }

    40% {
        opacity: 0;
        clip-path: circle(150px at 60% 86%);
    }

    41% {
        opacity: 1;
        clip-path: circle(150px at 60% 86%);
    }

    42% {
        opacity: 0;
        clip-path: circle(150px at 60% 86%);
    }

    54% {
        opacity: 0;
        clip-path: circle(150px at 60% 86%);
    }

    55% {
        opacity: 1;
        clip-path: circle(150px at 60% 86%);
    }

    59% {
        opacity: 1;
        clip-path: circle(150px at 60% 86%);
    }

    64% {
        clip-path: circle(150px at 45% 78%);
    }

    68% {
        clip-path: circle(150px at 85% 89%);
    }

    72% {
        clip-path: circle(150px at 60% 86%);
    }

    74% {
        clip-path: circle(150px at 60% 86%);
    }

    100% {
        clip-path: circle(150px at 150% 50%);
    }
}

@keyframes eyes {
    0%,
    38% {
        opacity: 0;
    }

    39%,
    41% {
        opacity: 1;
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(0);
        filter: none;
        background-image: radial-gradient(circle, #fff 50%, transparent 50%), radial-gradient(circle, #fff 50%, transparent 50%);
    }

    41% {
        transform: scaleY(1);
        background-image: radial-gradient(circle, #ff0000 50%, transparent 50%), radial-gradient(circle, #ff0000 50%, transparent 50%);
        filter: drop-shadow(0 0 4px #ff8686);
    }

    42%,
    100% {
        opacity: 0;
    }
}

.about-custom {
    margin-top: 150px;
    margin-bottom: 100px;
    align-items: center;
    display: flex;
}

 @media (max-width: 768px) {
    .about {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

.navbar-custom {
    background-color: #121740;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 80px;
    box-shadow: black 0px 0px 10px;
}

.navbar-nav a {
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.navbar-nav a:hover {
    color: #7a5fff !important;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* === Tampilan MOBILE === */
@media (max-width: 768px) {
    .navbar-custom {
        height: auto;
        padding: 10px 20px;
    }

    .navbar-collapse {
        background-color: #121740; /* tetap warna aslimu */
        width: 100%; /* full width (bukan full page) */
        border-radius: 0 0 10px 10px;
        padding: 10px 0;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    }

    .navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.navbar-custom {
    background-color: #121740;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 80px;
    box-shadow: black 0px 0px 10px;
}

.navbar-brand img {
    height: 20px;
}

.navbar-nav a {
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.navbar-nav a:hover {
    color: #7a5fff !important;
}

/* Hero Section */
.hero-section {
    display: flex;
    justify-content: start;
    background: #f9fafc;
    padding: 80px 15px 120px;
    overflow: hidden;
    min-height: 500px;
}

.hero-section::before {
    /* content: "SATNER"; */
    position: absolute;
    top: 30px;
    left: 40px;
    font-size: 10rem;
    font-weight: 900;
    color: #ddd;
    z-index: 0;
    user-select: none;
}

.hero-content {
    /* position: relative; */
    justify-content: start;
    max-width: 600px;
    z-index: 1;
}

.hero-content hr {
    border-top: 2px solid black;
    width: 220px;
    margin-left: 0;
    margin-bottom: 15px;
}

.hero-content h1 {
    font-weight: 900;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Buttons */
.btn-outline-primary {
    border-color: #3f51b5;
    color: #3f51b5;
    font-weight: 600;
    padding: 0.5rem 2.5rem;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: #3f51b5;
    color: white;
    box-shadow: 0 10px 15px rgba(63, 81, 181, 0.4);
}

.btn-gradient {
    background: linear-gradient(90deg, #ff9b00, #fab12f);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.5rem 2.5rem;
    box-shadow: 0 10px 30px rgba(131, 102, 255, 0.4);
    letter-spacing: 0.05em;
    transition: box-shadow 0.3s ease;
}

.btn-gradient:hover {
    box-shadow: 0 14px 40px #ffe100;
}

/* Section Tentang Kami */
#about {
    background: #f9fafc;
    padding: 70px 15px 60px;
    max-width: 100%; /* jangan dibatasi 700px */
    margin: 0 auto;
}

#about h2 {
    font-weight: 900;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
}

#about p {
    font-weight: 400;
    font-size: 1.125rem;
    color: #6c757d;
    line-height: 1.8;
    text-align: justify;
}

/* Batas ukuran objek */
#about .newtonsCradle {
    max-width: 280px;
    width: 100%;
}

/* objek tiktak */
.newtonsCradle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: scale(1.4);
}

.frameCover {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    z-index: 11;
    height: 1px;
    width: 150px;
    background-color: #d4e4ff;
    border-top: 3px solid #d4e4ff;
    border-radius: 10px 10px 0 0;
    box-shadow:
        0 0 0 2px #0f0e0e,
        0 0 0 8px #d9fff5,
        0 0 0 10.5px #0f0e0e;
}

.frame {
    z-index: 10;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: flex-start;
    height: 100px;
    width: 150px;
    border-radius: 10px 10px 0 0;
    box-shadow:
        0 0 0 2.5px #0f0e0e,
        0 0 0 8px #d9fff5,
        0 0 0 10.5px #0f0e0e;
}
.frame::before,
.frame::after {
    z-index: 10;
    content: '';
    position: absolute;
    bottom: -10px;
    height: 10px;
    width: 22.5px;
    border: 2.5px solid #7ab1fd;
    border-radius: 2px;
    background-color: #0f0e0e;
}
.frame::before {
    left: -18px;
}
.frame::after {
    right: -18px;
}

.base {
    z-index: 11;
    margin-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 202.5px;
    border-radius: 4px 4px 0 0;
    background-image: linear-gradient(#121740 0 70%, #121740 70%);
}

.sphere-wrap {
    position: relative;
    display: flex;
    z-index: 9;
    flex-direction: column;
    align-items: center;
}
.sphere-wrap.left {
    animation: swing-left 2s ease-in-out infinite;
    transform-origin: top right;
}
.sphere-wrap.right {
    animation: swing-right 2s ease-in-out infinite;
    transform-origin: top left;
}

.string {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    height: 50px;
    width: 2px;
    background-color: #11426a;
    z-index: 0;
}

.sphere {
    z-index: 9;
    position: relative;
    height: 19.5px;
    width: 19.5px;
    margin-top: 58px;
    border-radius: 50%;
    border: 1.75px solid #11426a;
    background: radial-gradient(circle at 28% 28%, white 0% 20%, #ffe791 20% 60%, #eec223 60% 100%);
}

.sphere.center::before {
    content: '';
    display: block;
    height: 60px;
    width: 2px;
    background-color: #11426a;
    transform: translateX(7.5px) translateY(-61px);
}

@keyframes swing-left {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(25deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes swing-right {
    0%,
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-25deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
/* akhir */

/* Section Keunggulan Kami */
#keunggulan {
    background: #f9fafc;
    padding: 70px 15px 90px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

#keunggulan h2 {
    font-weight: 900;
    font-size: 2.25rem;
    margin-bottom: 40px;
}

#keunggulan .row > div {
    margin-bottom: 20px;
}

#keunggulan .features-box {
    background-color: #121740;
    color: #7a5fff;
    padding: 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    transition: background-color 0.3s ease;
}

#keunggulan .features-box:hover {
    background-color: #3f51b5;
    cursor: pointer;
}

#keunggulan .img-feature {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Footer Full Width */
footer {
    background-color: #121740;
    color: white;
   padding: 2px;
    font-size: 0.9rem;
    font-weight: 400;
    height: 100%;
    
}

.footer a:hover {
    opacity: 0.8;
    transform: scale(1.1);
    transition: 0.3s ease;
}

.footer i {
    vertical-align: middle;
}

.bg-container {
  position: relative;
  min-height: 400px; /* supaya area terlihat */
  overflow: hidden;  /* biar background tidak keluar */
}

/* .pattern-square {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 

  --mx: 0;
  --my: 0;
  --a-x: calc(var(--mx) * 8px);
  --a-y: calc(var(--my) * 8px);
  --b-x: calc(var(--mx) * -6px);
  --b-y: calc(var(--my) * -6px);
  --c-x: calc(var(--mx) * 4px);
  --c-y: calc(var(--my) * 4px);

  background:
    repeating-linear-gradient(
        45deg,
        transparent calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        transparent 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        transparent 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(0px + var(--c-x)) calc(0px + var(--c-y)),
    repeating-linear-gradient(
        45deg,
        transparent calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        transparent 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        transparent 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(32px + var(--a-x)) calc(32px + var(--a-y)),
    repeating-linear-gradient(
        -45deg,
        transparent calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        transparent 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        transparent 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(0px + var(--b-x)) calc(0px + var(--b-y)),
    repeating-linear-gradient(
        -45deg,
        transparent calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        transparent 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        transparent 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(32px + var(--a-x)) calc(32px + var(--a-y)),
    #1e1e1e;

  background-size: 64px 64px;
  background-repeat: repeat;
  pointer-events: none;
  transition: background-position 160ms linear;
} */


footer {
  position: relative;
  
  
 
}

/* Konten footer tetap di atas pattern */


/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-section::before {
        font-size: 5rem;
        top: 15px;
        left: 15px;
    }

    .hero-content h1 {
        font-size: 2.25rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    #keunggulan .features-box {
        min-height: 60px;
        font-size: 1rem;
    }
}
/* akhir */
.foto img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Card container */
.cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.cards .red,
.cards .blue,
.cards .green {
    background-color: #171748;
}

/* Card item */
.cards .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100px;
    width: 100%;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: 400ms;
}

.cards .card p.tip {
    font-size: 1em;
    font-weight: 700;
    margin: 0;
}

.cards .card p.second-text {
    font-size: 0.7em;
    margin: 0;
}

.cards .card:hover {
    transform: scale(1.1);
}

.cards:hover > .card:not(:hover) {
    filter: blur(4px);
    transform: scale(0.95);
}

/* ✅ Layout responsif */
.section-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Desktop */
@media (min-width: 900px) {
    .section-flex {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    .foto img {
        max-width: 500px;
    }

    .cards {
        max-width: 700px;
    }
}

/* Mobile */
@media (max-width: 899px) {
    .foto img {
        max-width: 500px;
    }
}

/* input */

.glitch-input-wrapper {
    --bg-color: #0d0d0d;
    --primary-color: #00f2ea;
    --secondary-color: #a855f7;
    --text-color: #e5e5e5;
    --font-family: 'Fira Code', Consolas, 'Courier New', Courier, monospace;
    --glitch-anim-duration: 0.4s;

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family);
    font-size: 16px;
    padding: 3rem;
}

.input-container {
    position: relative;
    width: 19rem;
}

/* --- Input --- */
.holo-input {
    width: 100%;
    height: 3.5rem;
    background: rgba(13, 13, 13, 0.7);
    border: none;
    border-bottom: 2px solid #333;
    outline: none;
    padding: 0 1rem;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 1.1rem;
    caret-color: var(--primary-color);
    z-index: 10;
    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}

.input-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--text-color);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 11;
}
.holo-input:focus + .input-label,
.holo-input:not(:placeholder-shown) + .input-label {
    top: -1.5rem;
    left: 0;
    font-size: 0.8rem;
    opacity: 1;
    color: var(--primary-color);
}

.holo-input:focus + .input-label::before,
.holo-input:focus + .input-label::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #212121;
}
.holo-input:focus + .input-label::before {
    color: var(--secondary-color);
    animation: glitch-label var(--glitch-anim-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.holo-input:focus + .input-label::after {
    color: var(--primary-color);
    animation: glitch-label var(--glitch-anim-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
}

.input-border,
.input-scanline,
.input-glow,
.input-corners {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.input-border {
    border: 1px solid rgba(0, 242, 234, 0.2);
    opacity: 0.5;
    transition: all 0.3s ease;
}
.corner {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--primary-color);
    transition: all 0.3s ease;
    opacity: 0.5;
}
.corner-tl {
    top: -0.3rem;
    left: -0.3rem;
    border-right: none;
    border-bottom: none;
}
.corner-tr {
    top: -0.3rem;
    right: -0.3rem;
    border-left: none;
    border-bottom: none;
}
.corner-bl {
    bottom: -0.3rem;
    left: -0.3rem;
    border-right: none;
    border-top: none;
}
.corner-br {
    bottom: -0.3rem;
    right: -0.3rem;
    border-left: none;
    border-top: none;
}

.input-glow {
    background: radial-gradient(ellipse at center, rgba(0, 242, 234, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.input-scanline {
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 242, 234, 0.1) 48%, rgba(0, 242, 234, 0.3) 50%, rgba(0, 242, 234, 0.1) 52%, transparent 100%);
    opacity: 0;
}

.input-data-stream {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 0.3rem;
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}
.stream-bar {
    flex-grow: 1;
    background-color: var(--primary-color);
    transition:
        transform 0.2s,
        opacity 0.2s;
    transform: scaleY(0);
    transform-origin: bottom;
}

.holo-input:focus {
    border-color: transparent;
}
.holo-input:focus ~ .input-border {
    opacity: 1;
    border-color: rgba(0, 242, 234, 0.5);
}
.holo-input:focus ~ .input-corners .corner {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 3px;
    opacity: 1;
}
.holo-input:focus ~ .input-glow {
    opacity: 1;
}
.holo-input:focus ~ .input-scanline {
    animation: scan-vertical 4s linear infinite;
}
.holo-input:focus ~ .input-data-stream {
    opacity: 1;
}
.holo-input:focus ~ .input-data-stream .stream-bar {
    animation: data-pulse 2s infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes glitch-label {
    0% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
    }
    20% {
        transform: translate(-0.2rem, 0.1rem);
        clip-path: inset(50% 0 20% 0);
    }
    40% {
        transform: translate(0.1rem, -0.1rem);
        clip-path: inset(20% 0 60% 0);
    }
    60% {
        transform: translate(-0.15rem, 0.1rem);
        clip-path: inset(80% 0 5% 0);
    }
    80% {
        transform: translate(0.15rem, -0.15rem);
        clip-path: inset(30% 0 45% 0);
    }
    100% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes scan-vertical {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    25% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes data-pulse {
    0%,
    100% {
        transform: scaleY(0.2);
        opacity: 0.3;
    }
    50% {
        transform: scaleY(1);
        opacity: 0.8;
    }
}
/* button */
button {
    --green: #1bfd9c;
    font-size: 15px;
    padding: 0.7em 2.7em;
    letter-spacing: 0.06em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 1.4em;
    border: 2px solid var(--green);
    background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%, rgba(27, 253, 156, 0.1) 100%);
    color: var(--green);
    box-shadow:
        inset 0 0 10px rgba(27, 253, 156, 0.4),
        0 0 9px 3px rgba(27, 253, 156, 0.1);
}

button:hover {
    color: #82ffc9;
    box-shadow:
        inset 0 0 10px rgba(27, 253, 156, 0.6),
        0 0 9px 3px rgba(27, 253, 156, 0.2);
}

button:before {
    content: '';
    position: absolute;
    left: -4em;
    width: 4em;
    height: 100%;
    top: 0;
    transition: transform 0.4s ease-in-out;
    background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%);
}

button:hover:before {
    transform: translateX(15em);
}

/* From Uiverse.io by javierBarroso */
.social-login-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-box-reflect: below 5px linear-gradient(transparent, #00000055);
}
.social-login-icons svg {
    width: 40px;
}

.social-icon-1,
.social-icon-1-1,
.social-icon-2,
.social-icon-2-2,
.social-icon-3,
.social-icon-3-3,
.social-icon-4,
.social-icon-4-4 {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin: 20px 0 0px 0;
}

.icon svg {
    fill: #111;
}

.socialcontainer {
    height: 80px;
    overflow: hidden;
}
.social-icon-1 {
    transition-duration: 0.4s;
    background-color: rgb(0, 0, 0);
    transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
}
.social-icon-1 svg,
.social-icon-2 svg,
.social-icon-3 svg,
.social-icon-4 svg {
    opacity: 0;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
}
.social-icon-1-1 {
    transition-duration: 0.4s;
    background-color: rgb(0, 0, 0, 0);
}
.socialcontainer:hover .social-icon-1 {
    transform: translateY(-70px);
}
.socialcontainer:hover .social-icon-1 svg,
.socialcontainer:hover .social-icon-2 svg,
.socialcontainer:hover .social-icon-3 svg,
.socialcontainer:hover .social-icon-4 svg {
    opacity: 1;
}
.social-icon-2 {
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
    background: linear-gradient(72.44deg, #ff7a00 11.92%, #ff0169 51.56%, #d300c5 85.69%);
}
.socialcontainer:hover .social-icon-2 {
    transform: translateY(-70px);
}
.social-icon-3 {
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
    background: #316ff6;
}

.socialcontainer:hover .social-icon-3 {
    transform: translateY(-70px);
}
.social-icon-4 {
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);

    background: linear-gradient(180deg, rgba(129, 34, 144, 1) 0%, rgba(77, 34, 124, 1) 91%);
}

.socialcontainer:hover .social-icon-4 {
    transform: translateY(-70px);
}
/* akhir */
.hero-section {
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    padding: 50px 5%;
    gap: 40px;
}

.hero-section .hero-content {
    flex: 1;
}

.hero-section .gambar img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
        display: flex;
        align-items: center; /* isi hero-section ke tengah vertikal */
        justify-content: center; /* isi hero-section ke tengah horizontal */
    }

    .hero-section .gambar {
        order: 2;
        margin: 0 auto; /* pastikan blok di tengah */
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; /* agar menyesuaikan lebar layar */
        padding-right: 0 !important; /* hilangkan dorongan kanan di mobile */
    }

    .hero-section .hero-content {
        order: 1;
    }

    .hero-section .d-flex {
        justify-content: center;
    }

    /* tambahan agar ukuran book pas di mobile */
    .hero-section .book {
        width: 260px; /* sedikit lebih kecil dari desktop */
        height: 360px;
        margin: 0 auto; /* tetap di tengah */
    }
}
/* absrak */
@media (max-width: 768px) {
  .hero-section .welcome::before,
  .hero-section .kutip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 160%;
    background: 
      radial-gradient(circle at 30% 40%, #F9F5F0, transparent 32%),
      radial-gradient(circle at 70% 60%, #F9F5F0, transparent 32%),
      linear-gradient(135deg, #F9F5F0, rgba(255, 255, 255, 0.05));
    filter: blur(18px) brightness(1.3);
    border-radius: 25px;
    z-index: -1;
    animation: abstractPulse 6s ease-in-out infinite alternate;
    pointer-events: none; /* pastikan tidak ganggu interaksi */
  }
}

/* ✨ Animasi lembut (tetap aktif saat mobile) */
@keyframes abstractPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* akhir */
 .gambar {
                    display: flex;
                    justify-content: center;
                    padding-right: 100px;
                }

                .cover img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    /* border-radius: 20px; */
                }

                /* From Uiverse.io by eslam-hany */
                .book {
                    position: relative;
                    border-radius: 10px;
                    width: 300px;
                    height: 400px;
                    background-color: whitesmoke;
                    box-shadow: 8px 10px 12px #000;
                    transform: preserve-3d;
                    perspective: 2000px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #000;
                   
                }

                .cover {
                    top: 0;
                    position: absolute;
                    background-color: lightgray;
                    width: 100%;
                    height: 100%;
                    /* border-radius: 10px; */
                    cursor: pointer;
                    transition: all 0.5s;
                    transform-origin: 0;
                    box-shadow: 0px 8px 12px #000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    /* border-radius: 10px; */
                    z-index: 2;
                }

                .book:hover .cover {
                    transition: all 0.5s;
                    transform: rotatey(-80deg);
                }

                .cover img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    /* border-radius: 10px; */
                }

                /* Teks utama di dalam buku */
                .book p {
                    position: absolute;
                    top: 25%;
                    /* di atas pohon */
                    left: 55%;
                    transform: translate(-50%, -50%);
                    color: white;
                    font-size: 15px;
                    font-weight: normal;
                    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
                    z-index: 1;
                    pointer-events: none;
                    opacity: 0;
                    transition: opacity 0.5s ease;
                    transition-delay: 0s;
                    letter-spacing: 1.5px;
                    text-transform: uppercase;
                    background: linear-gradient(90deg, #ffffff, #b3e5fc, #ffffff);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-shadow:
                        0 0 8px rgba(255, 255, 255, 0.7),
                        0 0 15px rgba(173, 216, 230, 0.6),
                        0 0 30px rgba(135, 206, 250, 0.5);
                }

                .book p::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    bottom: -6px;
                    transform: translateX(-50%);
                    width: 0%;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, #b3e5fc, transparent);
                    border-radius: 2px;
                    transition: width 1s ease;
                    opacity: 0.8;
                }

                .book:hover p::after {
                    width: 80%;
                }

                @keyframes glowPulse {
                    0% {
                        text-shadow:
                            0 0 8px rgba(255, 255, 255, 0.6),
                            0 0 15px rgba(173, 216, 230, 0.5),
                            0 0 30px rgba(135, 206, 250, 0.4);
                    }

                    50% {
                        text-shadow:
                            0 0 12px rgba(255, 255, 255, 0.9),
                            0 0 25px rgba(173, 216, 230, 0.8),
                            0 0 45px rgba(135, 206, 250, 0.6);
                    }

                    100% {
                        text-shadow:
                            0 0 8px rgba(255, 255, 255, 0.6),
                            0 0 15px rgba(173, 216, 230, 0.5),
                            0 0 30px rgba(135, 206, 250, 0.4);
                    }
                }

                .book:hover p {
                    animation: glowPulse 3s ease-in-out infinite;
                    z-index: 3;
                    opacity: 1;
                    transition-delay: 0.5s;
                }

                /* 🔹 Gaya dan posisi untuk copyright */
                .book h5.copy {
                    position: absolute;
                    bottom: 5%;
                    /* di bagian paling bawah gambar 2.svg */
                    left: 55%;
                    transform: translateX(-50%);
                    font-size: 13px;
                    font-weight: normal;
                    text-transform: uppercase;
                    background: linear-gradient(90deg, #ffffff, #b3e5fc, #ffffff);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-shadow:
                        0 0 8px rgba(255, 255, 255, 0.7),
                        0 0 15px rgba(173, 216, 230, 0.6),
                        0 0 30px rgba(135, 206, 250, 0.5);
                    opacity: 0;
                    transition: opacity 0.5s ease;
                    transition-delay: 0s;
                    pointer-events: none;
                }

                .book:hover h5.copy {
                    opacity: 1;
                    animation: glowPulse 3s ease-in-out infinite;
                    transition-delay: 0.5s;
                }