/* Toko Syaid Jaya Kreasi — Styles (Profesional & Elegan)
   - Edit palet warna/typografi di :root
   - Fokus: tipografi bersih, kontras baik, aksen elegan, layout responsif
*/

/* ==== Tokens ============================================================= */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: linear-gradient(180deg, #f0fdf4 0%, #fefce8 100%);
  --text: #0f172a;        /* slate-900 - darker for better contrast */
  --text-muted: #475569;  /* slate-600 - stronger than before */
  --border: #d1d5db;      /* gray-300 - more visible */
  --shadow: 0 10px 30px rgba(15, 23, 42, .12);

  /* Green & Gold palette sesuai logo */
  --brand: #16a34a;       /* green-600 - primary green */
  --brand-ink: #14532d;   /* green-900 */
  --brand-hover: #15803d; /* green-700 */

  --accent: #eab308;      /* yellow-500 - gold/emas */
  --accent-2: #ca8a04;    /* yellow-600 - darker gold */

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 28px;

  --container: 1180px;

  /* Enhanced gradients with green & gold */
  --grad-hero: radial-gradient(1000px 500px at 80% -10%, rgba(22,163,74,.20), transparent 60%), linear-gradient(180deg, #f0fdf4 0%, #fefce8 100%);
  --grad-cta: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  --grad-card: linear-gradient(180deg, #ffffff 0%, #fcfff7 100%);
}

/* ==== Base ============================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: 
    linear-gradient(-45deg, #ffffff, #f0fdf4, #fefce8, #f7fee7, #fffbeb);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* Ornamen dekoratif dengan animasi green & gold */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(22, 163, 74, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(234, 179, 8, 0.05) 0%, transparent 50%);
  animation: ornamentFloat 15s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes ornamentFloat {
  0%, 100% { 
    background: 
      radial-gradient(circle at 20% 30%, rgba(22, 163, 74, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(234, 179, 8, 0.05) 0%, transparent 50%);
  }
  33% { 
    background: 
      radial-gradient(circle at 70% 20%, rgba(234, 179, 8, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 30% 80%, rgba(22, 163, 74, 0.05) 0%, transparent 50%);
  }
  66% { 
    background: 
      radial-gradient(circle at 50% 80%, rgba(22, 163, 74, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 50% 20%, rgba(234, 179, 8, 0.05) 0%, transparent 50%);
  }
}

h1, h2, h3 {
  margin: 0 0 .4em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(32px, 3.2vw, 56px); font-weight: 700; }
h2 { font-size: clamp(24px, 2.2vw, 36px); font-weight: 700; }
h3 { font-size: clamp(18px, 1.2vw, 22px); font-weight: 600; }

.section-title{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 2px;
}

p { margin: 0 0 1em; }

a{
  color: var(--text);
  text-decoration: none;
}
a:hover{ color: var(--accent-2); }

.container{
  width: 100%;
  max-width: var(--container);
  padding: 0 20px;
  margin: 0 auto;
}

/* ==== Header ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, var(--surface), transparent 18%);
  border-bottom: 1px solid color-mix(in oklab, var(--border), transparent 40%);
}
.header-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 72px;
  position: relative;
  padding: 16px 0;
}
.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.brand-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.brand-logo{
  width: 120px; 
  height: 120px;
  object-fit: contain;
}
.brand-text{ 
  font-family: "Crimson Text", Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.brand-tagline{
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: 2px;
}

.site-nav{
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  flex-shrink: 0;
  margin-top: 4px;
}
.site-nav a{
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.site-nav a:hover{ color: var(--text); background: #f5f5f4; }
.site-nav .cta{
  color: #fff;
  background: var(--grad-cta);
  border-radius: 12px;
  padding: 10px 16px;
}
.site-nav .cta:hover{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); }

/* ==== Buttons =========================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(17,24,39,.04);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(17,24,39,.08); }
.btn.primary{
  background: var(--grad-cta);
  color: #fff;
  border: none;
}
.btn.primary:hover{ background: linear-gradient(180deg, var(--brand-hover), #166534); }
.btn.ghost{
  background: linear-gradient(180deg, #ffffff 0%, #f7fee7 100%);
  border: 1px solid color-mix(in oklab, var(--brand), transparent 30%);
  color: var(--brand-ink);
}

/* ==== Hero ============================================================== */
.hero{
  position: relative;
  padding: clamp(48px, 6.5vw, 96px) 0;
  background: var(--grad-hero);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: 
    radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 150px;
  height: 150px;
  background: 
    radial-gradient(circle, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}
.section-divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin-top: clamp(28px, 4vw, 56px);
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.hero-copy{
  text-align: center;
}
.hero-copy .eyebrow{
  display: inline-block;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: color-mix(in oklab, var(--brand), transparent 88%);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.hero-copy p{
  color: var(--text-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  max-width: 60ch;
  margin: 0 auto 1em;
}
.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.trust-points{
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 0; margin: 14px 0 0; list-style: none;
  color: var(--text-muted);
}
.trust-points li{
  padding: 6px 10px;
  border-radius: 999px;
  background: #f6f5f2;
  border: 1px solid #efede9;
  font-size: 13px;
}
.hero-art{
  position: relative;
  min-height: 280px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(220px 220px at 75% 20%, rgba(255,255,255,.7), transparent),
    linear-gradient(135deg, #bbf7d0, #fef3c7 60%);
  box-shadow: 0 30px 70px rgba(2,6,23,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.hero-badge{
  position: absolute; inset: auto 18px 18px auto;
  padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand), white 15%), var(--brand));
  color: #fff; font-weight: 700; letter-spacing: .4px;
  box-shadow: 0 10px 20px rgba(184,137,59,.35);
  z-index: 3;
}

/* Hero Gallery - Thumbnails berjalan 4 baris */
.hero-gallery{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 170px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 80%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 26px 16px;
  justify-content: flex-start;
}

.hero-gallery-row{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  width: max-content;
}

.hero-gallery-row:nth-child(1) { animation: heroGalleryScroll1 60s linear infinite; }
.hero-gallery-row:nth-child(2) { animation: heroGalleryScroll2 55s linear infinite; }
.hero-gallery-row:nth-child(3) { animation: heroGalleryScroll3 65s linear infinite; }
.hero-gallery-row:nth-child(4) { animation: heroGalleryScroll4 58s linear infinite; }

@keyframes heroGalleryScroll1 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes heroGalleryScroll2 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes heroGalleryScroll3 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes heroGalleryScroll4 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.hero-gallery-item{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 3px 6px rgba(0,0,0,.12);
}

.hero-gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==== Sections & Cards ================================================== */
.section{ padding: clamp(48px, 6.5vw, 88px) 0; }
.section.alt{ 
  background: var(--surface-alt);
  position: relative;
}
.section.alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 90%, rgba(245, 158, 11, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.card{
  background: var(--grad-card);
  border: 1px solid color-mix(in oklab, var(--border), transparent 10%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2vw, 26px);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.3;
}
.card.text{ font-size: 16px; color: var(--text); }
.card .note{ color: var(--text-muted); margin-top: 8px; }

.grid.features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
.feature{ padding: 18px; background: var(--grad-card); border-radius: 14px; border: 1px solid color-mix(in oklab, var(--border), transparent 10%); box-shadow: 0 4px 14px rgba(17,24,39,.06); }
.feature .icon{ font-size: 20px; }
.feature h3{ margin-top: 6px; margin-bottom: 4px; }
.feature p{ color: var(--text-muted); }

.list{ margin: 0 0 8px 18px; }
.list li{ margin: 6px 0; }

/* ==== Gallery =========================================================== */
.gallery{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.gallery-viewport{
  position: relative;
  overflow: auto; /* enable horizontal scroll for JS controls */
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
  -ms-overflow-style: none;     /* IE/Edge */
  scrollbar-width: none;        /* Firefox */
}
/* Hide scrollbar but keep programmatic scrolling */
.gallery-viewport::-webkit-scrollbar{
  display: none;                /* WebKit */
}
.gallery-strip{
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  width: max-content;
  will-change: transform, scroll-position;
}
.gallery-item{
  flex: 0 0 auto;
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #f3f4f6;
  border: 1px solid #eee;
}
.gallery-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .3s ease;
}
.gallery-item:hover img{ transform: scale(1.05); }

.fade{
  position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none;
}
.fade.left{ left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.fade.right{ right: 0; background: linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }

.gallery-btn{
  appearance: none; border: none; background: #fff; color: var(--accent);
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 6px 20px rgba(17,24,39,.12);
  display: inline-grid; place-items: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.gallery-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,24,39,.18); }
.gallery-btn:active{ transform: translateY(0); }
.gallery-btn svg{ display: block; }

.section-header .muted{ color: var(--text-muted); }

/* ==== Address / Map CTA ================================================ */
.address{ font-style: normal; }
.map-cta{ margin-top: 12px; }

.map-card{ margin-top: 14px; }
.map-img-link{
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.map-img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .25s ease;
}
.map-img-link:hover .map-img{ transform: scale(1.02); }
.map-caption{ margin-top: 6px; text-align: center; }

/* Live Google Maps embed */
.map-embed{
  margin-top: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.map-embed iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ==== Contact =========================================================== */
.contact-cta .phone{ font-size: 18px; margin-bottom: 10px; }
.contact-cta .muted{ color: var(--text-muted); }
.tagline{ margin-top: 18px; color: var(--text-muted); }

/* ==== Footer ============================================================ */
.site-footer{
  padding: 28px 0;
  border-top: 1px solid var(--border);
  background: 
    linear-gradient(135deg, #ffffff 0%, #fefefe 100%),
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.02) 0%, transparent 60%);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.4;
}
.footer-inner{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-direction: column;
}
.credit{
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}
.credit a{
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.credit a:hover{
  color: var(--brand-hover);
  text-decoration: underline;
}
.small{ font-size: 13px; }
.muted{ color: var(--text-muted); }

/* ==== Lightbox ========================================================== */
.lightbox{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2,6,23,.72);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox[aria-hidden="false"]{ display: flex; }
.lightbox img{
  max-width: min(96vw, 1200px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.lightbox-close{
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 10px;
  border: none; background: #ffffff;
  color: #111827; font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}


/* ==== Responsive ======================================================== */
@media (max-width: 1024px){
  .grid.features{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .hero-art{ min-height: 200px; margin-top: 24px; }
  .footer-inner{ flex-direction: column; text-align: center; gap: 8px; }
  .grid.features{ grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px){
  .container{ padding: 0 16px; }
  .hero-inner{ gap: 32px; }
  .hero-cta{ justify-content: center; }
  .trust-points{ justify-content: center; }
  .contact-cta{ text-align: center; }
  .cta-row{ justify-content: center; }
}

@media (max-width: 720px){
  .site-nav{ display: none; } /* keep header minimal on small screens */
  .gallery{ grid-template-columns: 1fr; }
  .gallery-btn{ display: none; }
  .fade{ width: 40px; }

  /* Elegan di mobile: spacing & tap target */
  .btn{ 
    padding: 16px 24px; 
    border-radius: 14px; 
    font-size: 15px;
    min-height: 48px; /* WCAG tap target */
  }
  .hero-copy p{ font-size: 16px; line-height: 1.6; }
  .section{ padding: clamp(40px, 8vw, 64px) 0; }
  
  /* Mobile typography scaling */
  h1{ font-size: clamp(28px, 6vw, 42px); line-height: 1.15; }
  h2{ font-size: clamp(22px, 4.5vw, 32px); }
  h3{ font-size: clamp(18px, 3.5vw, 24px); }
  
  /* Mobile spacing */
  .hero{ padding: clamp(32px, 8vw, 64px) 0; }
  .hero-art{ min-height: 180px; }
  .card{ padding: 20px; }
  .feature{ padding: 20px; text-align: center; }
  
  /* Gallery responsive */
  .gallery-item{ width: clamp(280px, 85vw, 320px); }
  
  /* Contact responsive */
  .contact-cta .phone{ font-size: 16px; text-align: center; }
  .tagline{ font-size: 15px; line-height: 1.5; }
}

@media (max-width: 480px){
  .container{ padding: 0 12px; }
  .btn{ padding: 14px 20px; font-size: 14px; }
  .trust-points li{ font-size: 12px; padding: 5px 8px; }
  .gallery-item{ width: clamp(260px, 90vw, 300px); }
}

/* Desktop enhancements */
@media (min-width: 1200px){
  .hero-inner{ gap: 64px; }
  .section{ padding: clamp(80px, 8vw, 112px) 0; }
  .grid.features{ gap: 32px; }
}