/* ============================================================
 *  Steroid Şikayetleri — Component & Animation Library
 * ============================================================ */

[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--brand-500); color: white; }

/* Scrollbar hide */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom thin scrollbar */
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
 *  GLOBAL ÖZEL SCROLLBAR — site renginde, admin'den ayarlanabilir kalınlık
 *  (Admin → Görünüm → "Scrollbar Kalınlığı"). Tarayıcı varsayılanının
 *  "kayık/ince" görünümünü düzeltir; forum tarzı belirgin, oranlı bir bar verir.
 *  Kalınlık değişkeni: --sb-width (header :root, varsayılan 14px).
 *  Thumb rengi: --brand-500 (site ana rengi).
 * ============================================================ */
html { scrollbar-width: auto; scrollbar-color: var(--brand-500, #6366f1) #eef1f6; }
::-webkit-scrollbar { width: var(--sb-width, 17px); height: var(--sb-width, 17px); }
::-webkit-scrollbar-track { background: #eef1f6; }
::-webkit-scrollbar-thumb {
  background: var(--brand-500, #6366f1);
  border-radius: 999px;
  border: 2px solid #eef1f6;           /* track ile ince boşluk → oranlı, yuvarlak thumb */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-600, #4f46e5); }
::-webkit-scrollbar-corner { background: #eef1f6; }
/* İnce scrollbar yardımcı sınıfları kendi stillerini korur (yukarıda) */
.scrollbar-thin::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar { border: 0; }

/* ============================================================
 *  Focus rings
 * ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 9999px;
}

/* ============================================================
 *  Pagination
 * ============================================================ */
.pagination ul {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  margin: 2.5rem 0 1rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.pagination li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.875rem;
  border-radius: 9999px;
  background: white;
  border: 2px solid #e2e8f0;
  color: #334155;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
}
.pagination li a:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(var(--brand-500-rgb),.3);
}
.pagination li.active a {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border-color: transparent;
  color: white;
  box-shadow: 0 12px 24px -8px rgba(var(--brand-500-rgb),.6);
}

/* ============================================================
 *  Prose / Article styles
 * ============================================================ */
/* ============================================================
 *  GLOBAL — TÜM GÖLGELER YASAK
 *  Nuke option: her elemente box-shadow:none, hover/focus/active/group dahil.
 *  Inline style="box-shadow:..." de !important ile ezilir.
 * ============================================================ */

* {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
*::before, *::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
*:hover, *:focus, *:active, *:focus-visible, *:focus-within {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* filter: drop-shadow(...) ve drop-shadow-* utility'leri */
*, *::before, *::after {
  --tw-shadow: 0 0 transparent;
  --tw-shadow-colored: 0 0 transparent;
  --tw-ring-shadow: 0 0 transparent;
  --tw-ring-offset-shadow: 0 0 transparent;
}

[class*="drop-shadow"] { filter: none !important; }

/* text-shadow */
* { text-shadow: none !important; }

/* Hover scale / translate / rotate efektleri (kaldırıldı) */
[class*="hover\:scale-"]:hover:not(.fx-keep) { transform: none !important; }
[class*="hover\:-translate"]:hover:not(.fx-keep),
[class*="hover\:translate"]:hover:not(.fx-keep) { transform: none !important; }
[class*="hover\:rotate"]:hover:not(.fx-keep) { transform: none !important; }
.group:hover [class*="group-hover\:scale"]:not(.fx-keep),
.group:hover [class*="group-hover\:-translate"]:not(.fx-keep),
.group:hover [class*="group-hover\:translate"]:not(.fx-keep),
.group:hover [class*="group-hover\:rotate"]:not(.fx-keep) { transform: none !important; }

/* "Card lift" benzeri özel sınıflar */
.card-lift, .card-lift:hover { transform: none !important; }

/* Float / pulse animasyonları kapat */
.animate-float-slow, .animate-float-soft, .animate-float { animation: none !important; }
.pulse-ring { animation: none !important; }

/* "shine" overlay efektini kapat */
.shine::before, .shine::after { display: none !important; }
.gradient-text { animation: none !important; }

.prose img {
  border-radius: 0.75rem;
  /* Şikayet içeriğindeki kullanıcı görselleri sayfayı kaplamasın —
     "sanki 3 yan yana varmış gibi" küçük tutuldu, lightbox ile büyür */
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-left: 0;
  margin-right: auto;
}
/* Masaüstünde her görsel sütunun ~1/3'i; tablette ~1/2; mobilde tam genişlik */
@media (min-width: 640px)  { .prose img { max-width: 50%; } }
@media (min-width: 1024px) { .prose img { max-width: 33%; } }

/* Birden çok img ardışıkta gelirse yan yana gridded görünsün */
.complaint-prose p:has(img):has(img + img) { display: flex; flex-wrap: wrap; gap: .75rem; }
.complaint-prose p:has(img):has(img + img) img { max-width: calc(33.333% - .5rem); margin: 0; }
.prose a { text-decoration: none; border-bottom: 1px solid currentColor; }
.prose blockquote {
  border-left: 4px solid var(--brand-500);
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  padding: 1.25rem 1.5rem;
  border-radius: 0 1rem 1rem 0;
  font-style: normal;
  margin: 1.5rem 0;
  color: #334155;
  box-shadow: 0 2px 8px rgba(var(--brand-500-rgb),.08);
}
.prose ul > li::marker, .prose ol > li::marker { color: var(--brand-500); }
.prose p { line-height: 1.75; }

/* ============================================================
 *  Animated gradient (h1 spans)
 * ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 35%, var(--brand-400) 70%, var(--brand-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ============================================================
 *  Card lift micro-interaction
 * ============================================================ */
.card-lift {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .25s;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(var(--brand-500-rgb),.22);
}

.card-tilt {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.card-tilt:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
}

/* ============================================================
 *  Floating shapes (hero decorations)
 * ============================================================ */
@keyframes float-soft {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-12px) rotate(2deg); }
  66%     { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes float-slow {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-10px,-20px) scale(1.05); }
}
.animate-float-soft { animation: float-soft 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 12s ease-in-out infinite; }

/* Pulse rings */
@keyframes pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.7; }
  70%  { transform: scale(1.3);  opacity: 0; }
  100% { transform: scale(1.3);  opacity: 0; }
}
.pulse-ring { animation: pulse-ring 2.5s cubic-bezier(0,0,.2,1) infinite; }

/* ============================================================
 *  Shimmer (skeleton + featured highlights)
 * ============================================================ */
.shimmer {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 800px 100%;
  animation: shimmer-move 2.4s linear infinite;
}
@keyframes shimmer-move {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s;
}
.shine:hover::after { transform: translateX(100%); }

/* ============================================================
 *  Glass morphism
 * ============================================================ */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
 *  Progress bar (linear)
 * ============================================================ */
.progress-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.progress-bar > .progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.progress-bar > .progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: progress-shine 2.4s linear infinite;
}
@keyframes progress-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.progress-fill-green { background: linear-gradient(90deg, #10b981, #34d399); }
.progress-fill-amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-fill-rose  { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ============================================================
 *  Circular progress (SVG)
 * ============================================================ */
.circular-progress {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}
.circular-progress circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.circular-progress .bg { stroke: #f1f5f9; }
.circular-progress .fg {
  stroke: var(--brand-500);
  transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
 *  Tag chip
 * ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #f1f5f9;
  color: #475569;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  border: 1px solid transparent;
}
.chip:hover {
  background: var(--brand-50);
  color: var(--brand-500);
  border-color: var(--brand-200);
  transform: translateY(-1px);
}

/* ============================================================
 *  Carousel arrows
 * ============================================================ */
.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: white;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.carousel-arrow:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-500);
  transform: scale(1.05);
}

/* ============================================================
 *  Section spacing utilities
 * ============================================================ */
section { scroll-margin-top: 90px; }

/* ============================================================
 *  Reveal on scroll (override AOS for finer control)
 * ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ============================================================
 *  Animated underline (links)
 * ============================================================ */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================================================
 *  Background patterns
 * ============================================================ */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(var(--brand-500-rgb),.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--brand-500-rgb),.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.bg-dots {
  background-image: radial-gradient(circle, rgba(var(--brand-500-rgb),.15) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
.bg-diagonal {
  background-image: repeating-linear-gradient(45deg, rgba(var(--brand-500-rgb),.05) 0, rgba(var(--brand-500-rgb),.05) 1px, transparent 0, transparent 10px);
}

/* ============================================================
 *  Brand comparison row
 * ============================================================ */
.brand-row {
  display: grid;
  grid-template-columns: 50px minmax(180px, 2fr) 100px 100px 1fr 80px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: white;
  border-bottom: 1px solid #f1f5f9;
  transition: background .2s, transform .2s;
}
.brand-row:hover {
  background: #fafbff;
  transform: translateX(2px);
}
.brand-row:last-child { border-bottom: none; }

/* ============================================================
 *  Ripple effect (buttons)
 * ============================================================ */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: translate(-50%, -50%);
  transition: width .6s ease-out, height .6s ease-out;
}
.btn-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ============================================================
 *  Animated bounce (typing indicator etc)
 * ============================================================ */
@keyframes bounce-dot {
  0%,80%,100% { transform: translateY(0); opacity: .5; }
  40%         { transform: translateY(-5px); opacity: 1; }
}
.bounce-dot { animation: bounce-dot 1.4s ease-in-out infinite; }
.bounce-dot:nth-child(2) { animation-delay: .15s; }
.bounce-dot:nth-child(3) { animation-delay: .3s; }

/* ============================================================
 *  Reading progress bar (top of article)
 * ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400), var(--brand-300));
  width: 0;
  z-index: 60;
  transition: width .15s ease-out;
}

/* ============================================================
 *  Notification toast
 * ============================================================ */
.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 12px 24px -8px rgba(15,23,42,.15);
  border: 1px solid #e2e8f0;
  animation: toast-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
 *  Star rating
 * ============================================================ */
.stars { display: inline-flex; gap: 2px; color: #fbbf24; }
.stars .star-empty { color: #e2e8f0; }

/* ============================================================
 *  Avatar group
 * ============================================================ */
.avatar-stack {
  display: inline-flex;
}
.avatar-stack > * {
  border: 2px solid white;
  margin-left: -8px;
  transition: transform .25s, z-index 0s;
}
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-stack > *:hover {
  transform: translateY(-3px) scale(1.1);
  z-index: 10;
}

/* ============================================================
 *  Skeleton blocks
 * ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 800px 100%;
  animation: shimmer-move 1.8s linear infinite;
  border-radius: 6px;
}

/* ============================================================
 *  Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
 *  Container gap utility
 * ============================================================ */
.grid { gap: clamp(0.75rem, 2vw, 1.25rem); }
.grid.gap-tight  { gap: 0.5rem; }
.grid.gap-loose  { gap: 2rem; }
.grid.gap-xl     { gap: 2.5rem; }

/* ============================================================
 *  Solid color cards (for category gradient bg)
 * ============================================================ */
.bg-soft-brand   { background: linear-gradient(135deg, var(--brand-50), var(--brand-100)); }
.bg-soft-accent  { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.bg-soft-amber   { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.bg-soft-rose    { background: linear-gradient(135deg, #ffe4e6, #fecdd3); }
.bg-soft-sky     { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }

/* ============================================================
 *  Lightbox — fullscreen image viewer
 * ============================================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 22, 0.98); /* opak koyu — arkadaki açık sayfa sızmasın, sadece görsel öne çıksın (backdrop-filter blur'u beyaz sayfayı yansıtıp açık gösteriyordu, kaldırıldı) */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* mobile-nav, modal, alpine store vs hepsinin üstünde olsun */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding: 24px;
}
.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Görsel sarmalayıcı tıklamayı yutmasın — overlay click handler çalışsın */
.lightbox-img-wrap {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img-wrap .lightbox-img {
  pointer-events: auto; /* görselin kendisi tıklanabilir kalır */
}
/* Buton ve nav'lar her zaman üstte ve tıklanabilir */
.lightbox-controls,
.lightbox-nav,
.lightbox-counter,
.lightbox-caption {
  z-index: 10001;
  pointer-events: auto;
}
.lightbox-btn,
.lightbox-nav {
  position: relative;
  z-index: 10002;
  pointer-events: auto !important;
  cursor: pointer !important;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.lightbox-overlay:not(.is-open) .lightbox-img {
  transform: scale(.92);
}
.lightbox-controls {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
}
.lightbox-btn {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9999px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  backdrop-filter: blur(10px);
}
.lightbox-btn:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.05);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9999px;
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  backdrop-filter: blur(10px);
}
.lightbox-nav:hover {
  background: rgba(255,255,255,.2);
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-counter {
  position: absolute;
  top: 24px;
  left: 24px;
  color: white;
  font-weight: 600;
  font-size: 13px;
  background: rgba(255,255,255,.1);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  letter-spacing: 0.02em;
}
.lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,.55);
  padding: 8px 18px;
  border-radius: 12px;
  max-width: min(80vw, 600px);
  font-size: 14px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(9, 12, 22, 0.98); /* içerik alanı koyu kalsın — şeffafken arkadaki beyaz sayfayı yansıtıyordu (garip açık zemin) */
}
/* Güvenlik ağı: footer.php'deki kırık-görsel placeholder sistemi lightbox'a sızarsa
   wrap'e eklenen açık gradient + fa-image ikonunu iptal et; görsel görünür kalsın.
   (Kök neden footer.php attachHandlers'ta lightbox görsellerinin hariç tutulmasıyla giderildi.) */
.lightbox-overlay .img-fallback-wrap { background: rgba(9, 12, 22, 0.98) !important; }
.lightbox-overlay .img-fallback-wrap::before { display: none !important; }
.lightbox-overlay img[data-broken="1"],
.lightbox-overlay .lightbox-img { visibility: visible !important; }
.lightbox-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: white;
  border-radius: 50%;
  animation: lightbox-spin 0.8s linear infinite;
  opacity: 0;
  transition: opacity .2s;
}
.lightbox-loading.is-visible { opacity: 1; }
@keyframes lightbox-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-img { max-width: 96vw; max-height: 78vh; }
}

/* ============================================================
 *  Letter-by-letter heading reveal
 * ============================================================ */
.letter-reveal { display: inline-block; }
.letter-reveal .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotateX(-90deg);
  animation: letter-in .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes letter-in {
  to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

/* ============================================================
 *  Ken Burns image effect
 * ============================================================ */
.ken-burns {
  overflow: hidden;
}
.ken-burns img {
  transition: transform 8s ease-out;
}
.ken-burns:hover img, .ken-burns.is-visible img {
  transform: scale(1.08);
}

/* ============================================================
 *  Smooth section divider
 * ============================================================ */
.section-divider {
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--brand-50) 50%, transparent);
  pointer-events: none;
}

/* ============================================================
 *  Scroll-snap optional carousels
 * ============================================================ */
.snap-x.scrollbar-hide { scroll-snap-type: x mandatory; scroll-padding: 1rem; }
.snap-x.scrollbar-hide > * { scroll-snap-align: start; }

/* ============================================================
 *  Spotlight follow cursor (subtle hover light)
 * ============================================================ */
.spotlight {
  position: relative;
  overflow: hidden;
}
.spotlight::before {
  content: '';
  position: absolute;
  top: var(--mx, 50%);
  left: var(--my, 50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.spotlight:hover::before { opacity: 1; }

/* ============================================================
 *  Pulsing dot (live status)
 * ============================================================ */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #10b981;
  border-radius: 50%;
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #10b981;
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============================================================
 *  GSAP effects layer — custom cursor, glow, scrolled header
 * ============================================================ */

/* GSAP split-word wrappers */
.gs-word { line-height: inherit; }
.gs-word-inner { transform-origin: 50% 100%; }

/* Glow-enter section */
[data-glow-enter] {
  position: relative;
  isolation: isolate;
}
[data-glow-enter]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),
    rgba(var(--brand-500-rgb), calc(0.08 * var(--glow-opacity,0))) 0%,
    transparent 55%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .4s;
}

/* Sticky header scrolled state */
header.is-scrolled {
  background: rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 6px 24px -8px rgba(15,23,42,.12);
  border-bottom-color: rgba(15,23,42,.05);
}

/* Card hover-lift glow */
[data-hover-lift] {
  transition: box-shadow .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
[data-hover-lift]:hover {
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.18),
              0 8px 16px -8px rgba(225,29,72,.15);
}

/* Marquee-gsap (smoother) */
[data-marquee-gsap] { will-change: transform; }

/* Reveal-mask preset */
[data-reveal-mask] {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  will-change: clip-path, opacity;
}

/* Pinned scroll items default state */
[data-pin-item] { will-change: transform, opacity; }

/* Subtle parallax depth helpers */
[data-depth] { will-change: transform; }

/* Print styles */
@media print {
  header, footer, .scrollTop, button, .pagination, aside { display: none !important; }
  main { padding: 0; }
  a { color: black; text-decoration: underline; }
}

/* Smooth fonts on Windows */
@supports (-webkit-text-stroke: 0.4px) {
  body { -webkit-text-stroke: 0.4px; }
}