/* ===================================
   Bulut & Sayın Hukuk Bürosu
   Custom Styles
   =================================== */

/* --- Base & Reset --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background-color: rgba(197, 165, 114, 0.3);
    color: #FDFBF7;
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #060E1B;
}
::-webkit-scrollbar-thumb {
    background: rgba(197, 165, 114, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(197, 165, 114, 0.5);
}

/* --- Hero Gradient --- */
.hero-gradient {
    background:
        radial-gradient(ellipse 80% 50% at 20% 60%, rgba(30, 58, 102, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(197, 165, 114, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, #060E1B 0%, #0A1628 50%, #060E1B 100%);
}

/* --- Hero Pattern (subtle geometric) --- */
.hero-pattern {
    background-image:
        linear-gradient(30deg, rgba(197, 165, 114, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(197, 165, 114, 0.1) 87.5%, rgba(197, 165, 114, 0.1)),
        linear-gradient(150deg, rgba(197, 165, 114, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(197, 165, 114, 0.1) 87.5%, rgba(197, 165, 114, 0.1)),
        linear-gradient(30deg, rgba(197, 165, 114, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(197, 165, 114, 0.1) 87.5%, rgba(197, 165, 114, 0.1)),
        linear-gradient(150deg, rgba(197, 165, 114, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(197, 165, 114, 0.1) 87.5%, rgba(197, 165, 114, 0.1)),
        linear-gradient(60deg, rgba(142, 111, 62, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(142, 111, 62, 0.05) 75%, rgba(142, 111, 62, 0.05)),
        linear-gradient(60deg, rgba(142, 111, 62, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(142, 111, 62, 0.05) 75%, rgba(142, 111, 62, 0.05));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* --- Scroll Line Animation --- */
.scroll-line {
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* --- Reveal Animations --- */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Navbar states --- */
#navbar.scrolled {
    background: rgba(6, 14, 27, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(197, 165, 114, 0.08);
}

#navbar.scrolled .h-20 {
    height: 4rem;
}

/* --- Mobile menu animation --- */
#mobileMenu.active {
    transform: translateX(0);
}

/* --- Menu toggle animation --- */
#menuToggle.active #bar1 {
    transform: rotate(45deg) translate(4px, 4px);
}
#menuToggle.active #bar2 {
    opacity: 0;
    transform: translateX(-10px);
}
#menuToggle.active #bar3 {
    width: 1.5rem;
    transform: rotate(-45deg) translate(3px, -3px);
}

/* --- Form focus rings --- */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 1px rgba(197, 165, 114, 0.2);
}

/* --- Select dropdown arrow --- */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5L6 8L9 5' stroke='%23C5A572' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

/* --- Counter animation --- */
.counter {
    font-variant-numeric: tabular-nums;
}

/* --- Grain overlay (subtle texture) --- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* --- Preloader --- */
#preloader.loaded {
    opacity: 0;
    pointer-events: none;
}

/* --- Practice area card hover glow --- */
.group:hover .card-glow {
    opacity: 1;
}

/* --- Smooth link underline --- */
.link-underline {
    position: relative;
}
.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #C5A572;
    transition: width 0.3s ease;
}
.link-underline:hover::after {
    width: 100%;
}

/* --- Blog card image zoom --- */
article.group:hover .aspect-\[16\/10\] {
    transform: scale(1);
}

/* --- Gold shimmer effect on CTA hover --- */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.bg-gold-500:hover {
    background-image: linear-gradient(
        110deg,
        #C5A572 0%,
        #E2D1A8 25%,
        #C5A572 50%,
        #E2D1A8 75%,
        #C5A572 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out;
}

/* --- Responsive adjustments --- */
@media (max-width: 640px) {
    .font-display {
        word-break: keep-all;
    }
}

/* --- Print styles --- */
@media print {
    body::after,
    #navbar,
    #preloader,
    #backToTop,
    .fixed {
        display: none !important;
    }
    body {
        background: white;
        color: #1a1a1a;
    }
}