/* ================================================
   NİSALİ İNŞAAT - Design System CSS
   Light/Dark theme via CSS custom properties.
   Colors as space-separated RGB for Tailwind opacity support.
   ================================================ */

/* === Material Symbols Baseline === */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

/* === LIGHT THEME (Default) === */
/* Warm neutral palette — avoids harsh pure-white glare.
   Off-white base with subtle warm undertone for a premium,
   easy-on-the-eyes reading experience. */
:root {
    --color-background: 243 240 237;
    --color-on-background: 32 30 28;
    --color-surface: 243 240 237;
    --color-surface-dim: 215 210 206;
    --color-surface-bright: 248 246 243;
    --color-surface-container-lowest: 248 246 243;
    --color-surface-container-low: 240 237 233;
    --color-surface-container: 234 231 227;
    --color-surface-container-high: 228 225 220;
    --color-surface-container-highest: 222 218 214;
    --color-on-surface: 32 30 28;
    --color-on-surface-variant: 72 68 63;
    --color-surface-tint: 82 78 72;
    --color-surface-variant: 222 218 214;
    --color-primary: 70 80 95;
    --color-primary-container: 205 215 230;
    --color-primary-fixed: 205 215 230;
    --color-primary-fixed-dim: 170 182 200;
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 20 28 40;
    --color-on-primary-fixed: 20 28 40;
    --color-on-primary-fixed-variant: 52 62 78;
    --color-secondary: 156 78 10;
    --color-secondary-container: 248 215 195;
    --color-secondary-fixed: 248 215 195;
    --color-secondary-fixed-dim: 230 168 120;
    --color-on-secondary: 255 255 255;
    --color-on-secondary-container: 56 22 0;
    --color-on-secondary-fixed: 56 22 0;
    --color-on-secondary-fixed-variant: 128 58 4;
    --color-tertiary: 58 66 72;
    --color-tertiary-container: 212 218 226;
    --color-tertiary-fixed: 212 218 226;
    --color-tertiary-fixed-dim: 180 188 198;
    --color-on-tertiary: 255 255 255;
    --color-on-tertiary-container: 22 28 34;
    --color-on-tertiary-fixed: 22 28 34;
    --color-on-tertiary-fixed-variant: 58 66 72;
    --color-outline: 110 106 100;
    --color-outline-variant: 192 187 182;
    --color-error: 176 30 30;
    --color-error-container: 252 210 205;
    --color-on-error: 255 255 255;
    --color-on-error-container: 62 0 4;
    --color-inverse-surface: 50 47 44;
    --color-inverse-on-surface: 242 240 237;
    --color-inverse-primary: 170 182 200;
    --color-copper: 180 92 32;
    --color-copper-hover: 150 75 22;

    /* Glass effect base — warm tinted, not pure white */
    --glass-bg: rgba(243, 240, 237, 0.72);
    --glass-border: rgba(60, 50, 40, 0.08);
    --glass-card-bg: rgba(248, 246, 243, 0.75);
    --glass-card-border: rgba(60, 50, 40, 0.1);
    --hex-stroke: rgba(60, 50, 40, 0.03);
}

/* === DARK THEME === */
.dark {
    --color-background: 18 20 20;
    --color-on-background: 226 226 226;
    --color-surface: 18 20 20;
    --color-surface-dim: 18 20 20;
    --color-surface-bright: 55 57 58;
    --color-surface-container-lowest: 12 15 15;
    --color-surface-container-low: 26 28 28;
    --color-surface-container: 30 32 32;
    --color-surface-container-high: 40 42 43;
    --color-surface-container-highest: 51 53 53;
    --color-on-surface: 226 226 226;
    --color-on-surface-variant: 196 198 204;
    --color-surface-tint: 186 200 220;
    --color-surface-variant: 51 53 53;
    --color-primary: 186 200 220;
    --color-primary-container: 13 27 42;
    --color-primary-fixed: 214 228 249;
    --color-primary-fixed-dim: 186 200 220;
    --color-on-primary: 36 49 65;
    --color-on-primary-container: 118 132 151;
    --color-on-primary-fixed: 15 28 44;
    --color-on-primary-fixed-variant: 58 72 89;
    --color-secondary: 255 182 141;
    --color-secondary-container: 151 68 1;
    --color-secondary-fixed: 255 219 201;
    --color-secondary-fixed-dim: 255 182 141;
    --color-on-secondary: 83 34 0;
    --color-on-secondary-container: 255 201 173;
    --color-on-secondary-fixed: 51 18 0;
    --color-on-secondary-fixed-variant: 118 51 0;
    --color-tertiary: 191 199 208;
    --color-tertiary-container: 19 27 34;
    --color-tertiary-fixed: 219 227 237;
    --color-tertiary-fixed-dim: 191 199 208;
    --color-on-tertiary: 41 49 56;
    --color-on-tertiary-container: 124 132 140;
    --color-on-tertiary-fixed: 21 28 35;
    --color-on-tertiary-fixed-variant: 64 72 79;
    --color-outline: 142 145 150;
    --color-outline-variant: 68 71 76;
    --color-error: 255 180 171;
    --color-error-container: 147 0 10;
    --color-on-error: 105 0 5;
    --color-on-error-container: 255 218 214;
    --color-inverse-surface: 226 226 226;
    --color-inverse-on-surface: 47 49 49;
    --color-inverse-primary: 82 95 113;
    --color-copper: 200 105 42;
    --color-copper-hover: 165 85 32;

    /* Glass effect base */
    --glass-bg: rgba(13, 27, 42, 0.4);
    --glass-border: rgba(176, 184, 193, 0.1);
    --glass-card-bg: rgba(13, 27, 42, 0.6);
    --glass-card-border: rgba(176, 184, 193, 0.15);
    --hex-stroke: rgba(51, 53, 53, 0.15);
}

/* === Glassmorphism Components === */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.glass-card {
    background: var(--glass-card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-card-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
}

@media (hover: hover) {
    .glass-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 0 15px rgba(200, 105, 42, 0.12);
        transform: translateY(-4px);
    }
}

@media (hover: none) {
    .glass-card:active {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 0 15px rgba(200, 105, 42, 0.12);
        transform: translateY(-2px);
    }
}

/* === Copper Accent Effects === */
.copper-accent {
    box-shadow: inset 0 0 10px rgba(200, 105, 42, 0.2);
}

.copper-glow {
    box-shadow: inset 0 0 15px rgba(200, 105, 42, 0.15);
}

/* === Background Patterns === */
.hex-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='103.923' viewBox='0 0 60 103.923' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 17.32v34.64L30 69.28 0 51.96V17.32z' fill='none' stroke='currentColor' stroke-width='0.5' stroke-opacity='0.08'/%3E%3C/svg%3E");
}

/* === Text Effects === */
.text-glow {
    text-shadow: 0 0 20px rgba(var(--color-secondary), 0.3);
}

/* === Filter Buttons (Projects) === */
.filter-btn {
    transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn[aria-pressed="true"] {
    color: rgb(var(--color-copper));
    border-bottom: 2px solid rgb(var(--color-copper));
}

/* === Scroll Animations === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.animate-fade-in.visible {
    opacity: 1;
}

.animate-slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* === WhatsApp Button === */
.whatsapp-btn {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    right: calc(30px + env(safe-area-inset-right));
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7), 0 0 0 6px rgba(37, 211, 102, 0.08); }
}

.whatsapp-btn {
    animation: whatsapp-pulse 4s ease-in-out infinite;
}

.whatsapp-btn svg {
    width: 32px;
    height: 32px;
    fill: white;
}

/* === Mobile Menu === */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgb(var(--color-background) / 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-top: 5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

/* === Smooth Scroll === */
html {
    scroll-behavior: auto;
    overflow-x: clip;
    max-width: 100vw;
}

body {
    overflow-x: clip;
    max-width: 100vw;
}

/* === Theme Transition === */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-on-scroll,
    .animate-fade-in,
    .animate-slide-left,
    .animate-slide-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .glass-card:hover {
        transform: none;
    }

    .whatsapp-btn:hover {
        transform: none;
    }

    .whatsapp-btn {
        animation: none;
    }

    html.theme-transitioning,
    html.theme-transitioning *,
    html.theme-transitioning *::before,
    html.theme-transitioning *::after {
        transition: none !important;
    }
}

/* === Accordion (SSS) === */
.accordion-content {
    transition: max-height 0.4s ease, opacity 0.4s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    display: grid;
    gap: 1rem;
}

.accordion-item.active .accordion-content {
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.accordion-content .h-px {
    margin: 0;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-item {
    border: 1px solid rgb(var(--color-outline-variant) / 0.2);
}

.accordion-item:hover {
    border-color: rgb(var(--color-secondary) / 0.35);
}

.accordion-item.active {
    border-color: rgb(var(--color-secondary) / 0.5);
    box-shadow: inset 0 0 0 1px rgb(var(--color-secondary) / 0.12);
}

/* === Selection === */
::selection {
    background: rgba(var(--color-secondary), 0.3);
    color: rgb(var(--color-secondary));
}

/* === Mobile Responsive Overrides === */
@media (max-width: 768px) {
    .whatsapp-btn {
        width: 52px;
        height: 52px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }

    .whatsapp-btn svg {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        gap: 1.5rem;
        padding-top: 4rem;
    }

    .hero-scroll-indicator {
        display: none;
    }
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--color-surface));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--color-outline-variant));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-outline));
}

/* === Responsive Adjustments === */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.partner-name {
    font-size: clamp(14px, 2.2vw, 22px);
    line-height: 1.2;
    letter-spacing: 0.18em;
}

/* === Focus Visible (Keyboard users only) === */
:focus-visible {
    outline: 2px solid rgb(var(--color-secondary));
    outline-offset: 2px;
    border-radius: 2px;
}

/* === Image lazy loading placeholder === */
img[loading="lazy"] {
    background-color: rgb(var(--color-surface-container));
    transition: opacity 0.3s ease;
}

/* === Project card filter transition === */
[data-project-status] {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* === Theme Toggle Button === */
.theme-toggle {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-outline-variant));
    background: rgb(var(--color-surface-container));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.theme-toggle:hover {
    border-color: rgb(var(--color-secondary));
    background: rgb(var(--color-secondary) / 0.1);
}

.theme-toggle .material-symbols-outlined {
    font-size: 20px;
    color: rgb(var(--color-on-surface));
    transition: color 0.3s ease;
}