/* ───────────────────────────────────────────────────────────
   Hicret — PHP portu için ek davranış stilleri
   (Tailwind compiled CSS'i tamamlar; motion/JS yerine CSS)
   ─────────────────────────────────────────────────────────── */

/* ── Header scroll durumu ── */
#site-header { top: 1rem; transition: top .5s cubic-bezier(.22,1,.36,1); }
#site-header.scrolled { top: .5rem; }
#site-header .pill { transition: box-shadow .5s, border-color .5s; }
#site-header.scrolled .pill {
  box-shadow: 0 25px 50px -12px rgba(29,39,21,.12);
}

/* ── Masaüstü dropdown / mega menü ── */
.nav-item > .nav-pop {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%) translateY(-8px);
  padding-top: .75rem; z-index: 50;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.nav-item:hover > .nav-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-item:hover > a .nav-underline { transform: scaleX(1); }
.nav-item:hover > a .nav-chev { transform: rotate(180deg); }

/* ── Mobil çekmece ── */
#mobile-overlay { opacity: 0; visibility: hidden; transition: opacity .3s; }
#mobile-overlay.open { opacity: 1; visibility: visible; }
#mobile-drawer { transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); }
#mobile-drawer.open { transform: translateX(0); }
body.menu-open { overflow: hidden; }

/* ── Scroll-reveal (JS yoksa görünür kalır) ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.no-js .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ── WhatsApp yüzen buton ── */
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; }
.wa-float a {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 28px -6px rgba(37,211,102,.55);
  transition: transform .3s, box-shadow .3s;
}
.wa-float a:hover { transform: scale(1.08) translateY(-2px); }
.wa-float .wa-pulse { position:absolute; inset:0; border-radius:9999px; background:#25D366; opacity:.45; animation: wa-pulse 2.2s ease-out infinite; z-index:-1; }
@keyframes wa-pulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.8);opacity:0} }

/* ── Richtext (ürün/blog içerik) ── */
.prose-hicret { color: var(--color-brand-800, #28341b); line-height: 1.75; }
.prose-hicret p { margin: 0 0 1rem; }
.prose-hicret h2,.prose-hicret h3,.prose-hicret h4 { margin: 1.6rem 0 .6rem; }
.prose-hicret ul,.prose-hicret ol { margin: 0 0 1rem 1.25rem; }
.prose-hicret ul { list-style: disc; }
.prose-hicret ol { list-style: decimal; }
.prose-hicret li { margin: .25rem 0; }
.prose-hicret a { color: var(--color-brand-600,#3f5328); text-decoration: underline; }
.prose-hicret blockquote { border-left: 3px solid var(--color-accent-400,#c8a52d); padding-left: 1rem; font-style: italic; color: var(--color-brand-700,#324120); margin: 1rem 0; }
.prose-hicret strong { font-weight: 700; }

/* Yatay kaydırma scrollbar gizle (zaten site.css'te var ama garanti) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Yorum yığını: tüm slide'lar aynı hücrede üst üste → kutu en uzun yoruma göre boyutlanır (taşma yok) ── */
.testimonial-stack { display: grid; }
.testimonial-stack > .testimonial-slide { grid-area: 1 / 1; }

/* ── size-full (Tailwind v4 'size-*' derlenmiş CSS'te yok — telafi) ── */
.size-full { width: 100%; height: 100%; }

/* ── Kategori şeridi (otomatik dönüşüm) ── */
.cat-card { width: min(280px, 50vw); transition: width .7s cubic-bezier(.22,1,.36,1); }
.cat-card.active { width: min(560px, 75vw); }
.cat-card .cat-overlay { opacity: .65; transition: opacity .5s; }
.cat-card.active .cat-overlay { opacity: .35; }
.cat-card .cat-title { font-size: 1.25rem; line-height: 1.1; transition: font-size .5s; }
@media (min-width:640px){ .cat-card .cat-title { font-size: 1.5rem; } }
.cat-card.active .cat-title { font-size: 1.875rem; }
@media (min-width:640px){ .cat-card.active .cat-title { font-size: 2.25rem; } }
@media (min-width:1024px){ .cat-card.active .cat-title { font-size: 3rem; } }
.cat-card .cat-extra { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s; }
.cat-card.active .cat-extra { opacity: 1; max-height: 40px; }
.cat-card .cat-badge { opacity: 0; transition: opacity .4s; }
.cat-card.active .cat-badge { opacity: 1; }
.cat-card .cat-arrow { width: 2.5rem; height: 2.5rem; transition: all .4s; }
.cat-card.active .cat-arrow { width: 3rem; height: 3rem; }

/* ── Ürün yelpazesi (fan) hover ── */
.fan-card { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; }
.fan-card:hover { transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(1.09); z-index: 99 !important; }

/* Embla benzeri basit yatay snap */
.h-snap { scroll-snap-type: x mandatory; }
.h-snap > * { scroll-snap-align: start; }

/* ── 404 sayfası ── */
.nf-bg { background: linear-gradient(to bottom, var(--color-cream-50) 0%, var(--color-cream-100) 55%, rgba(229,227,220,.6) 100%); }
.nf-watermark { font-size: 34vw; line-height: 1; letter-spacing: -.05em; color: rgba(29,39,21,.045); }
@media (min-width:768px){ .nf-watermark { font-size: 26vw; } }
@media (min-width:1024px){ .nf-watermark { font-size: 22rem; } }
.nf-eyebrow { background: rgba(247,242,224,.6); border-color: rgba(168,135,24,.3); }
.nf-card { background: rgba(250,250,248,.8); }
.nf-card:hover { background: var(--color-cream-50); border-color: rgba(168,135,24,.4); }
.nf-cta-soft { background: rgba(250,250,248,.7); }
.nf-cta-soft:hover { background: var(--color-cream-50); }
.nf-ic { background: var(--color-brand-950); color: var(--color-accent-400); }
.nf-card:hover .nf-ic { background: var(--color-accent-600); color: var(--color-cream-50); }
.nf-arrow { color: rgba(50,65,32,.45); }
.nf-card:hover .nf-arrow { color: var(--color-accent-600); transform: translate(2px,-2px); }
.nf-arrow { transition: color .3s, transform .3s; }