/* =========================================================
   PRESTİJ PVC — Tek Sayfa Kurumsal Site
   1) Tokenlar  2) Temel  3) Yardımcı sınıflar  4) Header
   5) Hero  6) Neden Biz  7) Hizmetler  8) İletişim  9) Footer
   10) Yüzen butonlar  11) Animasyonlar  12) Responsive
   ========================================================= */

/* ---------- 1) TOKENLAR ---------------------------------- */
:root{
  /* Yüzeyler — logonun nötr-sıcak grileri (mavi kırılım yok) */
  --ground:#E9E8E6;
  --surface:#FFFFFF;
  --surface-2:#DFDDD8;
  --line:#D2D0CC;
  --line-soft:#DFDDD9;

  /* Metin — logonun kömür siyahı ve gümüşü */
  --ink:#141414;
  --ink-soft:#57565A;
  --ink-faint:#62605A;

  /* Yapısal koyu (logo zemini) */
  --brand:#1A1A1C;
  --brand-deep:#0B0B0C;
  --brand-text:#805816;    /* gri zeminde okunur altın */
  --brand-tint:#F2EBDD;    /* yumuşak altın dolgu        */

  /* Vurgu — logodaki antik altın (#B08848 ailesi) */
  --accent:#B0813C;
  --accent-hi:#CE9E4E;
  --accent-ink:#17130A;
  --accent-text:#805816;

  --ok:#0F7A57;
  --danger:#B23A2C;

  /* Ölçü ve gölge */
  --radius:14px;
  --shadow-1:0 1px 2px rgba(20,20,20,.06), 0 8px 24px -12px rgba(20,20,20,.16);
  --shadow-2:0 18px 44px -18px rgba(20,20,20,.30), 0 4px 12px rgba(20,20,20,.08);
  --maxw:1200px;
  --gutter:clamp(18px, 4vw, 40px);
  --sect-y:clamp(64px, 8vw, 116px);

  /* Tipografi */
  --font-display:"Archivo", "Segoe UI", Arial, sans-serif;
  --font-body:"IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Header ölçüleri */
  --header-h:96px;
  --logo:60px;        /* yatay logonun yüksekliği */

  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Not: Site tek temaya (beyaz) sabitlenmiştir; cihazın koyu tema
   ayarından etkilenmemesi için renk şeması burada kilitlenir. */
:root{ color-scheme:light; }

/* ---------- 2) TEMEL ------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;      /* Menü linkleri için yumuşak kayma */
  scroll-padding-top:calc(var(--header-h) + 16px);   /* Sabit header payı */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15.5px,.35vw + 15px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.3rem,5.4vw,4.15rem); }
h2{ font-size:clamp(1.85rem,3.4vw,2.85rem); }
h3{ font-size:clamp(1.12rem,1.4vw,1.3rem); letter-spacing:-.01em; }
p{ margin:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- 3) YARDIMCI SINIFLAR ------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sect-y); position:relative; }
.section--alt{ background:var(--surface-2); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

/* Mono etiket — teknik föy dili */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-text);
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 14px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); flex:none; }

.sect-head{ max-width:62ch; margin-bottom:clamp(34px,4vw,54px); }
.sect-head p{ color:var(--ink-soft); margin-top:14px; font-size:1.03rem; }
.lead{ color:var(--ink-soft); font-size:clamp(1rem,1.1vw,1.12rem); }

/* --- Butonlar --- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; border:2px solid transparent;
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  cursor:pointer; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn svg{ width:19px; height:19px; flex:none; }

/* Hover'da geçen parlama bandı */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.55) 45%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease);
}
.btn:hover::before{ transform:translateX(130%); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.985); }

.btn--accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 12px 26px -12px rgba(176,129,60,.8); }
.btn--accent:hover{ background:var(--accent-hi); box-shadow:0 20px 38px -14px rgba(176,129,60,.85); }

.btn--brand{ background:var(--brand); color:#fff; box-shadow:0 12px 26px -14px rgba(20,20,20,.8); }
.btn--brand:hover{ background:var(--brand-deep); box-shadow:0 20px 38px -16px rgba(20,20,20,.85); }

.btn--ghost{ background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-1); }
.btn--ghost:hover{ border-color:var(--brand-text); color:var(--brand-text); }

.btn--outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--outline:hover{ border-color:var(--brand-text); color:var(--brand-text); }

.btn--block{ width:100%; }
.btn--wa{ background:#25D366; color:#06351A; }
.btn--wa:hover{ background:#3CE67C; }

/* Dalga (ripple) efekti — JS ile eklenir */
.ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.45); z-index:-1;
  animation:ripple .62s ease-out forwards;
}
.btn--accent .ripple,.btn--wa .ripple{ background:rgba(30,20,0,.20); }
.btn--ghost .ripple,.btn--outline .ripple{ background:color-mix(in srgb, var(--brand-text) 22%, transparent); }
@keyframes ripple{ to{ transform:scale(2.8); opacity:0; } }

/* ---------- 4) HEADER ------------------------------------ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(20,20,20,.45);
}
.header-inner{ display:flex; align-items:center; gap:20px; min-height:var(--header-h); }

.brand{ display:flex; align-items:center; gap:14px; margin-right:auto; }
/* Yatay yazı-logosu: yükseklik sabit, genişlik orana göre */
.brand__mark{
  height:var(--logo); width:auto; flex:none;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(20,20,20,.22);
}
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:9px 14px; border-radius:999px;
  font-size:.93rem; font-weight:500; color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }
.nav a:hover,.nav a.is-active{ color:var(--brand-text); }

.header-cta .btn{ padding:12px 22px; font-size:.92rem; }

.nav-toggle{
  display:none; width:46px; height:46px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{
  display:block; width:19px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Okuma ilerleme çizgisi */
.progress{
  position:fixed; left:0; top:0; height:3px; width:0; z-index:95;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  transition:width .1s linear;
}

/* ---------- 5) HERO -------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(128px,15vh,186px) 0 clamp(70px,9vw,110px);
  background-color:var(--ground);
  background-image:
    radial-gradient(880px 520px at 84% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(760px 520px at 4% 92%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    linear-gradient(168deg, var(--surface) 0%, var(--ground) 52%, var(--surface-2) 100%);
  color:var(--ink);
}
/* Teknik çizim ızgarası */
.hero__grid-bg{
  position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 40%, #000 35%, transparent 100%);
  mask-image:radial-gradient(120% 92% at 50% 40%, #000 35%, transparent 100%);
}
/* Karartma overlay */
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 42%, color-mix(in srgb, var(--surface-2) 70%, transparent));
}

.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center; }
.hero .eyebrow{ color:var(--brand-text); }
.hero h1{ color:var(--ink); max-width:15ch; }
.hero h1 em{ font-style:normal; color:var(--accent-text); }
.hero__text{ color:var(--ink-soft); max-width:52ch; margin-top:22px; font-size:clamp(1rem,1.1vw,1.14rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero__stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.5vw,30px);
  margin-top:clamp(40px,5vw,62px); padding-top:26px; border-top:1px solid var(--line);
}
.stat__num{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2.05rem);
  color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;
}
.stat__label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:8px;
}

/* Hero teknik çizimi */
.hero__art{ position:relative; }
.hero__art svg{ width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(20,20,20,.20)); }
.dim-line{ stroke-dasharray:300; stroke-dashoffset:300; animation:draw 1.6s var(--ease) .45s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.glass-shine{ animation:shine 6s ease-in-out infinite; }
@keyframes shine{ 0%,100%{ opacity:.14; } 50%{ opacity:.42; } }

.hero__badge{
  position:absolute; right:-8px; bottom:6%;
  display:flex; align-items:center; gap:12px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  padding:13px 18px; box-shadow:var(--shadow-2);
  animation:float 5.5s ease-in-out infinite;
}
.hero__badge strong{ display:block; font-family:var(--font-display); font-size:.95rem;
  text-transform:none; letter-spacing:normal; }
.hero__badge span{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.pulse-dot{ width:10px; height:10px; border-radius:50%; background:var(--ok); position:relative; flex:none; }
.pulse-dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--ok); animation:pulse 2s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.4); opacity:0; } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Hizmet şeridi */
.strip{
  background:var(--surface-2); color:var(--ink-soft);
  border-block:1px solid var(--line);
  padding:14px 0; overflow:hidden;
}
.strip__track{ display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite; }
.strip__track span{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:44px; white-space:nowrap;
}
.strip__track span::after{ content:"\25C6"; color:var(--accent); font-size:.6rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 6) NEDEN BİZ --------------------------------- */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,70px); align-items:start; }
.about__body p + p{ margin-top:16px; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pillar{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow-1);
  transition:transform .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out;
}
.pillar:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-2);
  border-color:color-mix(in srgb, var(--brand-text) 40%, var(--line));
}
.pillar__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-text); margin-bottom:16px;
  transition:transform .35s ease-in-out, background-color .35s ease-in-out, color .35s ease-in-out;
}
.pillar:hover .pillar__icon{ transform:scale(1.14) rotate(-5deg); background:var(--accent); color:var(--accent-ink); }
.pillar__icon svg{ width:26px; height:26px; }
.pillar h3{ margin-bottom:8px; }
.pillar p{ color:var(--ink-soft); font-size:.95rem; }

.check-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-size:.97rem; }
.check-list svg{ width:20px; height:20px; flex:none; color:var(--ok); margin-top:3px; }

/* ---------- 7) HİZMETLER --------------------------------- */
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:22px; }
.service{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 28px; box-shadow:var(--shadow-1);
  transition:all .3s ease-in-out;
}
.service::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.service:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-2);
  border-color:color-mix(in srgb, var(--brand-text) 30%, var(--line));
}
.service:hover::after{ transform:scaleX(1); }
.service__icon{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-text); margin-bottom:20px;
  transition:transform .3s ease-in-out, background-color .3s ease-in-out, color .3s ease-in-out;
}
.service__icon svg{ width:28px; height:28px; }
.service:hover .service__icon{ transform:scale(1.15) translateY(-2px); background:var(--accent); color:var(--accent-ink); }
.service h3{ margin-bottom:10px; }
.service p{ color:var(--ink-soft); font-size:.95rem; }
.service__meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:22px; padding-top:16px; border-top:1px dashed var(--line);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.service__meta b{ color:var(--brand-text); font-weight:600; }

/* ---------- 10) İLETİŞİM --------------------------------- */
/* İki kolon eşit yükseklikte; buton blokları alta yaslanınca
   "Teklif İste" ile "WhatsApp’tan Yaz" aynı hizaya oturur. */
.contact{ display:grid; grid-template-columns:1fr .95fr; gap:clamp(30px,4vw,58px); align-items:stretch; }
.form{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-1);
}
.form > .btn{ margin-top:auto; }
.field{ display:grid; gap:8px; margin-bottom:16px; }
.field label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.field input,.field textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--ground);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-text); background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-text) 16%, transparent);
}
.field .err{ color:var(--danger); font-size:.8rem; min-height:1.1em; font-family:var(--font-mono); }
.field.is-invalid input,.field.is-invalid textarea{ border-color:var(--danger); }
.form__note{ font-size:.84rem; color:var(--ink-faint); margin-top:14px; text-align:center; }
.info-card .form__note{ color:var(--ink-faint); }
.form__ok{
  display:none; gap:12px; align-items:center; margin-top:16px; padding:14px 16px;
  border-radius:12px; font-size:.93rem; color:var(--ok);
  background:color-mix(in srgb, var(--ok) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 34%, transparent);
}
.form__ok.is-visible{ display:flex; animation:popIn .35s var(--ease); }
@keyframes popIn{ from{ transform:translateY(14px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.form__ok svg{ width:20px; height:20px; flex:none; }

.info-card{
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(26px,3vw,36px); box-shadow:var(--shadow-1);
}
.info-card::before{
  content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
}
.info-card h3{ color:var(--ink); margin-bottom:6px; }
.info-card > p{ color:var(--ink-soft); font-size:.95rem; }
.info-list{ list-style:none; padding:0; margin:26px 0 28px; display:grid; gap:18px; position:relative; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-list .ico{
  width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-text); border:1px solid var(--line);
  transition:background-color .3s ease-in-out, color .3s ease-in-out, transform .3s ease-in-out;
}
.info-list li:hover .ico{ background:var(--accent); color:var(--accent-ink); transform:scale(1.1); }
.info-list .ico svg{ width:20px; height:20px; }
.info-list b{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--ink); }
.info-list span{ color:var(--ink-soft); font-size:.9rem; }
.info-list a:hover{ color:var(--brand-text); }
.info-card .btn{ margin-top:auto; }

/* ---------- 11) FOOTER ----------------------------------- */
.site-footer{
  background:var(--surface-2); color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding:clamp(50px,6vw,74px) 0 0;
}
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,52px); }
.site-footer h4{ color:var(--ink); font-size:.98rem; margin-bottom:16px; }
.site-footer p{ font-size:.93rem; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand .brand__mark{ height:72px; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-links a{ font-size:.93rem; transition:color .25s var(--ease), padding-left .25s var(--ease); }
.footer-links a:hover{ color:var(--brand-text); padding-left:8px; }
.footer-bottom{
  margin-top:clamp(38px,5vw,56px); border-top:1px solid var(--line);
  padding:22px 0 26px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-faint);
}
.socials{ display:flex; gap:10px; }
.socials a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface);
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.socials a:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }

/* ---------- 12) YÜZEN BUTONLAR --------------------------- */
.floaters{ position:fixed; right:20px; bottom:22px; z-index:80; display:grid; gap:12px; justify-items:center; }
.fab{
  position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:none; cursor:pointer; box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), opacity .3s var(--ease);
}
.fab:hover{ transform:translateY(-4px) scale(1.06); }
.fab svg{ width:26px; height:26px; }
.fab--wa{ background:#25D366; color:#06351A; }
.fab--wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:pulse 2.4s ease-out infinite;
}
.fab--top{
  width:46px; height:46px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); opacity:0; pointer-events:none;
}
.fab--top.is-visible{ opacity:1; pointer-events:auto; }
.fab--top svg{ width:20px; height:20px; }

/* ---------- 13) ANİMASYONLAR ----------------------------- */
/* Scroll ile aşağıdan yukarı yumuşak beliriş (JS: IntersectionObserver) */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 14) RESPONSIVE ------------------------------- */
@media (max-width:1020px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__art{ max-width:540px; margin-inline:auto; }
  .about{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  :root{ --header-h:74px; --logo:44px; }

  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 24px; box-shadow:var(--shadow-2);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav-open .nav{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ padding:14px 4px; border-radius:0; border-bottom:1px solid var(--line-soft); }
  .nav a::after{ left:4px; right:auto; width:26px; bottom:8px; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }

  .pillars{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero__badge{ right:auto; left:0; bottom:-16px; }
}
@media (max-width:520px){
  .btn{ width:100%; }
  :root{ --logo:38px; }
  .hero__stats{ gap:18px; }
  .floaters{ right:14px; bottom:14px; }
}