/* =====================================================
   GRIYOSUNAT
   MAIN STYLE
===================================================== */

:root {

  --green-900: #073b32;
  --green-800: #095548;
  --green-700: #0b6655;
  --green-600: #14816d;
  --green-100: #e8f4f0;

  --gold: #c99a3e;
  --gold-light: #f3dfad;

  --cream: #fbfaf5;
  --white: #ffffff;

  --text: #17332e;
  --text-light: #63736f;

  --border: #e4ebe8;

  --shadow:
    0 15px 45px rgba(7, 59, 50, .10);

  --radius:
    20px;

  --container:
    1180px;

}


/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    'Plus Jakarta Sans',
    sans-serif;

  color:
    var(--text);

  background:
    var(--cream);

  line-height:
    1.7;

}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
}


/* =====================================================
   CONTAINER
===================================================== */

.container {

  width:
    min(
      calc(100% - 40px),
      var(--container)
    );

  margin:
    0 auto;

}


/* =====================================================
   HEADER
===================================================== */

.site-header {

  position:
    sticky;

  top: 0;

  z-index: 1000;

  background:
    rgba(255,255,255,.96);

  border-bottom:
    1px solid var(--border);

  backdrop-filter:
    blur(12px);

}


.nav-container {

  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


/* LOGO */

.logo {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.logo-symbol {

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--gold);

  background:
    var(--green-900);

  border-radius:
    50%;

  font-size:
    19px;

}


.logo strong {

  display:
    block;

  color:
    var(--green-900);

  font-size:
    20px;

  line-height:
    1.1;

}


.logo small {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--text-light);

  font-size:
    9px;

  letter-spacing:
    .5px;

}


/* NAV */

.main-nav {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

}


.main-nav a {

  padding:
    9px 13px;

  color:
    #52635f;

  font-size:
    13px;

  font-weight:
    600;

  border-radius:
    10px;

  transition:
    .25s;

}


.main-nav a:hover,
.main-nav a.active {

  color:
    var(--green-800);

  background:
    var(--green-100);

}


.main-nav .nav-booking {

  margin-left:
    8px;

  color:
    white;

  background:
    var(--green-800);

  padding:
    10px 18px;

}


.main-nav .nav-booking:hover {

  color:
    white;

  background:
    var(--green-900);

}


.menu-toggle {

  display:
    none;

  border:
    0;

  background:
    transparent;

  font-size:
    25px;

  color:
    var(--green-900);

}


/* =====================================================
   HERO
===================================================== */

.hero {

  position:
    relative;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #edf7f2 0%,
      #fbfaf5 58%,
      #f3e8cc 100%
    );

}


.hero-pattern {

  position:
    absolute;

  width:
    500px;

  height:
    500px;

  right:
    -160px;

  top:
    -170px;

  border:
    1px solid
    rgba(201,154,62,.18);

  border-radius:
    50%;

}


.hero-pattern::after {

  content:
    '';

  position:
    absolute;

  inset:
    45px;

  border:
    1px solid
    rgba(201,154,62,.13);

  border-radius:
    50%;

}


.hero-content {

  min-height:
    610px;

  display:
    grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:
    70px;

  align-items:
    center;

  padding:
    70px 0;

}


.hero-badge {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    18px;

  padding:
    7px 13px;

  color:
    var(--green-800);

  background:
    rgba(255,255,255,.8);

  border:
    1px solid
    #d9e9e4;

  border-radius:
    30px;

  font-size:
    11px;

  font-weight:
    700;

}


.hero-badge span {
  color:
    var(--gold);
}


.hero h1 {

  max-width:
    650px;

  margin:
    0;

  color:
    var(--green-900);

  font-family:
    'Amiri',
    serif;

  font-size:
    clamp(
      52px,
      6vw,
      78px
    );

  font-weight:
    700;

  line-height:
    1.03;

}


.hero h1 span {

  display:
    block;

  color:
    var(--gold);

}


.hero-text > p {

  max-width:
    600px;

  margin:
    24px 0;

  color:
    var(--text-light);

  font-size:
    16px;

}


.hero-buttons {

  display:
    flex;

  gap:
    12px;

  margin:
    28px 0;

}


/* BUTTON */

.btn {

  display:
    inline-flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    7px;

  min-height:
    48px;

  padding:
    0 21px;

  border:
    0;

  border-radius:
    11px;

  cursor:
    pointer;

  font-size:
    13px;

  font-weight:
    700;

  transition:
    .25s;

}


.btn-primary {

  color:
    white;

  background:
    var(--green-800);

  box-shadow:
    0 8px 20px
    rgba(9,85,72,.2);

}


.btn-primary:hover {

  transform:
    translateY(-2px);

  background:
    var(--green-900);

}


.btn-outline {

  color:
    var(--green-800);

  background:
    transparent;

  border:
    1px solid
    #abc8c0;

}


.btn-outline:hover {

  background:
    white;

}


.btn-light {

  color:
    var(--green-900);

  background:
    white;

}


.btn-whatsapp {

  color:
    white;

  background:
    rgba(255,255,255,.14);

  border:
    1px solid
    rgba(255,255,255,.3);

}


/* TRUST */

.hero-trust {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    17px;

  color:
    #6a7975;

  font-size:
    10px;

  font-weight:
    600;

}


.hero-trust strong {

  color:
    var(--green-700);

}


/* HERO CARD */

.hero-card {

  position:
    relative;

  min-height:
    430px;

  display:
    flex;

  align-items:
    flex-end;

  padding:
    42px;

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      var(--green-900),
      var(--green-700)
    );

  border-radius:
    30px;

  box-shadow:
    0 25px 60px
    rgba(7,59,50,.25);

}


.hero-card::before {

  content:
    '';

  position:
    absolute;

  width:
    280px;

  height:
    280px;

  right:
    -100px;

  top:
    -100px;

  border:
    1px solid
    rgba(243,223,173,.25);

  border-radius:
    50%;

}


.hero-card::after {

  content:
    '';

  position:
    absolute;

  width:
    180px;

  height:
    180px;

  right:
    -50px;

  top:
    -50px;

  border:
    1px solid
    rgba(243,223,173,.18);

  border-radius:
    50%;

}


.hero-card-decoration {

  position:
    absolute;

  top:
    35px;

  right:
    40px;

  color:
    var(--gold);

  font-size:
    46px;

}


.hero-card-content {

  position:
    relative;

  z-index:
    2;

}


.hero-card-content > span {

  color:
    var(--gold-light);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    3px;

}


.hero-card h2 {

  margin:
    12px 0;

  color:
    white;

  font-family:
    'Amiri',
    serif;

  font-size:
    43px;

  line-height:
    1.05;

}


.hero-card p {

  max-width:
    320px;

  color:
    rgba(255,255,255,.72);

  font-size:
    13px;

}


.hero-card-btn {

  display:
    inline-block;

  margin-top:
    12px;

  color:
    var(--gold-light);

  font-size:
    13px;

  font-weight:
    700;

}


/* =====================================================
   QUICK SECTION
===================================================== */

.quick-section {

  position:
    relative;

  margin-top:
    -38px;

  z-index:
    5;

}


.quick-card {

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  padding:
    20px 25px;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    17px;

  box-shadow:
    var(--shadow);

}


.quick-icon {

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--green-100);

  border-radius:
    13px;

  font-size:
    21px;

}


.quick-text {

  flex:
    1;

}


.quick-text strong {

  display:
    block;

  color:
    var(--green-900);

  font-size:
    14px;

}


.quick-text span {

  color:
    var(--text-light);

  font-size:
    11px;

}


/* =====================================================
   SECTION
===================================================== */

.section {

  padding:
    100px 0;

}


.section-heading {

  max-width:
    650px;

  margin:
    0 auto 50px;

  text-align:
    center;

}


.section-label {

  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--gold);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2px;

}


.section-heading h2,
.method-content h2 {

  margin:
    0;

  color:
    var(--green-900);

  font-family:
    'Amiri',
    serif;

  font-size:
    44px;

  line-height:
    1.15;

}


.section-heading h2 span,
.method-content h2 span {

  color:
    var(--gold);

}


.section-heading p {

  margin:
    16px auto 0;

  color:
    var(--text-light);

  font-size:
    13px;

}


/* =====================================================
   FEATURES
===================================================== */

.feature-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    17px;

}


.feature-card {

  padding:
    28px 23px;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  transition:
    .25s;

}


.feature-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow);

}


.feature-icon {

  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    20px;

  background:
    var(--green-100);

  border-radius:
    14px;

  font-size:
    22px;

}


.feature-card h3 {

  margin:
    0 0 8px;

  color:
    var(--green-900);

  font-size:
    15px;

}


.feature-card p {

  margin:
    0;

  color:
    var(--text-light);

  font-size:
    11px;

}


/* =====================================================
   METHOD
===================================================== */

.method-preview {

  padding:
    100px 0;

  background:
    white;

}


.method-layout {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    75px;

  align-items:
    center;

}


.method-image {

  min-height:
    450px;

  padding:
    25px;

  background:
    linear-gradient(
      135deg,
      #dcece7,
      #f4e7c8
    );

  border-radius:
    30px;

}


.method-placeholder {

  width:
    100%;

  height:
    100%;

  min-height:
    400px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  color:
    var(--green-900);

  background:
    rgba(255,255,255,.55);

  border:
    1px dashed
    rgba(7,59,50,.2);

  border-radius:
    20px;

}


.method-placeholder span {

  color:
    var(--gold);

  font-size:
    55px;

}


.method-placeholder strong {

  margin-top:
    8px;

  font-family:
    'Amiri',
    serif;

  font-size:
    35px;

}


.method-placeholder small {

  color:
    var(--text-light);

}


.method-content p {

  max-width:
    530px;

  color:
    var(--text-light);

  font-size:
    13px;

}


.method-list {

  margin:
    25px 0;

}


.method-list div {

  display:
    flex;

  gap:
    10px;

  margin:
    10px 0;

  color:
    #52635f;

  font-size:
    12px;

  font-weight:
    600;

}


.method-list span {

  color:
    var(--green-700);

}


.text-link {

  color:
    var(--green-700);

  font-size:
    13px;

  font-weight:
    800;

}


/* =====================================================
   CTA
===================================================== */

.cta-section {

  padding:
    80px 0;

}


.cta-box {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  padding:
    50px;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      var(--green-900),
      var(--green-700)
    );

  border-radius:
    28px;

  overflow:
    hidden;

}


.cta-box h2 {

  max-width:
    620px;

  margin:
    0;

  font-family:
    'Amiri',
    serif;

  font-size:
    38px;

  line-height:
    1.15;

}


.cta-box p {

  margin:
    10px 0 0;

  color:
    rgba(255,255,255,.7);

  font-size:
    12px;

}


.cta-actions {

  display:
    flex;

  gap:
    10px;

  flex-shrink:
    0;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

  padding:
    60px 0 0;

  color:
    rgba(255,255,255,.65);

  background:
    #062e28;

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:
    60px;

}


.footer-logo {

  color:
    white;

  font-family:
    'Amiri',
    serif;

  font-size:
    27px;

}


.footer p {

  max-width:
    350px;

  font-size:
    11px;

}


.footer h4 {

  margin:
    0 0 14px;

  color:
    var(--gold-light);

  font-size:
    12px;

}


.footer a {

  display:
    block;

  margin:
    7px 0;

  font-size:
    11px;

}


.footer-wa {

  padding:
    9px 13px;

  color:
    white;

  background:
    transparent;

  border:
    1px solid
    rgba(255,255,255,.25);

  border-radius:
    8px;

  cursor:
    pointer;

}


.footer-bottom {

  margin-top:
    45px;

  padding:
    18px 20px;

  text-align:
    center;

  color:
    rgba(255,255,255,.4);

  border-top:
    1px solid
    rgba(255,255,255,.08);

  font-size:
    10px;

}


/* =====================================================
   FLOATING WHATSAPP
===================================================== */

.floating-wa {

  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    900;

  width:
    55px;

  height:
    55px;

  border:
    0;

  border-radius:
    50%;

  color:
    white;

  background:
    #168c5b;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.18);

  cursor:
    pointer;

  font-size:
    23px;

}


/* =====================================================
   GENERIC PAGE HERO
===================================================== */

.page-hero {

  padding:
    80px 0;

  text-align:
    center;

  background:
    linear-gradient(
      135deg,
      #edf7f2,
      #f8f0dc
    );

}


.page-hero h1 {

  margin:
    0;

  color:
    var(--green-900);

  font-family:
    'Amiri',
    serif;

  font-size:
    55px;

}


.page-hero p {

  max-width:
    650px;

  margin:
    12px auto 0;

  color:
    var(--text-light);

  font-size:
    13px;

}


/* =====================================================
   BOOKING / JADWAL
===================================================== */

.page-section {

  padding:
    70px 0;

}


.card {

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  box-shadow:
    0 8px 30px
    rgba(7,59,50,.06);

}


.loading {

  padding:
    40px;

  text-align:
    center;

  color:
    var(--text-light);

}


.error-message {

  padding:
    20px;

  color:
    #9c3c3c;

  background:
    #fff1f1;

  border:
    1px solid #f0cccc;

  border-radius:
    12px;

}


.success-message {

  padding:
    25px;

  color:
    var(--green-900);

  background:
    var(--green-100);

  border-radius:
    15px;

}


/* =====================================================
   FORM
===================================================== */

.form-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    18px;

}


.form-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

}


.form-group.full {

  grid-column:
    1 / -1;

}


.form-group label {

  color:
    var(--green-900);

  font-size:
    11px;

  font-weight:
    700;

}


.form-group input,
.form-group select,
.form-group textarea {

  width:
    100%;

  padding:
    12px 14px;

  color:
    var(--text);

  background:
    white;

  border:
    1px solid #d9e4e0;

  border-radius:
    10px;

  outline:
    none;

  font-family:
    inherit;

  font-size:
    12px;

}


.form-group textarea {

  min-height:
    100px;

  resize:
    vertical;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

  border-color:
    var(--green-600);

  box-shadow:
    0 0 0 3px
    rgba(20,129,109,.08);

}


/* =====================================================
   SLOT
===================================================== */

.slot-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    12px;

}


.slot {

  padding:
    16px;

  text-align:
    center;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    13px;

  cursor:
    pointer;

}


.slot:hover {

  border-color:
    var(--green-600);

}


.slot.selected {

  color:
    white;

  background:
    var(--green-800);

  border-color:
    var(--green-800);

}


.slot.full {

  color:
    #a05b5b;

  background:
    #fff5f5;

  cursor:
    not-allowed;

}


.slot-time {

  display:
    block;

  font-size:
    15px;

  font-weight:
    800;

}


.slot-status {

  display:
    block;

  margin-top:
    4px;

  font-size:
    9px;

}


/* =====================================================
   BADGE
===================================================== */

.status-badge {

  display:
    inline-flex;

  padding:
    5px 9px;

  border-radius:
    20px;

  font-size:
    9px;

  font-weight:
    800;

}


.status-tersedia {

  color:
    #176c52;

  background:
    #e2f4eb;

}


.status-terbatas {

  color:
    #8a6419;

  background:
    #fff2cc;

}


.status-penuh {

  color:
    #a04848;

  background:
    #ffe7e7;

}