:root {

  /* MAIN COLORS */
  --pink-main:
  #c2185b;

  --pink-dark:
  #a80f4b;

  --pink-soft:
  #fff1f5;

  --pink-soft-2:
  #ffd6e5;

  --pink-soft-3:
  #ffc2d8;

  --rose-soft:
  #fff4f7;

  --lavender-soft:
  #fdf7fb;

  --white-glass:
  rgba(255,255,255,.78);

  /* TEXT */
  --text-dark:
  #24121a;

  --text-soft:
  #6b7280;

  /* SHADOW */
  --shadow-soft:
  0 10px 40px rgba(194,24,91,.10);

  --shadow-premium:
  0 20px 60px rgba(194,24,91,.16);

  --shadow-glow:
  0 0 30px rgba(194,24,91,.18);

  /* RADIUS */
  --radius-xl:
  2rem;

  --radius-2xl:
  2.5rem;

  /* BACKGROUND */
  --bg-main:
  linear-gradient(
180deg,
#fff7fa 0%,
#fdebf3 45%,
#f6d7e5 100%
);

}

html,
body{

    touch-action: manipulation;

    -webkit-text-size-adjust: 100%;

}

button,
a,
input,
select,
textarea{

    touch-action: manipulation;

}

    #home {
       scroll-margin-top: 100px;
    }

    html {
      scroll-behavior: smooth;
    }

    body{

  font-family:
  'Inter',
  sans-serif;

  -webkit-font-smoothing:
  antialiased;

  -moz-osx-font-smoothing:
  grayscale;

  background:

  radial-gradient(
    circle at top left,
    rgba(194,24,91,.10),
    transparent 30%
  ),

  radial-gradient(
    circle at top right,
    rgba(255,192,220,.18),
    transparent 35%
  ),

  linear-gradient(
    180deg,
    #fff8fb 0%,
    #fff3f7 45%,
    #ffffff 100%
  );

  color:
  var(--text-dark);

}

    @keyframes bounceCart {
      0% { transform: scale(1); }
      50% { transform: scale(1.18); }
      100% { transform: scale(1); }
    }

    @keyframes addedFlash {
      0% { transform: translateY(0); }
      35% { transform: translateY(-2px); }
      50% { background: rgb(34 197 94); }
      100% { transform: translateY(0); }
    }

    @keyframes floatingGlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-up{

  opacity:0;

  transform:
  translateY(40px);

  transition:
  all .8s ease;

}

.fade-up.show{

  opacity:1;

  transform:
  translateY(0);

}

    .glass-card {
      background: rgba(255, 255, 255, 0.74);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(244, 114, 182, 0.16);
      box-shadow: 0 18px 60px rgba(190, 24, 93, 0.08);
    }

    .glass-premium{

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

  backdrop-filter:
  blur(22px);

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

  box-shadow:
  var(--shadow-premium);

}

    .soft-ring {
      box-shadow:
        0 0 0 1px rgba(244, 114, 182, 0.10),
        0 22px 50px rgba(17, 24, 39, 0.06);
    }

    .cart-bounce {
      animation: bounceCart 0.4s ease;
    }

    .btn-added {
      animation: addedFlash 0.6s ease;
    }

    .cart-panel-enter {
      transform: translateX(100%);
      opacity: 0;
    }

    .cart-panel-open {
      transform: translateX(0);
      opacity: 1;
    }

    .cart-overlay-show {
      opacity: 1;
      visibility: visible;
    }

    .cart-overlay-hide {
      opacity: 0;
      visibility: hidden;
    }

    .payment-card.active {
      border-color: rgb(219 39 119);
      background: linear-gradient(180deg, rgb(255 255 255), rgb(253 242 248));
      box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.12), 0 12px 30px rgba(219, 39, 119, 0.10);
    }

    .size-chip {
      transition: all 0.22s ease;
    }

    .size-chip.active {
      background: linear-gradient(135deg, rgb(219 39 119), rgb(236 72 153));
      color: white;
      border-color: rgb(219 39 119);
      box-shadow: 0 8px 18px rgba(219, 39, 119, 0.18);
    }

    .hero-image-wrap {
      position: relative;
      animation: floatingGlow 5s ease-in-out infinite;
    }

    .hero-image-wrap::before,
    .hero-image-wrap::after {
      content: "";
      position: absolute;
      inset: auto;
      border-radius: 999px;
      filter: blur(14px);
      z-index: -1;
    }

    .hero-image-wrap::before {
      width: 170px;
      height: 170px;
      background: rgba(244, 114, 182, 0.22);
      top: -20px;
      left: -20px;
    }

    .hero-image-wrap::after {
      width: 210px;
      height: 210px;
      background: rgba(251, 207, 232, 0.7);
      bottom: -24px;
      right: -16px;
    }

    .product-card{

  position:relative;

  overflow:hidden;

  border-radius:
  2rem;

  background:
rgba(255,245,249,.92);

  backdrop-filter:
  blur(20px);

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

  box-shadow:
0 18px 55px rgba(194,24,91,.12);

  transition:
  all .35s ease;

}

    .product-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 30px 70px rgba(255,105,180,.18);

}

.product-card img{

  transition:
  transform .6s ease;

}

.product-card:hover img{

  transform:
  scale(1.06);

}

.product-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.22),
    transparent 40%
  );

  pointer-events:none;

}

.add-to-cart-btn{

  background:
  linear-gradient(
    135deg,
    #b31352,
    #d81b60
  ) !important;

  border:none;

  box-shadow:
  0 10px 25px rgba(179,19,82,.22);

  transition:
  all .25s ease;

}

.add-to-cart-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 15px 35px rgba(179,19,82,.30);

}

.product-detail-btn{

width:100%;

margin-top:14px;

padding:14px;

border:none;

border-radius:999px;

background:
linear-gradient(
135deg,
#c2185b,
#d81b60
);

color:white;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.product-detail-btn:hover{

transform:
translateY(-2px);

}

.product-series{

font-size:12px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#c2185b;

}

.product-price-large{

font-size:24px;

font-weight:800;

color:#c2185b;

margin-top:10px;

}


    .section-title {
      letter-spacing: 0.18em;
    }

    .modal-card,
    .booking-side-card,
    .checkout-box {
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255, 248, 251, 0.95));
      backdrop-filter: blur(12px);
    }

    .hide-scrollbar::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .search-mini-premium {
      backdrop-filter: blur(10px);
    }

    .ios-date-input {
      -webkit-appearance: none;
      appearance: none;
      min-height: 52px;
      line-height: 1.2;
    }

    .ios-date-input::-webkit-date-and-time-value {
      text-align: left;
    }

    .ios-date-input::-webkit-calendar-picker-indicator {
      opacity: 0.01;
      position: absolute;
      right: 16px;
      width: 24px;
      height: 24px;
      cursor: pointer;
    }

    .ios-date-wrap {
      position: relative;
    }

    .ios-date-icon {
      pointer-events: none;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: rgb(236 72 153);
    }

    @supports (-webkit-touch-callout: none) {
      .ios-date-input {
        font-size: 16px;
      }
    }

    @media (max-width: 640px) {
      .mobile-stack {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
      }
    }

    #custom {
      scroll-margin-top: 100px;
    }

    /* SECTION SPACING RESPONSIVE
       Bagian ini dibantu dirapikan agar jarak antar section lebih dekat,
       tetap nyaman untuk desktop, Android, dan iOS. Spacing utama tetap
       memakai class Tailwind langsung di HTML. */

    /* FINISHING JUALAN NEMA NAILS
       Bagian ini hanya mempercantik tampilan, filter produk, header ringkas,
       dan informasi customer. Fitur lama seperti cart, booking, custom, dan iPaymu tetap dipertahankan. */
    #process-info { scroll-margin-top: 100px; }

    .header-info-menu {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: all 0.18s ease;
    }
    .header-info-wrap:hover .header-info-menu,
    .header-info-wrap:focus-within .header-info-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .filter-chip {
      border: 1px solid rgba(219, 39, 119, 0.18);
      background: rgba(255, 255, 255, 0.88);
      color: rgb(157, 23, 77);
      box-shadow: 0 10px 24px rgba(190, 24, 93, 0.06);
      transition: all 0.2s ease;
    }

    .filter-chip:hover,
    .filter-chip.active {
      color: white;
      border-color: transparent;
      background: linear-gradient(135deg, var(--pink-bright), var(--pink-main), var(--pink-dark));
      box-shadow: 0 14px 28px rgba(219, 39, 119, 0.22);
      transform: translateY(-1px);
    }

    .sales-soft-card {
      background:
linear-gradient(
180deg,
rgba(255,245,249,.96),
rgba(252,228,236,.92)
);
    }

    .sales-info-card {
      background:
rgba(255,248,251,.92);

border:
1px solid #f3c2d3;
    }

    @media (max-width: 640px) {
      .header-whatsapp-label { display: none; }
    }

body{
  overflow-x:hidden;
}

.auth-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:10px 18px;

border:1px solid #e7a1bf;

border-radius:9999px;

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

backdrop-filter:
blur(10px);

color:#b31352;

font-size:14px;
font-weight:600;

box-shadow:
0 8px 24px rgba(179,19,82,.08);

transition:
all .3s ease;

}

.auth-btn:hover{

background:#fff1f5;

border-color:#d81b60;

transform:
translateY(-2px);

box-shadow:
0 12px 28px rgba(179,19,82,.14);

}

.btn-premium{

position:relative;

overflow:hidden;

background:
linear-gradient(
135deg,
#b31352,
#d81b60
);

box-shadow:
0 15px 35px rgba(179,19,82,.22);

transition:
all .35s ease;

}

.btn-premium:hover{

transform:
translateY(-2px);

filter:
brightness(1.05);

box-shadow:
0 18px 40px rgba(179,19,82,.28);

}

.btn-premium:active{

  transform:
  scale(.97);

}

.bg-pink-500,
.bg-pink-600{

  background:
  linear-gradient(
    135deg,
    #c2185b,
    #d81b60
  ) !important;

}

.border-pink-100{

  border-color:
  #f8d3e2 !important;

}

.border-pink-200{

  border-color:
  #f1bdd3 !important;

}

.bg-pink-50{

  background:
  #fff4f7 !important;

}

.text-pink-500,
.text-pink-600{

  color:
  #c2185b !important;

}

h1,
h2,
h3,
.hero-title,
.section-title{

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

}

.from-pink-500,
.from-pink-600{

--tw-gradient-from:
#b31352 !important;

}

.to-pink-500,
.to-pink-600{

--tw-gradient-to:
#d81b60 !important;

}

.hover\:from-pink-700:hover{

--tw-gradient-from:
#970f46 !important;

}

.hover\:to-pink-600:hover{

--tw-gradient-to:
#c2185b !important;

}

.hero-trust{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:24px;

}

.trust-item{

display:flex;
align-items:center;
gap:8px;

padding:12px 18px;

border-radius:999px;

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

backdrop-filter:
blur(10px);

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

font-size:14px;
font-weight:700;

color:
#7a294f;

box-shadow:
0 10px 25px rgba(179,19,82,.08);

transition:
all .25s ease;

}

.trust-item:hover{

transform:
translateY(-2px);

box-shadow:
0 18px 40px rgba(179,19,82,.14);

}

.hero-info-box{

padding:26px 28px;

border-radius:30px;

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

backdrop-filter:
blur(18px);

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

box-shadow:
0 18px 50px rgba(179,19,82,.08);

max-width:680px;

width:100%;

}

.hero-info-box::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:260px;
height:260px;

border-radius:999px;

background:
rgba(255,192,220,.18);

filter:
blur(20px);

pointer-events:none;

}

.hero-info-box::after{

content:"";

position:absolute;

bottom:-120px;
left:-120px;

width:220px;
height:220px;

border-radius:999px;

background:
rgba(194,24,91,.10);

filter:
blur(20px);

pointer-events:none;

}

@media(max-width:768px){

.hero-info-box{

padding:24px 20px;

border-radius:28px;

}

.hero-trust{

gap:10px;

}

.trust-item{

font-size:13px;

padding:10px 14px;

}

}

.product-card-v2{

position:relative;

overflow:hidden;

border-radius:0px;

}

.product-image-wrap{

position:relative;

overflow:hidden;

border-radius:32px;

}

.product-image{

width:100%;

height:380px;

object-fit:cover;

display:block;

transition:.4s;

}

.product-card-v2:hover .product-image{

transform:scale(1.05);

}

.view-detail-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:8px 16px;

border-radius:999px;

background:rgba(233,30,99,.08);

color:#e91e63;

font-size:13px;
font-weight:600;

border:none;
}

.product-overlay{

padding-bottom:16px;

}

.product-info{
padding-top:10px;
display:flex;
flex-direction:column;
gap:0;
}

.product-info h3{
font-size:18px;
font-weight:700;
line-height:1.2;
margin:0;
}

.product-info .series{
font-size:13px;
color:#c2185b;
margin:2px 0;
}

.product-info .price{
font-size:20px;
font-weight:800;
color:#c2185b;
margin:4px 0 0;
}

@media (max-width:768px){

.product-image{
height:180px;
}

.product-info h3{
font-size:14px;
line-height:1.2;
}

.product-info .series{
font-size:11px;
}

.product-info .price{
font-size:15px;
}

.view-detail-btn{
font-size:11px;
padding:6px 12px;
min-width:110px;
}

}

.filter-chip{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid #f8bfd5;
  background:#fff;
  color:#e91e63;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.filter-chip:hover{
  transform:translateY(-1px);
}

.filter-chip.active{
  background:#e91e63;
  color:#fff;
  border-color:#e91e63;
}

.hero-trust-slider{
  margin-top:24px;
  width:100%;
  max-width:420px;
  height:60px;

  background:#fff;
  border:1px solid rgba(236,72,153,.15);
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  position:relative;

  box-shadow:
  0 10px 30px rgba(236,72,153,.08);
}
.hero-trust-slider{
  margin-top:24px;
  width:100%;
  max-width:420px;
  height:60px;

  background:#fff;
  border:1px solid rgba(236,72,153,.15);
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  position:relative;

  box-shadow:
  0 10px 30px rgba(236,72,153,.08);
}

.trust-text{
  position:absolute;

  font-size:18px;
  font-weight:700;
  color:#8b3d68;

  transition:
    transform .7s cubic-bezier(.22,1,.36,1),
    opacity .7s ease;
}

.hero-mini-btn{
  height:44px;

  padding:0 18px;

  border-radius:999px;

  font-size:13px;
  font-weight:600;

  display:flex;
  align-items:center;
  justify-content:center;

  background:white;

  border:1px solid #fbcfe8;

  color:#c2185b;

  transition:.3s;
}

.hero-mini-btn:hover{
  transform:translateY(-2px);
}

.hero-mini-btn-primary{
  background:linear-gradient(
    135deg,
    #c2185b,
    #d81b60
  );

  color:white;

  border:none;
}

.filter-scroll{
    display:flex;
    gap:10px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:8px 16px;
    font-size: 13px;
    white-space: nowrap;

    margin-top:16px;

    border:1px solid rgba(236,72,153,.15);

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    scrollbar-width:none;
}

.filter-scroll::-webkit-scrollbar{
    display:none;
}

.filter-scroll .filter-chip{
    flex-shrink:0;
}

.success-modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
  z-index: 99999;
}

.success-modal.show{
  display: grid;
}

.success-card{
  width: min(280px, calc(100vw - 40px));
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #fbcfe8;
  box-shadow: 0 12px 30px rgba(194,24,91,.15);
  text-align: center;
}

.success-animation{
  width: 110px;
  height: 110px;
  margin: 0 auto 4px;
}

.success-card h3{
  font-size: 20px;
  margin: 0;
}

.success-card p{
  margin-top: 4px;
  font-size: 14px;
}