/* =========================================================
   AL-PROMO — animacione dhe komponentë shtesë
   (dizajni bazë vjen nga tailwind.css, i njëjti me projektin origjinal)
   ========================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
html { scroll-padding-top: 5.5rem; }
img { max-width: 100%; }

/* ---------- Scroll progress ---------- */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ff6600, #ff8533); z-index: 100; pointer-events: none; }

/* ---------- Reveal on scroll ---------- */
html.js [data-reveal] { opacity: 0; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
html.js [data-reveal="up"] { transform: translateY(32px); }
html.js [data-reveal="left"] { transform: translateX(-40px); }
html.js [data-reveal="right"] { transform: translateX(40px); }
html.js [data-reveal="zoom"] { transform: scale(.94); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
html.js [data-reveal][data-delay="1"] { transition-delay: .09s; }
html.js [data-reveal][data-delay="2"] { transition-delay: .18s; }
html.js [data-reveal][data-delay="3"] { transition-delay: .27s; }
html.js [data-reveal][data-delay="4"] { transition-delay: .36s; }
html.js [data-reveal][data-delay="5"] { transition-delay: .45s; }
/* pas hyrjes, kartat marrin transition-in e hover-it */
html.js [data-reveal].is-visible.card-lift, html.js [data-reveal].is-visible.pkg-card { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), translate .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s; transition-delay: 0s; }

/* ---------- Header ---------- */
.site-header { transition: transform .4s var(--ease-out), background-color .3s, box-shadow .3s, border-color .3s; }
.site-header.is-scrolled { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(226,232,240,.8); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .logo-link img { transition: transform .35s var(--ease-out); }
.site-header .logo-link:hover img { transform: scale(1.05) rotate(-1deg); }
.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: #ff6600; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.mobile-menu { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease-out), visibility .4s; }
.mobile-menu > nav { overflow: hidden; min-height: 0; padding-top: 0; padding-bottom: 0; }
.mobile-menu.is-open { grid-template-rows: 1fr; visibility: visible; }
.mobile-menu.is-open > nav { padding-top: 1rem; padding-bottom: 1rem; }
.mm-item { opacity: 0; transform: translateX(-14px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background-color .2s; transition-delay: calc(var(--i, 0) * 40ms); }
.mobile-menu.is-open .mm-item { opacity: 1; transform: none; }

/* ---------- Butona ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .25s, color .25s, border-color .25s, box-shadow .3s var(--ease-out), translate .3s var(--ease-out), transform .2s; }
.btn-lift:hover { translate: 0 -3px; box-shadow: 0 12px 24px -8px rgba(8,38,77,.35); }
.btn:active { transform: scale(.97); }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .7s var(--ease-out); z-index: -1; pointer-events: none; }
.btn-shine:hover::after { left: 130%; }
.btn .btn-arrow, .btn svg { transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(5px); }
.btn-pulse { animation: btnPulse 2.8s ease-in-out infinite; }
.btn-pulse:hover { animation: none; }
@keyframes btnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,102,0,.45); } 50% { box-shadow: 0 0 0 10px rgba(255,102,0,0); } }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: ripple .6s linear; pointer-events: none; z-index: 0; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.arrow-link .arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.arrow-link:hover .arrow, .group:hover .arrow-link .arrow { transform: translateX(5px); }
.back-link svg { transition: transform .3s var(--ease-out); }
.back-link:hover svg { transform: translateX(-4px); }
.social-btn { transition: transform .3s var(--ease-out), background-color .25s, color .25s; }
.social-btn:hover { transform: translateY(-4px) scale(1.1) rotate(-4deg); }
.foot-link { display: inline-block; transition: transform .25s var(--ease-out), color .2s; }
.foot-link:hover { transform: translateX(4px); }

/* ---------- Karta ---------- */
.card-lift { display: block; transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s; }
.card-lift:hover { translate: 0 -6px; }
.tile-pop { transition: translate .3s var(--ease-out), box-shadow .3s; }
.tile-pop:hover { translate: 0 -5px; }
.pkg-card { transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.pkg-card:hover { translate: 0 -8px; box-shadow: 0 25px 50px -12px rgba(8,38,77,.22); }
.pkg-featured { animation: featuredGlow 3.5s ease-in-out infinite; }
@keyframes featuredGlow { 0%,100% { box-shadow: 0 20px 40px -15px rgba(255,102,0,.25); } 50% { box-shadow: 0 25px 55px -12px rgba(255,102,0,.4); } }
.svc-card { transition: translate .35s var(--ease-out), box-shadow .35s, border-color .3s; }
.svc-card:hover { translate: 0 -6px; }
.svc-icon { transition: transform .5s var(--ease-out), background-color .3s; }
.svc-card:hover .svc-icon { transform: rotate(-8deg) scale(1.12); }
.step-card .step-num { display: inline-block; transition: transform .4s var(--ease-out), color .3s; }
.step-card:hover .step-num { transform: scale(1.18) translateX(6px); color: rgba(255,102,0,.4); }
.step-badge { transition: transform .4s var(--ease-out), background-color .3s; }
[data-reveal]:hover > .step-badge, .step-badge:hover { transform: scale(1.1) rotate(-6deg); background: #ff6600; }

/* ---------- Hero ---------- */
.hero .blob-a { animation: drift 14s ease-in-out infinite alternate; }
.hero .blob-b, .blob-b { animation: drift 18s ease-in-out infinite alternate-reverse; }
.blob-a { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px, 30px) scale(1.12); } }
.float-slow { animation: floaty 6s ease-in-out infinite; }
.float-slow-2 { animation: floaty 7.5s ease-in-out infinite reverse; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
.spin-slow { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-shimmer { background: linear-gradient(100deg, #ff6600 20%, #ffa160 45%, #ff6600 70%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmerText 5s linear infinite; }
@keyframes shimmerText { to { background-position: 200% center; } }
[data-parallax] { transition: transform .15s linear; will-change: transform; }

/* ---------- FAQ ---------- */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-a > div { overflow: hidden; min-height: 0; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-chev { transform: rotate(180deg); color: #ff6600; }

/* ---------- Filtra ---------- */
.chip { transition: background-color .25s, color .25s, transform .25s var(--ease-out); }
.chip:hover { transform: translateY(-2px); }
.chip.is-on { box-shadow: 0 6px 14px -6px rgba(8,38,77,.5); }
.filter-item { animation: filterIn .5s var(--ease-out) both; }
.filter-item.is-hidden { display: none !important; }
@keyframes filterIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Floating ---------- */
.wa-fab { animation: waRing 2.6s ease-out infinite; }
@keyframes waRing { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.to-top { opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; transition: opacity .3s, transform .3s var(--ease-out), background-color .2s; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #ff6600; transform: translateY(-4px); }
.cookie-banner.is-shown { display: block; animation: slideUp .6s var(--ease-out) both; }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Forma ---------- */
.field { background: #fff; }
.field:focus { border-color: #ff6600; box-shadow: 0 0 0 3px rgba(255,102,0,.15); }
.select-field { -webkit-appearance: none; appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
.check { accent-color: #08264d; }
.shake { animation: shake .5s; }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }
.success-pop { animation: pop .6s var(--ease-out) both; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.is-loading .send-ico { animation: sendFly .9s ease-in-out infinite; }
@keyframes sendFly { 0% { transform: translate(0,0); } 50% { transform: translate(8px,-6px); opacity: .4; } 100% { transform: translate(0,0); } }

/* ---------- Artikulli ---------- */
.article-body { color: #334155; line-height: 1.8; font-size: 1.0625rem; }
.article-body > * + * { margin-top: 1.1rem; }
.article-body h2, .article-body h3, .article-body h4 { color: #08264d; font-weight: 800; line-height: 1.25; margin-top: 2rem; }
.article-body h2 { font-size: 1.75rem; } .article-body h3 { font-size: 1.35rem; } .article-body h4 { font-size: 1.15rem; }
.article-body a { color: #ff6600; text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: #e65c00; }
.article-body ul, .article-body ol { padding-left: 1.5rem; } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; }
.article-body li + li { margin-top: .4rem; }
.article-body blockquote { border-left: 4px solid #ff6600; background: #fff7f0; padding: .9rem 1.2rem; border-radius: 0 .75rem .75rem 0; color: #475569; font-style: italic; }
.article-body img { border-radius: 1rem; margin: 1.5rem 0; }
.article-body code { background: #f1f5f9; padding: .1rem .4rem; border-radius: .35rem; font-size: .9em; }
.article-body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0; }

/* ---------- Admin ---------- */
.stat-card { animation: statIn .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); transition: translate .3s var(--ease-out), box-shadow .3s; }
.stat-card:hover { translate: 0 -4px; box-shadow: 0 12px 24px -10px rgba(8,38,77,.25); }
@keyframes statIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.admin-nav { transition: background-color .2s, transform .25s var(--ease-out); } .admin-nav:hover { transform: translateX(4px); }
.modal-bg { animation: fadeIn .25s both; } .modal-card { animation: pop .35s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-bg { background: radial-gradient(circle at 15% 20%, rgba(255,102,0,.12), transparent 40%), radial-gradient(circle at 85% 80%, rgba(8,38,77,.12), transparent 45%), #f1f5f9; }
.login-card { animation: floatUp .8s var(--ease-out) both; }
.flash { animation: slideDown .4s var(--ease-out) both; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.admin-body tbody tr { transition: background-color .15s; }

/* ---------- Respekto reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}