/* ===================================================================
   ANADOLU LAZER ENDÜSTRİ
   Palet: kireç beyazı kâğıt + mürekkep + korten kızılı
   Tipografi: Instrument Sans (başlık) + Inter Tight (metin)
   =================================================================== */

:root{
  --paper:#F5F3EF; --sand:#EAE5DC; --ink:#17191B; --ink-2:#202427;
  --slate:#5C6166; --rule:#D3CCC2;
  --red:#E41824;      /* katalog logo kırmızısı — dolgu ve çizgiler */
  --red-ink:#B81620;  /* açık zeminde metin, kontrast için koyu */
  --red-dk:#9E121B;   /* hover */
  --f-disp:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body:"Barlow", system-ui, sans-serif;
  --wrap:1240px; --gut:clamp(20px,5vw,68px); --sec-y:clamp(84px,11vw,168px);
  --ease:cubic-bezier(.22,.7,.25,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body);
  font-size:16px; font-weight:400; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--red-ink); outline-offset:3px}
::selection{background:var(--red-ink); color:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-ink);color:var(--paper);padding:12px 20px;font-weight:600}
.skip:focus{left:0}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

.eyebrow{font-family:var(--f-disp); font-weight:600; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--red-ink)}
.h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(2.2rem,5vw,4rem); line-height:1.02; letter-spacing:-.005em; text-transform:uppercase}
.h3{font-family:var(--f-disp); font-weight:600; font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.08; letter-spacing:0}
.h2 em{font-style:normal; color:var(--red-ink)}
.nb{white-space:nowrap}
@media (max-width:520px){.nb{white-space:normal}}
.lead{font-size:clamp(1.05rem,1.6vw,1.24rem); line-height:1.6}
.p{color:var(--slate); line-height:1.75}
.p + .p{margin-top:16px}
.head{margin-bottom:clamp(44px,5.5vw,80px)}
.head .eyebrow{margin-bottom:18px; display:inline-flex; align-items:center; gap:14px}
.head .eyebrow::before{content:""; width:clamp(24px,3.5vw,48px); height:1px; background:var(--red-ink)}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 34px;
  font-family:var(--f-disp); font-weight:600; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--red-ink); color:var(--paper); border:1px solid var(--red-ink); cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease)}
.btn:hover{background:var(--red-dk); border-color:var(--red-dk)}
.btn--sm{min-height:42px; padding:0 22px; font-size:13.5px}
.btn--light{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn--light:hover{background:var(--red-ink); border-color:var(--red-ink); color:var(--paper)}
.lnk{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-disp); font-weight:600;
  font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--rule); padding-bottom:5px; transition:color .3s var(--ease), border-color .3s var(--ease)}
.lnk::after{content:"→"; transition:transform .3s var(--ease)}
.lnk:hover{color:var(--red-ink); border-color:var(--red-ink)}
.lnk:hover::after{transform:translateX(4px)}
.lnk--light{color:var(--paper); border-color:rgba(245,243,239,.4)}
.lnk--light:hover{color:var(--paper); border-color:var(--paper)}

/* ============ NAV ============ */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease)}
.nav__in{max-width:var(--wrap); margin-inline:auto; padding:15px var(--gut); display:flex; align-items:center; gap:clamp(20px,4vw,52px)}
.nav__brand{display:flex; align-items:center; gap:clamp(11px,1.3vw,16px); white-space:nowrap; color:var(--paper)}
.nav__mark{height:clamp(42px,4.6vw,52px); width:auto; display:block}
.nav__mark--d{display:none}
.nav.is-stuck .nav__mark--l{display:none}
.nav.is-stuck .nav__mark--d{display:block}
.nav__sep{width:1px; height:clamp(30px,3.4vw,38px); background:currentColor; opacity:.3}
.nav__txt{display:flex; flex-direction:column; justify-content:center}
.nav__txt strong{font-family:var(--f-disp); font-weight:700; font-size:clamp(19px,2.1vw,23px);
  letter-spacing:.035em; text-transform:uppercase; line-height:1}
.nav__txt span{display:block; font-family:var(--f-disp); font-weight:500; font-size:clamp(10px,1.1vw,11.5px); letter-spacing:.34em; text-transform:uppercase; color:var(--red); line-height:1; margin-top:6px}
.nav__links{display:flex; gap:clamp(18px,2.4vw,34px); margin-left:auto}
.nav__links a{position:relative; font-family:var(--f-disp); font-weight:600; font-size:16px; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,243,239,.78); padding:6px 0; transition:color .25s var(--ease)}
.nav__links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--red); transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{width:100%}
.nav__tog{display:none; width:44px; height:44px; margin-left:auto; background:none; border:1px solid rgba(245,243,239,.35);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.nav__tog span{display:block; width:18px; height:1.5px; background:var(--paper); transition:transform .3s var(--ease)}
.nav__tog[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.nav__tog[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.nav__mob{display:none; flex-direction:column; background:var(--ink); border-top:1px solid rgba(245,243,239,.16)}
.nav__mob a{font-family:var(--f-disp); font-weight:600; font-size:19px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); padding:17px var(--gut); border-bottom:1px solid rgba(245,243,239,.12)}
.nav__mob.is-open{display:flex}
/* menü sayfa gövdesine geçince koyu zeminden açık zemine döner */
.nav.is-stuck{background:rgba(245,243,239,.95); border-bottom-color:var(--rule); backdrop-filter:blur(10px)}
.nav.is-stuck .nav__brand{color:var(--ink)}
.nav.is-stuck .nav__txt span{color:var(--red-ink)}
.nav.is-stuck .nav__links a{color:var(--slate)}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}
.nav.is-stuck .nav__links a::after{background:var(--red-ink)}
.nav.is-stuck .nav__tog{border-color:var(--rule)}
.nav.is-stuck .nav__tog span{background:var(--ink)}

/* ============ HERO ============ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:stretch;
  background:var(--ink); overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  animation:slowIn 2.4s var(--ease) both}
.hero__veil{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(14,16,18,.94) 0%, rgba(14,16,18,.72) 26%, rgba(14,16,18,.28) 58%, rgba(14,16,18,.42) 100%),
    linear-gradient(to right, rgba(14,16,18,.66) 0%, rgba(14,16,18,.05) 62%)}
.hero__in{position:relative; z-index:2; flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding-top:clamp(96px,11vh,124px); padding-bottom:clamp(28px,3vw,44px); color:var(--paper)}
.hero__eyebrow{font-family:var(--f-disp); font-weight:600; font-size:13px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:16px}
.hero__eyebrow::before,.hero__eyebrow::after{content:""; width:clamp(20px,3vw,42px); height:1px; background:var(--red)}
.hero__h{font-family:var(--f-disp); font-weight:700; font-size:clamp(3.2rem,9.6vw,8rem);
  line-height:.94; letter-spacing:.005em; text-transform:uppercase; margin:24px 0 24px; max-width:15ch;
  clip-path:inset(0 100% 0 0)}
.hero__h.is-in{animation:wipe 1.1s var(--ease) .12s forwards}
.hero__p{max-width:56ch; font-size:clamp(1rem,1.45vw,1.16rem); line-height:1.72; color:rgba(245,243,239,.85); text-wrap:balance}
.hero__cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 26px; margin-top:38px}
.hero__bar{position:relative; z-index:2; border-top:1px solid rgba(245,243,239,.22); background:rgba(14,16,18,.55); backdrop-filter:blur(6px)}
.hero__bar-in{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(20px,2.4vw,32px) clamp(12px,1.6vw,24px); border-right:1px solid rgba(245,243,239,.18); color:var(--paper); text-align:center}
.stat:last-child{border-right:none}
.stat__v{display:block; font-family:var(--f-disp); font-weight:700; font-size:clamp(1.9rem,3.8vw,3rem); line-height:1; letter-spacing:.01em}
.stat__v em{font-style:normal; color:var(--red)}
.stat__l{display:block; margin-top:8px; font-family:var(--f-disp); font-size:13px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,243,239,.6)}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes slowIn{from{opacity:0; transform:scale(1.05)} to{opacity:1; transform:none}}

/* ============ BÖLÜM ============ */
.sec{padding-block:var(--sec-y)}
.sec--sand{background:var(--sand)}
.sec--dark{background:var(--ink); color:var(--paper)}
.sec--dark .p{color:#A3A8AC}
.sec--dark .h2 em, .sec--dark .eyebrow{color:var(--red)}
.sec--dark .head .eyebrow::before{background:var(--red)}

.area{margin-bottom:clamp(64px,8vw,124px)}
.area:last-child{margin-bottom:0}
.area__img{overflow:hidden}
.area__img img{width:100%; height:clamp(190px,27vw,360px); object-fit:cover; transition:transform 1.1s var(--ease)}
.area:hover .area__img img{transform:scale(1.03)}
.area__body{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(28px,5vw,80px);
  padding-top:clamp(26px,3.2vw,40px); align-items:start}
.idx{font-family:var(--f-disp); font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--red-ink); margin-bottom:14px}
.area__lead .h3{margin-bottom:18px}
.area__lead .p{max-width:58ch}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.tags li{font-size:12px; font-weight:500; color:var(--slate); border:1px solid var(--rule); padding:7px 13px}
.spec{border-top:1px solid var(--ink)}
.spec > div{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:14px 0; border-bottom:1px solid var(--rule)}
.spec dt{font-size:12px; font-weight:500; letter-spacing:.05em; color:var(--slate); text-transform:uppercase}
.spec dd{font-family:var(--f-disp); font-weight:600; font-size:1rem; letter-spacing:-.02em; text-align:right}


.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px); margin-bottom:clamp(52px,6vw,88px)}
.gal__i--w{grid-column:1 / -1}
.gal__i{overflow:hidden}
.gal__i img{width:100%; height:clamp(190px,26vw,400px); object-fit:cover; transition:transform 1.1s var(--ease)}
.gal__i--w img{height:clamp(230px,32vw,520px)}
.gal__i:hover img{transform:scale(1.035)}
.gal__i figcaption{padding-top:14px; font-family:var(--f-disp); font-weight:600; font-size:1.02rem; letter-spacing:-.02em}
.gal__i figcaption span{display:block; font-family:var(--f-body); font-weight:500; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:6px}

.plist{border-top:1px solid rgba(245,243,239,.24)}
.plist li{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px 24px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid rgba(245,243,239,.16); transition:padding-inline .4s var(--ease)}
.plist li:hover{padding-inline:10px}
.plist__n{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--red)}
.plist__t{font-family:var(--f-disp); font-weight:600; font-size:clamp(1rem,1.7vw,1.26rem); letter-spacing:-.025em}
.plist__k{font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#8B9095; text-align:right}

.rail{position:relative; height:34px; margin-bottom:-1px; display:none}
.rail__line{position:absolute; left:0; right:0; top:16px; height:1px; background:var(--rule)}
.rail__n{position:absolute; top:11px; width:11px; height:11px; border:1px solid var(--rule); border-radius:50%;
  background:var(--paper); transform:translateX(-50%)}
.rail__n:nth-child(2){left:16.66%} .rail__n:nth-child(3){left:50%} .rail__n:nth-child(4){left:83.33%}
.rail__n:nth-child(5){left:16.66%; top:auto; display:none} .rail__n:nth-child(6),.rail__n:nth-child(7){display:none}
.rail__n:nth-child(2){background:var(--red); border-color:var(--red)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.steps li{position:relative; background:var(--paper); padding:clamp(30px,3.4vw,46px); overflow:hidden;
  transition:background .4s var(--ease)}
.steps li::before{content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--red);
  transition:width .55s var(--ease)}
.steps li:hover::before{width:100%}
.steps li:hover{background:var(--sand)}
.steps__ghost{position:absolute; right:-.06em; bottom:-.34em; font-family:var(--f-disp); font-weight:700;
  font-size:clamp(6rem,11vw,9.5rem); line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px var(--rule); pointer-events:none;
  transition:-webkit-text-stroke-color .45s var(--ease), transform .6s var(--ease)}
.steps li:hover .steps__ghost{-webkit-text-stroke-color:rgba(228,24,36,.42); transform:translateY(-4px)}
.steps__n{position:relative; display:block; font-family:var(--f-disp); font-weight:600; font-size:14px;
  letter-spacing:.26em; color:var(--red-ink); margin-bottom:20px}
.steps h3{position:relative; font-family:var(--f-disp); font-weight:600; font-size:clamp(1.4rem,2.2vw,1.75rem);
  text-transform:uppercase; letter-spacing:.01em; margin-bottom:10px}
.steps p{position:relative; color:var(--slate); font-size:.97rem; line-height:1.7; max-width:32ch}

.about{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,5vw,88px); align-items:start}
.about__l .eyebrow{margin-bottom:18px; display:block}
.about__r .lead{margin-bottom:20px}
.vals{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.vals li{font-family:var(--f-disp); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:9px 16px}

/* ============ İLETİŞİM ============ */
.con{background:var(--ink); color:var(--paper); padding-block:var(--sec-y)}
.con__in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(40px,5vw,88px); align-items:start}
.con__h{font-family:var(--f-disp); font-weight:600; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-.04em; margin:18px 0 14px}
.con__p{color:#A3A8AC; max-width:46ch; margin-bottom:clamp(30px,3.6vw,44px)}
.con .eyebrow{color:var(--red)}

.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fld{display:block; margin-bottom:16px}
.fld span{display:block; font-family:var(--f-disp); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#8B9095; margin-bottom:8px}
.fld input,.fld select,.fld textarea{
  width:100%; background:transparent; color:var(--paper);
  border:1px solid rgba(245,243,239,.24); border-radius:0; padding:14px 16px;
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  transition:border-color .25s var(--ease), background .25s var(--ease)}
.fld textarea{resize:vertical; min-height:110px}
.fld select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8B9095 50%),linear-gradient(135deg,#8B9095 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.3em),calc(100% - 15px) calc(1.3em);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.fld select option{background:var(--ink); color:var(--paper)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(245,243,239,.44)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--red); background:rgba(245,243,239,.04)}
.fld input:invalid:not(:placeholder-shown){border-color:var(--red-ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form .btn{margin-top:10px}
.form__note{margin-top:14px; font-size:13px; color:var(--red); min-height:1.2em}
.form__note.ok{color:#8FB99A}

.con__form{min-width:0}
.con__side{position:sticky; top:96px}
.panel{border:1px solid rgba(245,243,239,.2)}
.panel__r{display:block; padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px); border-bottom:1px solid rgba(245,243,239,.14);
  transition:background .3s var(--ease)}
.panel__r:last-child{border-bottom:none}
.panel__k{display:block; font-family:var(--f-disp); font-size:13px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--red); margin-bottom:9px}
.panel__v{display:block; font-family:var(--f-disp); font-weight:600; font-size:clamp(1.25rem,2.1vw,1.6rem);
  letter-spacing:.01em; line-height:1.2}
.panel__a{display:block; font-style:normal; color:#A3A8AC; font-size:.95rem; line-height:1.7}
.panel__r--act:hover{background:rgba(228,24,36,.1)}

/* ============ FOOTER ============ */
.ft{background:var(--ink-2); color:var(--paper); border-top:1px solid rgba(245,243,239,.14)}
.ft__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:clamp(28px,4vw,56px); padding-block:clamp(52px,6vw,84px)}
.ft__logo{width:clamp(150px,17vw,196px); height:auto}
.ft__desc{margin-top:18px; color:#8B9095; font-size:.86rem; max-width:36ch; line-height:1.7}
.ft__c{display:flex; flex-direction:column; gap:10px}
.ft__c .eyebrow{color:var(--red); margin-bottom:6px}
.ft__c a,.ft__c span{font-size:.92rem; color:#A3A8AC; transition:color .25s var(--ease)}
.ft__c a:hover{color:var(--paper)}
.ft__base{display:flex; justify-content:space-between; gap:14px; padding-block:22px;
  border-top:1px solid rgba(245,243,239,.14); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8B9095}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ============ DUYARLI ============ */
@media (min-width:1081px){ .rail{display:block} }
@media (max-width:1080px){
  .con__side{position:static}
  .area__body{grid-template-columns:1fr; gap:30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .con__in{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__in .btn--sm{display:none}
  .nav__tog{display:flex}
  .gal{grid-template-columns:1fr}
  .plist li{grid-template-columns:48px 1fr}
  .plist__k{grid-column:2; text-align:left}
  .hero__bar-in{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(245,243,239,.18)}
}
@media (max-width:480px){ .nav__txt,.nav__sep{display:none} .nav__mark{height:44px} }
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr; gap:0}
  .ft__in{grid-template-columns:1fr}
  .ft__base{flex-direction:column; gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  .hero__h{clip-path:none}
}