/* ==========================================================================
   Norva — main.css
   Her sayfada yüklenir: token'lar, reset, iskele ızgarası, logo,
   yükleyici, başlık, mobil çekmece, bölüm başlığı, düğmeler, footer.
   ========================================================================== */


:root{
  --navy:#102e3c; --navy-2:#0a212c; --navy-3:#164252; --navy-4:#1e5568;
  --bone:#f0efe6; --bone-dim:#9fb0b6;
  --green:#c8f24a; --green-2:#a6d92b;
  --line:rgba(240,239,230,.14);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--bone);font-family:'Comfortaa',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:var(--navy)}
.lbl{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:700}

/* iskele ızgarası */
.scaff{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(240,239,230,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,239,230,.045) 1px,transparent 1px);
  background-size:clamp(70px,7.4vw,120px) clamp(70px,7.4vw,120px)}
.scaff::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,transparent,rgba(10,33,44,.8) 85%)}
.wrap{position:relative;z-index:2}

/* ===== LOGO MARK ===== */
.mark{display:block;overflow:visible;aspect-ratio:1800/1060;width:auto;flex:none}
.mark polygon{fill:var(--bone);transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(30%) scaleY(0);opacity:0;transition:transform .68s var(--ease),opacity .32s}
.mark.built polygon{transform:none;opacity:1}
.mark.built .b1{transition-delay:.10s}.mark.built .b2{transition-delay:.46s}
.mark.built .b3{transition-delay:.8s}.mark.built .b4{transition-delay:1.08s}.mark.built .b5{transition-delay:1.22s}
.mark .ground{fill:none;stroke:var(--green);stroke-width:34;stroke-linecap:round;
  stroke-dasharray:1800;stroke-dashoffset:1800;transition:stroke-dashoffset .8s var(--ease)}
.mark.built .ground{stroke-dashoffset:0}
.mark .rig{fill:none;stroke:rgba(240,239,230,.34);stroke-width:7;stroke-dasharray:12 14;opacity:0;transition:opacity .45s .05s}
.mark.built .rig{opacity:1}

/* ===== LOADER ===== */
#sh{position:fixed;inset:0;z-index:9999;background:var(--navy-2);display:grid;place-items:center;transition:opacity .8s .3s,visibility .8s .3s}
#sh.done{opacity:0;visibility:hidden}
#sh .box{display:flex;flex-direction:column;align-items:center;gap:20px}
#sh .mark{height:clamp(58px,9.4vw,110px)}
#sh .wm{font-size:clamp(38px,8vw,88px);font-weight:400;line-height:1}
#sh .sub{font-size:clamp(9px,1.4vw,13px);letter-spacing:.4em;color:var(--bone-dim);margin-top:6px;text-align:center}
#sh .tr{width:min(320px,60vw);height:2px;background:rgba(240,239,230,.16);margin-top:10px}
#sh .tr i{display:block;height:100%;width:0;background:var(--green)}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(18px,3.4vw,50px);transition:.5s var(--ease);border-bottom:1px solid transparent}
nav.stuck{background:rgba(10,33,44,.9);backdrop-filter:blur(16px);border-color:var(--line);padding-block:11px}
.navlogo{display:flex;align-items:center;gap:13px}
.navlogo .mark{height:28px}
.navlogo .txt b{display:block;font-size:21px;font-weight:400;line-height:1}
.navlogo .txt span{display:block;font-size:8.5px;letter-spacing:.26em;color:var(--bone-dim);margin-top:3px}
nav ul{display:flex;gap:2px;list-style:none;align-items:center}
nav ul a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--bone-dim);
  padding:11px 14px;transition:.4s var(--ease);position:relative}
nav ul a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav ul a:hover{color:var(--bone)}
nav ul a:hover::after,nav ul a.on::after{transform:scaleX(1);transform-origin:left}
nav ul a.on{color:var(--green)}
@media(max-width:1080px){nav ul li:not(:last-child){display:none}}
.prog{position:fixed;top:0;left:0;height:2px;background:var(--green);z-index:960;width:0}

/* ===== HERO — bölünmüş, yapışkan sol ===== */
header{position:relative;min-height:100svh;display:grid;grid-template-columns:1.06fr .94fr;
  padding-top:96px;align-items:stretch}
@media(max-width:980px){header{grid-template-columns:1fr;padding-top:110px}}
.hleft{padding:clamp(30px,4vw,72px) clamp(18px,3.4vw,50px);display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);padding:9px 17px;border-radius:100px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--green);background:rgba(200,242,74,.06);
  align-self:flex-start;margin-bottom:28px;opacity:0;transform:translateY(14px);transition:all .9s var(--ease) .55s}
.loaded .eyebrow{opacity:1;transform:none}
.eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pl 1.9s infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.2}}
h1{font-size:clamp(32px,4.9vw,76px);line-height:1.12;letter-spacing:-.03em;font-weight:700}
h1 .ln{display:block;overflow:hidden;padding:.12em 0 .22em;margin:-.1em 0 -.2em}
h1 .ln>span{display:block;transform:translateY(115%);transition:transform 1.2s var(--ease)}
.loaded h1 .ln:nth-child(1)>span{transition-delay:.25s}
.loaded h1 .ln:nth-child(2)>span{transition-delay:.4s}
.loaded h1 .ln>span{transform:none}
h1 em{font-style:normal;color:var(--green)}
.hsub{margin-top:26px;max-width:46ch;font-size:15px;line-height:1.9;color:var(--bone-dim);
  opacity:0;transform:translateY(14px);transition:all 1s var(--ease) .8s}
.loaded .hsub{opacity:1;transform:none}
.hacts{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;opacity:0;transform:translateY(14px);transition:all 1s var(--ease) .92s}
.loaded .hacts{opacity:1;transform:none}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-radius:100px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;background:var(--green);color:var(--navy);transition:.45s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(200,242,74,.55)}
.btn.o{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn.o:hover{border-color:var(--green);color:var(--green);box-shadow:none}
.hmetrics{display:flex;gap:clamp(18px,3vw,46px);margin-top:clamp(34px,5vw,60px);flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line);opacity:0;transition:opacity 1s var(--ease) 1.05s}
.loaded .hmetrics{opacity:1}
.hmetrics div b{display:block;font-size:clamp(24px,2.7vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--green)}
.hmetrics div span{display:block;margin-top:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}

.hright{position:relative;overflow:hidden;min-height:56svh}
.hright .im{position:absolute;inset:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease) .3s}
.loaded .hright .im{clip-path:inset(0 0 0 0)}
.hright img{filter:grayscale(.85) brightness(.42);transform:scale(1.12);transition:transform 2.4s var(--ease)}
.loaded .hright img{transform:scale(1)}
.hright::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 1%,rgba(16,46,60,.35) 26%,transparent 60%),
             linear-gradient(0deg,rgba(10,33,44,.85),transparent 45%)}
.hright .stamp{position:absolute;right:clamp(18px,2.6vw,38px);bottom:clamp(18px,2.6vw,38px);z-index:3;text-align:right}
.hright .stamp b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em}
.hright .stamp span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-top:5px}

/* ===== ŞERİT ===== */
.tick{border-block:1px solid var(--line);background:var(--navy-2);overflow:hidden;white-space:nowrap;padding:14px 0}
.tick .r{display:inline-flex;gap:32px;animation:mq 30s linear infinite;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);padding-right:32px;font-weight:700}
.tick .r b{color:var(--bone)}
.tick .r i{color:var(--green);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== SECTION ===== */
section{padding:clamp(66px,8.6vw,136px) clamp(18px,3.4vw,50px);position:relative;scroll-margin-top:82px}
.inner{max-width:1440px;margin:0 auto}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:38px;border-bottom:1px solid var(--line);
  padding-bottom:22px;margin-bottom:clamp(36px,5vw,72px);flex-wrap:wrap}
.kick{color:var(--green);margin-bottom:16px}
h2{font-size:clamp(27px,4.1vw,60px);line-height:1.12;letter-spacing:-.03em;font-weight:700;max-width:16ch}
h2 .dim{color:var(--bone-dim)}
h2 em{font-style:normal;color:var(--green)}
.rv{opacity:0;transform:translateY(40px);transition:opacity .95s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}

.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4.4vw,72px);align-items:center}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.lede{font-size:clamp(19px,2vw,30px);line-height:1.5;font-weight:500}
.lede em{font-style:normal;color:var(--green)}
.body{margin-top:22px;font-size:15px;line-height:1.95;color:var(--bone-dim);max-width:56ch}
.about-img{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:var(--navy-3)}
.about-img img{transform:scale(1.16);transition:transform 1.9s var(--ease);filter:grayscale(.75) brightness(.7)}
.about-img.in img{transform:scale(1)}
.about-img .fr{position:absolute;inset:14px;border:1px solid rgba(240,239,230,.24);pointer-events:none}
.about-img .cap{position:absolute;left:0;bottom:0;background:var(--green);color:var(--navy);padding:10px 18px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}



/* ===== FOOTER ===== */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:64px 0 26px;background:var(--navy-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}
.foot h5{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  color:var(--green);margin-bottom:15px}
.foot a,.foot p{display:block;font-size:13.5px;font-weight:300;color:var(--bone-dim);
  line-height:1.95;transition:color .2s,padding-left .2s}
.foot a:hover{color:var(--bone);padding-left:4px}
.foot .f-mark{width:112px;margin-bottom:16px}
.foot-bot{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}

/* ===== DÜĞME ===== */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:2px;
  background:var(--green);color:var(--navy);font-weight:700;font-size:13.5px;
  transition:background .3s var(--ease),gap .3s var(--ease)}
.btn:hover{background:var(--green-2);gap:15px}
.btn.o{background:transparent;border:1px solid var(--line);color:var(--bone)}
.btn.o:hover{border-color:var(--green);color:var(--green);background:transparent}

/* ===== YOL İZİ ===== */
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.crumb a:hover{color:var(--green)}
.crumb span{opacity:.5}

/* ===== ERİŞİLEBİLİRLİK ===== */
.atla{position:absolute;left:-9999px;top:0;z-index:999;background:var(--green);
  color:var(--navy);padding:12px 20px;font-weight:700}
.atla:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   BAŞLIK · MOBİL ÇEKMECE · KAHRAMAN BÖLÜM · HAKKIMIZDA
   Kaynak konsept tek sayfa olduğu için bu sınıflar orada yoktu; WordPress
   yapısında gerekli oldular.
   -------------------------------------------------------------------------- */
:root{--nav-h:74px}
.nav{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  background:rgba(10,33,44,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:height .35s var(--ease),background .35s}
.nav.small{height:62px;background:rgba(10,33,44,.95)}
.nav .prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--green);
  transform:scaleX(0);transform-origin:left;z-index:2}
.nav-in{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,52px);
  height:100%;display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
.nav-brand{display:flex;align-items:center;flex:none}
.nav-brand .mark{width:clamp(78px,7vw,104px);height:auto}
.nav-links{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;align-items:center}
.nav-links a{font-size:13px;font-weight:400;color:var(--bone-dim);position:relative;
  padding:6px 0;transition:color .25s;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--bone)}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--green);transition:right .3s var(--ease)}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-cta{flex:none;padding:11px 20px;font-size:12.5px}
.nav-burger{display:none;flex:none;width:42px;height:42px;background:none;border:1px solid var(--line);
  border-radius:2px;cursor:pointer;position:relative}
.nav-burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--bone);
  transition:transform .3s var(--ease),opacity .2s}
.nav-burger i:first-child{top:16px}.nav-burger i:last-child{bottom:16px}
.nav-burger[aria-expanded="true"] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

.drawer{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:119;background:var(--navy-2);
  border-bottom:1px solid var(--line);display:none;flex-direction:column;
  padding:14px clamp(20px,5vw,40px) 26px}
.drawer.open{display:flex}
.drawer a{padding:15px 0;font-size:16px;color:var(--bone-dim);border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}
.drawer a:hover,.drawer a.on{color:var(--green)}

/* ===== KAHRAMAN ===== */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:calc(var(--nav-h) + 40px)}
.hero-in{flex:1;display:flex;align-items:center}
.hero-txt{max-width:840px}
.hero-txt .kick{color:var(--green);margin-bottom:22px}
.hero-txt h1{font-size:clamp(38px,7.4vw,104px);font-weight:300;line-height:1.02;letter-spacing:-.03em}
.hero-txt h1 .dim{color:var(--bone-dim);display:block}
.hero-txt p{margin-top:26px;max-width:560px;font-size:clamp(15px,1.7vw,18px);
  font-weight:300;line-height:1.85;color:var(--bone-dim)}
.hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

/* ===== HAKKIMIZDA KARTLARI ===== */
.abt{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.abt-card{background:var(--navy);padding:30px 26px;transition:background .4s var(--ease)}
.abt-card:hover{background:var(--navy-3)}
.abt-card b{display:block;font-size:15px;font-weight:600;margin-bottom:10px}
.abt-card p{font-size:13.5px;font-weight:300;line-height:1.75;color:var(--bone-dim)}
.sec-more{margin-top:34px}

/* ===== VİTRİN / YIĞIN EK ===== */
.show-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,4vw,56px);align-items:start}
.show-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:12.5px;font-weight:700;color:var(--green);transition:gap .3s var(--ease)}
.show-link:hover{gap:15px}
.stack{position:relative}

/* ===== YÜKLEYİCİ / ŞERİT EK ===== */
.sh{position:fixed;inset:0;z-index:200;background:var(--navy-2);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .6s var(--ease),visibility .6s}
.sh .mark{width:clamp(150px,20vw,240px);height:auto}
.sh.gone{opacity:0;visibility:hidden;pointer-events:none}
.shbar{width:min(240px,42vw);height:2px;background:rgba(240,239,230,.14);overflow:hidden}
.shbar i{display:block;height:100%;width:0;background:var(--green);transition:width 1.1s var(--ease)}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:16px 0}
.strip-in{display:flex;gap:26px;align-items:center;white-space:nowrap;
  animation:kay 38s linear infinite}
.strip-in b{font-size:11px;letter-spacing:.26em;font-weight:700;color:var(--bone-dim)}
.strip-in span{color:var(--green);opacity:.55}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== FORM SARMALI ===== */
.cta-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.cta-btn{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.norva-form{position:relative}

@media(max-width:1024px){
  .nav-links{display:none}
  .nav-burger{display:block;margin-left:auto}
  .nav-cta{display:none}
  .show-grid,.cta-in{grid-template-columns:1fr}
  .abt{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .abt{grid-template-columns:1fr}
  .hero{min-height:auto;padding-bottom:56px}
}