/* Karataş Lazer Kesim — koyu sanayi teması (tek dosya, mobile-first) */

/* ==================== FONTLAR (self-host, Türkçe latin+latin-ext) ==================== */
/* Fontlar: Latin + Türkçe (+Latin Genişletilmiş-A) alt kümesi, tek dosya — gelistirme/font/alt-kume.mjs (OFL) */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/spacegrotesk-alt.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/archivo-alt.woff2") format("woff2");
}

/* ==================== PALET (açık grimsi tema) ==================== */
:root {
  --zemin: #f2f3f5;       /* ana açık grimsi-beyaz zemin (tam beyaz değil) */
  --yuzey: #ffffff;       /* kart/yüzey — zeminin üstünde hafif kabarır */
  --yuzey-2: #e9ebef;     /* hafif koyu yüzey (hover/inset) */
  --kenar: #dce0e6;       /* ince açık gri kenar */
  --kenar-acik: #c3cad2;  /* hover kenar */
  --metin: #15191e;       /* koyu antrasit metin */
  --soluk: #5b6773;       /* soluk koyu-gri metin */
  --acik-zemin: #e9ecef;  /* teknik/spec bölüm açık ada */
  --acik-yuzey: #ffffff;
  --acik-kenar: #cfd5db;
  --metin-koyu: #14181d;
  --soluk-koyu: #52606d;
  --vurgu: #f59e0b;       /* amber — kesim kıvılcımı (aksan/ikon/kenar) */
  --vurgu-koyu: #d97706;
  --vurgu-parlak: #fbbf24;
  --vurgu-metin: #a64c08; /* açık zeminde amber METİN: #e9ebef üstünde 4.8:1, zeminde 5.2:1 (AA) */
  --wa: #127a3c;          /* WhatsApp yeşilinin koyu tonu: beyaz yazıyla 5.4:1 (AA); #25d366 2:1 idi */
  --font-baslik: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-govde: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yaricap: 2px;
}

/* ==================== TEMEL ==================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Lenis yumuşak scroll (aktifse native smooth'u kapat; kapalıysa yukarıdaki smooth kalır) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-govde);
  font-size: var(--fs-body); line-height: 1.65;
  color: var(--metin); background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-baslik); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; font-weight: 700; text-wrap: balance; }
h1, h2 { letter-spacing: -.02em; line-height: 1.06; }
p { text-wrap: pretty; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
.kap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.atlama { position: absolute; left: -999px; top: 0; background: var(--vurgu); color: #10130f; padding: 8px 16px; z-index: 100; font-weight: 700; }
.atlama:focus { left: 0; }

/* ==================== BUTONLAR ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--yaricap); font-weight: 600; font-family: var(--font-baslik);
  text-decoration: none; text-align: center; border: 1.5px solid transparent; cursor: pointer;
  font-size: .98rem; letter-spacing: .01em; transition: background .15s, color .15s, border-color .15s;
}
.btn-dolu { background: var(--vurgu); color: #14100a; }
.btn-dolu:hover { background: var(--vurgu-parlak); }
.btn-koyu { background: var(--yuzey-2); color: var(--metin); border-color: var(--kenar); }
.btn-koyu:hover { border-color: var(--kenar-acik); background: var(--yuzey-2); }
.btn-cerceve { border-color: var(--kenar-acik); color: var(--metin); }
.btn-cerceve:hover { border-color: var(--vurgu); color: var(--vurgu); }

/* ==================== ÜST BAR ==================== */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94); /* mobilde bulanıklaştırma yok: yapışkan header her kaydırma karesinde yeniden çizilir */
  border-bottom: 1px solid var(--kenar);
}
.ust-ic { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.marka img { width: 142px; height: auto; transition: width var(--t-base) var(--ease-out); }
.ana-nav { display: none; }
.ust-tel { display: none; }
.nav-dugme {
  margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--kenar); border-radius: var(--yaricap);
  background: var(--yuzey); display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0;
}
.nav-dugme span { display: block; width: 20px; height: 2px; background: var(--metin); transition: transform .2s, opacity .2s; }
.nav-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ana-nav.acik {
  display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--yuzey); border-bottom: 1px solid var(--kenar); padding: 12px 22px 20px; gap: 2px;
}
.ana-nav a { text-decoration: none; font-weight: 600; padding: 11px 12px; border-radius: var(--yaricap); white-space: nowrap; }
.ana-nav a:hover { background: var(--yuzey-2); }
.ana-nav a[aria-current="page"] { color: var(--vurgu-metin); }
.ana-nav .nav-cta { color: #14100a; margin-top: 8px; }
.ana-nav .nav-cta:hover { background: var(--vurgu-parlak); }
@media (min-width: 900px) {
  .nav-dugme { display: none; }
  .ana-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .ana-nav a { padding: 9px 15px; font-size: 1.02rem; }
  .ana-nav .nav-cta { margin: 0 0 0 8px; padding: 11px 22px; }
  .ust-tel { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; color: var(--metin); white-space: nowrap; font-family: var(--font-baslik); }
  .ust-tel:hover { color: var(--vurgu); }
  .ust-tel svg { color: var(--vurgu); }
}

/* ==================== KESİM-YOLU AYRAÇ (imza motifi) ==================== */
.kesim-ayrac { position: relative; height: 1px; background: var(--kenar); max-width: 1160px; margin: 0 auto; }
.kesim-ayrac::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 44%; height: 1px; background: linear-gradient(90deg, transparent, var(--vurgu));
}
.kesim-ayrac::after {
  content: ""; position: absolute; left: 44%; top: 50%; width: 7px; height: 7px;
  background: var(--vurgu); transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 10px 1px rgba(245, 158, 11, .5);
}

/* ==================== SLIDER ==================== */
.slider { position: relative; height: clamp(540px, 86vh, 820px); height: clamp(540px, 86dvh, 820px); overflow: hidden; background: #0a0d11; }
.slider-parca { position: absolute; inset: 0; }
.slayt { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; display: flex; align-items: center; }
.slayt.aktif { opacity: 1; visibility: visible; z-index: 1; }
.slayt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slayt-perde { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,11,14,.9) 0%, rgba(9,11,14,.68) 44%, rgba(9,11,14,.32) 100%); }
.slayt-ic { position: relative; z-index: 2; color: #fff; width: 100%; }
.slayt-ic .ustyazi { color: var(--vurgu); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; margin-bottom: 14px; font-family: var(--font-baslik); }
.slayt-ic h1, .slayt-baslik { color: #fff; font-size: clamp(2rem, 5.4vw, 3.6rem); font-weight: 700; line-height: 1.04; max-width: 22ch; margin: 0 0 16px; }
.slayt-metin { color: #d6dce2; font-size: clamp(1rem, 1.6vw, 1.16rem); max-width: 46ch; margin: 0 0 26px; }
/* koyu fotoğraf üstünde çerçeve düğme: açık zemin için olan koyu metin burada görünmüyordu */
.slider .btn-cerceve { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(10,13,17,.35); }
.slider .btn-cerceve:hover { color: var(--vurgu); border-color: var(--vurgu); background: rgba(10,13,17,.55); }
.slayt.aktif .slayt-ic > * { animation: slaytGir .55s both; }
.slayt.aktif .slayt-ic > *:nth-child(2) { animation-delay: .06s; }
.slayt.aktif .slayt-ic > *:nth-child(3) { animation-delay: .12s; }
.slayt.aktif .slayt-ic > *:nth-child(4) { animation-delay: .18s; }
@keyframes slaytGir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.slider-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 50px; height: 50px; border-radius: var(--yaricap);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  color: #fff; display: grid; place-content: center; cursor: pointer; backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s;
}
.slider-ok:hover { background: var(--vurgu); border-color: var(--vurgu); color: #14100a; }
.slider-onceki { left: 16px; }
.slider-sonraki { right: 16px; }
.slider-nokta { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 9px; }
/* Görünen çizgi 3px, dokunma/tıklama alanı 30×24px (WCAG 2.5.8 hedef boyutu) */
.slider-nokta .nokta { position: relative; width: 30px; height: 24px; border: 0; padding: 0; cursor: pointer; background: transparent; }
.slider-nokta .nokta::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(255,255,255,.35); transition: background .2s; }
.slider-nokta .nokta.aktif::before { background: var(--vurgu); }
.slider-rozet { position: absolute; bottom: 20px; right: 22px; z-index: 5; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.slider-rozet li { display: flex; align-items: center; gap: 7px; color: #fff; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); padding: 6px 12px; }
.slider-rozet svg { color: var(--vurgu); }
@media (max-width: 860px) {
  .slider-ok { width: 40px; height: 40px; } .slider-onceki { left: 8px; } .slider-sonraki { right: 8px; }
  .slider-rozet { display: none; }
  .slayt { align-items: flex-end; } .slayt-ic { padding-bottom: 70px; }
  .slayt-perde { background: linear-gradient(0deg, rgba(9,11,14,.94) 12%, rgba(9,11,14,.5) 60%, rgba(9,11,14,.32) 100%); }
}
@media (prefers-reduced-motion: reduce) { .slayt { transition: none; } .slayt.aktif .slayt-ic > * { animation: none; } }

/* ==================== BÖLÜM DÜZENİ ==================== */
.bolum { padding: var(--sp-bolum) 0; }
.bolum-beyaz { background: var(--yuzey); border-block: 1px solid var(--kenar); }
.bolum-koyu { background: #e6e9ed; border-block: 1px solid var(--kenar); }
.bolum-acik { background: var(--acik-zemin); color: var(--metin-koyu); border-block: 1px solid var(--acik-kenar); }
.bolum-acik h2, .bolum-acik h3 { color: var(--metin-koyu); }
.bolum-acik .soluk, .bolum-acik p { color: var(--soluk-koyu); }
.bolum-bas { max-width: 640px; margin-bottom: 32px; }
.bolum-bas .ustyazi { color: var(--vurgu-metin); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; margin-bottom: 10px; font-family: var(--font-baslik); }
.bolum-bas p { color: var(--soluk); }
.ustyazi { color: var(--vurgu-metin); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-family: var(--font-baslik); }
@media (min-width: 900px) { .bolum { padding: var(--sp-9) 0; } }

/* ==================== SPEC ŞERİDİ (3 sütun kart yerine) ==================== */
.spec-serit { display: grid; grid-template-columns: 1fr; border: 1px solid var(--kenar); }
.spec-oge { padding: 26px 24px; border-bottom: 1px solid var(--kenar); }
.spec-oge:last-child { border-bottom: 0; }
.spec-oge .spec-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.spec-oge .spec-no { font-family: var(--font-baslik); font-size: .8rem; color: var(--vurgu-metin); font-weight: 700; letter-spacing: .1em; }
.spec-oge svg { color: var(--vurgu); flex: none; }
.spec-oge h3 { margin: 0 0 6px; }
.spec-oge p { margin: 0; color: var(--soluk); font-size: .95rem; }
@media (min-width: 820px) {
  .spec-serit { grid-template-columns: repeat(3, 1fr); }
  .spec-oge { border-bottom: 0; border-right: 1px solid var(--kenar); }
  .spec-oge:last-child { border-right: 0; }
}

/* ==================== DOSYA FORMAT ŞERİDİ (hero altı) ==================== */
.dosya-serit { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 14px 18px; background: var(--yuzey); border: 1px solid var(--kenar); border-left: 3px solid var(--vurgu); }
.dosya-serit svg { color: var(--vurgu); flex: none; }
.dosya-serit p { margin: 0; font-size: .96rem; }
.dosya-serit strong { color: var(--metin); font-family: var(--font-baslik); font-weight: 700; }
.dosya-serit .dosya-serit-not { color: var(--soluk); }
@media (max-width: 560px) { .dosya-serit .dosya-serit-not { display: block; margin-top: 3px; } }

/* ==================== HİZMET IZGARASI ==================== */
.izgara { display: grid; gap: 1px; background: var(--kenar); border: 1px solid var(--kenar); }
.izgara-3 { grid-template-columns: 1fr; }
.izgara-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .izgara-3, .izgara-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .izgara-3 { grid-template-columns: repeat(3, 1fr); } .izgara-4 { grid-template-columns: repeat(4, 1fr); } }
.kart { background: var(--yuzey); overflow: hidden; display: flex; flex-direction: column; transition: background .15s; }
a.kart { text-decoration: none; }
a.kart:hover { background: var(--yuzey-2); }
a.kart:hover .kart-link { color: var(--vurgu-parlak); }
.kart img { aspect-ratio: 16/10; object-fit: cover; width: 100%; filter: grayscale(.15) contrast(1.02); }
.kart-ic { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.kart-ic h3 { margin-bottom: 6px; }
.kart-ic p { color: var(--soluk); font-size: .93rem; margin: 0 0 12px; flex: 1; }
.kart-link { color: var(--vurgu-metin); font-weight: 700; font-size: .9rem; font-family: var(--font-baslik); }

/* eski ozellik-kart (yedek) */
.ozellik-kart { background: var(--yuzey); border: 1px solid var(--kenar); padding: 24px; }
.ozellik-kart .ikon { width: 44px; height: 44px; background: rgba(245,158,11,.12); color: var(--vurgu); display: grid; place-content: center; margin-bottom: 14px; }
.ozellik-kart p { color: var(--soluk); font-size: .94rem; margin: 0; }

/* ==================== STEPPER (3 adım, kesim-yolu hattı) ==================== */
.stepper { position: relative; display: grid; gap: 26px; grid-template-columns: 1fr; }
.adim { position: relative; padding-left: 56px; }
.adim .no {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  background: var(--vurgu); color: #14100a; font-family: var(--font-baslik); font-weight: 700;
  display: grid; place-content: center; font-size: 1.05rem; border-radius: var(--yaricap);
}
.adim h3 { margin: 6px 0 6px; }
.adim p { color: var(--soluk); font-size: .95rem; margin: 0; }
@media (min-width: 820px) {
  .stepper { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .adim { padding-left: 0; padding-top: 58px; }
  .adim .no { top: 0; }
  /* kesim-yolu bağlantı çizgisi */
  .stepper::before {
    content: ""; position: absolute; top: 20px; left: 6%; right: 6%; height: 1px;
    background: repeating-linear-gradient(90deg, var(--vurgu) 0 10px, transparent 10px 20px);
    opacity: .5;
  }
}

/* ==================== TEKNİK FÖY (spec-sheet) ==================== */
.foy { border: 1px solid var(--acik-kenar); background: var(--acik-yuzey); }
.foy-satir { display: grid; grid-template-columns: 1fr; gap: 2px 0; padding: 14px 20px; border-bottom: 1px solid var(--acik-kenar); }
.foy-satir:last-child { border-bottom: 0; }
.foy-etiket { font-family: var(--font-baslik); font-weight: 600; color: var(--metin-koyu); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.foy-deger { color: var(--soluk-koyu); font-size: 1rem; }
.foy-deger strong { color: var(--metin-koyu); }
@media (min-width: 620px) { .foy-satir { grid-template-columns: 260px 1fr; align-items: baseline; gap: 20px; padding: 16px 24px; } }

/* ==================== SSS ==================== */
.sss { max-width: 760px; border: 1px solid var(--kenar); }
.sss details { border-bottom: 1px solid var(--kenar); background: var(--yuzey); }
.sss details:last-child { border-bottom: 0; }
.sss summary { cursor: pointer; font-family: var(--font-baslik); font-weight: 600; padding: 15px 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--vurgu-metin); border-bottom: 2px solid var(--vurgu-metin); transform: rotate(45deg); transition: transform var(--t-base) var(--ease-out); margin-right: 4px; }
.sss details[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
  .sss details[open] p { animation: sssAc var(--t-base) var(--ease-out) both; }
}
@keyframes sssAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sss details p { padding: 0 18px 16px; margin: 0; color: var(--soluk); }

/* ==================== CTA BANDI ==================== */
.cta-bant { background: var(--yuzey-2); border: 1px solid var(--kenar); padding: 38px 26px; text-align: center; }
.cta-bant h2 { color: var(--metin); }
.cta-bant p { color: var(--soluk); max-width: 56ch; margin-inline: auto; }
.cta-bant .hero-eylem { justify-content: center; }
@media (min-width: 900px) { .cta-bant { padding: 52px; } }

/* ==================== İÇERİK SAYFASI ==================== */
.hero-eylem { display: flex; flex-wrap: wrap; gap: 12px; }
.rozetler { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.rozetler li { background: var(--yuzey); border: 1px solid var(--kenar); padding: 7px 15px; font-size: .86rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.rozetler svg { color: var(--vurgu); flex: none; }
.hero { padding: 54px 0 40px; }
.hero-izgara { display: grid; gap: 32px; align-items: center; }
.hero .ustyazi { display: block; margin-bottom: 10px; }
.hero p.buyuk { font-size: 1.1rem; color: var(--soluk); max-width: 56ch; }
.hero-gorsel img { border: 1px solid var(--kenar); }
@media (min-width: 900px) { .hero { padding: 72px 0 60px; } .hero-izgara { grid-template-columns: 1.05fr .95fr; gap: 52px; } }
.kirinti { font-size: .84rem; color: var(--soluk); padding: 18px 0 0; }
.kirinti ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kirinti a { color: var(--soluk); }
.kirinti li + li::before { content: "›"; margin-right: 6px; color: var(--kenar-acik); }
.icerik-izgara { display: grid; gap: 34px; }
@media (min-width: 980px) { .icerik-izgara { grid-template-columns: 1fr 330px; align-items: start; } }
.duz-icerik h2 { margin-top: 1.5em; }
.duz-icerik p, .duz-icerik li { color: var(--soluk); }
.duz-icerik ul { padding-left: 20px; }
.yan-kutu { background: var(--yuzey); border: 1px solid var(--kenar); padding: 24px; position: sticky; top: 88px; }
.yan-kutu h3 { margin-bottom: 12px; }
.yan-kutu ul { list-style: none; margin: 0 0 18px; padding: 0; }
.yan-kutu li { padding: 8px 0; border-bottom: 1px solid var(--kenar); display: flex; gap: 10px; align-items: start; font-size: .93rem; }
.yan-kutu li:last-child { border-bottom: 0; }
.yan-kutu li svg { color: var(--vurgu); flex: none; margin-top: 4px; }
.yan-kutu .btn { width: 100%; }
.gorsel-cerceve img { border: 1px solid var(--kenar); }

/* ==================== TEKLİF FORMU (koyu, kompakt) ==================== */
.teklif-bolum { position: relative; overflow: hidden; padding: 46px 0; background: var(--yuzey-2); border-block: 1px solid var(--kenar); }
.teklif-bolum .ustyazi { margin-bottom: 10px; display: block; }
.teklif-bolum h2 { color: var(--metin); }
.teklif-izgi {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(680px 380px at 12% 15%, #000 0%, transparent 72%);
  mask-image: radial-gradient(680px 380px at 12% 15%, #000 0%, transparent 72%);
}
.teklif-kompakt .teklif-ust { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.teklif-ust-yazi { max-width: 640px; }
.teklif-kompakt .teklif-ust h2 { margin: 0 0 6px; }
.teklif-alt { color: var(--soluk); margin: 0; font-size: .96rem; }
.teklif-hizmet { margin: 0 0 12px; font-size: .92rem; color: var(--soluk); }
.teklif-hizmet strong { color: var(--metin); }
.teklif-iletisim { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.teklif-tel { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-baslik); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--metin); }
.teklif-tel svg { color: var(--vurgu); }
.teklif-wa { color: var(--vurgu-metin); font-weight: 700; text-decoration: none; font-family: var(--font-baslik); }

.teklif-kart { position: relative; z-index: 1; background: var(--yuzey); border: 1px solid var(--kenar); border-top: 2px solid var(--vurgu); padding: 22px 20px; }
@media (min-width: 700px) { .teklif-kart { padding: 26px; } }
.teklif-tarama { display: none; }
.teklif-kart .form-izgara { display: grid; gap: 13px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .teklif-kompakt .form-izgara { grid-template-columns: 1fr 1fr; } .teklif-kart .form-tam { grid-column: 1 / -1; } }
.teklif-kart label { display: block; font-family: var(--font-baslik); font-weight: 600; margin-bottom: 6px; font-size: .88rem; color: var(--metin); }
.teklif-kart input[type="text"], .teklif-kart input[type="tel"], .teklif-kart input[type="email"],
.teklif-kart select, .teklif-kart textarea {
  width: 100%; padding: 12px 14px; min-height: 48px; border-radius: var(--yaricap); font: inherit; font-family: var(--font-govde);
  background: var(--yuzey); border: 1px solid var(--kenar); color: var(--metin); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.teklif-kart input::placeholder, .teklif-kart textarea::placeholder { color: #6b7580; }
.teklif-kart select option { color: #111; }
.teklif-kart textarea { min-height: 84px; resize: vertical; }
.teklif-kart input:focus, .teklif-kart select:focus, .teklif-kart textarea:focus { border-color: var(--vurgu); outline: 2px solid var(--vurgu); outline-offset: 2px; box-shadow: none; }
.teklif-kart .ipucu { font-size: .82rem; color: var(--soluk); margin: 6px 0 0; } /* 5.8:1 (eski #7c8691 3.7:1) */
/* Canlı doğrulama geri bildirimi */
.teklif-kart input.gecerli {
  border-color: rgba(52,209,127,.55); padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d17f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
}
.teklif-kart input.gecersiz { border-color: rgba(224,85,78,.55); }

.dosya-birak { position: relative; border: 1px dashed var(--kenar-acik); padding: 18px 16px; text-align: center; cursor: pointer; color: var(--soluk); transition: border-color .15s, background .15s; }
.dosya-birak:hover, .dosya-birak:focus-within { border-color: var(--vurgu); background: rgba(245,158,11,.05); }
.dosya-birak:focus-within { outline: 2px solid var(--vurgu); outline-offset: 2px; } /* odak yerel dosya girdisinde; kutu görünür halka alır */
.dosya-birak.uzerinde { border-color: var(--vurgu); background: rgba(245,158,11,.1); }
.dosya-birak .dosya-ikon { color: var(--vurgu); margin: 0 auto 6px; }
.dosya-birak-ana { margin: 0 0 4px; font-size: .96rem; }
.dosya-birak input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dosya-mini { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px; font-size: .84rem; min-height: 46px; }
.dosya-mini .dosya-ikon { margin: 0; flex: none; width: 22px; height: 22px; }
.dosya-mini strong { color: var(--metin); }
.dosya-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.dosya-liste li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 12px; margin-bottom: 8px; font-size: .9rem; background: var(--zemin); border: 1px solid var(--kenar); }
.dosya-liste li { animation: cipGir .22s ease both; }
@keyframes cipGir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dosya-liste li { animation: none; } }
.dosya-liste li.hatali { border-color: #e0554e; color: #b42318; }
.dosya-liste .dl-boyut { color: var(--soluk); flex: none; } /* 5.8:1 (eski #7c8691 3.7:1 AA altıydı) */
#dosyaUyari { color: #b42318; font-weight: 600; }
#dosyaUyari:empty, .dosya-liste:empty { display: none; }

.teklif-kart .onay { display: flex; gap: 10px; align-items: start; font-size: .9rem; color: var(--soluk); }
.teklif-kart .onay input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--vurgu); flex: none; }
.teklif-kart .onay a { color: var(--vurgu-metin); }
.teklif-gonder-satir { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin-top: 2px; }
.teklif-gonder-satir .onay { flex: 1 1 300px; margin: 0; }
.teklif-gonder { position: relative; overflow: hidden; font-size: 1rem; width: 100%; min-height: 52px; padding-inline: 30px; gap: 8px; }
.gonder-ok { transition: transform .16s; }
.teklif-gonder:hover .gonder-ok { transform: translateX(4px); }
.teklif-gonder.gonderiliyor .gonder-ok { display: none; }
.teklif-gonder .gonder-ilerleme { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; }
.teklif-gonder .gonder-ilerleme > span { display: block; height: 100%; width: 0; background: rgba(20,16,10,.6); transition: width .2s; }
.teklif-gonder.gonderiliyor { opacity: .85; cursor: progress; }
.teklif-gonder.gonderiliyor .gonder-yazi::after { content: "…"; }

.form-hata { background: rgba(224,85,78,.1); border: 1px solid rgba(224,85,78,.45); color: #b42318; padding: 13px 16px; margin-bottom: 16px; font-size: .94rem; }
.form-hata ul { margin: 6px 0 0; padding-left: 18px; }
.teklif-basari { text-align: center; padding: 22px 6px; }
.teklif-basari .basari-daire { width: 72px; height: 72px; border-radius: 999px; margin: 0 auto 14px; background: rgba(37,211,102,.14); color: #34d17f; display: grid; place-content: center; }
.teklif-basari h3 { color: var(--metin); font-size: 1.35rem; }
.teklif-basari #basariTalepNo { color: var(--vurgu-metin); font-size: 1.1rem; letter-spacing: .03em; }

/* ==================== HARİTA ==================== */
.harita-cerceve { border: 1px solid var(--kenar); line-height: 0; }
.harita-cerceve iframe { width: 100%; height: 340px; border: 0; filter: grayscale(.2) contrast(.98); }

/* ==================== İLETİŞİM BÖLÜMÜ ==================== */
.iletisim-izgara { display: grid; gap: 22px; }
@media (min-width: 900px) { .iletisim-izgara { grid-template-columns: 1fr 1.12fr; align-items: stretch; } }
.iletisim-kartlar { display: grid; gap: 13px; align-content: start; }
.iletisim-kart {
  display: flex; gap: 15px; align-items: center; text-decoration: none;
  background: var(--yuzey); border: 1px solid var(--kenar); border-left: 3px solid var(--vurgu);
  padding: 15px 17px; transition: border-color .15s, background .15s, transform .12s;
}
.iletisim-kart:hover { background: var(--yuzey-2); border-left-color: var(--vurgu-parlak); transform: translateX(2px); }
.iletisim-wa { border-left-color: var(--wa); }
.iletisim-wa:hover { border-left-color: #38e07b; }
.ik-ikon { flex: none; width: 46px; height: 46px; display: grid; place-content: center; background: var(--vurgu); color: #14100a; }
.ik-ikon.ik-wa { background: var(--wa); color: #fff; }
.ik-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ik-etiket { font-family: var(--font-baslik); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu-metin); font-weight: 700; }
.iletisim-wa .ik-etiket { color: var(--wa); }
.ik-deger { color: var(--metin); font-weight: 600; font-size: .97rem; line-height: 1.32; word-break: break-word; }
.ik-alt { color: var(--soluk); font-size: .82rem; }
.iletisim-izgara .harita-cerceve { display: flex; }
.iletisim-izgara .harita-cerceve iframe { height: 100%; min-height: 360px; flex: 1; }
#harita3d { flex: 1; width: 100%; min-height: 360px; display: block; background: #e6e9ed; }
#harita3d gmp-map-3d { width: 100%; height: 100%; }
/* Elfsight widget yeri (yükleme sırasında sıçrama olmasın) */
[class*="elfsight-app-"] { min-height: 200px; }

/* ==================== GOOGLE YORUMLARI ==================== */
.yorum-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--kenar); }
.yorum-puan { font-family: var(--font-baslik); font-size: 2rem; font-weight: 700; color: var(--vurgu-metin); line-height: 1; }
.yildizlar { display: inline-flex; gap: 2px; }
.yildiz { fill: #c7ced6; }
.yildiz.dolu { fill: var(--vurgu); }
.yorum-sayi { color: var(--soluk); font-size: .92rem; }
.yorum-link { color: var(--vurgu-metin); font-weight: 700; font-family: var(--font-baslik); text-decoration: none; font-size: .9rem; margin-left: auto; }
.yorum-izgara { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .yorum-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .yorum-izgara { grid-template-columns: repeat(3, 1fr); } }
.yorum-kart { background: var(--yuzey); border: 1px solid var(--kenar); padding: 20px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.yorum-yazar { display: flex; align-items: center; gap: 12px; }
.yorum-yazar img, .yorum-avatar { width: 40px; height: 40px; border-radius: 999px; flex: none; }
.yorum-avatar { background: var(--vurgu); color: #14100a; display: grid; place-content: center; font-family: var(--font-baslik); font-weight: 700; }
.yorum-kim { display: flex; flex-direction: column; }
.yorum-kim strong { color: var(--metin); font-size: .95rem; }
.yorum-zaman { color: var(--soluk); font-size: .8rem; }
.yorum-kart blockquote { margin: 0; color: var(--soluk); font-size: .93rem; line-height: 1.55; }
.yorum-fallback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--yuzey); border: 1px solid var(--kenar); border-left: 3px solid var(--vurgu); padding: 24px; }
.yorum-fallback-yazi { display: flex; align-items: center; gap: 14px; }
.yorum-fallback-yazi p { margin: 0; }

/* ==================== ALT BÖLÜM ==================== */
.alt { background: #e6e9ed; color: var(--soluk); margin-top: 0; border-top: 1px solid var(--kenar); }
.alt-izgara { display: grid; gap: 30px; padding: 50px 22px 38px; }
@media (min-width: 900px) { .alt-izgara { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.alt-marka { font-family: var(--font-baslik); font-size: 1.25rem; font-weight: 700; color: var(--metin); margin-bottom: 10px; }
.alt-marka span { color: var(--vurgu-metin); }
.alt-metin { font-size: .92rem; }
.alt-baslik { font-family: var(--font-baslik); color: var(--metin); font-weight: 600; margin: 0 0 12px; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: 8px; }
.alt a { color: var(--soluk); text-decoration: none; font-size: .93rem; }
.alt a:hover { color: var(--vurgu); }
.alt address { font-style: normal; font-size: .93rem; }
.alt .btn-cerceve { margin-top: 8px; font-size: .9rem; padding: 10px 18px; }
.alt-bant { border-top: 1px solid var(--kenar); padding: 18px 0; font-size: .85rem; }
.alt-bant p { margin: 0; }

/* ==================== WHATSAPP ==================== */
.btn-wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.btn-wa:hover { background: #0e6631; border-color: #0e6631; }
.btn-wa svg, .wa-link svg { flex: none; }
.wa-link {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-baslik);
  font-weight: 700; text-decoration: none; color: var(--wa);
}
.wa-link:hover { color: #38e07b; }

.wa-dugme {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px;
  border-radius: 999px; background: var(--wa); color: #fff; display: grid; place-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .18s;
}
.wa-dugme:hover { background: #0e6631; transform: scale(1.08); }
.wa-dugme::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--wa);
  z-index: -1; animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
.wa-etiket {
  position: fixed; right: 84px; bottom: 30px; z-index: 60;
  background: var(--yuzey-2); color: var(--metin); border: 1px solid var(--kenar);
  padding: 8px 14px; font-size: .84rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: opacity .18s, transform .18s; pointer-events: none;
}
.wa-dugme:hover + .wa-etiket { opacity: 1; transform: none; }
@media (max-width: 640px) { .wa-etiket { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-dugme::after { animation: none; } }

/* ==================== WHATSAPP MODAL ==================== */
.wa-modal { position: fixed; inset: 0; z-index: 80; display: none; }
.wa-modal.acik { display: block; }
.wa-modal-arka { position: absolute; inset: 0; background: rgba(10,13,17,.55); backdrop-filter: blur(6px); }
.wa-modal-kutu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 400px); max-height: 90vh; overflow: auto;
  background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--kenar); border-top: 3px solid var(--wa);
  padding: 22px 20px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: waModalGir .2s ease both;
}
@keyframes waModalGir { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .wa-modal-kutu { animation: none; } }
.wa-modal-kapat {
  position: absolute; right: 8px; top: 6px; width: 36px; height: 36px;
  border: 0; background: none; color: var(--soluk); font-size: 1.7rem; line-height: 1;
  cursor: pointer; border-radius: var(--yaricap);
}
.wa-modal-kapat:hover, .wa-modal-kapat:focus-visible { color: var(--metin); outline: none; background: var(--yuzey-2); }
.wa-modal-bas { display: flex; align-items: center; gap: 11px; padding-right: 30px; }
.wa-modal-ikon { width: 36px; height: 36px; border-radius: 999px; background: var(--wa); color: #fff; display: grid; place-content: center; flex: none; }
.wa-modal-kutu h2 { font-size: 1.16rem; margin: 0; }
.wa-modal-alt { color: var(--soluk); font-size: .9rem; margin: 8px 0 14px; }
.wa-modal-kutu label { display: block; font-family: var(--font-baslik); font-weight: 600; font-size: .85rem; margin: 12px 0 6px; }
.wa-modal-kutu select, .wa-modal-kutu input[type="text"] {
  width: 100%; padding: 11px 13px; min-height: 48px; font: inherit; font-family: var(--font-govde);
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--yaricap); color: var(--metin);
  transition: border-color .15s, box-shadow .15s;
}
.wa-modal-kutu input::placeholder { color: #6b7580; } /* 4.7:1 (eski #8a929c 3.2:1) */
.wa-modal-kutu select:focus, .wa-modal-kutu input:focus { outline: none; border-color: var(--wa); box-shadow: 0 0 0 3px rgba(37,211,102,.18); }
.wa-modal-gonder { width: 100%; margin-top: 18px; justify-content: center; }
.wa-modal-uyari { color: #b42318; font-size: .86rem; margin: 10px 0 0; font-weight: 600; }
.wa-modal-uyari[hidden] { display: none; }

/* Sticky header gözcüsü: sayfanın 80px altında 1px'lik görünmez işaret (header-nav.js) */
.ust-gozcu { position: absolute; top: 80px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ==================== YARDIMCILAR ==================== */
.gizli-alan { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ortala { text-align: center; }
.soluk { color: var(--soluk); }
.mt-0 { margin-top: 0; }

/* ==================== ADIM 2/4 — ETKİLEŞİM & KART CİLASI ==================== */

/* Hover geri bildirimi yalnızca gerçek hover cihazlarında (mobilde taklit yok) */
@media (hover: hover) {
  .btn { transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
  .btn-dolu:hover, .btn-wa:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
  .btn-dolu:active, .btn-wa:active { transform: translateY(0); box-shadow: var(--sh-1); }
  a.kart { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out); }
  a.kart:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  a.kart:hover .kart img { transform: scale(1.04); }
  a.kart:hover .kart-link { transform: translateX(3px); }
  .iletisim-kart:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
  .wa-dugme:hover { box-shadow: var(--sh-3); }
}
.kart img { transition: transform var(--t-slow) var(--ease-out); }
.kart-link { display: inline-flex; align-items: center; gap: 6px; transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }

/* Hizmet kartı açıklamaları 2 satıra sabit → eşit yükseklik */
.kart-ic p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Yorum metni 4 satıra sabit */
.yorum-kart blockquote { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 01-02-03 numaraları filigran (dev, çok soluk, arka planda) */
.spec-oge { position: relative; overflow: hidden; }
.spec-oge .spec-no { position: absolute; top: 6px; right: 16px; font-size: 3.4rem; line-height: 1; font-weight: 800; color: var(--metin); opacity: .06; letter-spacing: 0; }

/* Footer: başlıklar küçük-kaps; linkler markaya değil mürekkebe koyulaşsın (amber azalt) */
.alt-baslik { text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-small); }
.alt a:hover { color: var(--metin); }

/* Yüzen WhatsApp: sürekli titreşim KALDIRILDI (ucuz görünüyordu), yumuşak gölge */
.wa-dugme { box-shadow: var(--sh-2); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.wa-dugme::after { display: none; }

/* ==================== ADIM 3 — GİRİŞ HAREKETİ (scroll-reveal) ==================== */
/* Yalnızca JS fold-altı öğelere .anim ekler; JS/reduced-motion yoksa görünür. */
.anim { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.anim.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anim { opacity: 1; transform: none; transition: none; } }

/* ==================== ADIM 2.1 — HERO SLIDER CİLASI ==================== */
/* Ken Burns: aktif slayt görseli çok hafif yerleşme zoom'u (1.05 → 1) */
@keyframes kenBurns { from { transform: scale(1.05); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .slayt.aktif .slayt-bg { animation: kenBurns 7s var(--ease-out) both; will-change: transform; }
}
/* Oklar sade, slider'a gelince belirginleşir (dokunmatikte görünür kalır) */
.slider-ok { opacity: .62; transition: opacity var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
@media (hover: hover) {
  .slider:hover .slider-ok { opacity: 1; }
  .slider-ok:focus-visible { opacity: 1; }
}

/* ==================== EK GÖREV: HEADER — Varyant 1 (tek satır, sade) ==================== */
#teklif-al, #icerik { scroll-margin-top: 88px; }

/* Sticky küçülme */
.ust.kucuk { box-shadow: var(--sh-1); }
/* Not: küçülürken kutu yüksekliği DEĞİŞMEZ (yapışkan header'ın yüksekliği değişince altındaki
   içerik kayar = CLS). Yalnız logo küçülür ve gölge gelir. */
.ust.kucuk .marka img { width: 116px; }
.ust-ic { transition: min-height var(--t-base) var(--ease-out); }

/* Hizmetlerimiz açılır menü tetiği (buton, nav linkiyle aynı görünür) */
.nav-alt-sar { position: relative; }
.nav-alt-tetik { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 600; font-family: var(--font-govde); background: none; border: 0; cursor: pointer; color: inherit; padding: 11px 12px; border-radius: var(--yaricap); }
.nav-alt-tetik:hover { background: var(--yuzey-2); }
.nav-alt-tetik .nav-alt-ok { transition: transform var(--t-base) var(--ease-out); flex: none; }
.nav-alt-tetik[aria-expanded="true"] .nav-alt-ok { transform: rotate(180deg); }
.nav-alt-menu { list-style: none; margin: 0; padding: 0; }
.nav-alt-menu a { display: block; text-decoration: none; }

/* MOBİL: akordiyon */
@media (max-width: 899px) {
  .nav-alt-tetik { width: 100%; justify-content: space-between; }
  .nav-alt-menu { display: none; padding: 2px 0 6px 12px; }
  .nav-alt-menu.acik { display: block; }
  .nav-alt-menu a { padding: 10px 12px; font-size: .96rem; border-radius: var(--yaricap); }
  .nav-alt-menu a:hover { background: var(--yuzey-2); }
  .nav-alt-tum a { color: var(--vurgu-metin); font-weight: 700; }
}

/* MASAÜSTÜ: dropdown panel + aktif alt çizgi */
@media (min-width: 900px) {
  .nav-alt-tetik { padding: 9px 15px; font-size: 1.02rem; }
  .ana-nav a, .nav-alt-tetik { position: relative; }
  .ana-nav a[aria-current="page"], .nav-alt-tetik[data-aktif="1"] { color: var(--vurgu-metin); }
  .ana-nav a[aria-current="page"]::after, .nav-alt-tetik[data-aktif="1"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--vurgu); }
  .nav-alt-menu {
    position: absolute; top: 100%; left: 0; min-width: 258px;
    background: var(--yuzey); border: 1px solid var(--kenar); box-shadow: var(--sh-2);
    padding: 6px; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
  }
  .nav-alt-sar:hover .nav-alt-menu, .nav-alt-sar:focus-within .nav-alt-menu, .nav-alt-menu.acik {
    opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  }
  .nav-alt-menu a { padding: 9px 12px; border-radius: var(--yaricap); font-size: .95rem; color: var(--metin); }
  .nav-alt-menu a:hover { background: var(--yuzey-2); color: var(--vurgu-metin); }
  .nav-alt-tum { border-top: 1px solid var(--kenar); margin-top: 4px; padding-top: 2px; }
  .nav-alt-tum a { color: var(--vurgu-metin); font-weight: 700; font-family: var(--font-baslik); }
}
@media (prefers-reduced-motion: reduce) { .nav-alt-menu, .nav-alt-ok, .ust-ic { transition: none; } }

/* ==================== EK GÖREV: DÖVİZ / GRAM ALTIN ŞERİDİ ==================== */
/* Şerit header'ın DIŞINDA, normal akışta: kaydırınca doğal olarak kayar, yapışkan header tek başına kalır (CLS yok) */
.kur-serit { background: var(--yuzey-2); border-bottom: 1px solid var(--kenar); min-height: 35px; }
.kur-ic { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 34px; }
.kur-liste { display: flex; align-items: center; gap: 20px; font-variant-numeric: tabular-nums; }
.kur-oge { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.kur-oge .kur-etiket { color: var(--soluk); font-weight: 600; font-size: .76rem; }
.kur-oge .kur-deger { color: var(--metin); font-weight: 700; font-family: var(--font-baslik); font-size: .82rem; }
.kur-not { color: var(--soluk); font-size: .72rem; white-space: nowrap; }
.kur-yer { color: var(--soluk); letter-spacing: .3em; font-size: .82rem; }
/* şeridin sağı: konum, Instagram, e-posta */
.serit-baglanti { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.serit-baglanti a { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 34px; }
.serit-baglanti a:hover, .serit-baglanti a:focus-visible { color: var(--vurgu-metin); }
.serit-baglanti svg { flex: none; color: var(--vurgu-koyu); }
@media (max-width: 1180px) { .sb-eposta { display: none; } }
@media (max-width: 991px) {
  .kur-oge[data-kod="EURTRY"] { display: none; }  /* mobilde EUR gizle (dar ekran) */
  .kur-not { display: none; }
  .kur-liste { gap: 16px; }
  .serit-baglanti { gap: 4px; }
  .serit-baglanti .sb-yazi { display: none; }      /* mobilde yalnız ikon (dokunma hedefi 34px) */
  .serit-baglanti a { min-width: 34px; justify-content: center; }
}

/* ==================== TASTE/REDESIGN DENETİMİ — CİLA ==================== */

/* 1) Okunabilir satır uzunluğu (~65-68ch) — gövde metni sayfayı boydan boya germesin */
.duz-icerik p, .duz-icerik li, .bolum-bas p, .teklif-alt, .alt-metin { max-width: 68ch; }

/* 2) Daha ince tipografik hiyerarşi: 500 ağırlık (önceden sadece 400/600/700 vardı) */
.ana-nav a, .nav-alt-tetik, .alt a, .kirinti { font-weight: 500; }
.ik-deger, .foy-deger { font-weight: 500; }

/* 3) Rakamlar tabular — telefon/spec/teknik değerler hizalı dursun */
.ust-tel, .teklif-tel, .ik-deger, .spec-no, .foy-deger, .yorum-puan { font-variant-numeric: tabular-nums; }

/* 4) Basılı (:active) geri bildirim — fiziksel tık hissi */
@media (hover: hover) {
  .btn:active, .nav-cta:active { transform: translateY(1px); box-shadow: var(--sh-1); }
  a.kart:active { transform: translateY(-1px); }
  .iletisim-kart:active { transform: translateY(0); }
  /* slider okları translateY(-50%) ile ortalanır: basılı hâlde ortalama korunmalı (yoksa ok 25 px aşağı kayıyordu) */
  .slider-ok:active { transform: translateY(-50%) scale(.96); }
  .nav-dugme:active, .wa-dugme:active { transform: scale(.96); }
  .wa-dugme:active { transform: scale(1.02); }
}

/* 5) Doku: çok ince grain — düz yüzeylerin steril hissini kırar (statik, animasyonsuz) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 6) z-index ölçeği (tek kaynak — mevcut sıralama birebir korunur) */
.atlama { z-index: var(--z-atlama); }
.ust { z-index: var(--z-header); }
.wa-dugme, .wa-etiket { z-index: var(--z-yuzen); }
.wa-modal { z-index: var(--z-modal); }
.slider-ok, .slider-nokta, .slider-rozet { z-index: var(--z-icerik); }

/* ==================== HEADER VARYANT 2 — Çift Katmanlı / Kurumsal Güven ==================== */
[data-header-variant="2"] .kur-serit { display: none; }   /* V2'de para yerine bilgi şeridi */
.bilgi-serit { background: #15191e; color: #c3cbd4; font-size: .78rem; }
.bilgi-ic { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.bilgi-sol, .bilgi-sag { display: flex; align-items: center; gap: 18px; }
.bilgi-sol span, .bilgi-sag a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bilgi-sag a { color: #c3cbd4; text-decoration: none; }
.bilgi-sag a:hover { color: var(--vurgu); }
.bilgi-serit svg { color: var(--vurgu); flex: none; }
.ust.kucuk .bilgi-serit { display: none; }   /* scroll'da üst şerit kaybolur */
@media (max-width: 720px) {
  .bilgi-sol { display: none; }
  .bilgi-ic { justify-content: center; }
  .bilgi-sag { gap: 14px; font-size: .74rem; }
}
@media (min-width: 900px) {
  [data-header-variant="2"] .nav-alt-menu { display: grid; grid-template-columns: 1fr 1fr; min-width: 460px; gap: 0 4px; }
  [data-header-variant="2"] .nav-alt-tum { grid-column: 1 / -1; }
}

/* ==================== HEADER VARYANT 3 — Yüzen Kapsül / Modern ==================== */
[data-header-variant="3"] .kur-serit { display: none; }
[data-header-variant="3"].ust {
  position: sticky; top: 12px; margin: 12px 20px 0;
  border: 1px solid var(--kenar); border-radius: var(--r-lg);
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  box-shadow: var(--sh-2);
  transition: margin var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
[data-header-variant="3"].ust.kucuk { margin: 8px 16px 0; box-shadow: var(--sh-3); }
[data-header-variant="3"] .ust-ic { padding-inline: 22px; }
@media (max-width: 620px) { [data-header-variant="3"].ust { margin: 8px 10px 0; } }

/* ==================== PERFORMANS (mobil) ====================
   - Masaüstünde cam efekti (blur) korunur; mobilde kaydırma akıcılığı için kapalı.
   - Doku (grain) katmanı küçük ekranlarda kapalı: sürekli kompozit katmanı, düşük donanımda maliyetli. */
@media (min-width: 900px) {
  .ust { background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (max-width: 640px) {
  body::after { display: none; }
}

/* ==================== BAŞLIK HİYERARŞİSİ ====================
   Liste sayfalarında (hizmetler, projeler, blog, iletişim) kart başlıkları H1'in altındaki
   ilk seviye olduğundan H2'dir; görünüm H3 ölçüsünde kalır. */
.kart-ic h2, .ozellik-kart h2 { font-size: var(--fs-h3); letter-spacing: -.01em; line-height: 1.12; margin: 0 0 6px; }

/* ==================== ERİŞİLEBİLİRLİK YARDIMCILARI ==================== */
/* Görsel olarak gizli, ekran okuyucuya açık metin */
.gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Form alanı altı hata mesajı (aria-describedby ile alana bağlı) */
.alan-mesaj { margin: 6px 0 0; font-size: .84rem; line-height: 1.4; color: var(--c-danger); }
/* Küçük yardımcı metinler AA kontrast: eski #7c8691 (3.7:1) yerine --soluk (5.8:1) */
.ipucu { color: var(--soluk); }

/* ==================== STEPPER: Blender ikonları + kaydırınca kesilen lazer hattı ====================
   Kesik amber çizgi = kesim planı; kaydırdıkça üstünden düz lazer hattı geçer (assets/js/adim-kesim.js).
   JS yoksa / hareket azaltmada: hat görünmez, numaralar her zamanki gibi dolu kalır. */
.adim-ikon { display: block; width: 96px; height: 96px; margin: -6px 0 6px -10px; }
.stepper-kesim, .stepper-uc { display: none; }
@media (min-width: 820px) {
  .adim-ikon { width: 112px; height: 112px; margin: -4px 0 4px -12px; }
  .stepper.kesim-hazir .stepper-kesim {
    display: block; position: absolute; top: 20px; left: 6%; right: 6%; height: 2px; z-index: 0;
    background: var(--vurgu); transform-origin: 0 50%; transform: scaleX(var(--ilerleme, 0)); pointer-events: none;
  }
  .stepper.kesim-hazir .stepper-uc {
    display: block; position: absolute; top: 21px; left: calc(6% + 88% * var(--ilerleme, 0)); width: 12px; height: 12px;
    margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; opacity: var(--uc-gorunur, 0); z-index: 1;
    background: radial-gradient(circle, #fff 0 22%, #ffd7a8 32%, rgba(245,158,11,.55) 58%, transparent 72%);
    box-shadow: 0 0 12px 3px rgba(245,158,11,.45);
  }
  .stepper.kesim-hazir .adim .no { z-index: 2; }
}
.stepper.kesim-hazir .adim .no { background: var(--yuzey); color: var(--vurgu-metin); box-shadow: inset 0 0 0 2px var(--vurgu); transition: background var(--t-base), color var(--t-base); }
.stepper.kesim-hazir .adim.kesildi .no { background: var(--vurgu); color: #14100a; }

/* ==================== Teklif formu: DXF önizleme (teknik föy dili: kareli kâğıt + antet) ==================== */
.dxf-onizlemeler { display: grid; gap: 12px; }
.dxf-onizlemeler:empty { display: none; }
.dxf-onizleme { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid var(--metin); background: var(--yuzey); min-width: 0; }
.dxf-cizim { aspect-ratio: 4 / 3; max-height: 260px; width: 100%; padding: 10px; color: var(--metin); border-right: 1px solid var(--metin);
  background-color: #fafbfc; background-image: linear-gradient(rgba(21,25,30,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21,25,30,.07) 1px, transparent 1px); background-size: 12px 12px; }
.dxf-cizim svg { width: 100%; height: 100%; display: block; }
.dxf-antet { margin: 0; display: grid; align-content: start; font-size: .82rem; }
.dxf-antet > div { display: grid; gap: 1px; padding: 7px 10px; border-bottom: 1px solid var(--kenar); }
.dxf-antet dt { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.dxf-antet dd { margin: 0; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxf-not { grid-column: 1 / -1; margin: 0; padding: 8px 10px; font-size: .8rem; color: var(--soluk); border-top: 1px solid var(--metin); }
.dxf-onizleme > .dxf-not:only-child { border-top: 0; }
.dxf-not strong { color: var(--vurgu-metin); }
@media (max-width: 560px) {
  .dxf-onizleme { grid-template-columns: 1fr; }
  .dxf-cizim { border-right: 0; border-bottom: 1px solid var(--metin); }
  .dxf-antet { grid-template-columns: 1fr 1fr; }
  .dxf-antet > div:nth-child(odd) { border-right: 1px solid var(--kenar); }
}

/* Sayfalar arası yumuşak geçiş (tarayıcının kendi özelliği; desteklemeyen tarayıcıda normal açılır) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }


/* KVKK aydınlatma metni: sade, okunur (yasal metin; büyük bölüm başlıkları gerekmez) */
.kvkk-metin { max-width: 760px; }
.kvkk-metin h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.kvkk-metin h2 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.kvkk-metin p { margin: 0 0 .8em; line-height: 1.7; }

/* ==================== 404: Newton beşiği (assets/js/hata-404.js, Matter.js) ==================== */
.hata-404 { padding-block: clamp(24px, 6vw, 72px); }
.hata-izgara { display: grid; gap: 24px; align-items: center; grid-template-columns: 1fr; }
.hata-metin h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); margin-bottom: .35em; }
.hata-metin .hero-eylem { margin-top: 22px; }
.hata-sahne { position: relative; height: clamp(320px, 60vw, 520px); touch-action: none; }
.hata-sahne canvas { display: block; width: 100%; height: 100%; }
@media (min-width: 900px) { .hata-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .hata-sahne { height: 520px; } }

/* ==================== Makine parkuru: teknik föy (inc/makineler.php) ==================== */
.makine-izgara { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .makine-izgara { grid-template-columns: 1fr 1fr; } }
.makine-foy { min-width: 0; }
.makine-foy dl.foy { margin: 0; }
.makine-foy .foy-deger { margin: 0; }
.makine-baslik { margin: 0; padding: 14px 20px; background: var(--metin-koyu); color: #fff; font-size: 1rem; line-height: 1.35; border-left: 4px solid var(--vurgu); }
.makine-baslik span { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--vurgu-parlak); }
.makine-foy .foy-satir { grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 12px; align-items: baseline; padding: 11px 20px; }
.makine-foy .foy-etiket { font-size: .8rem; }
.makine-foy .foy-deger { text-align: right; overflow-wrap: anywhere; font-weight: 600; color: var(--metin-koyu); }
.makine-not { margin: 14px 0 0; font-size: .9rem; color: var(--soluk); }
.duz-icerik .makine-izgara { margin: 8px 0 28px; }
@media (min-width: 900px) { .duz-icerik .makine-izgara { grid-template-columns: 1fr; } }
/* Hizmet sayfası SSS (details) — ana sayfadaki .sss ile aynı dil */
.duz-icerik .sss { margin-bottom: 28px; }
/* Metin içi bağlantılar (metinBaglanti): amber metin tonu, alt çizgili — koyu metin rengine yakın değil, AA kontrast */
.duz-icerik p a, .duz-icerik li a, .sss details p a { color: var(--vurgu-metin); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.duz-icerik p a:hover, .duz-icerik li a:hover, .sss details p a:hover { color: var(--metin); }