.hero { position: relative; width: 100%; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 2em; }
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero-img video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%); z-index: 1; }
.hero-content { position: relative; width: 100%; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25em; }
.hero-header { width: 100%; display: flex; justify-content: center; gap: 0.5em; }
.hero-header h1 { color: var(--bg); line-height: 1; }
.hero-dot { color: var(--primary-light); }
.hero-tag { font-family: "Onest", sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-light); background: rgba(108,92,231,0.15); padding: 0.5em 1em; border-radius: 2em; width: max-content; backdrop-filter: blur(4px); }
.hero-sub { font-family: "Onest", sans-serif; font-size: 1rem; line-height: 1.6; color: #fff; text-transform: none; max-width: 500px; }
.hero-btns { display: flex; gap: 0.75em; }
.hero-btn-primary { background: var(--primary) !important; color: #fff !important; font-size: 0.8rem !important; padding: 0.9em 1.8em !important; }
.hero-btn-primary:hover { background: #5a4bd1 !important; box-shadow: 0 4px 20px rgba(108,92,231,0.4); }
.hero-btn-outline { background: transparent !important; color: var(--bg) !important; border: 1px solid rgba(227,227,219,0.3) !important; font-size: 0.8rem !important; padding: 0.9em 1.8em !important; }
.hero-btn-outline:hover { border-color: var(--bg) !important; }

.sticky-titles { position: relative; width: 100%; height: 100svh; overflow: hidden; padding: 2em; display: flex; flex-direction: column; justify-content: space-between; }
.sticky-titles-nav, .sticky-titles-footer { width: 100%; display: flex; justify-content: space-between; }
.sticky-titles-nav { border-bottom: 1px dashed var(--fg); padding-bottom: 0.5em; }
.sticky-titles-footer { border-top: 1px dashed var(--fg); padding-top: 0.5em; }
.sticky-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; will-change: transform, opacity; width: 80%; }

.sticky-work-header { position: relative; width: 100%; height: 100svh; padding: 2em; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.sticky-work-header h1 { opacity: 0.125; line-height: 1; }

.home-work { width: 100%; padding: 8em 2em; }
.home-work-list { width: 40%; margin: 0 auto; display: flex; flex-direction: column; gap: 8em; }
.home-work-item { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2em; transition: transform 0.3s; }
.home-work-item:hover { transform: scale(1.02); }
.home-work-item .service-desc { font-family: "Onest", sans-serif; font-size: 1.1rem; line-height: 1.7; text-transform: none; max-width: 90%; opacity: 1; color: var(--fg); }
.home-work-item .btn { margin-top: 0.5em; }

/* ── Öne Çıkan Ürünler ── */
.fp { padding: 6em 0; }
.fp-header { text-align: center; margin-bottom: 3em; display: flex; flex-direction: column; align-items: center; gap: 1em; }

.hobbies { width: 100%; padding: 2em; padding-bottom: 0; display: flex; gap: 1em; }
.hobby { flex: 1; display: flex; justify-content: center; align-items: center; text-align: center; aspect-ratio: 1; border: 1px dashed var(--fg); border-radius: 1em; transition: border-color 0.3s, background-color 0.3s; }
.hobby:hover { border-color: var(--primary); background-color: rgba(108, 92, 231, 0.05); }

@media (max-width: 1000px) {
  .hero, .sticky-titles, .sticky-work-header, .hobbies { padding: 1.25em; }
  .hero-header { flex-direction: row; gap: 0.3em; justify-content: center; }
  .hero-sub { font-size: 0.85rem; }
  .hero-btns { flex-direction: column; width: 100%; }
  .hero-btns .btn { width: 100%; text-align: center; }
  .sticky-title { width: 90%; }
  .hobbies { padding-bottom: 0; flex-direction: column; gap: 1.25em; }
  .hobby { aspect-ratio: 5/3; }
  .home-work { padding: 8em 1.25em; }
  .home-work-list { width: 100%; }
  .fp { padding: 4em 0; }
  .fp .shop-grid { padding: 0 1.25em 2em; grid-template-columns: repeat(2, 1fr); gap: 0.75em; }
}