/* =========================================================
   Via Grup - Global Styles
   - Bu dosya: tüm sayfa tasarımı, animasyonlar, header/footer
   - İstek: Beyaz zemin, siyah yazı/ikon; modern şık
   ========================================================= */

:root{
  --bg:#ffffff;
  --text:#0b0f17;
  --muted:#5f6b7a;
  --line:rgba(0,0,0,.10);
  --shadow:0 18px 48px rgba(0,0,0,.10);
  --radius:18px;

  /* =======================================================
     NAVBAR RENK / KALINLIK (DEĞİŞTİ)
     - Eski: #0b3aa4 (düz)
     - Yeni: daha şık “premium mavi”
     ======================================================= */
  --nav-bg:#0a2f8f;       /* // DEĞİŞTİ: daha şık mavi */
  --nav-bg-edu:#0b0f17;
  --nav-text:#ffffff;

  /* =======================================================
     fixed bar yükseklikleri (DEĞİŞTİ)
     - navbar biraz daha kalın olsun istedin
     ======================================================= */
  --topinfo-h:46px;       /* // DEĞİŞTİ: 44 -> 46 */
  --navbar-h:64px;        /* // DEĞİŞTİ: 64 -> 76 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* =========================================================
   INDEX (Açılış) - Via Grup
   Bu bölüm SADECE index.html için:
   - Logo sabit durur
   - Etrafında soft siyah noktalar bir halka üzerinde döner
   - Yanıp sönme/pulse yok
   - 3sn sonra JS splash’ı kapatıp split’i açar
   ========================================================= */

.page-index{
  overflow:hidden; /* // Index’te scroll olmasın */
}

/* =========================================================
   SPLASH SAHNESİ
   - Tam ekran beyaz arka plan
   - Logo ortada
   - Orbit katmanı logo arkasında
   ========================================================= */
.splash{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:100;

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

/* =========================================================
   LOGO (SABİT)
   - Eski animasyonlar varsa bile iptal olsun
   ========================================================= */
.splash-logo{
  width:min(240px, 58vw);
  height:auto;
  z-index:2;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.12));

  animation:none !important;
  transform:none !important;
}

/* =========================================================
   ORBIT KONTEYNER
   - Merkezde sabit durur (dönmez)
   - İçindeki .orbit-ring döner
   ========================================================= */
.splash-orbit{
  position:absolute;
  left:50%;
  top:50%;

  width:min(360px, 82vw);
  height:min(360px, 82vw);

  transform:translate(-50%, -50%);
  z-index:1;
  pointer-events:none;
}

/* =========================================================
   ORBIT-RING (ASIL DÖNEN KATMAN)
   - Dönüş animasyonu burada
   ========================================================= */
.orbit-ring{
  position:absolute;
  inset:0;
  border-radius:999px;

  animation: ringSpin 1.4s linear infinite; /* // hız */
  will-change: transform;
}

/* // Çok hafif halka çizgisi (istersen tamamen kaldırabilirsin) */
.orbit-ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.05);
}

/* =========================================================
   NOKTALAR
   - Noktalar yanıp sönmez
   - “soft siyah” görünür
   ========================================================= */
.orbit-ring .orb-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:999px;

  /* // Tam siyah değil -> koyu gri */
  background:rgba(35,35,35,.45);

  /* // Beyaz fonda hafif derinlik */
  box-shadow:
    0 0 6px rgba(0,0,0,.10),
    0 8px 14px rgba(0,0,0,.08);
}

/* =========================================================
   Noktaları çember üzerine dizme
   - Yüzde KULLANMIYORUZ (merkezde nokta sorunu yaşamayalım)
   - var(--orbit-r) ile yarıçap ayarlanır
   ========================================================= */

/* // Varsayılan yarıçap */
:root{ --orbit-r: 150px; }

/* // Küçük ekran: daha küçük yarıçap */
@media (max-width: 520px){
  :root{ --orbit-r: 120px; }
}

/* // 12 nokta (30 derece arayla) */
.orbit-ring .orb-dot:nth-child(1)  { transform:translate(-50%,-50%) rotate(0deg)   translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(2)  { transform:translate(-50%,-50%) rotate(30deg)  translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(3)  { transform:translate(-50%,-50%) rotate(60deg)  translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(4)  { transform:translate(-50%,-50%) rotate(90deg)  translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(5)  { transform:translate(-50%,-50%) rotate(120deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(6)  { transform:translate(-50%,-50%) rotate(150deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(7)  { transform:translate(-50%,-50%) rotate(180deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(8)  { transform:translate(-50%,-50%) rotate(210deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(9)  { transform:translate(-50%,-50%) rotate(240deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(10) { transform:translate(-50%,-50%) rotate(270deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(11) { transform:translate(-50%,-50%) rotate(300deg) translateX(var(--orbit-r)); }
.orbit-ring .orb-dot:nth-child(12) { transform:translate(-50%,-50%) rotate(330deg) translateX(var(--orbit-r)); }

/* =========================================================
   DÖNÜŞ ANİMASYONU
   ========================================================= */
@keyframes ringSpin{
  to{ transform: rotate(360deg); }
}

/* =========================================================
   SPLIT (Seçim Ekranı)
   - 3sn sonra JS ile açılır
   - SOL/SAĞ arka plan: görsel + overlay
   ========================================================= */
.split{
  position:fixed;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#fff;
  z-index:10;
}
.split.hidden{display:none !important}

.split-half{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  padding:36px;
  color:#fff; /* arka plan görselde içerik genel beyaz iyi durur */
}

/* =========================================================
   ARKA PLAN GÖRSELLERİ + OVERLAY
   - Okunabilirlik için gradient overlay ekli
   ========================================================= */

/* SOL: YAZILIM */
.split-left{
  border-right:1px solid rgba(0,0,0,.10);
  background-image:
    linear-gradient(135deg, rgba(7,10,18,.72), rgba(7,10,18,.42)),
    url("../images/yazilim-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* SAĞ: EĞİTİM */
.split-right{
  background-image:
    linear-gradient(135deg, rgba(10,10,12,.68), rgba(10,10,12,.38)),
    url("../images/egitim-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* =========================================================
   Çok hafif noise hissi (göz yormaz)
   - görselin üstünde çok hafif doku
   ========================================================= */
.split-half::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.10;
  pointer-events:none;
}

/* =========================================================
   Hover: ışık/spot efekti (görsel üstünde premium durur)
   ========================================================= */
.split-half::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.18), transparent 58%),
    radial-gradient(circle at 75% 70%, rgba(0,0,0,.22), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
}
.split-half:hover::before{opacity:1}

/* =========================================================
   İçerik kutusu (glass card)
   ========================================================= */
.split-content{
  position:relative;
  text-align:left;
  max-width:560px;
  width:100%;
  padding:24px 24px;
  border-radius:22px;

  /* görsel üstünde okunabilirlik */
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);

  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.split-half:hover .split-content{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.14);
}

/* =========================================================
   Tipografi
   ========================================================= */

/* Küçük label: “YAZILIM / EĞİTİM” */
.split-title{
  margin:0;
  font-size:13px;
  letter-spacing:.22em;
  font-weight:900;
  color: rgba(255,255,255,.78);
}

/* Asıl başlık */
.split-headline{
  margin:10px 0 0;
  font-size:clamp(30px, 3.2vw, 56px);
  letter-spacing:-.03em;
  line-height:1.03;
  font-weight:900;
  color:#fff;
}

/* Açıklama */
.split-sub{
  margin:12px 0 0;
  color: rgba(255,255,255,.84);
  font-weight:600;
  line-height:1.6;
  max-width: 520px;
}

/* CTA buton gibi */
.split-cta{
  margin:18px 0 0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color:#fff;
  font-weight:900;

  opacity:1;
  transform:none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.split-cta::after{
  content:"→";
  font-weight:900;
}
.split-half:hover .split-cta{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  background: rgba(255,255,255,.18);
}

/* =========================================================
   Mobilde üst üste
   ========================================================= */
@media (max-width: 900px){
  .split{grid-template-columns:1fr; grid-template-rows:1fr 1fr}
  .split-left{border-right:none; border-bottom:1px solid rgba(0,0,0,.10)}
  .split-half{padding:22px}
  .split-content{text-align:left}
}



/* =========================================================
   LAYOUT (Header/Footer sabit)
   - Index hariç tüm sayfalarda header+footer
   ========================================================= */
.has-chrome .main{
  padding-top: calc(var(--topinfo-h) + var(--navbar-h) + 16px);
  min-height: calc(100vh - (var(--topinfo-h) + var(--navbar-h)));
}

/* =========================================================
   TOP INFO BAR (beyaz, siyah yazı/ikon) (DEĞİŞTİ: tipografi)
   ========================================================= */
.topinfo{
  position:fixed; inset:0 0 auto 0;
  height:var(--topinfo-h);
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  z-index:80;
}
.topinfo-inner{
  max-width:1200px;
  margin:0 auto;
  height:100%;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  /* // DEĞİŞTİ: daha kurumsal görünüm */
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
  color:rgba(11,15,23,.78);
}
.topinfo-left{
  display:flex; align-items:center; gap:14px;
  min-width:0;
}
.topinfo-item{
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ico{
  /* // Emoji ikonlar biraz daha soft görünsün */
  opacity:.78; /* // DEĞİŞTİ */
}
.topinfo-right{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.pill{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  text-decoration:none;
  color:rgba(11,15,23,.80);
  font-weight:900;
  background:rgba(0,0,0,.03); /* // DEĞİŞTİ */
  transition:transform .16s ease, box-shadow .16s ease;
}
.pill:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.10)}
.tel{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  text-decoration:none;
  color:rgba(11,15,23,.86); /* // DEĞİŞTİ */
  font-weight:900;          /* // DEĞİŞTİ */
  transition:transform .16s ease, box-shadow .16s ease;
}
.tel:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.10)}

@media (max-width: 980px){
  /* // mobilde adres satırını gizleyip sadeleştir */
  .topinfo-item.addr{display:none}
}

/* =========================================================
   NAVBAR (bazen mavi) (DEĞİŞTİ: renk + kalınlık + gradient)
   ========================================================= */
.navbar{
  position:fixed;
  top:var(--topinfo-h); left:0; right:0;
  height:var(--navbar-h);

  /* // DEĞİŞTİ: premium gradient */
  background: linear-gradient(90deg, rgba(10,47,143,1), rgba(15,55,160,1));

  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  z-index:79;
}

/* // Sen HTML’de theme-software kullanıyorsun -> doğru selector */
body.theme-software .navbar{
  background: linear-gradient(90deg, rgba(10,47,143,1), rgba(15,55,160,1));
}

/* // İleride education sayfalarında kullanırsın */
body.theme-education .navbar{
  background: linear-gradient(90deg, rgba(11,15,23,1), rgba(20,24,34,1));
}

.navbar-inner{
  max-width:1200px;
  margin:0 auto;
  height:100%;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
/* =========================================================
   NAVBAR LOGO (DEĞİŞTİ)
   - logo.svg -> 123.png olduğu için daha “geniş” kullanılacak
   - hem yatay hem dikey büyüttük
   ========================================================= */
.brand img{
  height:54px;         /* // DEĞİŞTİ: 40 -> 54 (dikey büyüdü) */
  width:auto;          /* // DEĞİŞTİ: geniş logoda bozulmasın */
  object-fit:contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.22));
}
.nav-toggle{
  margin-left:auto;
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.26);
  color:var(--nav-text);
  border-radius:14px;
  padding:9px 12px;
  cursor:pointer;
}
.nav-links{
  margin:0 0 0 auto;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-sep{
  width:1px; height:24px;
  background:rgba(255,255,255,.22);
  margin:0 6px;
}
.nav-link{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:900;               /* // DEĞİŞTİ: daha tok */
  font-size:14px;
  padding:12px 12px;             /* // DEĞİŞTİ: biraz daha dolgun */
  border-radius:14px;            /* // DEĞİŞTİ */
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.nav-link:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
  color:#fff;
}
.nav-link.ghost{ border:1px solid rgba(255,255,255,.26); }

/* =========================================================
   Dropdown (DEĞİŞTİ: mouse aşağı inerken kapanmasın)
   - CSS tarafında küçük “köprü” ekledik
   ========================================================= */
.dropdown{ position:relative; }

/* // Mouse boşluktan geçince kapanmasın diye küçük köprü */
.dropdown::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top:100%;
  height:14px; /* // DEĞİŞTİ: boşluk köprüsü */
}

/* Dropdown menu */
.dropdown-menu{
  position:absolute;
  top: calc(100% + 10px); /* // DEĞİŞTİ: navbar’a göre doğru boşluk */
  left:0;
  min-width:240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 22px 55px rgba(0,0,0,.16);
  padding:10px;
  display:none;
  z-index:9999;
}
.dropdown-menu.wide{ min-width:340px; }
.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:800; /* // DEĞİŞTİ */
}
.dropdown-menu a:hover{ background:rgba(10,47,143,.10); }

/* // Açık class */
.dropdown.open .dropdown-menu{ display:block; }

/* Mobile Nav */
@media (max-width: 980px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;
    top:var(--navbar-h);
    right:18px;
    width:min(380px, 90vw);
    flex-direction:column;
    align-items:stretch;
    background:inherit;
    border:1px solid rgba(255,255,255,.20);
    border-radius:18px;
    padding:10px;
    display:none;
  }
  .nav-links.open{display:flex}
  .dropdown-menu{
    position:static;
    background:transparent;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:none;
  }
  .dropdown-menu a{ color:#fff; }
  .dropdown-menu a:hover{ background:rgba(255,255,255,.14); }
}

/* =========================================================
   SECTIONS + COMPONENTS
   ========================================================= */
.section{padding:56px 0}
.container{max-width:1200px; margin:0 auto; padding:0 18px}
.center{text-align:center}

.h1{
  margin:0;
  font-size:clamp(30px, 3vw, 46px);
  letter-spacing:-.02em;
}
.p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.7;
  max-width:860px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:18px;
}
.grid3{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.grid2{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
@media(max-width: 920px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(10,47,143,.25);       /* // DEĞİŞTİ: yeni mavi */
  background:rgba(10,47,143,.10);            /* // DEĞİŞTİ: yeni mavi */
  color:var(--text);
  font-weight:900;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.12);
  background:rgba(10,47,143,.14);            /* // DEĞİŞTİ */
}
.btn-row{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================================================
   SLIDER (Kurumsal + Geniş + Animasyonlu) (DEĞİŞTİ: yatay his)
   - Dikey yüksekliği biraz düşürdük: daha “yatay”
   ========================================================= */

.hero{
  padding:16px 0 0; /* // DEĞİŞTİ */
}

/* =========================================================
   SLIDER CONTAINER (DEĞİŞTİ)
   - Yatayda ekrana daha çok yayılsın
   ========================================================= */
.slider{
  max-width: 1940px;      /* // DEĞİŞTİ: daha geniş */
  width: 100%;
  margin:0 auto;
  padding:0 18px;
  position:relative;
}

/* // Çerçeve */
.slides{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(0,0,0,.10);
  background:#fff;

  /* // DEĞİŞTİ: daha yatay görünüm */
  min-height: 570px;
}

/* =========================================================
   SLIDE Mantığı
   - Tüm slide’lar üst üste (absolute)
   - active: görünür (opacity 1)
   - leaving: çıkış animasyonu
   ========================================================= */
.slide{
  position:absolute;
  inset:0;

  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:380px;

  opacity:0;
  transform: translateX(22px);
  pointer-events:none;

  transition: opacity .50s ease, transform .50s ease;
  will-change: opacity, transform;
}

.slide.active{
  opacity:1;
  transform: translateX(0);
  pointer-events:auto;
  z-index:2;
}

.slide.leaving{
  opacity:0;
  transform: translateX(-22px);
  z-index:1;
}

/* SOL GÖRSEL */
.slide-media{
  background-size:cover;
  background-position:center;
  min-height:570px;
  position:relative;
}
.slide-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
}

/* SAĞ METİN */
.slide-text{
  padding:40px 44px;     /* // DEĞİŞTİ */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.slide-text h2{
  margin:0;
  font-size:clamp(22px, 2.0vw, 34px);
  letter-spacing:-.02em;
  line-height:1.08;
}
.slide-text h3{
  margin:0;
  color:var(--muted);
  font-weight:900;
  font-size:15px;
}
.slide-text p{
  margin:10px 0 0;
  line-height:1.75;
  color:rgba(11,15,23,.80);
  max-width:560px;
}

/* =========================================================
   ARROWS (ok butonları) (DEĞİŞTİ: z-index yükseldi)
   - Oklar tıklanmıyorsa sebep çoğu zaman z-index
   ========================================================= */
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px; height:46px;
  border:none;
  border-radius:999px;
  cursor:pointer;

  background:rgba(255,255,255,.92);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
  font-size:22px;

  z-index: 10; /* // DEĞİŞTİ: tıklanabilirlik */
  transition:transform .16s ease, box-shadow .16s ease;
}
.slider-arrow:hover{
  transform:translateY(-50%) scale(1.03);
  box-shadow:0 22px 46px rgba(0,0,0,.20);
}
.slider-arrow.prev{left:18px}
.slider-arrow.next{right:18px}

/* =========================================================
   DOTS (aktif olan kapsül)
   ========================================================= */
.dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;

  display:flex;
  gap:10px;

  padding:10px 12px;
  border-radius:999px;

  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 26px rgba(0,0,0,.10);

  backdrop-filter: blur(10px);
  z-index: 10;
}
.dot{
  width:8px; height:8px;                 /* // DEĞİŞTİ: default nokta */
  border-radius:999px;
  background:rgba(0,0,0,.22);
  cursor:pointer;
  border:none;
  padding:0;

  transition:width .18s ease, background .18s ease, transform .18s ease;
}
.dot.active{
  width:34px;                             /* // DEĞİŞTİ: aktif kapsül */
  height:8px;
  background:rgba(10,47,143,.90);
  transform:translateY(-1px);
}

/* MOBİL */
@media(max-width: 980px){
  .slides{ min-height: 640px; }

  .slide{
    grid-template-columns: 1.25fr .75fr;
    min-height:640px;
  }

  .slide-media{ min-height:340px; }
  .slide-text{ padding:24px; }

  .slider-arrow.prev{left:12px}
  .slider-arrow.next{right:12px}
  .dots{ bottom:12px; }
}


/* =========================================================
   CONTENT PAGES
   ========================================================= */
.page-head{
  display:flex; align-items:center; gap:16px;
  margin-bottom:12px;
}
.page-head img{width:54px; height:54px}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}
@media(max-width: 980px){
  .page-head{flex-direction:column; align-items:flex-start}
  .two-col{grid-template-columns:1fr}
}
.img-card{
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  background:#fff;
}
.img-card img{width:100%; height:auto; display:block}

.list{margin:0; padding-left:18px}
.list li{margin:8px 0}

/* Vizyon arka plan */
.bg-vision{
  position:relative;
  background-image:url('./assets/images/vizyon.png');
  background-size:cover;
  background-position:center;
}
.bg-vision::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.78); /* // "hafif beyazlat" */
}
.bg-vision .container{position:relative}

/* Form */
.form{display:grid; gap:10px}
.form input,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  outline:none;
}

/* =========================================================
   FOOTER (3 kolon yazı başlangıcı aynı hizada)
   - Logo metni aşağı itmesin diye logo + metin yan yana
   ========================================================= */

.footer{
  border-top:1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(900px 380px at 15% 0%, rgba(10,47,143,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:32px 18px 18px;

  display:grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap:24px;

  align-items:start; /* ✅ hepsi üstten başlasın */
}

/* SOL blok: logo + metin yan yana */
.footer-about-row{
  display:flex;
  align-items:flex-start; /* ✅ metin ve diğer kolonlar aynı hizadan */
  gap:14px;
}

.footer-logo{
  width:150px;
  height:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.12));
  flex: 0 0 auto;
}

/* ✅ Metin artık en üstten başlar (başlıklarla aynı hizaya gelir) */
.footer-about{
  margin:0; /* ✅ önemli */
  color: rgba(11,15,23,.70);
  line-height:1.8;
  font-weight:650;
  max-width:560px;
}

/* Başlıklar */
.footer h4{
  margin:0 0 12px;
  font-size:16px;
  font-weight:950;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.92);
}

.footer a{
  color: rgba(11,15,23,.82);
  text-decoration:none;
  display:block;
  margin:10px 0;
  font-weight:850;
  transition: transform .14s ease, color .14s ease;
}
.footer a:hover{
  color: rgba(10,47,143,.95);
  transform: translateY(-1px);
}

.footer-text{
  margin:0 0 12px;
  color: rgba(11,15,23,.70);
  line-height:1.75;
  font-weight:650;
}

/* Sosyal */
.footer-social{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.footer-social a{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(11,15,23,.88);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.footer-social a:hover{
  transform: translateY(-1px);
  background: rgba(10,47,143,.10);
  border-color: rgba(10,47,143,.18);
  color: rgba(10,47,143,.95);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.footer-social svg{ width:18px; height:18px; display:block; }

/* Alt bar */
.footer-bottom{
  border-top:1px solid rgba(0,0,0,.10);
  padding:14px 18px;
  text-align:center;
  color: rgba(11,15,23,.62);
  font-weight:700;
}

/* Mobil */
@media(max-width: 980px){
  .footer-inner{ grid-template-columns: 1fr; gap:16px; }
  .footer-about-row{ flex-direction:column; }
  .footer-logo{ width:170px; }
}

/* =========================================================
   PAGE TRANSITION OVERLAY (Index tıklama geçişi)
   ========================================================= */
#page-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition: opacity .55s ease;
  background: #0b0f17;
}

#page-transition.active{
  opacity:1;
  pointer-events:auto;
}

/* Ortada logo (opsiyonel ama premium duruyor) */
#page-transition .pt-brand{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  opacity:.92;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.35));
}

#page-transition .pt-brand img{
  width:min(180px, 48vw);
  height:auto;
}

/* Tıklanan yarı: zoom + blur */
.split-half.is-leaving{
  transform: scale(1.06);
  filter: blur(4px);
  transition: transform .55s ease, filter .55s ease;
}

/* Diğer yarı: soldur */
.split-half.is-fadeout{
  opacity:.15;
  transition: opacity .4s ease;
}

/* (İsteğe bağlı) motion azaltma */
@media (prefers-reduced-motion: reduce){
  #page-transition,
  .split-half.is-leaving,
  .split-half.is-fadeout{
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   KURUMSAL SAYFA (SADE + PREMIUM) (DEĞİŞTİ)
   - Logo yok
   - Vizyon/Misyon/Değerler kutuları yok
   - Başlık var, açıklama yok
   - Sol: kurumsal1.png
   - Sağ: tek premium kutu
   - En altta: 3 link (yan yana)
   ========================================================= */

.corp-page{
  /* // Çok hafif kurumsal arka plan (göz yormaz) */
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 90% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(252,253,255,1));
}

/* Başlık */
.corp-head{
  margin-bottom:18px;
}
.corp-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;

  /* // Tam siyah değil -> premium koyu */
  color: rgba(11,15,23,.86);
}

/* Layout: sol resim + sağ kutu */
.corp-layout{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:16px;
  align-items:stretch;
}

/* Sol görsel kart */
.corp-media{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
  min-height: 520px; /* // dikey görünüm premium */
}
.corp-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Sağ tek kutu */
.corp-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:22px 22px;
  box-shadow: 0 18px 46px rgba(0,0,0,.08);

  /* // Metin okunabilirliği */
  color: rgba(11,15,23,.74);
  line-height:1.85;
  font-weight:650;
}
.corp-box p{
  margin:0 0 14px;
}
.corp-box p:last-child{
  margin-bottom:0;
}

/* En alttaki 3 link */
.corp-links{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

/* Linklerin premium kutu gibi görünmesi */
.corp-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

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

  background: rgba(10,47,143,.08);
  border:1px solid rgba(10,47,143,.16);

  color: rgba(11,15,23,.88);
  font-weight:900;
  letter-spacing:-.01em;

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.corp-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
  background: rgba(10,47,143,.10);
}

/* Responsive */
@media (max-width: 980px){
  .corp-layout{
    grid-template-columns: 1fr;
  }
  .corp-media{
    min-height: 320px;
  }
  .corp-links{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BİZ KİMİZ SAYFASI (SADE + PREMIUM)
   - Yazı solda
   - Resim sağda
   - Tek büyük kurumsal kutu
   ========================================================= */

.about-page{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

/* Başlık */
.about-head{
  margin-bottom:18px;
}
.about-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.86);
}

/* Layout */
.about-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr; /* yazı baskın */
  gap:16px;
  align-items:stretch;
}

/* Yazı kutusu */
.about-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:22px 22px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);

  color: rgba(11,15,23,.74);
  line-height:1.85;
  font-weight:650;
}
.about-box p{
  margin:0 0 14px;
}
.about-box p:last-child{
  margin-bottom:0;
}

/* Sağ görsel */
.about-media{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.10);
  min-height:520px;
}
.about-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Responsive */
@media (max-width: 980px){
  .about-layout{
    grid-template-columns:1fr;
  }
  .about-media{
    min-height:320px;
  }
}

/* =========================================================
   NEDEN VIA GRUP SAYFASI (SADE + PREMIUM)
   - Yazı solda
   - Resim sağda
   ========================================================= */

.why-page{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

/* Başlık */
.why-head{
  margin-bottom:18px;
}
.why-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.86);
}

/* Layout */
.why-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}

/* Metin kutusu */
.why-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:22px 22px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);

  color: rgba(11,15,23,.74);
  line-height:1.85;
  font-weight:650;
}
.why-box p{
  margin:0 0 14px;
}

/* Liste */
.why-list{
  margin:8px 0 0;
  padding-left:18px;
}
.why-list li{
  margin:8px 0;
  font-weight:750;
  color: rgba(11,15,23,.80);
}

/* Görsel */
.why-media{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.10);
  min-height:520px;
}
.why-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Responsive */
@media (max-width: 980px){
  .why-layout{
    grid-template-columns:1fr;
  }
  .why-media{
    min-height:320px;
  }
}
/* =========================================================
   VİZYON & MİSYON SAYFASI (SADE + PREMIUM)
   - Yazı solda (2 kutu)
   - Resim sağda
   ========================================================= */

.vm-page{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

/* Başlık */
.vm-head{
  margin-bottom:18px;
}
.vm-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.86);
}

/* Layout */
.vm-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}

/* Sol kutular */
.vm-boxes{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap:16px;
}

/* Tek kutu */
.vm-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:22px 22px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);

  color: rgba(11,15,23,.74);
  line-height:1.85;
  font-weight:650;
}
.vm-box-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  color: rgba(11,15,23,.88);
}
.vm-box p{
  margin:0;
}

/* Sağ görsel */
.vm-media{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.10);
  min-height:520px;
}
.vm-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Responsive */
@media (max-width: 980px){
  .vm-layout{
    grid-template-columns:1fr;
  }
  .vm-media{
    min-height:320px;
  }
}

/* =========================================================
   ÜRÜNLERİMİZ (SADE + PREMIUM)
   - 2 kategori başlığı
   - Kart: görsel + metin
   - Responsive: 3 kolon -> 2 -> 1
   ========================================================= */

.products-page{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

.products-head{ margin-bottom:18px; }
.products-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.86);
}

.products-section{
  margin-top:18px;
}

.products-section-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.88);
}

/* Grid */
.products-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

/* Kart */
.product-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}

/* Görsel */
.product-media{
  height:190px;
  background:#fff;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* İçerik */
.product-body{
  padding:16px 16px 18px;
  color: rgba(11,15,23,.74);
  line-height:1.75;
  font-weight:650;
}
.product-body h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.88);
}
.product-body p{
  margin:0;
}

/* Responsive */
@media (max-width: 1100px){
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .products-grid{ grid-template-columns: 1fr; }
  .product-media{ height:200px; }
}
/* =========================================================
   HİZMETLERİMİZ (SOL GÖRSEL + SAĞ METİN)
   ========================================================= */

.services-page{
  background:
    radial-gradient(800px 420px at 100% 0%, rgba(10,47,143,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

.services-head{
  margin-bottom:18px;
}

.services-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.88);
}

/* Satır */
.service-row{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:center;

  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:16px;

  box-shadow:0 18px 46px rgba(0,0,0,.08);
  margin-top:14px;

  scroll-margin-top: 120px; /* anchor kayınca üstte kalmasın */
}

/* Görsel */
.service-image{
  height:200px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* İçerik */
.service-content h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.90);
}
.service-content p{
  margin:0;
  line-height:1.75;
  color: rgba(11,15,23,.74);
  font-weight:600;
  max-width:720px;
}

/* Hover (çok hafif) */
.service-row:hover{
  box-shadow:0 26px 60px rgba(0,0,0,.12);
}

/* Mobil */
@media (max-width: 980px){
  .service-row{
    grid-template-columns:1fr;
  }
  .service-image{
    height:220px;
  }
}

/* =========================================================
   İLETİŞİM (PREMIUM)
   - Sol: iletişim kartları + form
   - Sağ: harita önizleme + rota
   - Mobil uyum var
   - DEĞİŞTİ: küçük premium dokunuşlar + sticky daha stabil
   - EKLENDİ: Map Chooser (mobilde harita uygulaması seçimi)
   ========================================================= */

.contact-page{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

.contact-head{ margin-bottom:18px; }
.contact-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.88);
}

/* Layout */
.contact-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:start;
}

/* Kart genel */
.contact-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);

  /* // DEĞİŞTİ: biraz daha premium "yumuşak" görünüm */
  position:relative;
  overflow:hidden;
}

/* // DEĞİŞTİ: kartlara çok hafif üst highlight */
.contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.65), transparent 40%);
  opacity:.55;
  pointer-events:none;
}

.contact-left{
  display:grid;
  gap:14px;
}

.contact-card-title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.90);
  position:relative;
}

/* İletişim item */
.contact-items{
  display:grid;
  gap:10px;
  position:relative;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;
  color:inherit;

  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.contact-item:hover{
  transform: translateY(-1px);
  background:rgba(10,47,143,.06);
  box-shadow:0 14px 32px rgba(0,0,0,.10);

  /* // DEĞİŞTİ: hover'da sınır daha şık */
  border-color: rgba(10,47,143,.18);
}

.contact-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;

  background:rgba(10,47,143,.10);
  border:1px solid rgba(10,47,143,.14);
  font-size:18px;
}

.contact-item-body{
  min-width:0;
}
.contact-item-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(11,15,23,.64);
  margin-bottom:2px;
}
.contact-item-value{
  font-weight:750;
  color: rgba(11,15,23,.86);
  line-height:1.45;

  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.contact-item-cta{
  margin-left:auto;
  font-weight:900;
  color: rgba(11,15,23,.55);
}

/* Form */
.contact-form{
  display:grid;
  gap:12px;
  position:relative;
}
.contact-form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.field{
  display:grid;
  gap:6px;
}
.field span{
  font-size:12px;
  font-weight:900;
  color: rgba(11,15,23,.66);
  letter-spacing:.02em;
}

.field input,
.field textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:12px 12px;
  outline:none;

  font-weight:700;
  color: rgba(11,15,23,.86);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

.field input:focus,
.field textarea:focus{
  border-color: rgba(10,47,143,.26);
  box-shadow:0 0 0 4px rgba(10,47,143,.12);
}

/* // DEĞİŞTİ: input hover hissi */
.field input:hover,
.field textarea:hover{
  border-color: rgba(0,0,0,.14);
  transform: translateY(-.5px);
}

.contact-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:2px;
}

.contact-btn{
  border:1px solid rgba(10,47,143,.28);
  background:rgba(10,47,143,.12);
}

.contact-note{
  margin:0;
  color: rgba(11,15,23,.58);
  font-weight:650;
  font-size:12px;
}

/* Harita kartı */
.map-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.10);
}

/* =========================================================
   DEĞİŞTİ: sağ kolon sticky daha stabil
   - sticky çalışması için parent'ta overflow hidden olmamalı
   - top değeri: topbar+navbar sonrası otursun
   ========================================================= */
.contact-right{
  position: sticky;
  top: calc(var(--topinfo-h) + var(--navbar-h) + 18px);
  align-self:start;
}

.map-head{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.map-head h3{
  margin:0;
  font-size:15px;
  font-weight:900;
  color: rgba(11,15,23,.90);
}

.map-route{
  text-decoration:none;
  font-weight:900;
  color: rgba(10,47,143,.95);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(10,47,143,.18);
  background: rgba(10,47,143,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.map-route:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  background: rgba(10,47,143,.12);
}

/* iframe */
.map-frame{
  height:460px;
  background:#fff;
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.map-foot{
  padding:12px 16px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-end;
}

.map-open{
  text-decoration:none;
  font-weight:900;
  color: rgba(11,15,23,.80);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.map-open:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
}

/* Responsive */
@media (max-width: 980px){
  .contact-layout{ grid-template-columns:1fr; }
  .contact-right{ position: static; } /* mobilde sticky istemiyoruz */
  .map-frame{ height:340px; }
  .contact-form-row{ grid-template-columns:1fr; }
}

/* =========================================================
   İLETİŞİM (PREMIUM)
   - Sol: iletişim kartları + form
   - Sağ: harita önizleme + rota
   - Mobil uyum var
   - DEĞİŞTİ: iframe yerine statik img (rota çizgisi %100 yok)
   ========================================================= */

.contact-page{
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(10,47,143,.06), transparent 55%),
    radial-gradient(900px 420px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}

.contact-head{ margin-bottom:18px; }
.contact-title{
  margin:0;
  font-size:clamp(30px, 2.8vw, 46px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.88);
}

/* Layout */
.contact-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:start;
}

/* Kart genel */
.contact-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);
}

.contact-left{
  display:grid;
  gap:14px;
}

.contact-card-title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.90);
}

/* İletişim item */
.contact-items{
  display:grid;
  gap:10px;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;
  color:inherit;

  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.contact-item:hover{
  transform: translateY(-1px);
  background:rgba(10,47,143,.06);
  box-shadow:0 14px 32px rgba(0,0,0,.10);
}

.contact-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;

  background:rgba(10,47,143,.10);
  border:1px solid rgba(10,47,143,.14);
  font-size:18px;
}

.contact-item-body{ min-width:0; }
.contact-item-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(11,15,23,.64);
  margin-bottom:2px;
}
.contact-item-value{
  font-weight:750;
  color: rgba(11,15,23,.86);
  line-height:1.45;

  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.contact-item-cta{
  margin-left:auto;
  font-weight:900;
  color: rgba(11,15,23,.55);
}

/* Form */
.contact-form{ display:grid; gap:12px; }
.contact-form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{ display:grid; gap:6px; }
.field span{
  font-size:12px;
  font-weight:900;
  color: rgba(11,15,23,.66);
  letter-spacing:.02em;
}
.field input,
.field textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:12px 12px;
  outline:none;

  font-weight:700;
  color: rgba(11,15,23,.86);
  transition: box-shadow .16s ease, border-color .16s ease;
}
.field input:focus,
.field textarea:focus{
  border-color: rgba(10,47,143,.26);
  box-shadow:0 0 0 4px rgba(10,47,143,.12);
}

.contact-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:2px;
}
.contact-btn{
  border:1px solid rgba(10,47,143,.28);
  background:rgba(10,47,143,.12);
}
.contact-note{
  margin:0;
  color: rgba(11,15,23,.58);
  font-weight:650;
  font-size:12px;
}

/* Harita kartı */
.map-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.10);
}

/* sağ kolon scroll'da kaybolmasın (premium) */
.contact-right{
  position: sticky;
  top: calc(var(--topinfo-h) + var(--navbar-h) + 18px);
}

.map-head{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.map-head h3{
  margin:0;
  font-size:15px;
  font-weight:900;
  color: rgba(11,15,23,.90);
}

.map-route{
  text-decoration:none;
  font-weight:900;
  color: rgba(10,47,143,.95);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(10,47,143,.18);
  background: rgba(10,47,143,.10);
  transition: transform .16s ease, box-shadow .16s ease;
}
.map-route:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

/* =========================================================
   HARİTA ÖNİZLEME (DEĞİŞTİ)
   - iframe yerine img
   - biraz yakın/premium hissi: cover + hafif zoom
   ========================================================= */
.map-frame{
  height:460px;
  background:#fff;
  position:relative;
}
.map-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform: scale(1.02); /* // DEĞİŞTİ: hafif yakın his */
}

.map-foot{
  padding:12px 16px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-end;
}

.map-open{
  text-decoration:none;
  font-weight:900;
  color: rgba(11,15,23,.80);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  transition: transform .16s ease, box-shadow .16s ease;
}
.map-open:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

/* Responsive */
@media (max-width: 980px){
  .contact-layout{ grid-template-columns:1fr; }
  .contact-right{ position: static; } /* mobilde sticky istemiyoruz */
  .map-frame{ height:340px; }
  .contact-form-row{ grid-template-columns:1fr; }
}

/* =========================================================
   TEKNOLOJİ BLOĞU (Yazılım + Güvenlik)
   - 6 kısa premium kutu + ikon/resim
   - Mobil uyumlu
   ========================================================= */

.tech-block{
  background:
    radial-gradient(1000px 420px at 85% 0%, rgba(10,47,143,.06), transparent 60%),
    radial-gradient(900px 380px at 10% 20%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcff);

  .tech-block > .container{
  max-width: none;        /* SOLA BASLAT */
  margin-left: 0;         /* SOLA BASLAT */
  margin-right: 0;        /* SOLA BASLAT */
  padding-left: 24px;     /* SOLA BASLAT */
  padding-right: 0;       /* SOLA BASLAT */
}

}

.tech-head{
  margin-bottom:18px;
  text-align:left;

  margin-left:0; /* SOLA BASLAT */
  margin-right:0; /* SOLA BASLAT */
}

.tech-title{
  margin:0;
  font-size:clamp(28px, 2.8vw, 44px);
  letter-spacing:-.02em;
  color: rgba(11,15,23,.90);
}

.tech-sub{
  margin:10px 0 0;
  max-width: 920px;
  line-height:1.8;
  color: rgba(11,15,23,.70);
  font-weight:650;
}

/* 6 grid */
.tech-grid6{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;

  margin-left:0; /* SOLA BASLAT */
  margin-right:0; /* SOLA BASLAT */
}

/* kart */
.tech-card{
  display:flex;
  align-items:flex-start;
  gap:12px;

  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:14px 14px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);

  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.tech-card:hover{
  transform: translateY(-2px);
  box-shadow:0 22px 60px rgba(0,0,0,.12);
  border-color: rgba(10,47,143,.18);
  background: rgba(10,47,143,.03);
}

/* ikon alanı */
.tech-ico{
  width:54px;
  height:54px;
  border-radius:16px;
  overflow:hidden;
  flex: 0 0 54px;

  border:1px solid rgba(10,47,143,.16);
  background: rgba(10,47,143,.06);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

.tech-ico img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* metin */
.tech-body h3{
  margin:2px 0 6px;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(11,15,23,.90);
}

.tech-body p{
  margin:0;
  color: rgba(11,15,23,.68);
  line-height:1.6;
  font-weight:650;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Reveal anim (JS ile class eklenir) */
.reveal{
  opacity:0;
  transform: translateY(10px);
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
}

/* Responsive */
@media (max-width: 980px){
  .tech-grid6{ 
    grid-template-columns: 1fr;
    margin-left:0; /* SOLA BASLAT */
  }
  .tech-head{ 
    text-align:left;
    margin-left:0; /* SOLA BASLAT */
  }
}

/* =========================================================
   ENHANCEMENTS (styles.css icine tasindi)
   ========================================================= */

:root {
  --enh-primary: #0f4aa8;
  --enh-accent: #08a88a;
  --enh-bg: #f5f8fd;
  --enh-surface: #ffffff;
  --enh-text: #111827;
  --enh-muted: #5b6475;
  --enh-line: #dce4f2;
  --enh-radius: 18px;
  --enh-shadow-sm: 0 10px 24px rgba(7, 27, 53, 0.08);
  --enh-shadow-md: 0 20px 48px rgba(7, 27, 53, 0.12);
  --enh-shadow-lg: 0 28px 64px rgba(7, 27, 53, 0.18);
}

html {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(1000px 500px at 10% 0%, rgba(15, 74, 168, 0.08), transparent 60%), var(--enh-bg);
  color: var(--enh-text);
  font-family: Inter, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
.h1,
.split-headline,
.products-title,
.services-title,
.contact-title,
.corp-title,
.about-title,
.why-title,
.vm-title {
  font-family: Inter, "Segoe UI", sans-serif;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(8, 168, 138, 0.3);
  outline-offset: 2px;
}

.navbar {
  backdrop-filter: saturate(130%) blur(10px);
  transition: height 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.navbar.is-scrolled {
  box-shadow: var(--enh-shadow-md);
}

body.theme-software .navbar.is-scrolled {
  background: linear-gradient(95deg, #0d2f72, #0f4aa8);
}

body.theme-education .navbar.is-scrolled {
  background: linear-gradient(95deg, #0b0f17, #151b27);
}

.nav-link {
  letter-spacing: 0.01em;
}

.nav-link.is-current {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.mobile-menu-open {
  overflow: hidden;
}

.section,
.products-page,
.services-page,
.contact-page,
.corp-page,
.about-page,
.why-page,
.vm-page {
  scroll-margin-top: 130px;
}

.btn {
  border-color: rgba(15, 74, 168, 0.3);
  background: linear-gradient(180deg, rgba(15, 74, 168, 0.16), rgba(15, 74, 168, 0.08));
}

.btn:hover {
  box-shadow: 0 0 0 6px rgba(8, 168, 138, 0.12), var(--enh-shadow-sm);
}

.card,
.product-card,
.service-row,
.tech-card,
.contact-card,
.corp-box,
.about-box,
.why-box,
.vm-box,
.map-card,
.update-box {
  border-color: var(--enh-line);
  box-shadow: var(--enh-shadow-sm);
}

.enh-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.enh-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.tech-grid6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tech-card {
  flex-direction: column;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.tech-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15, 74, 168, 0.08), transparent 40%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tech-card:hover::after {
  opacity: 1;
}

.tech-card .tech-body {
  display: grid;
  gap: 10px;
}

.tech-card .tech-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  font-weight: 800;
  color: var(--enh-primary);
}

.tech-card .tech-cta::after {
  content: ">";
}

.enh-toolbar {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.enh-search {
  width: 100%;
  border: 1px solid var(--enh-line);
  border-radius: 14px;
  padding: 12px 14px;
  font: 600 14px/1.4 Inter, sans-serif;
  color: var(--enh-text);
  background: var(--enh-surface);
}

.enh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.enh-filter {
  border: 1px solid var(--enh-line);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: var(--enh-muted);
  font: 700 12px/1 Inter, sans-serif;
  cursor: pointer;
}

.enh-filter.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(95deg, var(--enh-primary), var(--enh-accent));
}

.tech-card.is-hidden,
.enh-edu-card.is-hidden {
  display: none;
}

.enh-result {
  margin: 0;
  color: var(--enh-muted);
  font: 700 13px/1.4 Inter, sans-serif;
}

.update-box {
  margin: 20px auto 0;
  max-width: 860px;
  border-radius: var(--enh-radius);
  padding: 20px;
  background: linear-gradient(120deg, rgba(15, 74, 168, 0.06), rgba(8, 168, 138, 0.06));
}

/* Egitim hero slider */
.edu-hero {
  padding: 16px 0 0;
}

.edu-hero .slides {
  min-height: 570px;
}

.edu-hero .slide {
  grid-template-columns: 1.05fr 0.95fr;
}

.edu-hero .slide-media {
  min-height: 570px;
}

.edu-hero .slide-text p {
  max-width: 620px;
}

/* Egitim hizmet kartlari */
.edu-services {
  margin-top: 20px;
}

.edu-services-title {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 42px);
  color: rgba(11, 15, 23, 0.92);
}

.edu-services-sub {
  margin: 10px 0 0;
  color: rgba(11, 15, 23, 0.68);
  line-height: 1.75;
  max-width: 900px;
}

.enh-edu-grid {
  margin-top: 18px;
}

.enh-edu-card {
  position: relative;
}

.enh-edu-title a {
  color: rgba(11, 15, 23, 0.92);
  text-decoration: none;
}

.enh-edu-title a:hover {
  color: rgba(10, 47, 143, 0.96);
}

.edu-service-link {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(10, 47, 143, 0.94);
  font-weight: 900;
}

.edu-service-link::after {
  content: "→";
}

.tech-switch-link {
  border-color: rgba(10, 47, 143, 0.45) !important;
  background: rgba(10, 47, 143, 0.18);
}

.enh-edu-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  text-align: left;
}

.enh-edu-card {
  background: #fff;
  border: 1px solid var(--enh-line);
  border-radius: var(--enh-radius);
  padding: 16px;
  display: grid;
  gap: 10px;
  box-shadow: var(--enh-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.enh-edu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--enh-shadow-md);
}

.enh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.enh-badge {
  border-radius: 999px;
  padding: 5px 10px;
  font: 800 11px/1 Inter, sans-serif;
}

.enh-badge.level-beginner { background: rgba(8, 168, 138, 0.14); color: #066a57; }
.enh-badge.level-intermediate { background: rgba(15, 74, 168, 0.14); color: #0f4aa8; }
.enh-badge.level-advanced { background: rgba(125, 74, 15, 0.14); color: #9a5713; }
.enh-badge.featured { background: rgba(255, 190, 54, 0.22); color: #7a4b08; }

.enh-edu-title {
  margin: 0;
  font: 800 17px/1.3 Inter, sans-serif;
}

.enh-edu-meta,
.enh-edu-desc,
.enh-edu-gain {
  margin: 0;
  color: var(--enh-muted);
  font: 600 13px/1.55 Inter, sans-serif;
}

.enh-edu-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.enh-edu-actions .btn {
  padding: 9px 13px;
  font-size: 13px;
}

.enh-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 30, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 18px;
}

.enh-modal.open { display: flex; }

.enh-modal-card {
  width: min(680px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 20px;
  border: 1px solid var(--enh-line);
  background: #fff;
  box-shadow: var(--enh-shadow-lg);
  padding: 20px;
}

.enh-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.enh-modal-close {
  border: 1px solid var(--enh-line);
  border-radius: 12px;
  background: #fff;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.enh-modal-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.enh-modal-list li { margin: 6px 0; color: var(--enh-text); }

.field-error {
  min-height: 16px;
  color: #b3261e;
  font: 700 12px/1.2 Inter, sans-serif;
}

.field input.is-invalid,
.field textarea.is-invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.14);
}

.contact-note.is-success { color: #076b4d; }
.contact-note.is-error { color: #b3261e; }

.map-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer {
  margin-top: 28px;
}

.bg-vision {
  background-image: url("../images/vizyon.jpg");
}

@media (max-width: 1100px) {
  .enh-edu-grid,
  .tech-grid6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .enh-edu-grid,
  .tech-grid6 {
    grid-template-columns: 1fr;
  }

  .edu-hero .slides,
  .edu-hero .slide-media {
    min-height: 640px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   2026 REDESIGN - Kurumsal Premium Tema
   ========================================================= */

:root {
  --rd-brand: #0c4fb5;
  --rd-brand-2: #2a77e6;
  --rd-accent: #0ea5a3;
  --rd-bg: #f3f7ff;
  --rd-surface: #ffffff;
  --rd-text: #0c1424;
  --rd-muted: #5f6c80;
  --rd-line: #dbe6fa;
  --rd-shadow-sm: 0 12px 28px rgba(12, 28, 58, 0.08);
  --rd-shadow-md: 0 22px 50px rgba(12, 28, 58, 0.14);
  --rd-shadow-lg: 0 34px 72px rgba(12, 28, 58, 0.2);
  --rd-radius: 20px;
}

body.theme-education {
  --rd-brand: #bf1f2f;
  --rd-brand-2: #e3394c;
  --rd-accent: #ff7f6d;
  --rd-bg: #fff4f5;
  --rd-surface: #ffffff;
  --rd-text: #220d10;
  --rd-muted: #72565a;
  --rd-line: #f0d5d8;
}

body {
  background:
    radial-gradient(1100px 560px at -5% -5%, color-mix(in srgb, var(--rd-brand) 13%, transparent), transparent 62%),
    radial-gradient(800px 420px at 100% 0%, color-mix(in srgb, var(--rd-accent) 10%, transparent), transparent 58%),
    var(--rd-bg);
  color: var(--rd-text);
}

.main {
  position: relative;
}

.main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(16, 30, 59, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.28;
}

.section > .container,
.hero > .slider,
.edu-hero > .slider {
  position: relative;
  z-index: 1;
}

.topinfo {
  border-bottom-color: color-mix(in srgb, var(--rd-brand) 20%, #ffffff);
  background: color-mix(in srgb, #ffffff 92%, var(--rd-bg));
}

.topinfo-inner,
.topinfo a,
.topinfo span {
  color: color-mix(in srgb, var(--rd-text) 88%, transparent);
}

.pill,
.tel {
  border-color: color-mix(in srgb, var(--rd-brand) 18%, #a4b6d7);
}

.navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(2, 10, 24, 0.28);
}

body.theme-software .navbar,
body.theme-software .navbar.is-scrolled {
  background: linear-gradient(110deg, #063c97, #0f61d6 56%, #2f84f3);
}

body.theme-education .navbar,
body.theme-education .navbar.is-scrolled {
  background: linear-gradient(110deg, #14090b, #2c0d13 55%, #4a0d16);
}

.nav-link {
  font-weight: 800;
  border: 1px solid transparent;
}

.nav-link:hover,
.nav-link.is-current {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-link.is-current {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
  padding: 10px 11px;
}

.tech-switch-link {
  background: linear-gradient(135deg, rgba(15, 86, 197, 0.36), rgba(67, 140, 249, 0.3)) !important;
  border-color: rgba(99, 169, 255, 0.76) !important;
}

.slider,
.edu-hero .slider {
  max-width: 1940px;
}

.slides {
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--rd-brand) 18%, #c5d4ee);
  box-shadow: var(--rd-shadow-lg);
}

.slide {
  grid-template-columns: 1.04fr 0.96fr;
}

.slide-media::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, 0.46), rgba(2, 8, 18, 0.08) 56%),
    linear-gradient(180deg, transparent 45%, rgba(2, 8, 18, 0.24));
}

.slide-text {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rd-surface) 92%, var(--rd-bg)), var(--rd-surface));
}

.slide-text h2 {
  color: var(--rd-text);
}

.slide-text h3 {
  color: color-mix(in srgb, var(--rd-brand) 78%, #4b5b7c);
}

.slide-text p {
  color: var(--rd-muted);
}

.slider-arrow {
  border: 1px solid color-mix(in srgb, var(--rd-brand) 24%, #c7d7f1);
}

.dot.active {
  background: linear-gradient(95deg, var(--rd-brand), var(--rd-brand-2));
}

.h1,
.products-title,
.services-title,
.contact-title,
.corp-title,
.about-title,
.why-title,
.vm-title,
.edu-services-title {
  font-size: clamp(34px, 3.2vw, 54px);
  letter-spacing: -0.03em;
}

.p,
.edu-services-sub,
.service-content p,
.product-body p,
.footer-text,
.footer-about {
  color: var(--rd-muted);
}

.card,
.product-card,
.service-row,
.tech-card,
.contact-card,
.map-card,
.corp-box,
.about-box,
.why-box,
.vm-box,
.enh-edu-card {
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, #ffffff 90%, var(--rd-bg)));
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
}

.product-card:hover,
.service-row:hover,
.tech-card:hover,
.enh-edu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
}

.product-card,
.service-row,
.tech-card,
.enh-edu-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.btn,
.split-cta,
.map-route,
.map-open,
.edu-service-link {
  position: relative;
  overflow: hidden;
}

.rd-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%) scale(0);
  animation: rdRipple 0.52s ease-out forwards;
  pointer-events: none;
}

@keyframes rdRipple {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}

.btn::before,
.split-cta::before,
.map-route::before,
.map-open::before,
.edu-service-link::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, transparent 67%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
}

.btn:hover::before,
.split-cta:hover::before,
.map-route:hover::before,
.map-open:hover::before,
.edu-service-link:hover::before {
  transform: translateX(130%);
}

.btn {
  background: linear-gradient(115deg, color-mix(in srgb, var(--rd-brand) 90%, #0a2a5c), var(--rd-brand-2));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--rd-brand) 58%, #204f9b);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--rd-brand) 26%, transparent);
}

.btn:hover {
  background: linear-gradient(115deg, color-mix(in srgb, var(--rd-brand) 96%, #0a2a5c), color-mix(in srgb, var(--rd-brand-2) 94%, #78b5ff));
  box-shadow: 0 22px 32px color-mix(in srgb, var(--rd-brand) 36%, transparent);
}

.tech-ico,
.contact-ico {
  border-color: color-mix(in srgb, var(--rd-brand) 28%, #d7e0f1);
  background: color-mix(in srgb, var(--rd-brand) 10%, #f5f8ff);
}

.contact-ico {
  font-size: 20px;
  line-height: 1;
}

.tech-grid6 {
  grid-template-columns: 1fr;
  gap: 18px;
}

.tech-card {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  padding: 0;
  overflow: hidden;
}

.tech-ico {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.tech-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tech-card .tech-body {
  padding: 18px 20px 20px;
  align-content: center;
}

.tech-body h3 {
  font-size: clamp(20px, 2vw, 28px);
}

.tech-body p {
  -webkit-line-clamp: unset;
  font-size: 16px;
  line-height: 1.7;
}

.enh-toolbar {
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 84%, var(--rd-bg));
  border: 1px solid var(--rd-line);
}

.enh-filter.is-active {
  background: linear-gradient(110deg, var(--rd-brand), var(--rd-brand-2));
}

.enh-search:focus {
  border-color: color-mix(in srgb, var(--rd-brand) 52%, #b2c5ea);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rd-brand) 18%, transparent);
}

.enh-edu-title a {
  display: inline-block;
  transition: transform 0.22s ease;
}

.edu-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: color-mix(in srgb, var(--rd-brand) 11%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--rd-brand) 26%, #d0daed);
}

.enh-edu-title a:hover {
  transform: translateX(2px);
}

.edu-service-link {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rd-brand) 28%, #c7d5ef);
  background: color-mix(in srgb, var(--rd-brand) 8%, #f2f6ff);
}

.footer {
  border-top: 1px solid var(--rd-line);
  background:
    radial-gradient(900px 360px at 0% 0%, color-mix(in srgb, var(--rd-brand) 10%, transparent), transparent 58%),
    linear-gradient(180deg, #ffffff, color-mix(in srgb, #ffffff 86%, var(--rd-bg)));
}

.footer-bottom {
  border-top-color: var(--rd-line);
}

.map-frame {
  position: relative;
}

.map-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

@keyframes floatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

.slide-text .btn,
.split-cta,
.map-route {
  animation: floatSoft 5.5s ease-in-out infinite;
}

@media (max-width: 980px) {
  .slide {
    grid-template-columns: 1.25fr 0.75fr;
  }

  .tech-card {
    grid-template-columns: 1fr;
  }

  .tech-ico {
    min-height: 220px;
  }

  .slides,
  .slide-media {
    border-radius: 22px;
  }

  .h1,
  .products-title,
  .services-title,
  .contact-title,
  .corp-title,
  .about-title,
  .why-title,
  .vm-title,
  .edu-services-title {
    font-size: clamp(30px, 8.2vw, 44px);
  }
}

@media (max-width: 760px) {
  .main::before {
    opacity: 0.14;
  }

  .btn {
    width: 100%;
  }

  .enh-edu-actions {
    flex-direction: column;
  }

  .tech-card .tech-cta,
  .edu-service-link {
    width: 100%;
    justify-content: center;
  }

  .tech-ico {
    min-height: 200px;
  }
}

#site-route-transition {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--rd-brand) 36%, #0a0f1b), #0a0f1b 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 9998;
}

#site-route-transition.active {
  opacity: 1;
  pointer-events: auto;
}

.route-transition-label {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: clamp(16px, 2vw, 20px);
  text-align: center;
}

.route-transition-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 12px;
  justify-items: center;
}

.route-transition-logo {
  width: clamp(76px, 9vw, 120px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.35));
}

.edu-entry-toast {
  position: fixed;
  top: calc(var(--topinfo-h) + var(--navbar-h) + 16px);
  right: 18px;
  background: linear-gradient(110deg, #4a0d16, #8d1227);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: var(--rd-shadow-md);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 90;
}

.edu-entry-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.helper-bot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
}

.helper-bot-toggle {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rd-brand) 40%, #a8bde4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rd-brand) 90%, #132a55), var(--rd-brand-2));
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--rd-brand) 35%, transparent);
}

.helper-bot-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(340px, 86vw);
  border-radius: 16px;
  border: 1px solid var(--rd-line);
  background: #fff;
  box-shadow: var(--rd-shadow-lg);
  padding: 14px;
  display: none;
}

.helper-bot.open .helper-bot-panel {
  display: block;
  animation: botIn 0.2s ease;
}

@keyframes botIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.helper-bot-panel h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.helper-bot-sub {
  margin: -4px 0 10px;
  font-size: 12px;
  color: var(--rd-muted);
}

.helper-bot-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  max-height: 240px;
  overflow: auto;
}

.helper-bot-option {
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 90%, var(--rd-bg));
  color: var(--rd-text);
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.helper-bot-option:hover {
  border-color: color-mix(in srgb, var(--rd-brand) 35%, #c2d3ef);
}

.helper-bot-answer {
  margin: 10px 0 0;
  color: var(--rd-muted);
  line-height: 1.5;
}

.helper-bot-actions {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.helper-bot-action {
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 90%, var(--rd-bg));
  color: var(--rd-text);
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.helper-bot-action:hover {
  border-color: color-mix(in srgb, var(--rd-brand) 35%, #c2d3ef);
}

.helper-bot-go {
  color: var(--rd-brand);
  font-weight: 800;
  text-decoration: none;
}

/* =========================================================
   MOBILE PRO TUNING
   ========================================================= */
@media (max-width: 980px) {
  .navbar {
    z-index: 220;
  }

  .topinfo {
    min-height: 42px;
  }

  .topinfo-inner {
    min-height: 42px;
    padding: 0 12px;
  }

  .topinfo-left {
    gap: 8px;
  }

  .topinfo-item {
    font-size: 11px;
    padding: 6px 8px;
  }

  .topinfo-right {
    gap: 6px;
  }

  .pill,
  .tel {
    padding: 7px 9px;
    font-size: 12px;
  }

  .navbar-inner {
    padding: 0 12px;
  }

  .brand img {
    height: 46px;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 19px;
    border-radius: 12px;
  }

  .nav-links {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--topinfo-h) + var(--navbar-h) + 8px);
    width: auto;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 24px 44px rgba(5, 12, 25, 0.28);
    max-height: 0;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 240;
  }

  body.theme-software .nav-links {
    background: #0b53be;
  }

  body.theme-education .nav-links {
    background: #3d0d15;
  }

  .nav-links.open {
    max-height: calc(100dvh - (var(--topinfo-h) + var(--navbar-h) + 22px));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link {
    font-size: 15px;
    padding: 12px;
    border-radius: 12px;
  }

  .nav-link.is-current {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .nav-sep {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }

  .dropdown::after {
    display: none;
  }

  .dropdown-menu {
    margin-top: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
  }

  .dropdown-menu a {
    padding: 10px;
    font-size: 13px;
  }

  .slider,
  .edu-hero .slider {
    padding: 0 12px;
  }

  .slides,
  .edu-hero .slides {
    min-height: 620px;
  }

  .slide,
  .edu-hero .slide {
    grid-template-columns: 1fr;
    min-height: 620px;
  }

  .slide-media,
  .edu-hero .slide-media {
    min-height: 250px;
  }

  .slide-text {
    padding: 18px 18px 62px;
    justify-content: flex-start;
    gap: 8px;
  }

  .slide-text h2 {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.12;
  }

  .slide-text h3 {
    font-size: 14px;
  }

  .slide-text p {
    font-size: 14px;
    line-height: 1.62;
  }

  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
    top: 38%;
  }

  .dots {
    bottom: 10px;
    padding: 8px 10px;
  }

  .tech-grid6 {
    gap: 14px;
  }

  .tech-card {
    grid-template-columns: 1fr;
  }

  .tech-ico {
    min-height: 190px;
  }

  .tech-card .tech-body {
    padding: 14px 14px 16px;
  }

  .enh-edu-grid {
    gap: 12px;
  }

  .helper-bot {
    right: 12px;
    bottom: 12px;
  }

  .helper-bot-toggle {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 22, 0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 200;
}

.mobile-nav-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.mobile-menu-open .main::before {
  opacity: 0;
}

@media (max-width: 560px) {
  .topinfo-right .tel span:last-child {
    display: none;
  }

  .pill {
    min-width: 36px;
    text-align: center;
    justify-content: center;
  }

  .slides,
  .edu-hero .slides {
    min-height: 600px;
  }

  .slide,
  .edu-hero .slide {
    min-height: 600px;
  }

  .slide-media,
  .edu-hero .slide-media {
    min-height: 220px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }
}