/* ═══════════════════════════════════════════════
   Home Page – Custom Styles (alongside Tailwind CDN)
   ═══════════════════════════════════════════════ */
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}

/* ── Keyframes ── */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.4)}50%{box-shadow:0 0 20px 6px rgba(212,175,55,.15)}}
@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Utility Animations ── */
.anim-float{animation:floatY 3s ease-in-out infinite}
.anim-float-d{animation:floatY 3.5s ease-in-out infinite .8s}
.anim-spin-slow{animation:spinSlow 8s linear infinite}
.anim-pulse-glow{animation:pulseGlow 2s ease-in-out infinite}

/* ── Hero Load Animations ── */
.hero-anim{animation:fadeInUp .8s ease forwards;opacity:0}
.hero-a1{animation-delay:0s}
.hero-a2{animation-delay:.1s}
.hero-a3{animation-delay:.3s}
.hero-a4{animation-delay:.45s}
.hero-a5{animation-delay:.6s}
.hero-a6{animation-delay:.75s}
.hero-right{animation:fadeInRight 1s ease .2s forwards;opacity:0}

/* ── Scroll Reveal ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
/* Mobilde yatay taşmayı önlemek için translateX yerine sadece opacity+translateY kullan */
@media(max-width:1023px){
  .rv-l{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .rv-l.in{opacity:1;transform:none}
  .rv-r{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .rv-r.in{opacity:1;transform:none}
}
@media(min-width:1024px){
  .rv-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease}
  .rv-l.in{opacity:1;transform:none}
  .rv-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease}
  .rv-r.in{opacity:1;transform:none}
}

/* ── Mobile Menu ── */
.mob-menu{transform:translateX(100%);transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none}
.mob-menu.open{transform:translateX(0);opacity:1;pointer-events:auto}

/* ── Modals ── */
.modal-overlay{opacity:0;pointer-events:none;transition:opacity .25s ease}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal-overlay .modal-content{transform:scale(.92) translateY(20px);transition:transform .3s ease,opacity .3s ease;opacity:0}
.modal-overlay.active .modal-content{transform:scale(1) translateY(0);opacity:1}

/* ── Carousel Slide ── */
.hm-slide{transition:transform .4s cubic-bezier(.25,.8,.25,1)}

/* ── Line Clamp ── */
.lc-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Timeline ── */
.tl-desc{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.tl-item.active .tl-desc{max-height:80px;opacity:1}

/* ── Nav underline hover ── */
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(to right,#D4AF37,#E8D5F2);transition:width .3s ease}
.nav-link:hover::after{width:100%}

/* ── Category Button Active ── */
.cat-btn.active{background:#1f2937;color:#fff;border-color:#1f2937;box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* ── Card Hover ── */
.svc-card:hover{box-shadow:0 20px 40px -10px var(--card-glow,rgba(0,0,0,.1));transform:translateY(-4px)}
.svc-card{transition:box-shadow .3s ease,transform .3s ease}

/* ── About Section Parallax Orbs ── */
.about-orb{transition:top .8s ease-out,left .8s ease-out,bottom .8s ease-out,right .8s ease-out}

/* ── Hero Underline ── */
.hero-uline{width:0;animation:expandWidth 1s ease .9s forwards}
@keyframes expandWidth{to{width:100%}}

/* ── Value card hover bg ── */
.val-card .val-hover{opacity:0;transition:opacity .3s ease}
.val-card:hover .val-hover{opacity:.6}
.val-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-4px)}
.val-card{transition:box-shadow .3s ease,transform .3s ease}