/* ============================================================
   Kullar İnşaat — Custom Stylesheet
   All CDN-based: No build step required
   ============================================================ */

/* CSS Custom Properties */
:root {
    --color-ivory:    #F6F4EF;
    --color-sand:     #E8E3D8;
    --color-charcoal: #1A1A1A;
    --color-graphite: #2B2B2B;
    --color-brandred: #8B0000;
    --color-bronze:   #C5A55A;
    --color-mutedk:   #6b6b66;
    --font-sans:  'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
    background: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Layout ── */
.container-x {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 64px);
}

/* ── Typography helpers ── */
.eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-bronze);
    font-weight: 500;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all .3s ease;
    cursor: pointer;
    background: transparent;
}
.btn:hover { background: var(--color-charcoal); color: var(--color-ivory); border-color: var(--color-charcoal); }
.btn .arr { transition: transform .3s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-red { background: var(--color-brandred); color: #fff; border-color: var(--color-brandred); }
.btn-red:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); }
.btn-light { color: #fff; }
.btn-light:hover { background: #fff; color: var(--color-charcoal); border-color: #fff; }

/* ── Reveal Animation (fallback for AOS) ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
.reveal.on {
    opacity: 1;
    transform: translateY(0);
}

/* ── Sections ── */
.section { padding: 140px 0; }
@media (max-width: 768px) { .section { padding: 80px 0; } }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 70px;
    gap: 40px;
    flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(40px, 5vw, 76px); max-width: 14ch; }
.section-head .right { max-width: 380px; color: var(--color-mutedk); font-size: 15px; }

/* ── Hero Slider ── */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.on { opacity: 1; }
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.78) 100%);
    z-index: 2;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; animation: zoomIn 9s ease forwards; }
@keyframes zoomIn { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ── Pulse dot ── */
.pulse-dot { box-shadow: 0 0 0 4px rgba(139,0,0,.18); animation: pulse 2s infinite; }
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(139,0,0,.18); }
    50%      { box-shadow: 0 0 0 8px rgba(139,0,0,.05); }
}

/* ── Carousel ── */
.carousel {
    display: flex;
    gap: 24px;
    padding-bottom: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: 0 0 min(420px, 85vw); }

/* ── Project Card ── */
.project-card .img-wrap { position: relative; overflow: hidden; }
.project-card .img-wrap img {
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
    width: 100%; height: 100%; object-fit: cover;
}
.project-card:hover .img-wrap img { transform: scale(1.06); }
.project-card .info-row { border-top: 1px solid transparent; transition: border-color .4s; }
.project-card:hover .info-row { border-color: var(--color-brandred); }
.project-card:hover .arrow-btn {
    background: var(--color-brandred);
    color: #fff;
    border-color: var(--color-brandred);
    transform: rotate(-45deg);
}
.arrow-btn {
    width: 42px; height: 42px;
    border: 1px solid currentColor;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .3s;
}

/* ── Primary Nav ── */
nav.primary a { position: relative; padding: 6px 0; }
nav.primary a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--color-brandred);
    transition: width .3s ease;
}
nav.primary a:hover::after { width: 100%; }

/* ── Header ── */
header.site { transition: color .4s ease, background .4s ease; color: #fff; }
header.site .top-veil {
    position: absolute; inset: 0 0 auto 0; height: 180px; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%);
    transition: opacity .4s ease;
}
header.site .logo-img { filter: brightness(0) invert(1); transition: filter .4s ease; }
header.site nav.primary a,
header.site .lang a,
header.site .phone { color: #fff; }
header.site .lang a.active { border-color: #fff; color: #fff; }

header.site.scrolled {
    background: rgba(246,244,239,.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    color: var(--color-charcoal);
}
header.site.scrolled .top-veil { opacity: 0; }
header.site.scrolled .logo-img { filter: brightness(0) invert(0); }
header.site.scrolled nav.primary a,
header.site.scrolled .lang a,
header.site.scrolled .phone { color: var(--color-charcoal); }
header.site.scrolled .lang a.active { border-color: var(--color-brandred); }

/* ── Hamburger ── */
.hamburger .ham-line { transition: all .3s ease; }
.hamburger.is-open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .ham-line:nth-child(2) { opacity: 0; }
.hamburger.is-open .ham-line:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }
[x-cloak] { display: none !important; }

/* ── WhatsApp FAB ── */
.whatsapp-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,.4);
    transition: transform .3s ease, box-shadow .3s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.55); }
.whatsapp-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* ── Counter animation ── */
.counter-num {
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1;
}

/* ── Form inputs ── */
.form-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.3);
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: 16px;
    outline: none;
    transition: border-color .3s;
}
.form-input:focus { border-color: var(--color-brandred); }

/* ── Gallery GLightbox ── */
.glightbox-open { overflow: hidden; }

/* ── Swiper custom ── */
.swiper-pagination-bullet-active { background: var(--color-brandred) !important; }
.swiper-button-next,
.swiper-button-prev { color: var(--color-brandred) !important; }

/* ── Footer ── */
footer a:hover { color: var(--color-bronze); }

/* ── Page hero (inner pages) ── */
.page-hero {
    position: relative;
    height: 50vh;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    background: var(--color-charcoal);
    overflow: hidden;
}
.page-hero img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; opacity: .4;
}
.page-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--color-charcoal), transparent);
}
.page-hero .hero-content { position: relative; z-index: 2; padding-bottom: 56px; }

/* ── Blog card ── */
.post-card { transition: transform .3s ease; }
.post-card:hover { transform: translateY(-4px); }
.post-card .cover { overflow: hidden; aspect-ratio: 16/10; }
.post-card .cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.post-card:hover .cover img { transform: scale(1.06); }

/* ── Project filter buttons ── */
.filter-btn {
    padding: 8px 20px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 9999px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
    background: transparent;
}
.filter-btn.active,
.filter-btn:hover {
    background: var(--color-brandred);
    color: #fff;
    border-color: var(--color-brandred);
}