/* Shared Styles for Isı Yalıtım Subpages */
/* Purpose: Common tokens, badge styling, and shared micro-interactions */

/* --- Typography Tokens --- */
:root {
    --font-serif-tech: 'Playfair Display', serif;
    /* Editorial/Premium technical feel */
    --font-heading-tech: 'Inter', sans-serif;
    --color-gold-muted: #c5a47e;
    --color-red-alert: #e53935;
    --color-dark-surface: #121212;
    --color-dark-surface-2: #1e1e1e;
    --border-thin: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Shared Badge (Header) Style --- */
/* Strict Rule: Same size/pos as global badge, but enriched */
.subpage-header {
    position: relative;
    padding: var(--space-xl) 0 var(--space-md);
    margin-bottom: var(--space-lg);
    background-color: var(--color-bg-alt);
    overflow: hidden;
    /* Ensure no bleed */
}

.subpage-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Default dark overlay */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    z-index: 1;
}

.subpage-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.6;
    filter: grayscale(80%) contrast(1.2);
}

.subpage-header-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.subpage-title {
    font-family: var(--font-heading-tech);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
}

.subpage-desc {
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.6;
    font-weight: 300;
}

/* --- Shared Animation Classes --- */
.fade-up-tech {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up-tech.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-text-line {
    position: relative;
    overflow: hidden;
}

.reveal-text-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.reveal-text-line.animate::after {
    animation: revealLine 0.8s ease forwards;
}

@keyframes revealLine {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
    }

    51% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

/* --- Common Layout Utilities --- */
.tech-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section-spacer {
    height: 150px;
}