/* ===========================================================
   AKKAYNAK — Ahmet Tiryaki | Endüstriyel Kaynak & Boru Tesisatı
   Tema: koyu çelik + turuncu kaynak kıvılcımı
   =========================================================== */

:root{
  --bg:        #0E1116;
  --bg-2:      #12161D;
  --surface:   #171C24;
  --surface-2: #1E242E;
  --line:      #2A313D;
  --steel:     #3A4250;
  --text:      #EAEFF6;
  --muted:     #9BA6B5;
  --muted-2:   #6F7A8A;

  --spark:     #FF7A1A;          /* ana aksan - kaynak kıvılcımı */
  --spark-2:   #FFB020;          /* sıcak sarı */
  --spark-3:   #FF5A0F;
  --arc:       #38A8FF;          /* ark mavisi (ikincil) */

  --grad-spark: linear-gradient(135deg, var(--spark-2), var(--spark-3));
  --grad-text:  linear-gradient(135deg, #FFCD4D, #FF7A1A);

  --shadow:    0 18px 50px -20px rgba(0,0,0,.75);
  --radius:    16px;
  --radius-sm: 10px;

  --maxw: 1200px;
  --header-h: 76px;

  --font-head: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.08;
  letter-spacing:.5px;
  margin:0 0 .4em;
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding:96px 0; position:relative; }
.section--alt{ background:var(--bg-2); }

/* ---- weld-bead motif divider ---- */
.bead{
  height:3px; width:64px; border-radius:3px;
  background:var(--grad-spark);
  box-shadow:0 0 16px rgba(255,122,26,.55);
  margin-bottom:22px;
}
.bead--center{ margin-inline:auto; }

.eyebrow{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:.82rem;
  font-weight:500;
  color:var(--spark-2);
  margin:0 0 12px;
}
.section-head{ max-width:680px; margin-bottom:54px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,4vw,2.9rem); text-transform:uppercase; }
.section-head p{ color:var(--muted); font-size:1.05rem; margin:0; }

.text-spark{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =================== BUTTONS =================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px;
  font-family:var(--font-head); font-weight:500; letter-spacing:.6px;
  text-transform:uppercase; font-size:.92rem;
  border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{
  background:var(--grad-spark); color:#1a1206;
  box-shadow:0 10px 30px -10px rgba(255,122,26,.7);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 38px -10px rgba(255,122,26,.85); }
.btn--ghost{ border-color:var(--steel); color:var(--text); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--spark); color:#fff; transform:translateY(-3px); }
.btn--wa{ background:#25D366; color:#06310f; box-shadow:0 10px 30px -12px rgba(37,211,102,.7); }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 16px 38px -12px rgba(37,211,102,.85); }
.btn--block{ width:100%; justify-content:center; }

/* =================== HEADER =================== */
.header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100;
  display:flex; align-items:center;
  transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(14,17,22,.85);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.9);
}
.header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:42px; height:42px; }
.brand-name{ font-family:var(--font-head); font-weight:600; font-size:1.5rem; letter-spacing:2px; text-transform:uppercase; line-height:1; }
.brand-name small{ display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:2.5px; color:var(--muted-2); font-weight:500; margin-top:3px; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-family:var(--font-head); font-weight:400; letter-spacing:.6px; text-transform:uppercase; font-size:.95rem; color:var(--muted); position:relative; padding:4px 0; transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--grad-spark); transition:width .25s; }
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-phone{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-size:1.05rem; letter-spacing:.5px; color:var(--text); }
.header-phone svg{ width:18px; height:18px; color:var(--spark); }

.burger{ display:none; background:none; border:0; width:44px; height:44px; flex-direction:column; justify-content:center; gap:6px; }
.burger span{ display:block; height:2px; width:26px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .2s; }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =================== HERO =================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--header-h); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,17,22,.82) 0%, rgba(14,17,22,.62) 40%, rgba(14,17,22,.92) 100%),
    radial-gradient(70% 80% at 75% 30%, rgba(255,122,26,.16), transparent 60%);
}
.hero__inner{ position:relative; z-index:2; max-width:760px; padding:60px 0; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:3px;
  font-size:.85rem; color:var(--spark-2); margin-bottom:20px;
}
.hero__eyebrow::before{ content:""; width:34px; height:2px; background:var(--grad-spark); }
.hero h1{
  font-size:clamp(3.4rem,9vw,6.6rem); text-transform:uppercase; letter-spacing:4px;
  margin:0 0 6px; text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.hero__owner{ font-family:var(--font-head); font-size:clamp(1.1rem,2.4vw,1.5rem); letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.hero__lead{ font-size:1.18rem; color:#cdd5e0; max-width:600px; margin-bottom:34px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; }
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  color:var(--muted-2); font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll span{ width:1px; height:38px; background:linear-gradient(var(--spark), transparent); animation:scrolldot 2s infinite; }
@keyframes scrolldot{ 0%{opacity:.2; transform:scaleY(.4); transform-origin:top} 50%{opacity:1; transform:scaleY(1)} 100%{opacity:.2; transform:scaleY(.4); transform-origin:bottom} }

/* =================== STATS STRIP =================== */
.stats{
  position:relative; z-index:3; margin-top:-58px;
}
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.stat{ background:var(--surface); padding:30px 24px; text-align:center; }
.stat__num{ font-family:var(--font-head); font-size:2.6rem; font-weight:600; line-height:1; }
.stat__num .text-spark{ display:inline; }
.stat__label{ color:var(--muted); font-size:.86rem; letter-spacing:.5px; margin-top:8px; text-transform:uppercase; }

/* =================== SERVICES =================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; position:relative; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--grad-spark); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--steel); box-shadow:var(--shadow); }
.card:hover::before{ transform:scaleX(1); }
.card__icon{
  width:58px; height:58px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,122,26,.1); border:1px solid rgba(255,122,26,.25); margin-bottom:20px;
}
.card__icon svg{ width:30px; height:30px; color:var(--spark-2); }
.card h3{ font-size:1.3rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.card p{ color:var(--muted); margin:0; font-size:.97rem; }

/* =================== WHY US =================== */
.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.why__item{ text-align:left; }
.why__num{ font-family:var(--font-head); font-size:1rem; color:var(--spark-2); letter-spacing:2px; }
.why__item h3{ font-size:1.18rem; text-transform:uppercase; margin:10px 0 8px; }
.why__item p{ color:var(--muted); font-size:.95rem; margin:0; }
.why__item .bead{ width:40px; height:2px; margin-bottom:0; margin-top:14px; }

/* =================== ABOUT =================== */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about__media{ position:relative; }
.about__media img{ border-radius:var(--radius); width:100%; height:100%; object-fit:cover; box-shadow:var(--shadow); }
.about__media::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.about__badge{
  position:absolute; right:-18px; bottom:-18px; background:var(--grad-spark); color:#1a1206;
  font-family:var(--font-head); padding:18px 24px; border-radius:14px; text-align:center;
  box-shadow:0 18px 40px -16px rgba(255,122,26,.8);
}
.about__badge b{ display:block; font-size:2rem; line-height:1; }
.about__badge span{ font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; }
.about p{ color:var(--muted); }
.about__list{ list-style:none; padding:0; margin:24px 0 30px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.about__list li{ display:flex; align-items:center; gap:10px; color:var(--text); font-size:.97rem; }
.about__list svg{ width:20px; height:20px; color:var(--spark-2); flex:0 0 auto; }

/* =================== GALLERY (projelere göre gruplu) =================== */
.gallery{ display:flex; flex-direction:column; gap:48px; }
.project__head{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.project__head h3{ font-size:1.5rem; text-transform:uppercase; letter-spacing:.5px; margin:0; }
.project__tag{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--spark-2); background:rgba(255,122,26,.1); border:1px solid rgba(255,122,26,.25);
  padding:5px 12px; border-radius:999px;
}
.project__count{ margin-left:auto; font-size:.85rem; color:var(--muted-2); letter-spacing:.5px; }
.project__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.gallery__item{
  aspect-ratio:4/3; margin:0; border-radius:var(--radius-sm); overflow:hidden;
  position:relative; cursor:pointer; background:var(--surface); border:1px solid var(--line);
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s, filter .3s; filter:saturate(.92) brightness(.94); }
.gallery__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(14,17,22,.55));
  opacity:0; transition:opacity .3s;
}
.gallery__zoom{
  position:absolute; right:12px; bottom:12px; z-index:2; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--grad-spark); color:#1a1206;
  opacity:0; transform:scale(.7); transition:opacity .3s, transform .3s;
}
.gallery__zoom svg{ width:20px; height:20px; }
.gallery__item:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.gallery__item:hover::after{ opacity:1; }
.gallery__item:hover .gallery__zoom{ opacity:1; transform:scale(1); }
.gallery__more{ text-align:center; margin-top:36px; }

/* =================== LIGHTBOX =================== */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(8,10,14,.95);
  display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(6px);
}
.lb.open{ display:flex; }
.lb__img{ max-width:92vw; max-height:86vh; border-radius:10px; box-shadow:0 30px 80px -20px #000; }
.lb__btn{
  position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:#fff; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  transition:background .2s, transform .2s;
}
.lb__btn:hover{ background:var(--spark); color:#1a1206; transform:scale(1.06); }
.lb__btn svg{ width:24px; height:24px; }
.lb__close{ top:22px; right:22px; }
.lb__prev{ left:22px; top:50%; transform:translateY(-50%); }
.lb__next{ right:22px; top:50%; transform:translateY(-50%); }
.lb__prev:hover, .lb__next:hover{ transform:translateY(-50%) scale(1.06); }
.lb__count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--font-head); letter-spacing:2px; color:var(--muted); }

/* =================== CONTACT =================== */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact__info{ display:grid; gap:18px; align-content:start; }
.contact__row{
  display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .2s, transform .2s;
}
.contact__row:hover{ border-color:var(--steel); transform:translateX(4px); }
.contact__row .ic{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:rgba(255,122,26,.1); border:1px solid rgba(255,122,26,.25); }
.contact__row .ic svg{ width:22px; height:22px; color:var(--spark-2); }
.contact__row > span:last-child{ display:flex; flex-direction:column; gap:3px; }
.contact__row .lbl{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted-2); }
.contact__row .val{ display:block; font-family:var(--font-head); font-size:1.2rem; line-height:1.25; letter-spacing:.5px; color:var(--text); word-break:break-word; }

.form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.form h3{ font-size:1.4rem; text-transform:uppercase; margin-bottom:6px; }
.form > p{ color:var(--muted); font-size:.92rem; margin:0 0 22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; letter-spacing:.5px; color:var(--muted); margin-bottom:7px; text-transform:uppercase; }
.field input, .field textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  color:var(--text); padding:13px 15px; font-family:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--spark); box-shadow:0 0 0 3px rgba(255,122,26,.15); }
.field textarea{ resize:vertical; min-height:120px; }
.form small{ display:block; color:var(--muted-2); margin-top:12px; font-size:.82rem; text-align:center; }

/* =================== FOOTER =================== */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:60px 0 28px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer__brand p{ color:var(--muted); max-width:340px; margin:16px 0 0; font-size:.95rem; }
.footer h4{ font-size:1rem; text-transform:uppercase; letter-spacing:1px; color:var(--text); margin-bottom:18px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer ul a{ color:var(--muted); font-size:.95rem; transition:color .2s, padding .2s; }
.footer ul a:hover{ color:var(--spark-2); padding-left:5px; }
.footer__bottom{
  border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; color:var(--muted-2); font-size:.86rem; flex-wrap:wrap;
}
.footer__bottom a{ color:var(--muted); }
.footer__bottom a:hover{ color:var(--spark-2); }

/* =================== FLOATING WHATSAPP =================== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90; width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition:transform .2s; animation:wapulse 2.4s infinite;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:32px; height:32px; color:#fff; }
@keyframes wapulse{ 0%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7), 0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,0)} }

/* =================== REVEAL ANIM =================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.4s; }

/* =================== RESPONSIVE =================== */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .why{ grid-template-columns:repeat(2,1fr); }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav, .header-phone, .header-cta .btn--primary{ display:none; }
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:8px 24px 18px; transform:translateY(-120%); transition:transform .35s; box-shadow:var(--shadow);
  }
  .nav.open{ transform:none; display:flex; }
  .nav a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav a::after{ display:none; }
  .about{ grid-template-columns:1fr; gap:40px; }
  .about__media{ order:-1; }
  .contact{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .section{ padding:68px 0; }
  .cards, .why{ grid-template-columns:1fr; }
  .project__grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .about__list{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:30px; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
  .container{ padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}