:root{
      --bg: #F6F6F8;
      --accent: #D33A3A; /* warna aksen (cocok dg logo merah) */
      --muted: #9b9b9b;
      --card-bg: rgba(255,255,255,0.85);
      --glass-blur: 8px;
      --max-width: 1100px;
      --radius: 12px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    /* Reset sederhana */
    *{box-sizing: border-box; margin:0; padding:0}
    html,body,#app{height:100%}
    body{
      background: var(--bg);
      color: #1c1c1c;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Full-page hero with background image */
    .hero{
      height:100vh;
      width:100%;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      position:relative;
      overflow:hidden;
      background-image: url('bg-logo.jpg'); /* <- pastikan file bg-logo.jpg berada di folder yang sama */
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      padding-bottom: 40px; 
    }

    /* Soft overlay to ensure contrast for text/buttons */
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(246,246,248,0.85) 60%);
      pointer-events:none;
    }

    .container{
      position:relative;
      width:100%;
      max-width: var(--max-width);
      padding: 40px;
      display:flex;
      flex-direction:column;
      gap:28px;
      align-items:center;
      text-align:center;
      z-index:2;
    }

    .logo-slot{
      width: 420px;
      height: 110px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 6px 0 0 0;
      border-radius: 10px;
      background: transparent;
    }

    .logo-slot img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
    }

    h1{
      font-size:28px;
      letter-spacing:3px;
      color: var(--accent);
      margin-top:12px;
      font-weight:700;
    }

    p.lead{
      color: #4f4f4f;
      max-width:760px;
      font-size:15px;
      line-height:1.5;
    }

    /* Card kontak */
    .contact-card{
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:center;
      background: var(--card-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      padding: 16px 20px;
      border-radius: var(--radius);
      box-shadow: 0 8px 30px rgba(20,20,20,0.08);
      border: 1px solid rgba(0,0,0,0.04);
      flex-wrap:wrap;
    }

    .contact-text{
      text-align:left;
    }
    .contact-text .title{
      font-size:16px;
      font-weight:600;
      color:#222;
    }
    .contact-text .sub{
      font-size:13px;
      color:var(--muted);
    }

    .contacts{
      display:flex;
      gap:12px;
      align-items:center;
      margin-left:8px;
    }

    .btn {
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:10px;
      text-decoration:none;
      font-weight:600;
      font-size:14px;
      transition:transform .12s ease, box-shadow .12s ease;
      border: none;
      cursor:pointer;
      background: transparent;
    }

    .btn:focus{outline: 3px solid rgba(211,58,58,0.15); outline-offset:2px}
    .btn:hover{transform: translateY(-3px)}

    /* button styles */
    .btn-whatsapp{
      background: linear-gradient(180deg, #eaf6ee, #dff0e4);
      color: #075E54;
      border: 1px solid rgba(7,94,84,0.08);
      box-shadow: 0 6px 18px rgba(7,94,84,0.06);
      padding:10px 14px;
    }

    .btn-instagram{
      background: linear-gradient(180deg, rgba(211,58,58,0.06), rgba(211,58,58,0.02));
      color: var(--accent);
      border: 1px solid rgba(211,58,58,0.06);
      padding:10px 12px;
    }

    .btn-email{
      background: #fff;
      color: #333;
      border: 1px solid rgba(0,0,0,0.06);
      padding:10px 12px;
    }

    .btn-linkedin{
      background: linear-gradient(180deg, #eef6fc, #e8f2fb);
      color: #0A66C2;
      border: 1px solid rgba(10,102,194,0.06);
      padding:10px 12px;
    }

    .btn-github {
      background: linear-gradient(180deg, #f0f0f0, #d1d1d1);
      color: #333;
      border: 1px solid rgba(0,0,0,0.1);
      padding: 10px 12px;
    }

    .icon{
      display:inline-flex;
      width:18px;
      height:18px;
      align-items:center;
      justify-content:center;
    }
    /* Responsive */
    @media (max-width:720px){
      .container{ padding:28px; gap:18px }
      .logo-slot{ width:300px; height:90px }
      h1{ font-size:22px }
      .contact-card{ flex-direction:column; gap:12px; padding:14px }
      .contacts{ margin-left:0; }
    }