/* Minimal custom styles; Tailwind handles most styling */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }

/* Fallback styles in case Tailwind doesn't load */
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.grid { display: grid; }
.gap-6 { gap: 1.5rem; }
.md\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bg-white { background-color: #ffffff; }
.border { border-width: 1px; border-color: #e5e7eb; }
.rounded-xl { border-radius: 0.75rem; }
.overflow-hidden { overflow: hidden; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-bold { font-weight: 700; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-semibold { font-weight: 600; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-orange-600 { color: #ea580c; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-8 { margin-top: 2rem; }
.p-5 { padding: 1.25rem; }
.inline-block { display: inline-block; }
.block { display: block; }

/* Blog specific styles */
.thumb-rect { position: relative; width: 100%; height: 200px; overflow: hidden; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; }
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

html { scroll-behavior: smooth; }
/* Prevent horizontal scrolling on small screens */
html, body { overflow-x: hidden; }

/* Fixed header layout spacing */
:root { --header-h: 96px; }
@media (min-width: 768px) { :root { --header-h: 120px; } }
.has-fixed-header { padding-top: var(--header-h); }
#siteHeader { height: var(--header-h); }

/* Keep header height fixed on scroll (no shrink) */
@media (min-width: 768px) {
  #siteHeader.is-scrolled { height: var(--header-h); }
  #siteHeader.is-scrolled .site-logo { height: 80px; }
}

/* Animated mobile menu (slide down) */
#mobileMenu.menu-anim { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease; }
#mobileMenu.menu-anim.is-open { max-height: 480px; opacity: 1; }

/* Ensure header icons scale consistently */
#siteHeader a.h-11.w-11 svg { width: 20px; height: 20px; }

/* One-line header: prevent wrap and allow center nav to scroll */
#siteHeader .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
#siteHeader .no-scrollbar::-webkit-scrollbar { display: none; }

/* Responsive header typography that compresses as width shrinks */
.brand-text { font-size: clamp(16px, 2.1vw, 22px); letter-spacing: 0.02em; }
#desktopNav { gap: clamp(6px, 1.6vw, 24px); }
#desktopNav { overflow-y: visible; }
#desktopNav .nav-link { padding: clamp(4px, 1vw, 10px) clamp(6px, 1.2vw, 14px); font-size: clamp(11px, 1.05vw, 16px); }

/* Hide brand text on narrower desktops to free space */
@media (max-width: 1100px) {
  .brand-text { display: none; }
}

/* Ensure brand text is visible on mobile */
@media (max-width: 767px) {
  .brand-text { display: inline !important; }
}

/* Breed cards: shrink on mobile */
@media (max-width: 640px) {
  .breed-cards .grid { gap: 10px; }
  .breed-cards .group { border-radius: 16px; }
  .breed-cards .group .relative { border-radius: 16px; }
  .breed-cards .group .relative.aspect-\[4\/5\] { aspect-ratio: 3/4; }
  .breed-cards .group video,
  .breed-cards .group img { transform: none; }
  .breed-cards .group .left-3 { left: 8px; }
  .breed-cards .group .top-3 { top: 8px; }
  .breed-cards .group .bottom-3 { bottom: 8px; }
  .breed-cards .group .h-8 { height: 28px; }
  .breed-cards .group .px-3 { padding-left: 8px; padding-right: 8px; }
  .breed-cards .group .py-2 { padding-top: 6px; padding-bottom: 6px; }
}

/* Blog preview: horizontal scroll on mobile */
@media (max-width: 767px) {
  .blog-scroll { 
    display: grid; 
    grid-auto-flow: column; 
    grid-auto-columns: minmax(82%, 1fr);
    overflow-x: auto; 
    gap: 14px; 
    padding-bottom: 6px;
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch;
  }
  .blog-scroll > article { scroll-snap-align: start; }
}

/* Slightly reduce right icon footprint below xl */
@media (max-width: 1279px) {
  #siteHeader .h-6.w-px { display: none; }
  #siteHeader .h-11.w-11 { transform: scale(0.92); }
}


/* Modern pill hover for desktop nav */
.nav-link { position: relative; transition: color .2s ease, background-color .2s ease; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: currentColor; transition: width .25s ease; }
.nav-link:hover::after { width: 100%; }

/* Vibrant pill hover */
.nav-link { border: 1px solid transparent; border-radius: 10px; }
/* Modern transparent hover instead of solid orange */
.nav-link:hover { background-color: rgba(15,23,42,0.06); color: inherit !important; box-shadow: 0 6px 14px rgba(15,23,42,0.12); transform: translateY(-1px) scale(1.02); z-index: 10; border-color: rgba(15,23,42,0.10); }
/* Keep underline animation visible */
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible { outline: 2px solid rgba(15,23,42,0.20); outline-offset: 2px; z-index: 10; }

/* Mobile menu: comfy items and lively hover */
#mobileMenu .nav-link { padding: 10px 12px; border-radius: 8px; }
#mobileMenu .nav-link:hover { background-color: rgba(15,23,42,0.06); color: inherit !important; }

/* Morphing hamburger */
.hamburger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; height: 16px; }
.hamburger .bar { display: block; height: 2px; width: 100%; background: #0f172a; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
button[aria-expanded="true"] .hamburger .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
button[aria-expanded="true"] .hamburger .bar:nth-child(2) { opacity: 0; }
button[aria-expanded="true"] .hamburger .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
button[aria-expanded="true"] { border-color: var(--brand-orange-600) !important; }
button[aria-expanded="true"] .hamburger .bar { background: var(--brand-orange-600); }

/* Backdrop: dim without blur for clarity/performance */
#mobileBackdrop { background-color: rgba(15,23,42,0.35); }

/* Mobile panel: slightly stronger ambient glow */
#mobileMenu { box-shadow: 0 14px 34px rgba(255,106,26,0.15), 0 4px 14px rgba(15,23,42,0.10); }

/* Reveal on scroll */
[data-animate] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

/* Stagger helpers for about page */
[data-animate-stagger] .stagger-child { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
[data-animate-stagger] .stagger-child.is-visible { opacity: 1; transform: translateY(0); }

/* Mobile contact popover */
.contact-pop { transform: translateY(6px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease, box-shadow .2s ease; box-shadow: 0 14px 34px rgba(15,23,42,.14); }
.contact-pop.is-open { transform: translateY(0) scale(1); opacity: 1; }
.contact-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(15,23,42,0.06); }
.contact-item:last-child { border-bottom: 0; }
.contact-item:hover { background-color: rgba(15,23,42,0.04); }
.contact-item .chev { color: #cbd5e1; transition: transform .18s ease, color .18s ease; }
.contact-item:hover .chev { transform: translateX(2px); color: var(--brand-orange-600); }

/* Subtle hover lift for cards */
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-2px); }

/* Floating pulse for round icons */
@keyframes floatPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float-pulse { animation: floatPulse 3s ease-in-out infinite; }

/* Header elevated state */
#siteHeader.is-scrolled { background-color: rgba(255,255,255,0.98); box-shadow: 0 6px 24px rgba(15,23,42,0.06); }

/* Header gradient + subtle parallax */
#siteHeader { background-image: linear-gradient(90deg, rgba(251,146,60,0.16) 0%, rgba(255,255,255,0.0) 45%); background-repeat: no-repeat; background-size: 140% 100%; overflow-x: clip; transition: background-color .2s ease, box-shadow .25s ease, height .25s ease; }
/* Home-only: make header feel like a distinct section with soft colorful glass */
body.home #siteHeader { background: linear-gradient(120deg, rgba(255,106,26,0.10), rgba(239,62,110,0.08)); backdrop-filter: blur(8px); border-bottom-color: rgba(255,255,255,0.5); }
body.home #siteHeader.is-scrolled { background: linear-gradient(120deg, rgba(255,106,26,0.14), rgba(239,62,110,0.12)); }

/* Logo pop-in */
@keyframes logoPop { 0% { transform: scale(0.94); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.logo-anim { animation: logoPop .6s ease-out .05s both; will-change: transform, opacity; }

/* Nav link underline slide */
.nav-link { position: relative; transition: color .2s ease; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: currentColor; transition: width .25s ease; }
.nav-link:hover::after { width: 100%; }

/* CTA soft glow */
.cta-glow { box-shadow: 0 6px 20px rgba(234,88,12,0.25); transition: box-shadow .2s ease, transform .2s ease; }
.cta-glow:hover { box-shadow: 0 10px 28px rgba(234,88,12,0.35); transform: translateY(-1px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] { transition: none; }
  .float-pulse, .logo-anim { animation: none; }
}

/*
 * Vibrant palette tweaks
 * Keep HTML intact; override key Tailwind utilities used in templates
 */
:root {
  --brand-orange-600: #ff6a1a;
  --brand-orange-700: #e05500;
  --brand-orange-50: #fff3e9;
  --brand-green-600: #14b85a;
  --brand-green-700: #109e4c;
  --brand-rose-600: #ef3e6e;
}

/* Performance: incremental rendering for below-the-fold to reduce layout shifts */

/* Mobile: disable reveal effect to avoid initial 5s wait */
@media (max-width: 768px) {
  [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Buttons / badges using orange */
.bg-orange-600 { background-color: var(--brand-orange-600) !important; }
.hover\:bg-orange-700:hover { background-color: var(--brand-orange-700) !important; }
.text-orange-600 { color: var(--brand-orange-600) !important; }
.hover\:text-orange-600:hover { color: var(--brand-orange-600) !important; }
.bg-orange-50 { background-color: var(--brand-orange-50) !important; }

/* WhatsApp buttons (green) */
.bg-green-600 { background-color: var(--brand-green-600) !important; }
.hover\:bg-green-700:hover { background-color: var(--brand-green-700) !important; }

/* Links and accents: slightly stronger underline/contrast */
a.text-orange-600 { text-underline-offset: 3px; }
a.text-orange-600:hover { text-decoration: underline; }
/* Header CTA override: keep CTA text without underline on hover */
#siteHeader a.text-orange-600:hover { text-decoration: none !important; }

/* Hero and soft section backgrounds: subtle vibrant gradient overlay */
.bg-orange-50 {
  background-image: radial-gradient(1200px 400px at 10% 0%, rgba(255,106,26,0.10), transparent 60%),
                    radial-gradient(1000px 400px at 90% 10%, rgba(239,62,110,0.08), transparent 60%);
  background-repeat: no-repeat;
}

/* Full-bleed WHY band */
.why-band { background: linear-gradient(180deg, #fff, #fff), radial-gradient(900px 300px at 0% 0%, rgba(255,106,26,0.10), transparent 60%), radial-gradient(900px 300px at 100% 20%, rgba(239,62,110,0.10), transparent 60%); background-blend-mode: normal, multiply, multiply; }
.why-band { box-shadow: inset 0 1px 0 rgba(15,23,42,0.06), inset 0 -1px 0 rgba(15,23,42,0.06); }

/* Card borders and shadows: warmer + deeper for pop */
.border-slate-200 { border-color: rgba(15,23,42,0.14) !important; }
.hover-lift:hover { box-shadow: 0 18px 40px rgba(255,106,26,0.16), 0 2px 8px rgba(15,23,42,0.08); }

/* CTA glow: stronger, colorful ambient */
.cta-glow { box-shadow: 0 10px 26px rgba(255,106,26,0.32), 0 2px 10px rgba(239,62,110,0.18); }
.cta-glow:hover { box-shadow: 0 16px 40px rgba(255,106,26,0.44), 0 4px 16px rgba(239,62,110,0.22); }

/* Badges and subtle pills */
.bg-white\/80 { background-color: rgba(255,255,255,0.86) !important; }
.bg-white\/90 { background-color: rgba(255,255,255,0.92) !important; }

/* Optional: gradient text utility */
.text-gradient-strong {
  background: linear-gradient(90deg, var(--brand-orange-600), var(--brand-rose-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Small TR badge next to brand */
.brand-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(90deg, #0ea5e9, #22c55e); box-shadow: 0 6px 18px rgba(15,23,42,0.14); }

/* ===== About top cover ===== */
.about-cover { position: relative; width: 100%; height: clamp(300px, 48vw, 560px); overflow: hidden; margin-bottom: clamp(16px, 4vw, 40px); }
.about-cover .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-cover .cover-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.0) 40%); }
.about-cover .cover-center { position: relative; z-index: 1; display: grid; place-items: center; gap: 10px; height: 100%; text-align: center; color: #fff; }
.about-cover .cover-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.about-cover .cover-breadcrumb { font-weight: 600; letter-spacing: .12em; font-size: 12px; opacity: .95; }
.about-cover .cover-bottom-fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: linear-gradient(180deg, rgba(0,0,0,0), #fff); }

/* ===== Footer: modern animated ===== */
.modern-footer { position: relative; background: linear-gradient(180deg, #141a2f 0%, #2c1d53 100%); }
.modern-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(820px 260px at 8% 0%, rgba(255,106,26,0.10), transparent 60%), radial-gradient(760px 240px at 92% 8%, rgba(239,62,110,0.08), transparent 60%); pointer-events: none; animation: footerBg 16s linear infinite; }
@keyframes footerBg { 0% { transform: translateX(0); } 50% { transform: translateX(-2%); } 100% { transform: translateX(0); } }
.footer-decor { position: absolute; display: block; border-radius: 9999px; filter: blur(40px); opacity: .12; animation: floatDecor 12s ease-in-out infinite; }
.decor-a { width: 220px; height: 220px; left: -60px; top: 20%; background: #ff6b35; }
.decor-b { width: 260px; height: 260px; right: -80px; bottom: 10%; background: #e91e63; animation-delay: 2s; }
@keyframes floatDecor { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.footer-enter { opacity: 0; transform: translateY(30px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.footer-visible { opacity: 1; transform: translateY(0); }
.logo-breathe { animation: logoBreathe 6s ease-in-out infinite; }
@keyframes logoBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.logo-wrapper:hover { filter: drop-shadow(0 8px 22px rgba(255,107,53,0.25)); transform: translateZ(0) scale(1.02); transition: transform .2s ease, filter .2s ease; }
.footer-social .social-btn { display: inline-flex; height: 44px; width: 44px; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.footer-social .social-btn:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px) scale(1.1) rotate(5deg); color: #ff6b35; }
.footer-links .footer-link { position: relative; display: inline-block; transition: color .2s ease; }
.footer-links .footer-link::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: currentColor; transition: width .25s ease; }
.footer-links .footer-link:hover { color: #ff6b35; }
.footer-links .footer-link:hover::after { width: 100%; }
.footer-thumb { aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; transition: transform .25s ease, box-shadow .25s ease; }
.footer-thumb:hover { transform: scale(1.05); box-shadow: 0 14px 32px rgba(255,107,53,0.18); }
.contact-row { display: block; margin-top: 6px; transition: transform .2s ease, color .2s ease, text-shadow .2s ease; }
.contact-phone:hover { transform: translateX(2px); text-shadow: 0 0 0 rgba(0,0,0,0); animation: phonePulse 1.2s ease-in-out infinite; }
@keyframes phonePulse { 0%,100% { transform: translateX(2px) scale(1); } 50% { transform: translateX(2px) scale(1.04); } }
.contact-mail:hover { color: #ff6b35; text-shadow: 0 0 16px rgba(255,107,53,0.35); }
.contact-address:hover { transform: translateX(2px); }

/* Respect reduced motion in footer */
@media (prefers-reduced-motion: reduce) {
  .logo-breathe { animation: none; }
  .footer-thumb, .footer-social .social-btn, .logo-wrapper { transition: none; }
}

/* Longer footer padding for a more substantial section */
.footer-inner { padding-top: 80px; padding-bottom: 96px; }
@media (min-width: 1024px) { .footer-inner { padding-top: 104px; padding-bottom: 120px; } }

/* ===== Purchase (Satın Alma) Section ===== */
.process-band { position: relative; background: linear-gradient(180deg, #f8fafc, #fff); }
.process-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(900px 300px at 0% 0%, rgba(255,106,26,0.10), transparent 60%),
  radial-gradient(900px 300px at 100% 30%, rgba(239,62,110,0.10), transparent 60%);
  opacity: .9;
}

/* Inline modern icons for why section */
.why-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: linear-gradient(135deg, rgba(255,106,26,.18), rgba(239,62,110,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px rgba(239,62,110,.14); }
.why-svg { width: 18px; height: 18px; color: #0f172a; filter: drop-shadow(0 2px 6px rgba(239,62,110,.16)); }
.process-surface { position: relative; background: rgba(255,255,255,0.78); backdrop-filter: blur(6px); border: 1px solid rgba(15,23,42,0.08); border-radius: 18px; padding: 24px; box-shadow: 0 12px 30px rgba(15,23,42,0.06), 0 24px 60px rgba(255,106,26,0.08); }
@media (min-width: 640px) { .process-surface { padding: 32px; } }
.step-card { background: #fff; border: 1px solid rgba(15,23,42,0.10); border-radius: 16px; padding: 22px; position: relative; overflow: hidden; }
.step-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,106,26,0.06), rgba(239,62,110,0.04)); opacity: 0; transition: opacity .25s ease; }
.step-card:hover::after { opacity: 1; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: linear-gradient(90deg, var(--brand-orange-600), var(--brand-rose-600)); color: #fff; font-weight: 700; margin-bottom: 10px; box-shadow: 0 8px 18px rgba(239,62,110,0.22); }

/* ===== Blog content typography ===== */
.blog-content { font-size: 1.0625rem; line-height: 1.75; color: #0f172a; }
.blog-content p { margin: 0.8em 0; color: #334155; }
.blog-content h2 { font-size: 1.5rem; line-height: 1.3; margin: 1.2em 0 0.5em; font-weight: 700; }
.blog-content h3 { font-size: 1.25rem; line-height: 1.35; margin: 1em 0 0.4em; font-weight: 700; }
.blog-content a { color: var(--brand-orange-600); text-decoration: underline; text-underline-offset: 3px; }
.blog-content ul, .blog-content ol { padding-left: 1.25rem; margin: 0.8em 0; }
.blog-content li { margin: 0.3em 0; }
.blog-content img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 22px rgba(15,23,42,0.08); }
.blog-content blockquote { border-left: 4px solid rgba(255,106,26,0.4); padding-left: 14px; color: #475569; font-style: italic; background: rgba(255,106,26,0.04); border-radius: 6px; }

/* Blog thumbnails */
.thumb-rect { position: relative; width: 100%; padding-top: 56.25%; background: #f1f5f9; }
.thumb-rect .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Pre-footer CTA (modern soft) ===== */
.cta-soft { position: relative; }
.cta-soft::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70%; background: radial-gradient(900px 280px at 0% 0%, rgba(255,106,26,.10), transparent 60%), radial-gradient(800px 260px at 100% 0%, rgba(239,62,110,.10), transparent 60%); pointer-events: none; }
.cta-surface { position: relative; display: flex; flex-direction: column; gap: 20px; justify-content: space-between; padding: 28px; border-radius: 26px; border: 1px solid rgba(15,23,42,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86)); box-shadow: 0 18px 52px rgba(15,23,42,0.10), 0 10px 26px rgba(255,106,26,0.12); backdrop-filter: blur(10px); }
/* Soft connection to footer via subtle gradient edge */
.cta-surface::after { content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(26,26,46,0)); filter: blur(4px); opacity: .8; pointer-events: none; }
@media (min-width: 768px) { .cta-surface { flex-direction: row; align-items: center; padding: 36px; } }
.cta-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 9999px; background: linear-gradient(135deg, rgba(255,106,26,.18), rgba(239,62,110,.18)); color: #0f172a; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(239,62,110,.16); font-size: 20px; }
.cta-actions { flex-wrap: wrap; }
.cta-phone-btn, .cta-wa-btn, .cta-outline-btn { white-space: nowrap; gap: 10px; }
.cta-phone-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 20px; border-radius: 9999px; background: #fff; color: #0f172a; font-weight: 700; box-shadow: 0 12px 28px rgba(15,23,42,.14); border: 1px solid rgba(15,23,42,.10); }
.cta-wa-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 20px; border-radius: 9999px; background: var(--brand-green-600); color: #fff; font-weight: 700; box-shadow: 0 12px 28px rgba(20,184,90,.34); }
.cta-wa-btn:hover { background: var(--brand-green-700); }
.cta-outline-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 20px; border-radius: 9999px; color: #0f172a; font-weight: 700; border: 1px solid rgba(15,23,42,.16); background: rgba(255,255,255,0.6); }
.cta-phone-btn:hover, .cta-outline-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(15,23,42,.14); }
/* Responsive: stack buttons and full-width on narrow screens */
@media (max-width: 480px) {
  .cta-actions { gap: 10px; }
  .cta-phone-btn, .cta-wa-btn, .cta-outline-btn { flex: 1 1 100%; justify-content: center; height: 50px; }
}
/* Centered CTA variant */
.cta-centered { align-items: center; text-align: center; }
.cta-centered .cta-title { font-size: clamp(26px, 3.6vw, 42px); }
.cta-centered .cta-desc { font-size: clamp(15px, 1.6vw, 20px); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .cta-centered { padding-top: 40px; padding-bottom: 40px; } }
/* CTA bigger typography */
.cta-title { font-size: clamp(22px, 2.8vw, 34px); line-height: 1.25; }
.cta-desc { font-size: clamp(14px, 1.4vw, 18px); line-height: 1.6; }
@media (min-width: 1024px) {
  .cta-surface { padding: 44px; }
  .cta-icon { width: 64px; height: 64px; font-size: 22px; }
  .cta-phone-btn, .cta-wa-btn, .cta-outline-btn { height: 56px; padding: 0 24px; }
}

/* ===== About page enhancements ===== */
.about-hero .text-gradient-strong { filter: drop-shadow(0 6px 14px rgba(255,106,26,.18)); }
.stats-grid { display: grid; gap: 16px; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.stats-card { position: relative; border-radius: 18px; border: 1px solid rgba(15,23,42,0.10); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); padding: 24px; overflow: hidden; box-shadow: 0 12px 28px rgba(15,23,42,.06); transition: transform .2s ease, box-shadow .2s ease; }
.stats-card::before { content: ""; position: absolute; inset: -40% -40% auto auto; height: 120px; width: 120px; border-radius: 9999px; background: radial-gradient(circle, rgba(255,106,26,.20), transparent 60%); filter: blur(10px); transform: translate(30px,-30px); }
.stats-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,106,26,.18); }
.stat-num { font-size: clamp(34px, 5vw, 44px); font-weight: 800; letter-spacing: -0.02em; }
.stat-label { margin-top: 4px; color: #475569; }
.stat-count { display: inline-block; min-width: 1ch; }

/* FAQ animated details */
.faq .faq-item { border: 1px solid rgba(15,23,42,0.10); border-radius: 14px; background: #fff; padding: 16px 18px; transition: box-shadow .25s ease, border-color .25s ease; }
.faq .faq-item + .faq-item { margin-top: 10px; }
.faq .faq-item[open] { box-shadow: 0 16px 38px rgba(255,106,26,.16); border-color: rgba(255,106,26,.35); }
.faq .faq-item summary { list-style: none; cursor: pointer; font-weight: 600; position: relative; padding-right: 22px; }
.faq .faq-item summary::-webkit-details-marker { display: none; }
.faq .faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 0; font-weight: 700; color: var(--brand-orange-600); transition: transform .2s ease; }
.faq .faq-item[open] summary::after { content: "–"; transform: rotate(0); }
.faq .faq-item p { margin-top: 8px; color: #475569; }
/* Smooth expand/collapse */
.faq .faq-content { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height .3s ease, opacity .25s ease, transform .3s ease; }
.faq .faq-item[open] .faq-content { max-height: 300px; opacity: 1; transform: translateY(0); }

/* Colorful feature cards */
.features-grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 12px; margin-top: 8px; }
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.feature-card { position: relative; border-radius: 16px; padding: 16px 16px 16px 56px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)); border: 1px solid rgba(15,23,42,.10); box-shadow: 0 10px 26px rgba(15,23,42,.08); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.feature-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,106,26,.10), rgba(239,62,110,.10)); opacity: .0; transition: opacity .25s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(255,106,26,.20), 0 6px 16px rgba(15,23,42,.10); }
.feature-card:hover::after { opacity: .4; }
.icon-badge { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9999px; background: linear-gradient(135deg, rgba(255,106,26,.30), rgba(239,62,110,.30)); color: #0f172a; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px rgba(239,62,110,.16); }
.icon-badge .icon-svg { width: 18px; height: 18px; color: #0f172a; filter: drop-shadow(0 2px 6px rgba(239,62,110,.18)); }
.feature-title { font-weight: 700; letter-spacing: -.01em; }
.feature-desc { margin-top: 4px; color: #64748b; font-size: 0.95rem; }

/* Check icon for about list */
.check-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: linear-gradient(135deg, rgba(255,106,26,.26), rgba(239,62,110,.22)); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(255,106,26,.26); }
.check-svg { width: 16px; height: 16px; color: var(--brand-orange-600); }

/* About image subtle hover */
.about-image-surface { box-shadow: 0 18px 46px rgba(15,23,42,.10), 0 10px 30px rgba(255,106,26,.12); }
.about-image-surface:hover { transform: translateY(-2px); box-shadow: 0 26px 60px rgba(15,23,42,.12), 0 16px 44px rgba(255,106,26,.18); transition: transform .2s ease, box-shadow .2s ease; }

/* Tilt effect base */
[data-tilt] { will-change: transform; transition: transform .2s ease; transform-style: preserve-3d; }
[data-tilt] img { transform: translateZ(0); }

/* About CTA button tweaks */
.about-cta { letter-spacing: .01em; box-shadow: 0 10px 24px rgba(255,106,26,.32), 0 2px 10px rgba(239,62,110,.16); transition: transform .2s ease, box-shadow .2s ease; }
.about-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(255,106,26,.44), 0 6px 18px rgba(239,62,110,.22); }

/* Horizontal gallery (About) */
.h-gallery { display: flex; gap: 12px; overflow-x: auto; -ms-overflow-style: auto; scrollbar-width: thin; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.h-gallery::-webkit-scrollbar { height: 8px; }
.h-gallery::-webkit-scrollbar-track { background: rgba(15,23,42,0.08); border-radius: 9999px; }
.h-gallery::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--brand-orange-600), var(--brand-rose-600)); border-radius: 9999px; }
.h-item { flex: 0 0 auto; width: clamp(160px, 32vw, 260px); scroll-snap-align: start; border-radius: 14px; overflow: hidden; border: 1px solid rgba(15,23,42,.10); box-shadow: 0 10px 26px rgba(15,23,42,.08); background: #fff; }
.h-img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* ===== Yavrular: Grid + cards ===== */
.pets-hero { position: relative; width: 100%; height: clamp(160px, 26vw, 240px); border-radius: 18px; overflow: hidden; background: #f1f5f9; }
.pets-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.breed-gifs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; text-align: center; }
@media (min-width: 768px) { .breed-gifs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.breed-item { display: grid; justify-items: center; gap: 8px; color: inherit; text-decoration: none; }
.breed-item:hover .bi-thumb { box-shadow: 0 18px 44px rgba(15,23,42,0.20); transform: translateY(-2px); }
.bi-thumb { width: clamp(140px, 22vw, 220px); aspect-ratio: 1/1; border-radius: 9999px; overflow: hidden; background: #f1f5f9; border: 6px solid #fff; box-shadow: 0 8px 26px rgba(15,23,42,0.12); transition: transform .2s ease, box-shadow .2s ease; }
.bi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bi-title { font-weight: 700; color: #0f172a; }
.bi-sub { color: #475569; font-weight: 700; }
.filter-bar { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.filter-bar::-webkit-scrollbar { height: 6px; }
.filter-bar::-webkit-scrollbar-thumb { background: rgba(15,23,42,.15); border-radius: 9999px; }
.filter-pill { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 9999px; border: 1px solid rgba(15,23,42,0.14); background: #fff; color: #0f172a; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(15,23,42,0.06); transition: background-color .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease, border-color .2s ease; white-space: nowrap; }
.filter-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,0.10); }
.filter-pill.is-active { background: var(--brand-orange-600); color: #fff; border-color: var(--brand-orange-600); box-shadow: 0 10px 26px rgba(255,106,26,0.36); }

.pets-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (min-width: 640px) { .pets-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .pets-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .pets-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Aspect helpers to vary heights for mosaic feel */
.ar-4-5 .pet-img { aspect-ratio: 4/5; }
.ar-1-1 .pet-img { aspect-ratio: 1/1; }
.ar-3-4 .pet-img { aspect-ratio: 3/4; }
.ar-4-3 .pet-img { aspect-ratio: 4/3; }

/* All breeds view: force consistent portrait crop (override mosaic) */
.pets-grid:not(.is-filtered) .pet-img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; }

/* When a filter is active, force fixed square thumbnails for consistency */
.pets-grid.is-filtered .pet-figure { position: relative; }
.pets-grid.is-filtered .pet-img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }

.pet-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(15,23,42,0.10); background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,0.08); transition: transform .25s ease, box-shadow .25s ease; }
.pet-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(255,106,26,0.20), 0 6px 16px rgba(15,23,42,0.12); }
.pet-figure { position: relative; display: block; }
.pet-img { width: 100%; height: auto; object-fit: cover; display: block; transition: transform .35s ease; }
.pet-card:hover .pet-img { transform: scale(1.05); }
.pet-overlay { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 10px; background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.35)); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.pet-card:hover .pet-overlay { opacity: 1; transform: translateY(0); }
.po-top { justify-self: start; }
.po-bottom { align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.po-action { background: var(--brand-orange-600); color: #fff; font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: 9999px; box-shadow: 0 10px 24px rgba(255,106,26,0.32); }

/* Pet card meta under image */
.pet-meta { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 12px; }
.pet-name { font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.pet-breed { color: #64748b; font-weight: 600; font-size: 0.9rem; }

/* Fade-in stagger children already handled; ensure children start hidden */
.stagger-child { opacity: 0; transform: translateY(10px); }
.stagger-child.is-visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }

/* ===== Modal ===== */
.pet-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.pet-modal.hidden { display: none; }
.pm-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); opacity: 0; transition: opacity .2s ease; }
.pm-dialog { position: relative; width: min(980px, 92vw); max-height: 88vh; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(15,23,42,0.35); transform: translateY(12px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.pet-modal.is-open .pm-backdrop { opacity: 1; }
.pet-modal.is-open .pm-dialog { transform: translateY(0) scale(1); opacity: 1; }
.pm-close { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border-radius: 9999px; background: rgba(0,0,0,0.06); color: #0f172a; font-size: 22px; line-height: 36px; text-align: center; border: 1px solid rgba(15,23,42,0.12); }
.pm-close:hover { background: rgba(0,0,0,0.12); }
.pm-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .pm-body { grid-template-columns: 1fr 1fr; } }
.pm-media { background: #000; }
.pm-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-info { padding: 18px 18px 22px; }

/* Mobile: allow modal content to scroll comfortably */
@media (max-width: 767px) {
  .pm-dialog { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pm-body { grid-template-columns: 1fr; }
  .pm-media { max-height: 48vh; }
  .pm-media img { width: 100%; height: auto; max-height: 48vh; object-fit: cover; }
}
.pm-title { font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: -.01em; }
.pm-badge { display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 9999px; background: var(--brand-orange-50); color: var(--brand-orange-600); font-weight: 700; }
.pm-desc { margin-top: 10px; color: #475569; line-height: 1.6; }
.pm-actions { margin-top: 14px; }
.pm-wa { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 9999px; background: var(--brand-green-600); color: #fff; font-weight: 700; box-shadow: 0 12px 28px rgba(20,184,90,.34); }
.pm-wa:hover { background: var(--brand-green-700); }

/* ===== Header dropdowns ===== */
.nav-dropdown { position: relative; }
.nav-dropdown .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; background: #fff; border: 1px solid rgba(15,23,42,0.10); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,0.12), 0 6px 18px rgba(15,23,42,0.08); padding: 6px; opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60; }
.nav-dropdown .dropdown-item { display: block; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; }
.nav-dropdown .dropdown-item:hover { background: rgba(15,23,42,0.06); }
.nav-dropdown.is-open .dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nav-dropdown:focus-within .dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Open on hover as well (desktop convenience) */
.nav-dropdown:hover .dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Small variant for mobile submenu items */
.dropdown-item-sm { padding: 10px 10px; border-radius: 8px; }
.dropdown-item-sm:hover { background: rgba(15,23,42,0.06); }

/* Mobile submenu animation */
.mobile-submenu { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height .25s ease, opacity .2s ease, transform .25s ease; border-left: 2px solid rgba(15,23,42,0.06); }
.mobile-submenu.is-open { max-height: 500px; opacity: 1; transform: translateY(0); }

/* Headline clipping/overlap fix for large titles and gradient text */
h1, h2, h3 { line-height: 1.25; overflow: visible; }
.text-3xl, .text-4xl, .md\:text-5xl { line-height: 1.25 !important; }
.text-gradient-strong { -webkit-text-fill-color: transparent; }

/* ===== Global black & white theme overrides ===== */
html, body { background: #000 !important; color: #fff !important; }
a { color: #fff; }

/* Baseline dark text resets for readability */
body, p, li, span, small, label, input, textarea, select { color: #eaeaea !important; }
a:visited { color: #e0e0e0 !important; }
a:hover { color: #ffffff !important; }
.text-black, .text-gray-900, .text-neutral-900 { color: #ffffff !important; }
.text-gray-800, .text-neutral-800 { color: #f0f0f0 !important; }
.text-gray-700, .text-neutral-700 { color: #e5e5e5 !important; }

/* Neutralize colorful brand accents to monochrome */
:root {
  --brand-orange-600: #ffffff;
  --brand-orange-700: #e5e5e5;
  --brand-orange-50: #0a0a0a;
  --brand-green-600: #ffffff;
  --brand-green-700: #e5e5e5;
  --brand-rose-600: #ffffff;
}

/* Background surfaces to dark, borders to subtle gray */
.bg-white, .bg-white\/60, .bg-white\/80, .bg-white\/90, .bg-orange-50,
.process-band, .process-surface, .step-card,
.feature-card, .h-item, .pet-card, .pm-dialog,
.faq .faq-item, .cta-surface, .stats-card,
.why-band, .pets-hero, .bi-thumb,
.thumb-rect {
  background: #0a0a0a !important;
  background-image: none !important;
}
.bg-slate-50 { background: #000 !important; }
.border, .border-slate-200, .filter-pill,
.process-surface, .step-card, .feature-card,
.h-item, .pet-card, .pm-dialog, .faq .faq-item,
.cta-surface, .stats-card, .h-gallery::-webkit-scrollbar-track {
  border-color: #333 !important;
}

/* Text colors to light grays/white for readability */
.text-slate-500, .text-slate-600,
.blog-content, .blog-content p, .stat-label,
.feature-desc, .pet-breed, .pm-desc,
.faq .faq-item p { color: #e5e5e5 !important; }
.text-slate-700, .text-slate-800, .text-slate-900 { color: #f0f0f0 !important; }
.pet-name, .bi-title, .pm-title, .cta-title { color: #fff !important; }

/* Buttons and pills to monochrome */
.bg-orange-600, .hover\:bg-orange-700:hover,
.bg-green-600, .hover\:bg-green-700:hover,
.bg-amber-500,
.po-action, .cta-phone-btn, .cta-wa-btn,
.pm-wa, .step-badge {
  background: #111 !important;
  color: #fff !important;
  border-color: #333 !important;
}
.cta-outline-btn { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.cta-outline-btn:hover { background: #1a1a1a !important; color: #fff !important; }
.filter-pill { background: #0a0a0a !important; color: #fff !important; }
.filter-pill.is-active { background: #fff !important; color: #000 !important; border-color: #fff !important; box-shadow: none !important; }

/* Links and accents to white */
.text-orange-600, .hover\:text-orange-600:hover,
.brand-badge, .footer-links .footer-link:hover,
.contact-mail:hover { color: #ffffff !important; }
.cta-icon, .why-icon, .icon-badge, .check-icon { color: #fff; background: #111 !important; box-shadow: none !important; }
.why-svg, .icon-svg, .check-svg { color: #fff !important; filter: none !important; }

/* Header and navigation to dark */
#siteHeader { background: #000 !important; background-image: none !important; border-bottom-color: #222 !important; box-shadow: 0 6px 24px rgba(255,255,255,0.04) !important; }
#siteHeader.is-scrolled { background: rgba(0,0,0,0.98) !important; }
.nav-link:hover { background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 6px 14px rgba(255,255,255,0.08) !important; }
.hamburger .bar { background: #fff !important; }

/* Mobile and dropdown menus */
#mobileMenu { background: #0a0a0a !important; }
#mobileBackdrop { background-color: rgba(255,255,255,0.1) !important; }
.nav-dropdown .dropdown-menu { background: #0a0a0a !important; border-color: #333 !important; box-shadow: 0 16px 40px rgba(255,255,255,0.08) !important; }
.nav-dropdown .dropdown-item:hover, #mobileMenu .nav-link:hover { background: rgba(255,255,255,0.06) !important; }

/* Modals */
.pm-backdrop { background: rgba(255,255,255,0.12) !important; }
.pm-close { background: rgba(255,255,255,0.06) !important; color: #fff !important; border-color: #333 !important; }
.pm-close:hover { background: rgba(255,255,255,0.12) !important; }
.pm-media { background: #000 !important; }

/* Footer to solid dark */
.modern-footer { background: #000 !important; }
.modern-footer::before, .footer-decor, .decor-a, .decor-b { display: none !important; }
.footer-social .social-btn { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.14) !important; }
.footer-social .social-btn:hover { background: rgba(255,255,255,0.18) !important; color: #000 !important; }
.footer-links .footer-link:hover::after { background: #fff !important; }

/* Misc visual elements */
.about-cover .cover-overlay { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.0) 40%) !important; }
.about-cover .cover-bottom-fade { background: linear-gradient(180deg, rgba(0,0,0,0), #000) !important; }
.blog-content img { box-shadow: 0 8px 22px rgba(255,255,255,0.08) !important; }
.hover-lift:hover { box-shadow: 0 18px 40px rgba(255,255,255,0.12) !important; }

/* Outline-style buttons used in templates (border + text) */
a.border, button.border { background: transparent !important; color: #fff !important; border-color: #fff !important; }
a.border:hover, button.border:hover { background: #1a1a1a !important; color: #fff !important; }

/* CTA glow to neutral white glow */
.cta-glow { box-shadow: 0 8px 22px rgba(255,255,255,0.18) !important; }
.cta-glow:hover { box-shadow: 0 12px 30px rgba(255,255,255,0.26) !important; }

/* Blue-ish texts: use lighter accent on black */
[class*="text-blue"], [class*="text-sky"], .text-blue, .text-sky { color: #dbeafe !important; }
.brand-badge { background: #111 !important; color: #fff !important; box-shadow: none !important; }

/* Training page: readable emerald checks on dark */
.text-emerald-600 { color: #a7f3d0 !important; }

/* Training gradient cards: force dark text and blue accents on light cards */
.bg-gradient-to-br h1, .bg-gradient-to-br h2, .bg-gradient-to-br h3,
.bg-gradient-to-br p, .bg-gradient-to-br li { color: #0f172a !important; }
.bg-gradient-to-br a { color: #1e40af !important; }
.bg-gradient-to-br a:hover { color: #1d4ed8 !important; }
.bg-gradient-to-br .text-slate-700, .bg-gradient-to-br .text-slate-600 { color: #0f172a !important; }
.bg-gradient-to-br .text-emerald-600 { color: #60a5fa !important; }

/* Headings: slightly brighter than body for hierarchy on black */
h1, h2, h3, h4, h5, h6 { color: #fafafa !important; }
.blog-content h2, .blog-content h3 { color: #f5f5f5 !important; }

/* Blog list dark-mode tweaks */
.blog-scroll article { background: #0a0a0a !important; border-color: #333 !important; }
.blog-scroll article .p-5 h3 { color: #fff !important; }
.blog-scroll article .p-5 p { color: #e5e5e5 !important; }
.blog-scroll .thumb-rect { background: #0a0a0a !important; }

/* Blog actions/links as prominent outline buttons on dark */
a.text-orange-600 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #fff; border-radius: 9999px; color: #fff !important; text-decoration: none !important; font-weight: 700; }
a.text-orange-600:hover { background: #fff; color: #000 !important; }

/* ===== Satın Alma (page) dark-mode tweaks ===== */
/* Tabs surface and links */
.tab-surface { background: rgba(10,10,10,0.8) !important; border-color: #333 !important; box-shadow: 0 10px 26px rgba(255,255,255,0.06) !important; }
.tab-link { background: #0a0a0a !important; border-color: #333 !important; color: #fff !important; }
.tab-link:hover { background: #111 !important; }
.tab-link.is-active { background: #131313 !important; border-color: #e5e5e5 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(255,255,255,0.10) !important; }

/* Mobile chips */
.chip-bar { background: rgba(10,10,10,0.8) !important; }
.chip { background: #0a0a0a !important; border-color: #333 !important; color: #fff !important; box-shadow: 0 6px 14px rgba(255,255,255,0.06) !important; }
.chip:hover { background: #111 !important; box-shadow: 0 10px 20px rgba(255,255,255,0.10) !important; }
.chip.is-active { background: #131313 !important; border-color: #e5e5e5 !important; color: #fff !important; box-shadow: 0 10px 26px rgba(255,255,255,0.14) !important; }

/* Panels (cards) */
.tab-panel { background: #0a0a0a !important; border-color: #2a2a2a !important; box-shadow: 0 8px 24px rgba(255,255,255,0.06) !important; }
.sap-gradient { background: linear-gradient(135deg, #0f0f0f, #141414) !important; }
.card-shadow { box-shadow: 0 8px 24px rgba(255,255,255,0.06) !important; }
.icon-wrap { background: #111 !important; color: #fff !important; }

/* Prominent buttons in panels */
.tab-panel a.bg-emerald-600,
.tab-panel a.bg-orange-500,
.tab-panel a.bg-green-600,
.tab-panel a.bg-orange-600 {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: 0 10px 26px rgba(255,255,255,0.22) !important;
}
.tab-panel a.bg-emerald-600:hover,
.tab-panel a.bg-orange-500:hover,
.tab-panel a.bg-green-600:hover,
.tab-panel a.bg-orange-600:hover { background: #eaeaea !important; }

/* Footer: slightly gray (not pure black) */
.modern-footer { background: #0b0d10 !important; border-top: 1px solid #111 !important; }

/* ===== Training top badges: make colors darker and more pronounced on dark ===== */
.bg-emerald-50.text-emerald-700 { background: #064e3b !important; color: #ecfdf5 !important; border: 1px solid #0a6b52 !important; }
.bg-amber-50.text-amber-700 { background: #78350f !important; color: #fff7ed !important; border: 1px solid #a04914 !important; }
.bg-sky-50.text-sky-700 { background: #0c4a6e !important; color: #e0f2fe !important; border: 1px solid #155e75 !important; }

/* ===== WhatsApp brand green for icons/buttons ===== */
#waHeaderBtn { background: #25d366 !important; color: #fff !important; }
#waHeaderBtn:hover { background: #1ebe57 !important; }
#waHeaderBtn svg { color: #fff !important; }

.footer-social a[href*="wa.me"], a.social-btn[href*="wa.me"] {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
}
.footer-social a[href*="wa.me"]:hover, a.social-btn[href*="wa.me"]:hover {
  background: #1ebe57 !important;
  color: #fff !important;
}

/* Footer-specific WhatsApp: black icon/button on footer */
/* Footer-specific WhatsApp: match other social buttons style */
.modern-footer .footer-social a[href*="wa.me"],
.modern-footer a.social-btn[href*="wa.me"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: inherit !important;
}
.modern-footer .footer-social a[href*="wa.me"]:hover,
.modern-footer a.social-btn[href*="wa.me"]:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #ff6b35 !important;
}



/* ===== WhatsApp prominence overrides (force brand green across dark theme) ===== */
/* Header dropdown and mobile contact list WhatsApp icon pills */
.contact-item .bg-green-600 { background: #25d366 !important; }
.contact-item .bg-green-600:hover { background: #1ebe57 !important; }

/* Mobile contact trigger button (WhatsApp primary) */
#contactSheetBtn { background: #25d366 !important; color: #fff !important; }
#contactSheetBtn:hover { background: #1ebe57 !important; }

/* Modal WhatsApp CTA and pre-footer CTA WhatsApp button */
.pm-wa, .cta-wa-btn { background: #25d366 !important; color: #fff !important; box-shadow: 0 12px 28px rgba(37,211,102,.34) !important; }
.pm-wa:hover, .cta-wa-btn:hover { background: #1ebe57 !important; }

/* Blog detail: color WhatsApp action button distinctly */
a.share-btn[href*="wa.me"], .share-btn.whatsapp {
  background: #25d366 !important;
  color: #fff !important;
  border-color: #25d366 !important;
}
a.share-btn[href*="wa.me"]:hover, .share-btn.whatsapp:hover { background: #1ebe57 !important; }

/* Blog detail: emphasize other action buttons */
button.share-btn {
  background: #1f2937 !important; /* slate-800 */
  color: #fff !important;
  border-color: #334155 !important; /* slate-600 */
  box-shadow: 0 10px 22px rgba(15,23,42,0.32) !important;
}
button.share-btn:hover { background: #111827 !important; /* slate-900 */ }

a.share-btn[href="/pets"] {
  background: #ff6a1a !important;
  color: #fff !important;
  border-color: #ff6a1a !important;
  box-shadow: 0 12px 28px rgba(255,106,26,0.34) !important;
}
a.share-btn[href="/pets"]:hover { background: #e05500 !important; }

/* Blog detail: prominent colored meta chips (date, reading time, author) */
.post-meta .meta-chip {
  color: #fff !important;
  border-width: 1px !important;
}
.post-meta .meta-chip:nth-child(1) {
  /* Date */
  background: #78350f !important; /* amber-900 */
  border-color: #a16207 !important; /* amber-700 */
}
.post-meta .meta-chip:nth-child(2) {
  /* Reading time */
  background: #0c4a6e !important; /* sky-900 */
  border-color: #075985 !important; /* sky-800 */
}
.post-meta .meta-chip:nth-child(3) {
  /* Author */
  background: #9d174d !important; /* rose-800 */
  border-color: #be185d !important; /* rose-700 */
}

/* Blog article body: make text more prominent blue on dark */
.post-content, .post-content p { color: #bfdbfe !important; /* blue-200 */ }
.post-content h2, .post-content h3 { color: #93c5fd !important; /* blue-300 */ }
.post-content strong, .post-content b { color: #dbeafe !important; /* blue-100 for emphasis */ }

/* Footer: keep WhatsApp green (override neutral social style) */
.modern-footer .footer-social a[href*="wa.me"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: inherit !important;
}
.modern-footer .footer-social a[href*="wa.me"]:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #ff6b35 !important;
}



/* ===== Blog images: preserve original aspect ratio and fit ===== */
/* Detail hero image: remove forced heights and avoid cropping */
.post-hero img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  background: #0a0a0a; /* visible letterbox on dark theme */
}

/* Blog list thumbnails: fit inside 16:9 box without cropping */
.thumb-rect .thumb-img {
  object-fit: contain !important;
  background: #0a0a0a; /* letterbox background */
}

/* Homepage override: fill boxes on the home blog preview without gaps */
body.home .thumb-rect .thumb-img {
  object-fit: cover !important;
  background: transparent;
}