/* Reset & Base */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: 'Roboto', sans-serif;
        background: #000000;
        color: #535f61;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
        position: relative;
      }
      body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, rgba(95, 100, 104, 0.12), transparent),
          radial-gradient(circle at 70% 70%, rgba(0, 200, 255, 0.06), transparent);
        z-index: -1;
      }
      /* Card Container */
      .featured-image {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            background: linear-gradient(145deg, rgba(66, 133, 244, 0.1), rgba(100, 155, 255, 0.05));
            padding: 3px;
        }
        
        .featured-image::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: conic-gradient(
                from 0deg,
                rgba(66, 133, 244, 0.8),
                rgba(100, 155, 255, 0.4),
                rgba(135, 175, 255, 0.6),
                rgba(170, 200, 255, 0.3),
                rgba(66, 133, 244, 0.8)
            );
            border-radius: 10px;
            z-index: -1;
            animation: luxuryRotate 8s linear infinite;
        }
        
        .featured-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, rgba(66, 133, 244, 0.05) 0%, transparent 100%);
            border-radius: 8px;
            pointer-events: none;
        }


        @keyframes luxuryRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

      .card {
        background: rgba(0, 20, 25, 0.8);
        border-radius: 16px;
        box-shadow: 0 0px 30px rgb(66, 79, 86);
        max-width: 480px;
        width: 100%;
        overflow: hidden;
      }
      /* Sections */
      .card-header,
      .card-title,
      .card-banner,
      .card-actions,
      .card-footer {
        padding: 16px;
        text-align: center;
      }

      /* Logo */
      .logo-glow {
        display: block;
        margin: 0 auto;
        max-width: 200px;
        height: auto;
        filter: drop-shadow(0 0 2px #535f61);
        transition: transform .3s, filter .3s;
      }
      .logo-glow:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px #535f61);
      }

      .card-header a {
        text-decoration: none;
        color: #ffffff;
      }

      /* Title */
      .card-title h1 {
        font-size: 1.1rem;
        font-weight: 700;
        color: #FFF;
        letter-spacing: .03em;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 5px #535f61;
        margin: 0;
      }

      h2 {
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 5px #535f61;
      }
      h3 {
        margin-top: 8px;
        color: #ffffff;
        text-align: center;
        font-size: 13px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 5px #535f61;
        padding-left: 12px;
        padding-right: 12px;
      }
      h4 {
        margin-top: 8px;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 5px #535f61;
        padding-left: 12px;
        padding-right: 12px;
      }
      h5 {
        margin-top: 8px;
        color: #ffffff;
        text-align: center;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 5px #535f61;
        font-size: 11px;
      }
      /* Banner Improvements: Zoom + Overlay + Text */
      .card-banner {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
      }
      .card-banner .banner {
        border-radius: 10px;
        display: block;
        width: 100%;
        height: auto;
        animation: zoomIn 20s ease-in-out infinite alternate;
      }
      .card-banner::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(25, 3, 148, 0.1);
        mix-blend-mode: multiply;
        pointer-events: none;
      }
      .banner-text {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFF;
        font-size: 1rem;
        font-weight: 700;
        text-shadow: 0 0px 10px rgba(0, 0, 0, 0.6);
        opacity: 0;
        animation: fadeInText 2s ease-out 1s forwards;
      }
      @keyframes zoomIn {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.05);
        }
      }
      @keyframes fadeInText {
        to {
          opacity: 1;
        }
      }
      /* Button Base + Effects */
      .card-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .card-actions .btn-daftar,
      .card-actions .btn-login {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 12px 0;
        font-weight: 700;
        border-radius: 8px;
        text-align: center;
        text-decoration: none;
        transition: transform .2s, box-shadow .3s;
        position: relative;
        z-index: 1;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 6px rgba(0, 0, 0, 0.4);
      }
      /* Shimmer for Daftar */
      .card-actions .btn-daftar {
        overflow: hidden;
        background: linear-gradient( 181deg, #535f61, #000000);
        color: #ffffff;
        border: none;
        transition: background .3s, transform .2s, box-shadow .3s;
      }
      .card-actions .btn-daftar::before {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 50%;
        height: 100%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(32deg);
        animation: shimmer 2s infinite;
      }
      .card-actions .btn-daftar:hover {
        background: #535f61;
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 12px rgba(0, 0, 0, 0.5);
      }
      /* Gradient slide for Login */
      .card-actions .btn-login {
        background: #535f61;
        color: #FFF;
        border: 2px solid transparent;
        background-image: linear-gradient(#535f61, #535f61), linear-gradient(90deg, #00faff, #ffffff, #00faff);
        background-origin: padding-box, border-box;
        background-clip: padding-box, border-box;
      }
      .card-actions .btn-login::before {
        content: '';
        position: absolute;
        inset: 0;
        background: inherit;
        filter: blur(8px);
        opacity: .7;
        animation: slide 3s infinite linear;
        z-index: -1;
      }
      .card-actions .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgb(64, 66, 69), 0 8px 12px rgb(42, 49, 57);
      }
      @keyframes shimmer {
        0% {
          left: -120%;
        }
        100% {
          left: 120%;
        }
      }
      @keyframes slide {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 200% 0;
        }
      }
      /* Footer */
      .card-footer a {
        text-decoration: none;
        font-size: 10px;
        color: rgb(167, 165, 166);
        margin: 0;
      }
      /* Mobile */
      @media(max-width:360px) {
        .card-actions .btn-daftar,
        .card-actions .btn-login {
          width: 90%;
          padding: 10px 0;
        }
      }