/* ============================================================
   ELESİS MÜHENDİSLİK — shared stylesheet (multi-page)
   ============================================================ */
:root{
  --amber:#F9A208; --amber-600:#E08D00; --amber-300:#FFC24D; --amber-light:#FFB92E;
  --navy:#0E1B3A; --navy-700:#152648; --navy-600:#1E3565; --navy-900:#0A1226; --ink:#070D1C;
  --paper:#F3F5F9; --paper-2:#EAEEF4; --white:#FFFFFF; --line:#E2E7EF;
  --text:#141C29; --muted:#55606F; --muted-2:#7E8896;
  --on-dark:#E9EDF4; --on-dark-muted:#9DAECB;
  --maxw:1240px; --gutter:clamp(20px,5vw,64px);
  --r:14px; --shadow-sm:0 2px 10px rgba(14,27,58,.06);
  --shadow:0 18px 50px -18px rgba(14,27,58,.30);
  --shadow-lg:0 40px 90px -30px rgba(10,18,38,.55);
  --ff-display:'Montserrat',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body); color:var(--text); background:var(--white); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--ff-display); line-height:1.07; letter-spacing:-.01em; font-weight:800}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--ff-mono); font-size:.72rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--amber-600); display:inline-flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--amber); display:inline-block}
.eyebrow.on-dark{color:var(--amber-300)}
.section{padding-block:clamp(64px,8vw,116px); position:relative}
.section-head{max-width:720px; margin-bottom:clamp(34px,5vw,56px)}
.section-head h2{font-size:clamp(2rem,4.2vw,3.25rem); margin-top:16px; color:var(--navy)}
.section-head p{margin-top:16px; color:var(--muted); font-size:1.05rem; max-width:60ch}
.center{text-align:center; margin-inline:auto}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff-display);
  font-weight:700; font-size:.92rem; letter-spacing:.01em; padding:.92em 1.5em; border-radius:11px;
  transition:.22s cubic-bezier(.4,0,.2,1); white-space:nowrap}
.btn svg{width:18px; height:18px}
.ico{width:18px; height:18px; flex-shrink:0}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--line); color:var(--navy); background:#fff}
.btn-outline:hover{border-color:var(--navy); transform:translateY(-2px)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-600); transform:translateY(-2px)}
.btn-wa{background:#25D366; color:#053a1a}
.btn-wa:hover{background:#2ee878; transform:translateY(-2px)}
.btn-lg{padding:1.05em 1.9em; font-size:1rem}

/* Eye-catching CTA */
.btn-cta{position:relative; overflow:hidden; color:#231500; font-weight:800; letter-spacing:.015em;
  background:linear-gradient(135deg,var(--amber-light) 0%,var(--amber) 52%,#E07A00 100%);
  border-radius:12px; box-shadow:0 10px 26px -8px rgba(249,162,8,.62), inset 0 1px 0 rgba(255,255,255,.45);
  isolation:isolate}
.btn-cta::after{content:""; position:absolute; inset:0; z-index:-1; left:-130%; width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,58%{left:-130%}100%{left:170%}}
.btn-cta:hover{transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(249,162,8,.8), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-cta .ico{transition:transform .25s; width:18px; height:18px}
.btn-cta:hover .ico{transform:translateX(5px)}
.btn-cta.pulse{animation:ctaPulse 2.8s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 26px -8px rgba(249,162,8,.62), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(249,162,8,.45)}
  60%{box-shadow:0 10px 26px -8px rgba(249,162,8,.62), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 12px rgba(249,162,8,0)}}

/* ---------- HEADER / NAV ---------- */
header{position:sticky; top:0; z-index:80; transition:.3s}
.nav{position:relative; background:transparent; border-bottom:1px solid transparent; transition:background .38s ease, border-color .38s ease}
.nav.scrolled{background:rgba(10,18,38,.96); backdrop-filter:blur(12px); border-bottom-color:rgba(255,255,255,.08)}
.nav:not(.scrolled) .nav-link, .nav:not(.scrolled) .nav-phone{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px}
.brand{display:flex; align-items:center; z-index:130}
.brand img{height:44px; width:auto; display:block}
.nav-menu{display:flex; align-items:center; gap:2px; list-style:none}
.nav-item{position:relative}
.nav-link{display:flex; align-items:center; gap:.35rem; font-family:var(--ff-display); font-weight:600;
  font-size:.92rem; color:var(--on-dark); padding:.6em .85em; border-radius:8px; transition:.2s; cursor:pointer}
.nav-link:hover,.nav-item:hover>.nav-link{color:#fff; background:rgba(255,255,255,.08)}
.nav-link.active{color:var(--amber-300)}
.nav-link .caret{width:13px; height:13px; transition:transform .25s; opacity:.8}
.nav-item:hover .caret{transform:rotate(180deg)}
.dropdown{position:absolute; top:calc(100% + 6px); left:0; min-width:250px; background:var(--navy-900);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:8px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.24s; z-index:90}
.nav-item:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{display:flex; align-items:center; gap:.6rem; padding:.7em .85em; border-radius:8px;
  font-family:var(--ff-display); font-weight:500; font-size:.9rem; color:var(--on-dark-muted); transition:.18s}
.dropdown a::before{content:""; width:7px; height:7px; background:var(--amber); flex-shrink:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); opacity:.6; transition:.18s}
.dropdown a:hover{background:rgba(255,255,255,.06); color:#fff; padding-left:1.05em}
.dropdown a:hover::before{opacity:1}
.nav-right{display:flex; align-items:center; gap:14px}
.nav-phone{font-family:var(--ff-display); font-weight:700; color:#fff; font-size:.92rem; display:inline-flex; gap:.5rem; align-items:center}
.nav-phone svg{width:17px;height:17px; color:var(--amber-300)}
.burger{display:none; flex-direction:column; gap:5px; padding:8px; z-index:130}
.burger span{width:26px; height:2.5px; background:#fff; border-radius:2px; transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- HERO (home) ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 78% 8%, #1a2f5c 0%, var(--navy) 42%, var(--navy-900) 78%, var(--ink) 100%);
  color:#fff; margin-top:-74px; padding-top:74px}
#grid-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.62}
.hero-emblem{position:absolute; right:-8vw; top:50%; transform:translateY(-50%); width:min(60vw,720px);
  opacity:.05; z-index:0; filter:grayscale(1) brightness(2); pointer-events:none}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(7,13,28,.72) 0%, rgba(7,13,28,.4) 45%, transparent 72%)}
.hero .wrap{position:relative; z-index:2; padding-block:64px}
.hero-inner{max-width:840px}
.hero-title{font-size:clamp(2.7rem,6.6vw,5.3rem); font-weight:900; letter-spacing:-.02em; margin:24px 0 0}
.hero-title .line{display:block; overflow:hidden}
.hero-title .amberline{color:var(--amber)}
.hero-title .w{display:inline-block; transform:translateY(115%); opacity:0}
.reveal-title .hero-title .w{animation:wordUp .9s cubic-bezier(.22,1,.3,1) forwards}
.hero-title .w1{animation-delay:.15s}.hero-title .w2{animation-delay:.28s}
.hero-title .w3{animation-delay:.5s}.hero-title .w4{animation-delay:.63s}
@keyframes wordUp{to{transform:translateY(0); opacity:1}}
.hero .fade-up{opacity:0; transform:translateY(20px)}
.reveal-title .hero .fade-up{animation:fadeUp .8s ease forwards}
.hero .d5{animation-delay:.9s}.hero .d6{animation-delay:1.05s}
@keyframes fadeUp{to{opacity:1; transform:none}}
.hero .lede{margin-top:24px; font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--on-dark-muted); max-width:60ch; line-height:1.62}
.hero .lede b{color:#fff; font-weight:600}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{position:relative; overflow:hidden; color:#fff; isolation:isolate; margin-top:-74px; padding-top:74px;
  background:radial-gradient(110% 130% at 85% -10%, #1c3160 0%, var(--navy) 45%, var(--navy-900) 100%)}
.page-hero::after{content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:340px; height:340px;
  opacity:.07; background:var(--amber); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); z-index:0}
.page-hero .wrap{position:relative; z-index:1; padding-block:clamp(56px,7.5vw,86px) clamp(106px,13.5vw,176px)}
.page-hero .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.page-hero .ph-scrim{position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(10,18,38,.66) 0%, rgba(10,18,38,.42) 55%, rgba(10,18,38,.2) 100%)}
.page-hero.has-bg::after{opacity:.05}
.breadcrumb{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-muted); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.breadcrumb a:hover{color:var(--amber-300)}
.breadcrumb .sep{color:var(--amber); opacity:.7}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:900; max-width:20ch}
.page-hero p{margin-top:16px; color:var(--on-dark-muted); font-size:1.08rem; max-width:60ch}

/* accent band variants for service page heroes */
.page-hero.band-og::before,.page-hero.band-ag::before,.page-hero.band-za::before,
.page-hero.band-yen::before,.page-hero.band-proje::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; z-index:2}
.page-hero.band-og::before{background:#F97316}
.page-hero.band-ag::before{background:var(--amber)}
.page-hero.band-za::before{background:#2E9BE6}
.page-hero.band-yen::before{background:#4CAF50}
.page-hero.band-proje::before{background:#27AE60}

/* ---------- SECTORS MARQUEE ---------- */
.sectors{background:var(--navy-900); color:var(--on-dark-muted); border-block:1px solid rgba(255,255,255,.07); overflow:hidden}
.sectors .wrap{display:flex; align-items:center; gap:20px; height:64px}
.sectors .label{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-300); white-space:nowrap; flex-shrink:0}
.marquee{overflow:hidden; flex:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex; gap:44px; width:max-content; animation:scroll-x 34s linear infinite}
.marquee-track span{font-family:var(--ff-display); font-weight:600; font-size:.95rem; white-space:nowrap; display:flex; align-items:center; gap:44px; color:#c3cfe4}
.marquee-track span::after{content:"◆"; color:var(--amber); font-size:.6rem}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- ABOUT (home) ---------- */
.about{background:var(--paper)}
.about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,72px); align-items:center}
.about-copy p{color:var(--muted); margin-top:18px; font-size:1.04rem}
.about-copy p strong{color:var(--navy); font-weight:700}
.about-copy .lead{font-size:1.2rem; color:var(--text); font-weight:500; line-height:1.5; margin-top:20px}
.about-media{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/4.4}
.about-media img{width:100%; height:100%; object-fit:cover}
.about-media .badge{position:absolute; left:20px; bottom:20px; background:var(--navy); color:#fff;
  border-radius:14px; padding:16px 20px; box-shadow:var(--shadow)}
.about-media .badge b{font-family:var(--ff-display); font-size:1.7rem; color:var(--amber); display:block; line-height:1}
.about-media .badge span{font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-muted)}

/* generic prose block (kurumsal pages) */
.prose{max-width:820px}
.prose p{color:var(--muted); margin-top:18px; font-size:1.06rem}
.prose p strong{color:var(--navy); font-weight:700}
.prose .lead{font-size:1.25rem; color:var(--text); font-weight:500; line-height:1.5; margin-bottom:6px}
.prose h3{color:var(--navy); font-size:1.35rem; margin-top:34px}
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center}
.media-card{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.media-card img{width:100%; height:100%; object-fit:cover; max-height:520px}

/* list with hex bullets */
.hexlist{list-style:none; margin-top:8px}
.hexlist li{position:relative; padding-left:26px; margin-top:14px; color:var(--muted); font-size:1.02rem}
.hexlist li::before{content:""; position:absolute; left:0; top:9px; width:11px; height:11px; background:var(--amber);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hexlist.on-dark li{color:#cdd8ec}

/* value cards */
.cards-grid{display:grid; gap:20px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.vcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px; transition:.26s; position:relative; overflow:hidden}
.vcard:hover{border-color:var(--amber); box-shadow:var(--shadow); transform:translateY(-4px)}
.vcard .k{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.16em; color:var(--amber-600); text-transform:uppercase}
.vcard h3{font-size:1.2rem; color:var(--navy); margin:12px 0 10px}
.vcard p{color:var(--muted); font-size:.98rem}
.vcard .hexmark{position:absolute; right:-16px; top:-16px; width:74px; height:74px; opacity:.06;
  background:var(--navy); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* service icon cards (home + service index) */
.svc-icon{width:56px; height:56px; display:grid; place-items:center; margin-bottom:18px; flex-shrink:0;
  background:var(--navy-900); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); border:1px solid rgba(249,162,8,.4)}
.svc-icon svg{width:26px; height:26px; color:var(--amber)}
.services-dark{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.services-dark::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 90% 0%,rgba(249,162,8,.10),transparent 60%)}
.services-dark .section-head h2{color:#fff}.services-dark .section-head p{color:var(--on-dark-muted)}
.section.services-dark{padding-block:clamp(50px,6vw,84px)}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:2}
.svc-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:0; overflow:hidden; transition:.3s; display:flex; flex-direction:column}
.svc-card .svc-body{padding:24px 24px 24px; display:flex; flex-direction:column; flex:1}
.svc-thumb{position:relative; height:180px; overflow:hidden; flex-shrink:0}
.svc-thumb img{width:100%; height:100%; object-fit:cover; transition:.5s cubic-bezier(.4,0,.2,1)}
.svc-card:hover .svc-thumb img{transform:scale(1.06)}
.svc-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,18,38,.55))}
.svc-body .svc-icon{margin-top:-52px; position:relative; z-index:2}
.svc-card:hover{border-color:var(--amber); background:linear-gradient(180deg,rgba(249,162,8,.09),rgba(255,255,255,.02)); transform:translateY(-5px)}
.svc-card .tag{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; color:var(--amber-300); text-transform:uppercase; margin-bottom:8px}
.svc-card h3{font-size:1.18rem; color:#fff; margin-bottom:10px}
.svc-card p{color:var(--on-dark-muted); font-size:.94rem; flex:1; line-height:1.55}
.svc-card .more{margin-top:16px; font-family:var(--ff-display); font-weight:700; font-size:.86rem; color:var(--amber-300); display:inline-flex; align-items:center; gap:.45rem; transition:.2s}
.svc-card .more svg{width:16px; height:16px; flex-shrink:0}
.svc-card:hover .more{gap:.7rem}
.svc-list{list-style:none; margin-top:4px}
.svc-list li{position:relative; padding-left:20px; color:var(--on-dark-muted); font-size:.92rem; margin-top:9px; line-height:1.45}
.svc-list li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; background:var(--amber);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* service detail feature grid (light) */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:28px 24px; transition:.25s}
.feat:hover{border-color:var(--amber); box-shadow:var(--shadow-sm); transform:translateY(-3px); background:#fff}
.feat .svc-icon{width:50px;height:50px; margin-bottom:14px}
.feat .svc-icon svg{width:23px;height:23px}
.feat h3{color:var(--navy); font-size:1.12rem; margin-bottom:8px}
.feat p{color:var(--muted); font-size:.96rem}

/* ---------- REFERENCES ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px}
.filter-btn{font-family:var(--ff-display); font-weight:600; font-size:.86rem; padding:.6em 1.15em; border-radius:100px;
  border:1.5px solid var(--line); color:var(--muted); background:#fff; transition:.22s}
.filter-btn:hover{border-color:var(--navy); color:var(--navy)}
.filter-btn.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.ref-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.ref-card{position:relative; border-radius:16px; overflow:hidden; background:var(--navy); display:block;
  box-shadow:var(--shadow-sm); transition:.35s; aspect-ratio:4/3.35; border:1px solid var(--line)}
.ref-card.hide{display:none}
.ref-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.6s cubic-bezier(.4,0,.2,1)}
.ref-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px)}
.ref-card:hover img{transform:scale(1.07)}
.ref-overlay{position:absolute; inset:0; z-index:2; padding:22px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg,rgba(7,13,28,0) 30%,rgba(7,13,28,.55) 62%,rgba(7,13,28,.95) 100%); color:#fff}
.ref-cat{position:absolute; top:16px; left:16px; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; background:var(--amber); color:#231500; padding:.4em .7em; border-radius:6px; font-weight:600; z-index:3}
.ref-client{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; color:var(--amber-300); text-transform:uppercase; margin-bottom:6px}
.ref-card h3{font-size:1.14rem; line-height:1.18; color:#fff}
.ref-meta{margin-top:8px; font-size:.82rem; color:var(--on-dark-muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ref-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--amber)}
.ref-arrow{position:absolute; top:14px; right:14px; z-index:3; width:34px;height:34px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); transition:.25s}
.ref-card:hover .ref-arrow{background:var(--amber)}
.ref-arrow svg{width:16px;height:16px;color:#fff}
.ref-card:hover .ref-arrow svg{color:#231500; transform:translate(2px,-2px)}

/* project detail */
.proj-hero{position:relative; height:min(64vh,560px); min-height:380px; overflow:hidden; display:flex; align-items:flex-end; margin-top:-74px}
.proj-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.proj-hero .scr{position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,13,28,.45) 0%,rgba(7,13,28,.35) 40%,rgba(7,13,28,.92) 100%)}
.proj-hero .wrap{position:relative; z-index:2; padding-block:44px; color:#fff}
.proj-hero h1{font-size:clamp(2rem,4.4vw,3.3rem); font-weight:900; max-width:22ch; margin-top:14px}
.proj-hero .p-meta{margin-top:18px; display:flex; gap:22px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:.82rem; color:var(--amber-300); letter-spacing:.04em}
.proj-hero .p-meta span{color:#fff}
.proj-body{display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(32px,5vw,60px); align-items:start}
.proj-info{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:30px 28px; position:sticky; top:96px}
.proj-info h3{font-size:1rem; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); margin-bottom:16px; font-size:.95rem}
.proj-info dl{display:grid; gap:14px}
.proj-info .row{border-bottom:1px solid var(--line); padding-bottom:12px}
.proj-info dt{font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2)}
.proj-info dd{font-family:var(--ff-display); font-weight:700; color:var(--navy); font-size:1rem; margin-top:3px}

/* ---------- STATS / QUALITY / CTA BAND ---------- */
.quality{background:var(--navy); color:#fff; border-radius:18px; padding:34px 36px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow)}
.quality .badge{width:64px;height:64px; flex-shrink:0; display:grid; place-items:center; background:rgba(249,162,8,.14); border:1px solid rgba(249,162,8,.5);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.quality .badge svg{width:30px;height:30px;color:var(--amber)}
.quality-txt h3{font-size:1.3rem; margin-bottom:8px}
.quality-txt p{color:var(--on-dark-muted); font-size:1rem; max-width:70ch}
.cta{position:relative; background:linear-gradient(115deg,var(--navy-900),var(--navy) 55%,#1c3160); color:#fff; overflow:hidden}
.cta::before{content:""; position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:420px;height:420px; opacity:.10;
  background:var(--amber); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-block:clamp(52px,7vw,84px)}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.9rem); max-width:20ch}
.cta h2 span{color:var(--amber)}
.cta p{color:var(--on-dark-muted); margin-top:14px; font-size:1.08rem; max-width:46ch}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- CONTACT ---------- */
.contact{background:var(--paper)}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,56px); align-items:stretch}
.contact-info h3{font-size:1.4rem; color:var(--navy); margin-bottom:8px}
.contact-info>p{color:var(--muted); margin-bottom:26px; max-width:46ch}
.cinfo{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.cinfo .ic{width:44px;height:44px;flex-shrink:0; display:grid;place-items:center; background:#fff; border:1px solid var(--line);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cinfo .ic svg{width:20px;height:20px;color:var(--amber-600)}
.cinfo .k{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; color:var(--muted-2); text-transform:uppercase}
.cinfo .v{font-family:var(--ff-display); font-weight:700; color:var(--navy); font-size:1.02rem; margin-top:3px}
.cinfo .v a:hover{color:var(--amber-600)}
.contact-soc{display:flex; gap:12px; margin-top:24px}
.contact-soc a{width:42px;height:42px; border-radius:11px; background:var(--navy); display:grid;place-items:center; transition:.25s}
.contact-soc a:hover{background:var(--amber); transform:translateY(-3px)}
.contact-soc svg{width:18px;height:18px;color:#fff}
.contact-soc a:hover svg{color:#231500}
.form-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(26px,3.5vw,40px); box-shadow:var(--shadow-sm)}
.form-card h3{font-size:1.4rem; color:var(--navy); margin-bottom:6px}
.form-card .sub{color:var(--muted); font-size:.95rem; margin-bottom:24px}
.field{margin-bottom:16px}.field.row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0}
.field label{display:block; font-family:var(--ff-display); font-weight:600; font-size:.82rem; color:var(--navy); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; padding:.85em 1em; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--ff-body); font-size:.95rem; color:var(--text); background:var(--paper); transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--amber); background:#fff; box-shadow:0 0 0 4px rgba(249,162,8,.12)}
.field textarea{resize:vertical; min-height:120px}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; align-items:center}
.form-note{font-size:.78rem; color:var(--muted-2); margin-top:14px; line-height:1.5}
.map-wrap{margin-top:14px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); line-height:0}
.map-wrap iframe{width:100%; height:320px; border:0}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--on-dark-muted); padding-top:60px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px}
.foot-brand img{height:46px; margin-bottom:20px}
.foot-brand p{font-size:.94rem; max-width:34ch; line-height:1.65}
.foot-slogan{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; color:var(--amber-300); text-transform:uppercase; margin-top:18px}
.foot-col h4{font-family:var(--ff-display); color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px}
.foot-col a,.foot-col p{display:block; color:var(--on-dark-muted); font-size:.92rem; padding:5px 0; transition:.2s}
.foot-col a:hover{color:var(--amber-300); padding-left:5px}
.foot-soc{display:flex; gap:10px; margin-top:6px}
.foot-soc a{width:38px;height:38px;border-radius:10px; background:rgba(255,255,255,.06); display:grid;place-items:center; padding:0}
.foot-soc a:hover{background:var(--amber); padding:0}
.foot-soc svg{width:16px;height:16px;color:#fff}.foot-soc a:hover svg{color:#231500}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08); padding-block:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem}
.foot-bottom a:hover{color:#fff}
.foot-map{padding-bottom:40px; border-top:1px solid rgba(255,255,255,.08); margin-top:6px; padding-top:34px}
.foot-map-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.foot-map-head h4{color:#fff; font-size:1.25rem; font-family:var(--ff-display)}
.foot-map .map-wrap{margin-top:0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:none}
.foot-map .map-wrap iframe{width:100%; height:300px; border:0; display:block}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:90; width:58px;height:58px; border-radius:50%; background:#25D366;
  display:grid;place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:.25s; animation:wa-pulse 2.6s infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;color:#fff}
@keyframes wa-pulse{0%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.4)}70%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,0)}}
body.menu-open{overflow:hidden}
body.menu-open .wa-float{opacity:0; pointer-events:none}

/* ---------- PRELOADER (opening animation) ---------- */
#preloader{position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 38%, #16264f 0%, #0a1226 68%, #070d1c 100%);
  transition:opacity .6s ease, visibility .6s ease}
#preloader.done{opacity:0; visibility:hidden}
.pl-inner{display:flex; flex-direction:column; align-items:center; gap:24px}
.pl-emblem{width:88px; height:auto; animation:plPop 1s cubic-bezier(.22,1,.3,1) both, plFloat 2.4s ease-in-out 1s infinite}
@keyframes plPop{0%{opacity:0; transform:scale(.7) translateY(12px)}100%{opacity:1; transform:scale(1) translateY(0)}}
@keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pl-bar{width:150px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden}
.pl-bar span{display:block; width:40%; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--amber),var(--amber-300)); animation:plLoad 1.15s ease-in-out infinite}
@keyframes plLoad{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}

/* project status pill */
.pstatus{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--ff-mono); font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.25em .55em; border-radius:5px}
.pstatus::before{content:""; width:6px; height:6px; border-radius:50%}
.pstatus-devam{background:rgba(76,175,80,.16); color:#7fd489}
.pstatus-devam::before{background:#4CAF50; box-shadow:0 0 0 3px rgba(76,175,80,.25)}
.pstatus-tamamlandi{background:rgba(249,162,8,.16); color:var(--amber-300)}
.pstatus-tamamlandi::before{background:var(--amber)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:.7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .about-grid,.two-col,.proj-body{grid-template-columns:1fr}
  .proj-info{position:static}
  .svc-grid,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .ref-grid{grid-template-columns:repeat(2,1fr)}
  .cards-4,.cards-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav .wrap{height:66px}
  .hero{margin-top:-66px; padding-top:66px}
  .page-hero{margin-top:-66px; padding-top:66px}
  .proj-hero{margin-top:-66px}
  .nav-phone{display:none}
  .burger{display:flex}
  /* full-screen opaque mobile menu */
  .nav-menu{position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100vh; height:100dvh;
    background-color:#0A1226; background-image:linear-gradient(180deg,#0E1B3A,#0A1226);
    z-index:120; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0;
    padding:88px 26px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.2,1)}
  .nav-menu.open{transform:translateX(0)}
  .nav-item{width:100%}
  .nav-link{width:100%; font-size:1.25rem; padding:.7em .15em; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09)}
  .nav-link .caret{width:18px;height:18px}
  .nav-item.open .caret{transform:rotate(180deg)}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:0; box-shadow:none;
    padding:0 0 6px 8px; max-height:0; overflow:hidden; transition:max-height .3s ease}
  .nav-item.open .dropdown{max-height:400px}
  .dropdown a{font-size:1.02rem; padding:.6em .4em; color:var(--on-dark-muted)}
  .nav-right .btn-cta{display:none}
  .svc-grid,.feat-grid{grid-template-columns:1fr}
  .ref-grid{grid-template-columns:1fr}
  .cards-4,.cards-3,.cards-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .field.row{grid-template-columns:1fr}
  .cta .wrap{flex-direction:column; align-items:flex-start}
  .quality{flex-direction:column; align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important; transition-duration:.15s!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
  .hero-title .w{transform:none; opacity:1; animation:none}
  .hero .fade-up{opacity:1; transform:none; animation:none}
  #grid-canvas{display:none}
  #preloader{display:none!important}
}

/* ============ Footer credit (Fernex Media) ============ */
.foot-credit{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07);
  text-align:center; font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.03em; color:var(--on-dark-muted)}
.foot-credit a{color:var(--amber-300); font-weight:600; text-decoration:none; transition:.2s}
.foot-credit a:hover{color:var(--amber); text-decoration:underline}