<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KIRA Lighting</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#f7f4ee;
    --paper:#ffffff;
    --ink:#22201c;
    --ink-dim:#6b6459;
    --clay:#c17a52;
    --clay-soft:#e8c4a8;
    --sage:#8a9182;
    --line:#e3ddd0;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--clay);color:#fff;}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}

  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--clay);
    font-weight:600;
  }

  .progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--clay);z-index:1000;}

  nav{
    position:fixed; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:center;
    padding:30px 6vw; z-index:100;
    background:rgba(247,244,238,0.85);
    backdrop-filter:blur(8px);
    border-bottom:1px solid transparent;
    transition:border-color 0.3s ease;
  }
  nav.scrolled{border-color:var(--line);}
  .logo{font-family:'Fraunces',serif;font-size:1.5rem;letter-spacing:-0.01em;}
  .logo span{color:var(--clay);}
  .nav-links{display:flex;gap:38px;font-size:0.85rem;}
  .nav-links a{opacity:0.7;transition:opacity 0.3s;}
  .nav-links a:hover{opacity:1;}
  .nav-cta{
    border:1px solid var(--ink);
    padding:10px 22px;
    font-size:0.8rem;
    transition:all 0.3s ease;
  }
  .nav-cta:hover{background:var(--ink);color:var(--bg);}
  @media(max-width:800px){.nav-links{display:none;}}

  /* ============ HERO ============ */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:140px 6vw 80px;
    position:relative;
  }
  .hero-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:40px;
    opacity:0; animation:fadeUp 0.9s ease 0.2s forwards;
  }
  .hero-top p{max-width:280px;font-size:0.95rem;color:var(--ink-dim);line-height:1.6;text-align:right;font-weight:300;}
  .hero h1{
    font-size:clamp(3.2rem, 9vw, 8.5rem);
    line-height:0.95;
    opacity:0; animation:fadeUp 1s ease 0.4s forwards;
  }
  .hero h1 .accent{color:var(--clay);font-style:italic;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

  .hero-visual{
    margin-top:50px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:16px;
    height:46vh;
    opacity:0; animation:fadeUp 1.1s ease 0.6s forwards;
  }
  .hv-block{
    border-radius:6px;
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .hv-1{background:linear-gradient(155deg,#fff,#efe6d8);}
  .hv-2{background:linear-gradient(155deg,var(--clay-soft),#f3d9c3);}
  .hv-3{background:linear-gradient(155deg,#eae6da,#dcd5c4);}
  .hv-block svg{width:56%;transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);}
  .hv-block:hover svg{transform:translateY(-6px) scale(1.03);}

  @media(max-width:800px){
    .hero-visual{grid-template-columns:1fr 1fr;height:auto;}
    .hv-1{grid-column:span 2;height:32vh;}
    .hv-2,.hv-3{height:22vh;}
    .hero-top{flex-direction:column;gap:16px;}
    .hero-top p{text-align:left;}
  }

  /* ============ MARQUEE ============ */
  .marquee{
    padding:22px 0; overflow:hidden; white-space:nowrap;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--paper);
  }
  .marquee-track{display:inline-flex; animation:marquee 26s linear infinite;}
  .marquee-track span{
    font-family:'Fraunces',serif; font-size:1.2rem;
    color:var(--ink-dim); padding:0 32px; display:inline-flex; align-items:center; gap:32px;
  }
  .marquee-track span::after{content:"·";color:var(--clay);font-size:1.4rem;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ============ TWO WORLDS ============ */
  .worlds{
    display:grid; grid-template-columns:1fr 1fr;
    gap:1px; background:var(--line);
    margin:0;
  }
  .world{
    background:var(--paper);
    padding:80px 5vw;
    min-height:60vh;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .world .eyebrow{margin-bottom:24px;}
  .world h3{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:20px;line-height:1.05;}
  .world p{color:var(--ink-dim);font-size:0.98rem;line-height:1.7;max-width:340px;font-weight:300;}
  .world-icon{margin-top:40px;}
  .world-icon svg{width:100px;opacity:0.85;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);}
  .world:hover .world-icon svg{transform:translateY(-8px);}
  @media(max-width:900px){.worlds{grid-template-columns:1fr;}}

  /* ============ GALLERY ============ */
  .gallery-section{padding:140px 6vw;}
  .g-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:24px; margin-bottom:64px;
  }
  .g-head h2{font-size:clamp(2.2rem,4.5vw,3.6rem);}
  .g-head .eyebrow{display:block;margin-bottom:14px;}
  .g-head p{max-width:300px;color:var(--ink-dim);font-size:0.92rem;line-height:1.6;font-weight:300;}

  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .g-item{
    background:var(--paper);
    border-radius:8px;
    aspect-ratio:4/5;
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line);
  }
  .g-item .g-bg{
    position:absolute; inset:0;
    transition:opacity 0.5s ease;
  }
  .g-item:nth-child(1) .g-bg{background:radial-gradient(circle at 35% 30%, #f3d9c3, transparent 70%);}
  .g-item:nth-child(2) .g-bg{background:radial-gradient(circle at 35% 30%, #eae2d2, transparent 70%);}
  .g-item:nth-child(3) .g-bg{background:radial-gradient(circle at 35% 30%, #dde3d5, transparent 70%);}
  .g-item:nth-child(4) .g-bg{background:radial-gradient(circle at 35% 30%, #f3d9c3, transparent 70%);}
  .g-item:nth-child(5) .g-bg{background:radial-gradient(circle at 35% 30%, #eae2d2, transparent 70%);}
  .g-item:nth-child(6) .g-bg{background:radial-gradient(circle at 35% 30%, #dde3d5, transparent 70%);}
  .g-item svg{position:relative;z-index:1;width:48%;transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);}
  .g-item:hover svg{transform:translateY(-10px) scale(1.05);}
  .g-caption{
    position:absolute; bottom:22px; left:22px;
    z-index:2;
  }
  .g-caption .eyebrow{font-size:0.62rem;margin-bottom:4px;display:block;}
  .g-caption h4{font-family:'Fraunces',serif;font-size:1.3rem;}

  @media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.gallery-grid{grid-template-columns:1fr;}}

  /* ============ STAT STRIP ============ */
  .stat-strip{
    background:var(--ink);
    color:var(--bg);
    padding:100px 6vw;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    text-align:center;
  }
  .stat h3{font-size:clamp(2.6rem,5vw,4rem);color:var(--clay-soft);margin-bottom:10px;}
  .stat p{font-size:0.85rem;color:#c9c4b8;letter-spacing:0.04em;}
  @media(max-width:700px){.stat-strip{grid-template-columns:1fr;gap:48px;}}

  /* ============ CTA ============ */
  .cta{
    text-align:center; padding:180px 6vw;
  }
  .cta .eyebrow{display:block;margin-bottom:22px;}
  .cta h2{font-size:clamp(2.6rem,6vw,5rem);line-height:1.08;max-width:820px;margin:0 auto;}
  .cta h2 .accent{color:var(--clay);font-style:italic;}
  .cta p{color:var(--ink-dim);max-width:420px;margin:28px auto 40px;font-size:0.98rem;line-height:1.7;font-weight:300;}
  .btn-primary{
    display:inline-block;
    background:var(--ink);
    color:var(--bg);
    padding:18px 42px;
    font-size:0.85rem;
    letter-spacing:0.04em;
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s ease;
  }
  .btn-primary:hover{transform:translateY(-3px);background:var(--clay);}

  footer{
    padding:48px 6vw; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    font-size:0.78rem; color:var(--ink-dim);
  }

  .reveal{opacity:0;transform:translateY(30px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-scale{opacity:0;transform:scale(0.95);transition:opacity 1s ease, transform 1s cubic-bezier(0.16,1,0.3,1);}
  .reveal-scale.in{opacity:1;transform:scale(1);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    .hero-top,.hero h1,.hero-visual{opacity:1;animation:none;}
  }
</style>
</head>
<body>

<div class="progress" id="progress"></div>

<nav id="nav">
  <div class="logo">KIRA <span>Lighting</span></div>
  <div class="nav-links">
    <a href="#koleksi">Koleksi</a>
    <a href="#dunia">Untuk Siapa</a>
    <a href="#kontak">Kontak</a>
  </div>
  <a href="#kontak" class="nav-cta">Konsultasi</a>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-top">
    <span class="eyebrow">Studio Lighting — Est. Surabaya</span>
    <p>Fixture pilihan untuk rumah dan ruang usaha yang ingin tampil berbeda.</p>
  </div>
  <h1>Cahaya yang<br><span class="accent">membentuk</span> ruang.</h1>

  <div class="hero-visual">
    <div class="hv-block hv-1">
      <svg viewBox="0 0 200 200" fill="none">
        <circle cx="100" cy="70" r="38" stroke="#22201c" stroke-width="1.2"/>
        <line x1="100" y1="0" x2="100" y2="32" stroke="#22201c" stroke-width="1"/>
        <circle cx="100" cy="70" r="8" fill="#c17a52"/>
      </svg>
    </div>
    <div class="hv-block hv-2">
      <svg viewBox="0 0 200 200" fill="none">
        <path d="M70 40 Q100 25 130 40 L120 150 Q100 165 80 150 Z" stroke="#22201c" stroke-width="1.2"/>
      </svg>
    </div>
    <div class="hv-block hv-3">
      <svg viewBox="0 0 200 200" fill="none">
        <rect x="60" y="50" width="80" height="100" rx="4" stroke="#22201c" stroke-width="1.2"/>
        <line x1="100" y1="50" x2="100" y2="20" stroke="#22201c" stroke-width="1"/>
      </svg>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track">
    <span>Residensial</span><span>Hospitality</span><span>Custom Fit-Out</span><span>Edisi Terbatas</span>
    <span>Residensial</span><span>Hospitality</span><span>Custom Fit-Out</span><span>Edisi Terbatas</span>
  </div>
</div>

<!-- TWO WORLDS -->
<div class="worlds" id="dunia">
  <div class="world reveal">
    <div>
      <span class="eyebrow">Untuk Rumah</span>
      <h3>Ruang yang<br>terasa personal.</h3>
      <p>Pendant, table lamp, dan wall sconce yang jadi titik fokus ruang tamu, kamar, dan ruang makan.</p>
    </div>
    <div class="world-icon">
      <svg viewBox="0 0 120 120" fill="none">
        <path d="M40 25 Q60 15 80 25 L74 85 Q60 95 46 85 Z" stroke="#c17a52" stroke-width="1.3"/>
      </svg>
    </div>
  </div>
  <div class="world reveal">
    <div>
      <span class="eyebrow">Untuk Bisnis</span>
      <h3>Ruang yang<br>berkesan.</h3>
      <p>Chandelier dan lighting feature untuk hotel, resto, dan ruang event — skala besar, dibuat sesuai ukuran ruang.</p>
    </div>
    <div class="world-icon">
      <svg viewBox="0 0 120 120" fill="none">
        <circle cx="60" cy="60" r="42" stroke="#8a9182" stroke-width="1.3"/>
        <circle cx="60" cy="60" r="24" stroke="#8a9182" stroke-width="0.8"/>
      </svg>
    </div>
  </div>
</div>

<!-- GALLERY -->
<section class="gallery-section" id="koleksi">
  <div class="g-head reveal">
    <div>
      <span class="eyebrow">Koleksi</span>
      <h2>Bentuk pilihan.</h2>
    </div>
    <p>Setiap fixture dikurasi — sebagian custom sesuai kebutuhan ruang Anda.</p>
  </div>

  <div class="gallery-grid reveal-scale">
    <div class="g-item">
      <div class="g-bg"></div>
      <svg viewBox="0 0 100 100" fill="none"><circle cx="50" cy="42" r="24" stroke="#22201c" stroke-width="1.1"/><line x1="50" y1="0" x2="50" y2="18" stroke="#22201c" stroke-width="0.9"/><circle cx="50" cy="42" r="5" fill="#c17a52"/></svg>
      <div class="g-caption"><span class="eyebrow">Pendant</span><h4>Bulb Halo</h4></div>
    </div>
    <div class="g-item">
      <div class="g-bg"></div>
      <svg viewBox="0 0 100 140" fill="none"><rect x="30" y="30" width="40" height="60" rx="3" stroke="#22201c" stroke-width="1.1"/><line x1="50" y1="30" x2="50" y2="10" stroke="#22201c" stroke-width="0.8"/></svg>
      <div class="g-caption"><span class="eyebrow">Table Lamp</span><h4>Cube Linen</h4></div>
    </div>
    <div class="g-item">
      <div class="g-bg"></div>
      <svg viewBox="0 0 100 100" fill="none"><path d="M25 20 Q50 12 75 20 L68 78 Q50 88 32 78 Z" stroke="#22201c" stroke-width="1.1"/></svg>
      <div class="g-caption"><span class="eyebrow">Table Lamp</span><h4>Terracotta Curve</h4></div>
    </div>
    <div class="g-item">
      <div class="g-bg"></div>
      <svg viewBox="0 0 100 100" fill="none"><path d="M20 30 Q50 15 80 30" stroke="#22201c" stroke-width="1"/><path d="M25 50 Q50 37 75 50" stroke="#22201c" stroke-width="1"/><path d="M30 70 Q50 60 70 70" stroke="#22201c" stroke-width="1"/></svg>
      <div class="g-caption"><span class="eyebrow">Chandelier</span><h4>Layer Sage</h4></div>
    </div>
    <div class="g-item">
      <div class="g-bg"></div>
      <svg viewBox="0 0 100 100" fill="none"><path d="M50 15 L50 85 M20 50 L80 50" stroke="#22201c" stroke-width="1"/><circle cx="50" cy="50" r="7" fill="#8a9182"/></svg>
      <div class="g-caption"><span class="eyebrow">Wall Sconce</span><h4>Cross Minimal</h4></div>
    </div>
    <div class="g-item">
      <div class="g-bg"></div>
      <svg viewBox="0 0 100 100" fill="none"><ellipse cx="50" cy="50" rx="32" ry="16" stroke="#22201c" stroke-width="1"/><ellipse cx="50" cy="50" rx="16" ry="8" stroke="#c17a52" stroke-width="0.8"/></svg>
      <div class="g-caption"><span class="eyebrow">Ceiling Feature</span><h4>Ellipse Warm</h4></div>
    </div>
  </div>
</section>

<!-- STAT STRIP -->
<div class="stat-strip">
  <div class="stat reveal">
    <h3>120+</h3>
    <p>Fixture dikurasi</p>
  </div>
  <div class="stat reveal">
    <h3>40+</h3>
    <p>Proyek hospitality</p>
  </div>
  <div class="stat reveal">
    <h3>100%</h3>
    <p>Konsultasi personal</p>
  </div>
</div>

<!-- CTA -->
<section class="cta" id="kontak">
  <span class="eyebrow reveal">Mulai Proyek</span>
  <h2 class="reveal">Ceritakan ruang Anda,<br>temukan <span class="accent">cahayanya.</span></h2>
  <p class="reveal">Konsultasi gratis untuk proyek rumah maupun bisnis.</p>
  <a href="mailto:hello@kiralighting.id" class="btn-primary reveal">Hubungi Kami →</a>
</section>

<footer>
  <span>© 2026 Kira Lighting</span>
  <span>Surabaya, Indonesia</span>
</footer>

<script>
  const nav = document.getElementById('nav');
  window.addEventListener('scroll', () => {
    nav.classList.toggle('scrolled', window.scrollY > 30);
    const h = document.documentElement;
    document.getElementById('progress').style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100 + '%';
  });

  const revealEls = document.querySelectorAll('.reveal, .reveal-scale');
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
  }, {threshold:0.12});
  revealEls.forEach(el => io.observe(el));
</script>

</body>
</html>