/* ==========================================================================
   HİZMET SAYFALARI → ANA SAYFA TASARIM DİLİ
   2026-08-28

   İSTEK (kullanıcı): "tıpatıp aynısını görmek istiyorum ana sayfamın... tasarım
   olarak renk olarak konumlandırma vesaire bunların hepsinin aynı olmasını
   istiyorum. Sitemap sayfalarına giren biri ana sayfamdaymış gibi hissetsin,
   ama aynı zamanda bariz bir şekilde görebileceği ana sayfa butonu da olsun."

   YÖNTEM: Ana sayfanın tasarım sistemi css/anasayfa-kurumsal.css'teki `kt-`
   jetonlarıdır (2026-08-17, "tek sistem" kararı). Bu dosya o jetonların
   BİREBİR aynısını hizmet sayfalarına taşır ve sayfadaki her bileşeni
   karşılığı olan kt- reçetesine oturtur:

     hizmet sayfası          ana sayfa karşılığı
     ----------------------  -------------------------------------------
     nav                     .navbar (main.css)
     .hero                   .kt-kahraman (koyu perde + vinyet, iki temada da)
     .hero-badge             .kt-kahraman-ust
     .hero h1 / p            .kt-h1 / .kt-giris
     .hero-cta .btn          .kt-dugme  ·  .kt-dugme.hat
     .content h2 / h3        .kt-h2 / .kt-h3
     .feature                .kt-kart (tek kart reçetesi)
     .ilgili-hizmetler a     .kt-rozet
     .faq-item               .kt-sss details
     .cta                    .kt-bolum.koyu + .kt-kapanis
     footer                  main.css footer (#eef2f7 / koyu #0f1117)
     .yol (yeni)             ana sayfa butonu — aşağıda "ANA SAYFA BUTONU"

   NEDEN hizmet-kurumsal.css ARTIK YÜKLENMİYOR: o dosya ayrı bir tasarım
   diliydi (kendi paleti, kendi kart reçetesi, kendi ölçeği). İkisi üst üste
   binseydi hangi kuralın kazandığı satır sırasına kalırdı. Sayfanın kendi
   inline <style> bloğu iskeleti (düzen, ızgara, kırılma noktaları) zaten
   sağlıyor; bu dosya yalnız GÖRÜNÜMÜ ana sayfaya eşliyor.

   KORUNAN KARAR: açılış bandı koyu kalıyor. 2026-08-16'da "düz beyaz sayfaya
   yazı yazılmış gibi" denmişti; ana sayfanın kahramanı da (2026-08-21 kararı)
   her iki temada koyu. Yani bu, ana sayfayla aynı olmanın gereği.

   GERİ ALMA: sayfadaki iki satırı eski tek satıra döndür —
     <link rel="stylesheet" href="/css/hizmet-kurumsal.css?v=20260820v">
   ve .yol bloğunu HTML'den sil.
   ========================================================================== */

/* == 01 · JETONLAR — anasayfa-kurumsal.css §01 ile birebir ================= */

body {
  --kt-aksan-950: #05203f;
  --kt-aksan-900: #072a52;
  --kt-aksan-800: #093868;
  --kt-aksan-700: #0a4a92;
  --kt-aksan-600: #0a5ecb;
  --kt-aksan-500: #2b7ae4;
  --kt-aksan-400: #63a0ee;
  --kt-aksan-300: #9cc4f6;
  --kt-aksan-200: #cbe0fb;
  --kt-aksan-100: #e4eefd;
  --kt-aksan-50:  #f2f7ff;
  --kt-aksan-rgb: 10, 94, 203;

  --kt-siyah:   #08080a;
  --kt-yuzey-1: #ffffff;
  --kt-yuzey-2: #f6f6f8;
  --kt-yuzey-3: #eeeef1;

  --kt-murekkep: #101014;
  --kt-sis:      #5f6169;
  --kt-sis-2:    #8b8d95;
  --kt-ters:     #ffffff;
  --kt-ters-sis: rgba(255, 255, 255, .62);

  --kt-cizgi:      #e3e4e8;
  --kt-cizgi-koyu: #d2d4da;
  --kt-cizgi-ters: rgba(255, 255, 255, .14);

  --kt-yesil:   #106b45;
  --kt-yesil-z: #e8f5ee;

  --kt-kap: 1180px;
  --kt-yan: clamp(18px, 4vw, 30px);
  --kt-bolum-y: clamp(52px, 5.4vw, 84px);
  --kt-bosluk: clamp(18px, 2.2vw, 26px);

  --kt-r-xs: 8px;
  --kt-r-s:  12px;
  --kt-r-m:  16px;
  --kt-r-l:  22px;
  --kt-r-xl: 30px;

  --kt-golge-0: 0 1px 2px rgba(16, 16, 20, .04);
  --kt-golge-1: 0 4px 16px rgba(16, 16, 20, .07), 0 1px 3px rgba(16, 16, 20, .04);
  --kt-golge-2: 0 18px 48px rgba(16, 16, 20, .13), 0 4px 12px rgba(16, 16, 20, .06);

  --kt-hiz: .26s cubic-bezier(.3, .1, .25, 1);
}

/* Koyu tema — anasayfa-kurumsal.css §12/B ile birebir. */
html[data-theme="dark"] body {
  --kt-yuzey-1: #0f1117;
  --kt-yuzey-2: #14161d;
  --kt-yuzey-3: #1b1e27;
  --kt-murekkep: #eceef3;
  --kt-sis:      #a2a7b4;
  --kt-sis-2:    #7f8492;
  --kt-cizgi:      #262a35;
  --kt-cizgi-koyu: #333846;
  --kt-yesil:   #4ade80;
  --kt-yesil-z: rgba(74, 222, 128, .12);
  --kt-golge-0: 0 1px 2px rgba(0, 0, 0, .35);
  --kt-golge-1: 0 4px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --kt-golge-2: 0 18px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35);
  --kt-aksan-50:  rgba(43, 122, 228, .12);
  --kt-aksan-100: rgba(43, 122, 228, .18);
  --kt-aksan-200: rgba(43, 122, 228, .28);
}

/* -- ESKİ DEĞİŞKEN SETİ — sayfaların kendi <style> bloğu için ---------------
   Her hizmet sayfasının içinde :root{--card:#fff; --ink:#0f172a; …} var ve
   sayfaya özgü bileşenler (index.html'deki .svc-card, marka sayfalarındaki
   .models …) bu değişkenlerle çiziliyor. KOYU TEMA karşılıkları eski
   hizmet-kurumsal.css'te duruyordu; o dosya devre dışı kalınca koyu temada
   beyaz kart + beyaz yazı çıktı (hizmetler/index.html'de ölçüldü).
   Burada set kt- jetonlarına bağlanıyor: artık tek kaynak var, sayfaların
   içindeki eski bileşenler de ana sayfanın paletiyle çiziliyor. */
body {
  --bg:      var(--kt-yuzey-1);
  --card:    var(--kt-yuzey-1);
  --card-h:  var(--kt-yuzey-2);
  --blue:    var(--kt-aksan-600);
  --blue-d:  var(--kt-aksan-700);
  --green:   var(--kt-yesil);
  --text:    var(--kt-murekkep);
  --ink:     var(--kt-murekkep);
  --muted:   var(--kt-sis);
  --border:  var(--kt-cizgi);
}
html[data-theme="dark"] body {
  --blue:   #60a5fa;   /* koyu zeminde aksan-600 yeterince parlamıyor */
  --blue-d: #93c5fd;
}


/* == 02 · GÖVDE VE TİPOGRAFİ ============================================== */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  background: var(--kt-yuzey-1);
  color: var(--kt-murekkep);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { text-wrap: balance; color: var(--kt-murekkep); }
p { text-wrap: pretty; }

/* Ana sayfayla aynı kap genişliği ve yan boşluk. */
.container { max-width: var(--kt-kap); padding-inline: var(--kt-yan); }

a { color: var(--kt-aksan-600); }
a:hover { color: var(--kt-aksan-700); }

/* Odak halkası — anasayfa-kurumsal.css §03 */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kt-aksan-600);
  outline-offset: 3px;
}


/* == 03 · ÜST BAR — main.css .navbar ile birebir =========================== */

nav {
  border-bottom: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  padding: 10px 0;
}
nav .container { min-height: 51px; }

html:not([data-theme="dark"]) nav { background: rgba(255, 255, 255, .95); }
html[data-theme="dark"] nav {
  background: rgba(11, 18, 32, .94);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

/* Logo: ana sayfadaki .navbar-brand + .brand-mark rozeti.
   Hizmet sayfalarının HTML'i düz metin olduğu için rozet CSS ile,
   SVG data URI olarak basılıyor — böylece HTML'e hiç dokunulmuyor. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -1px;
}
html:not([data-theme="dark"]) .logo { color: #0f172a; }
html[data-theme="dark"]        .logo { color: #e8eef7; }

.logo::before {
  content: '';
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 9px;
  background: #0b0b0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ctext x='20' y='26.5' font-family='Inter,Segoe UI,Helvetica,Arial,sans-serif' font-size='18.4' font-weight='900' text-anchor='middle' letter-spacing='-1'%3E%3Ctspan fill='%23e31e24'%3EA%3C/tspan%3E%3Ctspan fill='%23f5c518'%3EB%3C/tspan%3E%3C/text%3E%3C/svg%3E") center/40px 40px no-repeat;
}
html[data-theme="dark"] .logo::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

.nav-links { gap: 15px; }
.nav-links a {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: normal;
  padding: 8px;
}
.nav-links a:not(.btn-nav)::after { display: none; }

html:not([data-theme="dark"]) .nav-links a:not(.btn-nav)       { color: #475569; }
html:not([data-theme="dark"]) .nav-links a:not(.btn-nav):hover { color: #2563eb; }
html[data-theme="dark"]       .nav-links a:not(.btn-nav)       { color: #9fb0c6; }
html[data-theme="dark"]       .nav-links a:not(.btn-nav):hover { color: #60a5fa; }

.nav-links .btn-nav {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: .85rem;
  letter-spacing: normal;
}
html:not([data-theme="dark"]) .nav-links .btn-nav       { background: #2563eb; color: #fff !important; }
html:not([data-theme="dark"]) .nav-links .btn-nav:hover { background: #1d4ed8; color: #fff !important; }
html[data-theme="dark"]       .nav-links .btn-nav       { background: #1d4ed8; color: #fff !important; }
html[data-theme="dark"]       .nav-links .btn-nav:hover { background: #2563eb; color: #fff !important; }

html:not([data-theme="dark"]) .hamburger span { background: #0f172a; }
html[data-theme="dark"]       .hamburger span { background: #e8eef7; }

/* ANA SAYFA BUTONU (1/2) — menüdeki ilk bağlantı.
   Kullanıcı isteği: "bariz bir şekilde görebileceği ana sayfa butonu".
   Menüde ev ikonlu, aksan renginde, çerçeveli duruyor; diğer bağlantıların
   gri tonundan bilerek ayrılıyor. */
.nav-links a.eve {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--kt-aksan-200);
  border-radius: 100px;
  background: var(--kt-aksan-50);
  color: var(--kt-aksan-700) !important;
  font-weight: 640;
}
.nav-links a.eve::before {
  content: '';
  width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: var(--kt-ev) center/contain no-repeat;
          mask: var(--kt-ev) center/contain no-repeat;
}
.nav-links a.eve:hover {
  background: var(--kt-aksan-100);
  border-color: var(--kt-aksan-300);
  color: var(--kt-aksan-800) !important;
}
/* Koyu temada üst bar zaten koyu; aksan-700 lacivert metin okunmuyordu.
   Orada yazı açık aksan tonuna, zemin saydam aksana çekiliyor. */
html[data-theme="dark"] .nav-links a.eve {
  background: rgba(var(--kt-aksan-rgb), .16);
  border-color: rgba(var(--kt-aksan-rgb), .42);
  color: #9dc4f5 !important;
}
html[data-theme="dark"] .nav-links a.eve:hover {
  background: rgba(var(--kt-aksan-rgb), .28);
  border-color: rgba(var(--kt-aksan-rgb), .62);
  color: #cfe2fb !important;
}

body { --kt-ev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3.2 2.6 11l1.3 1.5L5 11.6V21h5.2v-5.6h3.6V21H19v-9.4l1.1.9 1.3-1.5z'/%3E%3C/svg%3E"); }


/* == 04 · AÇILIŞ — anasayfa-kurumsal.css §05 kahraman ===================== */
/* Ana sayfanın kahramanı iki temada da koyu (2026-08-21 kararı). Burada da
   öyle: aynı perde gradyanı, aynı vinyet, aynı beyaz başlık. Video yerine
   ana sayfanın koyu bandındaki aksan hâlesi kullanılıyor. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  padding: clamp(66px, 7vw, 104px) 0 clamp(52px, 6vw, 82px);
  background: #04060c;
  color: var(--kt-ters);
  /* Ana sayfanın kahramanı ekranın büyük kısmını kaplar; burada 427px'lik
     basık bir şerit çıkıyordu. Alt sınır + dikey ortalama o duruşu veriyor.
     vh DEĞİL svh: mobil tarayıcı çubuğu açılıp kapanınca zıplamasın. */
  display: grid;
  align-content: center;
  min-height: clamp(400px, 58svh, 600px);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4, 6, 12, .94) 0%, rgba(4, 6, 12, .82) 34%,
                    rgba(4, 6, 12, .42) 62%, rgba(4, 6, 12, .28) 100%),
    radial-gradient(78% 128% at 12% 0%, rgba(var(--kt-aksan-rgb), .42), transparent 62%);
}
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(2, 4, 9, .55) 100%);
}
.hero > .container { position: relative; }
.hero > .container > * { max-width: 760px; }

/* Üst satır — .kt-kahraman-ust */
.hero-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, .9);
  text-transform: none;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4.6vw, 51px);
  font-weight: 640;
  letter-spacing: -.032em;
  line-height: 1.08;
  color: #fff;
}
.hero p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.56;
  color: rgba(255, 255, 255, .78);
}

/* Düğmeler — .kt-dugme / .kt-dugme.hat */
.hero-cta { gap: 12px; margin-top: 28px; }

.hero-cta .btn, .cta-buttons .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background var(--kt-hiz), transform var(--kt-hiz),
              box-shadow var(--kt-hiz), color var(--kt-hiz), border-color var(--kt-hiz);
}
.hero-cta .btn:hover, .cta-buttons .btn:hover { transform: translateY(-1px); box-shadow: var(--kt-golge-1); }
.hero-cta .btn:active, .cta-buttons .btn:active { transform: none; box-shadow: none; }

/* Birincil: dolu aksan. */
.hero-cta .btn-blue, .cta-buttons .btn-blue {
  background: var(--kt-aksan-600);
  color: #fff;
}
.hero-cta .btn-blue:hover, .cta-buttons .btn-blue:hover { background: var(--kt-aksan-700); color: #fff; }

/* İkincil: koyu bantta cam çerçeve (.kt-dugme.hat koyu varyantı).
   TEK AKSAN İLKESİ: ana sayfada ikinci bir sıcak renk yok, bu yüzden
   WhatsApp düğmesi yeşil zeminden cam çerçeveye alındı. Yeşil yalnız
   sağ alttaki sabit baloncukta kalıyor — ana sayfada da öyle. */
.hero-cta .btn-green, .hero-cta .btn:not(.btn-blue),
.cta-buttons .btn-outline, .cta-buttons .btn:not(.btn-blue) {
  background: rgba(255, 255, 255, .05);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
.hero-cta .btn-green:hover, .hero-cta .btn:not(.btn-blue):hover,
.cta-buttons .btn-outline:hover, .cta-buttons .btn:not(.btn-blue):hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}


/* -- 04b · AÇILIŞ GÖRSELİ (.hero-artli) ----------------------------------
   Yalnızca macbook-termal-bakim.html kullanıyor. Kuralları eski
   hizmet-kurumsal.css'te kalmıştı; o dosya devre dışı bırakılınca teknik
   şema kartı çıplak bir yığına düşüyordu (ölçüldü: hero 1266px'e şişti).
   Buraya birebir taşındı, yalnız --k-* jetonları --kt-* karşılıklarıyla
   değiştirildi. -------------------------------------------------------- */

.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%);
}
.hero-art img, .hero-art video, .hero-art svg {
  display: block; width: 100%; height: auto; border-radius: var(--kt-r-l);
}
.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%);
}

.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; }
.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;
}

.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: #38bdf8; }

/* Teknik şema paneli */
.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; }

.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: #38bdf8; }
.hea-kod { color: #94a3b8; font-weight: 600; letter-spacing: .14em; }

.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;
}

.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); }

.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: ktNabiz 3.2s ease-in-out infinite;
}
.hea-sol { left: 19.5%; top: 33%; }
.hea-sag { left: 79%;   top: 33%; animation-delay: 1.6s; }
@keyframes ktNabiz {
  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); }
}

@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; } }


/* == 05 · ANA SAYFA BUTONU (2/2) — açılışın altındaki yol şeridi ========== */
/* HTML'e eklenen tek blok. Solda kırıntı yolu, sağda dolu "Ana Sayfa"
   düğmesi. Sayfa nereye giderse gitsin geri dönüş yolu hep aynı yerde. */

.yol {
  background: var(--kt-yuzey-2);
  border-bottom: 1px solid var(--kt-cizgi);
}
.yol .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-block: 13px;
}
.yol nav { all: unset; }
.yol ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-size: 13.5px; color: var(--kt-sis);
}
.yol li { display: flex; align-items: center; gap: 8px; }
.yol li + li::before { content: '›'; color: var(--kt-sis-2); }
.yol a { color: var(--kt-sis); font-weight: 600; text-decoration: none; }
.yol a:hover { color: var(--kt-aksan-600); }
.yol [aria-current] { color: var(--kt-murekkep); font-weight: 640; }

.yol-eve {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border-radius: 100px;
  background: var(--kt-aksan-600);
  color: #fff !important;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--kt-hiz), transform var(--kt-hiz), box-shadow var(--kt-hiz);
}
.yol-eve::before {
  content: '';
  width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: var(--kt-ev) center/contain no-repeat;
          mask: var(--kt-ev) center/contain no-repeat;
}
.yol-eve:hover {
  background: var(--kt-aksan-700);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--kt-golge-1);
}


/* == 06 · İÇERİK — ana sayfanın BÖLÜM RİTMİ ==============================
   İlk sürümün hatası: ana sayfanın jetonları (renk, yarıçap, gölge) kopyalandı
   ama KOMPOZİSYONU kopyalanmadı. Sonuç, doğru renklerde ama tek sütun hâlinde
   akan bir belge oldu — ana sayfanın "nefes alan bölümler" hissi yoktu.

   Ana sayfadan alınan üç kural:
   1) ÖLÇÜ: gövde metni asla kabın tamamına yayılmaz. Ana sayfada giriş
      paragrafları ~62ch; burada 78ch idi, 1180px kapta satır ~120 karakter
      oluyordu ve okunmuyordu.
   2) YÜZEY DEĞİŞİMİ: bölümler beyaz → gri → beyaz diye sırayla değişir.
      Ritmi boşluk değil YÜZEY kurar.
   3) NEFES: bölüm arası boşluk başlık boşluğunun ~3 katıdır.
   ======================================================================== */

.content { padding: var(--kt-bolum-y) 0 0; background: var(--kt-yuzey-1); }

/* Başlık ve şerit tam genişlikte; okunan metin dar. Ana sayfanın ölçüsü. */
.content > .container > h2 {
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: clamp(24px, 3.05vw, 37px);
  font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: var(--kt-murekkep);
  max-width: 22ch;
}
/* Bölüm arası nefes: başlıktan ÖNCE gelen büyük boşluk. */
.content > .container > * + h2 { margin-top: clamp(58px, 6vw, 92px); }

.content h3 {
  margin: 26px 0 8px;
  font-size: clamp(16.5px, 1.35vw, 19px);
  font-weight: 640;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: var(--kt-murekkep);
}

.content > .container > p {
  max-width: 64ch;
  color: var(--kt-sis);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.68;
}
.content > .container > p + p { margin-top: 14px; }

/* -- Madde listesi: ham nokta değil, ana sayfadaki gibi tasarlanmış satır --
   Her madde "<strong>başlık:</strong> açıklama" kalıbında. Bu kalıp 52
   sayfada da aynı, o yüzden satırı iki katmanlı bir kart gibi kuruyoruz. */
.content > .container > ul {
  list-style: none;
  padding: 0;
  margin: clamp(26px, 2.8vw, 34px) 0 0;
  display: grid;
  /* 320px idi: 1120px kapta 3 sütun çıkıyor, listeler 4 maddeli olduğu için
     son madde tek başına öksüz kalıyordu. 420px iki sütun verir; 4 madde
     2×2 oturur, 6 madde 3×2. Ölçüldü, tahmin değil. */
  /* min(...,100%) ŞART: çıplak 420px dar ekranda kabı taşırıyor, sayfa
     shrink-to-fit'e düşüyordu (390px cihazda düzen 438px'e çıkıyordu). */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 12px;
  max-width: none;
}
.content > .container > ul > li {
  position: relative;
  display: block;
  padding: 18px 20px 18px 52px;
  border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-r-m);
  background: var(--kt-yuzey-1);
  box-shadow: var(--kt-golge-0);
  color: var(--kt-sis);
  font-size: 15px;
  line-height: 1.6;
}
.content > .container > ul > li::before {
  content: '';
  position: absolute; left: 19px; top: 19px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--kt-aksan-50);
  border: 1px solid var(--kt-aksan-200);
}
/* Onay imi: ayrı bir öğe yok, aynı kutuya maske ile çiziliyor. */
.content > .container > ul > li::after {
  content: '';
  position: absolute; left: 24px; top: 24px;
  width: 9px; height: 9px;
  background: var(--kt-aksan-600);
  -webkit-mask: var(--kt-onay) center/contain no-repeat;
          mask: var(--kt-onay) center/contain no-repeat;
}
.content > .container > ul > li strong {
  display: block;
  margin-bottom: 3px;
  color: var(--kt-murekkep);
  font-weight: 640;
  font-size: 15.5px;
  letter-spacing: -.012em;
}
body { --kt-onay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.4 2 8.2l1.6-1.6 2.6 2.6L12.4 3l1.6 1.6z'/%3E%3C/svg%3E"); }


/* == 07 · KARTLAR — ana sayfa hizmet ızgarasının anatomisi ================
   Ana sayfadaki kart: ROZETLİ SİMGE + başlık + açıklama. Bu sayfalarda
   simge yok ve HTML'e uydurma simge koymak 52 sayfada yalan üretir; bunun
   yerine ana sayfanın rozet kutusu SAYI rozetine dönüştürüldü (counter).
   Kartlar ayrıca gri tam-genişlik bandın üstünde duruyor — ana sayfada
   hizmet ızgarası da gri bantta. */

/* Bandın BAŞLIĞI da bandın içinde ve ortada — ana sayfada gri bandın
   başlığı bantla aynı yüzeyde durur. Başlık beyazda kalırsa kartların
   hemen üstünde gözle görülür bir dikiş izi oluşuyor.
   :has(+ .features) HTML'e dokunmadan "ızgaradan hemen önceki başlık"ı
   seçmenin tek yolu; 52 sayfanın hepsinde iskelet aynı olduğu için güvenli. */
.content > .container > h2:has(+ .features) {
  position: relative;
  z-index: 0;                       /* kendi yığın bağlamı: ::before altta kalsın */
  margin-bottom: 0;
  padding-top: clamp(46px, 4.8vw, 72px);
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
}
.content > .container > h2:has(+ .features)::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--kt-yuzey-2);
  box-shadow: 0 0 0 100vmax var(--kt-yuzey-2);
  clip-path: inset(0 -100vmax);
  border-top: 1px solid var(--kt-cizgi);
}
/* :has desteklemeyen tarayıcıda başlık beyazda kalır, bant kartlardan başlar
   — bozulmaz, sadece daha az zarif. */

.features {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: var(--kt-bosluk);
  margin: 0;
  padding: clamp(34px, 3.6vw, 48px) 0 clamp(38px, 4vw, 54px);
  counter-reset: kart;
  max-width: none;
}
/* Tam genişlik gri bant. box-shadow SEÇİLDİ, 100vw DEĞİL: box-shadow
   yerleşimi ve kaydırmayı etkilemez, 100vw ise kaydırma çubuğu kadar
   yatay taşma yaratır. clip-path bandı dikeyde sınırlıyor. */
.features::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--kt-yuzey-2);
  box-shadow: 0 0 0 100vmax var(--kt-yuzey-2);
  clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--kt-cizgi);
}

.feature {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  background: var(--kt-yuzey-1);
  border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-r-l);
  box-shadow: var(--kt-golge-0);
  padding: clamp(22px, 2.3vw, 30px);
  transition: transform var(--kt-hiz), box-shadow var(--kt-hiz), border-color var(--kt-hiz);
}
.feature::before {
  counter-increment: kart;
  content: counter(kart, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--kt-aksan-50);
  border: 1px solid var(--kt-aksan-100);
  color: var(--kt-aksan-700);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--kt-golge-2);
  border-color: var(--kt-cizgi-koyu);
}
.feature h3 {
  margin: 0 0 9px;
  font-size: clamp(16.5px, 1.35vw, 19px);
  font-weight: 640;
  letter-spacing: -.022em;
  color: var(--kt-murekkep);
}
.feature p { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--kt-sis); }


/* == 08 · İLGİLİ HİZMETLER — ana sayfa rozet şeridi ======================
   Eskiden düz gri bir dikdörtgendi. Ana sayfadaki gibi: küçük büyük-harf
   etiket, üstünde ince ayraç, altında hap rozetler. */

.ilgili-hizmetler {
  margin-top: clamp(52px, 5.4vw, 76px);
  padding-top: clamp(26px, 2.8vw, 34px);
  border-top: 1px solid var(--kt-cizgi);
  background: none;
  max-width: none;
}
.ilgili-hizmetler + .ilgili-hizmetler { margin-top: clamp(26px, 2.8vw, 34px); }
/* Son şeritten sonra kapanış bandı geliyor; alt boşluğu buradan veriyoruz. */
.content > .container > .ilgili-hizmetler:last-child { margin-bottom: var(--kt-bolum-y); }

.ilgili-hizmetler b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kt-sis-2);
  margin-bottom: 16px;
}
.ih-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ih-liste a {
  display: inline-flex; align-items: center;
  background: var(--kt-yuzey-1);
  border: 1px solid var(--kt-cizgi);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kt-sis);
  white-space: nowrap;
  transition: color var(--kt-hiz), border-color var(--kt-hiz), background var(--kt-hiz);
}
.ih-liste a:hover {
  color: var(--kt-aksan-700);
  border-color: var(--kt-aksan-200);
  background: var(--kt-aksan-50);
}


/* == 09 · SSS — anasayfa-kurumsal.css §10 ================================= */

.faq { padding: var(--kt-bolum-y) 0; border-top: 1px solid var(--kt-cizgi); background: var(--kt-yuzey-1); }
.faq > div > h2 {
  font-size: clamp(24px, 3.05vw, 37px);
  font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: var(--kt-murekkep);
  margin-bottom: clamp(26px, 2.8vw, 38px);
}
.faq > div > div, .faq-liste { max-width: 860px; margin-inline: auto; }

.faq-item {
  background: var(--kt-yuzey-1);
  border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-r-m);
  box-shadow: var(--kt-golge-0);
  margin-bottom: 12px;
  max-width: 860px;
  margin-inline: auto;
  transition: border-color var(--kt-hiz), box-shadow var(--kt-hiz);
}
.faq-item:has(.faq-a[style*="block"]),
.faq-item.acik { border-color: var(--kt-cizgi-koyu); box-shadow: var(--kt-golge-1); }

.faq-q {
  padding: 17px 20px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kt-murekkep);
}
/* Açılış oku: ana sayfada .kt-sss summary::after aksan rengindedir. Bu sayfada
   ok ayrı bir .faq-arrow öğesi; rengi aynı jetondan geliyor. */
.faq-q span, .faq-q::after, .faq-arrow { color: var(--kt-aksan-600); }
/* Ok 1.1rem'de bile nokta gibi görünüyordu (▸ karakteri dar çizilir).
   Aksan dairesi içine alınca ana sayfadaki summary okuyla aynı ağırlıkta. */
.faq-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--kt-aksan-50); border: 1px solid var(--kt-aksan-100);
  font-size: 13px; line-height: 1;
}
/* KAPALI hâlde alt dolgu OLMAZ. Sayfanın kendi kuralı max-height:0 +
   overflow:hidden ile kapatıyor; overflow dolgu kutusuna kırpar, yani 20px
   alt dolgu bırakırsak cevabın ilk 20px'i kapalıyken de görünür. Ölçüldü:
   kapalı .faq-a yüksekliği 20px idi ve metin sızıyordu. */
.faq-a { padding: 0 20px; font-size: 15px; line-height: 1.62; color: var(--kt-sis); }
.faq-item.open .faq-a { padding: 0 20px 20px; }


/* == 10 · KAPANIŞ — anasayfa-kurumsal.css §12 koyu bant ================== */

.cta {
  position: relative;
  overflow: hidden;
  padding: var(--kt-bolum-y) 0;
  border-top: 0;
  background: var(--kt-siyah);
  color: var(--kt-ters);
}
.cta::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 50% 0%, rgba(var(--kt-aksan-rgb), .22), transparent 62%);
}
.cta > .container { position: relative; max-width: 64ch; }
.cta h2 {
  font-size: clamp(24px, 3.05vw, 37px);
  font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 14px;
}
.cta p { color: var(--kt-ters-sis); font-size: clamp(15.5px, 1.2vw, 18px); margin-bottom: 28px; }
.cta-buttons { gap: 12px; }

/* Açık temada koyu bant açılır — anasayfa-kurumsal.css §12/A1-A2 ile aynı. */
html:not([data-theme="dark"]) .cta {
  --kt-siyah:      var(--kt-yuzey-2);
  --kt-ters:       var(--kt-murekkep);
  --kt-ters-sis:   var(--kt-sis);
  --kt-cizgi-ters: var(--kt-cizgi);
}
html:not([data-theme="dark"]) .cta::before { opacity: .35; }
html:not([data-theme="dark"]) .cta h2 { color: var(--kt-murekkep); }
html:not([data-theme="dark"]) .cta-buttons .btn:not(.btn-blue) {
  background: var(--kt-yuzey-1);
  color: var(--kt-murekkep);
  border-color: var(--kt-cizgi-koyu);
}
html:not([data-theme="dark"]) .cta-buttons .btn:not(.btn-blue):hover {
  background: var(--kt-yuzey-3);
  border-color: var(--kt-murekkep);
  color: var(--kt-murekkep);
}
html[data-theme="dark"] .cta { background: #06070b; }

/* Aksan rozetleri koyu temada: --kt-aksan-700 lacivert, koyu zeminde
   okunmuyor (üst bardaki Ana Sayfa hapıyla aynı sorun). Ölçüldü:
   kart rozeti rgb(10,74,146), SSS oku rgb(10,94,203) — ikisi de zemine
   gömülüyordu. Koyu temada açık aksan tonuna çekiliyorlar. */
html[data-theme="dark"] .feature::before,
html[data-theme="dark"] .faq-arrow,
html[data-theme="dark"] .faq-q span { color: #9dc4f5; }
html[data-theme="dark"] .feature::before,
html[data-theme="dark"] .faq-arrow { border-color: rgba(var(--kt-aksan-rgb), .32); }
html[data-theme="dark"] .content > .container > ul > li::before {
  border-color: rgba(var(--kt-aksan-rgb), .32);
}
html[data-theme="dark"] .content > .container > ul > li::after { background: #9dc4f5; }


/* == 11 · ALT BİLGİ — main.css footer ==================================== */

/* Alt bilgi ana sayfada kt- değil main.css'ten geliyor; bu yüzden rengi ve
   üst çizgisi kt- jetonu DEĞİL, main.css'in --text-muted / --border-light
   değerleridir. Ölçüldü: color rgb(71,85,105), çizgi rgba(15,23,42,.12). */
footer {
  border-top: 1px solid rgba(15, 23, 42, .12);
  padding: 60px 0 20px;
  color: rgb(71, 85, 105);
}
html:not([data-theme="dark"]) footer { background: #eef2f7; }
/* Koyu temada sabit gri okunmaz; orada jetona geri dönülüyor. */
html[data-theme="dark"] footer {
  background: var(--kt-yuzey-2);
  border-top-color: var(--kt-cizgi);
  color: var(--kt-sis);
}
html[data-theme="dark"] .footer-text,
html[data-theme="dark"] .footer-contact a,
html[data-theme="dark"] .footer-links a { color: var(--kt-sis); }

.footer-grid { gap: 40px; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.6rem; font-weight: 900; letter-spacing: -1px;
  color: var(--kt-murekkep);
  margin-bottom: 14px;
}
.footer-brand::before {
  content: '';
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #0b0b0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ctext x='20' y='26.5' font-family='Inter,Segoe UI,Helvetica,Arial,sans-serif' font-size='18.4' font-weight='900' text-anchor='middle' letter-spacing='-1'%3E%3Ctspan fill='%23e31e24'%3EA%3C/tspan%3E%3Ctspan fill='%23f5c518'%3EB%3C/tspan%3E%3C/text%3E%3C/svg%3E") center/36px 36px no-repeat;
}
.footer-text { color: rgb(71, 85, 105); font-size: .9rem; line-height: 1.7; }
.footer-contact a, .footer-links a {
  color: rgb(71, 85, 105);
  font-size: .9rem;
  font-weight: 500;
  transition: color var(--kt-hiz), padding-left var(--kt-hiz);
}
.footer-contact a:hover, .footer-links a:hover { color: var(--kt-aksan-600); padding-left: 5px; }
.footer-links h3 {
  color: var(--kt-aksan-600);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--kt-aksan-rgb), .18);
}
.footer-bottom {
  border-top: 1px solid var(--kt-cizgi);
  margin-top: 40px;
  padding-top: 20px;
  font-size: .82rem;
  color: var(--kt-sis-2);
}

/* Sabit WhatsApp baloncuğu — ana sayfadaki .whatsapp-float ile aynı. */
.wa-float {
  width: 50px; height: 50px;
  bottom: 25px; right: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.wa-float svg { width: 26px; height: 26px; }


/* == 12 · DAR EKRAN ====================================================== */

@media (max-width: 768px) {
  .yol .container { padding-block: 11px; }
  .yol ol { font-size: 12.5px; }
}

@media (max-width: 600px) {
  html:not([data-theme="dark"]) .nav-links {
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--kt-cizgi);
    box-shadow: 0 18px 40px rgba(11, 18, 32, .12);
  }
  html[data-theme="dark"] .nav-links {
    background: rgba(11, 18, 32, .98);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .nav-links a.eve { justify-content: center; }
}

@media (max-width: 480px) {
  .logo { font-size: 1.32rem; gap: 8px; }
  .logo::before { width: 34px; height: 34px; border-radius: 8px; background-size: 34px 34px; }
  nav .container { min-height: 46px; }
  .hero-cta .btn, .cta-buttons .btn { flex: 1 1 100%; }
  .yol .container { justify-content: flex-start; }
}


/* == 13 · ESKİ ŞABLON (nas-yedekleme, bakim-anlasmalari, firewall-guvenlik) ==
   Bu üç sayfa diğer 49'la aynı iskeleti KULLANMIYOR: .container yerine .wrap,
   <section class="content"> yerine <div class="section">, .features yerine
   .services-grid, ayrıca kendi <style> bloklarında düz hex renkler var.
   HTML'lerini yeniden yazmak yerine sınıfları aynı reçetelere bağlıyoruz;
   böylece üçü de ana sayfa paletiyle ve aynı ritimle çiziliyor.
   GERİ ALMA: bu bölümü sil, üç sayfa kendi eski görünümüne döner.
   ========================================================================= */

.wrap { max-width: var(--kt-kap); margin-inline: auto; padding-inline: var(--kt-yan); }
nav.nav { padding: 0; background: none; border-bottom: 0; }
nav.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 62px;
}
html:not([data-theme="dark"]) nav.nav { background: rgba(255, 255, 255, .95); }
html[data-theme="dark"]       nav.nav { background: rgba(15, 17, 23, .92); }
nav.nav { border-bottom: 1px solid var(--kt-cizgi); }

/* Kırıntı yolu zaten sayfada var; diğer 49 sayfadaki .yol şeridine benzetiliyor. */
.breadcrumb {
  position: relative; z-index: 0;
  padding: 13px 0; font-size: 13.5px; font-weight: 600; color: var(--kt-sis);
}
.breadcrumb::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--kt-yuzey-2);
  box-shadow: 0 0 0 100vmax var(--kt-yuzey-2);
  clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--kt-cizgi);
}
.breadcrumb a { color: var(--kt-sis); text-decoration: none; }
.breadcrumb a:hover { color: var(--kt-aksan-600); }

/* Açılış: bu sayfalarda .hero bir .wrap'ın İÇİNDE, yani koyu zemin kabın
   genişliğinde kalıyordu. box-shadow tam genişliğe taşıyor — 100vw kullanmak
   kaydırma çubuğu kadar yatay taşma yaratırdı. */
.hero:not(section) {
  position: relative; z-index: 0; isolation: auto;
  overflow: visible; text-align: left;
  padding: clamp(58px, 6vw, 92px) 0 clamp(48px, 5.4vw, 76px);
  background: none; min-height: 0; display: block;
}
.hero:not(section)::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(4, 6, 12, .94) 0%, rgba(4, 6, 12, .82) 34%,
                    rgba(4, 6, 12, .46) 62%, rgba(4, 6, 12, .3) 100%),
    radial-gradient(78% 128% at 12% 0%, rgba(var(--kt-aksan-rgb), .42), transparent 62%),
    #04060c;
  box-shadow: 0 0 0 100vmax #04060c;
  clip-path: inset(0 -100vmax);
}
.hero:not(section)::after { content: none; }
.hero:not(section) h1 { color: #fff; max-width: 20ch; }
.hero:not(section) > p { color: rgba(255, 255, 255, .78); max-width: 62ch; margin: 0; }

/* Gövde: .section = .content, .metin/.intro-text = okunan metin ölçüsü. */
.section { padding: var(--kt-bolum-y) 0 0; background: var(--kt-yuzey-1); }
.section > h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.05vw, 37px); font-weight: 640;
  letter-spacing: -.028em; line-height: 1.1;
  color: var(--kt-murekkep); max-width: 22ch;
}
.section > * + h2 { margin-top: clamp(58px, 6vw, 92px); }
.intro-text, .metin p, .metin li {
  max-width: 64ch; color: var(--kt-sis);
  font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.68;
}
.intro-text { margin-bottom: 0; }
.metin { max-width: none; margin-bottom: 0; }
.metin h3 {
  margin: 26px 0 8px; font-size: clamp(16.5px, 1.35vw, 19px);
  font-weight: 640; letter-spacing: -.022em; color: var(--kt-murekkep);
}
.metin strong { color: var(--kt-murekkep); font-weight: 640; }
.metin a { color: var(--kt-aksan-600); text-decoration: none; font-weight: 600; }
.metin a:hover { text-decoration: underline; }

/* Kart ızgarası — .features/.feature ile aynı reçete, aynı gri bant. */
.services-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: var(--kt-bosluk); margin: clamp(30px, 3.2vw, 40px) 0 0;
  padding: clamp(34px, 3.6vw, 48px) 0 clamp(38px, 4vw, 54px);
  counter-reset: kart;
}
.services-grid::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--kt-yuzey-2);
  box-shadow: 0 0 0 100vmax var(--kt-yuzey-2);
  clip-path: inset(0 -100vmax);
  border-block: 1px solid var(--kt-cizgi);
}
.services-grid > .svc-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  background: var(--kt-yuzey-1); border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-r-l); box-shadow: var(--kt-golge-0);
  padding: clamp(22px, 2.3vw, 30px);
  transition: transform var(--kt-hiz), box-shadow var(--kt-hiz), border-color var(--kt-hiz);
}
.services-grid > .svc-card::before {
  counter-increment: kart;
  content: counter(kart, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px;
  background: var(--kt-aksan-50); border: 1px solid var(--kt-aksan-100);
  color: var(--kt-aksan-700);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.services-grid > .svc-card:hover {
  transform: translateY(-2px);
  border-color: var(--kt-cizgi-koyu); box-shadow: var(--kt-golge-1);
}
.services-grid > .svc-card h3 {
  margin: 0 0 7px; font-size: clamp(16.5px, 1.35vw, 19px);
  font-weight: 640; letter-spacing: -.022em; color: var(--kt-murekkep);
}
.services-grid > .svc-card p { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--kt-sis); }
html[data-theme="dark"] .services-grid > .svc-card::before { color: #9dc4f5; }

/* SSS: bu sayfalarda akordeon YOK, h3+p açık duruyor. Kart görünümü aynı. */
.faq { background: var(--kt-yuzey-1); }
.faq-item h3 { font-size: 16px; font-weight: 640; color: var(--kt-murekkep); margin-bottom: 6px; }
.faq-item p  { font-size: 15px; line-height: 1.62; color: var(--kt-sis); margin: 0; }

/* Kapanış bandı ve alt bilgi */
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
footer.footer {
  border-top: 1px solid var(--kt-cizgi);
  padding: 40px 0; text-align: center;
  font-size: 13.5px; color: var(--kt-sis);
}
html:not([data-theme="dark"]) footer.footer { background: #eef2f7; }
html[data-theme="dark"]       footer.footer { background: var(--kt-yuzey-2); }
footer.footer a { color: var(--kt-aksan-600); text-decoration: none; font-weight: 600; }