/* ==========================================================================
   ACRON Havacılık ve Yazılım Teknolojileri A.Ş.
   Kurumsal web sitesi — tasarım sistemi
   ========================================================================== */

/* --- 1. Token'lar ------------------------------------------------------- */
:root{
  /* Yüzeyler */
  --ink:        #06090F;
  --ink-1:      #0A0F19;
  --ink-2:      #101928;
  --panel:      #0D1523;
  --panel-2:    #131E30;

  /* Çizgiler */
  --line:       rgba(143,166,204,.14);
  --line-2:     rgba(143,166,204,.28);
  --line-3:     rgba(143,166,204,.48);

  /* Metin */
  --fg:         #EDF1F8;
  --fg-2:       #A9B6CB;
  --fg-3:       #6F7D93;

  /* Marka */
  --brand:      #4E6089;
  --brand-lt:   #8FA6CC;
  --signal:     #C8402E;
  --signal-lt:  #E8674E;
  --warm:       #E4A05C;

  /* Tipografi */
  --f-display:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:     "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:     "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Ölçü */
  --wrap:       1320px;
  --gutter:     clamp(20px, 4.5vw, 64px);
  --nav-h:      74px;

  /* Hareket */
  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-io:    cubic-bezier(.65,0,.35,1);
}

/* --- 2. Sıfırlama ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,h5{margin:0; font-weight:600; line-height:1.06; letter-spacing:-.015em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--signal); color:#fff}

/* --- 3. Yardımcılar ----------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-wide{width:100%; max-width:1680px; margin-inline:auto; padding-inline:var(--gutter)}

.display{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 118;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:.92;
}
.d-1{font-size:clamp(2.6rem, 7.1vw, 6.6rem)}
.d-2{font-size:clamp(2rem, 4.1vw, 3.45rem); line-height:.98}
.d-3{font-size:clamp(1.55rem, 2.6vw, 2.2rem); line-height:1}
.d-4{font-size:clamp(1.25rem, 1.9vw, 1.6rem)}

.lead{
  font-size:clamp(1.02rem, 1.35vw, 1.28rem);
  line-height:1.6;
  color:var(--fg-2);
  font-weight:300;
}
.body-2{color:var(--fg-2); font-size:.965rem; line-height:1.72}
.small{font-size:.86rem; line-height:1.65; color:var(--fg-3)}
.mt-s{margin-top:16px}
.mt-m{margin-top:28px}
.mt-l{margin-top:clamp(36px,5vw,64px)}
.mt-xl{margin-top:clamp(52px,7vw,96px)}

/* Teknik etiket — mono, harf aralıklı */
.tag{
  font-family:var(--f-mono);
  font-size:.688rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-lt);
  font-weight:500;
}
.tag--signal{color:var(--signal-lt)}
.tag--muted{color:var(--fg-3)}

/* Bölüm indeksi:  01 — KURUMSAL */
.idx{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.idx__n{font-family:var(--f-mono); font-size:.688rem; color:var(--signal); letter-spacing:.12em}
.idx__r{flex:0 0 34px; height:1px; background:var(--line-2)}
.idx__t{font-family:var(--f-mono); font-size:.688rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3)}

.rule{height:1px; background:var(--line); border:0; margin:0}

/* Köşe braketleri — aviyonik HUD dili */
.brackets{position:relative}
.brackets::before,.brackets::after{
  content:""; position:absolute; width:13px; height:13px; pointer-events:none;
  border:1px solid var(--line-3);
}
.brackets::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.brackets::after{bottom:-1px; right:-1px; border-left:0; border-top:0}

/* --- 4. Arka plan dokusu: mühendislik ızgarası -------------------------- */
.grid-lines{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.grid-lines span{border-left:1px solid rgba(143,166,204,.045)}
.grid-lines span:first-child{border-left:0}
@media (max-width:760px){ .grid-lines{grid-template-columns:repeat(2,1fr)} }

/* Film greni — düz gradyanların "yapay" hissini kırar */
.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Klavye ile gezinme: odak her zaman görünür olmalı */
:focus-visible{outline:2px solid var(--signal-lt); outline-offset:3px}

/* İçeriğe atla — ekran okuyucu ve klavye kullanıcıları için */
.skip{
  position:fixed; top:10px; left:10px; z-index:300;
  transform:translateY(-160%); transition:transform .3s var(--ease);
  background:var(--signal); color:#fff; padding:12px 20px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{transform:translateY(0)}

/* --- 5. Üst menü -------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(6,9,15,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%}
.nav__logo{display:flex; align-items:center; gap:11px; flex:0 0 auto}
/* Menüde yalnız kelime markası kullanılır: 74px'lik bir çubukta
   'HAVACILIK TEKNOLOJİ' alt satırı okunacak boyuta inemiyor.
   Tam kilit alt bilgide ve açılış perdesinde yer alıyor. */
.nav__logo img{height:24px; width:auto}
.nav__links{display:flex; align-items:center; gap:2px}
.nav__link{
  position:relative; padding:9px 15px; font-size:.828rem; font-weight:400;
  color:var(--fg-2); letter-spacing:.015em; transition:color .3s var(--ease);
}
.nav__link:hover{color:var(--fg)}
.nav__link::after{
  content:""; position:absolute; left:15px; right:15px; bottom:2px; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--fg)}

/* Ürünler açılır menüsü */
.nav__has-sub{position:relative}
.nav__sub{
  position:absolute; top:calc(100% + 12px); left:0; min-width:310px;
  background:rgba(10,15,25,.97); border:1px solid var(--line);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  padding:8px 0;
}
.nav__has-sub:hover .nav__sub,.nav__has-sub:focus-within .nav__sub{opacity:1; visibility:visible; transform:translateY(0)}
.nav__sub a{display:block; padding:11px 20px; font-size:.87rem; color:var(--fg-2);
  border-left:2px solid transparent; transition:all .3s var(--ease)}
.nav__sub a:hover{color:var(--fg); background:rgba(143,166,204,.05); border-left-color:var(--signal)}
.nav__sub a span{display:block; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-top:3px}
.nav__sub hr{border:0; height:1px; background:var(--line); margin:8px 0}

.nav__cta{
  display:inline-flex; align-items:center; gap:9px; padding:10px 19px;
  border:1px solid var(--line-2); font-family:var(--f-mono);
  font-size:.688rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.nav__cta:hover{border-color:var(--signal); background:var(--signal); color:#fff}

/* Hamburger */
.nav__burger{display:none; width:40px; height:40px; position:relative; flex:0 0 auto}
.nav__burger i{
  position:absolute; left:9px; width:22px; height:1.5px; background:var(--fg);
  transition:transform .45s var(--ease), opacity .25s;
}
.nav__burger i:nth-child(1){top:15px}
.nav__burger i:nth-child(2){top:21px}
.nav__burger i:nth-child(3){top:27px}
body.menu-open .nav__burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger i:nth-child(2){opacity:0}
body.menu-open .nav__burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobil panel */
.menu{
  position:fixed; inset:0; z-index:85; background:var(--ink-1);
  padding:calc(var(--nav-h) + 34px) var(--gutter) 40px;
  transform:translateY(-100%); transition:transform .62s var(--ease);
  overflow-y:auto; visibility:hidden;
}
body.menu-open .menu{transform:translateY(0); visibility:visible}
.menu a{display:block; padding:15px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-variation-settings:"wdth" 112;
  font-size:1.45rem; text-transform:uppercase; font-weight:500}
.menu .menu__cta{display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  padding:15px 26px; border:1px solid var(--signal); background:var(--signal); color:#fff;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--signal)}
.menu a.menu__sub{padding-left:20px; font-size:.98rem;
  font-family:var(--f-body); text-transform:none;
  color:var(--fg-2); font-weight:300}

@media (max-width:1120px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
}

/* --- 6. Butonlar -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:15px 26px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line-2); position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn > *{position:relative; z-index:1}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--signal);
  transform:translateY(101%); transition:transform .52s var(--ease);
}
.btn:hover{border-color:var(--signal); color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--signal); border-color:var(--signal); color:#fff}
.btn--solid::before{background:#A83223}

.arrow{width:15px; height:1px; background:currentColor; position:relative; flex:0 0 15px}
.arrow::after{content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg)}

/* Metin bağlantısı */
.tlink{display:inline-flex; align-items:center; gap:11px; font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
  transition:color .3s var(--ease)}
.tlink:hover{color:var(--signal-lt)}
.tlink .arrow{transition:transform .4s var(--ease)}
.tlink:hover .arrow{transform:translateX(6px)}

/* --- 7. Ana sayfa hero -------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:var(--ink);
}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__sky{
  position:absolute; inset:-6% -2%; width:104%; height:112%;
  object-fit:cover; opacity:.8;
  transform:scale(1.06); will-change:transform;
}
.hero__grade{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(6,9,15,.84) 24%, rgba(6,9,15,.28) 58%, rgba(6,9,15,.6) 100%),
    linear-gradient(to right, rgba(6,9,15,.9) 0%, rgba(6,9,15,.32) 46%, rgba(6,9,15,.04) 100%);
}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.92}

/* Görsel sahnesi: sağ sütuna kilitli, metin sütununa asla girmez.
   Ortalamayı sahne yapar; transform'u yalnız parallax kullanır. */
.hero__stage{
  position:absolute; z-index:2; pointer-events:none;
  left:52%; right:clamp(-70px,-3vw,0px); top:5%; bottom:24%;
  display:grid; place-items:center;
}
.hero__craft{
  width:100%; max-width:820px;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.75));
  will-change:transform;
}
.hero__copy{max-width:min(620px, 42vw)}

.hero__body{position:relative; z-index:4; width:100%;
  padding-block:130px clamp(40px,7vh,86px)}
.hero__eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.hero__eyebrow .dot{width:6px; height:6px; background:var(--signal); border-radius:50%;
  animation:pulse 2.6s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(200,64,46,.55)}
  70%{opacity:.75; box-shadow:0 0 0 9px rgba(200,64,46,0)}}

.hero h1{max-width:none}
.hero h1 em{font-style:normal; color:var(--brand-lt)}
.hero__sub{max-width:none; margin-top:26px}
.hero__acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}

/* Hero alt veri şeridi */
.hero__strip{
  position:relative; z-index:4; border-top:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(6,9,15,.5), rgba(6,9,15,.92));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero__strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.hero__stat{padding:22px 26px; border-left:1px solid var(--line)}
.hero__stat:first-child{border-left:0; padding-left:0}
.hero__stat b{display:block; font-family:var(--f-display); font-variation-settings:"wdth" 112;
  font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:600; line-height:1; margin-bottom:7px}
.hero__stat b i{font-style:normal; font-size:.5em; color:var(--fg-3); margin-left:4px}
@media (max-width:880px){
  .hero__strip .wrap{grid-template-columns:repeat(2,1fr)}
  .hero__stat{padding:18px 14px; border-top:1px solid var(--line)}
  .hero__stat:nth-child(odd){border-left:0; padding-left:0}
}

/* Kaydırma göstergesi */
.scroll-hint{
  position:absolute; z-index:5; bottom:calc(100% + 26px); right:var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  writing-mode:vertical-rl;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-3);
}
.scroll-hint::after{content:""; width:1px; height:52px; background:linear-gradient(var(--line-3), transparent)}
@media (max-width:880px){ .scroll-hint{display:none} }

/* --- 8. Bölümler -------------------------------------------------------- */
.sec{position:relative; z-index:2; padding:clamp(72px, 11vh, 148px) 0}
.sec--tight{padding:clamp(52px, 7vh, 92px) 0}
.sec--panel{background:var(--ink-1); border-block:1px solid var(--line)}
.sec--deep{background:linear-gradient(180deg, var(--ink) 0%, var(--ink-1) 100%)}

.sec__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(28px,5vw,80px); align-items:end}
.sec__head p{max-width:52ch}
@media (max-width:880px){ .sec__head{grid-template-columns:1fr; align-items:start} }

/* --- 9. Kurumsal ------------------------------------------------------- */
.about{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,86px); align-items:start}
@media (max-width:940px){ .about{grid-template-columns:1fr} }
.about__txt p + p{margin-top:20px}
.about__figure{position:relative; margin:0}
.about__figure img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(.36) contrast(1.06)}
.about__figure figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:16px 18px;
  background:linear-gradient(transparent, rgba(6,9,15,.94));
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-2);
}

/* Rakam rozetleri */
.creds{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.creds li{background:var(--ink); padding:24px 22px}
.creds b{display:block; font-family:var(--f-display); font-variation-settings:"wdth" 112;
  font-size:1.85rem; font-weight:600; line-height:1; margin-bottom:9px}

/* --- 10. Ürün vitrini --------------------------------------------------- */
.fleet{display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line)}
.fleet__item{
  position:relative; background:var(--ink); display:grid;
  grid-template-columns:96px minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.4vw,44px) 0; overflow:hidden;
  transition:background .55s var(--ease);
}
.fleet__item:hover{background:var(--ink-2)}
.fleet__bg{
  position:absolute; inset:0; z-index:0; opacity:0; object-fit:cover; width:100%; height:100%;
  transition:opacity .8s var(--ease), transform 1.4s var(--ease); transform:scale(1.1);
  filter:grayscale(.32);
}
.fleet__item:hover .fleet__bg{opacity:.22; transform:scale(1)}
.fleet__n,.fleet__id,.fleet__desc{position:relative; z-index:2}
.fleet__n{font-family:var(--f-mono); font-size:.72rem; color:var(--fg-3); letter-spacing:.1em; padding-left:var(--gutter)}
.fleet__id h3{font-family:var(--f-display); font-variation-settings:"wdth" 120;
  font-size:clamp(1.55rem,3.1vw,2.5rem); text-transform:uppercase; font-weight:600; line-height:.98}
.fleet__cls{margin-top:9px}
.fleet__desc{display:flex; align-items:center; justify-content:space-between; gap:26px; padding-right:var(--gutter)}
.fleet__desc p{max-width:38ch}
.fleet__img{
  position:absolute; right:clamp(96px,11.5vw,178px); top:50%; transform:translate(30px,-50%) scale(.94);
  width:clamp(180px,21vw,330px); z-index:1; opacity:0; pointer-events:none;
  transition:opacity .7s var(--ease), transform .9s var(--ease);
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.65));
}
.fleet__item:hover .fleet__img{opacity:1; transform:translate(0,-50%) scale(1)}
.fleet__go{flex:0 0 auto}
@media (max-width:1080px){
  .fleet__item{grid-template-columns:1fr; gap:14px; padding:30px var(--gutter)}
  .fleet__n{padding-left:0}
  .fleet__desc{flex-direction:column; align-items:flex-start; padding-right:0; gap:16px}
  .fleet__img{display:none}
  .fleet__item .fleet__bg{opacity:.14}
}

/* --- 11. Yetenek kartları ---------------------------------------------- */
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.cap{background:var(--ink-1); padding:clamp(24px,2.6vw,34px); position:relative; overflow:hidden}
.cap::after{content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease)}
.cap:hover::after{transform:scaleX(1)}
.cap__n{font-family:var(--f-mono); font-size:.66rem; color:var(--signal); letter-spacing:.12em; margin-bottom:20px; display:block}
.cap h4{font-size:1.06rem; font-weight:500; letter-spacing:0; line-height:1.3; margin-bottom:12px}
.cap p{color:var(--fg-3); font-size:.9rem; line-height:1.68}

/* --- 12. Ürün detay hero ------------------------------------------------ */
.phero{position:relative; min-height:min(86svh,840px); display:flex; align-items:flex-end; overflow:hidden}
.phero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 34%; opacity:.66; z-index:0}
.phero__grade{position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, var(--ink) 1%, rgba(6,9,15,.86) 30%, rgba(6,9,15,.22) 72%),
             linear-gradient(to right, rgba(6,9,15,.92), rgba(6,9,15,.08) 64%)}
.phero__stage{
  position:absolute; z-index:2; pointer-events:none;
  left:51%; right:clamp(-60px,-2vw,10px); top:6%; bottom:16%;
  display:grid; place-items:center;
}
.phero__craft{width:100%; max-width:800px;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.72)); will-change:transform}
.phero__copy{max-width:min(640px, 43vw)}
.phero__in{position:relative; z-index:3; width:100%;
  padding-block:150px clamp(36px,6vh,72px)}   /* yan boşluk .wrap'ten gelir */
.phero h1{font-family:var(--f-display); font-variation-settings:"wdth" 122;
  font-size:clamp(2.7rem,8vw,6.6rem); text-transform:uppercase; font-weight:600; line-height:.92}
.phero h1 small{display:block; max-width:none; font-family:var(--f-body); text-transform:none;
  font-size:clamp(1rem,1.35vw,1.24rem); font-weight:300; letter-spacing:0;
  color:var(--fg-2); margin-top:22px; line-height:1.55}
.phero__tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px}
.chip{border:1px solid var(--line-2); padding:6px 13px; font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2)}
.chip--signal{border-color:rgba(200,64,46,.55); color:var(--signal-lt)}

/* Teknik veri şeridi */
.specbar{background:var(--ink-1); border-block:1px solid var(--line); position:relative; z-index:3}
.specbar .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:0}
.specbar__i{padding:26px 24px; border-left:1px solid var(--line)}
.specbar__i:first-child{border-left:0; padding-left:0}
.specbar__i span{display:block; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:10px}
.specbar__i b{font-family:var(--f-display); font-variation-settings:"wdth" 112;
  font-size:clamp(1.35rem,2.2vw,1.95rem); font-weight:600; line-height:1}
.specbar__i b i{font-style:normal; font-size:.5em; color:var(--fg-3); margin-left:5px; letter-spacing:.02em}
@media (max-width:760px){
  .specbar .wrap{grid-template-columns:repeat(2,1fr)}
  .specbar__i{padding:18px 14px; border-top:1px solid var(--line)}
  .specbar__i:nth-child(odd){border-left:0; padding-left:0}
}


/* Teknik çizim hero'su (fotoğrafı olmayan ürünler) */
.phero__stage--glyph{right:clamp(10px,4vw,80px); bottom:20%}
.phero__stage--glyph svg{width:100%; max-width:600px; height:auto; opacity:.92}
figure.rnd__vis{aspect-ratio:auto; background:var(--panel); padding:clamp(12px,2vw,26px)}
figure.rnd__vis svg{width:100%}

/* --- 13. Özellik listeleri --------------------------------------------- */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.feat{background:var(--ink); padding:clamp(24px,2.6vw,36px)}
.feat h4{font-size:1.02rem; font-weight:500; letter-spacing:0; margin-bottom:14px; display:flex; align-items:baseline; gap:12px}
.feat h4::before{content:""; flex:0 0 18px; height:1px; background:var(--signal); transform:translateY(-5px)}
.feat p{color:var(--fg-3); font-size:.9rem; line-height:1.7}
.feats--panel .feat{background:var(--ink-1)}

/* Etiket-değer tablosu */
.dtable{border-top:1px solid var(--line); margin:0}
.dtable__row{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:24px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline}
.dtable__row dt{font-family:var(--f-mono); font-size:.71rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-3); margin:0}
.dtable__row dd{margin:0; color:var(--fg); font-size:.955rem}
@media (max-width:620px){ .dtable__row{grid-template-columns:1fr; gap:5px} }

/* İki sütunlu işaretli liste */
.ticks{columns:2; column-gap:clamp(24px,4vw,64px)}
.ticks li{break-inside:avoid; padding:12px 0 12px 26px; position:relative;
  border-bottom:1px solid var(--line); color:var(--fg-2); font-size:.94rem}
.ticks li::before{content:""; position:absolute; left:0; top:20px; width:9px; height:1px; background:var(--signal)}
.ticks--1{columns:1}
@media (max-width:720px){ .ticks{columns:1} }

/* Başlıklı işaretli liste (ARAT teknik özellikler) */
.speclist{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.speclist li{background:var(--ink-1); padding:22px 24px}
.speclist b{display:block; font-weight:500; font-size:.97rem; margin-bottom:7px}
.speclist span{color:var(--fg-3); font-size:.878rem; line-height:1.62; display:block}

/* --- 13b. Kademeli eğitim seviyeleri ----------------------------------- */
.lvls{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line)}
.lvl{background:var(--ink); padding:clamp(24px,2.8vw,36px); position:relative}
.lvl__n{display:block; font-family:var(--f-mono); font-size:.66rem;
  color:var(--signal); letter-spacing:.12em; margin-bottom:18px}
.lvl__bar{display:block; height:2px; background:rgba(143,166,204,.16); margin-bottom:22px}
.lvl__bar i{display:block; height:100%; background:var(--signal);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .15s}
.lvl.is-in .lvl__bar i{transform:scaleX(1)}
.lvl h4{font-family:var(--f-display); font-variation-settings:"wdth" 112;
  text-transform:uppercase; font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:600; letter-spacing:0; margin-bottom:12px}
.lvl p{color:var(--fg-3); font-size:.9rem; line-height:1.7}

/* Fotoğrafı olan ürünlerde hero: stüdyo karesi sağ panele tam oturur,
   kenarları maskeyle eritilir — yüzen kesim yerine editoryal panel. */
.phero__stage--foto{
  left:44%; right:0; top:0; bottom:0; display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 30%),
                     linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 30%),
                     linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.phero__stage--foto .phero__craft{
  width:100%; height:100%; max-width:none; object-fit:cover;
  object-position:52% 46%; filter:none;
}

/* --- 14. Alıntı --------------------------------------------------------- */
.quote{position:relative; padding-left:clamp(20px,3vw,42px); border-left:2px solid var(--signal); margin:0}
.quote p{font-family:var(--f-display); font-variation-settings:"wdth" 104; font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.68rem); line-height:1.34; letter-spacing:-.01em; color:var(--fg)}
.quote cite{display:block; margin-top:18px; font-style:normal; font-family:var(--f-mono);
  font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3)}

/* --- 15. Haberleşme mimarisi ------------------------------------------- */
.arch{background:var(--ink-1); border:1px solid var(--line); padding:clamp(18px,3vw,40px)}
.arch svg{width:100%; height:auto; overflow:visible}
.arch-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.arch-link{background:var(--ink); padding:clamp(24px,2.6vw,34px)}
.arch-link > .tag{display:block; margin-bottom:22px}
.arch-hop{padding:15px 0; border-top:1px solid var(--line)}
.arch-hop:first-of-type{border-top:0; padding-top:0}
.arch-hop b{display:block; font-size:.93rem; font-weight:500; margin-bottom:6px}
.arch-hop em{font-style:normal; font-family:var(--f-mono); font-size:1rem; color:var(--signal-lt); display:block; margin-bottom:6px}
.arch-hop p{color:var(--fg-3); font-size:.865rem; line-height:1.62}
.arch-adv{margin-top:22px; padding:18px 20px; background:var(--panel-2); border-left:2px solid var(--signal)}
.arch-adv .tag{display:block; margin-bottom:9px}
.arch-adv p{font-size:.882rem; color:var(--fg-2); line-height:1.65}

/* --- 16. Ar-Ge kartları ------------------------------------------------- */
.rnd{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.rnd__i{background:var(--ink-1); padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; gap:20px}
.rnd__vis{aspect-ratio:4/3; display:grid; place-items:center; background:var(--panel); position:relative; overflow:hidden}
.rnd__vis::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(143,166,204,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(143,166,204,.07) 1px, transparent 1px);
  background-size:26px 26px}
.rnd__vis svg{position:relative; width:94%; height:auto; max-height:88%}
.rnd__vis img.photo{filter:none; max-width:88%; max-height:86%; opacity:1;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
                     linear-gradient(to right,  transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
                     linear-gradient(to right,  transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect}
.rnd__vis img{position:relative; width:auto; height:auto;
  max-width:80%; max-height:80%; object-fit:contain;
  filter:invert(1) brightness(2.6) contrast(.8); opacity:.9;
  transition:transform 1s var(--ease)}
.rnd__i:hover .rnd__vis img{transform:scale(1.07)}
.rnd__i h4{font-size:1.02rem; font-weight:500; letter-spacing:0}
.rnd__i p{color:var(--fg-3); font-size:.878rem; line-height:1.65}
.rnd__st{margin-top:auto; padding-top:6px}

/* --- 17. CTA şeridi ----------------------------------------------------- */
.cta{position:relative; overflow:hidden; border-top:1px solid var(--line)}
.cta__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; opacity:.5; z-index:0}
.cta__grade{position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(6,9,15,.94) 4%, rgba(6,9,15,.34) 76%),
             linear-gradient(to bottom, rgba(6,9,15,.5), rgba(6,9,15,.15) 45%, rgba(6,9,15,.72))}
.cta__in{position:relative; z-index:2; padding:clamp(72px,11vh,150px) 0}
.cta h2{max-width:18ch}

/* --- 18. Formlar -------------------------------------------------------- */
.form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.field{background:var(--ink-1); padding:20px 22px; position:relative}
.field--full{grid-column:1/-1}
.field label{display:block; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:10px}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; color:var(--fg);
  font-family:var(--f-body); font-size:.98rem; font-weight:300; padding:2px 0; outline:none;
}
.field textarea{resize:vertical; min-height:120px; line-height:1.6}
.field select{cursor:pointer}
.field select option{background:#0A0F19; color:#EDF1F8}
.field::after{content:""; position:absolute; left:22px; right:22px; bottom:14px; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field:focus-within label{color:var(--signal-lt)}
@media (max-width:720px){ .form{grid-template-columns:1fr} }

.form-foot{margin-top:22px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.form-msg{margin-top:18px; padding:14px 18px; border-left:2px solid var(--signal);
  background:var(--panel-2); font-size:.9rem; display:none}
.form-msg.is-on{display:block}

/* --- 19. İletişim ------------------------------------------------------- */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.68fr); gap:clamp(32px,5vw,80px); align-items:start}
@media (max-width:940px){ .contact{grid-template-columns:1fr} }
.cinfo{border-top:1px solid var(--line)}
.cinfo__i{padding:20px 0; border-bottom:1px solid var(--line)}
.cinfo__i span{display:block; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:9px}
.cinfo__i b{font-weight:400; font-size:1rem; color:var(--fg); display:block}
.cinfo__i a{border-bottom:1px solid var(--line-2); transition:border-color .3s, color .3s}
.cinfo__i a:hover{color:var(--signal-lt); border-color:var(--signal)}
.cinfo__i em{font-style:normal; color:var(--fg-3); font-size:.84rem; display:block; margin-top:6px}

/* --- 20. Alt bilgi ------------------------------------------------------ */
.foot{background:var(--ink-1); border-top:1px solid var(--line); position:relative; z-index:2}
.foot__top{display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.7fr));
  gap:clamp(24px,4vw,56px); padding:clamp(48px,7vh,84px) 0}
@media (max-width:940px){ .foot__top{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .foot__top{grid-template-columns:1fr; gap:32px} }
.foot__brand img{height:44px; width:auto; margin-bottom:24px}
.foot__brand p{max-width:34ch}
.foot__col h5{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-3); font-weight:500; margin-bottom:18px}
.foot__col li{margin-bottom:11px}
.foot__col a{font-size:.895rem; color:var(--fg-2); transition:color .3s var(--ease)}
.foot__col a:hover{color:var(--signal-lt)}
.foot__bar{border-top:1px solid var(--line); padding:22px 0;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
.foot__bar p{font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em; color:var(--fg-3)}

/* --- 21. Giriş animasyonları ------------------------------------------- */
[data-rise]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
[data-rise].is-in{opacity:1; transform:none}
[data-rise-d="1"]{transition-delay:.08s}
[data-rise-d="2"]{transition-delay:.16s}
[data-rise-d="3"]{transition-delay:.24s}
[data-rise-d="4"]{transition-delay:.32s}
[data-rise-d="5"]{transition-delay:.40s}

/* Satır satır maskeli başlık girişi */
/* Maskeli satır girişi — Türkçe aksanların (Â, İ, Ö, Ğ) kırpılmaması için
   üstte pay bırakılır; pay negatif margin ile geri alınır. */
.reveal{display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em}
.reveal > i{display:block; font-style:normal; transform:translateY(125%);
  transition:transform 1.05s var(--ease)}
.is-in .reveal > i{transform:translateY(0)}
.is-in .reveal:nth-of-type(2) > i{transition-delay:.09s}
.is-in .reveal:nth-of-type(3) > i{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1; transform:none; transition:none}
  .reveal > i{transform:none; transition:none}
  .hero__sky,.hero__craft,.phero__craft{transform:none !important}
  .hero__eyebrow .dot{animation:none}
}

/* --- 22. Açılış perdesi ------------------------------------------------- */
.boot{position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s}
.boot.is-off{opacity:0; visibility:hidden; pointer-events:none}
.boot__in{display:flex; flex-direction:column; align-items:center; gap:22px}
.boot__in img{height:46px; width:auto; opacity:.92}
.boot__bar{width:170px; height:1px; background:var(--line-2); overflow:hidden}
.boot__bar i{display:block; height:100%; width:0; background:var(--signal); transition:width .45s linear}

/* --- 23. Sayfa başlığı (iç sayfalar) ----------------------------------- */
.phead{position:relative; padding:calc(var(--nav-h) + clamp(64px,10vh,120px)) 0 clamp(44px,6vh,76px);
  border-bottom:1px solid var(--line); overflow:hidden}
.phead__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; opacity:.28; z-index:0}
.phead__grade{position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, var(--ink) 4%, rgba(6,9,15,.6) 60%, rgba(6,9,15,.85))}
.phead .wrap{position:relative; z-index:2}
.phead h1{max-width:20ch}
.phead p{max-width:56ch; margin-top:24px}

/* --- 24. Mobil hero düzeni ---------------------------------------------- */
@media (max-width:960px){
  .hero__stage{position:static; width:100%; height:auto; margin:0 auto -4%;
    padding-top:calc(var(--nav-h) + 34px); max-width:640px}
  .hero__craft{max-width:none}
  .hero__copy{max-width:none}
  .hero__grade{
    background:
      linear-gradient(to top, var(--ink) 22%, rgba(6,9,15,.80) 48%, rgba(6,9,15,.26) 76%, rgba(6,9,15,.55) 100%),
      linear-gradient(to right, rgba(6,9,15,.55), rgba(6,9,15,.18) 70%);
  }
  .hero__body{padding-block-start:14px}
  .hero h1{max-width:none}
  .hero__sub{max-width:none}
  .hero__acts{gap:10px}
  .hero__acts .btn{flex:1 1 100%; justify-content:space-between}
  /* Ürün hero'su: dar ekranda görsel üstte, metin altta */
  .phero{min-height:0; display:flex; flex-direction:column; justify-content:flex-end}
  .phero__stage{position:static; inset:auto; width:100%; height:auto; max-width:620px;
    margin:0 auto -6%; padding-top:calc(var(--nav-h) + 30px)}
  .phero__craft{max-width:none}
  .phero__copy{max-width:none}
  .phero__in{padding-block-start:16px}

  /* Fotoğraflı sürüm: tam genişlik şerit, altı yumuşak geçişli */
  .phero__stage--foto{
    max-width:none; margin:0 0 -4%; padding-top:calc(var(--nav-h) + 8px);
    height:clamp(250px,58vw,420px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
  .phero__stage--foto .phero__craft{height:100%; object-position:50% 46%}
}
@media (max-width:520px){
  .idx{margin-bottom:20px}
  .creds li{padding:20px 18px}
}