/* =========================================================
   ÖZDEMİR YAPI GROUP — STYLE.CSS (FINAL / LIGHT ONLY)
   - Dark tamamen kaldırıldı
   - HERO: Logo wall + brick + fade (pseudo ile, HTML gerekmez)
   - Apple divider + ortada logo + orbit: #projeler + #devam-eden-projeler
========================================================= */

.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Accent chain */
.accent .ch{ display:inline-block; color: var(--text); }
.accent .ch.on{ color: var(--accent); }

/* =========================
   HERO — NO FADE / MAX CONTRAST (FINAL)
========================= */

/* 1️⃣ Fade tamamen KAPALI (en kritik hamle) */
.hero .wrap::before{
  display:none !important;
}

/* 2️⃣ Hero arka plan logolarını biraz sakinleştir */
.hero{
  --op1: .035;   /* logo layer 1 */
  --op2: .022;   /* logo layer 2 */
}

/* 3️⃣ H1 = TOK, NET, ASLA SOLUK DEĞİL */
.hero h1{
  color:#0e1016;                     /* saf koyu */
  text-shadow:
    0 1px 0 rgba(255,255,255,.9);    /* micro Apple punch */
}

/* Accent yazılar da tok */
.hero .accent{
  color:#0e1016;
}
.hero .accent .ch.on{
  color: var(--accent);
  text-shadow:
    0 0 10px rgba(177,130,2,.25);
}

/* 4️⃣ Pill tamamen okunur */
.hero .pill{
  background:#ffffff;
  border-color: rgba(0,0,0,.18);
  color:#222;
}

/* 5️⃣ Lead kart = cam değil, temiz beyaz */
.hero .lead{
  background:#ffffff;
  color:#333;
  border-color: rgba(0,0,0,.14);
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* 6️⃣ Stats yazıları da net */
.hero .stat b{ color:#111; }
.hero .stat span{ color:#555; }


/* =========================
   1) THEME TOKENS (LIGHT ONLY)
========================= */
:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --muted:#555;
  --text:#0e1016;
  --accent:#B18202;
  --line:rgba(0,0,0,.12);

  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.65);
}

/* =========================
   2) BASE / RESET
========================= */
.muted{ color: var(--muted); }

*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,0,0,.04), transparent 60%),
    linear-gradient(180deg,#f7f7f8,#ededf0);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }

/* =========================
   3) LAYOUT
========================= */
.wrap{ max-width:1080px; margin:0 auto; padding:0 18px; }

/* =========================
   4) NAVBAR
========================= */
.nav{
  position:sticky;
  margin: 0;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  min-height:72px;
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:64px;
  padding:10px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  font-weight:700;
  letter-spacing:.2px;
}
.brand span{ color:var(--accent); }
.brand img{
  height:82px;
  width:auto;
  display:block;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
.brand:hover img{
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.20));
  opacity:.95;
}

/* Menu */
.menu{ display:flex; gap:14px; }
.menu a{ color:var(--muted); }
.menu a:hover{ color:var(--text); }

/* =========================
   5) BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
}
.btn--primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
  font-weight:700;
}

/* =========================
   6) HERO (LOGO WALL + BRICK + FADE) — FINAL
========================= */
.hero{
margin-top: 30px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 40px;
  padding-bottom: 56px;

  /* tek kontrol noktası */
  --logoW: 120px;
  --logoH: 120px;
  --gapX: 56px;
  --gapY: 56px;
  --skew: -8.5deg;
  --op1: .06;
  --op2: .04;
}

/* içerik üstte */
.hero > .wrap{
  position: relative;
  z-index: 3;
}

/* layer 1 */
.hero::before{
  content:"";
  position:absolute;
  inset:-180px -140px;
  z-index:1;
  pointer-events:none;

  transform: skewY(var(--skew));
  transform-origin:center;

  background-image: url("/assets/logo.png");
  background-repeat: repeat;
  background-size: calc(var(--logoW) + var(--gapX)) calc(var(--logoH) + var(--gapY));
  background-position: 0 0;

  opacity: var(--op1);
}

/* layer 2 – brick offset */
.hero::after{
  content:"";
  position:absolute;
  inset:-180px -140px;
  z-index:2;
  pointer-events:none;

  transform: skewY(var(--skew));
  transform-origin:center;

  background-image: url("/assets/logo.png");
  background-repeat: repeat;
  background-size: calc(var(--logoW) + var(--gapX)) calc(var(--logoH) + var(--gapY));
  background-position:
    calc((var(--logoW) + var(--gapX)) / 2)
    calc((var(--logoH) + var(--gapY)) / 2);

  opacity: var(--op2);
}

/* fade – okunurluk */
.hero .wrap::before{
  content:"";
  position:absolute;
  inset:-40px -20px;
  z-index:2;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,0) 100%
  );
}

.hero__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:start;
}

.pill{
  display:inline-block;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  color:var(--muted);
  margin:0 0 14px;
  background:rgba(255,255,255,.7);
}

h1{
  font-size:42px;
  line-height:1.1;
  margin:0 3px 12px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens:none;
}

/* Lead card */
.lead{
  position:relative;
  color: var(--muted);
  font-size:16px;
  max-width:56ch;

  padding:14px 16px;
  border-radius:14px;

  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.10);

  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.65);

  overflow:hidden;
}
.lead::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width:60%;
  height:180%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(12deg);
  animation: leadShimmer 6s ease-in-out infinite;
  pointer-events:none;
  opacity:.25;
}
@keyframes leadShimmer{
  0%{ left:-120%; opacity:0; }
  20%{ opacity:.35; }
  50%{ left:120%; opacity:.45; }
  80%{ opacity:.2; }
  100%{ left:120%; opacity:0; }
}

.cta{ display:flex; gap:10px; margin:18px 0; }

/* Stats */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.stat{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.stat b{ display:block; }
.stat span{ color:var(--muted); font-size:13px; }

/* =========================
   7) CARD / SECTION
========================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.section{ padding:40px 0; }
.section--alt{
  background:rgba(0,0,0,.02);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
h2{ margin:0 px 14px; }

/* =========================
   8) HİZMETLER
========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.tile{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.tile p{ color:var(--muted); margin:8px 0 0; }
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(177,130,2,.14),
    transparent 55%
  );
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.tile:hover::before{ opacity:1; }
.tile:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.16);
}

/* =========================
   9) PROJELER (KART) — ORTAK GRID
========================= */
.projects{
  --projGap: 85px;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--projGap);
}

.proj{
  align-items: start;
  position:relative;
  overflow: visible;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:12px;

  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  background:#fff;

  box-shadow:
    0 10px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.65);

  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.proj:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.16);
  background: rgba(0,0,0,.01);
}

/* Media */
.proj__media{
  position:relative;
  display:block;
  background: rgba(0,0,0,.02);
  border-top-left-radius:18px;
  border-bottom-left-radius:18px;
  overflow:hidden;
  align-self: start;
  height: 600px;
  min-height: 0;
}
.proj__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Info */
.proj__info{
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
.proj__head{ display:flex; gap:10px; align-items:center; }
.proj__pin{ font-size:14px; opacity:.9; transform: translateY(-1px); }
.proj__loc{ color: var(--muted); font-size:13px; line-height:1.2; }
.proj__name{ font-weight:800; font-size:16px; margin-top:4px; }
.proj__stats{ color: var(--muted); font-size:14px; line-height:1.45; }
.proj__total{ margin-top:8px; font-size:13px; opacity:.95; }

/* Chips */
.proj__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}
.proj__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.60);
  font-size:12.5px;
  line-height:1;
}
.proj__chip b{
  color: rgba(0,0,0,.88);
  font-weight:700;
  font-size:12.5px;
}

/* Divider anim */
@keyframes projSweep{
  0%{ background-position: 0 0, -360px 0; opacity:.35; }
  40%{ opacity:.85; }
  60%{ opacity:1; }
  100%{ background-position: 0 0, calc(100% + 360px) 0; opacity:.35; }
}

/* =========================
   9.1) APPLE DIVIDER + ORTADA LOGO + ORBIT
   #projeler + #devam-eden-projeler
   Not: Her .proj içinde <span class="logo-orbit"></span> olmalı
========================= */
#projeler .proj::after,
#devam-eden-projeler .proj::after{ z-index:2; }

#projeler .proj::before,
#devam-eden-projeler .proj::before{ z-index:4; }

#projeler .logo-orbit,
#devam-eden-projeler .logo-orbit{ z-index:5; }

/* son kart hariç */
#projeler .proj:last-child::before,
#projeler .proj:last-child::after,
#projeler .proj:last-child .logo-orbit,
#devam-eden-projeler .proj:last-child::before,
#devam-eden-projeler .proj:last-child::after,
#devam-eden-projeler .proj:last-child .logo-orbit{
  display:none;
}

/* divider çizgi */
#projeler .proj::after,
#devam-eden-projeler .proj::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top: calc(100% + (var(--projGap) / 2));
  height:2px;
  border-radius:999px;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 18%,
      rgba(0,0,0,.14) 50%,
      rgba(0,0,0,.10) 82%,
      transparent 100%
    ),
    linear-gradient(90deg,
      transparent 30%,
      rgba(177,130,2,.85),
      transparent 70%
    );

  background-size: 100% 2px, 320px 2px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, -360px 0;

  animation: projSweep 8s ease-in-out infinite;
  filter: blur(0.3px);
}

/* ortadaki logo */
#projeler .proj::before,
#devam-eden-projeler .proj::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(100% + (var(--projGap) / 2) - 27px);
  transform:translateX(-50%);
  width:54px;
  height:54px;
  border-radius:999px;

  background:#fff url("/assets/logo.png") center / 70% no-repeat;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* orbit */
#projeler .logo-orbit,
#devam-eden-projeler .logo-orbit{
  position:absolute;
  left:50%;
  top: calc(100% + (var(--projGap) / 2) - 33px);
  transform:translateX(-50%);
  width:66px;
  height:66px;
  border-radius:50%;
  pointer-events:none;

  border:2px solid transparent;
  border-top-color: rgba(177,130,2,.95);
  border-right-color: rgba(177,130,2,.45);

  filter: drop-shadow(0 0 14px rgba(177,130,2,.55));
  opacity:0;

  animation: logoOrbit 6s ease-in-out infinite;
}

@keyframes logoOrbit{
  0%{ opacity:0; transform:translateX(-50%) rotate(0deg) scale(.96); }
  45%{ opacity:0; }
  55%{ opacity:1; }
  75%{ opacity:1; transform:translateX(-50%) rotate(360deg) scale(1); }
  90%{ opacity:.15; }
  100%{ opacity:0; transform:translateX(-50%) rotate(360deg) scale(.96); }
}

/* =========================
   10) CONTACT / FORM / FOOTER
========================= */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.list{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  color:var(--muted);
}
.list li{ margin:8px 0; }
label{ display:block; margin:10px 0 0; color:var(--muted); font-size:13px; }

input,textarea{
  width:100%;
  margin-top:6px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px;
}

.footer{
  padding:24px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
}

/* Map */
.mapph{
  height:220px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:
    0 10px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.mapph iframe{ width:100%; height:100%; border:0; display:block; }

/* =========================
   11) SLIDER
========================= */
.slider{ padding:16px; }
.slider__top{ margin-bottom:12px; }
.slider__frame{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.slider__track{
  display:flex;
  width:100%;
  transform: translateX(0%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.slide{ min-width:100%; position:relative; }
.slide img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}
.slide__cap{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:12px 12px;
  border-radius:14px;

  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(0,0,0,.10);
}
.slide__cap b{ display:block; font-size:14px; margin-bottom:3px; color:rgba(0,0,0,.92); }
.slide__cap span{ display:block; font-size:13px; color:rgba(0,0,0,.65); }

.slider__btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: var(--glass2);
  color: rgba(0,0,0,.9);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
.slider__btn:hover{ border-color: rgba(0,0,0,.18); }
.slider__btn.prev{ left:10px; }
.slider__btn.next{ right:10px; }

.slider__dots{
  position:absolute;
  left:0; right:0;
  bottom:10px;
  display:flex;
  gap:8px;
  justify-content:center;
  pointer-events:auto;
}
.slider__dot{
  width:7px;
  height:7px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.10);
  cursor:pointer;
}
.slider__dot.is-active{
  background: var(--accent);
  border-color: transparent;
}

/* =========================
   12) SECTION BACKGROUNDS
========================= */
#hizmetler{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(0,0,0,.035), transparent 60%),
    radial-gradient(700px 360px at 85% 100%, rgba(0,0,0,.04), transparent 60%),
    linear-gradient(180deg, #f6f7f8 0%, #f2f3f5 100%);
  padding-top: 64px;
}

#projeler{
  position: relative;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(800px 380px at 80% 100%, rgba(0,0,0,.07), transparent 60%),
    linear-gradient(180deg, #f0f1f3 0%, #eceef1 100%);
}

#devam-eden-projeler{
  position: relative;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(177,130,2,.12), transparent 60%),
    radial-gradient(800px 380px at 82% 100%, rgba(177,130,2,.10), transparent 60%),
    linear-gradient(180deg, #f4f2ec 0%, #efede7 100%);
}

#iletisim{
  position: relative;
  background:
    radial-gradient(1000px 460px at 20% 0%, rgba(0,0,0,.10), transparent 60%),
    radial-gradient(900px 420px at 80% 100%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(180deg, #e7e9ed 0%, #dfe2e7 100%);
}

/* =========================
   13) PROGRESS + ONGOING CHIP
========================= */
.chip--ongoing{
  position: relative;
  background: rgba(177,130,2,.12);
  border-color: rgba(177,130,2,.35);
  color: rgba(0,0,0,.75);
  animation: ongoingPulse 3.6s ease-in-out infinite;
}
.chip--ongoing::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  background: radial-gradient(
    closest-side,
    rgba(177,130,2,.35),
    transparent 70%
  );
  opacity:.35;
  filter: blur(6px);
  pointer-events:none;
}
@keyframes ongoingPulse{
  0%{ box-shadow: 0 0 0 rgba(177,130,2,0); transform: scale(1); }
  50%{ box-shadow: 0 0 18px rgba(177,130,2,.35); transform: scale(1.03); }
  100%{ box-shadow: 0 0 0 rgba(177,130,2,0); transform: scale(1); }
}

.proj__progress{
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
  position: relative;
}
.proj__progress span{
  display:block;
  height:100%;
  width: calc(var(--p) * 1%);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(177,130,2,.65),
    rgba(177,130,2,1),
    rgba(177,130,2,.65)
  );
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(177,130,2,.45);
  animation: progressFlow 4.5s ease-in-out infinite;
}
@keyframes progressFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* =========================
   14) RESPONSIVE
========================= */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  h1{ font-size:34px; }
  .wrap{ padding:0 14px; }

  .nav{ min-height:68px;
  margin: 0 10px;
  }
  .nav__inner{
    justify-content:flex-start;
    gap:10px;
    min-height:60px;
    padding:8px 0;
  }

  .brand{ flex:0 0 auto; margin-right:auto; }
  .brand img{ height:72px; }

  .menu{
    flex:1 1 auto;
    display:flex;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:6px 0;
    min-width:0;
    justify-content:flex-end;
  }
  .menu::-webkit-scrollbar{ display:none; }
  .menu a{
    white-space:nowrap;
    font-size:14px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.03);
  }

  .hero{ padding-top: 32px; }

  .proj{ grid-template-columns:1fr; }
  .proj__media{
    height:310px;
    border-radius:18px 18px 0 0;
  }

  .slider__btn{ width:38px; height:38px; }
  .slide img{ height:260px; }

  .projects{ --projGap: 60px; gap: var(--projGap); }
}

@media (max-width: 600px){
  .projects{ --projGap: 85px; }
  .brand img{ height:66px; }

  h1{
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.2px;
  }
  .pill{ font-size:13px; padding:7px 10px; }
  .cta{ gap:10px; flex-wrap:wrap; }
  .stats{ grid-template-columns:1fr; }

  #hizmetler .tile{ padding:12px; text-align:left; }
  #hizmetler .tile h3{ font-size:16px; margin-bottom:6px; }
  #hizmetler .tile p{ font-size:14px; line-height:1.45; }

  .slide img{ height:240px; }

  .hero{ padding-bottom: 44px; }
  #hizmetler{ padding-top: 52px; }
}

/* HERO H1 balance */
.hero h1{
  max-width: 20ch;
  text-wrap: balance;
  line-height: 1.06;
  letter-spacing: -0.6px;
}
@supports not (text-wrap: balance){
  .hero h1{ max-width: 22ch; }
}
.accent{ display:inline; white-space:normal; }
.accent .ch{ display:inline; }


/* =========================
   HERO LOGO WALL — SPACING FIX (FINAL)
========================= */

/* Logoların gerçek boyutu */
.hero{
  --logoW: 120px;
  --logoH: 120px;

  /* 🔑 ÇARPIŞMAYI BİTİREN ASIL AYARLAR */
  --gapX: 90px;   /* yatay boşluk */
  --gapY: 90px;   /* dikey boşluk */
}

/* Desktop */
.hero::before,
.hero::after{
  background-size:
    calc(var(--logoW) + var(--gapX))
    calc(var(--logoH) + var(--gapY));
}

/* Tablet */
@media (max-width: 900px){
  .hero{
    --logoW: 104px;
    --logoH: 104px;
    --gapX: 72px;
    --gapY: 72px;
  }
}

/* Mobil */
@media (max-width: 600px){
  .hero{
    --logoW: 92px;
    --logoH: 92px;
    --gapX: 60px;
    --gapY: 60px;
  }
}

/* =========================
   HERO LOGO WALL — FINAL FIX
   - Logo %50 küçültüldü
   - Radial opacity hero içinde kalır
========================= */

/* HERO ANA AYAR */
.hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* 🔻 LOGO %50 KÜÇÜLDÜ */
  --logoW: 60px;
  --logoH: 60px;

  /* Logolar artık çarpmaz */
  --gapX: 90px;
  --gapY: 90px;

  --skew: -8.5deg;
  --op1: .10;
  --op2: .06;
}

/* LOGO WALL KATMANLARI */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:-160px -120px;
  pointer-events:none;

  background-image: url("/assets/logo.png");
  background-repeat: repeat;
  background-size:
    calc(var(--logoW) + var(--gapX))
    calc(var(--logoH) + var(--gapY));

  transform: skewY(var(--skew));
  transform-origin: center;
}

/* 1. katman */
.hero::before{
  z-index:1;
  background-position: 0 0;
  opacity: var(--op1);
}

/* 2. katman (brick offset) */
.hero::after{
  z-index:2;
  background-position:
    calc((var(--logoW) + var(--gapX)) / 2)
    calc((var(--logoH) + var(--gapY)) / 2);
  opacity: var(--op2);
}

/* =========================
   RADIAL FADE — SADECE HERO
========================= */
.hero::selection{}

/* Radial opacity katmanı */
.hero::marker{}

/* Asıl radial fade */
.hero .hero-radial{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;

  background:
    radial-gradient(
      70% 55% at 50% 35%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.70) 35%,
      rgba(255,255,255,.35) 60%,
      rgba(255,255,255,0) 100%
    );
}

/* HERO İÇERİĞİ HER ŞEYİN ÜSTÜNDE */
.hero > .wrap{
  position: relative;
  z-index: 4;
}

/* =========================
   RESPONSIVE AYAR
========================= */
@media (max-width: 900px){
  .hero{
    --logoW: 52px;
    --logoH: 52px;
    --gapX: 72px;
    --gapY: 72px;
  }
}

@media (max-width: 600px){
  .hero{
    --logoW: 46px;
    --logoH: 46px;
    --gapX: 60px;
    --gapY: 60px;
  }
}


/* =========================
   HERO SCROLL TIMELINE (NO JS)
========================= */

/* Scroll timeline sadece hero için */
@supports (animation-timeline: scroll()) {

  .hero{
    view-timeline-name: --heroScroll;
    view-timeline-axis: block;
  }

  /* Logo wall scroll'a göre kaybolur */
  .hero::before,
  .hero::after{
    animation: heroLogoFade linear forwards;
    animation-timeline: --heroScroll;
    animation-range: entry 0% exit 100%;
  }

  /* Radial fade de aynı timeline */
  .hero .hero-radial{
    animation: heroRadialFade linear forwards;
    animation-timeline: --heroScroll;
    animation-range: entry 0% exit 100%;
  }

  @keyframes heroLogoFade{
    0%   { opacity: .12; }
    70%  { opacity: .06; }
    100% { opacity: 0; }
  }

  @keyframes heroRadialFade{
    0%   { opacity: 1; }
    60%  { opacity: .4; }
    100% { opacity: 0; }
  }
}
/* =========================
   GLOBAL SECTION DIVIDER
========================= */

/* Tüm ana section’lar */
section{
  position: relative;
}

/* Üst ayraç */
section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.35) 20%,
    rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.35) 80%,
    transparent 100%
  );

  opacity:.45;
}

/* =========================
   FAQ (Accordion) — Apple-style
========================= */
.faq{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.faq__item{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.faq__q{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:650;
}

.faq__q::-webkit-details-marker{ display:none; }

.faq__a{
  padding:0 18px 16px 18px;
  color: var(--muted);
  line-height:1.65;
}

/* Icon */
.faq__icon{
  width:18px; height:18px;
  border-radius: 6px;
  position:relative;
  flex:0 0 auto;
  opacity:.8;
}
.faq__icon:before,
.faq__icon:after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:2px;
  background: rgba(0,0,0,.55);
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.faq__icon:after{
  width:2px; height:12px;
}

.faq__item[open] .faq__icon:after{
  transform: translate(-50%,-50%) scaleY(0);
}

/* =========================
   NEDEN BİZ – GRID LAYOUT
========================= */
#neden-biz .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop: 3x2 */
  gap:24px;
}

/* Tablet */
@media (max-width: 1024px){
  #neden-biz .grid{
    grid-template-columns: repeat(2, 1fr); /* 2x3 */
  }
}

/* Mobile */
@media (max-width: 640px){
  #neden-biz .grid{
    grid-template-columns: 1fr; /* 1x6 */
  }
}

/* =========================
   TRUST BADGES
========================= */
.trust-badges{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.trust-badges .badge{
  padding:10px 14px;
  border-radius:999px;
  background: var(--glass);
  border:1px solid var(--line);
  font-size:14px;
  font-weight:600;
  color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space:nowrap;
}

/* Mobile biraz daha sıkı */
@media (max-width:640px){
  .trust-badges{
    gap:8px;
  }
  .trust-badges .badge{
    font-size:13px;
    padding:9px 12px;
  }
}

#neden-biz .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
@media (max-width: 1024px){
  #neden-biz .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  #neden-biz .grid{ grid-template-columns: 1fr; }
}

.trust-badges{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  justify-content:center;   /* ✅ ortala */
  align-items:center;       /* ✅ dikey hizala */
  text-align:center;        /* ✅ satır kırılınca ortalı kalsın */
}

@media (max-width:640px){
  .trust-badges .badge{
    white-space:normal;     /* ✅ tek satır zorlamasın */
    text-align:center;
  }
}
.trust-badges{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* Badge base */
.trust-badges .badge{
  padding:10px 14px;
  border-radius:999px;
  background: var(--glass);
  border:1px solid var(--line);
  font-size:14px;
  font-weight:600;
  color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space:nowrap;

  /* ✨ animation prep */
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}

/* Hover effect */
.trust-badges .badge:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 14px 34px rgba(0,0,0,.14),
    0 0 0 1px rgba(177,130,2,.35);
  border-color: rgba(177,130,2,.6);
  background: rgba(255,255,255,.85);
}

/* =========================
   Trust badge entrance animation
========================= */
@keyframes badgeIn{
  from{
    opacity:0;
    transform: translateY(10px) scale(.98);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

.trust-badges .badge{
  opacity:0;
  animation: badgeIn .6s ease forwards;
}

/* stagger (tek tek gelmesi için) */
.trust-badges .badge:nth-child(1){ animation-delay:.05s }
.trust-badges .badge:nth-child(2){ animation-delay:.10s }
.trust-badges .badge:nth-child(3){ animation-delay:.15s }
.trust-badges .badge:nth-child(4){ animation-delay:.20s }
.trust-badges .badge:nth-child(5){ animation-delay:.25s }
.trust-badges .badge:nth-child(6){ animation-delay:.30s }

@media (hover: none){
  .trust-badges .badge:active{
    transform: scale(.97);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
}

/* =========================
   NEDEN BİZ — BLUISH GRAY + RADIAL TRANSITION (FINAL)
========================= */
#neden-biz{
  position: relative;
  color:#14161a;

  background:
    /* çok hafif accent (logo rengi) ışık */
    radial-gradient(1100px 420px at 15% -25%,
      rgba(177,130,2,.07),
      transparent 60%
    ),

    /* üstten bluish soft glow */
    radial-gradient(900px 360px at 50% -140px,
      rgba(120,140,200,.20),
      rgba(120,140,200,.10) 35%,
      transparent 72%
    ),

    /* ana merkez geçiş */
    radial-gradient(1200px 560px at 50% 28%,
      rgba(255,255,255,.40),
      rgba(225,230,238,.62) 42%,
      rgba(210,218,230,.88) 72%,
      rgba(205,213,225,1)
    ),

    /* taban bluish */
    linear-gradient(180deg,
      #dfe5ee,
      #cfd7e3
    );
}

/* Başlık */
#neden-biz h2{
  color:#0e1016;
  letter-spacing:.2px;
}

/* Açıklama metni */
#neden-biz .muted{
  color:#3f4652;
  max-width:760px;
}

/* Grid tile (glass) */
#neden-biz .tile{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(20,30,60,.12);
  box-shadow: 0 16px 34px rgba(20,30,60,.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Tile başlık */
#neden-biz .tile h3{
  color:#0e1016;
}

/* Tile metni */
#neden-biz .tile p{
  color:#4e5664;
  line-height:1.7;
}

/* Hover */
#neden-biz .tile:hover{
  border-color: rgba(120,140,200,.45);
  box-shadow:
    0 22px 48px rgba(20,30,60,.18),
    0 0 0 1px rgba(177,130,2,.18);
}

/* =========================
   TRUST BADGES — BLUISH (isteğe bağlı cam uyumu)
========================= */
#neden-biz .trust-badges{
  margin-top:40px;
}

#neden-biz .trust-badges .badge{
  background: rgba(255,255,255,.92);
  border-color: rgba(20,30,60,.16);
  color:#2a3140;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#neden-biz .trust-badges .badge:hover{
  border-color: rgba(120,140,200,.60);
  box-shadow:
    0 16px 36px rgba(20,30,60,.20),
    0 0 0 1px rgba(177,130,2,.18);
}
/* =========================================================
   FINAL OVERRIDE — NEDEN BİZ + TRUST BADGES (CLEAN)
   - Tek kaynak: en altta kalsın
   - Grid 3x2 / 2x3 / 1x6
   - Trust badges center + appear on view
========================================================= */

/* ---------- NEDEN BİZ BACKGROUND (BLUISH + RADIAL) ---------- */
#neden-biz{
  position: relative;
  color:#14161a;

  background:
    /* çok hafif accent (logo rengi) */
    radial-gradient(1100px 420px at 15% -25%,
      rgba(177,130,2,.06),
      transparent 60%
    ),

    /* üstten soğuk ama daha az mavi */
    radial-gradient(900px 360px at 50% -140px,
      rgba(110,125,165,.16),   /* ⬅️ mavi düşürüldü */
      rgba(110,125,165,.07) 35%,
      transparent 72%
    ),

    /* merkez geçiş — gri ağırlıklı */
    radial-gradient(1200px 560px at 50% 30%,
      rgba(255,255,255,.44),
      rgba(230,233,238,.66) 42%,
      rgba(214,219,226,.90) 72%,
      rgba(208,213,220,1)
    ),

    /* taban: neutral concrete */
    linear-gradient(
      180deg,
      #e3e6eb,
      #d4d9e0
    );
}

/* Typo */
#neden-biz h2{ color:#0e1016; letter-spacing:.2px; }
#neden-biz .muted{ color:#3f4652; max-width:760px; }

/* ---------- NEDEN BİZ GRID: 3x2 / 2x3 / 1x6 ---------- */
#neden-biz .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
@media (max-width: 1024px){
  #neden-biz .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  #neden-biz .grid{ grid-template-columns: 1fr; }
}

/* Tiles glass */
#neden-biz .tile{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(20,30,60,.12);
  box-shadow: 0 16px 34px rgba(20,30,60,.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#neden-biz .tile h3{ color:#0e1016; }
#neden-biz .tile p{ color:#4e5664; line-height:1.7; }

#neden-biz .tile:hover{
  border-color: rgba(120,140,200,.50);
  box-shadow:
    0 22px 48px rgba(20,30,60,.18),
    0 0 0 1px rgba(177,130,2,.18);
}

/* ---------- TRUST BADGES (CENTER + WRAP) ---------- */
#neden-biz .trust-badges{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  text-align:center;
}

#neden-biz .trust-badges .badge{
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(20,30,60,.16);
  color:#2a3140;
  box-shadow:0 6px 18px rgba(20,30,60,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;

  /* appear anim default (görünür olunca aktif edeceğiz) */
  opacity:0;
  transform: translateY(10px) scale(.98);
}

/* Hover */
#neden-biz .trust-badges .badge:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 14px 34px rgba(20,30,60,.18),
    0 0 0 1px rgba(177,130,2,.30);
  border-color: rgba(120,140,200,.65);
  background: rgba(255,255,255,.95);
}

/* Mobile: satır kırılınca taşmasın */
@media (max-width:640px){
  #neden-biz .trust-badges .badge{
    white-space:normal;
    text-align:center;
    font-size:13px;
    padding:9px 12px;
  }
}

/* ---------- Badge appear when section visible ---------- */
#neden-biz.is-inview .trust-badges .badge{
  animation: badgeIn .65s cubic-bezier(.2,.8,.2,1) forwards;
}
#neden-biz.is-inview .trust-badges .badge:nth-child(1){ animation-delay:.05s }
#neden-biz.is-inview .trust-badges .badge:nth-child(2){ animation-delay:.10s }
#neden-biz.is-inview .trust-badges .badge:nth-child(3){ animation-delay:.15s }
#neden-biz.is-inview .trust-badges .badge:nth-child(4){ animation-delay:.20s }
#neden-biz.is-inview .trust-badges .badge:nth-child(5){ animation-delay:.25s }
#neden-biz.is-inview .trust-badges .badge:nth-child(6){ animation-delay:.30s }

@keyframes badgeIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}


/* =========================
   TRUST BADGES — TOP DIVIDER (Apple)
========================= */
#neden-biz .trust-badges{
  position:relative;
  padding-top:22px; /* ayraç için nefes */
}

#neden-biz .trust-badges::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, 92%);
  height:1px;
  border-radius:999px;

  /* base line + subtle highlight */
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(20,30,60,.22) 18%,
      rgba(20,30,60,.34) 50%,
      rgba(20,30,60,.22) 82%,
      transparent 100%
    );
  opacity:.9;
}

/* İsteğe bağlı: ortada yavaş sweep (premium) */
#neden-biz .trust-badges::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, 92%);
  height:1px;
  border-radius:999px;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent 35%,
      rgba(177,130,2,.75),
      transparent 65%
    );
  background-size: 260px 1px;
  background-repeat:no-repeat;
  background-position: -260px 0;

  animation: badgesSweep 7.5s ease-in-out infinite;
  opacity:.55;
}

@keyframes badgesSweep{
  0%   { background-position: -260px 0; opacity:.25; }
  35%  { opacity:.55; }
  55%  { opacity:.75; }
  100% { background-position: calc(100% + 260px) 0; opacity:.25; }
}

/* =========================================================
   FINAL — #neden-biz + TRUST BADGES (SINGLE SOURCE)
   - Bluish concrete background
   - Grid: 3x2 / 2x3 / 1x6
   - Trust badges: top divider + sweep + hard center
   - Arc layout + center emphasis
   - Appear on view via .is-inview
========================================================= */

/* ---------- NEDEN BİZ BACKGROUND ---------- */
#neden-biz{
  position: relative;
  color:#14161a;

  background:
    radial-gradient(1100px 420px at 15% -25%,
      rgba(177,130,2,.06),
      transparent 60%
    ),
    radial-gradient(900px 360px at 50% -140px,
      rgba(110,125,165,.16),
      rgba(110,125,165,.07) 35%,
      transparent 72%
    ),
    radial-gradient(1200px 560px at 50% 30%,
      rgba(255,255,255,.44),
      rgba(230,233,238,.66) 42%,
      rgba(214,219,226,.90) 72%,
      rgba(208,213,220,1)
    ),
    linear-gradient(180deg,#e3e6eb,#d4d9e0);
}

#neden-biz h2{ color:#0e1016; letter-spacing:.2px; }
#neden-biz .muted{ color:#3f4652; max-width:760px; }

/* ---------- NEDEN BİZ GRID ---------- */
#neden-biz .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
@media (max-width: 1024px){
  #neden-biz .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  #neden-biz .grid{ grid-template-columns: 1fr; }
}

/* Tiles */
#neden-biz .tile{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(20,30,60,.12);
  box-shadow: 0 16px 34px rgba(20,30,60,.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#neden-biz .tile h3{ color:#0e1016; }
#neden-biz .tile p{ color:#4e5664; line-height:1.7; }
#neden-biz .tile:hover{
  border-color: rgba(120,140,200,.50);
  box-shadow:
    0 22px 48px rgba(20,30,60,.18),
    0 0 0 1px rgba(177,130,2,.18);
}

/* =========================================================
   TRUST BADGES — FINAL
========================================================= */

@keyframes badgeIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes badgesSweep{
  0%   { background-position: -260px 0; opacity:.22; }
  35%  { opacity:.50; }
  55%  { opacity:.70; }
  100% { background-position: calc(100% + 260px) 0; opacity:.22; }
}

/* Container */
#neden-biz .trust-badges{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;     /* gerçek ortalama */
  align-content:center;
  align-items:flex-start;

  /* optik merkez kilidi */
  max-width: 760px;
  margin:42px auto 0;
  padding-top:22px;           /* divider için boşluk */

  gap:14px;
  text-align:center;

  perspective: 800px;         /* arc hissi */
}

/* Top divider */
#neden-biz .trust-badges::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, 92%);
  height:1px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(20,30,60,.22) 18%,
    rgba(20,30,60,.34) 50%,
    rgba(20,30,60,.22) 82%,
    transparent 100%
  );
  opacity:.95;
}

/* Sweep highlight */
#neden-biz .trust-badges::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, 92%);
  height:1px;
  border-radius:999px;
  pointer-events:none;

  background: linear-gradient(
    90deg,
    transparent 35%,
    rgba(177,130,2,.75),
    transparent 65%
  );
  background-size: 260px 1px;
  background-repeat:no-repeat;
  background-position: -260px 0;

  animation: badgesSweep 7.5s ease-in-out infinite;
  opacity:.55;
}

/* Badge base */
#neden-biz .trust-badges .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(20,30,60,.16);
  color:#2a3140;
  box-shadow:0 6px 18px rgba(20,30,60,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  white-space:nowrap;
  text-align:center;

  /* appear default */
  opacity:0;

  transform-origin: center bottom;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}

/* Appear on view */
#neden-biz.is-inview .trust-badges .badge{
  animation: badgeIn .65s cubic-bezier(.2,.8,.2,1) forwards;
}
#neden-biz.is-inview .trust-badges .badge:nth-child(1){ animation-delay:.05s }
#neden-biz.is-inview .trust-badges .badge:nth-child(2){ animation-delay:.10s }
#neden-biz.is-inview .trust-badges .badge:nth-child(3){ animation-delay:.15s }
#neden-biz.is-inview .trust-badges .badge:nth-child(4){ animation-delay:.20s }
#neden-biz.is-inview .trust-badges .badge:nth-child(5){ animation-delay:.25s }
#neden-biz.is-inview .trust-badges .badge:nth-child(6){ animation-delay:.30s }
#neden-biz.is-inview .trust-badges .badge:nth-child(7){ animation-delay:.35s }

/* ARC (6 badge default) */
#neden-biz.is-inview .trust-badges .badge:nth-child(1){ transform: translateY(6px) rotateZ(-1.8deg); }
#neden-biz.is-inview .trust-badges .badge:nth-child(2){ transform: translateY(3px) rotateZ(-1deg); }
#neden-biz.is-inview .trust-badges .badge:nth-child(3){ transform: translateY(0px) rotateZ(-0.3deg); }

/* CENTER EMPHASIS */
#neden-biz.is-inview .trust-badges .badge:nth-child(4){
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 18px 40px rgba(20,30,60,.22),
    0 0 0 1px rgba(177,130,2,.35);
  border-color: rgba(177,130,2,.55);
}

/* right symmetry */
#neden-biz.is-inview .trust-badges .badge:nth-child(5){ transform: translateY(0px) rotateZ(0.3deg); }
#neden-biz.is-inview .trust-badges .badge:nth-child(6){ transform: translateY(3px) rotateZ(1deg); }
#neden-biz.is-inview .trust-badges .badge:nth-child(7){ transform: translateY(6px) rotateZ(1.8deg); }

/* Hover */
#neden-biz .trust-badges .badge:hover{
  transform: translateY(-8px) scale(1.06);
  z-index:2;
  box-shadow:
    0 22px 52px rgba(20,30,60,.28),
    0 0 0 1px rgba(177,130,2,.45);
  border-color: rgba(120,140,200,.65);
  background: rgba(255,255,255,.95);
}

/* Mobile */
@media (max-width:640px){
  #neden-biz .trust-badges{
    max-width: 92%;
    gap:10px;
    margin-top:40px;
  }
  #neden-biz .trust-badges .badge{
    white-space:normal;
    font-size:13px;
    padding:9px 12px;
  }

  /* arc kapat */
  #neden-biz.is-inview .trust-badges .badge{
    transform: translateY(0) scale(1) !important;
  }
  /* sadece merkez büyüsün */
  #neden-biz.is-inview .trust-badges .badge:nth-child(4){
    transform: scale(1.04) !important;
  }
}
/* =========================================================
   MOBILE HAMBURGER MENU (FINAL)
   - Only mobile shows burger + sheet
   - Desktop keeps existing .menu
========================================================= */

.burger,
.nav-backdrop,
.mobile-menu{ display:none; }

/* Mobile only */
@media (max-width: 900px){

  /* Desktop menu hidden on mobile */
  .menu{ display:none !important; }

  /* Burger button */
  .burger{
    margin-right:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    cursor:pointer;
    position:relative;
  }

  .burger__lines{
    width:18px;
    height:12px;
    position:relative;
    display:block;
  }
  .burger__lines::before,
  .burger__lines::after,
  .burger__lines{
    background: transparent;
  }
  .burger__lines::before,
  .burger__lines::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    border-radius:2px;
    background: rgba(0,0,0,.78);
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                top .35s cubic-bezier(.2,.8,.2,1),
                opacity .2s ease;
  }
  .burger__lines::before{ top:1px; }
  .burger__lines::after{ top:9px; }

  /* Backdrop */
  .nav-backdrop{
    position: fixed;
  inset: 0;
  background: rgba(10,12,18,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 60;
  }

  /* Sheet */
  .mobile-menu{
      margin: 0 50px;
    display:block;
    position:fixed;
    top:0;
    right:0;
    height:100dvh;
    width:min(360px, 86vw);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(0,0,0,.10);
    box-shadow: -24px 0 60px rgba(0,0,0,.22);
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    z-index: 40;
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .mobile-menu__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 6px 4px 8px;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .mobile-menu__brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    color: rgba(0,0,0,.88);
  }
  .mobile-menu__brand img{
    width:34px;
    height:34px;
    border-radius:10px;
    object-fit:contain;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
  }
  .mobile-menu__brand span{
    font-size:14px;
    letter-spacing:.2px;
  }

  .mobile-menu__close{
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.70);
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
  }

  .mobile-menu__links{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top: 6px;
  }

  .mobile-menu__links a{
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.02);
    color: rgba(0,0,0,.85);
    font-weight:650;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .mobile-menu__links a:hover{
    transform: translateY(-1px);
    border-color: rgba(0,0,0,.16);
    background: rgba(255,255,255,.85);
  }

  .mobile-menu__cta{
    margin-top:auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,.08);
    display:flex;
    gap:10px;
  }
  .mobile-menu__cta .btn{
    width:100%;
    justify-content:center;
    border-radius:14px;
  }

  /* OPEN STATE */
  .nav.is-open .nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .nav.is-open .mobile-menu{
    transform: translateX(0);
  }

  /* Burger -> X when open */
  .nav.is-open .burger__lines::before{
    top:5px;
    transform: rotate(45deg);
  }
  .nav.is-open .burger__lines::after{
    top:5px;
    transform: rotate(-45deg);
  }
}

/* iOS safe area */
@supports (padding: max(0px)){
  @media (max-width: 900px){
    .mobile-menu{
      padding-top: calc(14px + env(safe-area-inset-top));
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
  }
}
.page-blur{
  transition: filter .35s cubic-bezier(.2,.8,.2,1),
              transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: filter, transform;
}

/* Menü açıkken arka taraf blur */
.nav.is-open + .page-blur{
  filter: blur(12px) saturate(1.08);
  transform: scale(1.02);
}
/* =========================
   MOBILE MENU BLUR BACKDROP
   - menu açılınca page-blur bulanıklaşır
   - arka taraf tıklanamaz olur
========================= */

.page-blur{
  transition: filter .35s cubic-bezier(.2,.8,.2,1),
              transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: filter, transform;
}

/* nav açıkken: header'dan SONRA gelen page-blur'u blurla */
.nav.is-open + .page-blur{
  filter: blur(12px) saturate(1.06);
  transform: scale(1.01);
  pointer-events: none; /* arka taraf tıklanmasın */
}

/* küçük ekranlarda blur daha "Apple" dursun */
@media (max-width: 900px){
  .nav.is-open + .page-blur{
    filter: blur(14px) saturate(1.08);
  }
}

.nav.is-open + .page-blur{
  transform: translateZ(0) scale(1.01);
}

html{ scroll-behavior: smooth; }

:root{ scroll-padding-top: 84px; } /* navbar yüksekliğine göre 72–90px ayarla */
section{ scroll-margin-top: 84px; }

/* =========================================================
   NAV — SINGLE SOURCE (HOVER + ACTIVE + LOGO GLOW)
   (Dosyanın EN ALTINDA tek kalsın)
========================================================= */

.nav .menu a{
  position:relative;
  padding:8px 12px;
  border-radius:999px;
  color: var(--muted);
  transition:
    color .22s ease,
    background .22s ease,
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    transform .22s ease;
}

/* Hover */
.nav .menu a:hover{
  color: var(--text);
  background: rgba(177,130,2,.08);
  box-shadow:
    0 14px 34px rgba(177,130,2,.22),
    0 0 0 1px rgba(177,130,2,.22);
  transform: translateY(-1px);
}

/* Active (scrollspy) */
.nav .menu a.is-active{
  color: var(--text);
  background: rgba(177,130,2,.10);
  box-shadow:
    0 18px 44px rgba(177,130,2,.26),
    0 0 0 1px rgba(177,130,2,.30);
}

/* Halo (hover + active için ortak) */
.nav .menu a::after{
  content:"";
  position:absolute;
  left:10px; right:10px;
  bottom:-8px;
  height:14px;
  border-radius:999px;
  background: radial-gradient(closest-side, rgba(177,130,2,.40), transparent 70%);
  opacity:0;
  filter: blur(10px);
  transition: opacity .35s ease;
  pointer-events:none;
}
.nav .menu a:hover::after,
.nav .menu a.is-active::after{ opacity:1; }

/* Mobile sheet active */
.mobile-menu__links a.is-active{
  background: rgba(177,130,2,.10);
  border-color: rgba(177,130,2,.28);
  box-shadow: 0 12px 28px rgba(177,130,2,.18);
}

/* Hover olunca logo da glow */
.nav:has(.menu a:hover) .brand img{
  filter: drop-shadow(0 10px 26px rgba(177,130,2,.22));
}


/* =========================================================
   ABOUT (PREMIUM) — #hakkimizda
   - Animated gradient background + noise
   - Apple divider
   - Timeline slow reveal + shimmer line
========================================================= */

.about{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-top: 64px;
  padding-bottom: 64px;

  /* premium section tone */
  background: linear-gradient(180deg, #eef1f6 0%, #e7ebf1 100%);
}

/* animated gradient layer */
.about__bg{
  position:absolute;
  inset:-30%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(900px 420px at 18% 12%, rgba(177,130,2,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(110,125,165,.26), transparent 60%),
    radial-gradient(1100px 560px at 52% 86%, rgba(0,0,0,.07), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.70), rgba(255,255,255,.20));

  filter: blur(18px);
  opacity:.9;

  animation: aboutFloat 14s ease-in-out infinite;
}

@keyframes aboutFloat{
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d(1.5%, 1.2%, 0) scale(1.04); }
  100% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
}

/* subtle noise (premium) */
.about__noise{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* content above */
.about .wrap{ position:relative; z-index:3; }

.about__head{
  max-width: none;        /* diğer section’larla aynı */
  margin: 0 0 18px 0;     /* ortalama yok */
}
.about__lead{
  margin-top: 10px;
  line-height:1.7;
}

.about__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
  margin-top: 14px;
}

/* cards */
.about__card{
  border-radius: 20px;
  border:1px solid rgba(20,30,60,.12);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 40px rgba(20,30,60,.14),
    inset 0 1px 0 rgba(255,255,255,.70);
  padding: 18px;
}

.about__kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  letter-spacing:.2px;
  color: rgba(0,0,0,.84);
  margin-bottom: 8px;
}
.about__story p{
  color:#3f4652;
  line-height:1.75;
  margin: 10px 0 0;
}

/* chips */
.about__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.about__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.62);
  font-size: 13px;
}
.about__chip b{ color: rgba(0,0,0,.88); }

/* timeline box */
.timeline__top h3{ margin:0 0 6px; }
.timeline__top p{ margin:0 0 14px; }

/* timeline list */
.timeline{
  margin: 0;
  padding: 6px 0 0 0;
  list-style:none;
  position:relative;
}

/* vertical line */
.timeline::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(20,30,60,.10),
    rgba(20,30,60,.18),
    rgba(20,30,60,.10)
  );
  opacity:.9;
}

/* shimmer on line */
.timeline::after{
  content:"";
  position:absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(177,130,2,.85) 45%,
    transparent 90%
  );
  background-size: 2px 220px;
  background-repeat:no-repeat;
  background-position: 0 -220px;
  opacity:.55;
  animation: tlSweep 7.5s ease-in-out infinite;
}

@keyframes tlSweep{
  0%   { background-position: 0 -220px; opacity:.25; }
  45%  { opacity:.55; }
  100% { background-position: 0 calc(100% + 220px); opacity:.25; }
}

/* item */
.t{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;
}

/* dot */
.t__dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 6px;
  margin-top: 8px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(177,130,2,.55);
  box-shadow:
    0 10px 22px rgba(177,130,2,.20),
    0 0 0 4px rgba(177,130,2,.10);
}

/* meta */
.t__meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 6px;
}
.t__year{
  font-weight:800;
  letter-spacing:.2px;
  color:#0e1016;
}
.t__tag{
  font-size:12.5px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(20,30,60,.14);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.62);
}

.t__title{
  font-weight:800;
  color:#0e1016;
  margin-bottom: 4px;
}
.t__desc{
  color:#4e5664;
  line-height:1.65;
  font-size: 14px;
}

/* timeline footer */
.timeline__footer{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,30,60,.10);
}
.timeline__note{
  display:block;
  color: rgba(0,0,0,.72);
  font-weight:650;
}

/* Apple divider under section */
.apple-divider{
  margin: 34px auto 0;
  width: min(860px, 94%);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 18%,
      rgba(0,0,0,.16) 50%,
      rgba(0,0,0,.10) 82%,
      transparent 100%
    ),
    linear-gradient(90deg,
      transparent 30%,
      rgba(177,130,2,.75),
      transparent 70%
    );
  background-size: 100% 2px, 320px 2px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, -360px 0;
  animation: dividerSweep 8s ease-in-out infinite;
  opacity:.9;
}

@keyframes dividerSweep{
  0%   { background-position: 0 0, -360px 0; opacity:.35; }
  45%  { opacity:.85; }
  100% { background-position: 0 0, calc(100% + 360px) 0; opacity:.35; }
}

/* slow appear (premium) */
.about .about__card{
  opacity:0;
  transform: translateY(10px) scale(.99);
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1);
}
.about.is-inview .about__card{
  opacity:1;
  transform: translateY(0) scale(1);
}
.about.is-inview .about__card:nth-child(1){ transition-delay: .06s; }
.about.is-inview .about__card:nth-child(2){ transition-delay: .14s; }

/* responsive */
@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   ABOUT (PREMIUM) — #hakkimizda
   - Animated gradient background + noise
   - Apple divider + sweep
   - Timeline slow shimmer + reveal
   - Parallax-ish drift (CSS only)
========================================================= */

.about{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-top: 64px;
  padding-bottom: 64px;

  background: linear-gradient(180deg, #eef1f6 0%, #e7ebf1 100%);
}

/* animated gradient layer */
.about__bg{
  position:absolute;
  inset:-30%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(900px 420px at 18% 12%, rgba(177,130,2,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(110,125,165,.26), transparent 60%),
    radial-gradient(1100px 560px at 52% 86%, rgba(0,0,0,.07), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.72), rgba(255,255,255,.20));

  filter: blur(18px);
  opacity:.92;

  animation: aboutFloat 14s ease-in-out infinite;
}

@keyframes aboutFloat{
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d(1.5%, 1.2%, 0) scale(1.04); }
  100% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
}

/* subtle noise */
.about__noise{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* content above */
.about .wrap{ position:relative; z-index:3; }

.about__head{
  max-width: none;        /* diğer section’larla aynı */
  margin: 0 0 18px 0;     /* ortalama yok */
}
.about__lead{
  margin-top: 10px;
  line-height:1.7;
}

/* grid */
.about__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
  margin-top: 14px;
}

/* cards */
.about__card{
  border-radius: 20px;
  border:1px solid rgba(20,30,60,.12);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 40px rgba(20,30,60,.14),
    inset 0 1px 0 rgba(255,255,255,.70);
  padding: 18px;

  /* reveal default */
  opacity:0;
  transform: translateY(10px) scale(.99);
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1);
}
.about.is-inview .about__card{
  opacity:1;
  transform: translateY(0) scale(1);
}
.about.is-inview .about__card:nth-child(1){ transition-delay: .06s; }
.about.is-inview .about__card:nth-child(2){ transition-delay: .14s; }

.about__kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  letter-spacing:.2px;
  color: rgba(0,0,0,.84);
  margin-bottom: 8px;
}
.about__story p{
  color:#3f4652;
  line-height:1.75;
  margin: 10px 0 0;
}

/* chips */
.about__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.about__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.62);
  font-size: 13px;
}
.about__chip b{ color: rgba(0,0,0,.88); }

/* timeline */
.timeline__top h3{ margin:0 0 6px; }
.timeline__top p{ margin:0 0 14px; }

.timeline{
  margin: 0;
  padding: 6px 0 0 0;
  list-style:none;
  position:relative;
}

/* base line */
.timeline::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(20,30,60,.10),
    rgba(20,30,60,.18),
    rgba(20,30,60,.10)
  );
  opacity:.9;
}

/* shimmer sweep */
.timeline::after{
  content:"";
  position:absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(177,130,2,.85) 45%,
    transparent 90%
  );
  background-size: 2px 220px;
  background-repeat:no-repeat;
  background-position: 0 -220px;
  opacity:.55;

  animation: tlSweep 7.5s ease-in-out infinite;
}
@keyframes tlSweep{
  0%   { background-position: 0 -220px; opacity:.22; }
  45%  { opacity:.55; }
  100% { background-position: 0 calc(100% + 220px); opacity:.22; }
}

.t{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;

  /* slow item drift (premium) */
  transform: translateZ(0);
}
.about.is-inview .t{
  animation: tFloat 10s ease-in-out infinite;
}
.about.is-inview .t:nth-child(1){ animation-delay: .0s; }
.about.is-inview .t:nth-child(2){ animation-delay: .4s; }
.about.is-inview .t:nth-child(3){ animation-delay: .8s; }
.about.is-inview .t:nth-child(4){ animation-delay: 1.2s; }

@keyframes tFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
  100%{ transform: translateY(0); }
}

.t__dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 6px;
  margin-top: 8px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(177,130,2,.55);
  box-shadow:
    0 10px 22px rgba(177,130,2,.20),
    0 0 0 4px rgba(177,130,2,.10);
}

.t__meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 6px;
}
.t__year{
  font-weight:800;
  letter-spacing:.2px;
  color:#0e1016;
}
.t__tag{
  font-size:12.5px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(20,30,60,.14);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.62);
}

.t__title{
  font-weight:800;
  color:#0e1016;
  margin-bottom: 4px;
}
.t__desc{
  color:#4e5664;
  line-height:1.65;
  font-size: 14px;
}

/* footer note */
.timeline__footer{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,30,60,.10);
}
.timeline__note{
  display:block;
  color: rgba(0,0,0,.72);
  font-weight:650;
}

/* Apple divider */
.apple-divider{
  margin: 34px auto 0;
  width: min(860px, 94%);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 18%,
      rgba(0,0,0,.16) 50%,
      rgba(0,0,0,.10) 82%,
      transparent 100%
    ),
    linear-gradient(90deg,
      transparent 30%,
      rgba(177,130,2,.75),
      transparent 70%
    );
  background-size: 100% 2px, 320px 2px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, -360px 0;
  animation: dividerSweep 8s ease-in-out infinite;
  opacity:.9;
}
@keyframes dividerSweep{
  0%   { background-position: 0 0, -360px 0; opacity:.35; }
  45%  { opacity:.85; }
  100% { background-position: 0 0, calc(100% + 360px) 0; opacity:.35; }
}

/* responsive */
@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; }
}


/* Active (scrollspy) */
.nav .menu a.is-active{
  color: var(--text);
  background: rgba(177,130,2,.10);
  box-shadow:
    0 18px 44px rgba(177,130,2,.26),
    0 0 0 1px rgba(177,130,2,.30);
}

/* ✅ Active + Hover: hover’ın ezilmesini bitir */
.nav .menu a.is-active:hover{
  background: rgba(177,130,2,.14);
  box-shadow:
    0 22px 54px rgba(177,130,2,.30),
    0 0 0 1px rgba(177,130,2,.40);
  transform: translateY(-1px);
}
/* ✅ Mobile'da alttaki yatay scrollbar'ı bitir */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* ✅ Sheet taşmasını bitir (margin KALDIR) */
@media (max-width: 900px){
  .mobile-menu{
    margin:0 !important;                 /* ⬅️ asıl suçlu */
    right:0;
    width:min(360px, calc(100vw - 24px));/* güvenli genişlik */
    box-sizing:border-box;
  }

  /* Burger'daki gereksiz margin de overflow yapabiliyor */
  .burger{
    margin-right:0 !important;
  }
}


/* =========================================================
   ABOUT / HAKKIMIZDA — PREMIUM (Bluish + Greenish)
   - Animated gradient + aurora blobs + noise
   - Glass cards, subtle border glow
   - No JS
========================================================= */

/* target both: id + class */
#hakkimizda,
.about{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 72px 0;
  color: #0e1016;

  /* base premium surface */
  background:
    radial-gradient(1200px 520px at 18% -15%,
      rgba(80,120,255,.18),
      transparent 60%
    ),
    radial-gradient(1100px 520px at 85% 10%,
      rgba(40,210,170,.16),
      transparent 60%
    ),
    radial-gradient(1200px 640px at 50% 85%,
      rgba(0,0,0,.08),
      transparent 60%
    ),
    linear-gradient(180deg, #eef3fb 0%, #e7eef7 55%, #e4ebf3 100%);
}

/* animated aurora layer (CSS only) */
#hakkimizda::before,
.about::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(780px 420px at 20% 20%,
      rgba(60,120,255,.26),
      transparent 60%
    ),
    radial-gradient(860px 520px at 82% 24%,
      rgba(35,210,170,.24),
      transparent 62%
    ),
    radial-gradient(980px 560px at 54% 82%,
      rgba(255,255,255,.18),
      transparent 62%
    ),
    linear-gradient(120deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.15)
    );

  filter: blur(22px);
  opacity: .95;

  animation: aboutAurora 14s ease-in-out infinite;
  transform: translate3d(0,0,0);
}

@keyframes aboutAurora{
  0%   { transform: translate3d(-1.6%, -1.2%, 0) scale(1.02) rotate(-1deg); }
  50%  { transform: translate3d( 1.6%,  1.2%, 0) scale(1.05) rotate( 1deg); }
  100% { transform: translate3d(-1.6%, -1.2%, 0) scale(1.02) rotate(-1deg); }
}

/* subtle noise for premium texture */
#hakkimizda::after,
.about::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: multiply;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* content always above bg */
#hakkimizda .wrap,
.about .wrap{
  position: relative;
  z-index: 3;
}

/* heading alignment: same as others */
#hakkimizda .about__head,
.about .about__head{
  max-width: none;
  margin: 0 0 18px 0;
}

/* premium lead text */
#hakkimizda .about__lead,
.about .about__lead{
  color: rgba(30,38,55,.78);
  line-height: 1.75;
  max-width: 78ch;
}

/* grid */
#hakkimizda .about__grid,
.about .about__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
  margin-top: 16px;
}

/* glass cards */
#hakkimizda .about__card,
.about .about__card{
  position: relative;
  border-radius: 22px;
  padding: 18px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,30,60,.12);
  box-shadow:
    0 20px 50px rgba(20,30,60,.16),
    inset 0 1px 0 rgba(255,255,255,.75);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow:hidden;
  transform: translateZ(0);
}

/* subtle border glow on hover */
#hakkimizda .about__card:hover,
.about .about__card:hover{
  border-color: rgba(60,120,255,.25);
  box-shadow:
    0 26px 64px rgba(20,30,60,.20),
    0 0 0 1px rgba(35,210,170,.14),
    inset 0 1px 0 rgba(255,255,255,.80);
}

/* inner shimmer */
#hakkimizda .about__card::before,
.about .about__card::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width:70%;
  height:220%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(12deg);
  opacity:.22;
  pointer-events:none;
  animation: aboutShimmer 7.5s ease-in-out infinite;
}
@keyframes aboutShimmer{
  0%{ left:-120%; opacity:0; }
  20%{ opacity:.18; }
  50%{ left:120%; opacity:.25; }
  80%{ opacity:.12; }
  100%{ left:120%; opacity:0; }
}

/* kicker */
#hakkimizda .about__kicker,
.about .about__kicker{
  font-weight: 850;
  letter-spacing: .2px;
  color: rgba(10,14,22,.88);
}

/* paragraphs */
#hakkimizda .about__story p,
.about .about__story p{
  color: rgba(40,48,64,.78);
  line-height: 1.8;
}

/* chips: bluish/greenish accent */
#hakkimizda .about__chip,
.about .about__chip{
  background: rgba(10,14,22,.03);
  border: 1px solid rgba(20,30,60,.12);
  color: rgba(20,30,60,.70);
}
#hakkimizda .about__chip b,
.about .about__chip b{
  color: rgba(10,14,22,.90);
}

/* timeline line gets gradient */
#hakkimizda .timeline::before,
.about .timeline::before{
  background: linear-gradient(
    180deg,
    rgba(60,120,255,.10),
    rgba(20,30,60,.18),
    rgba(35,210,170,.12)
  );
}

/* timeline shimmer (bluish->greenish) */
#hakkimizda .timeline::after,
.about .timeline::after{
  opacity:.55;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(60,120,255,.85) 35%,
    rgba(35,210,170,.85) 55%,
    transparent 90%
  );
}

/* Apple divider: bluish/greenish sweep */
#hakkimizda .apple-divider,
.about .apple-divider{
  opacity:.95;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(20,30,60,.10) 18%,
      rgba(20,30,60,.16) 50%,
      rgba(20,30,60,.10) 82%,
      transparent 100%
    ),
    linear-gradient(90deg,
      transparent 30%,
      rgba(60,120,255,.75),
      rgba(35,210,170,.75),
      transparent 70%
    );
  background-size: 100% 2px, 380px 2px;
}

/* responsive */
@media (max-width: 900px){
  #hakkimizda,
  .about{ padding: 56px 0; }

  #hakkimizda .about__grid,
  .about .about__grid{
    grid-template-columns: 1fr;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #hakkimizda::before,
  .about::before,
  #hakkimizda .about__card::before,
  .about .about__card::before{
    animation: none !important;
  }
}


/* =========================================================
   NAVBAR — REAL STICKY (FIXED) + SAFE OFFSET
   - sticky bozan overflow/transform sorunlarını bypass eder
========================================================= */

:root{
  --navH: 72px; /* navbar yüksekliğin (64–84 arası olabilir) */
}

/* Nav artık kesin sabit */
.nav{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;

  z-index: 999;
  margin: 0 !important;             /* mobilde verdiğin margin'ler de taşma yapıyordu */
  width: 100%;
}

/* Sayfayı navbar kadar aşağı it */
body{
  padding-top: var(--navH);
}

/* Smooth scroll hedefleri navbar altına gelsin */
:root{ scroll-padding-top: var(--navH); }
section{ scroll-margin-top: var(--navH); }

/* Mobilde navbar biraz daha kısa olabilir */
@media (max-width: 900px){
  :root{ --navH: 68px; }
}
@media (max-width: 600px){
  :root{ --navH: 64px; }
}
/* =========================================================
   NAV LINKS — hover her zaman çalışsın (active ezmesin)
========================================================= */

/* Desktop menu */
.nav .menu a{
  position:relative;
  padding:8px 12px;
  border-radius:999px;
  color: var(--muted);
  transition:
    color .22s ease,
    background .22s ease,
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    transform .22s ease;
}

/* Hover */
.nav .menu a:hover{
  color: var(--text);
  background: rgba(177,130,2,.08);
  box-shadow:
    0 14px 34px rgba(177,130,2,.22),
    0 0 0 1px rgba(177,130,2,.22);
  transform: translateY(-1px);
}

/* Active */
.nav .menu a.is-active{
  color: var(--text);
  background: rgba(177,130,2,.10);
  box-shadow:
    0 18px 44px rgba(177,130,2,.26),
    0 0 0 1px rgba(177,130,2,.30);
}

/* ✅ Active iken hover ezilmesin (projeler/devam eden projeler dahil) */
.nav .menu a.is-active:hover{
  background: rgba(177,130,2,.14);
  box-shadow:
    0 22px 54px rgba(177,130,2,.30),
    0 0 0 1px rgba(177,130,2,.40);
  transform: translateY(-1px);
}

/* Halo */
.nav .menu a::after{
  content:"";
  position:absolute;
  left:10px; right:10px;
  bottom:-8px;
  height:14px;
  border-radius:999px;
  background: radial-gradient(closest-side, rgba(177,130,2,.40), transparent 70%);
  opacity:0;
  filter: blur(10px);
  transition: opacity .35s ease;
  pointer-events:none;
}
.nav .menu a:hover::after,
.nav .menu a.is-active::after{ opacity:1; }

/* Mobile sheet */
.mobile-menu__links a{
  border-radius:14px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .3s ease;
}
.mobile-menu__links a:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
  background: rgba(255,255,255,.85);
}
.mobile-menu__links a.is-active{
  background: rgba(177,130,2,.10);
  border-color: rgba(177,130,2,.28);
  box-shadow: 0 12px 28px rgba(177,130,2,.18);
}
/* ✅ active iken hover da çalışsın */
.mobile-menu__links a.is-active:hover{
  background: rgba(177,130,2,.14);
  border-color: rgba(177,130,2,.38);
  box-shadow: 0 16px 34px rgba(177,130,2,.22);
}
/* Üstte gezen overlay'ler nav üstüne binmesin */
section::before,
section::after,
.hero::before,
.hero::after,
.hero-radial,
.about::before,
.about::after{
  pointer-events: none !important;
}

/* Nav her zaman en üstte */
.nav{ z-index: 9999; }

/* Mobile menü/backdrop sırası doğru olsun */
@media (max-width:900px){
  .nav-backdrop{ z-index: 10000; } /* arkada */
  .mobile-menu{ z-index: 10001; }  /* onun üstünde */
  .burger{ z-index: 10002; }       /* en üst */
}

/* Overlay'ler mouse yakalamasın */
section::before, section::after,
.hero::before, .hero::after, .hero-radial,
.about::before, .about::after,
#hakkimizda::before, #hakkimizda::after{
  pointer-events:none !important;
}
/* Backdrop desktop'ta tamamen pasif */
.nav-backdrop{
  pointer-events:none;
  opacity:0;
}

/* Sadece mobilde ve menu açıkken aktif olsun */
@media (max-width:900px){
  .nav.is-open .nav-backdrop{
    pointer-events:auto;
    opacity:1;
  }
}
/* =========================================================
   HAKKIMIZDA — GLASSMORPHISM (Like reference)
   Paste at END of style.css
========================================================= */

#hakkimizda{
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(80,160,255,.28), transparent 60%),
    radial-gradient(1000px 650px at 85% 20%, rgba(255,120,200,.26), transparent 60%),
    radial-gradient(1100px 800px at 60% 95%, rgba(180,120,255,.18), transparent 65%),
    linear-gradient(180deg, #dfeeff 0%, #eaf1ff 45%, #e9f7ff 100%);
}

/* pastel “floating bubbles” */
#hakkimizda .about__blob{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(24px);
  opacity: .55;
  pointer-events: none;
  transform: translateZ(0);
}

#hakkimizda .about__blob--1{
  left: -180px;
  top: -140px;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,130,200,.95),
    rgba(255,130,200,.10) 60%,
    transparent 72%);
}

#hakkimizda .about__blob--2{
  right: -220px;
  top: -120px;
  background: radial-gradient(circle at 35% 35%,
    rgba(110,170,255,.95),
    rgba(110,170,255,.10) 60%,
    transparent 72%);
}

#hakkimizda .about__blob--3{
  left: 55%;
  bottom: -260px;
  transform: translateX(-50%);
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at 35% 35%,
    rgba(180,120,255,.90),
    rgba(180,120,255,.10) 62%,
    transparent 75%);
}

/* cam panel */
#hakkimizda .about__glass{
  position: relative;
  border-radius: 28px;
  padding: 42px 34px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.40);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 22px 70px rgba(20, 30, 60, .18),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* cam panel outline glow (subtle) */
#hakkimizda .about__glass::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,255,255,.70),
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.25) 70%,
    rgba(255,255,255,0));
  opacity:.35;
  filter: blur(0.2px);
}

/* başlık/lead daha “premium” */
#hakkimizda h2{
  margin: 0 0 10px;
  color: #0e1016;
  letter-spacing: -.2px;
}

#hakkimizda .about__lead{
  color: rgba(18, 22, 32, .70);
  max-width: 80ch;
  line-height: 1.75;
  margin: 0 0 22px;
}

/* grid cam kartlar (iç kartlar) */
#hakkimizda .about__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}

#hakkimizda .about__card{
  border-radius: 22px;
  background: rgba(255,255,255,.26);
  border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 16px 44px rgba(20,30,60,.14),
    inset 0 1px 0 rgba(255,255,255,.55);
}

#hakkimizda .about__story p,
#hakkimizda .t__desc,
#hakkimizda .t__tag{
  color: rgba(18,22,32,.68);
}

/* timeline çizgisi cam uyum */
#hakkimizda .timeline::before{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.25),
    rgba(30,40,80,.20),
    rgba(255,255,255,.20)
  );
}
#hakkimizda .timeline::after{
  opacity: .65;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,130,200,.90) 35%,
    rgba(110,170,255,.90) 55%,
    transparent 90%
  );
}

/* chips glass */
#hakkimizda .about__chip{
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.32);
  color: rgba(18,22,32,.70);
}

/* divider’ı daha soft yap */
#hakkimizda .apple-divider{
  opacity: .75;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.25) 18%,
      rgba(30,40,80,.18) 50%,
      rgba(255,255,255,.25) 82%,
      transparent 100%
    ),
    linear-gradient(90deg,
      transparent 30%,
      rgba(255,130,200,.70),
      rgba(110,170,255,.70),
      transparent 70%
    );
  background-size: 100% 2px, 360px 2px;
}

/* responsive */
@media (max-width: 900px){
  #hakkimizda .about__glass{
    padding: 34px 18px;
    border-radius: 24px;
  }
  #hakkimizda .about__grid{
    grid-template-columns: 1fr;
  }
  #hakkimizda .about__blob{
    opacity: .45;
    filter: blur(26px);
  }
}



/* =========================================================
   #hakkimizda — PREMIUM BORDER (FINAL)
   - Gradient border + inner highlight + soft glow
   - Works with glassmorphism
   Paste at END of style.css
========================================================= */

#hakkimizda .about__glass{
  position: relative;
  border-radius: 28px;
  padding: 42px 34px;

  /* glass */
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  /* border yerine: clean base */
  border: 1px solid rgba(255,255,255,.22);

  /* premium depth */
  box-shadow:
    0 26px 80px rgba(20, 30, 60, .20),
    0 0 0 1px rgba(20,30,60,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
  transform: translateZ(0);
  isolation: isolate;
  overflow: hidden;
}

/* 1) Gradient border ring (çok premium) */
#hakkimizda .about__glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;                 /* border kalınlığı */
  pointer-events:none;
  z-index: 0;

  background: linear-gradient(135deg,
    rgba(255,255,255,.75) 0%,
    rgba(110,170,255,.40) 22%,
    rgba(255,130,200,.32) 52%,
    rgba(180,120,255,.28) 72%,
    rgba(255,255,255,.35) 100%
  );

  /* sadece çerçeve görünsün */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: .85;
}

/* 2) Inner light (üstten highlight) */
#hakkimizda .about__glass::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(28px - 1px);
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(900px 260px at 30% 0%,
      rgba(255,255,255,.55),
      transparent 60%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,0) 42%
    );
  opacity: .55;
}

/* content hep üstte kalsın */
#hakkimizda .about__glass > *{
  position: relative;
  z-index: 1;
}

/* 3) Hover: border parlasın (çok premium) */
#hakkimizda .about__glass:hover{
  box-shadow:
    0 34px 96px rgba(20, 30, 60, .24),
    0 0 0 1px rgba(60,120,255,.16),
    0 0 36px rgba(110,170,255,.18),
    0 0 26px rgba(255,130,200,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Mobile uyum */
@media (max-width: 900px){
  #hakkimizda .about__glass{
    padding: 34px 18px;
    border-radius: 24px;
  }
  #hakkimizda .about__glass::after{
    border-radius: calc(24px - 1px);
  }
}




/* =========================================================
   FIX — HAKKIMIZDA TOP/BOTTOM BORDER (NO CONFLICT)
   - #hakkimizda before/after KULLANMA (aurora/noise ile çakışıyor)
   - Border'ı .about__glass üzerinden veriyoruz
========================================================= */

/* Eski #hakkimizda::before / ::after border kodunu SİL */

/* Border için wrapper */
#hakkimizda .about__glass{
  position: relative;
  overflow: hidden; /* glow taşmasın */
}

/* TOP + BOTTOM çizgiler */
#hakkimizda .about__glass .edge{
  position:absolute;
  left:14px;
  right:14px;
  height:6px;
  border-radius:999px;
  pointer-events:none;
  z-index:5;
  filter: blur(.35px);
  opacity:.95;
}

#hakkimizda .about__glass .edge--top{
  top:14px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.70) 18%,
    rgba(110,170,255,.55) 38%,
    rgba(255,130,200,.45) 50%,
    rgba(110,170,255,.55) 62%,
    rgba(255,255,255,.70) 82%,
    transparent 100%
  );
  box-shadow:
    0 6px 18px rgba(110,170,255,.22),
    0 2px 10px rgba(255,130,200,.14);
}

#hakkimizda .about__glass .edge--bot{
  bottom:14px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.62) 18%,
    rgba(110,125,165,.52) 38%,
    rgba(60,120,255,.42) 50%,
    rgba(110,125,165,.52) 62%,
    rgba(255,255,255,.62) 82%,
    transparent 100%
  );
  box-shadow:
    0 -6px 18px rgba(60,120,255,.18),
    0 -2px 10px rgba(110,125,165,.14);
}

/* içerik çizgilere yapışmasın */
#hakkimizda .about__glass{
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Mobil incelt */
@media (max-width: 900px){
  #hakkimizda .about__glass .edge{
    height:4px;
    left:12px;
    right:12px;
  }
  #hakkimizda .about__glass{
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* =========================================================
   SINGLE SOURCE OVERRIDES (PASTE AT END)
   - HERO: logo wall + radial fade (NO extra HTML)
   - FIX: h2 margin typo
   - NEDEN BIZ + TRUST BADGES: tek kaynak
========================================================= */

/* FIX: invalid h2 */
h2{ margin:0 0 14px; }

/* =========================
   HERO — SINGLE SOURCE
   (NO .hero-radial element, NO conflicting fade)
========================= */

/* HERO base tokens */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  --logoW: 60px;
  --logoH: 60px;
  --gapX: 90px;
  --gapY: 90px;
  --skew: -8.5deg;

  --op1: .10;
  --op2: .06;
}

/* logo wall layers */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:-160px -120px;
  pointer-events:none;
  background-image:url("/assets/logo.png");
  background-repeat:repeat;
  background-size: calc(var(--logoW) + var(--gapX)) calc(var(--logoH) + var(--gapY));
  transform: skewY(var(--skew));
  transform-origin:center;
}

.hero::before{ z-index:1; background-position:0 0; opacity:var(--op1); }
.hero::after{
  z-index:2;
  background-position: calc((var(--logoW) + var(--gapX))/2) calc((var(--logoH) + var(--gapY))/2);
  opacity:var(--op2);
}

/* CONTENT always on top */
.hero > .wrap{ position:relative; z-index:4; }

/* ✅ Radial fade (NO extra HTML) */
.hero > .wrap::before{
  content:"";
  position:absolute;
  inset:-40px -20px;
  z-index:3;
  pointer-events:none;
  background: radial-gradient(
    70% 55% at 50% 35%,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.70) 35%,
    rgba(255,255,255,.35) 60%,
    rgba(255,255,255,0) 100%
  );
}

/* Responsive hero logo wall */
@media (max-width: 900px){
  .hero{
    --logoW: 52px;
    --logoH: 52px;
    --gapX: 72px;
    --gapY: 72px;
  }
}
@media (max-width: 600px){
  .hero{
    --logoW: 46px;
    --logoH: 46px;
    --gapX: 60px;
    --gapY: 60px;
  }
}

/* Optional: scroll timeline (supported browsers only) */
@supports (animation-timeline: scroll()){
  .hero{ view-timeline-name: --heroScroll; view-timeline-axis:block; }
  .hero::before,
  .hero::after{
    animation: heroLogoFade linear forwards;
    animation-timeline: --heroScroll;
    animation-range: entry 0% exit 100%;
  }
  .hero > .wrap::before{
    animation: heroRadialFade linear forwards;
    animation-timeline: --heroScroll;
    animation-range: entry 0% exit 100%;
  }
  @keyframes heroLogoFade{
    0%{ opacity:.12; }
    70%{ opacity:.06; }
    100%{ opacity:0; }
  }
  @keyframes heroRadialFade{
    0%{ opacity:1; }
    60%{ opacity:.4; }
    100%{ opacity:0; }
  }
}

/* =========================
   NEDEN BİZ + TRUST BADGES — SINGLE SOURCE
========================= */

#neden-biz{
  position:relative;
  color:#14161a;
  background:
    radial-gradient(1100px 420px at 15% -25%, rgba(177,130,2,.06), transparent 60%),
    radial-gradient(900px 360px at 50% -140px, rgba(110,125,165,.16), rgba(110,125,165,.07) 35%, transparent 72%),
    radial-gradient(1200px 560px at 50% 30%, rgba(255,255,255,.44), rgba(230,233,238,.66) 42%, rgba(214,219,226,.90) 72%, rgba(208,213,220,1)),
    linear-gradient(180deg,#e3e6eb,#d4d9e0);
}

#neden-biz h2{ color:#0e1016; letter-spacing:.2px; }
#neden-biz .muted{ color:#3f4652; max-width:760px; }

/* grid: 3x2 / 2x3 / 1x6 */
#neden-biz .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:1024px){
  #neden-biz .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  #neden-biz .grid{ grid-template-columns:1fr; }
}

/* tiles */
#neden-biz .tile{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,30,60,.12);
  box-shadow:0 16px 34px rgba(20,30,60,.14);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#neden-biz .tile h3{ color:#0e1016; }
#neden-biz .tile p{ color:#4e5664; line-height:1.7; }
#neden-biz .tile:hover{
  border-color:rgba(120,140,200,.50);
  box-shadow:0 22px 48px rgba(20,30,60,.18), 0 0 0 1px rgba(177,130,2,.18);
}

/* trust badges container + divider */
#neden-biz .trust-badges{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:center;
  gap:14px;
  max-width:760px;
  margin:42px auto 0;
  padding-top:22px;
  text-align:center;
}

#neden-biz .trust-badges::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:min(760px,92%);
  height:1px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent 0%, rgba(20,30,60,.22) 18%, rgba(20,30,60,.34) 50%, rgba(20,30,60,.22) 82%, transparent 100%);
  opacity:.95;
}

#neden-biz .trust-badges::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:min(760px,92%);
  height:1px;
  border-radius:999px;
  pointer-events:none;
  background: linear-gradient(90deg, transparent 35%, rgba(177,130,2,.75), transparent 65%);
  background-size:260px 1px;
  background-repeat:no-repeat;
  background-position:-260px 0;
  animation: badgesSweep 7.5s ease-in-out infinite;
  opacity:.55;
}

@keyframes badgesSweep{
  0%{ background-position:-260px 0; opacity:.22; }
  35%{ opacity:.50; }
  55%{ opacity:.70; }
  100%{ background-position:calc(100% + 260px) 0; opacity:.22; }
}

@keyframes badgeIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* badges */
#neden-biz .trust-badges .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(20,30,60,.16);
  color:#2a3140;
  box-shadow:0 6px 18px rgba(20,30,60,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space:nowrap;

  opacity:0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;
}

/* appear on view (.is-inview) */
#neden-biz.is-inview .trust-badges .badge{
  animation: badgeIn .65s cubic-bezier(.2,.8,.2,1) forwards;
}
#neden-biz.is-inview .trust-badges .badge:nth-child(1){ animation-delay:.05s }
#neden-biz.is-inview .trust-badges .badge:nth-child(2){ animation-delay:.10s }
#neden-biz.is-inview .trust-badges .badge:nth-child(3){ animation-delay:.15s }
#neden-biz.is-inview .trust-badges .badge:nth-child(4){ animation-delay:.20s }
#neden-biz.is-inview .trust-badges .badge:nth-child(5){ animation-delay:.25s }
#neden-biz.is-inview .trust-badges .badge:nth-child(6){ animation-delay:.30s }
#neden-biz.is-inview .trust-badges .badge:nth-child(7){ animation-delay:.35s }

/* center emphasis (4th) */
#neden-biz.is-inview .trust-badges .badge:nth-child(4){
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 18px 40px rgba(20,30,60,.22), 0 0 0 1px rgba(177,130,2,.35);
  border-color: rgba(177,130,2,.55);
}

/* hover */
#neden-biz .trust-badges .badge:hover{
  transform: translateY(-8px) scale(1.06);
  z-index:2;
  box-shadow: 0 22px 52px rgba(20,30,60,.28), 0 0 0 1px rgba(177,130,2,.45);
  border-color: rgba(120,140,200,.65);
  background: rgba(255,255,255,.95);
}

@media (max-width:640px){
  #neden-biz .trust-badges{ max-width:92%; gap:10px; }
  #neden-biz .trust-badges .badge{ white-space:normal; font-size:13px; padding:9px 12px; }
  #neden-biz.is-inview .trust-badges .badge{ transform:none !important; }
  #neden-biz.is-inview .trust-badges .badge:nth-child(4){ transform: scale(1.04) !important; }
}


/* =========================================================
   HİZMETLER — GLASSMORPHISM (ORANGE + GRAY + GREENISH)
   - No extra HTML (pseudo blobs)
   - Cards = glass panel + inner highlight + hover glow
   Paste at END of style.css
========================================================= */

#hizmetler{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-top: 64px;
  padding-bottom: 64px;

  /* base surface (soft concrete) */
  background:
    radial-gradient(1100px 520px at 20% -20%,
      rgba(255,140,60,.18), transparent 62%
    ),
    radial-gradient(1000px 520px at 85% 0%,
      rgba(70,220,180,.14), transparent 60%
    ),
    radial-gradient(1200px 680px at 50% 110%,
      rgba(0,0,0,.10), transparent 60%
    ),
    linear-gradient(180deg, #f3f5f8 0%, #eef1f5 55%, #e9edf3 100%);
}

/* blobs layer */
#hizmetler::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(620px 620px at 18% 22%,
      rgba(255,130,40,.90),
      rgba(255,130,40,.10) 58%,
      transparent 72%
    ),
    radial-gradient(680px 680px at 82% 28%,
      rgba(90,170,255,.85),
      rgba(90,170,255,.10) 60%,
      transparent 74%
    ),
    radial-gradient(760px 760px at 55% 92%,
      rgba(40,210,170,.80),
      rgba(40,210,170,.10) 62%,
      transparent 78%
    );

  filter: blur(28px);
  opacity:.46;
  transform: translateZ(0);
  animation: hizmetlerFloat 14s ease-in-out infinite;
}

@keyframes hizmetlerFloat{
  0%   { transform: translate3d(-1.6%, -1.2%, 0) scale(1.03); }
  50%  { transform: translate3d( 1.6%,  1.2%, 0) scale(1.06); }
  100% { transform: translate3d(-1.6%, -1.2%, 0) scale(1.03); }
}

/* subtle noise */
#hizmetler::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* content above bg */
#hizmetler .wrap{ position:relative; z-index:3; }

/* Cards (senin .tile'lar) */
#hizmetler .tile{
  position:relative;
  overflow:hidden;

  border-radius: 22px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.38);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 18px 54px rgba(20, 30, 60, .14),
    inset 0 1px 0 rgba(255,255,255,.55);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}

/* inner highlight */
#hizmetler .tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 30% 0%,
      rgba(255,255,255,.55),
      transparent 60%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 45%
    );
  opacity:.55;
}

/* border ring (premium) */
#hizmetler .tile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;

  background: linear-gradient(135deg,
    rgba(255,255,255,.65) 0%,
    rgba(255,140,60,.30) 28%,
    rgba(40,210,170,.24) 58%,
    rgba(90,170,255,.22) 78%,
    rgba(255,255,255,.30) 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:.65;
}

/* yazılar biraz daha tok */
#hizmetler .tile h3{ color: rgba(10,14,22,.90); }
#hizmetler .tile p{ color: rgba(20,30,60,.70); line-height:1.7; }

/* hover */
#hizmetler .tile:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.55);
  box-shadow:
    0 26px 80px rgba(20,30,60,.20),
    0 0 0 1px rgba(255,140,60,.16),
    0 0 34px rgba(40,210,170,.12),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* mobile biraz daha sıkı */
@media (max-width: 640px){
  #hizmetler{ padding-top: 54px; padding-bottom: 54px; }
  #hizmetler::before{ opacity:.40; filter: blur(30px); }
  #hizmetler .tile{ border-radius: 18px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #hizmetler::before{ animation:none !important; }
}

/* =========================================================
   HİZMETLER — GLASSMORPHISM (ORANGE + GRAY + GREENISH)
   - No extra HTML (pseudo blobs)
   - Cards = glass panel + inner highlight + hover glow
   Paste at END of style.css
========================================================= */

#hizmetler{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-top: 64px;
  padding-bottom: 64px;

  /* base surface (soft concrete) */
  background:
    radial-gradient(1100px 520px at 20% -20%,
      rgba(255,140,60,.18), transparent 62%
    ),
    radial-gradient(1000px 520px at 85% 0%,
      rgba(70,220,180,.14), transparent 60%
    ),
    radial-gradient(1200px 680px at 50% 110%,
      rgba(0,0,0,.10), transparent 60%
    ),
    linear-gradient(180deg, #f3f5f8 0%, #eef1f5 55%, #e9edf3 100%);
}

/* blobs layer */
#hizmetler::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(620px 620px at 18% 22%,
      rgba(255,130,40,.90),
      rgba(255,130,40,.10) 58%,
      transparent 72%
    ),
    radial-gradient(680px 680px at 82% 28%,
      rgba(90,170,255,.85),
      rgba(90,170,255,.10) 60%,
      transparent 74%
    ),
    radial-gradient(760px 760px at 55% 92%,
      rgba(40,210,170,.80),
      rgba(40,210,170,.10) 62%,
      transparent 78%
    );

  filter: blur(28px);
  opacity:.46;
  transform: translateZ(0);
  animation: hizmetlerFloat 14s ease-in-out infinite;
}

@keyframes hizmetlerFloat{
  0%   { transform: translate3d(-1.6%, -1.2%, 0) scale(1.03); }
  50%  { transform: translate3d( 1.6%,  1.2%, 0) scale(1.06); }
  100% { transform: translate3d(-1.6%, -1.2%, 0) scale(1.03); }
}

/* subtle noise */
#hizmetler::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* content above bg */
#hizmetler .wrap{ position:relative; z-index:3; }

/* Cards (senin .tile'lar) */
#hizmetler .tile{
  position:relative;
  overflow:hidden;

  border-radius: 22px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.38);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 18px 54px rgba(20, 30, 60, .14),
    inset 0 1px 0 rgba(255,255,255,.55);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}

/* inner highlight */
#hizmetler .tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 30% 0%,
      rgba(255,255,255,.55),
      transparent 60%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 45%
    );
  opacity:.55;
}

/* border ring (premium) */
#hizmetler .tile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;

  background: linear-gradient(135deg,
    rgba(255,255,255,.65) 0%,
    rgba(255,140,60,.30) 28%,
    rgba(40,210,170,.24) 58%,
    rgba(90,170,255,.22) 78%,
    rgba(255,255,255,.30) 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:.65;
}

/* yazılar biraz daha tok */
#hizmetler .tile h3{ color: rgba(10,14,22,.90); }
#hizmetler .tile p{ color: rgba(20,30,60,.70); line-height:1.7; }

/* hover */
#hizmetler .tile:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.55);
  box-shadow:
    0 26px 80px rgba(20,30,60,.20),
    0 0 0 1px rgba(255,140,60,.16),
    0 0 34px rgba(40,210,170,.12),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* mobile biraz daha sıkı */
@media (max-width: 640px){
  #hizmetler{ padding-top: 54px; padding-bottom: 54px; }
  #hizmetler::before{ opacity:.40; filter: blur(30px); }
  #hizmetler .tile{ border-radius: 18px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #hizmetler::before{ animation:none !important; }
}

@media (max-width: 600px){
  .proj_devam{
    height: 600px;
  }
}

/* Konum Chip Premium */

.proj__chip[href*="maps"]{
    cursor:pointer;
    transition: all .25s ease;
}

/* Hover Efekti */

.proj__chip[href*="maps"]:hover{

    background: #1D4ED8;   /* premium mavi */
    color:white;

    transform: translateY(-2px);

    box-shadow:
    0 8px 20px rgba(29,78,216,0.25);

}


/* Tıklama hissi */

.proj__chip[href*="maps"]:active{

    transform: translateY(0px);
    box-shadow:
    0 4px 10px rgba(29,78,216,0.2);

}

.proj__chip[href*="maps"]{

border:1px solid rgba(29,78,216,0.25);

}