/*
Theme Name: Tilsim Bookstore
Author: Serkan
Version: 1.0
*/

:root {
    /* Color Palette - Premium Blue Bookstore Refinement */
    --color-primary: #14263A;    /* Deep Navy - Structure & Primary CTA */
    --color-primary-hover: #1E3A8A; /* Elegant Medium Blue Hover */
    --color-secondary: #F8FAFC;  /* Cleaner off-white surface */
    --color-accent: #2563EB;     /* Elegant Medium Blue for key actions/accents */
    --color-accent-soft: rgba(37, 99, 235, 0.08); /* Soft blue tint */
    --color-text: #111827;       /* Dark Charcoal Navy text */
    --color-text-light: #4B5563; /* Secondary slate text */
    --color-white: #FFFFFF;
    --color-border: #E2E8F0;     /* Slate border */
    --color-soft-bg: #F0F7FF;    /* Soft light blue hover surface */
    --color-footer-bg: #0B131E;  /* Deeper Navy footer */
    --color-footer-text: #94A3B8;
    --color-footer-hover: #3B82F6;

    /* Typography - Professional Pairings */
    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Outfit", sans-serif;
    --font-ui: "Outfit", sans-serif;

    /* Refined Spacing System */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1.25rem;
    --space-md: 2.5rem;
    --space-lg: 5rem;
    --space-xl: 10rem;

    /* Architecture & Effects */
    --container-width: 1440px;
    --header-height: 90px;
    --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-soft: 0 10px 30px rgba(18, 31, 43, 0.04);
    --shadow-hover: 0 20px 50px rgba(18, 31, 43, 0.08);
}

/* --- Base Essentials --- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden; /* CRITICAL: No horizontal scroll */
    -webkit-font-smoothing: antialiased;
}

/* Premium Reveal Animation */
@keyframes premiumFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.site-main {
    animation: premiumFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.1;
    margin: 0 0 1rem;
    font-weight: 600;
}

a {
    transition: var(--transition-premium);
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Section Spacing */
.section-padding {
    padding: var(--space-lg) 0;
}

@media (max-width: 768px) {
    .section-padding {
        padding: var(--space-md) 0;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: var(--transition-premium);
}

.btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
}

.btn-outline:hover {
    color: var(--color-white);
}

/* Typography Helpers */
.text-overline {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    display: block;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: 2.75rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

/* Utility to prevent overflow */
.no-overflow {
    overflow: hidden;
    max-width: 100%;
}