/* ============================================================================
   ALTUNAKAR — HİZMET & REHBER SAYFALARI KURUMSAL KATMANI
   v3 · 2026-08-16

   NE İŞE YARAR
   Sayfaların kendi <style> bloğunun ÜSTÜNE binen tek bir tasarım katmanı.
   Sayfaların HTML'i ve özgün CSS'i olduğu gibi duruyor.

   v3'TE NE DEĞİŞTİ — "düz beyaz sayfaya yazı yazılmış gibi" geri bildirimi
   1) KOYU SİNEMATİK AÇILIŞ. Üst bar ve hero artık koyu (#080d18): yavaş
      hareket eden iki ışık kütlesi (aurora), çok silik ızgara, film graini
      ve vinyet. Sayfa "beyaz kâğıt" olarak değil, bir açılış planıyla
      başlıyor.
   2) KAĞIT KATMANI. İçerik ve SSS, gövdedeki dokulu zeminin üzerinde duran
      beyaz "sayfa"lara alındı; içerik sayfası hero'nun üstüne 72px biniyor.
      Derinlik buradan geliyor — tek düzlem yerine üç düzlem.
   3) GİRİŞ HAREKETİ. Hero'daki etiket/başlık/spot/butonlar sırayla süzülerek
      geliyor (yalnızca sayfa açılışında, kaydırmaya bağlı DEĞİL).
      prefers-reduced-motion'da kapalı.
   4) OKUMA ÇUBUĞU. Sayfanın en üstünde kaydırmayla dolan ince çubuk.
      Sıfır JavaScript — scroll-driven animation; desteklemeyen tarayıcıda
      hiç görünmez, hiçbir şey bozulmaz.

   NEDEN GÖVDE METNİNE "kaydırınca belir" EFEKTİ KOYMADIM
   Bu sitede daha önce içeriğin görünmez kalmasıyla aylar kaybedildi. Opaklığı
   0'dan başlatan hiçbir kural gövde metnine, karta veya SSS'ye uygulanmıyor;
   hareket yalnızca DEKORATİF öğelerde. Efekt çalışmazsa içerik yine okunur.

   TİPOGRAFİ NOTU
   Bu statik sayfalar Inter yüklemiyor; sistem yığını bilinçli (macOS'ta SF Pro,
   Windows'ta Segoe UI). Inter şart olursa dosyanın en üstüne tek @import yeter.

   GERİ ALMA
   Sayfadaki tek <link rel="stylesheet" href="/css/hizmet-kurumsal.css"> satırını
   silmek yeterli. Bir önceki tasarım: css/hizmet-kurumsal.css.yedek-20260816
   ========================================================================== */

:root {
  --k-ink: #0b1220;
  --k-ink-2: #1e293b;
  --k-govde: #3b475c;
  --k-soluk: #64748b;
  --k-cizgi: #e3e8ef;
  --k-cizgi-2: #eef2f7;
  --k-zemin: #eceff5;        /* gövde — kâğıtların altındaki dokulu zemin */
  --k-zemin-2: #f7f9fc;
  --k-yuzey: #ffffff;
  --k-mavi: #1d4ed8;
  --k-mavi-acik: #2563eb;
  --k-mavi-koyu: #16307a;
  --k-yesil: #15803d;
  /* koyu bölümler */
  --k-koyu: #050912;
  --k-koyu-2: #0b1220;
  --k-golge-s: 0 1px 1px rgba(11, 18, 32, .04);
  --k-golge-m: 0 1px 2px rgba(11, 18, 32, .05), 0 10px 26px rgba(11, 18, 32, .06);
  --k-golge-kagit: 0 1px 2px rgba(11, 18, 32, .04), 0 32px 64px -32px rgba(11, 18, 32, .34);
  --k-r: 10px;
  --k-r-l: 12px;
  --k-r-kagit: 22px;
  --k-en: 940px;
  /* film graini — tek yerde tanımlı, koyu bölümlerin hepsinde kullanılıyor */
  --k-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- TİPOGRAFİ */
/* Gövde zemini düz gri değil: 22px'lik çok silik nokta ızgarası. Kâğıt
   katmanlarının altında bir "yüzey" olduğunu hissettiriyor. */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--k-zemin);
  background-image: radial-gradient(rgba(11, 18, 32, .055) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--k-govde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1;
}

h1, h2, h3, h4 {
  color: var(--k-ink);
  letter-spacing: -.021em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* TEK OMURGA: üst bar, hero, içerik, SSS, CTA, footer aynı genişlikte. */
.container { max-width: var(--k-en); padding: 0 32px; }

/* --------------------------------------------------------- OKUMA ÇUBUĞU */
/* Kaydırmayla dolan üst çubuk. JavaScript yok. Desteklemeyen tarayıcıda
   @supports bloğu hiç uygulanmaz, çubuk da görünmez. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: '';
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 2000;
      background: linear-gradient(90deg, var(--k-mavi-acik), #60a5fa);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: kOkuma linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
}

@keyframes kOkuma { to { transform: scaleX(1); } }

/* ------------------------------------------------------------------- ÜST BAR */
/* Koyu, saydam, bulanık. Hero ile aynı renkte olduğu için sayfa tek parça
   bir açılışla başlıyor; aşağı inildiğinde beyaz kâğıdın üstünde kalması
   bilinçli — kontrast sayfayı katmanlı gösteriyor. */
/* Neredeyse opak: yarı saydam bırakılınca üst barın ARKASINDA hero değil
   gövdenin açık zemini kalıyor ve bar gri görünüyordu. */
nav {
  background: rgba(5, 9, 18, .94) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: 0;
}

nav .container { min-height: 66px; }

.logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .24em;
  color: #fff;
}

.nav-links { gap: 30px; }

.nav-links a {
  position: relative;
  color: rgba(226, 232, 240, .72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .012em;
  padding: 6px 0;
}

.nav-links a:not(.btn-nav)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

.nav-links a:not(.btn-nav):hover { color: #fff; }
.nav-links a:not(.btn-nav):hover::after { transform: scaleX(1); }

.nav-links .btn-nav {
  background: #fff;
  color: var(--k-ink) !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background .22s, color .22s;
}

.nav-links .btn-nav::after { display: none; }
.nav-links .btn-nav:hover { background: #dbe3ee; color: var(--k-ink) !important; transform: none; }

.hamburger span { background: #fff; border-radius: 2px; }

/* ---------------------------------------------------------------------- HERO */
.hero {
  position: relative;
  padding: 104px 0 128px;
  background: var(--k-koyu);
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Katman 1 — aurora: iki büyük, bulanık ışık kütlesi çok yavaş süzülüyor.
   filter:blur yerine geniş radial-gradient kullanıldı; blur büyük alanlarda
   düşük güçlü makinelerde pahalı. */
.hero::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(46% 42% at 22% 26%, rgba(37, 99, 235, .38), transparent 62%),
    radial-gradient(40% 38% at 78% 12%, rgba(56, 189, 248, .20), transparent 64%),
    radial-gradient(52% 46% at 62% 92%, rgba(29, 78, 216, .22), transparent 66%);
  animation: kAurora 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes kAurora {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* Katman 2 — ızgara + film graini + vinyet. Grain, gradyanın bant yapmasını
   da gizliyor (koyu zeminde en çok göze batan kusur). */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    var(--k-grain),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0, 0, 0, .55) 100%);
  background-size: 140px 140px, 68px 68px, 68px 68px, 100% 100%;
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

/* Eyebrow: kısa kural çizgisi + küçük büyük harf etiket. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  margin-bottom: 22px;
}

.hero-badge::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 1.05rem + 3.3vw, 3.35rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.034em;
  margin-bottom: 20px;
  max-width: 19ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.hero p {
  font-size: 1.09rem;
  line-height: 1.75;
  color: rgba(226, 232, 240, .8);
  max-width: 58ch;
}

/* Açılış hareketi — SADECE hero'nun kendi öğelerinde, sayfa yüklenince bir
   kez. Kaydırmaya bağlı değil; gövde metni asla gizlenmiyor. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-badge { animation: kGiris .7s cubic-bezier(.16, 1, .3, 1) both; }
  .hero h1          { animation: kGiris .8s cubic-bezier(.16, 1, .3, 1) .08s both; }
  .hero > .container > p { animation: kGiris .8s cubic-bezier(.16, 1, .3, 1) .16s both; }
  .hero .hero-cta   { animation: kGiris .8s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes kGiris {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ BUTONLAR */
.btn, .hero-cta .btn, .cta-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}

/* Koyu zeminde birincil buton beyaz: en yüksek kontrast, en net çağrı. */
.hero .btn-blue, .cta .btn-blue {
  background: #fff;
  color: var(--k-ink);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
}

.hero .btn-blue:hover, .cta .btn-blue:hover { background: #dbe3ee; color: var(--k-ink); transform: translateY(-1px); }

.btn-blue { background: var(--k-mavi); color: #fff; }
.btn-blue:hover { background: var(--k-mavi-koyu); color: #fff; }

.btn-green { background: #128c7e; color: #fff; }
.btn-green:hover { background: #0e6f64; color: #fff; transform: translateY(-1px); }

.btn-outline { background: #fff; border-color: var(--k-cizgi); color: var(--k-ink); }
.btn-outline:hover { border-color: var(--k-ink); color: var(--k-ink); background: #fff; box-shadow: var(--k-golge-s); }

.hero-cta { margin-top: 32px; gap: 10px; }

a:focus-visible, button:focus-visible, .faq-q:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------- KÂĞIT (içerik/SSS) */
/* İçerik bloğu hero'nun üstüne biniyor: sayfayı tek düzlemden çıkarıp
   katmanlı gösteren asıl hamle bu. */
.content {
  position: relative;
  z-index: 3;
  margin-top: -72px;
  padding: 0 0 8px;
  background: transparent;
}

.content > .container,
.faq > .container,
.faq > div {
  background: var(--k-yuzey);
  border: 1px solid var(--k-cizgi);
  border-radius: var(--k-r-kagit);
  padding: 54px 58px;
  box-shadow: var(--k-golge-kagit);
}

.faq { padding: 28px 0 0; border-top: 0; background: transparent; }

/* -------------------------------------------------------------------- İÇERİK */
.content h2 {
  position: relative;
  font-size: clamp(1.3rem, 1.05rem + .75vw, 1.62rem);
  font-weight: 750;
  line-height: 1.32;
  letter-spacing: -.024em;
  margin: 54px 0 16px;
  padding: 26px 0 0;
  border-top: 1px solid var(--k-cizgi);
  border-bottom: 0;
}

/* Hairline'ın üstünde 48px'lik mavi bir parça: bölüm işareti. Kaydırırken
   soldan açılıyor — dekoratif olduğu için çalışmazsa hiçbir şey kaybolmuyor. */
.content h2::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 48px; height: 2px;
  background: var(--k-mavi);
  transform-origin: left;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .content h2::before {
      animation: kCizgi linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
  }
}

@keyframes kCizgi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.content h2:first-child::before { display: none; }

.content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--k-ink);
  letter-spacing: -.012em;
  margin: 30px 0 8px;
}

.content > .container > p,
.content .intro-text { max-width: 100%; }

.content p { margin-bottom: 15px; color: var(--k-govde); }

.content ul { padding-left: 0; list-style: none; margin-bottom: 22px; }

.content li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}

.content li::before {
  content: '';
  position: absolute;
  left: 0; top: .82em;
  width: 10px; height: 1.5px;
  border-radius: 0;
  background: var(--k-mavi);
  opacity: .75;
}

.content li strong { color: var(--k-ink); font-weight: 650; }

.content a:not(.btn):not(.svc-card):not(.blog-card) {
  color: var(--k-mavi);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(37, 99, 235, .32);
  text-underline-offset: 3px;
  transition: text-decoration-color .22s, color .22s;
}

.content a:not(.btn):not(.svc-card):not(.blog-card):hover {
  color: var(--k-mavi-koyu);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------- KARTLAR (özellik/hizmet) */
/* Kartlar beyaz kâğıdın İÇİNDE olduğu için zeminleri hafif gri; beyaz üstüne
   beyaz kart görünmez oluyordu. */
.features, .svc-grid, .blog-grid { gap: 14px; margin: 28px 0 6px; }

.feature, .svc-card, .blog-card {
  position: relative;
  background: var(--k-zemin-2);
  border: 1px solid var(--k-cizgi);
  border-radius: var(--k-r);
  padding: 22px 20px;
  box-shadow: none;
  overflow: hidden;
  transition: background .22s, border-color .22s;
}

.feature::before, .blog-card::before, .svc-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--k-mavi-acik), #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.feature:hover, .svc-card:hover, .blog-card:hover {
  background: #fff;
  border-color: #cfd8e4;
  transform: none;
  box-shadow: var(--k-golge-m);
}

.feature:hover::before, .svc-card:hover::before, .blog-card:hover::before { transform: scaleX(1); }

.feature h3, .feature h4,
.svc-card h3, .svc-card h4,
.blog-card h3 {
  color: var(--k-ink);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 7px;
  letter-spacing: -.012em;
}

.feature p, .svc-card p, .blog-card p {
  color: var(--k-soluk);
  font-size: .92rem;
  line-height: 1.65;
}

.blog-card .tag {
  background: transparent;
  color: var(--k-mavi);
  padding: 0;
  border-radius: 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.svc-card { padding-right: 42px; }

.svc-card::after {
  content: '→';
  position: absolute;
  right: 20px; top: 22px;
  color: var(--k-soluk);
  font-size: 1rem;
  opacity: .4;
  transition: opacity .22s, color .22s, transform .22s;
}

.svc-card:hover::after { opacity: 1; color: var(--k-mavi); transform: translateX(3px); }

/* ----------------------------------------------------------------------- SSS */
.faq > div > h2 {
  font-size: clamp(1.3rem, 1.05rem + .75vw, 1.62rem);
  font-weight: 750;
  letter-spacing: -.024em;
  text-align: left;
  margin-bottom: 6px;
}

.faq > div > h2 + p { text-align: left; color: var(--k-soluk); margin-bottom: 22px; }

.faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--k-cizgi);
  border-radius: 0;
  margin-bottom: 0;
  transition: background .2s;
}

.faq-item:last-of-type { border-bottom: 1px solid var(--k-cizgi); }
.faq-item:hover { border-color: var(--k-cizgi); background: rgba(11, 18, 32, .014); }
.faq-item.open { background: transparent; border-color: var(--k-cizgi); box-shadow: none; }

.faq-q {
  padding: 20px 4px;
  color: var(--k-ink);
  font-size: .97rem;
  font-weight: 650;
  line-height: 1.5;
  gap: 18px;
}

.faq-q:hover { background: transparent; }

.faq-arrow {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--k-soluk);
  font-size: 0;
  position: relative;
  transition: color .22s;
}

.faq-arrow::before, .faq-arrow::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.faq-arrow::before { width: 12px; height: 1.5px; }
.faq-arrow::after { width: 1.5px; height: 12px; transition: opacity .22s; }

.faq-item.open .faq-arrow { transform: none; background: transparent; color: var(--k-mavi); }
.faq-item.open .faq-arrow::after { opacity: 0; }

.faq-a { color: var(--k-govde); font-size: .95rem; line-height: 1.72; padding: 0 4px; max-width: 74ch; }
.faq-item.open .faq-a { padding: 0 4px 22px; }

/* ------------------------------------------------------ KAPANIŞ ÇAĞRISI (koyu) */
/* Açılıştaki koyu ton kapanışta geri geliyor: sayfa açtığı yerden kapanıyor. */
.cta {
  position: relative;
  margin-top: 46px;
  padding: 82px 0;
  border-top: 0;
  background: var(--k-koyu);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}

.cta::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(44% 46% at 26% 84%, rgba(37, 99, 235, .34), transparent 64%),
    radial-gradient(38% 40% at 82% 20%, rgba(56, 189, 248, .16), transparent 66%);
  animation: kAurora 30s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    var(--k-grain),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 50%, transparent 44%, rgba(0, 0, 0, .5) 100%);
  background-size: 140px 140px, 68px 68px, 68px 68px, 100% 100%;
  pointer-events: none;
}

.cta .container { position: relative; z-index: 1; }
.cta h2 { color: #fff; font-size: clamp(1.4rem, 1.05rem + 1vw, 1.95rem); font-weight: 750; letter-spacing: -.028em; margin-bottom: 10px; }
.cta p { color: rgba(226, 232, 240, .78); font-size: 1rem; margin-bottom: 28px; max-width: 58ch; }
.cta-buttons { justify-content: flex-start; }
.cta .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .24); color: #e2e8f0; }
.cta .btn-outline:hover { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .06); }

/* -------------------------------------------------------------------- FOOTER */
footer {
  background: #05090f;
  border-top: 0;
  padding: 58px 0 0;
  color: #8c9bb2;
}

.footer-grid { gap: 56px; padding-bottom: 42px; }
.footer-brand { color: #fff; font-size: 18px; letter-spacing: .22em; margin-bottom: 14px; }
.footer-text { color: #8c9bb2; font-size: .88rem; }
.footer-contact a { color: #cbd5e1; font-size: .9rem; margin-bottom: 8px; transition: color .22s; }
.footer-contact a:hover { color: #fff; }
.footer-links h4 { color: #fff; font-size: .72rem; letter-spacing: .16em; margin-bottom: 14px; }
.footer-links a { color: #8c9bb2; font-size: .88rem; transition: color .22s; }
.footer-links a:hover { color: #fff; }
.footer-bottom { margin-top: 0; padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .08); color: #5b6b83; font-size: .79rem; }

/* --------------------------------------------------------- İLGİLİ HİZMETLER */
.ilgili-hizmetler, .magaza-serit { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--k-cizgi); }
.ilgili-hizmetler b, .magaza-serit b { color: var(--k-soluk); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.ih-liste { gap: 8px; }

.ih-liste a {
  background: var(--k-zemin-2);
  border: 1px solid var(--k-cizgi);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--k-govde);
  font-size: .86rem;
  box-shadow: none;
  transition: border-color .2s, color .2s, background .2s;
}

.ih-liste a:hover {
  background: #fff;
  border-color: var(--k-ink);
  color: var(--k-ink);
  transform: none;
  box-shadow: var(--k-golge-s);
}

/* --------------------------------------------------------- GOOGLE YORUMLARI */
.hy-sec { background: transparent; border-top: 0; padding-top: 28px; }
.hy-in { max-width: var(--k-en); }
.hy-card { border-radius: var(--k-r); box-shadow: none; border: 1px solid var(--k-cizgi); background: #fff; }

/* ----------------------------------------------------------- WHATSAPP BALONU */
.wa-float { width: 54px; height: 54px; box-shadow: 0 6px 20px rgba(11, 18, 32, .28); }

/* -------------------------------------------------------------- DUYARLILIK */
@media (max-width: 900px) {
  .hero { padding: 76px 0 104px; }
  .content { margin-top: -64px; }
  .content > .container, .faq > .container, .faq > div { padding: 38px 30px; }
  .content h2 { margin-top: 42px; padding-top: 22px; }
  .cta { padding: 62px 0; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .content > .container, .faq > .container, .faq > div {
    padding: 30px 22px;
    border-radius: 16px;
  }
  .nav-links { background: rgba(8, 13, 24, .98) !important; border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
  .nav-links a:not(.btn-nav)::after { display: none; }
  .hero h1 { max-width: none; }
  .hero-cta .btn, .cta-buttons .btn { flex: 1 1 100%; }
  .footer-grid { gap: 34px; }
}

/* ============================================================
   HERO GÖRSELİ (.hero-artli > .hero-art)
   Hero'da metnin sağındaki medya yuvası. İçine <img>, <video> veya
   inline SVG konabilir; konumlandırma medyadan bağımsızdır.
   Sayfaya eklemek için (bkz. macbook-termal-bakim.html):
     <section class="hero hero-artli">
       <figure class="hero-art" aria-hidden="true"> … .hero-art-kart … </figure>
   Geri alma: sınıfı "hero"ya döndürüp bloğu silmek yeterli.
   ============================================================ */
.hero-artli > .container { position: relative; z-index: 1; }
.hero-artli h1 { max-width: 15ch; }
.hero-artli > .container > p { max-width: 40ch; }

.hero-art {
  position: absolute; z-index: 0; pointer-events: none;
  top: 48%; right: max(20px, calc(50% - 660px));
  width: min(44vw, 540px);
  transform: translateY(-50%);
  /* Kendi giriş kareleri: ortak kGiris'in son karesi transform:none olduğu için
     dikey ortalamayı (translateY(-50%)) siliyor, görsel aşağı kayıyordu. */
  animation: kGirisArt 1s cubic-bezier(.16, 1, .3, 1) .3s both;
}
.hero-art img, .hero-art video, .hero-art svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--k-r-l);
}

/* --- Kart sunumu -----------------------------------------------------------
   Çıplak görsel hero'ya yapıştırılmış duruyordu. Kart: ince kenar çizgisi,
   derin gölge, arkada soğuk hâle, altta künye şeridi ve fanların üzerinde iki
   işaret noktası. Hepsi dekoratif (blok aria-hidden) — metin katmanına
   dokunmuyor, opaklığı 0'dan başlayan hiçbir kural içerikte yok.            */
.hero-art-kart {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden;
  background: #060a12;
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}
.hero-art-kart img, .hero-art-kart video { border-radius: 0; }
/* Alt künye şeridinin okunurluğu için görüntünün altını koyulaştır. */
.hero-art-kart::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, .88) 82%);
  pointer-events: none;
}
/* Kartın arkasında soğuk hâle — hero zeminine oturmasını sağlıyor. */
.hero-art::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 46%, rgba(56, 189, 248, .18), rgba(0, 0, 0, 0) 70%);
}

.hea-alt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(226, 232, 240, .82);
}
.hea-alt::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: var(--k-mavi, #38bdf8);
}

/* --- Teknik şema paneli (.sema) --------------------------------------------
   Hareketli soğutma klibinin zemini düz açık gri; koyu kartın içinde çıplak
   beyaz bir dikdörtgen gibi duruyordu. .sema onu bir teknik föy paneline
   çevirir: üstte künye satırı, ortada köşe işaretli kadraj, altta renk
   lejantı. Klipteki mavi ve kırmızı çizgiler böylece süs değil, okunan bir
   bilgi oluyor. Tümü dekoratif katman — blok aria-hidden.                   */
.hero-art-kart.sema {
  background: #fbfbfd;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95),
              inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.hero-art-kart.sema::after { display: none; }

/* Üst künye satırı */
.hea-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, .09);
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.hea-etiket { display: flex; align-items: center; gap: 9px; color: #0f172a; }
.hea-etiket::before {
  content: ""; width: 20px; height: 2px; flex: none;
  background: var(--k-mavi, #38bdf8);
}
.hea-kod { color: #94a3b8; font-weight: 600; letter-spacing: .14em; }

/* Kadraj + dört köşedeki kırpma işareti (tek öğede 8 gradyan katmanı) */
.hea-cerceve { position: relative; padding: 12px; }
.hea-cerceve video, .hea-cerceve img { display: block; width: 100%; height: auto; }
.hea-cerceve::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .28;
  background:
    linear-gradient(#0f172a, #0f172a) left  top    / 13px 1px  no-repeat,
    linear-gradient(#0f172a, #0f172a) left  top    / 1px  13px no-repeat,
    linear-gradient(#0f172a, #0f172a) right top    / 13px 1px  no-repeat,
    linear-gradient(#0f172a, #0f172a) right top    / 1px  13px no-repeat,
    linear-gradient(#0f172a, #0f172a) left  bottom / 13px 1px  no-repeat,
    linear-gradient(#0f172a, #0f172a) left  bottom / 1px  13px no-repeat,
    linear-gradient(#0f172a, #0f172a) right bottom / 13px 1px  no-repeat,
    linear-gradient(#0f172a, #0f172a) right bottom / 1px  13px no-repeat;
}

/* Alt lejant — klipteki iki rengin karşılığı */
.hea-lejant {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(15, 23, 42, .09);
  background: #f3f3f6;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; color: #475569;
}
.hea-lj { display: flex; align-items: center; gap: 8px; }
.hea-lj::before { content: ""; width: 16px; height: 2px; border-radius: 2px; flex: none; }
.hea-lj-mavi::before    { background: #2f9fe0; box-shadow: 0 0 0 3px rgba(47, 159, 224, .14); }
.hea-lj-kirmizi::before { background: #e0362f; box-shadow: 0 0 0 3px rgba(224, 54, 47, .14); }

/* Fanların üzerindeki işaret noktaları — konumlar görseldeki fan merkezleri. */
.hea-nokta {
  position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%;
  background: #38bdf8; box-shadow: 0 0 0 5px rgba(56, 189, 248, .16);
  animation: kNabiz 3.2s ease-in-out infinite;
}
.hea-sol { left: 19.5%; top: 33%; }
.hea-sag { left: 79%;   top: 33%; animation-delay: 1.6s; }
@keyframes kNabiz {
  0%, 100% { box-shadow: 0 0 0 5px rgba(56, 189, 248, .16); }
  50%      { box-shadow: 0 0 0 11px rgba(56, 189, 248, .05); }
}

@keyframes kGirisArt {
  from { opacity: 0; transform: translateY(calc(-50% + 18px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* Dar ekran: görsel metnin ARKASINA geçer, soluklaşır; 700px altında hiç yok. */
@media (max-width: 1180px) {
  .hero-artli h1 { max-width: 22ch; }
  .hero-artli > .container > p { max-width: 52ch; }
  .hero-art { right: -12%; width: 66vw; opacity: .28; }
}
@media (max-width: 700px) { .hero-art { display: none; } }

/* Hareket hassasiyeti: aurora, giriş hareketi, okuma çubuğu — hepsi kapalı. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero::before, .cta::before { animation: none; }
  .feature:hover, .svc-card:hover, .blog-card:hover, .btn:hover, .ih-liste a:hover { transform: none; }
}

/* Yazdırma: koyu bantlar, menü ve balon kâğıtta gereksiz. */
@media print {
  nav, .wa-float, .cta, .hero::before, .hero::after, .hero-art { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hero { background: #fff; padding: 0 0 24px; }
  .hero h1, .hero p, .hero-badge { color: #000; text-shadow: none; }
  .content { margin-top: 0; }
  .content > .container, .faq > .container, .faq > div { box-shadow: none; border: 0; padding: 0; }
  .feature, .svc-card, .faq-item { box-shadow: none; break-inside: avoid; }
}

/* == YAZI ÖLÇEĞİ — bir tık küçültme (2026-08-20) ==========================
   Ana sayfayla aynı hamle (bkz. anasayfa-kurumsal.css "13" bloğu):
   başlıklar ~%10, hero giriş paragrafı ~%7 küçüldü. Gövde metni (1rem,
   satır yüksekliği 1.8) uzun okuma metni olduğu için DOKUNULMADI.
   GERİ ALMA: bu bloğu sil.
   ========================================================================== */
.hero h1 { font-size: clamp(1.9rem, .95rem + 2.95vw, 3rem); }
.hero p  { font-size: 1.01rem; }
.content h2,
.faq > div > h2 { font-size: clamp(1.18rem, .95rem + .68vw, 1.46rem); }
.cta h2 { font-size: clamp(1.26rem, .95rem + .9vw, 1.75rem); }

/* == TEMA KATMANI (2026-08-20) ============================================
   Bu sayfalar statik HTML; tema düğmeleri yok ama ana sayfada seçilen tema
   localStorage'da duruyor. Her sayfanın <head>'ine eklenen üç satırlık
   önyükleme betiği <html>'e data-theme="dark" yazıyor, gerisi burada.

   Kural (kullanıcı kararı, 2026-08-20): "hizmet/blog başlık bloğu temaya
   uysun". Yani AÇIK temada üst bar, hero ve kapanış bandı da açılır —
   beyaz sayfanın ortasında siyah ada kalmaz. KOYU temada sayfa bugünkü
   sinematik hâlini korur, yalnız beyaz "kâğıt" katmanı kararır.

   GERİ ALMA: bu bloğu sil (ve istenirse HTML'lerdeki tema betiğini).
   ========================================================================== */

/* ---- AÇIK TEMA: koyu kabuk açılır ---- */
html:not([data-theme="dark"]) nav {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--k-cizgi);
}
html:not([data-theme="dark"]) .logo { color: var(--k-ink); }
html:not([data-theme="dark"]) .nav-links a { color: var(--k-govde); }
html:not([data-theme="dark"]) .nav-links a:not(.btn-nav)::after { background: var(--k-ink); }
html:not([data-theme="dark"]) .nav-links a:not(.btn-nav):hover { color: var(--k-ink); }
html:not([data-theme="dark"]) .nav-links .btn-nav { background: var(--k-ink); color: #fff !important; }
html:not([data-theme="dark"]) .nav-links .btn-nav:hover { background: var(--k-mavi); color: #fff !important; }
html:not([data-theme="dark"]) .hamburger span { background: var(--k-ink); }
@media (max-width: 600px) {
  html:not([data-theme="dark"]) .nav-links {
    background: rgba(255, 255, 255, .98) !important;
    border-bottom: 1px solid var(--k-cizgi);
    box-shadow: 0 18px 40px rgba(11, 18, 32, .12);
  }
}

/* Hero: aurora ışıkları kalıyor ama zemin açık; ızgara/grain ters çevrildi. */
html:not([data-theme="dark"]) .hero { background: var(--k-zemin-2); }
html:not([data-theme="dark"]) .hero::before { opacity: .55; }
html:not([data-theme="dark"]) .hero::after {
  background-image:
    var(--k-grain),
    linear-gradient(rgba(11, 18, 32, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, .035) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 40%, transparent 48%, rgba(11, 18, 32, .06) 100%);
  opacity: .8;
}
html:not([data-theme="dark"]) .hero h1 { color: var(--k-ink); text-shadow: none; }
html:not([data-theme="dark"]) .hero p { color: var(--k-govde); }
html:not([data-theme="dark"]) .hero-badge { color: var(--k-mavi); }

/* Kapanış bandı (.cta) hero ile aynı dile geliyor. */
html:not([data-theme="dark"]) .cta { background: var(--k-zemin-2); }
html:not([data-theme="dark"]) .cta::before { opacity: .55; }
html:not([data-theme="dark"]) .cta::after {
  background-image:
    var(--k-grain),
    linear-gradient(rgba(11, 18, 32, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, .05) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(11, 18, 32, .06) 100%);
  opacity: .8;
}
html:not([data-theme="dark"]) .cta h2 { color: var(--k-ink); }
html:not([data-theme="dark"]) .cta p { color: var(--k-govde); }
html:not([data-theme="dark"]) .cta .btn-outline { border-color: var(--k-cizgi); color: var(--k-ink); }
html:not([data-theme="dark"]) .cta .btn-outline:hover { border-color: var(--k-ink); color: var(--k-ink); background: #fff; }

/* ---- KOYU TEMA: açık "kâğıt" katmanı kararır ---- */
html[data-theme="dark"] {
  --k-ink: #eceef3;
  --k-ink-2: #dbe0ea;
  --k-govde: #a9b2c2;
  --k-soluk: #8a94a6;
  --k-cizgi: #232935;
  --k-cizgi-2: #1c212b;
  --k-zemin: #0a0d14;
  --k-zemin-2: #10141d;
  --k-yuzey: #10141d;
  --k-mavi: #60a5fa;
  --k-mavi-acik: #7cb6fb;
  --k-mavi-koyu: #93c5fd;
  --k-yesil: #4ade80;
  --k-golge-s: 0 1px 1px rgba(0, 0, 0, .4);
  --k-golge-m: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .45);
  --k-golge-kagit: 0 1px 2px rgba(0, 0, 0, .4), 0 32px 64px -32px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] body { background: var(--k-zemin); }
/* Jetonlarla dönmeyen düz beyazlar. */
html[data-theme="dark"] .section,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .hy-card,
html[data-theme="dark"] .btn-outline { background: var(--k-yuzey); }
html[data-theme="dark"] .btn-outline:hover { background: #171d28; }
/* Mavi butonun üstündeki beyaz yazı koyu temada açık mavide okunmuyor. */
html[data-theme="dark"] .btn-blue { background: #1d4ed8; color: #fff; }
html[data-theme="dark"] .btn-blue:hover { background: #1e40af; color: #fff; }
html[data-theme="dark"] .nav-links .btn-nav { background: #e6eaf1; color: #0b1220 !important; }

/* ---- KOYU TEMA · SAYFALARIN KENDİ <style> BLOKLARI ----------------------
   Statik sayfaların gövde renkleri kurumsal katmandan değil, her dosyanın
   kendi <style> bloğundan geliyor ve düz hex yazılmış. Bu dosya HTML'de
   o bloğun ALTINDA bağlandığı için buradan eziliyor; ayrıca html[data-theme]
   öneki özgüllüğü yükseltiyor.

   İki aile var:
     · blog/*.html  → :root değişkenleri kullanıyor (29 dosya, tek set)
     · hizmetler/*.html → düz hex (53 dosya, aynı şablon)
   -------------------------------------------------------------------- */

/* Blog ailesi: tek değişken seti çevriliyor, gerisi kendiliğinden döner. */
html[data-theme="dark"] {
  --bg: #0a0d14;
  --card: #10141d;
  --card-h: #171d28;
  --blue: #60a5fa;
  --blue-d: #93c5fd;
  --green: #4ade80;
  --text: #eceef3;
  --muted: #a9b2c2;
  --border: #232935;
  --ink: #eceef3;
}

/* Hizmet ailesi: düz hex yazılmış seçiciler tek tek. */
html[data-theme="dark"] body { background: var(--k-zemin); color: var(--k-ink); }
html[data-theme="dark"] .section h2,
html[data-theme="dark"] .metin h3,
html[data-theme="dark"] .metin strong,
html[data-theme="dark"] .faq-item h3,
html[data-theme="dark"] .ih-liste a { color: var(--k-ink); }
html[data-theme="dark"] .intro-text,
html[data-theme="dark"] .metin p,
html[data-theme="dark"] .metin li,
html[data-theme="dark"] .faq-item p,
html[data-theme="dark"] .footer { color: var(--k-govde); }
/* Yalniz GOVDE icindeki baglantilar. Ciplak `a` secicisi kullanilmiyor:
   ust menuyu de maviye boyuyordu. */
html[data-theme="dark"] .metin a,
html[data-theme="dark"] .intro-text a,
html[data-theme="dark"] .section p a,
html[data-theme="dark"] .section li a { color: var(--k-mavi); }
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .ilgili-hizmetler b { color: var(--k-soluk); }
html[data-theme="dark"] .breadcrumb a:hover { color: var(--k-ink); }
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .ih-liste a { background: var(--k-yuzey); border-color: var(--k-cizgi); }
html[data-theme="dark"] .footer { border-top-color: var(--k-cizgi); }
/* WhatsApp ve telefon butonlarındaki beyaz yazı korunuyor — marka renkleri. */
html[data-theme="dark"] .btn-phone { background: #1d4ed8; color: #fff; }