@import url('fonts/fonts.css');

/* ============================================================
   LINEA VERDE · YERİNDE GÖR — mobil öncelikli AR sayfası
   ============================================================ */
:root{
  --ink:     #0E2A20;
  --ink-2:   #123227;
  --ink-3:   #081711;
  --paper:   #F6F3EC;
  --gold:    #D4C5A9;
  --gold-2:  #C2AE86;
  --body:    rgba(246,243,236,.80);
  --mute:    rgba(246,243,236,.54);
  --rule:    rgba(212,197,169,.22);
  --pad:     22px;
  --maxw:    620px;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ font-family:'Inter',system-ui,sans-serif; scroll-behavior:smooth; }
body{
  background:var(--ink); color:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;               /* hotspot etiketleri sayfayi genisletmesin */
}
section{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.label{
  font-size:11px; font-weight:600; letter-spacing:.22em; color:var(--gold);
  margin-bottom:14px;
}

/* ── üst ── */
.top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:20px var(--pad) 0;
}
.top .logo{ width:74px; height:auto; display:block; }
.top .eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.26em; color:var(--gold);
  border:1px solid var(--rule); border-radius:100px; padding:7px 13px;
}

/* ── hero ── */
.hero{ padding-top:30px; padding-bottom:22px; }
.hero h1{
  font-family:'Playfair Display',serif; font-weight:400;
  font-size:clamp(30px,8.6vw,44px); line-height:1.12; letter-spacing:-.01em;
}
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero .lead{
  margin-top:14px; font-size:15px; line-height:1.62; color:var(--body); max-width:34em;
}
.hero .lead strong{ color:var(--paper); font-weight:600; }

/* ── görüntüleyici ── */
.stage{ position:relative; padding:0; max-width:none; }
model-viewer{
  width:100%; height:min(62vh,460px);
  background:linear-gradient(180deg,#B9C6C0 0%,#93A79E 58%,#7C8E86 100%);
  --poster-color:transparent;
}
.progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.18);
}
.progress .bar{
  height:100%; width:0; background:var(--gold);
  transform-origin:left; transition:width .15s;
}
/* hotspot */
.hs{
  position:relative;               /* etiket bu kutuya gore konumlansin */
  border:0; padding:0; background:none; cursor:pointer;
  width:16px; height:16px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(14,42,32,.55);
}
.hs span{
  position:absolute; left:24px; top:50%; transform:translateY(-50%);
  white-space:nowrap; background:rgba(8,23,17,.90); color:var(--paper);
  font-size:11.5px; letter-spacing:.04em; padding:7px 11px; border-radius:6px;
  border:1px solid var(--rule); pointer-events:none;
}
.hs:not([data-visible]){ opacity:0; pointer-events:none; }

/* AR düğmesi */
.ar-cta{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:5;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:#14281F; border:0; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:.14em;
  padding:15px 26px; border-radius:100px;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
}
.ar-cta:active{ transform:translateX(-50%) scale(.97); }
.ar-cta[hidden]{ display:none; }
.ar-note{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--pad) 0;
  font-size:12.5px; line-height:1.55; color:var(--mute);
}
.ar-note:empty{ display:none; }

/* ── ölçü seçimi ── */
.sizes{ padding-top:30px; }
.chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.chip{
  background:rgba(246,243,236,.05); border:1px solid var(--rule);
  border-radius:12px; padding:14px 8px; cursor:pointer; color:var(--paper);
  font-family:inherit; text-align:center; transition:.18s;
}
.chip b{ display:block; font-size:17px; font-weight:600; letter-spacing:.01em; }
.chip span{ display:block; margin-top:4px; font-size:11.5px; color:var(--mute); }
.chip.is-on{ background:var(--gold); border-color:var(--gold); color:#14281F; }
.chip.is-on span{ color:rgba(20,40,31,.72); }
.sizes .note{
  margin-top:14px; font-size:12.5px; line-height:1.6; color:var(--mute);
}
.sizes .note strong{ color:var(--gold); font-weight:600; }

/* ── nasıl kullanılır ── */
.how{ padding-top:38px; }
.how ol{ list-style:none; counter-reset:s; }
.how li{
  counter-increment:s; position:relative; padding:0 0 18px 42px;
  font-size:14px; line-height:1.6; color:var(--body);
}
.how li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  font-family:'Playfair Display',serif; font-size:19px; color:var(--gold);
}
.how li b{ color:var(--paper); font-weight:600; }

/* ── teknik ── */
.specs{ padding-top:24px; }
.specs dl > div{
  display:grid; grid-template-columns:1fr 1.25fr; gap:14px;
  padding:12px 0; border-top:1px solid var(--rule);
}
.specs dl > div:last-child{ border-bottom:1px solid var(--rule); }
.specs dt{ font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--gold); }
.specs dd{ font-size:14px; line-height:1.45; }

/* ── CTA ── */
.cta{ padding-top:44px; text-align:center; }
.cta h2{
  font-family:'Playfair Display',serif; font-weight:400;
  font-size:clamp(23px,6.4vw,30px); line-height:1.24;
}
.btns{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.btn{
  display:block; text-decoration:none; border-radius:100px;
  padding:16px 20px; font-size:14px; font-weight:600; letter-spacing:.06em;
  border:1px solid var(--rule); color:var(--paper);
}
.btn.primary{ background:var(--gold); color:#14281F; border-color:var(--gold); }

/* ── alt ── */
footer{
  max-width:var(--maxw); margin:46px auto 0; padding:26px var(--pad) 40px;
  border-top:1px solid var(--rule);
  font-size:12px; line-height:1.75; color:var(--body);
}
footer .muted{ color:var(--mute); }
.sep{ color:var(--gold); padding:0 7px; }

@media (min-width:620px){
  .btns{ flex-direction:row; justify-content:center; }
  .btn{ min-width:220px; text-align:center; }
  model-viewer{ height:480px; border-radius:14px; }
  .stage{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
}