/* ============= ESTE Bilişim - Shared site styles ============= */
/* Bu dosya tüm sayfalarda kullanılan ortak bileşenleri içerir.
   Tailwind CDN ile birlikte yüklenir. */

/* ============================================================
   GENEL YATAY OVERFLOW GÜVENCESİ
   Mobilde herhangi bir element viewport'tan taşarsa sayfa yana
   kaymaz; sadece o elementin kendi scroll'u oluşur.
   ============================================================ */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ============================================================
   SAYFA GEÇİŞ EFEKTLERİ
   1) Modern tarayıcılar (Chrome/Edge 126+): View Transitions API
      Sayfalar arası beyaz flash olmadan, fade ile geçiş.
   2) Diğer tarayıcılar (Firefox, Safari < 18.2): body fade-in
      fallback. Görseli yumuşak bir şekilde belirir.
   ============================================================ */

/* 1) Cross-document View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-fade-out 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2) Fallback: body fade-in
   Sadece View Transitions API'yi desteklemeyen tarayıcılarda
   çalışır (Firefox, eski Safari). Aksi hâlde çift animasyon olur. */
@supports not (view-transition-name: root) {
  @media (prefers-reduced-motion: no-preference) {
    body {
      animation: page-fade-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
  }
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Header/Footer injection wrapper - display:contents ile sticky positioning
   header'ı body'ye doğrudan child gibi gösterir. Bu sayede sticky NAV
   tüm sayfa boyunca yapışkan kalır. */
[data-este-header],
[data-este-footer] {
  display: contents;
}

/* Menü dropdown paneli */
.menu-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15),
              0 10px 20px -5px rgba(15, 23, 42, 0.08);
}
.dark .menu-panel {
  background: #0f172a;
  border: 1px solid #1e293b;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6),
              0 10px 20px -5px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(147, 51, 234, 0.08);
}

.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
}

/* Nav kompakt kontroller (TR/EN + tema) - sadece sayfa scroll edilince,
   topbar gizlenince sticky header içinde belirir. Üstteyken topbar'daki
   kontroller görünür, bunlar gizli. */
.nav-compact {
  display: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) {
  #mainNav.scrolled .nav-compact {
    display: flex;
    opacity: 1;
    transform: translateX(0);
  }
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Shimmer button overlay (overlay span ile kullanılır) */
.shimmer-btn {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  background-size: 200% 100%;
  animation: site-shimmer 3s linear infinite;
}
@keyframes site-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ============================================================
   .cta-shimmer - Ekstra span gerekmeden hover sweep parıltısı
   ============================================================
   Buton zaten relative + overflow-hidden değilse otomatik ayarlanır.
   Kullanım: butonun class'ına `cta-shimmer` ekleyin, gerisi otomatik.
============================================================ */
.cta-shimmer {
  position: relative;
  overflow: hidden;
}
.cta-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  background-size: 220% 100%;
  background-position: -110% 0;
  pointer-events: none;
  animation: cta-shimmer-sweep 3.6s ease-in-out infinite;
}
@keyframes cta-shimmer-sweep {
  0%, 100% { background-position: -110% 0; }
  50%      { background-position:  110% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-shimmer::after { animation: none; opacity: 0; }
}

/* ============================================================
   Liste kartlarında ikon kutusu wiggle (kart hover'ında)
   ============================================================
   Tipik desen: <div class="feature-card">
                  <div class="w-12 h-12 rounded-xl bg-gradient-to-br ...">
                    <i ...></i>
                  </div>
                  ...
                </div>
   Kart hover'ında ikon kutusu hafifçe sallanır → "diri" his.
============================================================ */
:where(.feature-card, .case-card, .event-card, .perk-card, .exp-card, .story-card, .news-card, .job-card, .este-card):hover :where(.rounded-xl, .rounded-2xl)[class*="bg-gradient-to-"]:not([class*="w-full"]):not(button):not(a) {
  animation: cardIconWiggle 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes cardIconWiggle {
  0%   { transform: rotate(0) scale(1); }
  30%  { transform: rotate(-8deg) scale(1.1); }
  60%  { transform: rotate(6deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.feature-card, .case-card, .event-card, .perk-card, .exp-card, .story-card, .news-card, .job-card, .este-card):hover * { animation: none !important; }
}

/* ============================================================
   Sosyal medya butonu hover bounce (ios-social üzerine)
   ============================================================
   Üstteki .ios-social:hover statik translate yerine yaylı bounce.
============================================================ */
.ios-social:hover {
  animation: socialBounce 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes socialBounce {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-8px) scale(1.1); }
  60%  { transform: translateY(0) scale(0.98); }
  80%  { transform: translateY(-3px) scale(1.05); }
  100% { transform: translateY(-2px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .ios-social:hover { animation: none; transform: translateY(-2px) scale(1.05); }
}

/* ============================================================
   Karşılaştırma tablosu rozetlerinde gradient akışı (shimmer)
   ============================================================
   lisanslama.html: "EN POPÜLER" ve "HER ŞEY DAHİL" rozetlerinde
   sürekli yavaş bir renk akışı → "öne çıkar" hissi.
============================================================ */
[data-i18n="ls.cmpPopular"],
[data-i18n="ls.cmpAllIn"] {
  background-size: 220% 100% !important;
  animation: badgeGradientFlow 5s ease-in-out infinite;
}
@keyframes badgeGradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-i18n="ls.cmpPopular"],
  [data-i18n="ls.cmpAllIn"] { animation: none; }
}

/* ============================================================
   Skeleton placeholders - liste sayfaları (blog/news/events/...)
   ============================================================
   "Yükleniyor…" düz metni yerine fetch sırasında 6 iskelet kart
   gösterilir. Soldan sağa kayan parıltı (shimmer) ile hayatta.

   Kullanım (JS):
     grid.innerHTML = window.esteSkeleton(6);
============================================================ */
.skel {
  position: relative;
  overflow: hidden;
  background-color: rgba(15, 23, 42, 0.06);
  border-radius: 8px;
}
.dark .skel { background-color: rgba(255, 255, 255, 0.06); }
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
.dark .skel::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  background-size: 200% 100%;
}
@keyframes skelShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}

.skel-card {
  border-radius: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  overflow: hidden;
}
.dark .skel-card {
  background: rgb(15,23,42);
  border-color: rgba(255,255,255,0.08);
}
.skel-card .skel-img    { aspect-ratio: 16 / 10; border-radius: 0; }
.skel-card .skel-body   { padding: 1.25rem 1.5rem 1.5rem; }
.skel-card .skel-line   { height: 12px; margin-bottom: 10px; border-radius: 6px; }
.skel-card .skel-line.short { width: 40%; }
.skel-card .skel-line.med   { width: 65%; }
.skel-card .skel-line.long  { width: 90%; }

@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; opacity: 0.6; }
}

/* ============================================================
   Footer ESTE logosu - hover'da nazik pulse + parlaklık
   ============================================================
   site.js footer'da wrapper'a .este-footer-logo class'ı ekli.
   Hover'da logo yumuşak nabız atar ve hafifçe parlaklaşır;
   renkli halo YOKTUR - sade ve markaya saygılı bir efekt.
============================================================ */
.este-footer-logo {
  display: inline-flex;
  cursor: pointer;
}
.este-footer-logo img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter    0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.este-footer-logo:hover img {
  transform: scale(1.06);
  filter: brightness(1.08);
  animation: logoPulse 1.8s ease-in-out infinite;
}
.dark .este-footer-logo:hover img {
  filter: brightness(1.12);
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1.06); }
  50%      { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .este-footer-logo:hover img { animation: none; transform: scale(1.04); }
}

/* ============================================================
   .gradient-text - yavaş, yumuşak gradient akışı
   ============================================================
   Site genelinde h1/h2/vurgu için kullanılan mavi→indigo→mor
   gradient text'i hafifçe canlandırır. Renkler letter'lar arasında
   yumuşakça akar - 10sn döngü, neredeyse bilinçaltı bir his.

   Her sayfa kendi <style> bloğunda .gradient-text'i `background`
   shorthand ile tanımlıyor (page-style cascade'i sonra geliyor),
   o yüzden background-size'ı !important ile koruyoruz.
============================================================ */
.gradient-text {
  background-size: 220% 220% !important;
  animation: gradientTextFlow 10s ease-in-out infinite;
}
@keyframes gradientTextFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}

/* ============================================================
   Typewriter (daktilo) efekti
   ============================================================
   Kullanım: <span data-typewriter>Metin</span>
   site.js karakter karakter yazar; yazma bittikten sonra .typed
   sınıfı eklenir → cursor yanıp söner.
============================================================ */
.typewriter {
  position: relative;
  white-space: nowrap;
}
/* Yazarken görünen cursor (caret) */
.typewriter::after {
  content: '|';
  display: inline-block;
  margin-left: 1px;
  color: currentColor;
  opacity: 0.8;
  animation: caretBlink 0.9s steps(1) infinite;
  font-weight: 600;
}
/* Yazma tamamlanınca cursor 4 saniye daha kalır, sonra söner */
.typewriter.typed::after {
  animation: caretBlinkFade 4s steps(1) forwards;
}
/* Loop modu: cursor sönmesin, sürekli yanıp sönsün */
.typewriter.typed[data-typewriter-loop]::after {
  animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink {
  0%, 50%   { opacity: 0.8; }
  51%, 100% { opacity: 0;   }
}
@keyframes caretBlinkFade {
  0%, 50%   { opacity: 0.8; }
  51%, 90%  { opacity: 0;   }
  91%, 100% { opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter::after { animation: none; opacity: 0; }
}

/* ============================================================
   ESTE Logo - parçalı animasyon stilleri
   ============================================================
   este-logo-animated.svg dosyası 10 ayrı <path class="e-piece-N"> ve
   4 harf <path class="e-text-N"> içerir. Admin → Bakım → "Site Ayarları"
   altından stil seçilir; site.js footer logosuna .este-anim-style{1..4}
   class'ı ekler.
============================================================ */

/* Tüm stiller için ortak: amblem parçaları gradient + transform-origin */
.este-logo-svg .e-piece {
  fill: url(#esteG);
  transform-box: fill-box;
  transform-origin: center;
}
.este-logo-svg .e-text { fill: #77767A; }
.dark .este-logo-svg .e-text { fill: #ffffff; }

/* Stil 1 - Microsoft tarzı sıralı parıltı */
.este-anim-style1 .e-piece {
  opacity: 0.55;
  animation: estePulseAll 3s ease-in-out infinite;
}
.este-anim-style1 .e-piece-1  { animation-delay: 0.0s; }
.este-anim-style1 .e-piece-2  { animation-delay: 0.3s; }
.este-anim-style1 .e-piece-3  { animation-delay: 0.6s; }
.este-anim-style1 .e-piece-4  { animation-delay: 0.9s; }
.este-anim-style1 .e-piece-5  { animation-delay: 1.2s; }
.este-anim-style1 .e-piece-6  { animation-delay: 1.5s; }
.este-anim-style1 .e-piece-7  { animation-delay: 1.8s; }
.este-anim-style1 .e-piece-8  { animation-delay: 2.1s; }
.este-anim-style1 .e-piece-9  { animation-delay: 2.4s; }
.este-anim-style1 .e-piece-10 { animation-delay: 2.7s; }
@keyframes estePulseAll {
  0%, 25%, 100% { opacity: 0.55; transform: scale(1); filter: brightness(1); }
  8%            { opacity: 1;    transform: scale(1.06); filter: brightness(1.15); }
}

/* Stil 2 - Çizilme (build-up + reset) */
.este-anim-style2 .e-piece {
  opacity: 0;
  animation: esteDrawAll 4s ease-in-out infinite;
}
.este-anim-style2 .e-piece-1  { animation-delay: 0.00s; }
.este-anim-style2 .e-piece-2  { animation-delay: 0.15s; }
.este-anim-style2 .e-piece-3  { animation-delay: 0.30s; }
.este-anim-style2 .e-piece-4  { animation-delay: 0.45s; }
.este-anim-style2 .e-piece-5  { animation-delay: 0.60s; }
.este-anim-style2 .e-piece-6  { animation-delay: 0.75s; }
.este-anim-style2 .e-piece-7  { animation-delay: 0.90s; }
.este-anim-style2 .e-piece-8  { animation-delay: 1.05s; }
.este-anim-style2 .e-piece-9  { animation-delay: 1.20s; }
.este-anim-style2 .e-piece-10 { animation-delay: 1.35s; }
@keyframes esteDrawAll {
  0%   { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  20%  { opacity: 1; transform: scale(1) rotate(0deg); }
  85%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
}

/* Stil 3 - Dalga (subtle) */
.este-anim-style3 .e-piece {
  opacity: 0.7;
  animation: esteWaveAll 2.2s ease-in-out infinite;
}
.este-anim-style3 .e-piece-1  { animation-delay: 0.0s; }
.este-anim-style3 .e-piece-2  { animation-delay: 0.1s; }
.este-anim-style3 .e-piece-3  { animation-delay: 0.2s; }
.este-anim-style3 .e-piece-4  { animation-delay: 0.3s; }
.este-anim-style3 .e-piece-5  { animation-delay: 0.4s; }
.este-anim-style3 .e-piece-6  { animation-delay: 0.5s; }
.este-anim-style3 .e-piece-7  { animation-delay: 0.6s; }
.este-anim-style3 .e-piece-8  { animation-delay: 0.7s; }
.este-anim-style3 .e-piece-9  { animation-delay: 0.8s; }
.este-anim-style3 .e-piece-10 { animation-delay: 0.9s; }
@keyframes esteWaveAll {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

/* Stil 4 - Yalnız hover'da animasyon (Stil 1 ile aynı, hover-trigger) */
.este-anim-style4 .e-piece { opacity: 1; }
.este-anim-style4:hover .e-piece {
  animation: estePulseAll 2s ease-in-out infinite;
}
.este-anim-style4:hover .e-piece-1  { animation-delay: 0.0s; }
.este-anim-style4:hover .e-piece-2  { animation-delay: 0.2s; }
.este-anim-style4:hover .e-piece-3  { animation-delay: 0.4s; }
.este-anim-style4:hover .e-piece-4  { animation-delay: 0.6s; }
.este-anim-style4:hover .e-piece-5  { animation-delay: 0.8s; }
.este-anim-style4:hover .e-piece-6  { animation-delay: 1.0s; }
.este-anim-style4:hover .e-piece-7  { animation-delay: 1.2s; }
.este-anim-style4:hover .e-piece-8  { animation-delay: 1.4s; }
.este-anim-style4:hover .e-piece-9  { animation-delay: 1.6s; }
.este-anim-style4:hover .e-piece-10 { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .este-anim-style1 .e-piece,
  .este-anim-style2 .e-piece,
  .este-anim-style3 .e-piece,
  .este-anim-style4:hover .e-piece { animation: none; opacity: 1; transform: none; }
}

/* Burger menü */
.burger span {
  display: block;
  width: 26px; height: 2px;
  background: currentColor;
  margin: 6px 0;
  transition: all 0.3s ease;
}
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Pulse-slow */
@keyframes site-pulse-slow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}
.animate-pulse-slow { animation: site-pulse-slow 4s ease-in-out infinite; }

/* iOS-stili sosyal medya ikonları (App Icon look) - marka renkli, tüm sayfalarda ortak.
   Ana sayfa ile birebir aynı görünüm: her platform kendi marka renginde dolgulu ikon,
   dark/light mode'da aynı kalır. */
.ios-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #ffffff;             /* SVG'ler fill="currentColor" kullanır */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 6px 14px -2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ios-social:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.22),
    0 14px 26px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ios-linkedin   { background: linear-gradient(160deg, #0A8FCD 0%, #0A66C2 60%, #004182 100%); }
.ios-instagram  { background:
                    radial-gradient(circle at 30% 110%, #FFD96B 0%, #FF7A3D 22%, #F02C84 45%, #B11DBE 70%, #5B2DBE 100%); }
.ios-facebook   { background: linear-gradient(180deg, #2391FF 0%, #1877F2 60%, #0A60D6 100%); }
.ios-twitter    { background: linear-gradient(160deg, #1F1F1F 0%, #000000 100%); }
.ios-youtube    { background: linear-gradient(180deg, #FF4F4F 0%, #FF0000 60%, #C20000 100%); }
.ios-social.sm { width: 36px; height: 36px; border-radius: 10px; }
.ios-social.xs { width: 28px; height: 28px; border-radius: 8px; }

/* Logo chip (marquee'deki müşteri logoları) - renkli logo görselleri */
.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  margin: 0 10px;
  border-radius: 14px;
  background: #ffffff;       /* Her iki modda beyaz - renkli logolar net görünsün */
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.06);
  white-space: nowrap;
  min-width: 180px;
  height: 72px;
  transition: all 0.3s ease;
}
.logo-chip img {
  max-height: 40px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
}
.dark .logo-chip {
  background: #ffffff;       /* Dark modda da beyaz kart - kurumsal logolar açık zemin için tasarlı */
  border-color: #1e293b;
}
.logo-chip:hover {
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.2);
}
.dark .logo-chip:hover {
  border-color: #1e40af;
  box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.3);
}

/* Marquee track */
@keyframes site-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: site-marquee 60s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* Gradient text - markamızın imzası */
.gradient-text {
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 40%, #9333ea 80%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Microsoft 4-kare logosu - sıralı yanıp sönen animasyon
   ============================================================
   Kullanım:
     <div class="ms-logo">
       <div class="red"></div><div class="green"></div>
       <div class="blue"></div><div class="yellow"></div>
     </div>

   - Boyut varsayılan 22×22; konteynerda override edilebilir
     (ör. .ms-badge .ms-logo { width: 26px; height: 26px; })
   - prefers-reduced-motion açıksa animasyon kapanır (erişilebilirlik)
============================================================ */
.ms-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.ms-logo > div {
  width: 100%;
  height: 100%;
  opacity: 0.78;
  transform-origin: center;
  animation: msLogoPulse 2.4s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
.ms-logo .red    { background: #F25022; color: #F25022; animation-delay: 0s;   }
.ms-logo .green  { background: #7FBA00; color: #7FBA00; animation-delay: 0.6s; }
.ms-logo .blue   { background: #00A4EF; color: #00A4EF; animation-delay: 1.2s; }
.ms-logo .yellow { background: #FFB900; color: #FFB900; animation-delay: 1.8s; }

@keyframes msLogoPulse {
  0%, 25%, 100% {
    opacity: 0.78;
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  10% {
    opacity: 1;
    transform: scale(1.2);
    filter: brightness(1.15) drop-shadow(0 0 4px currentColor);
  }
}

/* Hover'da animasyon hızlanır → diri his */
.ms-logo:hover > div { animation-duration: 1.6s; }

/* Erişilebilirlik: hareket azaltılmış modunda kapan */
@media (prefers-reduced-motion: reduce) {
  .ms-logo > div { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Site-geneli tutarlı kart gölgeleri (admin paneliyle aynı stil)
   --------------------------------------------------------------
   .blog-card / .news-card / .event-card / .story-card / .iso-card
   adlı sayfa-özel sınıflar yalnızca :hover gölgesine sahipti;
   dinlenme hâlinde kartlar "düz" görünüyordu. Bu kurallar tüm
   liste sayfalarında (blog, haberler, etkinlikler, başarı hikayeleri,
   iso sertifikaları) aynı yumuşak iki katmanlı gölgeyi ekler.
   Yeni eklenen kartlar `.este-card` sınıfıyla aynı gölgeye katılır.
   ============================================================ */
.blog-card,
.news-card,
.event-card,
.story-card,
.iso-card,
.feature-card,
.case-card,
.este-card {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -10px rgba(15, 23, 42, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.dark .blog-card,
.dark .news-card,
.dark .event-card,
.dark .story-card,
.dark .iso-card,
.dark .feature-card,
.dark .case-card,
.dark .este-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 10px 28px -10px rgba(0, 0, 0, 0.5);
}
/* Hafif hover kalkması - bazı sayfa-özel :hover kuralları zaten daha
   güçlü gölgeler tanımlıyor; bu kural yalnızca .este-card için fallback
   hover etkisi sağlar (named sınıfların :hover'ı specificity ile öne çıkar). */
.este-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 24px 48px -16px rgba(15, 23, 42, 0.18);
}
.dark .este-card:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 24px 48px -16px rgba(0, 0, 0, 0.6);
}

/* -------- Specialization rotator (hero uzmanlık vitrini) -------- */
.spec-slot { transition: opacity 0.45s ease; }
.spec-slot.spec-fade { opacity: 0; }
.spec-grad-mw  { background-image: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.spec-grad-sec { background-image: linear-gradient(135deg, #ef4444 0%, #e11d48 100%); }
.spec-grad-az  { background-image: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); }

/* Footer arka planı - tema duyarlı */
.site-footer {
  background-color: #f8fafc; /* ink-50 */
  color: #334155;            /* ink-700 */
}
.dark .site-footer {
  background-color: #020617; /* ink-950 */
  color: #ffffff;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #1d4ed8; }

/* ============================================================
   ERİŞİLEBİLİRLİK - Skip-to-content
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  background: #2563eb;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(37, 99, 235, 0.45);
  transition: top 0.25s ease;
}
.skip-to-content:focus {
  top: 16px;
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

/* ============================================================
   ÇEREZ ONAY BANNER'I
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 900px;
  margin: 0 auto;
  z-index: 9990;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 30px 60px -10px rgba(15, 23, 42, 0.25),
              0 18px 36px -10px rgba(15, 23, 42, 0.18);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(120%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .cookie-banner {
  background: #0f172a;
  border-color: #1e293b;
  color: #f1f5f9;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.55);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) {
  .cookie-banner-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cookie-banner-text {
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
}
.dark .cookie-banner-text { color: #cbd5e1; }
.cookie-banner-text strong { color: #0f172a; font-weight: 700; }
.dark .cookie-banner-text strong { color: #ffffff; }
.cookie-banner-text a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dark .cookie-banner-text a { color: #60a5fa; }
.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 0;
  white-space: nowrap;
}
.cookie-btn.primary {
  background: linear-gradient(135deg, #2563eb 0%, #7e22ce 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.4);
}
.cookie-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.55); }
.cookie-btn.ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.dark .cookie-btn.ghost { color: #cbd5e1; border-color: #334155; }
.cookie-btn.ghost:hover { background: #f1f5f9; color: #0f172a; }
.dark .cookie-btn.ghost:hover { background: #1e293b; color: #ffffff; }

@media (max-width: 640px) {
  .cookie-banner {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .cookie-banner-text { font-size: 12px; }
  .cookie-btn { flex: 1; padding: 9px 10px; font-size: 12px; }
  .cookie-banner-actions { width: 100%; }
}

/* ============================================================
   STICKY CTA BAR (sayfa scroll edilince aşağıdan kayar)
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: -120%;
  left: 0;
  right: 0;
  z-index: 9970;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7e22ce 100%);
  color: #ffffff;
  padding: 12px 16px;
  box-shadow: 0 -10px 30px -10px rgba(15, 23, 42, 0.35);
  transition: bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-cta.visible { bottom: 0; }
.sticky-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .sticky-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.sticky-cta-text { font-size: 13px; font-weight: 600; line-height: 1.4; }
.sticky-cta-text strong { font-weight: 800; }
.sticky-cta-actions { display: flex; gap: 8px; align-items: center; }
.sticky-cta-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: #ffffff;
  color: #1e3a8a;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sticky-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.3); }
.sticky-cta-close {
  background: transparent;
  border: 0;
  color: #ffffff;
  opacity: 0.75;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.sticky-cta-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

@media (max-width: 640px) {
  .sticky-cta { padding: 10px 12px; }
  .sticky-cta-text { font-size: 12px; }
  .sticky-cta-btn { padding: 8px 14px; font-size: 12px; flex: 1; justify-content: center; }
  .sticky-cta-actions { width: 100%; }
}

/* ============================================================
   FAB STACK (sağ alt köşede çoklu butonlar)
   ============================================================ */
.fab-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9980;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 26px -6px rgba(15, 23, 42, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.45); }
.fab.fab-chat    { background: linear-gradient(135deg, #2563eb 0%, #7e22ce 100%); }
.fab.fab-call    { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.fab.fab-scroll  { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.fab .fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: fab-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ===== Güleryüzlü ESTE AI Asistan butonu (chat FAB) ===== */
.fab.ai-fab {
  width: 64px; height: 64px;
  overflow: visible;
  isolation: isolate;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.86) 0 9%, transparent 27%),
    linear-gradient(135deg, #00a9e8 0%, #0078d4 46%, #6f3ff5 100%);
  animation: aiFloat 3.8s ease-in-out infinite;
}
.fab.ai-fab:hover { transform: translateY(-3px) scale(1.05); animation-play-state: paused; }
.fab.ai-fab:active { transform: translateY(1px) scale(.98); }
.fab.ai-fab::before, .fab.ai-fab::after {
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background: conic-gradient(from 120deg, rgba(0,169,232,0), rgba(0,169,232,.55), rgba(111,63,245,.5), rgba(0,169,232,0));
  z-index:-2; opacity:.72; animation: aiHalo 3s linear infinite;
}
.fab.ai-fab::after { inset:-15px; opacity:.22; filter:blur(8px); animation-duration:4.6s; }
.ai-orb {
  position:absolute; inset:6px; border-radius:50%;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.34); overflow:hidden;
}
.ai-orb::before {
  content:""; position:absolute; width:120%; height:42%; left:-10%; top:-14%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(-18deg); animation: aiShine 4s ease-in-out infinite;
}
.ai-logo {
  position:absolute; left:50%; top:50%; width:30px; height:30px; object-fit:contain; z-index:2;
  transform: translate(-50%,-50%);
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,48,96,.28));
  opacity:.98; animation: aiBreath 2.6s ease-in-out infinite;
}
.fab.ai-fab:hover .ai-logo { animation: aiLogoWave .9s ease-in-out infinite; }
.ai-face { position:absolute; inset:0; z-index:3; pointer-events:none; }
.ai-eye {
  position:absolute; top:21px; width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px rgba(255,255,255,.85); animation: aiBlink 5.4s infinite;
}
.ai-eye.left { left:21px; } .ai-eye.right { right:21px; }
.ai-smile {
  position:absolute; left:50%; top:31px; width:18px; height:10px;
  border-bottom:3px solid #fff; border-radius:0 0 999px 999px; transform:translateX(-50%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5)); animation: aiSmile 3.8s ease-in-out infinite;
}
.ai-spark {
  position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.9), 0 0 20px rgba(0,169,232,.6); opacity:0; z-index:4;
}
.ai-spark.s1 { right:3px; top:8px;   animation: aiSparkle 2.8s ease-in-out infinite; }
.ai-spark.s2 { left:3px;  bottom:11px; animation: aiSparkle 2.8s ease-in-out infinite .9s; }
.ai-spark.s3 { right:11px; bottom:1px; animation: aiSparkle 2.8s ease-in-out infinite 1.7s; }
.ai-bubble {
  position:absolute; right:76px; bottom:6px; min-width:150px; padding:9px 12px;
  border-radius:18px 18px 6px 18px; background:rgba(255,255,255,.94);
  border:1px solid rgba(0,120,212,.16); box-shadow:0 16px 36px rgba(15,23,42,.14);
  color:#0f172a; font-size:12.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  opacity:0; transform:translateX(10px) scale(.96); pointer-events:none;
  animation: aiBubble 9s ease-in-out infinite;
}
.ai-bubble b { color:#0078d4; font-weight:700; }
.dark .ai-bubble { background:rgba(15,23,42,.95); color:#f1f5f9; border-color:rgba(255,255,255,.12); }
.dark .ai-bubble b { color:#60a5fa; }

@keyframes aiFloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes aiHalo    { to { transform:rotate(360deg) } }
@keyframes aiBreath  { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.08)} }
@keyframes aiLogoWave{ 0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1.05)} 50%{transform:translate(-50%,-50%) rotate(8deg) scale(1.12)} }
@keyframes aiShine   { 0%,60%,100%{transform:translateX(-80%) rotate(-18deg);opacity:.1} 74%{transform:translateX(80%) rotate(-18deg);opacity:.95} }
@keyframes aiBlink   { 0%,92%,100%{transform:scaleY(1)} 94%,96%{transform:scaleY(.14)} }
@keyframes aiSmile   { 0%,100%{transform:translateX(-50%) scaleX(1)} 50%{transform:translateX(-50%) scaleX(1.14)} }
@keyframes aiSparkle { 0%,100%{transform:scale(.2);opacity:0} 30%{transform:scale(1);opacity:.9} 60%{transform:scale(.45);opacity:.2} }
@keyframes aiBubble  { 0%,10%,100%{opacity:0;transform:translateX(10px) scale(.96)} 16%,42%{opacity:1;transform:translateX(0) scale(1)} 52%{opacity:0;transform:translateX(4px) scale(.98)} }
@media (prefers-reduced-motion: reduce) {
  .fab.ai-fab, .fab.ai-fab *, .fab.ai-fab::before, .fab.ai-fab::after { animation: none !important; }
  .ai-bubble { display:none; }
}

/* Sticky CTA görünürken cookie banner yukarı kaysın (DOM sırası: sticky-cta -> cookie-banner) */
.sticky-cta.visible ~ .cookie-banner {
  bottom: 100px;
}
@media (min-width: 768px) {
  .sticky-cta.visible ~ .cookie-banner { bottom: 90px; }
}

/* Sticky CTA görünürken FAB'ı yukarı kaldır */
.sticky-cta.visible ~ .fab-stack {
  bottom: 100px;
}
/* Cookie banner görünürken de FAB'ı yukarı kaldır */
.cookie-banner.visible ~ .fab-stack {
  bottom: 200px;
}
/* Hem sticky-cta hem cookie banner görünürken - toplam offset */
.sticky-cta.visible ~ .cookie-banner.visible ~ .fab-stack {
  bottom: 280px;
}
@media (min-width: 768px) {
  .cookie-banner.visible ~ .fab-stack { bottom: 160px; }
  .sticky-cta.visible ~ .fab-stack { bottom: 90px; }
  .sticky-cta.visible ~ .cookie-banner.visible ~ .fab-stack { bottom: 230px; }
}

/* Sticky CTA görünürken chat panel üstte olsun */
.sticky-cta.visible ~ .chat-panel {
  bottom: 170px;
}
.cookie-banner.visible ~ .chat-panel {
  bottom: 270px;
}
.sticky-cta.visible ~ .cookie-banner.visible ~ .chat-panel {
  bottom: 350px;
}

/* Mobilde daha küçük FAB ve daha az padding */
@media (max-width: 640px) {
  .fab-stack {
    bottom: 16px;
    right: 16px;
    gap: 10px;
  }
  .fab {
    width: 48px;
    height: 48px;
  }
  .fab svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================
   AI CHAT WIDGET (Copilot temalı)
   ============================================================ */
.chat-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 9985;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 30px 60px -10px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 640px) {
  .chat-panel {
    bottom: 78px;
    right: 16px;
    left: 16px;
    width: auto;
    height: min(560px, calc(100vh - 120px));
    border-radius: 18px;
  }
}
.dark .chat-panel { background: #0f172a; box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.6); }
.chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-header {
  background: linear-gradient(135deg, #2563eb 0%, #7e22ce 100%);
  color: #ffffff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header-avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.chat-avatar-orb { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.chat-avatar-orb::before {
  content: ""; position: absolute; width: 120%; height: 42%; left: -10%; top: -14%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(-18deg); animation: aiShine 4s ease-in-out infinite;
}
.chat-avatar-logo {
  position: relative; z-index: 1; width: 22px; height: 22px; object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,48,96,.3));
  animation: chatAvatarBreath 2.6s ease-in-out infinite;
}
@keyframes chatAvatarBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .chat-avatar-logo, .chat-avatar-orb::before { animation: none !important; }
}
.chat-header-title { font-weight: 800; font-size: 15px; }
.chat-header-sub   { font-size: 11px; opacity: 0.9; display: flex; align-items: center; gap: 6px; }
.chat-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
}
.chat-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  opacity: 0.8;
}
.chat-close:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dark .chat-body { background: #020617; }
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: chat-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chat-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg.bot {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  border-top-left-radius: 4px;
  align-self: flex-start;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.06);
}
.dark .chat-msg.bot { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.chat-msg.user {
  background: linear-gradient(135deg, #2563eb 0%, #7e22ce 100%);
  color: #ffffff;
  border-top-right-radius: 4px;
  align-self: flex-end;
}
/* Hazır sorular paneli - tek satır collapsed başlık, tıklanınca expand */
.chat-quick-wrap {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.dark .chat-quick-wrap { background: #020617; border-color: #1e293b; }
.chat-quick-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dark .chat-quick-toggle { color: #cbd5e1; }
.chat-quick-toggle:hover { background: rgba(37, 99, 235, 0.06); color: #1d4ed8; }
.dark .chat-quick-toggle:hover { background: rgba(96, 165, 250, 0.08); color: #93c5fd; }
.chat-quick-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chat-quick-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dark .chat-quick-count { background: #334155; color: #cbd5e1; }
.chat-quick-wrap.open .chat-quick-count { background: #2563eb; color: #ffffff; }
.dark .chat-quick-wrap.open .chat-quick-count { background: #60a5fa; color: #0f172a; }
.chat-quick-chev {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  opacity: 0.7;
}
.chat-quick-wrap.open .chat-quick-chev { transform: rotate(180deg); opacity: 1; }

.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              padding    0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity    0.25s ease;
}
.chat-quick-wrap.open .chat-quick {
  max-height: 220px;
  padding: 6px 14px 12px;
  opacity: 1;
  overflow-y: auto;
}
.chat-quick-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.dark .chat-quick-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.chat-quick-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.dark .chat-quick-btn:hover { border-color: #60a5fa; color: #93c5fd; background: #172554; }

@media (prefers-reduced-motion: reduce) {
  .chat-quick, .chat-quick-chev { transition: none; }
}
.chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 6px 0;
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* --- Serbest metin giriş satırı --- */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}
.dark .chat-input-row { background: #0f172a; border-color: #1e293b; }
.chat-input {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.chat-input::placeholder { color: #94a3b8; }
.chat-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.dark .chat-input { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.dark .chat-input:focus { background: #0b1220; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); }
.chat-send {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #7e22ce 100%);
  cursor: pointer;
  box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.chat-send:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 8px 18px -4px rgba(37, 99, 235, 0.65); }
.chat-send:active { transform: scale(0.94); }
.chat-send svg { transform: translateX(1px); }

/* --- İletişim kısayolları (alt şerit) --- */
.chat-footer {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
  background: #ffffff;
}
.dark .chat-footer { background: #0f172a; }
.chat-contact {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s ease;
}
.chat-contact svg { flex-shrink: 0; }
.chat-contact:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.dark .chat-contact { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.dark .chat-contact:hover { border-color: #60a5fa; color: #93c5fd; background: #172554; }
@media (max-width: 380px) {
  .chat-contact span { display: none; }
  .chat-contact { padding: 8px; }
}

/* ============================================================
   GERİ ARAMA WIDGET (callback modal)
   ============================================================ */
.callback-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.callback-overlay.open { opacity: 1; pointer-events: auto; }
.callback-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%);
  width: min(420px, calc(100vw - 32px));
  background: #ffffff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 40px 80px -10px rgba(15, 23, 42, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .callback-modal { background: #0f172a; color: #f1f5f9; }
.callback-overlay.open .callback-modal {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.callback-modal h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}
.callback-modal p { font-size: 13px; color: #64748b; margin-bottom: 18px; }
.dark .callback-modal p { color: #94a3b8; }
.callback-modal .field { margin-bottom: 12px; }
.callback-modal label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; color: #475569; }
.dark .callback-modal label { color: #cbd5e1; }
.callback-modal input,
.callback-modal select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}
.dark .callback-modal input,
.dark .callback-modal select { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.callback-modal input:focus,
.callback-modal select:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.callback-actions { display: flex; gap: 8px; margin-top: 8px; }
.callback-btn-primary {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.callback-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -4px rgba(5, 150, 105, 0.4); }
.callback-btn-cancel {
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  font-weight: 600;
}
.dark .callback-btn-cancel { color: #cbd5e1; border-color: #334155; }
.callback-success {
  text-align: center;
  padding: 12px 0;
}
.callback-success .check-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 12px;
}

/* ============================================================
   FORM SUBMIT - loading state (genel)
   ============================================================ */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.btn-loading > * { visibility: hidden; }
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin-top: -9px; margin-left: -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  visibility: visible;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   MARQUEE - fallback keyframe (assets/site.css üzerinden)
   index.html inline tailwind config'i de aynı isim kullanır.
   ============================================================ */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   KARİYER BAŞVURU MODALI (site.js wireApplyModal)
   ============================================================ */
.apply-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(2,6,23,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.apply-overlay.hidden { display: none; }
.apply-modal {
  background: #fff; border-radius: 20px; width: 100%; max-width: 540px;
  margin: 24px 0; box-shadow: 0 30px 60px -15px rgba(2,6,23,0.4);
  display: flex; flex-direction: column; animation: popIn .2s ease both;
}
.dark .apply-modal { background: #0f172a; border: 1px solid #1e293b; }
@keyframes popIn { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.apply-head { display:flex; align-items:center; justify-content:space-between; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; }
.dark .apply-head { border-color: #1e293b; }
.apply-head h3 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0; }
.dark .apply-head h3 { color: #f1f5f9; }
.apply-x { width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: #64748b; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; transition: background .15s; }
.apply-x:hover { background: #f1f5f9; } .dark .apply-x:hover { background: #1e293b; }
.apply-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.apply-posrow { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 10px 14px; font-size: 13px; color: #1e40af; }
.dark .apply-posrow { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93c5fd; }
.apply-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .apply-grid2 { grid-template-columns: 1fr; } }
.apply-body label { display:block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.dark .apply-body label { color: #cbd5e1; }
.apply-body input[type=text], .apply-body input[type=email], .apply-body input[type=tel], .apply-body input[type=url], .apply-body textarea {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: 12px; background: #f8fafc;
  border: 1px solid #e2e8f0; font-size: 14px; color: #0f172a; outline: none; transition: border-color .15s, box-shadow .15s;
}
.apply-body textarea { resize: vertical; }
.apply-body input:focus, .apply-body textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.dark .apply-body input, .dark .apply-body textarea { background: #1e293b; border-color: #334155; color: #f1f5f9; }
/* Dropzone */
.apply-drop { border: 2px dashed #cbd5e1; border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.apply-drop:hover, .apply-drop:focus-visible, .apply-drop.dragover { border-color: #3b82f6; background: #eff6ff; outline: none; }
.dark .apply-drop { border-color: #334155; } .dark .apply-drop:hover, .dark .apply-drop.dragover { border-color: #3b82f6; background: rgba(59,130,246,.08); }
.apply-drop-empty { display:flex; flex-direction:column; align-items:center; gap:6px; color:#64748b; }
.dark .apply-drop-empty { color:#94a3b8; }
.apply-drop-text strong { display:block; color:#0f172a; font-size:14px; } .dark .apply-drop-text strong { color:#f1f5f9; }
.apply-drop-text span { font-size:12px; }
.apply-drop-hint { font-size:11px; opacity:.8; }
.apply-drop-file { display:flex; align-items:center; gap:8px; justify-content:center; color:#0f172a; font-size:13px; font-weight:600; }
.dark .apply-drop-file { color:#f1f5f9; }
.apply-drop-file button { margin-left:4px; width:22px; height:22px; border-radius:6px; border:0; background:#fee2e2; color:#b91c1c; cursor:pointer; font-size:16px; line-height:1; }
.dark .apply-drop-file button { background: rgba(239,68,68,.2); color:#fca5a5; }
.apply-kvkk { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#64748b; font-weight:400; }
.dark .apply-kvkk { color:#94a3b8; }
.apply-kvkk input { margin-top:2px; }
.apply-msg { border-radius:12px; padding:10px 14px; font-size:13px; }
.apply-err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; } .dark .apply-err { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:#fca5a5; }
.apply-ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#047857; } .dark .apply-ok { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); color:#6ee7b7; }
.apply-foot { display:flex; align-items:center; gap:10px; padding: 18px 20px; border-top: 1px solid #e2e8f0; }
.dark .apply-foot { border-color:#1e293b; }
.apply-btn-ghost { margin-left:auto; padding: 0.65rem 1.1rem; border-radius: 12px; border:1px solid #cbd5e1; background:transparent; color:#475569; font-weight:600; font-size:14px; cursor:pointer; transition: background .15s; }
.apply-btn-ghost:hover { background:#f1f5f9; } .dark .apply-btn-ghost { border-color:#334155; color:#cbd5e1; } .dark .apply-btn-ghost:hover { background:#1e293b; }
.apply-btn-primary { display:inline-flex; align-items:center; gap:8px; padding: 0.65rem 1.25rem; border-radius: 12px; border:0; cursor:pointer; font-weight:700; font-size:14px; color:#fff; background: linear-gradient(135deg,#2563eb,#1d4ed8 55%,#7e22ce); box-shadow: 0 10px 20px -8px rgba(37,99,235,.5); transition: transform .15s, box-shadow .15s, opacity .15s; }
.apply-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -8px rgba(37,99,235,.6); }
.apply-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ============================================================
   GLOBAL reduced-motion koruması (sayfa-içi hero/dekoratif animasyonlar)
   ------------------------------------------------------------
   Sayfaların inline <style> bloklarındaki .hero-gradient / .page-hero
   gradient akışı, .blob float'ı ve Tailwind animate-* utility'leri
   hareket hassasiyeti olan kullanıcılarda + düşük cihazlarda durur.
   !important ile inline <style> kurallarını ezer (her sayfada yüklenir).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient, .dark .hero-gradient,
  .page-hero, .dark .page-hero,
  .blob,
  .animate-float, .animate-float-slow, .animate-fade-up, .animate-fade-in,
  .animate-gradient-shift, .animate-pulse-slow, .animate-marquee,
  .animate-orbit, .animate-shimmer, .animate-ping,
  .cowork-logo-wrap, .scout-logo-wrap, .arch-flow path {
    animation: none !important;
  }
  /* fade-up/fade-in animasyonu kapanınca içerik görünür kalsın (opacity'yi sıfırda bırakma) */
  .animate-fade-up, .animate-fade-in { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   LIGHTBOX (görsele tıklayınca büyütme)
   İçerik detay görselleri + Agent vitrini ekran görüntüleri.
   site.js wireLightbox() tarafından yönetilir.
   ============================================================ */
.lb-zoomable { cursor: zoom-in; }
.lb-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(2, 6, 23, 0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  opacity: 0; transition: opacity 0.25s ease;
}
.lb-overlay.open { opacity: 1; }
.lb-overlay img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96); transition: transform 0.25s ease;
}
.lb-overlay.open img { transform: scale(1); }
.lb-close {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; cursor: pointer;
  transition: background 0.2s ease;
}
.lb-close:hover { background: rgba(255, 255, 255, 0.24); }
@media (prefers-reduced-motion: reduce) {
  .lb-overlay, .lb-overlay img { transition: none; }
}