/* Westonya 3D — sayfa katmanı: animasyonlar, hover durumları, responsive.
   Tasarım token'ları styles.css (Nocturne) içindedir. */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }
h1, h2, h3, h4, p { margin: 0; }

@keyframes om-glow { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .55 } 50% { transform: translate3d(0,-28px,0) scale(1.12); opacity: .85 } }
@keyframes om-scan { 0% { transform: translateY(-6%) } 100% { transform: translateY(106%) } }
@keyframes om-layer { 0% { transform: scaleX(.06); opacity: 0 } 12% { opacity: 1 } 60%,100% { transform: scaleX(1); opacity: 1 } }
@keyframes om-marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes om-spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }
@keyframes om-nudge { 0%,100% { transform: translateX(0) } 50% { transform: translateX(5px) } }
@keyframes om-blink { 0%,45% { opacity: 1 } 55%,100% { opacity: .15 } }
@keyframes om-shimmer { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }
@keyframes om-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes om-rise { 0% { transform: translateY(120%); opacity: 0 } 20% { opacity: .9 } 100% { transform: translateY(-140%); opacity: 0 } }

/* Hover durumları (prototipteki style-hover karşılıkları) */
.hov-link { text-decoration: none; color: var(--color-neutral-300); transition: color .18s ease; }
.hov-link:hover { color: var(--color-accent-300); }
.hov-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hov-lift:hover { transform: translateY(-2px); box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 38%, transparent); }
.hov-card { transition: transform .22s ease, box-shadow .22s ease; }
.hov-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hov-card3 { transition: transform .22s ease; }
.hov-card3:hover { transform: translateY(-3px); }
.hov-scale { transition: transform .3s ease; }
.hov-scale:hover { transform: scale(1.015); }

.dropzone { transition: border-color .2s ease, background .2s ease; }
.dropzone:hover, .dropzone.drag { border-color: var(--color-accent-500); background: color-mix(in srgb, var(--color-accent-900) 35%, transparent); }

/* Görsel yuvası: assets/<id>.jpg|png|webp bulunursa gösterilir, yoksa yer tutucu */
.img-slot { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--color-surface) 85%, transparent), var(--color-bg));
  border: 1px solid var(--color-divider); }
.img-slot img { width: 100%; height: 100%; object-fit: cover; display: none; }
.img-slot.loaded img { display: block; }
.img-slot .ph { padding: 16px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--color-neutral-600); max-width: 30ch; }
.img-slot.loaded .ph { display: none; }

/* Mobil menü */
#mobileMenu { display: none; }
#mobileMenu.open { display: flex; }
.mobile-only { display: none !important; }

[data-reveal] { opacity: 1; }

@media (max-width: 1000px) {
  .grid-2, .grid-3, .grid-4, .hero-grid, .g-uc, .g-hesap, .g-teklif, .g-iletisim { grid-template-columns: 1fr !important; }
  .span2 { grid-column: auto !important; }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  header nav { gap: 12px !important; }
  header nav a.nav-txt { display: none; }
  .mobile-only { display: inline-flex !important; }
  h1 { font-size: 40px !important; line-height: 1.06 !important; }
  h2 { font-size: 30px !important; }
  h3 { font-size: 21px !important; }
  .pad-hero { padding: 40px 20px 48px !important; }
  .pad-sec { padding: 48px 20px !important; }
  .ta-right { text-align: left !important; }
  table.table { display: block; overflow-x: auto; white-space: nowrap; font-size: 13px; }
  iframe[title] { min-height: 300px !important; }
  .img-slot { height: auto !important; aspect-ratio: 16 / 10; max-height: 240px; }
}
@media (max-width: 620px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
  .stat-num { font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}