/* ============================================================
   Costa Bargilia — KORUNAN kimlik blokları (loader · hero · kubbe · rozet · sbar)
   Kaynak: canlı v12 (2026-09-13). Bu dosyaya yeni bölüm stili eklenmez.
   ============================================================ */

/* --- doku --- */
.grain{position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* --- loader (kemer açılış) --- */
#loader{position:fixed;inset:0;z-index:200;background:transparent;color:var(--cream);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
#loader .l-bg{position:absolute;inset:0;background:var(--ink);z-index:-1}
#loader .ghost{position:absolute;font-family:'Script';font-size:clamp(280px,44vw,640px);
  color:rgba(95,178,214,.10);white-space:nowrap;transform:rotate(-6deg);user-select:none}
#loader .l-inner{text-align:center;position:relative}
#loader .l-eyebrow{font-size:13px;letter-spacing:.5em;text-indent:.5em;color:var(--sea);font-weight:600;margin-bottom:26px;text-transform:uppercase}
#loader .l-word{font-family:'Abril';font-size:clamp(44px,7.2vw,108px);line-height:1.02;letter-spacing:.01em}
#loader .l-sub{margin-top:26px;font-size:13px;letter-spacing:.42em;text-indent:.42em;color:var(--fg-soft);text-transform:uppercase}
#loader .l-word .ch{display:inline-block;transform:translateY(115%)}
#loader .l-word .wd{display:inline-block;white-space:nowrap}
#loader .l-line{width:1px;height:64px;background:rgba(242,239,232,.35);margin:34px auto 0;transform:scaleY(0);transform-origin:top}
#loader .arch{position:absolute;inset:0;clip-path:inset(56% 50% 44% 50% round 50% 50% 0 0);will-change:clip-path}
#loader .arch img{width:100%;height:100%;object-fit:cover}
#loader .ghost,#loader .l-eyebrow,#loader .l-word,#loader .l-sub{opacity:0}

/* --- hero (pin'li görsel + tipografi) --- */
.hero{position:relative;overflow:clip;height:160vh;min-height:0;display:block}
.h-sticky{position:sticky;top:0;height:100svh;min-height:640px;width:100%;overflow:clip;display:grid;place-items:center}
.h-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(rgba(11,27,43,.28),rgba(11,27,43,.04) 38%,rgba(11,27,43,.3));}
.hero .h-inner{position:relative;text-align:center;color:var(--cream)}
.hero .h-eyebrow{font-size:13px;font-weight:600;letter-spacing:.5em;text-indent:.5em;color:var(--sea);text-transform:uppercase;margin-bottom:28px}
.hero h1{font-family:'Abril';font-weight:400;font-size:clamp(46px,7.8vw,124px);line-height:1.02;letter-spacing:.06em;text-indent:.06em}
.hero h1 .wd{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block;transform:translateY(118%)}
.h-script{font-family:'Script';font-style:normal;display:inline-block;font-size:clamp(40px,4.6vw,74px);color:#fff;line-height:.8;margin-top:-.42em;transform:rotate(-4deg) translateX(1.1em);text-shadow:0 2px 24px rgba(11,27,43,.35)}
.hero .h-sub{margin-top:14px;font-family:'FrauncesI','Fraunces',serif;font-style:italic;font-size:clamp(19px,1.7vw,26px);letter-spacing:.02em;color:rgba(242,239,232,.92);text-shadow:0 1px 18px rgba(11,27,43,.35)}
.hero .scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.38em;text-indent:.38em;color:rgba(242,239,232,.6);text-transform:uppercase}
.hero .scrollcue i{display:block;width:1px;height:44px;background:rgba(242,239,232,.5);margin:12px auto 0}
.h-flank{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.h-flank.fl{left:clamp(22px,4vw,64px)}
.h-flank.fr{right:clamp(22px,4vw,64px)}
.ds-pin{position:absolute;width:34px;height:34px;border:1.5px solid rgba(255,255,255,.95);border-radius:50%;z-index:3;opacity:.9}
.ds-pin::after{content:"";position:absolute;inset:12.5px;background:#fff;border-radius:50%}
.ds-pin.p1{left:17%;top:26%}
.ds-pin.p2{right:21%;top:54%}

/* --- vaad bölümü: hero üzerine kayarak gelir --- */
.domesec{position:relative;z-index:5;margin-top:-60vh}
.dome-body{background:var(--sky);color:var(--ink)}

/* --- dönen rozet --- */
.badge{position:fixed;right:clamp(16px,2.6vw,40px);bottom:clamp(16px,3vh,40px);z-index:110;width:108px;height:108px;display:grid;place-items:center}
.badge svg{position:absolute;inset:0;animation:spin 14s linear infinite}
.badge text{fill:var(--fg);font-family:'Archivo';font-size:10.4px;font-weight:600;letter-spacing:.2em}
.badge{opacity:0;pointer-events:none;transition:opacity .5s}
.badge.is-on{opacity:1;pointer-events:auto}
.badge .b-dot{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:16px;transition:background .4s,color .4s}
.badge:hover .b-dot{background:var(--fg);color:var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- sol ilerleme çubuğu --- */
.sbar{position:fixed;left:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:105;height:32vh;width:1px;
  background:color-mix(in srgb,currentColor 22%,transparent)}
.sbar i{position:absolute;left:0;top:0;width:1px;height:0%;background:currentColor;display:block}
.s-label{position:absolute;top:-54px;left:-5px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-soft);writing-mode:vertical-rl}

@media(max-width:900px){
  .badge{width:88px;height:88px}
  .sbar{display:none}
  .h-flank{display:none}
}
@media (prefers-reduced-motion:reduce){
  #loader{display:none!important}
  .hero h1 .ch,#loader .l-word .ch{transform:none}
  .badge svg{animation:none}
}