/* theme-light.css — KGR Grup "Atlas" tema (lacivert + turuncu + beyaz, premium/split-layout) */

/* Self-hosted Figtree + Bricolage Grotesque — ziyaretçi IP'sini Google'a gönderen CDN yerine
   wwwroot/fonts/self-hosted/ altından servis edilir; latin + latin-ext alt kümeleri Türkçe
   karakterleri (ı,İ,ş,Ş,ğ,Ğ) kapsar. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/self-hosted/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/self-hosted/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/self-hosted/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/self-hosted/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* ─── Atlas renk paleti (design_handoff_kgr_atlas_redesign/README.md § Design Tokens) ─── */
  --kgr-navy:#10264C;
  --kgr-navy-1:#0D2148;   /* hero/contact gradient başlangıç */
  --kgr-navy-2:#123163;   /* gradient orta */
  --kgr-navy-3:#17407F;   /* hero gradient bitiş */
  --kgr-terminal-bg:#0A1730;
  --kgr-blue:#1B4D9C;
  --kgr-orange:#E8731C;
  --kgr-orange-hover:#D2650F;
  --kgr-orange-light:#F5A05C;
  --kgr-logo-red:#EB1E25;

  --kgr-bg:#FFFFFF;           /* kart/bölüm zemini */
  --kgr-page-bg:#FAFBFD;      /* sayfa zemini */
  --kgr-surface:#F4F7FB;      /* hover zemini */
  --kgr-table-head:#F0F4FA;   /* tablo başlık zemini */
  --kgr-border:#E5EAF2;

  --kgr-text:#10264C;
  --kgr-text-secondary:#5B6B82;
  --kgr-text-muted:#8A97AB;
  --kgr-text-quiet:#C3CEDF;

  --kgr-whatsapp:#25D366;
  --kgr-whatsapp-soft:#4AE080;

  /* ─── Spacing ölçeği (8px grid) ─── */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px */
  --space-3xl: 8rem;     /* 128px */

  /* ─── Köşe yuvarlaklığı ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-card: 18px;
  --radius-pill: 999px;

  /* ─── Çok katmanlı gölgeler (color-mix tabanlı) ─── */
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--kgr-navy) 6%, transparent),
               0 4px 8px color-mix(in srgb, var(--kgr-navy) 4%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, var(--kgr-navy) 6%, transparent),
               0 10px 24px color-mix(in srgb, var(--kgr-navy) 8%, transparent);
  --shadow-lg: 0 20px 44px rgba(16,38,76,0.1);
  --shadow-card-hover: 0 20px 44px rgba(16,38,76,0.1);

  /* ─── Geçiş / easing ─── */
  --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-duration: 0.3s;

  /* ─── Section & container ─── */
  --section-padding: clamp(5rem, 8vw, 7.5rem) 40px;
  --container-max: 1240px;
  --container-padding: clamp(1rem, 4vw, 2rem);
}

body{ background-color:var(--kgr-page-bg); }
.bg-black,.bg-extra-dark-gray{ background-color:var(--kgr-navy) !important; }
.bg-light-gray{ background-color:var(--kgr-surface) !important; }
.text-extra-dark-gray{ color:var(--kgr-navy) !important; }
.swiper-slide-caption{ background:rgba(16,38,76,0.45); border-radius:8px; }

/* ─── Nav (Atlas: sabit, blur, İletişim outline pill + Teklif Al dolgu pill) ───
   backdrop-filter, uygulandığı öğeyi position:fixed alt elemanları için yeni bir
   "containing block" yapar (transform/filter ile aynı davranış). .navbar-mobile
   off-canvas menüsü (.navbar-collapse) tam da böyle bir position:fixed + height:100%
   alt öğesi olduğu için blur DOĞRUDAN <nav>'a verilirse menü, viewport yerine nav
   bar'ın kendi (~60px) yüksekliğine sıkışıyor. Bulanıklığı ayrı bir ::before katmanına
   taşımak <nav>'ı filtresiz bırakır ve mobil menüyü bozmaz. */
.navbar-fixed-top{
  background-color:transparent !important;
  border-bottom:1px solid var(--kgr-border);
  box-shadow:none;
}
.navbar-fixed-top::before{
  content:'';
  display:block !important;   /* Bootstrap'ın .navbar clearfix'i (::before{display:table}) 0x0'a küçültüyordu */
  position:absolute;
  inset:0;
  /* Neredeyse opak açık zemin: hero'nun koyu gradient'i nav'ın arkasından (top:0)
     başladığı için %88 saydamlıkta blur, nav'ı puslulaştırıp #3D4E6B linkleri
     soluk gösteriyordu. %98'e çıkarıldı → temiz-açık bar + net-koyu linkler
     (tasarım görseliyle birebir); blur, içerik altından kayarken hafif frosted etki için kaldı. */
  background-color:rgba(250,251,253,0.98);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  z-index:-1;
  pointer-events:none;
}
/* Nav linkleri — Atlas: Figtree 600 14px, normal case (miras style.css'in
   "header nav .navbar-nav > li > a { text-transform:uppercase; letter-spacing }"
   ve bootsnav'ın font/margin kuralları daha yüksek özgüllükte olduğu için, aynı
   bootsnav seçici zinciri (nav.navbar.bootsnav ul.nav > li > a) + .inner-link ile
   ezilerek büyük-harf/aralık/Bricolage kaldırılıyor). */
nav.navbar.bootsnav ul.nav > li > a.inner-link{
  font-family:"Figtree",sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  color:#3D4E6B !important;
  margin:0 !important;
  /* Miras bootsnav "padding:30px 0" metin linklerini 80px'e şişiriyordu → ul 80px → nav çok
     yüksek. Dikey padding kontrol altına alındı: linkler pill yüksekliğinden kısa kalıp bar
     yüksekliğini pill'lere + nav dikey padding'ine (20px) bırakır → ~80px ferah bar. */
  padding:8px 0 !important;
  line-height:1.4 !important;
}
nav.navbar.bootsnav ul.nav > li > a.inner-link:hover{ color:var(--kgr-orange) !important; }

@media (max-width: 991px) {
  nav.navbar.bootsnav ul.nav > li > a.inner-link,
  .navbar-fixed-top .navbar-nav > li > a { color: #FFFFFF !important; }
  nav.navbar.bootsnav ul.nav > li > a.inner-link:hover,
  .navbar-fixed-top .navbar-nav > li > a:hover { color: var(--kgr-orange) !important; }
}

.btn{
  font-family:"Figtree",sans-serif;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--radius-pill) !important;
  text-decoration:none;
  transition:transform var(--transition-duration) var(--transition-smooth),
             box-shadow var(--transition-duration) var(--transition-smooth),
             background-color var(--transition-duration) ease-in-out;
}
.btn .kgr-icon{ width:16px; height:16px; }
.btn:hover{ transform:translateY(-2px); }
.btn-secondary,.btn-rounded.btn-secondary{
  background-color:var(--kgr-orange) !important;
  border-color:var(--kgr-orange) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(232,115,28,0.4);
}
.btn-secondary:hover{
  background-color:var(--kgr-orange-hover) !important;
  border-color:var(--kgr-orange-hover) !important;
  box-shadow:0 10px 26px rgba(232,115,28,0.45);
}
/* Büyük CTA ölçüsü (hero, 404, iletişim, Okul Yönetimi) — .btn-small olanlar kendi (küçük) ölçüsünde kalır */
.btn-secondary:not(.btn-small){ padding:15px 32px; font-size:15px; font-weight:600; }

/* Nav pilleri — bootsnav'ın ".navbar.bootsnav ul.nav > li > a { background:transparent !important }"
   kuralından daha yüksek özgüllük gerektiği için birebir seçici zinciri taklit ediliyor. */
nav.navbar.bootsnav ul.nav > li > a.kgr-nav-outline {
  background-color: transparent !important;
  color: var(--kgr-navy) !important;
  border: 1.5px solid var(--kgr-navy) !important;
  border-radius: var(--radius-pill) !important;
  padding: 9px 20px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  transition: all 0.25s;
}
nav.navbar.bootsnav ul.nav > li > a.kgr-nav-outline:hover {
  background-color: var(--kgr-navy) !important;
  color: #ffffff !important;
}
nav.navbar.bootsnav ul.nav > li > a.kgr-nav-cta {
  background-color: var(--kgr-orange) !important;
  color: #ffffff !important;
  border-color: var(--kgr-orange) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10.5px 22px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  box-shadow: 0 4px 14px rgba(232,115,28,0.35);
}
nav.navbar.bootsnav ul.nav > li > a.kgr-nav-cta:hover {
  background-color: var(--kgr-orange-hover) !important;
  border-color: var(--kgr-orange-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Header: logo + menü tek flex satırında (bkz. _SiteHeader.cshtml ".kgr-nav-row").
   Atlas: nav yatay iç boşluğu 40px (içerik, bölümlerin 40px hizasıyla çakışsın),
   dikey 20px → ferah/premium ~80px'lik bar (tasarım görseli). Mobilde yatay 20px. */
header nav.navbar-fixed-top.nav-box-width{ padding:20px 40px; }
@media (max-width:767px){ header nav.navbar-fixed-top.nav-box-width{ padding:14px 20px; } }
header nav.navbar-fixed-top .kgr-nav-row{
  display:flex;
  align-items:center;
  width:100%;
}
header nav.navbar-fixed-top .kgr-nav-logo{ flex:0 0 auto; margin-right:32px; }
header nav.navbar-fixed-top .navbar-toggle{ margin-left:auto; margin-right:0; }

@media (min-width:992px){
  header nav.navbar-fixed-top .navbar-collapse{ flex:1 1 auto; }
  header nav.navbar-fixed-top .navbar-nav{ white-space:nowrap; display:flex; align-items:center; justify-content:flex-end; gap:clamp(6px,1.4vw,28px); float:none; }
  header nav.navbar-fixed-top .navbar-nav > li{ float:none; }
  header nav.navbar-fixed-top .navbar-nav > li > a{
    margin:0;
    font-size:14px;
  }
}

/* Logo — metin tabanlı, marka kırmızısı sabit (token değil). */
.kgr-brand-text{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  letter-spacing:0.3px;
  white-space:nowrap;
}
.kgr-brand-red{ color:var(--kgr-logo-red); }
.kgr-brand-dark{ color:var(--kgr-navy); }
footer .kgr-brand-dark{ color:var(--kgr-navy); }
header .kgr-brand-text{ font-size:23px; }
footer .kgr-brand-text{ font-size:20px; }

/* Heading hierarchy helpers (Error.cshtml gibi kapsam dışı sayfalarda hâlâ kullanılıyor) */
.kgr-h5-size { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; }
.kgr-h6-size { font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2; }
.kgr-h1-size { font-size: clamp(2.25rem, 5vw, 4.375rem); line-height: 1.1; }

body { font-family: "Figtree", sans-serif; }
.text-font-sec { font-family: "Bricolage Grotesque", sans-serif; }

/* ─── Ortak bölüm/konteyner yardımcıları ─────────────────────────────────────
   Atlas deseni: max-width:1240px = GERÇEK içerik genişliği; 40px yatay = yalnız
   kenar payı (gutter), bölüm sarmalayıcısında. .kgr-container SALT max-width +
   ortalamadır (kendi padding'i YOK) — böylece hero/süreç/SSS/iletişim (bölüm
   padding'i + çıplak max-width grid) ile Yazılım/Donanım/YZ (.kgr-section +
   .kgr-container) bölümlerinin içerik sol kenarı BİREBİR hizalanır. Konteynere
   ayrıca 40px verilirse bu bölümler 80px içeri kayıp hizadan çıkıyordu. */
.kgr-container{ max-width:var(--container-max); margin:0 auto; }
.kgr-section{ padding:clamp(5rem, 8vw, 7.5rem) 40px; }
/* Mobilde yatay gutter 40px → 20px (hero ile tutarlı). var(--section-padding) kullanan
   süreç/SSS/iletişim/portföy-başlığı bölümleri de dahil — aksi halde iletişim kartında
   40px section + 40px kart = 80px sıkışma oluşuyordu. */
@media (max-width:767px){
  .kgr-section,
  .kgr-process-section,
  .kgr-faq-section,
  .kgr-contact-section{ padding-left:20px; padding-right:20px; }
  .kgr-portfolio-header{ padding-left:20px; padding-right:20px; }
}

/* ─── Eyebrow (renkli çizgi + büyük harf etiket) ─────────────────────────── */
.kgr-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.kgr-eyebrow-rule{ height:2px; width:40px; display:inline-block; }
.kgr-eyebrow-label{ font-size:12.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }
.kgr-eyebrow-orange .kgr-eyebrow-rule{ background:var(--kgr-orange); }
.kgr-eyebrow-orange .kgr-eyebrow-label{ color:var(--kgr-orange-hover); }
.kgr-eyebrow-blue .kgr-eyebrow-rule{ background:var(--kgr-blue); }
.kgr-eyebrow-blue .kgr-eyebrow-label{ color:var(--kgr-blue); }
.kgr-eyebrow-on-dark.kgr-eyebrow-orange .kgr-eyebrow-label{ color:var(--kgr-orange-light); }

/* Bölüm başlığı (H2) — sol hizalı, Bricolage Grotesque */
.kgr-h2{
  font-family:"Bricolage Grotesque", sans-serif;
  font-size:clamp(2rem, 3.4vw, 3rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.03em;
  margin:0;
}
.kgr-lead{ color:var(--kgr-text-secondary); font-size:15.5px; line-height:1.8; }

/* Pill rozet (Featured strip, Okul Yönetimi hero) */
.kgr-pill-badge{
  display:inline-flex;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  background:rgba(232,115,28,0.18);
  color:var(--kgr-orange-light);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

/* ─── Hero (split: metin + terminal kartı) ───────────────────────────────── */
.kgr-hero-atlas{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,var(--kgr-navy-1) 0%,var(--kgr-navy-2) 70%,var(--kgr-navy-3) 100%);
  padding:170px 40px 110px;
  color:#fff;
}
.kgr-hero-atlas::before{
  content:'';
  position:absolute; inset:0; opacity:0.5;
  background:radial-gradient(ellipse 60% 50% at 85% 20%, rgba(232,115,28,0.18), transparent),
             radial-gradient(ellipse 50% 60% at 10% 90%, rgba(27,77,156,0.5), transparent);
}
.kgr-hero-grid{
  max-width:var(--container-max); margin:0 auto; position:relative;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:72px; align-items:center;
}
.kgr-hero-grid h1{
  font-family:"Bricolage Grotesque", sans-serif;
  font-size:clamp(2.6rem,5vw,4.4rem);
  font-weight:700;
  line-height:1.06;
  color:#fff;
  letter-spacing:-0.03em;
  margin:0 0 24px;
}
.kgr-hero-grid .kgr-hero-desc{
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:rgba(226,232,240,0.72);
  line-height:1.75;
  max-width:520px;
  margin:0 0 36px;
}
.kgr-hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kgr-hero-actions .btn-outline-light{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:15px; padding:15px 32px; border-radius:var(--radius-pill);
  border:1.5px solid rgba(255,255,255,0.28); color:#fff; transition:all 0.25s;
}
.kgr-hero-actions .btn-outline-light:hover{ border-color:#fff; color:#fff; }
.kgr-hero-stats{ display:flex; gap:40px; margin-top:56px; }
.kgr-hero-stats strong{
  display:block; font-family:"Bricolage Grotesque", sans-serif; font-size:1.9rem; font-weight:700; color:#fff;
}
.kgr-hero-stats span{
  font-size:12.5px; color:rgba(226,232,240,0.55); text-transform:uppercase; letter-spacing:0.07em;
}

/* Terminal kartı */
.kgr-terminal-wrap{ position:relative; }
.kgr-terminal{
  background:var(--kgr-terminal-bg);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 40px 80px rgba(4,10,26,0.55);
}
.kgr-terminal-bar{
  display:flex; align-items:center; gap:6px; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.kgr-terminal-dot{ width:11px; height:11px; border-radius:50%; }
.kgr-terminal-bar span.kgr-terminal-title{
  margin-left:10px; color:rgba(255,255,255,0.4); font-size:12px; font-family:monospace;
}
.kgr-terminal-body{
  padding:20px 22px;
  font-family:"SF Mono","Cascadia Code",monospace;
  font-size:13px; line-height:2;
}
.kgr-terminal-cursor{
  display:inline-block; width:8px; height:16px; background:#7FDBCA;
  vertical-align:middle; margin-left:4px; animation:kgr-blink 1s step-end infinite;
}
@keyframes kgr-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

.kgr-float-badge{
  position:absolute; background:#fff; border-radius:14px; padding:14px 18px;
  box-shadow:0 16px 40px rgba(4,10,26,0.35);
  display:flex; align-items:center; gap:12px;
}
.kgr-float-badge-icon{
  display:inline-flex; width:38px; height:38px; border-radius:10px;
  align-items:center; justify-content:center;
}
.kgr-float-badge strong{ display:block; font-size:13px; font-weight:600; color:var(--kgr-navy); }
.kgr-float-badge small{ font-size:11.5px; color:#7A8AA3; }
.kgr-float-badge--kvkk{ top:-22px; right:-22px; }
.kgr-float-badge--kvkk .kgr-float-badge-icon{ background:rgba(40,200,64,0.12); color:#1E9E38; }
.kgr-float-badge--ai{ bottom:-20px; left:-26px; }
.kgr-float-badge--ai .kgr-float-badge-icon{ background:rgba(232,115,28,0.12); color:var(--kgr-orange); }

@media (max-width:991px){
  .kgr-hero-atlas{ padding:150px 20px 80px; }
  .kgr-hero-grid{ grid-template-columns:1fr; gap:56px; }
  .kgr-terminal-wrap{ max-width:480px; }
  .kgr-hero-stats{ flex-wrap:wrap; gap:28px; }
}

/* ─── Featured strip (koyu bant) ─────────────────────────────────────────── */
.kgr-featured-strip{
  background:var(--kgr-navy);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:20px 40px;
}
.kgr-featured-strip-row{
  max-width:var(--container-max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.kgr-featured-strip-row a{
  display:inline-flex; align-items:center; gap:8px; color:var(--kgr-orange-light); font-weight:600; font-size:14px;
}
.kgr-featured-strip-row a:hover{ color:#fff; }
.kgr-featured-strip-row .kgr-icon{ width:15px; height:15px; }

/* ─── Yazılım Ürünleri (numaralı liste) ──────────────────────────────────── */
.kgr-software-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; }
.kgr-software-sticky{ position:sticky; top:110px; align-self:start; }
.kgr-software-list{ display:flex; flex-direction:column; }
.kgr-software-row{
  display:flex; gap:24px; padding:28px 0; border-top:1px solid var(--kgr-border);
  transition:padding-left 0.25s;
}
.kgr-software-list .kgr-software-row:last-child{ border-bottom:1px solid var(--kgr-border); }
.kgr-software-row:hover{ padding-left:12px; }
.kgr-software-row .kgr-num{
  font-family:"Bricolage Grotesque", sans-serif; font-size:15px; font-weight:700;
  color:var(--kgr-text-quiet); flex-shrink:0; padding-top:2px;
}
.kgr-software-row h3{
  font-family:"Bricolage Grotesque", sans-serif; font-size:1.2rem; font-weight:600; margin:0 0 8px;
  color:var(--kgr-text);
}
.kgr-software-row p{ color:var(--kgr-text-secondary); font-size:14.5px; line-height:1.75; margin:0; }
@media (max-width:991px){
  .kgr-software-grid{ grid-template-columns:1fr; gap:36px; }
  .kgr-software-sticky{ position:static; }
}

/* ─── Donanım grid (tek çerçeve, gap:1px background tekniği) ─────────────── */
.kgr-hw-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--kgr-border); border:1px solid var(--kgr-border);
  border-radius:var(--radius-card); overflow:hidden;
}
.kgr-hw-item{ background:#fff; padding:30px 26px; transition:background 0.25s; }
.kgr-hw-item:hover{ background:var(--kgr-surface); }
.kgr-hw-item .kgr-icon{ width:26px; height:26px; color:var(--kgr-blue); }
.kgr-hw-item h6{
  font-family:"Bricolage Grotesque", sans-serif; font-size:15px; margin:14px 0 8px; color:var(--kgr-text);
}
.kgr-hw-item p{ color:var(--kgr-text-secondary); font-size:13px; line-height:1.7; margin:0; }
@media (max-width:991px){ .kgr-hw-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){ .kgr-hw-grid{ grid-template-columns:1fr; } }

/* ─── Çözüm kartları (Yapay Zeka + Okul Yönetimi modülleri) ──────────────── */
.kgr-solution-grid{ display:grid; gap:20px; }
.kgr-solution-grid--3col{ grid-template-columns:repeat(3,1fr); }
.kgr-solution-grid--4col{ grid-template-columns:repeat(4,1fr); }
.kgr-solution-card{
  background:#fff; border:1px solid var(--kgr-border); border-radius:var(--radius-card);
  padding:30px; border-top:3px solid var(--kgr-orange);
  transition:transform 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth);
}
.kgr-solution-card:nth-child(even){ border-top-color:var(--kgr-blue); }
.kgr-solution-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); }
.kgr-solution-card .kgr-icon{ width:28px; height:28px; color:var(--kgr-blue); }
.kgr-solution-card h6{
  font-family:"Bricolage Grotesque", sans-serif; font-size:16px; margin:0 0 10px; color:var(--kgr-text);
}
.kgr-solution-card--icon h6{ margin:16px 0 8px; font-size:15.5px; }
.kgr-solution-card p{ color:var(--kgr-text-secondary); font-size:13.5px; line-height:1.75; margin:0; }
@media (max-width:991px){
  .kgr-solution-grid--3col,.kgr-solution-grid--4col{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .kgr-solution-grid--3col,.kgr-solution-grid--4col{ grid-template-columns:1fr; }
}

/* ─── Sürecimiz (koyu bölüm, dikey zaman çizelgesi) ───────────────────────── */
.kgr-process-section{
  background:var(--kgr-navy); padding:var(--section-padding);
  position:relative; overflow:hidden; color:#fff;
}
.kgr-process-section::before{
  content:''; position:absolute; top:0; right:0; width:50%; height:100%;
  background:radial-gradient(ellipse at right, rgba(27,77,156,0.35), transparent 70%);
}
.kgr-process-grid{
  max-width:var(--container-max); margin:0 auto; position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:72px;
}
.kgr-process-grid h2{ color:#fff; margin:0 0 20px; }
.kgr-process-grid > div:first-child p{ color:rgba(226,232,240,0.65); font-size:15px; line-height:1.8; margin:0; }
.kgr-timeline{ display:flex; flex-direction:column; }
.kgr-timeline-item{ display:flex; gap:22px; padding-bottom:32px; }
.kgr-timeline-item:last-child{ padding-bottom:0; }
.kgr-timeline-marker{ display:flex; flex-direction:column; align-items:center; }
.kgr-timeline-badge{
  display:inline-flex; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff;
  align-items:center; justify-content:center;
  font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:15px; flex-shrink:0;
}
.kgr-timeline-item:first-child .kgr-timeline-badge{ background:var(--kgr-orange); border-color:var(--kgr-orange); }
.kgr-timeline-rule{ flex:1; width:2px; background:rgba(255,255,255,0.14); margin-top:8px; }
.kgr-timeline-content{ padding-top:8px; }
.kgr-timeline-content h3{
  font-family:"Bricolage Grotesque", sans-serif; font-size:1.15rem; font-weight:600; color:#fff; margin:0 0 6px;
}
.kgr-timeline-content p{ font-size:14px; color:rgba(226,232,240,0.6); line-height:1.75; margin:0; }
@media (max-width:991px){ .kgr-process-grid{ grid-template-columns:1fr; gap:40px; } }

/* ─── Portföy (sonsuz marquee) ───────────────────────────────────────────── */
.kgr-portfolio-section{ padding:var(--section-padding); padding-left:0; padding-right:0; overflow:hidden; }
.kgr-portfolio-header{ max-width:var(--container-max); margin:0 auto 48px; padding:0 40px; }
.kgr-marquee-track{ display:flex; width:max-content; gap:18px; animation:kgr-marquee 40s linear infinite; }
@keyframes kgr-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.kgr-marquee-item{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius-lg);
  width:340px; aspect-ratio:4/3; flex-shrink:0;
}
.kgr-marquee-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.kgr-marquee-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:36px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(8,20,48,0.85)); color:#fff;
  font-family:"Bricolage Grotesque", sans-serif; font-size:14px;
}
.kgr-marquee-item figcaption span{
  display:block; font-family:"Figtree", sans-serif; font-size:11px; color:var(--kgr-orange-light);
  text-transform:uppercase; letter-spacing:0.08em; margin-top:2px;
}
@media (prefers-reduced-motion: reduce){ .kgr-marquee-track{ animation:none; } }

/* ─── SSS (iki sütun akordeon) ───────────────────────────────────────────── */
.kgr-faq-section{ background:#fff; border-top:1px solid var(--kgr-border); padding:var(--section-padding); }
.kgr-faq-grid{ max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; }
.kgr-faq-grid h2{ margin:0 0 16px; }
.kgr-faq-intro{ color:var(--kgr-text-secondary); font-size:15px; line-height:1.8; }
.kgr-faq-intro a{ color:var(--kgr-orange); font-weight:600; }
.kgr-faq-list{ display:flex; flex-direction:column; }
.kgr-faq .kgr-faq-item{
  border:none; border-bottom:1px solid var(--kgr-border);
  border-radius:0; margin-bottom:0; box-shadow:none; background:transparent;
}
.kgr-faq .panel-heading a{ padding:20px 0; }
.kgr-faq .panel-heading a::after{ right:0; font-size:22px; }
.kgr-faq .panel-title{ font-size:15.5px; padding-right:36px; }
.kgr-faq .panel-body{ padding:0 0 20px; font-size:14px; }
@media (max-width:991px){ .kgr-faq-grid{ grid-template-columns:1fr; gap:32px; } }

/* ─── İletişim (gradient kart) ───────────────────────────────────────────── */
.kgr-contact-section{ padding:var(--section-padding); }
.kgr-contact-card{
  max-width:var(--container-max); margin:0 auto;
  background:linear-gradient(160deg,var(--kgr-navy-1),var(--kgr-navy-2));
  border-radius:28px; padding:clamp(2.5rem,5vw,4.5rem);
  display:grid; grid-template-columns:1fr 1.2fr; gap:64px;
  position:relative; overflow:hidden; color:#fff;
}
.kgr-contact-card::before{
  content:''; position:absolute; top:-140px; right:-80px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,115,28,0.2), transparent 65%); filter:blur(50px);
}
.kgr-contact-info{ position:relative; }
.kgr-contact-info h2{ color:#fff; margin:0 0 16px; }
.kgr-contact-info p{ color:rgba(226,232,240,0.65); line-height:1.8; font-size:15px; margin:0 0 28px; }
.kgr-contact-info p a{ color:var(--kgr-whatsapp); font-weight:600; }
.kgr-whatsapp-pill{
  display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:var(--radius-pill);
  background:rgba(37,211,102,0.15); border:1px solid rgba(37,211,102,0.35); color:var(--kgr-whatsapp-soft);
  font-weight:600; font-size:14.5px; transition:background 0.2s ease;
}
.kgr-whatsapp-pill:hover{ background:rgba(37,211,102,0.25); color:var(--kgr-whatsapp-soft); }
.kgr-contact-phone{ margin-top:24px; }
.kgr-contact-phone a{ color:rgba(226,232,240,0.75); font-size:15px; font-weight:600; }
.kgr-contact-phone a:hover{ color:var(--kgr-orange-light); }
.kgr-contact-form-wrap{ position:relative; }
#contacts .kgr-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* Miras style.css'in ".form-wrap + * { margin-top:20px }" kuralı, eski tek-sütunlu form
   düzeni için art arda gelen alanlar arasına boşluk koyuyordu. 2 sütunlu grid'de bu kural
   ikinci sütundaki her alanı (Cep Tel, Konu, Mesaj...) DOM'da önceki .form-wrap'in "sonraki
   kardeşi" olduğu için 20px aşağı itip satır hizasını bozuyordu (kullanıcı bildirimi: "Cep
   Tel alanı aşağı kaymış"). Grid zaten kendi gap'iyle boşluk sağladığından etkisiz kılınıyor. */
#contacts .kgr-form-grid .form-wrap + *{ margin-top:0 !important; }
#contacts .form-wrap{ margin-bottom:0; }
#contacts .form-wrap--full{ grid-column:1 / -1; }
#contacts .form-input{
  width:100%; padding:14px 16px; border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  background:rgba(255,255,255,0.07); color:#fff; font-family:"Figtree", sans-serif; font-size:14.5px;
  outline:none; margin-bottom:0; transition:border-color 0.2s ease;
}
#contacts .form-input::placeholder{ color:rgba(226,232,240,0.55); }
#contacts .form-input:focus{ border-color:var(--kgr-orange-light); box-shadow:none; }
#contacts select.form-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E2E8F0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; appearance:none;
}
#contacts select.form-input option{ color:var(--kgr-navy); }
#contacts textarea.form-input{ min-height:110px; resize:vertical; }
#contacts .kgr-kvkk-row{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px;
  color:rgba(226,232,240,0.7); font-size:13px; font-weight:400; text-transform:none;
}
#contacts .kgr-kvkk-row a{ color:var(--kgr-orange-light); }
#contacts .form-button{ grid-column:1 / -1; margin:0; }
#contacts .form-button .btn{ width:100%; padding:16px; font-size:15px; }
#contacts .g-recaptcha{ grid-column:1 / -1; display:flex; justify-content:center; margin:0; }
#contacts .alert{ grid-column:1 / -1; border-radius:12px; font-size:14px; }
#contacts .alert-success{ background:rgba(74,224,128,0.15); border:1px solid rgba(74,224,128,0.35); color:var(--kgr-whatsapp-soft); }
#contacts .alert-danger{ background:rgba(255,107,107,0.15); border:1px solid rgba(255,107,107,0.35); color:#FF9B9B; }
@media (max-width:991px){
  .kgr-contact-card{ grid-template-columns:1fr; gap:40px; padding:2.5rem; }
}
@media (max-width:575px){
  #contacts .kgr-form-grid{ grid-template-columns:1fr; }
}

/* ─── Footer (Atlas: açık/beyaz zemin) ───────────────────────────────────── */
.kgr-footer{
  border-top:1px solid var(--kgr-border);
  padding:56px 40px 28px;   /* yatay 40px gutter — .kgr-container artık padding'siz */
  background:#fff;
}
.kgr-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:64px; }
.kgr-footer-about{
  color:var(--kgr-text-secondary); font-size:14px; line-height:1.75; margin:14px 0; max-width:320px;
}
.kgr-footer-heading{
  font-family:"Bricolage Grotesque", sans-serif; font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--kgr-navy); margin:0 0 14px;
}
.kgr-footer-link{
  display:block; color:var(--kgr-text-secondary); font-size:14px; text-decoration:none;
  padding:4px 0; transition:color 0.2s ease;
}
.kgr-footer-link:hover{ color:var(--kgr-orange); }
.kgr-footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--kgr-border);
  text-align:center; color:var(--kgr-text-muted); font-size:13px;
}
@media (max-width:767px){
  .kgr-footer-grid{ grid-template-columns:1fr; gap:var(--space-lg); }
  .kgr-footer{ padding:var(--space-lg) 20px; }
}

/* ─── Yüzen butonlar (WhatsApp / Ara / YZ Asistanı) ──────────────────────── */
/* Miras style.css'in jQuery UItoTop eklentisiyle (scripts.js) enjekte ettiği ".ui-to-top"
   scroll-to-top butonu varsayılan olarak sağ altta (right:40px; bottom:40px;) beliriyor —
   tam da aşağıdaki WhatsApp/Ara butonlarının bulunduğu köşe. Önceki temada bu çakışmayı
   önlemek için buton sola alınmıştı; bu blok o konumlandırmayı korur. */
.ui-to-top {
  right: auto;
  left: 40px;
  bottom: 40px;
}
@media (max-width: 767px) {
  .ui-to-top { left: 18px; bottom: 18px; }
}

.kgr-call-float {
  position: fixed; bottom: 96px; right: 28px; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background-color: var(--kgr-blue); color: #fff;
  box-shadow: 0 8px 24px rgba(27,77,156,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.kgr-call-float:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(27,77,156,0.55); color: #fff; text-decoration: none; }
.kgr-call-tooltip {
  position: absolute; right: 68px; top: 50%; transform: translateY(-50%);
  background: var(--kgr-navy); color: #fff; font-size: 12px; font-family: "Figtree", sans-serif;
  padding: 6px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.kgr-call-float:hover .kgr-call-tooltip { opacity: 1; }

.kgr-whatsapp-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background-color: var(--kgr-whatsapp); color: #fff;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.kgr-whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(37,211,102,0.55); color: #fff; text-decoration: none; }
.kgr-whatsapp-tooltip {
  position: absolute; right: 68px; top: 50%; transform: translateY(-50%);
  background: var(--kgr-navy); color: #fff; font-size: 12px; font-family: "Figtree", sans-serif;
  padding: 6px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.kgr-whatsapp-float:hover .kgr-whatsapp-tooltip { opacity: 1; }
@media (max-width: 767px) {
  .kgr-whatsapp-float { bottom: 18px; right: 18px; width: 50px; height: 50px; }
  .kgr-whatsapp-float svg { width: 24px; height: 24px; }
  .kgr-whatsapp-tooltip { display: none; }
  .kgr-call-float { bottom: 80px; right: 18px; width: 50px; height: 50px; }
  .kgr-call-float svg { width: 20px; height: 20px; }
  .kgr-call-tooltip { display: none; }
}
/* AI asistan butonu konumu _ChatWidget.cshtml içinde inline stille (bottom:28 right:96) ayarlı;
   mobilde sıkışmaması için burada aynı breakpoint'te küçültülüyor. */
@media (max-width: 480px) {
  #kgr-chat-widget { bottom: 18px; right: 80px; }
}
/* Atlas: YZ Asistanı butonu LACİVERT (#10264C) — Hemen Ara (#1B4D9C mavi) ile ayrışsın diye
   (_ChatWidget.cshtml varsayılanı mavi; tasarım her ikisini kasıtlı farklı renklendiriyor). */
#kgr-chat-widget .kgr-chat-toggle { background: var(--kgr-navy); }
#kgr-chat-widget .kgr-chat-toggle:hover { box-shadow: 0 8px 24px rgba(16,38,76,0.55); }

/* ─── Scroll reveal (Intersection Observer — bkz. _SiteScripts.cshtml) ──── */
[data-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
}
[data-animate].is-visible { opacity: 1; transform: none; }
[data-animate="fade-left"] { transform: translateX(-26px); }
[data-animate="fade-right"] { transform: translateX(26px); }
[data-animate="fade-left"].is-visible,
[data-animate="fade-right"].is-visible { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ─── FAQ akordeon (Bootstrap collapse üzerine — tek panel açık) ─────────── */
.kgr-faq .panel-heading { padding: 0; background: transparent; }
.kgr-faq .panel-heading a {
  display: block; text-decoration: none; color: var(--kgr-navy); position: relative;
}
.kgr-faq .panel-heading a::after {
  content: '+'; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 300; color: var(--kgr-orange); transition: transform .2s ease;
}
.kgr-faq .panel-heading a:not(.collapsed)::after { content: '\2212'; }
.kgr-faq .panel-title {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; margin: 0; color: var(--kgr-navy);
}
.kgr-faq .panel-body { color: var(--kgr-text-secondary); }

/* ─── İletişim formu (kart dışı sayfalarda kullanılmıyor, ama input tabanı burada) ─── */
#contacts .g-recaptcha > div{ margin:0 auto; }

/* ─── Inline SVG ikon boyutları ───────────────────────────────────────── */
.kgr-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.kgr-caret { width: 12px; height: 12px; margin-left: 4px; opacity: 0.7; }

/* ─── Yasal sayfa (Gizlilik Politikası) ──────────────────────────────────── */
.kgr-legal-hero{
  background:linear-gradient(160deg,var(--kgr-navy-1),var(--kgr-navy-2));
  padding:150px 40px 64px; color:#fff;
}
.kgr-legal-hero-inner{ max-width:820px; margin:0 auto; }
.kgr-legal-hero h1{
  font-family:"Bricolage Grotesque", sans-serif; font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:700;
  line-height:1.12; letter-spacing:-0.03em; color:#fff; margin:0 0 10px;
}
.kgr-legal-hero p{ color:rgba(226,232,240,0.55); font-size:13.5px; margin:0; }
.kgr-legal-body{ padding:56px 40px 80px; }
.kgr-legal-body-inner{
  max-width:820px; margin:0 auto; font-size:15px; line-height:1.85; color:var(--kgr-text-secondary);
}
.kgr-legal-body-inner h2{
  font-family:"Bricolage Grotesque", sans-serif; font-size:1.35rem; color:var(--kgr-navy); margin:40px 0 12px;
}
.kgr-legal-body-inner h2:first-of-type{ margin-top:0; }
.kgr-legal-body-inner h3{
  font-family:"Bricolage Grotesque", sans-serif; font-size:1.05rem; color:var(--kgr-navy); margin:20px 0 8px;
}
.kgr-legal-body-inner ul{ padding-left:22px; display:flex; flex-direction:column; gap:6px; margin:0 0 1em; }
.kgr-legal-body-inner .kgr-text-small{ font-size:13.5px; }
.kgr-taslak-box{
  border:1px solid #F2C879; background:#FFF8EA; color:#7A5A16; border-radius:14px;
  padding:16px 20px; font-size:14px; margin-bottom:40px;
}
.kgr-legal-table{ border:1px solid var(--kgr-border); border-radius:14px; overflow:hidden; margin:16px 0; }
.kgr-legal-table-row{ display:grid; grid-template-columns:1.2fr 1fr 1.2fr; font-size:13.5px; }
.kgr-legal-table-row + .kgr-legal-table-row{ border-top:1px solid var(--kgr-border); }
.kgr-legal-table-row.kgr-legal-table-head{ background:var(--kgr-table-head); font-weight:600; color:var(--kgr-navy); }
.kgr-legal-table-row span{ padding:11px 16px; }
.kgr-legal-table-head span{ padding:12px 16px; }
@media (max-width:575px){
  .kgr-legal-table-row{ grid-template-columns:1fr; }
  .kgr-legal-table-row span{ padding:8px 16px; }
  .kgr-legal-table-row span:first-child{ padding-top:11px; font-weight:600; color:var(--kgr-navy); }
}

/* ─── Okul Yönetimi sayfası ───────────────────────────────────────────────── */
.kgr-oy-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--kgr-navy-1) 0%,var(--kgr-navy-2) 70%,var(--kgr-navy-3) 100%);
  padding:160px 40px 90px; color:#fff; text-align:center;
}
.kgr-oy-hero::before{
  content:''; position:absolute; inset:0; opacity:0.5;
  background:radial-gradient(ellipse 60% 50% at 85% 20%, rgba(232,115,28,0.18), transparent);
}
.kgr-oy-hero-inner{ max-width:860px; margin:0 auto; position:relative; }
.kgr-oy-hero h1{
  font-family:"Bricolage Grotesque", sans-serif; font-size:clamp(2.2rem,4.4vw,3.6rem); font-weight:700;
  line-height:1.08; color:#fff; letter-spacing:-0.03em; margin:22px 0 18px;
}
.kgr-oy-hero p{
  font-size:clamp(1rem,1.4vw,1.15rem); color:rgba(226,232,240,0.72); line-height:1.75;
  max-width:640px; margin:0 auto;
}
.kgr-oy-modules{ padding:clamp(4rem,7vw,6rem) 40px; }

/* ─── 404 sayfası (standalone, tam ekran) ────────────────────────────────── */
.kgr-404-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--kgr-navy-1) 0%,var(--kgr-navy-2) 70%,var(--kgr-navy-3) 100%);
  font-family:"Figtree", sans-serif; color:#fff;
}
.kgr-404-page::before{
  content:''; position:absolute; inset:0; opacity:0.5;
  background:radial-gradient(ellipse 60% 50% at 80% 20%, rgba(232,115,28,0.18), transparent);
}
.kgr-404-logo{
  position:absolute; top:28px; left:40px; font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:23px;
}
.kgr-404-art{ position:relative; animation:kgr-drift 6s ease-in-out infinite; }
@keyframes kgr-drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
.kgr-404-number{
  font-family:"Bricolage Grotesque", sans-serif; font-size:clamp(6rem,18vw,12rem); font-weight:700; line-height:1;
  letter-spacing:-0.04em; background:linear-gradient(120deg,var(--kgr-orange-light),var(--kgr-orange) 55%,var(--kgr-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kgr-404-page h1{
  font-family:"Bricolage Grotesque", sans-serif; font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:600;
  margin:20px 0 10px; position:relative; color:#fff;
}
.kgr-404-page p{
  color:rgba(226,232,240,0.65); font-size:15.5px; line-height:1.75; max-width:420px; margin:0 0 32px; position:relative;
}
@media (prefers-reduced-motion: reduce){ .kgr-404-art{ animation:none; } }
.kgr-404-page .btn{ position:relative; }