/* styles-saas.css — SaaS landing with glass + neumorph + dark mode + form tweaks */

/* ---------- Root variables ---------- */
:root{
  --bg-0: #f4f8ff;
  --bg-1: #eef6ff;
  --surface: #ffffff;
  --muted: #6b7280;
  --text: #0f1724;
  --primary: #0b6cf0;
  --primary-2: #0d8bf2;
  --accent: #00b4d8;
  --glass-bg: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.65);
  --shadow: 0 8px 30px rgba(11,108,240,0.06);
  --radius: 14px;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root{
    --bg-0: #071126;
    --bg-1: #0a1630;
    --surface: rgba(8,12,24,0.6);
    --muted: #93a4c0;
    --text: #eaf2ff;
    --primary: #3aa0ff;
    --primary-2: #66c0ff;
    --accent: #00d0ff;
    --glass-bg: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.04);
    --shadow: 0 8px 30px rgba(2,6,23,0.6);
  }
}

body.dark { background: linear-gradient(180deg,#071126,#0a1630); color:var(--text); }
body.light { background: linear-gradient(180deg,var(--bg-0),var(--bg-1)); color:var(--text); }

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none !important;outline:none !important}
.container{max-width:1200px;margin:0 auto;padding:28px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;padding:14px 0;backdrop-filter: blur(6px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow)}
.brand-title{font-weight:700}
.brand-sub{font-size:13px;color:var(--muted)}

/* nav */
.nav{display:flex;align-items:center;gap:10px}
.icon-btn{background:transparent;border:0;padding:8px;border-radius:10px;cursor:pointer;font-size:16px}
.icon-btn:hover{background:rgba(0,0,0,0.04)}
.link-muted{color:var(--muted);font-size:14px}

/* ---------- Hero ---------- */
.hero-wrap{padding:34px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.headline{font-size:36px;line-height:1.05;margin:0 0 12px;font-weight:800}
.subhead{color:var(--muted);margin:0 0 20px;max-width:680px}
.hero-cta{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.feature-list{margin-top:8px;list-style:none;padding-left:0;color:var(--muted);display:flex;gap:12px}
.feature-list li{background:transparent;padding:6px 10px;border-radius:8px;border:1px dashed rgba(0,0,0,0.04);font-size:13px}

/* ---------- Cards: glass & neumorphism ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(8px) saturate(120%);
}

.neumorph{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  box-shadow: 6px 6px 18px rgba(2,6,23,0.06), -6px -6px 18px rgba(255,255,255,0.02);
}

/* hero-right card specifics */
.hero-right{display:flex;align-items:center;justify-content:center}
.hero-right .box-title{font-weight:700;margin-bottom:8px}
.box-desc{color:var(--muted);font-size:14px;margin-bottom:12px}
.box-actions{display:flex;justify-content:flex-end}

/* ---------- Preview grid ---------- */
.archives-preview{margin-top:34px}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:14px}
.preview-card{padding:18px;border-radius:14px;min-height:120px;display:flex;flex-direction:column;gap:8px}
.preview-title{font-weight:700;color:var(--primary);font-size:16px}
.preview-meta{font-size:12px;color:var(--muted)}
.preview-desc{color:var(--muted);font-size:14px;margin-top:6px}
.empty-card{padding:24px;border-radius:12px;text-align:center;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{padding:28px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* ---------- Buttons: styles, ripple, variants ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:none;cursor:pointer;font-weight:600;user-select:none;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 8px 26px rgba(11,108,240,0.12)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:transparent;border:1px solid rgba(11,108,240,0.12);color:var(--primary)}
.btn-link{background:transparent;color:var(--primary);padding:8px 12px;border-radius:10px;border:1px solid transparent}

.btn:hover{transform:translateY(-3px);transition:transform .18s ease, box-shadow .18s ease}
.btn:focus{outline:none;box-shadow:0 6px 20px rgba(11,108,240,0.12)}

/* ripple element */
.ripple-effect{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,0.4);
  pointer-events:none;
  will-change:transform,opacity;
}
body.dark .ripple-effect{background:rgba(255,255,255,0.06)}

/* ---------- Utility: neumorph button style (optional) ---------- */
.btn-neu{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0));
  box-shadow: 6px 6px 18px rgba(2,6,23,0.06), -6px -6px 18px rgba(255,255,255,0.02);
  color:var(--text);
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .headline{font-size:28px}
  .container{padding:18px}
}

/* ===== FORM: labels above, inputs full-width, consistent spacing ===== */
.form-row {
  margin-bottom: 14px;
  display: block;
}
.form-row label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.form-row .input,
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row textarea,
.form-row select {
  width: 100% !important;
  padding: 12px 14px;
  border-radius: 12px;

  /* Hilangkan border kotak */
  border: none;

  /* Tampilan modern sebelumnya */
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 12px rgba(11,108,240,0.08);

  font-size: 14px;
  color: var(--text);
  transition: 0.2s ease;
}

/* Focus State Modern */
.form-row .input:focus,
.form-row input[type="text"]:focus,
.form-row input[type="password"]:focus,
.form-row input[type="email"]:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  box-shadow: 0 6px 20px rgba(11,108,240,0.18);
  transform: translateY(-2px);
}
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.form-actions .helper-link {
  color: var(--primary);
  font-weight:600;
  margin-left: 6px;
  text-decoration:none !important;
}
.form-row .input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  box-shadow: 0 6px 18px rgba(11,108,240,0.06);
  border-color: var(--primary);
}

/* ===== HERO RIGHT CARD: "Masukkan arsip baru" layout ===== */
.card-compact {
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border-radius:14px;
}
.card-compact .cc-left {
  flex: 1 1 auto;
  min-width:0;
}
.card-compact .cc-left .title {
  font-weight:700;
  font-size:15px;
  margin-bottom:6px;
  color:var(--text);
}
.card-compact .cc-left .desc {
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.card-compact .cc-right {
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.card-compact .btn-cta {
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  box-shadow: 0 8px 22px rgba(11,108,240,0.12);
}
@media (max-width:760px){
  .card-compact { flex-direction:column; align-items:flex-start; }
  .card-compact .cc-right { align-self: stretch; width:100%; display:flex; justify-content:flex-end; }
}

/* -------------------------
  UI TUNING: spacing tombol & input tanpa kotak
   - turunkan sedikit tombol "Daftar Sekarang" di card-compact
   - hilangkan kotak / border persegi pada input (login/register/dashboard)
   - tapi tetap beri fokus visual yang lembut
  ------------------------- */

/* turunkan posisi tombol CTA di card-compact */
.card-compact .cc-right {
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  /* tambahkan margin top kecil untuk memberi ruang dari teks */
  margin-top: 8px;
}

/* jika pada layar besar agar tetap center vertically, override */
@media(min-width:761px){
  .card-compact .cc-right {
    margin-top: 0; /* normal pada desktop */
    align-self: center;
  }
}

/* sedikit jarak ekstra pada tombol CTA */
.card-compact .btn-cta {
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  box-shadow: 0 10px 28px rgba(11,108,240,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* HIDUPKAN efek hover yang membuat terasa "terangkat" */
.card-compact .btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(11,108,240,0.16);
}


/* =========================
   INPUTS: hilangkan kotak persegi
   - tidak ada border kotak default
   - background jadi transparan / mengikuti card
   - tampilkan garis bawah tipis HANYA saat fokus (opsional)
   ========================= */

/* target semua input/textarea/select pada .form-row & juga input pada forms kecil */
.form-row .input,
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row textarea,
.form-row select,
input.input, textarea.input {
  width:100% !important;
  padding: 8px 6px;              /* lebih ringkas */
  border: none !important;       /* hapus kotak/garis */
  background: transparent !important; /* tidak menonjol dari card */
  box-shadow: none !important;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  /* tambahkan bottom spacing untuk jarak visual */
  margin-bottom: 6px;
}

/* optional: kalau Anda mau sedikit garis bawah saat fokus (lebih jelas UX) */
.form-row .input:focus,
.form-row input[type="text"]:focus,
.form-row input[type="password"]:focus,
.form-row input[type="email"]:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  /* subtle bottom highlight */
  box-shadow: inset 0 -2px 0 0 rgba(11,108,240,0.12);
  transition: box-shadow .18s ease;
}

/* jika Anda ingin benar-benar tanpa garis apapun saat fokus, gunakan ini:
.form-row .input:focus { box-shadow: none; }
*/

/* Pastikan label tetap terlihat dan posisi rapi */
.form-row label {
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}

/* Perbaikan untuk form kecil (inline forms) : agar input tidak mengecil tanpa padding */
.card .form-row input[type="text"],
.card .form-row input[type="password"] {
  min-height: 34px;
}

/* Responsive tweak: pada layar sempit, beri spacing lebih agar tidak terlalu rapat */
@media(max-width:600px){
  .card-compact .cc-right { width:100%; display:flex; justify-content:flex-end; margin-top:10px; }
  .form-row .input { padding:10px 8px; }
}

/* ------------ Extra login-specific styles (modern) ------------- */
.auth-wrap{ min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center; padding:40px 18px; background: linear-gradient(180deg, rgba(11,108,240,0.02), rgba(13,139,242,0.01)); }
.auth-card{ width:100%; max-width:520px; border-radius:16px; padding:28px; box-shadow: 0 18px 50px rgba(11,108,240,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(250,252,255,0.9)); border:1px solid rgba(255,255,255,0.6); }
.auth-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.logo-sm{ width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; color:white; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow: 0 8px 30px rgba(11,108,240,0.08); }
.input-with-icon{ position:relative; display:flex; align-items:center; }
.input-with-icon .icon{ position:absolute; left:10px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:16px; pointer-events:none; }
.input-with-icon input{ padding-left:48px; }
.auth-card .input{ padding:12px 14px; background: rgba(255,255,255,0.8); border-radius:10px; border:none; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02); transition: box-shadow .18s ease, transform .12s ease; width:100%; font-size:14px; color:var(--text); }
.auth-card .input:focus{ outline:none; box-shadow: 0 10px 30px rgba(11,108,240,0.08); transform: translateY(-2px); }
.auth-actions{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.auth-actions .helper{ color:var(--muted); font-size:14px; }
.link-small{ color:var(--primary); font-weight:600; text-decoration:none; }
@media(max-width:540px){ .auth-card{ padding:20px } .input-with-icon .icon{ left:8px; width:34px } .input-with-icon input{ padding-left:44px } }