/* ============================================================
   HANKAR MİMARLIK — Design System
   Single source of truth for design tokens, base styles,
   and shared components. Page-specific styles live in views.
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
    /* Brand palette */
    --primary-dark: #00273D;   /* Kurumsal lacivert (kartvizit) */
    --primary: #003A5C;
    --primary-light: #004B73;
    --accent: #B8842B;         /* Sıcak pirinç vurgu — ölçülü kullanılır */
    --accent-soft: #D4A85A;

    /* Neutrals */
    --white: #FFFFFF;
    --bg: #FFFFFF;
    --bg-alt: #F7F6F3;         /* Sıcak açık gri — bölüm arka planı */
    --bg-dark: var(--primary-dark);
    --ink: #0F1B24;            /* Ana metin */
    --ink-soft: #4A5A66;       /* İkincil metin */
    --line: #E7E4DE;           /* İnce ayraç çizgisi */

    /* On-dark text */
    --on-dark: #FFFFFF;
    --on-dark-soft: rgba(255, 255, 255, 0.72);

    /* Typography */
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Fluid type scale */
    --fs-display: clamp(3rem, 8vw, 6rem);
    --fs-h1: clamp(2.5rem, 5.5vw, 4.25rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h3: clamp(1.4rem, 2.5vw, 1.9rem);
    --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-eyebrow: 0.8125rem;

    /* Spacing scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --space-8: 8rem;

    /* Layout */
    --container: 1320px;
    --container-narrow: 880px;
    --gutter: clamp(1.25rem, 5vw, 5rem);
    --section-y: clamp(4rem, 9vw, 8rem);

    /* Radii */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 2px 10px rgba(0, 39, 61, 0.06);
    --shadow: 0 12px 30px rgba(0, 39, 61, 0.10);
    --shadow-lg: 0 24px 60px rgba(0, 39, 61, 0.16);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.35s var(--ease);

    /* Layering */
    --z-nav: 1030;
    --z-float: 1040;
}

/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--primary-dark);
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    font-weight: 700;
}

p { margin: 0 0 var(--space-3); }

a { color: var(--primary-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

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

::selection { background: var(--primary-dark); color: var(--white); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------ */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--primary-dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }

.wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

/* Section eyebrow + heading pattern */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--space-2);
    display: inline-block;
}

/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */
.btn-primary-custom,
.btn-secondary-custom {
    display: inline-block;
    padding: 16px 42px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    border: 2px solid transparent;
}

.btn-primary-custom {
    background: var(--white);
    color: var(--primary-dark);
}
.btn-primary-custom:hover {
    color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.28);
}

.btn-secondary-custom {
    background: transparent;
    border-color: var(--white);
    color: var(--white);
}
.btn-secondary-custom:hover {
    background: var(--white);
    color: var(--primary-dark);
    transform: translateY(-3px);
}

/* On light backgrounds */
.btn-solid {
    display: inline-block;
    padding: 16px 42px;
    background: var(--primary-dark);
    color: var(--white);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-solid:hover { color: var(--white); background: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }

/* ------------------------------------------------------------
   5. NAVBAR (floating pill, shared across pages)
   ------------------------------------------------------------ */
.navbar.custom-navbar {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-nav);
    background: rgba(0, 39, 61, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 0;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 30px rgba(0, 39, 61, 0.28);
    width: min(1180px, calc(100% - 2.5rem));
}

.navbar.custom-navbar .navbar-brand {
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.navbar.custom-navbar .navbar-brand:hover { color: var(--white); opacity: 0.9; }

.navbar.custom-navbar .nav-link {
    color: var(--on-dark-soft);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--transition);
}
.navbar.custom-navbar .nav-link:hover,
.navbar.custom-navbar .nav-link.active { color: var(--white); }

.navbar.custom-navbar .navbar-toggler { border: 0; padding: 0.25rem 0.5rem; }
.navbar.custom-navbar .navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

main { margin-top: 0; padding-top: 0; }

/* ------------------------------------------------------------
   6. FOOTER (shared)
   ------------------------------------------------------------ */
footer.site-footer {
    background: var(--primary-dark);
    color: var(--on-dark);
}
footer.site-footer h5 { color: var(--white); font-family: var(--font-sans); font-size: 1.05rem; }
footer.site-footer a { color: var(--on-dark-soft); }
footer.site-footer a:hover { color: var(--white); }
footer.site-footer .bi { color: var(--white); }
footer.site-footer hr { border-color: rgba(255, 255, 255, 0.16); }

/* ------------------------------------------------------------
   7. WHATSAPP FLOAT (shared)
   ------------------------------------------------------------ */
.whatsapp-float {
    position: fixed;
    width: 58px;
    height: 58px;
    bottom: 32px;
    left: 32px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    z-index: var(--z-float);
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover {
    background: #128C7E;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36);
}

/* ------------------------------------------------------------
   8. SCROLL REVEAL UTILITIES (progressive enhancement)
   Elements marked [data-reveal] fade/slide in when observed.
   Without JS they stay fully visible (no-js safe).
   ------------------------------------------------------------ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.3s; }

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

/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .navbar.custom-navbar { top: 12px; border-radius: var(--radius-lg); }
    .navbar.custom-navbar .navbar-collapse {
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: rgba(0, 39, 61, 0.6);
        border-radius: var(--radius);
    }
    .navbar.custom-navbar .navbar-nav { text-align: center; }
}