/* =========================================================
   Knauf Case Study Page
   ========================================================= */

:root {
    --knauf-blue: #0066B3;
    --knauf-blue-dark: #003F73;
    --knauf-blue-light: #2F8FD6;
    --knauf-blue-pale: #CFE3F4;
}

/* ---------- 1. HERO (full-bleed video) ---------- */
.knauf-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    background: #000;
}

.knauf-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.knauf-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(2.5rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 74% 18%, rgba(0,102,179,0.24) 0%, transparent 36%),
        linear-gradient(180deg, rgba(0,0,0,0.05) 28%, rgba(0,30,58,0.72) 100%);
    color: #fff;
}

.knauf-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 1rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(0,102,179,0.20);
    backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.knauf-hero__brand-card {
    width: clamp(150px, 20vw, 240px);
    min-height: clamp(78px, 10vw, 112px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px;
    border-radius: 18px;
    background: rgba(255,255,255,0.93);
    box-shadow: 0 16px 42px rgba(0,0,0,0.28);
    margin-bottom: 1.3rem;
}

.knauf-hero__logo {
    display: block;
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.knauf-hero h1 {
    color: #fff;
    font-family: 'Montserrat', 'Geomanist', sans-serif;
    font-size: clamp(3.3rem, 8.2vw, 7.4rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.065em;
    margin: 0 0 1rem;
    text-transform: uppercase;
    text-shadow: 0 12px 32px rgba(0,30,58,0.38);
}

.knauf-hero__title {
    font-family: 'Geomanist', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 8rem);
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem;
}

.knauf-hero__subtitle {
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    color: rgba(255,255,255,0.86);
    margin: 0;
}

@media (max-width: 768px) {
    .knauf-hero { height: 72vh; min-height: 470px; }
    .knauf-hero__brand-card { border-radius: 14px; }
}

/* ---------- 1.5. LOREM INTRO ---------- */
.knauf-intro {
    background: #FFFFFF;
    color: #1A1A1A;
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.knauf-intro__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

@media (max-width: 768px) {
    .knauf-intro {
        padding: 3rem 0 3.4rem;
        background: linear-gradient(180deg, #fff 0%, #F4FAFF 100%);
    }

    .knauf-intro__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .knauf-intro__text {
        max-width: 92%;
        margin: 0 auto;
        text-align: center;
        font-size: clamp(1.18rem, 5vw, 1.55rem);
        line-height: 1.55;
    }

    .knauf-intro__logo-container {
        display: none;
    }
}

.knauf-intro__text {
    font-family: 'Geomanist', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    line-height: 1.5;
}

.knauf-intro__highlight {
    font-weight: 700;
    color: #2F8FD6; /* KNAUF Cyan-like color */
}

.knauf-intro__logo-container {
    text-align: right;
}

.knauf-intro__logo {
    max-width: 100%;
    width: clamp(150px, 15vw, 250px);
    height: auto;
}

/* ---------- 2. STORY ---------- */
.knauf-story {
    background: #FAFAFA;
    color: #1A1A1A;
    padding: clamp(4rem, 8vw, 8rem) 0;
}

.knauf-story__grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

@media (max-width: 768px) {
    .knauf-story__grid { grid-template-columns: 1fr; }
}

.knauf-story__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--knauf-blue);
    font-weight: 700;
    margin-bottom: 0.4rem;
    margin-top: 1.2rem;
}

.knauf-story__label:first-child {
    margin-top: 0;
}

.knauf-story__meta h3 {
    font-family: 'Geomanist', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}

.knauf-story__meta p { margin: 0; color: #444; }

.knauf-story__body h2 {
    font-family: 'Geomanist', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.knauf-story__body p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.2rem;
}

/* ---------- 3. SHOWCASE (Absolute Pozisyonlama, Serbest Katmanlar) ---------- */
.knauf-showcase {
    position: relative;
    overflow: hidden;
    background: var(--knauf-blue);
    width: 100%;
    /* Referans görseldeki oranlara uymak için yatay dikdörtgen form */
    aspect-ratio: 16 / 9;
    min-height: 520px;
}

/* Tüm resimlerin ortak .k-abs sınıfı */
.k-abs {
    position: absolute;
    /* Resmi sığdırmak için cover ya da contain kullanılabilir ama varsayılan olarak bırakılacak, sınıflara göre ezilecek */
}

/* =======================================
   Arka Plan Katmanı (z-index: 1 veya düşük)
   yan yana dikey şeritler 
   ======================================= */

.k-bg-main {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* En soldaki siyah kutu (içinde mavi şemsiye ve evcik) */
.k-bg-ev {
    top: 21%;
    left: 0%;
    width: 11%;
    height: 36%;
    object-fit: cover;
    z-index: 2;
}

/* Soldan 2. mermer duvar */
.k-bg-marble {
    top: 0;
    left: 11%;
    width: 22%;
    height: 65%;
    object-fit: cover;
    z-index: 2;
}

/* Üst-ortadaki mavi büyük şemsiyeli blok */
.k-bg-umbrella {
    top: 0;
    left: 33%;
    width: 11.5%;
    height: 35.5%;
    object-fit: cover;
    z-index: 2;
}

/* Açık mavi düz kutu eklentisi */
.k-bg-lightpanel {
    display: none;
}

/* Suyun üstündeki sandal */
.k-bg-sandal {
    bottom: 8%;
    left: 33%;
    width: 11.5%;
    height: 35%;
    object-fit: cover;
    z-index: 2;
}

/* Sağ-ortadaki mikrofonlu siyah oda */
.k-bg-mikrofon {
    top: 21%;
    left: 66.5%;
    width: 11.5%;
    height: 36%;
    object-fit: cover;
    z-index: 2;
}

/* Uzay zemini */
.k-bg-uzay {
    bottom: 0%;
    left: 66.5%;
    width: 11.5%;
    height: 35%;
    object-fit: cover;
    z-index: 2;
}

/* En sağdaki yıkım topu ve açık mavi duvarlı oda */
.k-bg-wrecking {
    top: 0%;
    right: 0%;
    width: 22%;
    height: 70%;
    object-fit: cover;
    z-index: 2;
}

/* =======================================
   Ön Plan Patlama Katmanı (z-index: 10)
   TAM ÜZERİNE gelmeli ve dışarı taşmalıdır.
   ======================================= */

.k-fg-heykel {
    top: 30%;
    left: 8.5%;
    width: 23%;
    z-index: 10;
}

.k-fg-boya {
    top: 50%;
    left: 22%;
    width: 14%;
    z-index: 9;
}

.k-fg-kaplumbaga {
    bottom: 2%;
    left: 0.5%;
    width: 15%;
    z-index: 10;
}

/* Metinler dikey blokların birleşme noktalarına */
.k-fg-creative {
    bottom: 32%;
    left: 11%;
    width: 22%;
    z-index: 10;
}

.k-fg-design {
    bottom: 25%;
    left: 11%;
    width: 17%;
    z-index: 10;
}

.k-fg-tool {
    bottom: 17%;
    left: 11%;
    width: 14%;
    z-index: 10;
}

/* Tam merkezde boşlukta asılı duran dev kulaklık */
.k-fg-kulaklik {
    top: 0%;
    left: 44.5%;
    width: 22%;
    z-index: 30;
    /* Merkezdeki mavi boşluk 44.5% - 66.5% arası */
}

/* client knauf yazısı alt-sağ merkezde */
.k-fg-client {
    bottom: 30.5%;
    left: 58.5%;
    width: 4.5%;
    z-index: 40;
}

.k-fg-knauf {
    bottom: 23.5%;
    left: 52%;
    width: 12%;
    z-index: 40;
}

/* Astronot uzay zemininde (Group 3.png kız astronotun solunda) */
.k-fg-astronot {
    bottom: -1%;
    left: 57%;
    width: 21%;
    z-index: 15;
}

/* Kız ve astronot sağ alt köşede yıkım topunun ve uzayın önünde */
.k-fg-kiz {
    bottom: -1%;
    left: 71%;
    width: 14%;
    z-index: 20;
}

/* Mobil */
@media (max-width: 768px) {
    .knauf-showcase {
        aspect-ratio: 4 / 3;
        min-height: 340px;
    }

    .k-bg-main {
        object-position: center;
    }

    .k-fg-creative,
    .k-fg-design,
    .k-fg-tool,
    .k-fg-client,
    .k-fg-knauf {
        display: none;
    }

    .k-fg-kulaklik {
        top: 4%;
        left: 42%;
        width: 26%;
    }

    .k-fg-astronot {
        left: 52%;
        width: 28%;
    }

    .k-fg-kiz {
        left: 72%;
        width: 18%;
    }

    .ktype--creative { bottom: 36%; }
    .ktype--design   { bottom: 26%; }
    .ktype--tool     { bottom: 16%; }
    .knauf-clientpanel { left: 48%; top: 26%; width: 18%; height: 56%; }
}

/* ---------- Outro ---------- */
.knauf-outro {
    background: #fff;
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.knauf-outro h2 {
    font-family: 'Geomanist', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    margin: 0.5rem 0 1rem;
}

.knauf-outro p { color: #555; max-width: 640px; margin: 0 auto 2rem; }

/* ---------- 4. SOSYAL MEDYA ---------- */
.knauf-social {
    position: relative;
    background-color: #FAFAFA;
    padding: clamp(7rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
    overflow: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&display=swap');

.knauf-social-title {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', 'Geomanist', sans-serif;
    font-weight: 900; /* Daha modern, kalın ve güçlü duruş */
    font-size: clamp(3rem, 7vw, 5.5rem);
    color: #009EE3; /* Knauf Orijinal Logo Cyan Rengi */
    text-transform: uppercase;
    letter-spacing: 0.02em; /* Daha tok ve derli toplu modern görünüm */
    margin-bottom: 3.5rem;
    line-height: 1.1;
}

.knauf-social-masonry {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 15px;
    max-width: 1400px;
    margin: 0 auto;
}

.knauf-social-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 300px;
}

.knauf-social-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease;
}

.knauf-social-col img:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 22px 42px rgba(0,0,0,0.22);
    z-index: 5;
    position: relative;
}

/* ---------- 5. PRODUCTS SHOWCASE (PNG4) ---------- */
.knauf-products-showcase {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Reference proportion for the 3 side-by-side products image */
    aspect-ratio: 16 / 9;
    min-height: 520px;
    background: #0066B3; /* Default fallback matching background */
}

@media (max-width: 768px) {
    .knauf-products-showcase {
        aspect-ratio: auto;
        min-height: 420px;
    }

    .knauf-products-showcase .knauf-social-title {
        font-size: 2.25rem !important;
    }

    .kp-fg-1,
    .kp-fg-2,
    .kp-fg-3 {
        top: 30%;
        width: 29%;
    }

    .kp-fg-1 { left: 3%; }
    .kp-fg-2 { left: 35.5%; }
    .kp-fg-3 { left: 68%; }
}

.kp-bg-main {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* We have 3 product images to display side by side (3 columns effect) */
.kp-fg-1 {
    top: 24%;
    left: 7%;
    width: 24%;
    z-index: 10;
}

.kp-fg-2 {
    top: 24%;
    left: 38%;
    width: 24%;
    z-index: 10;
}

.kp-fg-3 {
    top: 24%;
    left: 69%;
    width: 24%;
    z-index: 10;
}

.knauf-products-showcase .k-abs {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.knauf-products-showcase .k-abs:not(.kp-bg-main):hover {
    transform: translateY(-14px) scale(1.08) !important;
    filter: drop-shadow(0 22px 32px rgba(0,0,0,0.5));
    z-index: 50;
}

.knauf-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: var(--knauf-blue);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}
.knauf-back:hover { background: var(--knauf-blue-dark); transform: translateY(-2px); color: #fff; }

/* ---------- 6. DİĞER MARKALARIMIZ ---------- */
.knauf-other-brands {
    background: #FFFFFF;
    padding: clamp(6rem, 8vw, 10rem) 0;
}

.knauf-other-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: #1A1A1A;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.other-brand-card,
.knauf-other-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFC;
    border: 1px solid #F0F0F0;
    height: 300px;
    border-radius: 8px;
    text-decoration: none;
    color: #777;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.other-brand-card:hover,
.knauf-other-card:hover {
    background: #FFFFFF;
    transform: translateY(-8px);
    color: var(--knauf-blue);
    border-color: var(--knauf-blue-pale);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Reduced motion: disable parallax transforms */
@media (prefers-reduced-motion: reduce) {
    .knauf-showcase [data-speed] { transform: none !important; }
}

/* ---------- Hover scale (background harici tum gorseller hafif buyur) ---------- */
/* Parallax JS, .knauf-showcase [data-speed] elemanlarinin transform'unu
   surekli setlediginden, hover icin ayri bir CSS scale, "transform: scale()"
   ile rakipsiz olarak calismaz. Bu yuzden hover'da CSS variable yerine
   wrapper'lar uzerinden ya da !important ile uygulamak gerekir. Burada
   strip ve nesnelere hover'da scale ataniyor; .knauf-bg HARIC. */

/* Hover Effects on New Architecture */
.knauf-showcase .k-abs {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.knauf-showcase .k-abs:not(.k-bg-main):not(.k-bg-lightpanel):not(.k-bg-marble):hover {
    transform: scale(1.08) !important;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
    z-index: 60;
}

/* ---------- VİDEO ÇALIŞMALARI ---------- */
.knauf-videos {
    background: #FFFFFF;
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 6rem);
}

.knauf-videos .knauf-social-title {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.knauf-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
}

@media (max-width: 992px) {
    .knauf-video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .knauf-video-grid { grid-template-columns: 1fr; }
}

.knauf-video-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    aspect-ratio: 9 / 16;
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}

.knauf-video-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 24px 46px rgba(0,0,0,0.25);
    z-index: 5;
}

.knauf-video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}