/* ==========================================================================
   Başkent Lazer Kesim — baskentlazerkesim.com
   Tüm renkler ve ölçüler :root bloğunda tanımlıdır.
   ========================================================================== */

:root{
  --bg:        #0a0c0f;
  --bg-2:      #0f1216;
  --surface:   #151920;
  --surface-2: #1c212a;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.05);

  --txt:   #eceff4;
  --muted: #9aa4b2;
  --dim:   #6c7585;

  /* Logodaki lav renkleri */
  --lava-1: #ffe14a;
  --lava-2: #ff7a00;
  --lava-3: #e02b00;
  --lava-4: #8e1414;
  --grad-lava: linear-gradient(120deg, var(--lava-1) 0%, var(--lava-2) 45%, var(--lava-3) 100%);

  --radius:   16px;
  --radius-s: 10px;
  --shadow:   0 22px 55px rgba(0,0,0,.5);
  --ring:     0 0 0 3px rgba(255,122,0,.25);

  --w: 1220px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-head: "Barlow Condensed", "Oswald", "Segoe UI", Arial, sans-serif;

  --ease: cubic-bezier(.22,.8,.26,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }

body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); font-size:16px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--lava-2); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.08;
  letter-spacing:.5px; margin:0 0 .5em; text-transform:uppercase; }
h1{ font-size:clamp(2.3rem, 5.6vw, 4.4rem); }
h2{ font-size:clamp(1.9rem, 3.8vw, 3rem); }
h3{ font-size:1.22rem; text-transform:none; letter-spacing:0; font-family:var(--font); font-weight:700; }
p{ margin:0 0 1rem; color:var(--muted); }

.container{ width:min(100% - 2.5rem, var(--w)); margin-inline:auto; }
.grad{ background:var(--grad-lava); -webkit-background-clip:text; background-clip:text; color:transparent; }
.center{ text-align:center; }

/* ---------- Erişilebilirlik: içeriğe atla ---------- */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; padding:.8rem 1.3rem;
  background:var(--lava-2); color:#231000; font-weight:700; border-radius:0 0 10px 0; }
.skip:focus{ left:0; }

/* ---------- Sayfa kaydırma göstergesi ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:var(--grad-lava); box-shadow:0 0 14px rgba(255,122,0,.65);
  transition:width .08s linear;
}

/* ---------- Butonlar ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.88rem 1.7rem; border:1px solid transparent; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.3px; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
}
.btn:hover::after{ animation:shine .75s var(--ease); }
@keyframes shine{ to{ left:130%; } }

.btn-primary{ background:var(--grad-lava); color:#231000; box-shadow:0 12px 28px rgba(224,43,0,.32); }
.btn-primary:hover{ box-shadow:0 18px 38px rgba(224,43,0,.46); }
.btn-ghost{ border-color:var(--line); color:var(--txt); background:rgba(255,255,255,.04); }
.btn-ghost:hover{ border-color:var(--lava-2); color:var(--lava-1); }
.btn-lg{ padding:1.05rem 2.1rem; font-size:1.02rem; }
.btn svg{ width:17px; height:17px; fill:currentColor; }

/* ---------- Üst bar ---------- */
.topbar{ background:#07090b; border-bottom:1px solid var(--line-soft); font-size:.83rem; color:var(--muted); }
.topbar .container{ display:flex; gap:1.4rem; align-items:center; justify-content:space-between; min-height:42px; flex-wrap:wrap; }
.topbar-info{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.topbar-info span,.topbar-info a{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar-info a:hover{ color:var(--lava-1); }
.topbar-info svg{ width:14px; height:14px; fill:var(--lava-2); flex:none; }
.topbar-social{ display:flex; gap:.35rem; }
.topbar-social a{ width:27px; height:27px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; transition:.22s var(--ease); }
.topbar-social a:hover{ border-color:var(--lava-2); background:rgba(255,122,0,.14); transform:translateY(-2px); }
.topbar-social svg{ width:13px; height:13px; fill:var(--muted); }
.topbar-social a:hover svg{ fill:var(--lava-1); }

/* ---------- Navigasyon ---------- */
.nav{ position:sticky; top:0; z-index:70; background:rgba(10,12,15,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); transition:background .3s, box-shadow .3s; }
.nav.scrolled{ background:rgba(8,10,13,.97); box-shadow:0 10px 34px rgba(0,0,0,.55); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:84px; }

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand img{ width:58px; height:auto; flex:none;
  filter:drop-shadow(0 0 14px rgba(255,122,0,.35)); animation:emberGlow 4s ease-in-out infinite; }
@keyframes emberGlow{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(255,122,0,.28)); }
  50%    { filter:drop-shadow(0 0 20px rgba(255,122,0,.55)); }
}
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--font-head); font-weight:700; font-size:1.62rem; letter-spacing:1.5px;
  background:var(--grad-lava); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-sub{ font-size:.63rem; letter-spacing:4.4px; color:var(--dim); font-weight:600; margin-top:4px; }

.menu{ display:flex; align-items:center; gap:.2rem; list-style:none; margin:0; padding:0; }
.menu > li > a{ position:relative; display:block; padding:.62rem .95rem; border-radius:9px;
  font-size:.92rem; font-weight:600; color:var(--muted); transition:color .2s; }
.menu > li > a::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.3rem; height:2px;
  background:var(--grad-lava); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.menu > li > a:hover{ color:var(--txt); }
.menu > li > a:hover::after,
.menu > li > a.active::after{ transform:scaleX(1); }
.menu > li > a.active{ color:var(--lava-1); }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }

.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line);
  background:transparent; border-radius:11px; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--txt); margin:4px auto; transition:.28s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(4.5rem,10vw,8.5rem) 0 clamp(4rem,8vw,7rem); }
.hero-bg{ position:absolute; inset:-8% 0 0; z-index:-2; }
.hero-bg img{ width:100%; height:112%; object-fit:cover; opacity:.42;
  transform:scale(1.06); will-change:transform; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(10,12,15,.97) 18%, rgba(10,12,15,.72) 52%, rgba(10,12,15,.45) 100%),
    radial-gradient(900px 480px at 82% 8%, rgba(224,43,0,.32), transparent 62%),
    linear-gradient(180deg, rgba(10,12,15,.65), rgba(10,12,15,.98));
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
}
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; padding:.42rem 1rem;
  border:1px solid rgba(255,122,0,.38); border-radius:999px; background:rgba(255,122,0,.09);
  color:var(--lava-1); font-size:.76rem; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; margin-bottom:1.3rem; }
.eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--lava-2);
  box-shadow:0 0 0 0 rgba(255,122,0,.75); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(255,122,0,0);} 100%{ box-shadow:0 0 0 0 rgba(255,122,0,0);} }

.hero p.lead{ font-size:1.1rem; max-width:58ch; color:#c2cad6; }
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.9rem; }

.hero-stats{ display:flex; gap:2.6rem; margin-top:3.2rem; flex-wrap:wrap; }
.hero-stats .num{ font-family:var(--font-head); font-size:2.6rem; font-weight:700; line-height:1;
  background:var(--grad-lava); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats .lbl{ font-size:.79rem; color:var(--dim); letter-spacing:1.5px; text-transform:uppercase; margin-top:.35rem; }

/* Hero fotoğraf kolajı */
.hero-photo{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); aspect-ratio:4/3.4; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.hero-photo:hover img{ transform:scale(1.06); }
.hero-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(8,10,13,.85)); }
.hero-photo .cap{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:2;
  display:flex; align-items:center; gap:.8rem; }
.hero-photo .cap b{ font-family:var(--font-head); font-size:1.15rem; letter-spacing:1.2px; color:var(--lava-1); display:block; }
.hero-photo .cap span{ font-size:.82rem; color:#b9c2cf; }
.hero-photo .pill{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(255,122,0,.16); border:1px solid rgba(255,122,0,.35); }
.hero-photo .pill svg{ width:22px; height:22px; fill:var(--lava-1); }

/* Kaydırma oku */
.scroll-hint{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:2;
  display:grid; place-items:center; gap:.4rem; color:var(--dim); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; }
.scroll-hint svg{ width:18px; height:18px; fill:var(--lava-2); animation:bob 1.9s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(7px); opacity:1; } }

/* ---------- Kayan şerit ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line-soft); background:#07090b; padding:.9rem 0; }
.marquee-track{ display:flex; gap:3rem; width:max-content; animation:slide 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-head);
  font-size:1.05rem; letter-spacing:2px; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.marquee span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lava-3); }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Bölümler ---------- */
section{ padding:clamp(3.8rem,7.5vw,6.5rem) 0; }
.sec-head{ max-width:780px; margin-bottom:3rem; }
.sec-head.center{ margin-inline:auto; }
.sec-tag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:800;
  letter-spacing:3px; text-transform:uppercase; color:var(--lava-2); margin-bottom:.7rem; }
.sec-tag::before{ content:""; width:26px; height:2px; background:var(--grad-lava); }
.sec-head.center .sec-tag::before{ display:none; }
.sec-head p{ font-size:1.03rem; margin-bottom:0; }
.alt{ background:var(--bg-2); border-block:1px solid var(--line-soft); }

/* ---------- Izgaralar ---------- */
.grid{ display:grid; gap:1.4rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Kart ---------- */
.card{ position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.6rem;
  transition:transform .28s var(--ease), border-color .28s, box-shadow .28s; }
.card::before{ content:""; position:absolute; inset:0 auto auto 0; height:2px; width:0;
  background:var(--grad-lava); transition:width .45s var(--ease); }
.card:hover{ transform:translateY(-6px); border-color:rgba(255,122,0,.35); box-shadow:var(--shadow); }
.card:hover::before{ width:100%; }
.card h3{ margin-bottom:.5rem; }
.card p{ margin-bottom:0; font-size:.94rem; }
.card.center{ text-align:center; }

.ico{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,122,0,.12); border:1px solid rgba(255,122,0,.26); margin-bottom:1.1rem;
  transition:transform .35s var(--ease), background .3s; }
.card:hover .ico{ transform:rotate(-8deg) scale(1.08); background:rgba(255,122,0,.2); }
.ico svg{ width:26px; height:26px; fill:var(--lava-2); }

/* ---------- Fotoğraflı hizmet kartı ---------- */
.svc{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  display:flex; flex-direction:column; }
.svc:hover{ transform:translateY(-6px); border-color:rgba(255,122,0,.4); box-shadow:var(--shadow); }
.svc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.svc:hover .svc-media img{ transform:scale(1.09); }
.svc-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,15,.15), rgba(10,12,15,.9)); }
.svc-media .no{ position:absolute; left:1rem; top:1rem; z-index:2; font-family:var(--font-head);
  font-size:.86rem; letter-spacing:2px; color:var(--lava-1); background:rgba(8,10,13,.7);
  border:1px solid rgba(255,122,0,.35); padding:.2rem .6rem; border-radius:7px; }
.svc-body{ padding:1.5rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.svc-body p{ font-size:.94rem; flex:1; }
.card-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-size:.88rem; font-weight:700; color:var(--lava-1); }
.card-link svg{ width:14px; height:14px; fill:currentColor; transition:transform .25s var(--ease); }
.svc:hover .card-link svg,.card:hover .card-link svg{ transform:translateX(5px); }

/* ---------- Metin + görsel blok ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split.rev .split-media{ order:-1; }
.split-media{ position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:4/3; }
.split-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.split-media:hover img{ transform:scale(1.05); }
.split-media .tag{ position:absolute; right:1rem; bottom:1rem; z-index:2; background:rgba(8,10,13,.78);
  border:1px solid var(--line); padding:.55rem .9rem; border-radius:11px; font-size:.8rem; color:var(--muted);
  backdrop-filter:blur(8px); }
.split-media .tag b{ display:block; color:var(--lava-1); font-family:var(--font-head); font-size:1rem; letter-spacing:1px; }

/* ---------- Özellik listesi ---------- */
.check{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.78rem; }
.check li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--muted); font-size:.96rem; }
.check svg{ width:19px; height:19px; fill:var(--lava-2); flex:none; margin-top:4px; }

/* ---------- Tablo ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
table{ width:100%; border-collapse:collapse; min-width:560px; }
th,td{ padding:.98rem 1.2rem; text-align:left; border-bottom:1px solid var(--line-soft); font-size:.94rem; }
th{ background:var(--surface-2); color:var(--txt); font-weight:700; letter-spacing:.5px; font-size:.84rem; text-transform:uppercase; }
td{ color:var(--muted); }
tbody tr{ transition:background .2s; }
tbody tr:hover{ background:rgba(255,122,0,.05); }
tr:last-child td{ border-bottom:0; }
td strong{ color:var(--txt); }

/* ---------- Süreç zaman çizelgesi ---------- */
.steps{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
  list-style:none; margin:0; padding:30px 0 0;
}
/* adımları birbirine bağlayan lazer rayı (kartların arkasında, boşluklarda görünür) */
.steps::before{
  content:""; position:absolute; z-index:0; top:29px; left:12.5%; width:75%; height:2px;
  background:linear-gradient(90deg, var(--lava-3), var(--lava-2), var(--lava-1));
  border-radius:2px; opacity:.6;
}

.step{
  position:relative; z-index:1; text-align:center;
  padding:2.7rem 1.3rem 1.8rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.step:hover{ transform:translateY(-6px); border-color:rgba(255,122,0,.4); box-shadow:var(--shadow); }

.step-node{
  position:absolute; z-index:2; top:-30px; left:50%; transform:translateX(-50%);
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, #1e242e, #0b0e12);
  border:2px solid rgba(255,122,0,.45);
  box-shadow:0 0 0 6px var(--bg), 0 8px 20px rgba(0,0,0,.55);
  transition:border-color .3s, box-shadow .3s, transform .35s var(--ease);
}
.step:hover .step-node{
  border-color:var(--lava-1);
  box-shadow:0 0 0 6px var(--bg), 0 0 26px rgba(255,122,0,.5);
  transform:translateX(-50%) scale(1.07);
}
.step-node svg{ width:26px; height:26px; fill:var(--lava-2); transition:fill .3s; }
.step:hover .step-node svg{ fill:var(--lava-1); }

.step-lbl{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:2.6px;
  text-transform:uppercase; color:var(--lava-2); margin-bottom:.45rem;
}
.step h3{ font-size:1.06rem; margin-bottom:.4rem; }
.step p{ font-size:.9rem; margin:0; }

/* ---------- İstatistik kutusu ---------- */
.stat{
  position:relative; text-align:center; padding:2.1rem 1.3rem 1.9rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  transition:transform .28s var(--ease), border-color .28s, box-shadow .28s;
}
.stat:hover{ transform:translateY(-6px); border-color:rgba(255,122,0,.35); box-shadow:var(--shadow); }
.stat-lbl{
  display:block; font-size:.73rem; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--dim); margin-bottom:1rem;
}
.stat .num{
  display:block; font-family:var(--font-head); font-weight:700; line-height:1;
  font-size:clamp(2.4rem, 4vw, 3.3rem);
  background:var(--grad-lava); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat::after{
  content:""; display:block; width:44px; height:2px; margin:1.1rem auto 0;
  background:var(--grad-lava); border-radius:2px;
}
.js .stat::after{ width:0; transition:width .8s var(--ease) .35s; }
.js .stagger.in .stat::after{ width:44px; }

/* ---------- Galeri ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.shot{ position:relative; margin:0; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); cursor:zoom-in; background:var(--surface-2);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.shot:hover{ transform:translateY(-5px); border-color:rgba(255,122,0,.42); box-shadow:var(--shadow); }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.shot:hover img{ transform:scale(1.08); }
.shot figcaption{ position:absolute; inset:auto 0 0 0; padding:1.5rem .9rem .8rem; z-index:2;
  background:linear-gradient(180deg, transparent, rgba(8,10,13,.92));
  font-size:.86rem; color:#cdd5e0; font-weight:600;
  transform:translateY(6px); opacity:.85; transition:.3s var(--ease); }
.shot:hover figcaption{ transform:none; opacity:1; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; place-items:center;
  background:rgba(5,6,8,.93); backdrop-filter:blur(6px); padding:2rem; }
.lightbox.open{ display:grid; animation:fadeIn .25s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img{ max-width:min(1100px,92vw); max-height:82vh; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow); animation:zoomIn .3s var(--ease); }
@keyframes zoomIn{ from{ transform:scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
.lightbox .lb-cap{ margin-top:1rem; color:#cdd5e0; font-size:.92rem; text-align:center; }
.lightbox button{ position:absolute; background:rgba(255,255,255,.07); border:1px solid var(--line);
  color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.4rem; line-height:1;
  display:grid; place-items:center; transition:.2s; }
.lightbox button:hover{ background:rgba(255,122,0,.25); border-color:var(--lava-2); }
.lb-close{ top:1.4rem; right:1.4rem; }
.lb-prev{ left:1.4rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.4rem; top:50%; transform:translateY(-50%); }

/* ---------- SSS ---------- */
.faq{ display:grid; gap:.8rem; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  overflow:hidden; transition:border-color .25s; }
.faq details[open]{ border-color:rgba(255,122,0,.35); }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 3rem 1.15rem 1.4rem; position:relative;
  font-weight:700; font-size:1rem; color:var(--txt); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:1.4rem; top:50%; width:11px; height:11px;
  border-right:2px solid var(--lava-2); border-bottom:2px solid var(--lava-2);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq .faq-body{ padding:0 1.4rem 1.3rem; animation:slideDown .35s var(--ease); }
.faq .faq-body p{ margin:0; font-size:.95rem; }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; border-radius:22px; padding:clamp(2.3rem,4.6vw,3.8rem);
  background:radial-gradient(640px 320px at 88% 8%, rgba(224,43,0,.32), transparent 62%),
             linear-gradient(135deg,#171c24,#0c0f13);
  border:1px solid rgba(255,122,0,.26);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px); }
.cta > *{ position:relative; z-index:1; }
.cta h2{ margin-bottom:.4rem; }
.cta p{ margin:0; }

/* ---------- Form ---------- */
.form{ display:grid; gap:1rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.84rem; font-weight:600; color:var(--muted); letter-spacing:.3px; }
.field input,.field select,.field textarea{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:.88rem 1rem; color:var(--txt); font:inherit; font-size:.95rem; width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s; }
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--lava-2); box-shadow:var(--ring); background:#0c0f13; }
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.form-note{ font-size:.8rem; color:var(--dim); margin:0; }
.form-ok{ display:none; padding:.95rem 1.1rem; border-radius:var(--radius-s);
  background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.35); color:#7ee2a8; font-size:.92rem; }
.form-ok.show{ display:block; animation:slideDown .35s var(--ease); }

/* ---------- İletişim kartları ---------- */
.contact-card{ display:flex; gap:1rem; align-items:flex-start; padding:1.5rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); transition:transform .3s var(--ease), border-color .3s; }
.contact-card:hover{ transform:translateY(-5px); border-color:rgba(255,122,0,.35); }
.contact-card .ico{ margin:0; width:48px; height:48px; }
.contact-card h3{ font-size:1rem; margin-bottom:.25rem; }
.contact-card p,.contact-card a{ font-size:.93rem; color:var(--muted); margin:0; }
.contact-card a:hover{ color:var(--lava-1); }

.map{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; line-height:0; }
.map iframe{ width:100%; height:440px; border:0; filter:grayscale(.4) contrast(1.06) brightness(.92); }

/* ---------- Sayfa başlığı ---------- */
.page-head{ position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(3.4rem,6.5vw,5.4rem) 0 clamp(2.2rem,4vw,3.4rem);
  border-bottom:1px solid var(--line-soft); }
.page-head .ph-bg{ position:absolute; inset:0; z-index:-2; }
.page-head .ph-bg img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.page-head::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(10,12,15,.96) 20%, rgba(10,12,15,.7)),
             radial-gradient(700px 320px at 85% 0%, rgba(224,43,0,.28), transparent 60%); }
.crumb{ font-size:.85rem; color:var(--dim); margin-bottom:.8rem; }
.crumb a:hover{ color:var(--lava-1); }
.page-head h1{ margin-bottom:.4rem; }
.page-head p{ max-width:68ch; margin:0; color:#b8c1ce; }

/* ---------- Footer ---------- */
footer{ background:#07090b; border-top:1px solid var(--line); padding:3.8rem 0 0; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.35fr; gap:2.4rem; padding-bottom:2.6rem; }
.foot-grid h4{ font-size:.82rem; letter-spacing:2.6px; color:var(--txt); margin-bottom:1.1rem; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.foot-grid li a{ color:var(--muted); font-size:.92rem; transition:color .2s, padding-left .2s; }
.foot-grid li a:hover{ color:var(--lava-1); padding-left:5px; }
.foot-grid p{ font-size:.92rem; }
.foot-contact{ display:grid; gap:.85rem; }
.foot-contact div{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; color:var(--muted); }
.foot-contact svg{ width:16px; height:16px; fill:var(--lava-2); flex:none; margin-top:5px; }
.foot-contact a:hover{ color:var(--lava-1); }
.foot-bottom{ border-top:1px solid var(--line-soft); padding:1.35rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--dim); }
.foot-bottom a:hover{ color:var(--lava-1); }

/* ---------- Yüzen butonlar ---------- */
.floats{ position:fixed; right:18px; bottom:18px; z-index:80; display:grid; gap:.6rem; }
.float{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.45); transition:transform .25s var(--ease); position:relative; }
.float:hover{ transform:scale(1.08); }
.float svg{ width:28px; height:28px; fill:#fff; }
.float.wa{ background:#25d366; }
.float.wa::before{ content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:ring 2.4s infinite; }
@keyframes ring{ 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.float.tel{ background:var(--grad-lava); }
.float.tel svg{ fill:#231000; }

.to-top{ position:fixed; left:18px; bottom:18px; z-index:80; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line);
  opacity:0; pointer-events:none; transform:translateY(12px); transition:.3s var(--ease); cursor:pointer; }
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ border-color:var(--lava-2); background:rgba(255,122,0,.16); }
.to-top svg{ width:20px; height:20px; fill:var(--lava-1); }

/* ---------- Kıvılcım efekti (görsellerin üzerine gelince) ---------- */
#spark-field{ position:fixed; inset:0; pointer-events:none; z-index:95; overflow:hidden; }
#spark-field > *{ position:absolute; will-change:transform, opacity; }

.spark-head{
  width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, #ffe14a 35%, #ff7a00 62%, rgba(224,43,0,0) 74%);
  filter:drop-shadow(0 0 9px rgba(255,140,0,.95));
  animation:headPulse .5s ease-in-out infinite alternate;
}
@keyframes headPulse{ from{ transform:scale(.85); } to{ transform:scale(1.25); } }

.sp{
  width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%; background:var(--c);
  box-shadow:0 0 6px 1px rgba(255,122,0,.75);
  animation:sparkFly var(--dur) cubic-bezier(.12,.62,.32,1) forwards;
}
@keyframes sparkFly{
  0%  { transform:translate(0,0) scale(1); opacity:1; }
  65% { opacity:.95; }
  100%{ transform:translate(var(--dx), calc(var(--dy) + var(--g))) scale(.18); opacity:0; }
}

/* Kesim yapılan çerçevede sıcak parıltı */
.sparking{ border-color:rgba(255,122,0,.65) !important;
  box-shadow:0 0 0 1px rgba(255,122,0,.35), 0 0 34px rgba(224,43,0,.35), var(--shadow) !important; }

/* ==========================================================================
   İNCE LAZER DOKUNUŞLARI
   Hepsi dekoratiftir; JavaScript kapalıyken veya "hareketi azalt" açıkken
   içerik olduğu gibi okunur kalır.
   ========================================================================== */

/* Bölüm etiketindeki kısa çizgi, bölüm görününce soldan sağa "kesilerek" uzar */
.js .sec-tag::before{ transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease) .1s; }
.js .reveal.in .sec-tag::before,
.js .sec-head.in .sec-tag::before{ transform:scaleX(1); }

/* Bölüm başlığının altında ince kesim izi */
.sec-head h2::after{
  content:""; display:block; height:2px; width:64px; margin-top:.75rem;
  background:var(--grad-lava); border-radius:2px;
}
.sec-head.center h2::after{ margin-inline:auto; }
.js .sec-head h2::after{ width:0; transition:width .85s var(--ease) .2s; }
.js .sec-head.in h2::after{ width:64px; }

/* Sayfa başlığında aynı iz (açılışta çizilir) */
.page-head h1::after{
  content:""; display:block; height:2px; width:78px; margin-top:.8rem;
  background:var(--grad-lava); border-radius:2px;
}
.js .page-head h1::after{ width:0; animation:cutLine .9s var(--ease) .55s forwards; }
@keyframes cutLine{ to{ width:78px; } }

/* Hero istatistiklerinin altında kısa kesim izi */
.hero-stats > div::after{
  content:""; display:block; height:2px; width:26px; margin-top:.6rem;
  background:var(--grad-lava); border-radius:2px; opacity:.85;
}
.js .hero-stats > div::after{ width:0; animation:cutLineS 1s var(--ease) 1.2s forwards; }
@keyframes cutLineS{ to{ width:26px; } }

/* Süreç rayı, bölüm görününce soldan sağa çizilir */
.js .steps::before{ width:0; transition:width 1.6s var(--ease) .2s; }
.js .steps.in::before{ width:75%; }
@media (max-width:1024px){ .steps::before{ display:none; } }

/* Tablo satırında hover: sol kenarda sıcak kesim çizgisi */
tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--lava-2); }

/* SSS açılınca üst kenarda soldan sağa çizilen hat */
.faq details{ position:relative; }
.faq details::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--grad-lava); border-radius:2px;
  transition:width .5s var(--ease);
}
.faq details[open]::before{ width:100%; }

/* Odaklanan form alanının kenarını turlayan kesim ışığı */
.field{ position:relative; }
.ctrl{ position:relative; display:block; }
.ctrl > input,.ctrl > select,.ctrl > textarea{ display:block; }
.field-trace{
  position:absolute; left:1px; top:1px;
  width:calc(100% - 2px); height:calc(100% - 2px);
  overflow:visible; pointer-events:none;
  opacity:0; transition:opacity .25s var(--ease);
}
.ctrl:focus-within .field-trace{ opacity:1; }
.field-trace rect{ fill:none; stroke-linecap:round; stroke-dashoffset:0; }
.field-trace .iz{
  stroke:var(--lava-2); stroke-width:2; opacity:.38; stroke-dasharray:24 76;
  animation:traceRun 2.6s linear infinite .1s;
}
.field-trace .bas{
  stroke:var(--lava-1); stroke-width:2.4; stroke-dasharray:7 93;
  filter:drop-shadow(0 0 5px rgba(255,140,0,.95));
  animation:traceRun 2.6s linear infinite;
}
@keyframes traceRun{ to{ stroke-dashoffset:-100; } }

/* İletişim kartlarında ikon canlanması */
.contact-card:hover .ico{ transform:rotate(-8deg) scale(1.08); background:rgba(255,122,0,.2); }

/* Hero görselinin üzerinden yavaşça geçen tarama ışığı */
.hero-bg::after{
  content:""; position:absolute; left:0; right:0; top:-2%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,190,80,.5), transparent);
  filter:blur(1px); animation:scanBeam 11s linear infinite; pointer-events:none;
}
@keyframes scanBeam{
  0%  { top:-2%;  opacity:0; }
  8%  { opacity:1; }
  88% { opacity:1; }
  100%{ top:102%; opacity:0; }
}

/* CTA kutusunun kenarında dönen tek bir sıcak nokta */
@property --ang{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
.cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--ang),
    transparent 0 70%, rgba(224,43,0,.15) 76%, var(--lava-3) 84%, var(--lava-1) 89%, transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:angSpin 7s linear infinite; pointer-events:none; z-index:2;
}
@keyframes angSpin{ to{ --ang:360deg; } }

/* Footer üstünde ince lav şeridi */
footer{ position:relative; }
footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--lava-3), var(--lava-2), var(--lava-1), var(--lava-2), var(--lava-3), transparent);
  background-size:220% 100%; animation:emberDrift 9s linear infinite; opacity:.75;
}
@keyframes emberDrift{ to{ background-position:220% 0; } }

/* ---------- Animasyonlar ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.js .stagger > *{ opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(1){ transition-delay:.05s }
.stagger.in > *:nth-child(2){ transition-delay:.12s }
.stagger.in > *:nth-child(3){ transition-delay:.19s }
.stagger.in > *:nth-child(4){ transition-delay:.26s }
.stagger.in > *:nth-child(5){ transition-delay:.33s }
.stagger.in > *:nth-child(6){ transition-delay:.40s }
.stagger.in > *:nth-child(7){ transition-delay:.47s }
.stagger.in > *:nth-child(8){ transition-delay:.54s }
.stagger.in > *:nth-child(9){ transition-delay:.61s }
.stagger.in > *:nth-child(n+10){ transition-delay:.68s }

.js /* Lazerle kesilerek açılan kart ızgarası:
   kartın üzerinden aşağı inen sıcak bir çizgi, geçtiği yeri görünür bırakır. */
.scan-grid > *{ position:relative; }
.js .scan-grid > *{ clip-path:inset(0 0 100% 0); }
.js .scan-grid.in > *{ animation:scanCut .95s var(--ease) var(--d, 0s) forwards; }
.js .scan-grid.in > *::after{
  content:""; position:absolute; z-index:3; left:-2px; right:-2px; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--lava-1) 25%, var(--lava-2) 75%, transparent);
  box-shadow:0 0 16px 3px rgba(255,140,0,.75);
  pointer-events:none; opacity:0;
  animation:scanLine .95s var(--ease) var(--d, 0s) forwards;
}
.js .scan-grid > *:nth-child(1){ --d:.05s }
.js .scan-grid > *:nth-child(2){ --d:.17s }
.js .scan-grid > *:nth-child(3){ --d:.29s }
.js .scan-grid > *:nth-child(4){ --d:.41s }
.js .scan-grid > *:nth-child(5){ --d:.53s }
.js .scan-grid > *:nth-child(6){ --d:.65s }
.js .scan-grid > *:nth-child(n+7){ --d:.77s }

@keyframes scanCut{
  0%  { clip-path:inset(0 0 100% 0); }
  99% { clip-path:inset(0 0 0 0); }
  100%{ clip-path:none; }
}

/* Süreç adımlarında yuvarlak düğüm kartın üst kenarının dışında durur; kırpma
   alanı yukarı doğru genişletilir ki düğüm baştan görünsün ve kart onun
   altından kesilerek açılsın. */
.js .steps.scan-grid > *{ clip-path:inset(-42px 0 100% 0); }
.js .steps.scan-grid.in > *{ animation-name:scanCutSteps; }
@keyframes scanCutSteps{
  0%  { clip-path:inset(-42px 0 100% 0); }
  99% { clip-path:inset(-42px 0 0 0); }
  100%{ clip-path:none; }
}
@keyframes scanLine{
  0%  { top:0;    opacity:0; }
  12% { opacity:1; }
  88% { opacity:1; }
  100%{ top:100%; opacity:0; }
}

/* Açılış bittikten sonra: çok daha soluk bir tarama ışığı kartların üzerinden
   periyodik olarak geçmeye devam eder (yaklaşık 7 sn'de bir, sırayla). */
.js .scan-grid.cut-done > *::after{
  animation:emberPass 7s linear var(--d, 0s) infinite;
}
@keyframes emberPass{
  0%  { top:0;    opacity:0; }
  2%  { opacity:.45; }
  20% { opacity:.45; }
  24% { top:100%; opacity:0; }
  100%{ top:100%; opacity:0; }
}

.fade-up{ opacity:0; transform:translateY(24px); animation:fadeUp .9s var(--ease) forwards; }
.d1{ animation-delay:.05s } .d2{ animation-delay:.18s } .d3{ animation-delay:.31s }
.d4{ animation-delay:.44s } .d5{ animation-delay:.57s }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ---------- Duyarlı ---------- */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:3.8rem 1.4rem; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .hero-grid,.split{ grid-template-columns:1fr; }
  .split.rev .split-media{ order:0; }
  .hero-photo{ max-width:520px; aspect-ratio:16/10; }
}
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav .container{ flex-wrap:wrap; min-height:74px; }
  .menu{ display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:.15rem;
    padding:.6rem 0 1.1rem; border-top:1px solid var(--line); margin-top:.2rem; }
  .menu.open{ display:flex; animation:slideDown .3s var(--ease); }
  .menu > li > a::after{ display:none; }
  .nav-cta .btn{ display:none; }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .topbar-info span:nth-child(n+3),.topbar-info a:nth-child(n+3){ display:none; }
  .brand img{ width:48px; }
}
@media (max-width:560px){
  .grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:3.8rem; }
  .gallery{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.7rem; }
  .topbar-social{ display:none; }
  .floats{ right:12px; bottom:12px; }
  .float{ width:50px; height:50px; }
  .to-top{ left:12px; bottom:12px; }
  .lightbox button{ width:42px; height:42px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.stagger > *,.fade-up{ opacity:1 !important; transform:none !important; }
  .scan-grid > *{ clip-path:none !important; }
  .scan-grid > *::after{ display:none !important; }
  html{ scroll-behavior:auto; }
}