/* Basic theme tweaks */
:root {
  --brand-primary: #0d6efd; /* Bootstrap primary */
  --hero-overlay: rgba(5, 10, 25, 0.45);
  /* Tech theme */
  --bg: #0b1220;
  --panel: #0f1a2b;
  --accent: #00d9ff;
  --accent-2: #7b61ff;
  --text: #e6edf7;
  --muted: #9aa4b2;
  /* Canvas hero colors */
  --dot: #ffffff;
  --link: #93c5fd;
  /* You can replace this Unsplash image with any local asset */
  /* Path is relative to this CSS file (assets/css), go one level up */
  --bg-img: url('../img/ala_ai_chip_banner.jpg');
  --bg-overlay: linear-gradient(180deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.60) 40%, rgba(11,18,32,.85) 100%);
   /* Fallback renk (eski tarayıcılar için saf RGBA) */
  --topbar-divider-fallback: rgba(79, 207, 255, .35);
  /* Modern: accent & accent-2 karışımı */
  --topbar-divider: color-mix(in oklab, var(--accent, #00d9ff) 60%, var(--accent-2, #7b61ff) 40%);
  --topbar-divider-soft: color-mix(in oklab, transparent 65%, var(--topbar-divider) 35%);

}


/* Language visibility helpers */
html[lang="tr"] .lang-en { display: none !important; }
html[lang="en"] .lang-tr { display: none !important; }

html, body {
  scroll-behavior: smooth;
}

body {
  font-family: 'Sofia Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

h1, .display-1, .display-2, .display-3, .display-4, .display-5 {
  letter-spacing: -0.02em;
}

/* Navbar shrink on scroll */
.navbar.is-shrunk {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
  transition: padding .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* Hero section */
/* New landing hero */
.hero-landing { min-height: 100vh; padding-top: 5.5rem; }
.hero-bg video, .hero-bg canvas { position: absolute; inset: 0; }
.object-fit-cover { object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 40%, transparent 0%, transparent 45%, var(--hero-overlay) 100%), linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,.55)); }

.ala_slogan_2016_tr {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-align: center;
    margin-top: 100px;      /* çok satırlı olursa ortalı görünmesi için */
}
/* Back to top button */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: none;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.back-to-top.show { display: inline-flex; }

/* Cards subtle hover */
.card:hover { transform: translateY(-2px); transition: transform .15s ease; }

/* Navbar style tweaks */
.navbar .nav-link { letter-spacing: .02em; }
.navbar .navbar-brand { letter-spacing: .01em; }

/* Transparent overlay navbar for homepage */
.navbar-overlay { background: transparent !important; border-bottom: none !important; box-shadow: none !important; }
.navbar-overlay .nav-link, .navbar-overlay .navbar-brand { color: #fff !important; }
.navbar-overlay .navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar-overlay .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
.navbar-overlay .brand-logo { filter: invert(1) brightness(100%); }

.navbar-overlay.nav-solid {
  background: rgba(10, 15, 30, .45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Utilities */
.text-primary-gradient {
  background: linear-gradient(90deg, #0d6efd, #6610f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Masonry-style gallery for references */
.masonry {
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 576px) { .masonry { column-count: 2; } }
@media (min-width: 992px) { .masonry { column-count: 3; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.masonry-item img { width: 100%; height: auto; display: block; }
/* Hide old top navbar (replaced by sidebar layout) */
.navbar { display: none !important; }

/* ----------------------------------------------------
   Canvas Hero (right column)
   ---------------------------------------------------- */
.hero-canvas { position: relative; min-height: 100vh; overflow: hidden; }
.hero-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Removed background-attachment: fixed for broader browser support */
  background: var(--bg-overlay), var(--bg-img) center/cover no-repeat;
  filter: saturate(1.08) contrast(1.05);
}
.hero-canvas::after {
  /* küçük logo overlay — KORUNDU */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/ala_proje_logo_only.svg');
  background-repeat: no-repeat; background-position: center; background-size: min(70vmin, 720px);
  opacity: .035; filter: saturate(.95) contrast(1.05);
  pointer-events: none;
}
.hero-canvas .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.hero-canvas .hero__content { position: relative; z-index: 2; display: grid; place-items: center; min-height: 100vh; text-align: center; padding: 4rem 1rem; }
.hero-canvas .title { font-size: clamp(2rem, 6vw, 4rem); margin: 0 0 1rem; letter-spacing: .5px; color: var(--text); }
.hero-canvas .lead { max-width: 70ch; margin: 0 auto 2rem; color: rgba(230,237,247,.9); }
.hero-canvas .cta { display: inline-block; padding: .9rem 1.2rem; border-radius: 14px; border: 1px solid #475569; text-decoration: none; color: var(--text); }
.hero-canvas .cta:hover { border-color: #64748b; }

.hero-canvas .tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 1100px; margin: 0 auto 2rem; padding: 0; list-style: none; }
.hero-canvas .tag { padding: .45rem .7rem; border: 1px solid rgba(148,163,184,.35); border-radius: 999px; font-size: .9rem; white-space: nowrap; backdrop-filter: blur(2px); background: rgba(2,6,23,.35); color: var(--text); }
.hero-canvas .tag a{ display:block; color: inherit; text-decoration: none; }
.hero-canvas .tag a:hover{ text-decoration: none; }
.hero-canvas .tag a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .hero-canvas .hero__canvas { opacity: .5; }
}

/* ----------------------------------------------------
   App layout: two-column sidebar + content
   ---------------------------------------------------- */

/* Grid wrapper for full-height layout */
body.layout-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  background: radial-gradient(1000px 600px at 70% 20%, rgba(0, 217, 255, 0.08), transparent 60%),
              radial-gradient(800px 500px at 90% 80%, rgba(123, 97, 255, 0.08), transparent 60%),
              linear-gradient(180deg, #0a1220, #0b1220);
  color: var(--text);
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, var(--panel), #0b1220);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.sidebar .brand {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar .brand img { height: 36px; filter: brightness(1.1) contrast(1.1); }

.sidebar .nav-vertical {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: .25rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.sidebar .nav-vertical a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: .75rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .01em;
  opacity: .9;
}

.sidebar .nav-vertical a .bi { color: var(--accent); opacity: .9; }
.sidebar .nav-vertical a:hover { background: rgba(255,255,255,.06); opacity: 1; }
.sidebar .nav-vertical a.active { background: linear-gradient(90deg, rgba(0,217,255,.18), rgba(123,97,255,.18)); border: 1px solid rgba(0,217,255,.25); }

.sidebar .spacer { flex: 1 1 auto; }

.sidebar .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  text-decoration: none;
  font-size: .85rem;
}

.sidebar .footer {
  width: 100%;
  text-align: center;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
  font-size: .8rem;
}
/* ------ Page topbar (inner pages) ------ */
.page-topbar{padding:14px 0}
.top-logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.top-logo img{display:block; width:40px; height:auto}

/* İstersen yapışkan üst bar için sınıf ekleyebilirsin */
.page-topbar.is-sticky{
  position: sticky; top: 0; z-index: 1020;
  background: rgba(11,18,32,.55); /* var(--bg) üstüne yarı saydam */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

@media (min-width: 768px){
  .page-topbar{padding:18px 0}
  .top-logo img{width:48px}
}

.page-topbar { position: relative; }
/* Logo hizalama yardımcıları */
.page-topbar .container-narrow{ display:flex; align-items:center; }
.page-topbar.is-centered .container-narrow{ justify-content:center; }

/* Container genişliğinde ince çizgi */
.page-topbar.has-divider .container-narrow::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--topbar-divider-soft) 12%,
      var(--topbar-divider-soft) 88%,
      transparent 100%);
  /* Fallback: color-mix yoksa düz çizgi kullan */
  background-color: var(--topbar-divider-fallback);
}

/* Full-bleed istiyorsan header’ın tamamına uygula */
.page-topbar.divider-full::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--topbar-divider-soft) 20%,
      var(--topbar-divider-soft) 80%,
      transparent 100%);
  background-color: var(--topbar-divider-fallback);
}

/* (Opsiyonel) sticky üst bar ile birlikte kullanırken çizgiyi sabit tutar */
.page-topbar.is-sticky::after,
.page-topbar.is-sticky .container-narrow::after{
  position: sticky;
  bottom: 0;
}

.sidebar .footer .brand-text-logo { height: 16px; display: inline-block; margin-bottom: .25rem; filter: brightness(1.05) contrast(1.05); }

.ala-footer {
  border-top: 1px solid rgba(255, 255, 255, .05);
}
/* Main content */
.main {
  position: relative;
  background: transparent;
}

/* Make landing hero fill the right column view */
.main .hero-landing { min-height: calc(100vh); padding-top: 0; }

/* Dark theme tweaks for text */
.text-on-dark { color: var(--text) !important; }
.muted-on-dark { color: var(--muted) !important; }

/* Responsive: stack on small screens */
@media (max-width: 991.98px) {
  body.layout-grid { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .main .hero-landing { min-height: 70vh; }
}

/* Hero title logo badge (KORUNDU) */
.hero-canvas .hero-title-group { 
  display: grid; 
  justify-items: center; 
  gap: .6rem; 
  /* Match H1 size so badge can size in em */
  font-size: clamp(2rem, 6vw, 4rem);
}
.hero-canvas .hero-title-group .title { font-size: 1em; margin-top: 0; }
.hero-canvas .hero-logo-badge { 
  display: inline-grid; place-items: center; 
  width: 2em; height: 2em; 
}
.hero-canvas .hero-logo-badge img { 
  width: 70%; height: 70%; object-fit: contain; 
}

/* ----------------------------------------------------
   Three Pillars section (custom)  (ORİJİNALİN AYNISI)
   ---------------------------------------------------- */
.three-pillars {
  background: var(--bg);
  color: var(--text);
  padding: clamp(48px, 6vw, 96px) 24px;
}

.pillars-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .pillars-wrapper { grid-template-columns: repeat(3, 1fr); gap: 64px; }
  .pillar { position: relative; padding-right: 32px; }
  .pillar:not(:last-child)::after {
    content: "";
    position: absolute; top: 0; right: -32px; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  }
}

.pillar-title {
  font-family: 'Sofia Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: .2px;
  margin: 0 0 12px;
  font-synthesis: none; /* avoid synthetic bold/italic differences */
}

.pillar-title .muted { color: var(--muted); font-weight: 700; }

/* Bilingual heading lines */
.pillar-title .lang-tr { display: block; color: #fff; font-weight: 800; font-size: .80em; letter-spacing: .2px; }
.pillar-title .lang-en { display: block; color: #fff; font-weight: 800; font-size: .80em; margin-top: .35rem; letter-spacing: .2px; }

.pillar-divider { margin: 8px 0 16px; height: 40px; }

.pillar-divider svg {
  width: 100%; height: 100%;
  stroke: var(--accent);
  stroke-width: 2.4;
  fill: none;
  opacity: .95;
}

/* Accent detailing for specific icons */
.icon-neural circle { fill: var(--accent-2); stroke: none; opacity: .9; }
.icon-vision circle { stroke: var(--accent-2); }
.icon-vision line { stroke: var(--accent-2); stroke-width: 1.4; opacity: .8; }
.icon-gearline circle { stroke: var(--accent-2); }

.pillar-text {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--text);
  max-width: 36ch;
}

.pillar-text .lang-tr { display: block; color: var(--muted); margin-top: .5rem; }
.pillar-text .lang-en { display: block; color: var(--muted); margin-top: .5rem; }

/* --- Mobile menu toggle --- */
.menu-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 2000;
  display: none; /* sadece mobilde */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--accent-2); /* senin istediğin mavi-mor ton */
  font-size: 1.5rem;
}

/* hover/active */
.menu-toggle:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

/* Mobilde görünür */
@media (max-width: 991.98px) {
  .menu-toggle { display: inline-flex; }
  body.sidebar-open .menu-toggle { position: fixed; } /* sidebar açıkken de sabit kalsın */
  
  /* Sidebar mobilde overlay olsun */
  .sidebar {
    position: fixed;
    top: 0; left: -280px;
    width: 280px;
    height: 100vh;
    transition: left .3s ease;
    z-index: 1999;
  }
  body.sidebar-open .sidebar { left: 0; }

  /* Kapanma için backdrop */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    display: none;
    z-index: 1500;
  }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

/* ----------------------------------------------------
   Trusted section
   ---------------------------------------------------- */
.trusted-section {
  position: relative;
  padding: clamp(40px, 6vw, 96px) 16px;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(0, 217, 255, 0.06), transparent 60%),
    radial-gradient(900px 600px at 80% 90%, rgba(123, 97, 255, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.88));
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text);
}

.trusted-section .container-narrow {
  max-width: 1200px;
  margin: 0 auto;
}

.trusted-heading {
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 1.75rem;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--text);
  opacity: .95;
}
/* Logo grid */
.logo-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  justify-items: center;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;   /* logolar için tutarlı yükseklik */
  width: 100%;
  padding: 8px;
  background: transparent; /* kutu efekti yok */
  border: none;
}

.logo-item img,
.logo-item svg {
  max-height: 40px;  /* tüm logoların yüksekliği eşit */
  max-width: 140px;  /* çok yatay logolar taşmasın */
  width: auto;
  height: auto;
  object-fit: contain;

  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}

.logo-item:hover img,
.logo-item:hover svg {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-2px);
}

/* Stats */
.trusted-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
}

.stat {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: center;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.stat-number {
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .3px;
}

.stat-number .suffix { 
  font-weight: 800; 
  opacity: .9; 
}

.stat-label {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: .2px;
}

@media (max-width: 767.98px) {
  .trusted-stats { grid-template-columns: 1fr; }
  .logo-item img, .logo-item svg { max-height: 32px; max-width: 120px; }
}

/* ====================================================
   EXTRA: Panel overlay + partners grid (Pillars için)
   (Ek — hero/sol sidebar’a DOKUNMADAN)
==================================================== */
.section-panel{
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(123,97,255,0.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 110%, rgba(0,217,255,0.10), transparent 60%),
    var(--bg);
  isolation: isolate;
}
.section-panel::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,32,0.85), rgba(11,18,32,0.85)),
    var(--bg-img);
  background-size: cover; background-position:center;
  opacity:.35; z-index:-2;
}
.section-panel::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image: radial-gradient(80% 80% at 50% 50%, black, transparent 90%);
  z-index:-1;
}

/* Genel dar kapsayıcı — Trusted için özel kural aşağıda var */
.container-narrow { max-width: 1100px; margin: 0 auto; }

/* Partners (monokrom, aynı yükseklik) */
.partners-block {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: clamp(28px, 4vw, 44px) !important;
  padding-top: clamp(16px, 2.4vw, 28px) !important;
}

.partner-logo-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  align-items: center; justify-items: center;
}

.partner-logo-grid img {
  max-height: 45px;
  width: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);   /* beyaz monokrom görünüm */
  opacity: .86;
  transition: opacity .2s ease, transform .2s ease;
}
.partner-logo-grid img:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.services-wrap{padding:clamp(32px,5vw,64px) 0}
.service-card{position:relative; display:block; width:100%; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); box-shadow:0 6px 18px rgba(0,0,0,.16); transition:transform .25s ease, box-shadow .25s ease}
.service-card + .service-card{margin-top:clamp(18px,2.4vw,28px)}
.service-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22)}
.service-media{position:relative; width:100%; padding-top:40%; /* 5:2 ratio */ background:#0b1220 center/cover no-repeat}
.service-overlay{position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 85%)}
.service-titles{width:100%; padding:18px 22px}
.service-titles .en{display:block; font-weight:700; font-size:clamp(18px,2.2vw,24px); line-height:1.1}
.service-titles .tr{display:block; font-weight:500; opacity:.9; margin-top:2px; font-size:clamp(14px,1.7vw,16px)}
.service-body{padding:18px 22px 20px}
.service-desc{color:var(--text, #e6edf7); opacity:.98; margin:0}
.service-actions{padding:0 22px 22px}
.service-actions .btn{border-radius:14px}
.service-meta{position:absolute; top:12px; right:12px; display:flex; gap:8px}
.badge-glass{backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; font-size:12px}
.services-header .title{display:flex; flex-direction:column}
.services-header .title .lang-tr{opacity:.9; font-size:.9em}