/* ==========================================================================
   MMS YAPI & DEKORASYON — Tailwind companion (durum + animasyon stilleri)
   Tüm görsel/yerleşim Tailwind utility'leri ile; burada yalnızca
   JS ile tetiklenen durumlar ve keyframe animasyonları var.
   ========================================================================== */

html{scroll-behavior:smooth;}
/* Fontu Tailwind'den bağımsız garanti et (CDN gecikse bile Inter uygulanır) */
html, body, button, input, select, textarea{
  font-family:'Inter','Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6{font-family:'Inter','Segoe UI', system-ui, sans-serif;}
body{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
::selection{background:#141414; color:#fff;}
img{display:block; max-width:100%;}

/* ---------- Preloader ---------- */
#preloader{transition:opacity .6s ease, visibility .6s ease;}
#preloader.is-done{opacity:0; visibility:hidden; pointer-events:none;}
.preloader__bar span{animation:load 1.4s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes load{to{width:100%;}}

/* ---------- Header (her zaman beyaz, sade & kurumsal) ---------- */
.header{background:rgba(255,255,255,.98); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(20,20,20,.08); transition:box-shadow .4s ease, padding .35s ease;}
.header.is-solid{box-shadow:0 8px 26px -20px rgba(20,20,20,.4);}

/* nav link underline */
.nav__link{position:relative;}
.nav__link::after{content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:#b0864e; transition:width .35s cubic-bezier(.22,.61,.36,1);}
.nav__link:hover::after,.nav__link.is-active::after{width:100%;}
.nav__link:hover{color:#b0864e;}

/* ---------- Burger ---------- */
.burger span{transition:.35s cubic-bezier(.22,.61,.36,1);}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------- Mobile nav drawer ---------- */
@media (max-width:860px){
  .nav{
    position:fixed; top:0; right:0; bottom:0; width:min(84vw,340px);
    background:#0a0a0a; flex-direction:column; align-items:flex-start; justify-content:center;
    padding:80px 40px; gap:26px; transform:translateX(100%);
    transition:transform .45s cubic-bezier(.22,.61,.36,1); z-index:90;
    box-shadow:-24px 0 60px rgba(0,0,0,.35);
  }
  .nav.is-open{transform:translateX(0);}
  .nav__link{color:#fff !important; font-size:1.05rem;}
  .nav__cta{background:#fff !important; color:#141414 !important; border-color:#fff !important; margin-top:10px;}
  .burger{display:flex !important;}
  .burger.is-open span{background:#fff !important;}
}

/* ---------- Hero slider ---------- */
.hero__slide{opacity:0; transform:scale(1.06); transition:opacity 1.5s ease, transform 7s linear;}
.hero__slide.is-active{opacity:1; transform:scale(1);}
.hero__dot{position:relative; overflow:hidden; width:40px; height:3px; background:rgba(255,255,255,.28); cursor:pointer; flex:none;}
.hero__dot.is-active{background:rgba(255,255,255,.5);}
.hero__dot.is-active::after{content:""; position:absolute; inset:0; width:0; background:#fff; animation:dotfill 6s linear forwards;}
@keyframes dotfill{to{width:100%;}}
.hero__scroll span{animation:scroll 1.8s infinite;}
@keyframes scroll{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(15px);opacity:0;}100%{opacity:0;}}

/* ---------- Hero title 2nd line ---------- */
.hero__stroke{-webkit-text-stroke:0; color:#c69c63;}  /* tek ince aksan: bronz */

/* ---------- Reveal on scroll (yalnızca JS aktifse gizle) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);}
.js [data-reveal].is-in{opacity:1; transform:none;}

/* ---------- Floating labels (dark form) ---------- */
.field{position:relative;}
.field input, .field textarea, .field select{transition:border-color .3s, background .3s;}
.field input::placeholder,.field textarea::placeholder{color:transparent;}
.field label{position:absolute; left:15px; top:15px; color:rgba(255,255,255,.5); font-size:.95rem; pointer-events:none; transition:.22s cubic-bezier(.22,.61,.36,1); padding:0 6px;}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:-9px; left:11px; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#c69c63; background:#141414;
}
.field.invalid input, .field.invalid textarea{border-color:#e0765a !important;}

/* ---------- Lightbox ---------- */
#lightbox{opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;}
#lightbox.is-open{opacity:1; visibility:visible;}
.lightbox__close:hover{transform:rotate(90deg);}

/* ---------- Toast ---------- */
#toast{transform:translateX(-50%) translateY(90px); opacity:0; transition:.45s cubic-bezier(.22,.61,.36,1);}
#toast.is-show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- WhatsApp float pulse ---------- */
.wa-float{animation:waPulse 2.8s infinite;}
.wa-float:hover{transform:scale(1.08);}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* map grayscale */
.map-frame{filter:grayscale(1) contrast(1.05);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  [data-reveal]{opacity:1; transform:none;}
  .hero__slide.is-active{opacity:1;}
  html{scroll-behavior:auto;}
}