/* =========================================================
   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 */
  }
}