/* Glassmorphism Culinary Premium — style.css
   Spec: Contoh 2 kanan — GASTRO CMS (fictional brand)
   Stack: Bootstrap 5.3.3 + custom glass
   Path: public/slice-glassmorphism/assets/css/style.css
*/
:root{
  --brand-brown:#2B1A0E;
  --brand-amber:#C67A1F;
  --brand-amber-hover:#A85F12;
  --glass-bg:rgba(255,255,255,0.16);
  --glass-border:rgba(255,255,255,0.30);
  --glass-blur:16px;
}
*{font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
html,body{height:100%}
body{margin:0; background:#1a0f07}

/* ===== Hero full-bleed ===== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  background-color:#2B1A0E;
  background-image: url("../images/pasta-bg.jpg");
  background-image: image-set(
    url("../images/pasta-bg.webp") type("image/webp"),
    url("../images/pasta-bg.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  isolation:isolate;
  padding: 24px 16px;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.18) 100%);
  z-index:0;
}
.hero > *{position:relative; z-index:1}

/* ===== Glass Card ===== */
.glass-card{
  width: min(100%, 400px);
  padding: 28px 28px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass-card{
    background: rgba(255,255,255,0.88);
  }
  .glass-card .form-label{color: var(--brand-brown) !important}
}
@media (max-height: 600px){
  .glass-card{margin: 16px 0}
}

/* ===== Brand — Kangen Nusantara ===== */
.brand-logo-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.96);
  padding: 10px 18px 10px 18px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.09);
  border: 1px solid rgba(255,255,255,0.90);
}
.brand-logo-img{
  display: block;
  max-width: 200px;
  width: 68%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 374.98px){
  .brand-logo-wrap{padding: 8px 14px; border-radius: 12px}
  .brand-logo-img{max-width: 164px; width: 74%}
}
@media (min-width: 768px){
  .brand-logo-img{max-width: 216px}
  .brand-logo-wrap{padding: 11px 20px}
}

/* ===== Form ===== */
.glass-card .form-label{
  font-size: 13px;
  font-weight:500;
  color: rgba(255,255,255,0.92);
  margin-bottom: 6px;
}
.form-control-glass{
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #FFFFFF !important;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.form-control-glass::placeholder{color: rgba(255,255,255,0.55)}
.form-control-glass:focus{
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(198,122,31,0.85) !important;
  box-shadow: 0 0 0 0.22rem rgba(198,122,31,0.25) !important;
  color:#fff !important;
}
.form-control-glass:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  transition: background-color 9999s ease-out 0s;
  caret-color:#fff;
}
.was-validated .form-control-glass:invalid,
.form-control-glass.is-invalid{
  border-color: rgba(220,53,69,0.75) !important;
  box-shadow: 0 0 0 0.18rem rgba(220,53,69,0.22) !important;
}
.was-validated .form-control-glass:valid{
  border-color: rgba(25,135,84,0.65) !important;
}
.form-check-glass{
  display:flex;
  align-items:center;
  gap: 8px;
  padding-left: 0;
  margin-top: 2px;
}
.form-check-glass .form-check-input{
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 4px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.form-check-glass .form-check-input:checked{
  background-color: var(--brand-amber);
  border-color: var(--brand-amber);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.form-check-glass .form-check-input:focus{
  border-color: rgba(198,122,31,0.85);
  box-shadow: 0 0 0 0.18rem rgba(198,122,31,0.22);
}
.form-check-glass .form-check-label{
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .form-check-glass .form-check-label{color: var(--brand-brown)}
  .form-check-glass .form-check-input{border-color: rgba(43,26,14,0.22)}
}

/* ===== CTA ===== */
.btn-amber{
  height:44px;
  border-radius:10px;
  background: var(--brand-amber);
  border:1px solid var(--brand-amber);
  color:#fff;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.01em;
  box-shadow: 0 4px 14px rgba(198,122,31,0.28);
  transition: background .18s, transform .08s, box-shadow .18s;
}
.btn-amber:hover{background: var(--brand-amber-hover); border-color: var(--brand-amber-hover); color:#fff; box-shadow:0 6px 18px rgba(198,122,31,0.34)}
.btn-amber:active{transform: translateY(1px); box-shadow:0 2px 10px rgba(198,122,31,0.28)}
.btn-amber:focus-visible{box-shadow:0 0 0 .22rem rgba(198,122,31,0.30)}

/* ===== Responsive ===== */
@media (max-width: 374.98px){
  .glass-card{padding:20px 16px 18px; border-radius:16px}
  .form-control-glass{height:42px}
  .btn-amber{height:42px}
}
@media (min-width: 768px){
  .hero{padding: 32px}
  .glass-card{width: 420px; padding: 32px 32px 28px}
}
@media (min-width: 992px){
  .glass-card{width: 400px}
}
@media (min-width: 1920px){
  .hero{background-position:center 35%}
}

/* ===== Polish ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}
@media (prefers-contrast: more){
  .glass-card{border-color: rgba(255,255,255,0.60)}
  .form-control-glass{border-color: rgba(255,255,255,0.55) !important}
}