/* ============================================================================
   award.css — Ödüllü site tarzı tasarım modülleri (Azure Yachts)
   Palet: navy #0A1A2F / gold #C9A24B-#E4C77B / cream #F6F4EF
   ========================================================================== */
:root{
  --navy:#0A1A2F; --navy2:#0E2238; --gold:#C9A24B; --gold2:#E4C77B; --cream:#F6F4EF;
}

/* —— Modül 1: Preloader (elit açılış) —————————————————————————— */
#preloader{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(130% 130% at 50% 25%, #14365a 0%, #0A1A2F 55%, #06101d 100%);
  transition:transform 1s cubic-bezier(.76,0,.24,1), opacity .6s ease}
#preloader.is-done{transform:translateY(-100%)}
#preloader .pre-inner{position:relative; z-index:3; text-align:center; transition:opacity .5s ease, transform .8s ease}
#preloader.is-done .pre-inner{opacity:0; transform:translateY(-18px)}
#preloader .pre-brand{font-family:'Cormorant Garamond',serif; color:var(--gold2);
  font-size:clamp(2rem,5vw,3.2rem); letter-spacing:.16em; opacity:0; transform:translateY(12px);
  animation:preIn .9s ease .1s forwards}
#preloader .pre-tag{margin-top:8px; color:#9fb2c6; font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  opacity:0; animation:preIn .9s ease .35s forwards}
#preloader .pre-stage{position:relative; width:210px; height:90px; margin:24px auto 8px}
#preloader .pre-yacht{position:absolute; left:50%; bottom:24px; width:96px; transform:translateX(-50%);
  color:var(--gold2); animation:preBob 2.6s ease-in-out infinite; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
#preloader .pre-count{font-family:'Cormorant Garamond',serif; color:#fff; font-size:1.6rem; letter-spacing:.05em}
#preloader .pre-count i{color:var(--gold); font-style:normal; font-size:1rem; margin-left:1px}
#preloader .pre-track{margin:14px auto 0; width:220px; height:2px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden}
#preloader .pre-track span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold2))}
#preloader .pre-sea{position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none}
#preloader .pre-sea svg{position:absolute; bottom:0; left:0; width:200%; height:100%}
#preloader .pre-sea .w1{opacity:.5; animation:preDrift 7s linear infinite}
#preloader .pre-sea .w2{opacity:.22; animation:preDrift 11s linear infinite reverse}
@keyframes preIn{to{opacity:1; transform:translateY(0)}}
@keyframes preBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2.5deg)}50%{transform:translateX(-50%) translateY(-6px) rotate(2.5deg)}}
@keyframes preDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* —— Modül 2: Scroll progress bar ———————————————————————————————— */
#scrollbar{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2)); z-index:9998;
  box-shadow:0 0 12px rgba(201,162,75,.6); transition:width .08s linear}

/* —— Modül 3: Özel imleç —————————————————————————————————————————— */
@media (hover:hover) and (pointer:fine){
  .has-cursor *{cursor:none}
  .has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}
  #cursor{position:fixed; top:0; left:0; width:34px; height:34px; border:1.5px solid var(--gold);
    border-radius:50%; pointer-events:none; z-index:10000; will-change:transform;
    transition:width .2s,height .2s,background .2s,border-color .2s}
  #cursorDot{position:fixed; top:0; left:0; width:5px; height:5px; background:var(--gold2);
    border-radius:50%; pointer-events:none; z-index:10001; will-change:transform}
  #cursor.is-hover{width:54px; height:54px; background:rgba(201,162,75,.15); border-color:var(--gold2)}
}

/* —— Modül 4: Scroll reveal ———————————————————————————————————————— */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].in{opacity:1; transform:none}

/* —— Modül 6: Marquee ———————————————————————————————————————————— */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:inline-flex; gap:3rem; white-space:nowrap; animation:marquee 28s linear infinite; will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:#9fb0c4; display:inline-flex; align-items:center; gap:3rem}
.marquee__item::after{content:"⚓"; color:var(--gold); font-size:1rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* —— Modül 7: Lightbox ———————————————————————————————————————————— */
#lightbox{position:fixed; inset:0; z-index:10005; display:none; place-items:center;
  background:rgba(8,16,28,.92); backdrop-filter:blur(6px)}
#lightbox.open{display:grid; animation:lbIn .25s ease}
#lightbox img{max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
#lightbox .lb-btn{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08);
  color:#fff; font-size:1.5rem; cursor:pointer; border:1px solid rgba(255,255,255,.15); transition:background .2s}
#lightbox .lb-btn:hover{background:rgba(201,162,75,.3)}
#lightbox .lb-prev{left:24px} #lightbox .lb-next{right:24px}
#lightbox .lb-close{top:24px; right:24px; transform:none}
[data-lightbox]{cursor:zoom-in}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

/* —— Modül 9: Tilt + magnetic ———————————————————————————————————— */
.tilt{transform-style:preserve-3d; transition:transform .25s ease}
.magnetic{transition:transform .2s ease}

/* —— Modül 10: Estetik katman (gradient yazı, grain, parlama) ——————— */
.text-gradient-gold{
  background:linear-gradient(100deg,#E4C77B 0%,#C9A24B 30%,#F3E2B3 55%,#C9A24B 80%,#E4C77B 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

.grain::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.glow-card{position:relative; transition:transform .3s ease, box-shadow .3s ease}
.glow-card:hover{transform:translateY(-6px); box-shadow:0 24px 60px -20px rgba(10,26,47,.45)}

/* —— Back-to-top ———————————————————————————————————————————————— */
#toTop{position:fixed; right:22px; bottom:22px; z-index:60; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--navy); color:var(--gold2);
  box-shadow:0 10px 30px rgba(10,26,47,.35); opacity:0; transform:translateY(20px);
  pointer-events:none; transition:opacity .3s, transform .3s, background .2s}
#toTop.show{opacity:1; transform:none; pointer-events:auto}
#toTop:hover{background:var(--navy2)}

/* —— Cookie/KVKK consent —————————————————————————————————————————— */
#consent{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:70;
  max-width:680px; width:calc(100% - 32px); display:flex; gap:14px; align-items:center;
  background:#fff; border:1px solid #eee; border-radius:16px; padding:14px 18px;
  box-shadow:0 16px 50px rgba(10,26,47,.18)}

/* Reduced motion: animasyonları sustur */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
  #preloader{display:none !important}
}

/* Dalga sesi düğmesi */
#soundToggle{position:fixed; right:22px; bottom:78px; z-index:60; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:#0A1A2F; border:1px solid #e6eaf0;
  box-shadow:0 10px 30px rgba(10,26,47,.18); cursor:pointer; transition:transform .2s, background .2s}
#soundToggle:hover{transform:translateY(-2px)}
#soundToggle.on{background:linear-gradient(135deg,#C9A24B,#E4C77B); border-color:transparent}