/* ==========================================================
   HAS MEDYA — Kurumsal Web Sitesi
   Renk Paleti 1: Lüks & Prestij
   ========================================================== */

:root{
  /* Palet 1 */
  --ink:      #0D1117;   /* en koyu zemin */
  --navy:     #111B2D;   /* lacivert */
  --gold:     #D4AF37;   /* altın */
  --silver:   #C0C0C0;   /* gümüş */
  --white:    #FFFFFF;

  --navy-2:   #16223a;
  --line:     rgba(212,175,55,.16);
  --line-2:   rgba(192,192,192,.12);
  --txt:      #E7EAF0;
  --txt-dim:  #9BA6B8;
  --wa:       #25D366;
  --wa-dark:  #17a34a;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --shadow:    0 18px 50px rgba(0,0,0,.45);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.35);

  --wrap: 1200px;
  --hdr-h: 76px;

  --f-head: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--txt);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.nav-open{ overflow:hidden; }

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-head); line-height:1.18; font-weight:700; letter-spacing:-.02em; }

::selection{ background:var(--gold); color:var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2a3550; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ---------- ikonlar ---------- */
.ic{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic--fill{ fill:currentColor; stroke:none; }

/* ---------- butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--f-head);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }

.btn--gold{
  background:linear-gradient(135deg,#EBC85A,var(--gold) 55%,#B8912A);
  color:#1a1405;
  box-shadow:0 8px 24px rgba(212,175,55,.24);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(212,175,55,.36); }

.btn--wa{
  background:linear-gradient(135deg,var(--wa),var(--wa-dark));
  color:#062e15;
  box-shadow:0 8px 24px rgba(37,211,102,.22);
}
.btn--wa:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(37,211,102,.34); }

.btn--ghost{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
  color:var(--txt);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

.btn--lg{ padding:15px 30px; font-size:1rem; }
.btn--block{ width:100%; }

/* ---------- topbar ---------- */
.topbar{
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.82rem;
  color:var(--txt-dim);
}
.topbar__in{
  display:flex; align-items:center; gap:22px;
  min-height:38px; flex-wrap:wrap;
}
.topbar__item{ display:inline-flex; align-items:center; gap:7px; }
.topbar__item .ic{ width:15px; height:15px; color:var(--gold); }
.topbar__cta{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--gold); font-weight:600;
  transition:opacity .2s;
}
.topbar__cta .ic{ width:15px; height:15px; }
.topbar__cta:hover{ opacity:.75; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:900;
  background:rgba(13,17,23,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .3s ease, background .3s ease;
}
.hdr.is-stuck{ background:rgba(13,17,23,.95); box-shadow:0 10px 34px rgba(0,0,0,.5); }

.hdr__in{
  display:flex; align-items:center; gap:18px;
  min-height:var(--hdr-h);
}

.brand{ display:flex; align-items:center; flex:none; }
.brand__img{
  height:46px; width:auto;
  border-radius:8px;
  transition:transform .3s ease;
}
.brand:hover .brand__img{ transform:scale(1.04); }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav__a{
  position:relative;
  padding:9px 13px;
  font-family:var(--f-head);
  font-size:.94rem; font-weight:500;
  color:var(--txt-dim);
  border-radius:8px;
  transition:color .2s ease;
}
.nav__a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px;
  height:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav__a:hover, .nav__a.is-active{ color:var(--white); }
.nav__a:hover::after, .nav__a.is-active::after{ transform:scaleX(1); }
.nav__btn{ display:none; }

.hdr__wa{ flex:none; padding:10px 18px; }

.burger{
  display:none;
  width:44px; height:44px;
  background:transparent; border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  flex:none;
}
.burger span{
  display:block; width:20px; height:2px;
  background:var(--gold); border-radius:2px;
  transition:transform .3s ease, opacity .2s ease;
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-mask{
  display:none;
  position:fixed; inset:0; z-index:850;
  background:rgba(5,8,13,.65);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s ease;
}
.menu-mask.is-on{ display:block; opacity:1; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(52px,8vw,104px) 0 0;
  overflow:hidden;
  background:
    radial-gradient(1000px 520px at 78% 8%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 78%);
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* ---------- süzülen ışık huzmeleri (canvas) ---------- */
.aurora{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  pointer-events:none;
  filter:blur(16px) saturate(112%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 1.6s ease;
  will-change:opacity;
}
.aurora.is-on{ opacity:.95; }
.aurora--soft.is-on{ opacity:.6; }
.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(192,192,192,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,192,192,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 62% at 50% 38%, #000 20%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 85% 62% at 50% 38%, #000 20%, transparent 72%);
}

.hero__in{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:52px; align-items:center;
  padding-bottom:clamp(48px,7vw,88px);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px;
  border:1px solid var(--line);
  border-radius:100px;
  background:rgba(212,175,55,.06);
  font-family:var(--f-head);
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}
.eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.18); }

.hero__title{
  font-size:clamp(2.1rem,5.4vw,3.9rem);
  font-weight:800;
  color:var(--white);
  margin-bottom:22px;
}
.grad{
  background:linear-gradient(100deg,#F3D778,var(--gold) 45%,#A8842A);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__desc{
  font-size:clamp(1rem,1.6vw,1.13rem);
  color:var(--txt-dim);
  max-width:56ch;
  margin-bottom:32px;
}
.hero__desc strong{ color:var(--white); font-weight:600; }

.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }

.hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding-top:28px;
  border-top:1px solid var(--line-2);
  max-width:520px;
}
.stat b{
  display:block;
  font-family:var(--f-head);
  font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:800;
  color:var(--gold); line-height:1.1;
}
.stat span{ font-size:.85rem; color:var(--txt-dim); }

/* hero görsel */
.hero__visual{ display:flex; justify-content:center; }
.logo-stage{
  position:relative;
  width:100%; max-width:470px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow:var(--shadow);
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.logo-stage__glow{
  position:absolute; inset:-40px;
  background:radial-gradient(circle at 50% 50%, rgba(212,175,55,.22), transparent 65%);
  filter:blur(24px); z-index:-1;
}
.logo-stage__img{
  width:100%; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.06);
}

.float-card{
  position:absolute;
  display:flex; align-items:center; gap:11px;
  padding:11px 15px;
  background:rgba(17,27,45,.92);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);
}
.float-card .ic{ color:var(--gold); width:22px; height:22px; }
.float-card b{ display:block; font-family:var(--f-head); font-size:.86rem; color:var(--white); line-height:1.3; }
.float-card span{ font-size:.72rem; color:var(--txt-dim); }
.float-card--1{ top:8%; left:-34px; animation:floaty 6s ease-in-out infinite .4s; }
.float-card--2{ bottom:9%; right:-30px; animation:floaty 6.5s ease-in-out infinite 1s; }

/* marquee */
.marquee{
  position:relative;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.015);
  overflow:hidden;
  padding:14px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  animation:slide 42s linear infinite;
}
.marquee__track span{
  font-family:var(--f-head); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; color:var(--txt-dim); white-space:nowrap;
}
.marquee__track i{ color:var(--gold); font-size:.6rem; font-style:normal; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- bölüm ortak ---------- */
.sec{ padding:clamp(64px,9vw,110px) 0; position:relative; }
.sec--alt{
  background:
    radial-gradient(700px 340px at 12% 0%, rgba(212,175,55,.05), transparent 60%),
    var(--navy);
  border-block:1px solid rgba(255,255,255,.05);
}
.sec__head{ max-width:760px; margin:0 auto clamp(38px,5vw,58px); text-align:center; }
.sec__title{
  font-size:clamp(1.7rem,4vw,2.7rem);
  color:var(--white);
  margin-bottom:16px;
}
.sec__sub{ color:var(--txt-dim); font-size:1.02rem; }

/* ---------- hakkımızda ---------- */
.about{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.about__frame{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    radial-gradient(circle at 50% 45%, rgba(212,175,55,.09), transparent 62%),
    linear-gradient(155deg, var(--navy), var(--ink));
  overflow:hidden;
  box-shadow:var(--shadow);
  display:grid; place-items:center;
}
.about__art{ position:absolute; inset:0; display:grid; place-items:center; }
.art-svg{ width:92%; height:92%; animation:spinSlow 46s linear infinite; }
@keyframes spinSlow{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

.about__badge{
  position:relative; z-index:2;
  text-align:center;
  padding:22px 34px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(13,17,23,.72);
  backdrop-filter:blur(6px);
}
.about__badge b{
  display:block; font-family:var(--f-head); font-weight:800;
  font-size:clamp(2rem,5vw,2.8rem); letter-spacing:.06em;
  background:linear-gradient(135deg,#fff,var(--silver));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1;
}
.about__badge span{
  display:block; font-family:var(--f-head); font-weight:600;
  letter-spacing:.4em; font-size:.8rem; color:var(--gold); margin-top:6px; padding-left:.4em;
}

.about__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; justify-content:center; }
.chip{
  padding:7px 14px;
  border:1px solid var(--line-2); border-radius:100px;
  font-size:.8rem; color:var(--txt-dim);
  background:rgba(255,255,255,.02);
}

.about__text p{ color:var(--txt-dim); margin-bottom:16px; }
.about__text strong{ color:var(--white); font-weight:600; }
.about__text .sec__title{ text-align:left; margin-bottom:20px; }

.about__vals{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  margin:26px 0 30px;
}
.val{ display:flex; gap:13px; align-items:flex-start; }
.val__ic{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(212,175,55,.07); color:var(--gold);
}
.val b{ display:block; font-family:var(--f-head); color:var(--white); font-size:.98rem; margin-bottom:2px; }
.val p{ font-size:.87rem; color:var(--txt-dim); margin:0; line-height:1.55; }

/* ---------- hizmet kartları ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}
.card{
  position:relative;
  padding:28px 24px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 180px at 50% -10%, rgba(212,175,55,.16), transparent 70%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:var(--shadow-sm); }
.card:hover::before{ opacity:1; }

.card__ic{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(212,175,55,.16), rgba(212,175,55,.03));
  color:var(--gold);
  margin-bottom:18px;
  transition:transform .3s ease;
}
.card__ic .ic{ width:24px; height:24px; }
.card:hover .card__ic{ transform:scale(1.08) rotate(-4deg); }

.card h3{
  font-size:1.12rem; color:var(--white); margin-bottom:9px;
  position:relative; z-index:1;
}
.card p{ font-size:.92rem; color:var(--txt-dim); position:relative; z-index:1; }

.card--cta{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px;
  background:linear-gradient(150deg, rgba(212,175,55,.15), rgba(212,175,55,.03));
  border-color:var(--line);
}
.card--cta h3{ font-size:1.2rem; }
.card--cta .btn{ margin-top:4px; }

/* ---------- kart görselleri (ikon yerine) ---------- */
.card__img, .prod__img, .val__img{
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  margin-bottom:18px;
}
.card__img img, .prod__img img, .val__img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.card__img{ width:100%; aspect-ratio:16/10; }
.prod__img{ width:100%; aspect-ratio:16/10; }
.val__img{ width:42px; height:42px; flex:none; border-radius:12px; margin-bottom:0; }

.card:hover .card__img img, .prod__item:hover .prod__img img{ transform:scale(1.04); }
.card__img img, .prod__img img{ transition:transform .45s ease; }

.sec--light .card__img, .sec--light .prod__img, .sec--light .val__img{
  border-color:rgba(17,27,45,.12);
  background:rgba(17,27,45,.03);
}

/* ---------- prodüksiyon ---------- */
.prod{
  background:
    radial-gradient(760px 420px at 85% 10%, rgba(212,175,55,.07), transparent 62%),
    var(--ink);
}
.prod__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.prod__item{
  padding:30px 26px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.prod__item:hover{ transform:translateY(-5px); border-color:var(--line); }
.prod__item--big{
  grid-column:span 2;
  background:linear-gradient(140deg, rgba(212,175,55,.14), rgba(255,255,255,.015));
  border-color:var(--line);
}
.prod__ic{
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(212,175,55,.08);
  color:var(--gold); margin-bottom:16px;
}
.prod__ic .ic{ width:26px; height:26px; }
.prod__item h3{ font-size:1.14rem; color:var(--white); margin-bottom:8px; }
.prod__item p{ font-size:.92rem; color:var(--txt-dim); }

/* ---------- süreç ---------- */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.step{
  position:relative;
  padding:30px 24px 26px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);
  background:rgba(13,17,23,.5);
  transition:transform .3s ease, border-color .3s ease;
}
.step:hover{ transform:translateY(-5px); border-color:var(--line); }
.step__n{
  display:inline-block;
  font-family:var(--f-head); font-size:2.4rem; font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--gold),rgba(212,175,55,.25));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:12px;
}
.step h3{ font-size:1.08rem; color:var(--white); margin-bottom:8px; }
.step p{ font-size:.9rem; color:var(--txt-dim); }

/* ---------- cta bant ---------- */
.band{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,6vw,72px) 0;
  background:
    radial-gradient(600px 300px at 20% 50%, rgba(212,175,55,.14), transparent 65%),
    linear-gradient(120deg, var(--navy-2), var(--ink));
  border-block:1px solid var(--line);
}
.band__bg{ position:absolute; inset:0; pointer-events:none; }
.band__in{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.band h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); color:var(--white); margin-bottom:8px; }
.band p{ color:var(--txt-dim); }
.band__btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- iletişim ---------- */
.contact{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(22px,3.5vw,40px); align-items:start;
}
.contact__info{ display:grid; gap:14px; }

.info{
  display:flex; gap:15px; align-items:flex-start;
  padding:20px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
a.info:hover{ transform:translateY(-3px); border-color:var(--line); background:rgba(212,175,55,.06); }
.info--static{ cursor:default; }
.info__ic{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(212,175,55,.08);
  color:var(--gold);
}
.info__ic--wa{
  border-color:rgba(37,211,102,.35);
  background:rgba(37,211,102,.12);
  color:var(--wa);
}
.info__txt b{ display:block; font-family:var(--f-head); color:var(--white); font-size:1.02rem; margin-bottom:3px; }
.info__txt span{ display:block; color:var(--txt-dim); font-size:.92rem; line-height:1.6; }
.info__txt em{
  display:inline-block; margin-top:7px;
  font-style:normal; font-size:.82rem; font-weight:600;
  color:var(--gold);
}
.info__ic--wa ~ .info__txt em{ color:var(--wa); }

/* form */
.contact__form{
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow:var(--shadow-sm);
}
.contact__form h3{ font-size:1.35rem; color:var(--white); margin-bottom:6px; }
.form__note{ font-size:.88rem; color:var(--txt-dim); margin-bottom:20px; }
.form__note strong{ color:var(--gold); }

#waForm{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f--full{ grid-column:1 / -1; }
.f label{ font-size:.83rem; font-weight:500; color:var(--txt-dim); font-family:var(--f-head); }

.f input, .f select, .f textarea{
  width:100%;
  padding:12px 14px;
  background:rgba(13,17,23,.65);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
  font-size:.95rem;
  color:var(--white);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance:none; appearance:none;
}
.f textarea{ resize:vertical; min-height:96px; font-family:var(--f-body); }
.f select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:38px; cursor:pointer;
}
.f select option{ background:var(--navy); color:var(--white); }
.f input::placeholder, .f textarea::placeholder{ color:#5f6b7f; }
.f input:focus, .f select:focus, .f textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.16);
  background:rgba(13,17,23,.9);
}
.f input.err, .f select.err, .f textarea.err{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.14); }

.form__err{ margin-top:10px; font-size:.85rem; color:#ff8585; min-height:1em; text-align:center; }
.form__err.ok{ color:var(--wa); }

/* ---------- footer ---------- */
.ftr{
  background:var(--navy);
  border-top:1px solid var(--line);
  padding-top:clamp(44px,6vw,64px);
}
.ftr__in{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:34px;
  padding-bottom:36px;
}
.ftr__logo{ height:56px; width:auto; border-radius:8px; margin-bottom:16px; }
.ftr__col--brand p{ color:var(--txt-dim); font-size:.9rem; max-width:38ch; }
.ftr__col h4{
  font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.ftr__col a{
  display:block;
  color:var(--txt-dim); font-size:.91rem;
  padding:5px 0;
  transition:color .2s ease, transform .2s ease;
}
.ftr__col a:hover{ color:var(--gold); transform:translateX(3px); }

.ftr__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding-block:20px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.84rem; color:var(--txt-dim);
}
.ftr__made{ color:var(--gold); font-family:var(--f-head); letter-spacing:.05em; }

/* ---------- sabit whatsapp ---------- */
.fab{
  position:fixed;
  right:18px; bottom:18px;
  z-index:940;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--wa),var(--wa-dark));
  color:#052e15;
  font-family:var(--f-head); font-weight:700; font-size:.94rem;
  box-shadow:0 12px 32px rgba(37,211,102,.36);
  transition:transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.fab .ic{ width:26px; height:26px; }
.fab::after{
  content:""; position:absolute; inset:0; border-radius:100px;
  border:2px solid rgba(37,211,102,.55);
  animation:pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.18); opacity:0; }
  100%{ opacity:0; }
}
.fab:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 16px 40px rgba(37,211,102,.48); }

/* ---------- görünüm animasyonu ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================
   AÇIK BÖLÜMLER (Palet 1 — beyaz & gümüş tonları)
   Header, hero, CTA bandı ve footer koyu kalır (logo zemini),
   aradaki bölümler beyaz/gümüş zemine döner.
   ========================================================== */

.sec--light{
  /* bu bölüm içindeki tüm renk değişkenleri açık temaya döner */
  --txt:      #1B2333;
  --txt-dim:  #56607A;
  --gold:     #8F7015;              /* açık zeminde okunur altın tonu */
  --line:     rgba(17,27,45,.14);
  --line-2:   rgba(17,27,45,.09);

  background:#FFFFFF;
  color:var(--txt);
  border-block:1px solid rgba(17,27,45,.07);
}

.sec--light.sec--alt{
  background:
    radial-gradient(760px 360px at 12% 0%, rgba(212,175,55,.12), transparent 62%),
    #F2F4F7;
  border-block:1px solid rgba(17,27,45,.07);
}

.sec--light.prod{
  background:
    radial-gradient(780px 420px at 86% 8%, rgba(212,175,55,.10), transparent 62%),
    #FFFFFF;
}

/* başlıklar ve vurgular */
.sec--light .sec__title,
.sec--light .card h3,
.sec--light .prod__item h3,
.sec--light .step h3,
.sec--light .contact__form h3,
.sec--light .val b,
.sec--light .info__txt b,
.sec--light .about__text strong{ color:#0D1117; }

/* etiket rozeti */
.sec--light .eyebrow{
  background:rgba(212,175,55,.15);
  border-color:rgba(212,175,55,.45);
  color:#795D10;
}
.sec--light .eyebrow i{ box-shadow:0 0 0 4px rgba(212,175,55,.16); }

/* beyaz kartlar */
.sec--light .card,
.sec--light .prod__item,
.sec--light .step,
.sec--light .info,
.sec--light .contact__form{
  background:#FFFFFF;
  border-color:rgba(17,27,45,.10);
  box-shadow:0 1px 2px rgba(13,17,23,.04), 0 12px 30px rgba(13,17,23,.06);
}

.sec--light .card:hover,
.sec--light .prod__item:hover,
.sec--light .step:hover,
.sec--light a.info:hover{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 14px 34px rgba(13,17,23,.12);
}
.sec--light a.info:hover{ background:rgba(212,175,55,.07); }

.sec--light .card::before{
  background:radial-gradient(420px 180px at 50% -10%, rgba(212,175,55,.22), transparent 70%);
}

/* altın vurgulu kartlar */
.sec--light .card--cta{
  background:linear-gradient(150deg, rgba(212,175,55,.24), rgba(212,175,55,.07));
  border-color:rgba(212,175,55,.5);
}
.sec--light .prod__item--big{
  background:linear-gradient(140deg, rgba(212,175,55,.22), rgba(255,255,255,.85));
  border-color:rgba(212,175,55,.45);
}

/* ikon kutuları */
.sec--light .card__ic,
.sec--light .prod__ic,
.sec--light .val__ic,
.sec--light .info__ic{
  border-color:rgba(212,175,55,.45);
  background:rgba(212,175,55,.13);
}
.sec--light .card__ic{
  background:linear-gradient(150deg, rgba(212,175,55,.22), rgba(212,175,55,.07));
}
.sec--light .info__ic--wa{
  border-color:rgba(37,211,102,.45);
  background:rgba(37,211,102,.14);
  color:#0F8A3C;
}
.sec--light .info__ic--wa ~ .info__txt em{ color:#0B7431; }

/* adım numaraları */
.sec--light .step__n{
  background:linear-gradient(135deg,#C09B2B,#8F7015);
  -webkit-background-clip:text; background-clip:text;
}

/* etiketler */
.sec--light .chip{
  background:rgba(17,27,45,.04);
  border-color:rgba(17,27,45,.12);
}

/* hakkımızda görseli koyu kalır, çerçevesi yumuşatılır */
.sec--light .about__frame{
  border-color:rgba(17,27,45,.12);
  box-shadow:0 18px 44px rgba(13,17,23,.20);
}
.sec--light .about__badge{ border-color:rgba(212,175,55,.35); }

/* form alanları */
.sec--light .f input,
.sec--light .f select,
.sec--light .f textarea{
  background:#F7F8FA;
  border-color:rgba(17,27,45,.14);
  color:#0D1117;
}
.sec--light .f input::placeholder,
.sec--light .f textarea::placeholder{ color:#8A93A6; }
.sec--light .f input:focus,
.sec--light .f select:focus,
.sec--light .f textarea:focus{
  background:#FFFFFF;
  border-color:#B8912A;
  box-shadow:0 0 0 3px rgba(212,175,55,.22);
}
.sec--light .f select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F7015' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.sec--light .f select option{ background:#FFFFFF; color:#0D1117; }
.sec--light .f input.err,
.sec--light .f select.err,
.sec--light .f textarea.err{ border-color:#D93636; box-shadow:0 0 0 3px rgba(217,54,54,.14); }
.sec--light .form__err{ color:#C92A2A; }
.sec--light .form__err.ok{ color:#0F8A3C; }

/* açık zeminde hayalet buton */
.sec--light .btn--ghost{
  background:rgba(17,27,45,.03);
  border-color:rgba(17,27,45,.16);
  color:#1B2333;
}
.sec--light .btn--ghost:hover{ border-color:#B8912A; color:#8F7015; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1100px){
  .hero__in{ grid-template-columns:1fr; gap:44px; }
  .hero__text{ text-align:center; }
  .hero__desc{ margin-inline:auto; }
  .hero__btns{ justify-content:center; }
  .hero__stats{ margin-inline:auto; }
  .eyebrow{ margin-inline:auto; }
  .about{ grid-template-columns:1fr; }
  .about__visual{ max-width:460px; margin-inline:auto; }
  .about__text .sec__title{ text-align:center; }
  .about__text > .eyebrow{ display:flex; width:fit-content; margin-inline:auto; }
  .about__text > .btn{ display:flex; margin-inline:auto; max-width:260px; }
  .contact{ grid-template-columns:1fr; }
  .ftr__in{ grid-template-columns:1fr 1fr; gap:28px; }
}

@media (max-width:980px){
  .nav{
    position:fixed; top:0; right:0; z-index:880;
    width:min(320px,86vw);
    height:100vh; height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:2px;
    padding:96px 22px 32px;
    background:linear-gradient(180deg,var(--navy),var(--ink));
    border-left:1px solid var(--line);
    box-shadow:-20px 0 50px rgba(0,0,0,.5);
    transform:translateX(105%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    margin-left:0;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__a{
    padding:15px 12px;
    font-size:1.02rem;
    border-bottom:1px solid rgba(255,255,255,.05);
    border-radius:0;
  }
  .nav__a::after{ display:none; }
  .nav__btn{ display:flex; margin-top:20px; }
  .burger{ display:flex; }
  /* mobilde başlık: solda logo — sağda menü düğmesi.
     WhatsApp butonu gizlenir; sağ altta sabit buton zaten var. */
  .hdr__in{ gap:12px; justify-content:space-between; }
  .hdr__wa{ display:none; }
  .prod__item--big{ grid-column:span 1; }
}

@media (max-width:760px){
  :root{ --hdr-h:66px; }
  .topbar__item--hide{ display:none; }
  .topbar{ font-size:.76rem; }
  .topbar__in{ gap:14px; }
  .brand__img{ height:38px; }
  .float-card--1{ left:-10px; top:4%; }
  .float-card--2{ right:-8px; bottom:5%; }
  .float-card{ padding:9px 12px; }
  .float-card b{ font-size:.78rem; }
  .float-card span{ font-size:.66rem; }
  .about__vals{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .band__in{ flex-direction:column; text-align:center; }
  .band__btns{ width:100%; justify-content:center; }
  #waForm{ grid-template-columns:1fr; }
  .ftr__in{ grid-template-columns:1fr; }
  .ftr__bottom{ justify-content:center; text-align:center; }
  .fab__label{ display:none; }
  .fab{ padding:15px; right:14px; bottom:14px; }
  .fab .ic{ width:28px; height:28px; }
  .hero__stats{ gap:8px; }
  .stat span{ font-size:.76rem; }
}

@media (max-width:400px){
  .wrap{ padding-inline:16px; }
  .btn--lg{ padding:14px 20px; font-size:.94rem; }
  .hero__btns{ flex-direction:column; align-items:stretch; }
  .hero__btns .btn{ width:100%; }
  .band__btns{ flex-direction:column; align-items:stretch; width:100%; }
  .band__btns .btn{ width:100%; }
  .float-card--2{ display:none; }
}

/* dokunmatik cihazlarda hover efektlerini kapat */
@media (hover:none){
  .card:hover, .prod__item:hover, .step:hover, a.info:hover, .btn:hover, .fab:hover{
    transform:none; box-shadow:inherit;
  }
}

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

/* yazdırma */
@media print{
  .hdr,.topbar,.fab,.marquee,.menu-mask,.hero__bg{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sec{ padding:20px 0; }
}