:root { color-scheme: dark; }
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #0d1117; color: #e6edf3; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; position: relative; isolation: isolate; min-height: 100vh; text-rendering: optimizeLegibility; }
    body::-webkit-scrollbar { width: 0; height: 0; }
    html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
    img, svg { display: block; max-width: 100%; height: auto; }
    section, footer { position: relative; }
    section[id] { scroll-margin-top: 6rem; }
    .background-cursor {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: -1;
    }
    .background-cursor .cursor-orb {
      position: absolute;
      width: 28rem;
      height: 28rem;
      border-radius: 9999px;
      background: radial-gradient(circle, rgba(42,147,115,0.28) 0%, rgba(42,147,115,0.16) 28%, rgba(42,147,115,0) 70%);
      filter: blur(24px);
      transform: translate(-50%, -50%);
      opacity: 0.9;
      transition: opacity 0.2s ease;
    }
    .background-cursor .cursor-orb.secondary {
      width: 20rem;
      height: 20rem;
      background: radial-gradient(circle, rgba(74,144,226,0.2) 0%, rgba(74,144,226,0.08) 34%, rgba(74,144,226,0) 72%);
      filter: blur(20px);
    }
    html::-webkit-scrollbar { width: 0; height: 0; }
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .gradient-text {
      background: linear-gradient(135deg, #2a9373 0%, #4baf8d 50%, #7ecbaf 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .glass {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(16px);
    }
    #navbar { transition: background 0.3s, box-shadow 0.3s; }
    #navbar.scrolled { background: rgba(13,17,23,0.95) !important; box-shadow: 0 1px 32px rgba(0,0,0,0.5); backdrop-filter: blur(20px); }
    .hero-glow {
      position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; pointer-events: none;
    }
    .btn-primary {
      background: linear-gradient(135deg, #1d745b, #2a9373);
      box-shadow: 0 4px 24px rgba(42,147,115,0.35);
      transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    }
    .btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 32px rgba(42,147,115,0.5); filter: brightness(1.1); }
    .btn-secondary { border: 1.5px solid #2a9373; color: #4baf8d; transition: background 0.2s, color 0.2s, transform 0.2s; }
    .btn-secondary:hover { background: rgba(42,147,115,0.12); transform: translateY(-2px); }
    .card-hover { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
    .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.4); border-color: rgba(42,147,115,0.4) !important; }
    .pricing-recommended { border-color: #2a9373 !important; box-shadow: 0 0 0 1px #2a9373, 0 20px 60px rgba(42,147,115,0.2); }
    #mobile-menu { transition: max-height 0.4s ease, opacity 0.3s ease; max-height: 0; overflow: hidden; opacity: 0; }
    #mobile-menu.open { max-height: 400px; opacity: 1; }
    .form-input { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1); color: #e6edf3; transition: border-color 0.2s, box-shadow 0.2s; }
    .form-input:focus { outline: none; border-color: #2a9373; box-shadow: 0 0 0 3px rgba(42,147,115,0.15); }
    .form-input::placeholder { color: #6e7681; }
    .avatar { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; border-radius: 50%; width: 48px; height: 48px; flex-shrink: 0; }
    .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(42,147,115,0.3), transparent); }
    .portfolio-card { position: relative; display: flex; flex-direction: column; height: 100%; }
    .portfolio-overlay { opacity: 0; transition: opacity 0.3s; background: linear-gradient(to top, rgba(13,17,23,0.98), rgba(13,17,23,0.2)); }
    .portfolio-card:hover .portfolio-overlay { opacity: 1; }
    .portfolio-detail-btn { transform: translateY(8px); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
    .portfolio-card:hover .portfolio-detail-btn { transform: translateY(0); }
    .portfolio-detail-btn:hover { background: rgba(42,147,115,0.22); border-color: rgba(126,203,175,0.35); }
    #portfolio-modal { backdrop-filter: blur(10px); }
    #portfolio-modal .portfolio-modal-panel { animation: modalIn 0.25s ease; }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .star { color: #f5a623; }

    .testimonial-scroll {
      max-height: 760px;
      overflow-y: auto;
      padding-right: 0.35rem;
      scroll-behavior: smooth;
    }
    .hero-visual { width: min(100%, 32rem); }
    .mobile-stack { display: flex; gap: 0.75rem; }
    .testimonial-scroll::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .testimonial-scroll {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
    /* Testimoni baru - animasi fade in */
    .testimoni-baru {
      animation: fadeInUp 0.5s ease-out forwards;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    /* Rating stars interaktif */
    .star-select {
      transition: all 0.2s ease;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      filter: grayscale(1);
      opacity: 0.3;
    }
    .star-select.active {
      filter: grayscale(0);
      opacity: 1;
      transform: scale(1.1);
    }
    .star-select:hover {
      transform: scale(1.2);
    }
    
    /* Toast notification */
    .toast {
      position: fixed;
      bottom: 90px;
      right: 20px;
      z-index: 9999;
      padding: 16px 24px;
      border-radius: 12px;
      background: #1d745b;
      color: white;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.4s ease;
      max-width: 350px;
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 14px;
    }
    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }
    
    /* Avatar warna random untuk testimoni baru */
    .avatar-colors {
      background: linear-gradient(135deg, #1d745b, #4baf8d);
    }
    .avatar-colors-1 { background: linear-gradient(135deg, #1d745b, #4baf8d); }
    .avatar-colors-2 { background: linear-gradient(135deg, #0e4f7a, #2a8bcc); }
    .avatar-colors-3 { background: linear-gradient(135deg, #5a1d74, #9b4dd4); }
    .avatar-colors-4 { background: linear-gradient(135deg, #b8860b, #daa520); }
    .avatar-colors-5 { background: linear-gradient(135deg, #8b0000, #cd5c5c); }
    .avatar-colors-6 { background: linear-gradient(135deg, #2f4f4f, #5f9ea0); }
    .avatar-colors-7 { background: linear-gradient(135deg, #4a1a6b, #8b5cf6); }
    .avatar-colors-8 { background: linear-gradient(135deg, #1a3a5c, #4a90d9); }

    /* Sembunyikan tombol hapus (fitur tersembunyi via right-click & keyboard) */
    #hapus-semua-testimoni {
      display: none !important;
    }

    @media (max-width: 768px) {
      .hero-glow { width: 14rem; height: 14rem; opacity: 0.14; filter: blur(70px); }
      .hero-visual { width: min(100%, 28rem); margin-inline: auto; }
      .testimonial-scroll { max-height: none; overflow: visible; }
      #portfolio-modal .portfolio-modal-panel { max-height: 90dvh; overflow-y: auto; }
    }

    @media (max-width: 640px) {
      body { font-size: 15px; }
      .mobile-stack { flex-direction: column; align-items: stretch; }
      .mobile-stack > a { width: 100%; }
      .mobile-stack .btn-secondary, .mobile-stack .btn-primary { justify-content: center; }
      #cta .glass, #kontak { padding: 1.25rem; }
      .floating-action { width: 3.25rem; height: 3.25rem; right: 1rem; bottom: 1rem; }
      footer .grid { gap: 2rem; }
    }

    /* Loading spinner */
    .spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 0.8s ease-in-out infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }