/* ============================================================
   MARKA DEĞİŞKENLERİ — Yeni logo paleti
   ============================================================
   Kırmızı  → ana vurgu: CTA'lar, başlık vurguları, aktif linkler,
              kart üst çizgileri (yorum), harita aktif durumu
   Siyah    → yapısal alanlar: header, footer, istatistik bandı
   Sarı     → hizmet ikonları + bölüm vurguları (eyebrow, ayraç,
              service card top border, footer üst çizgisi)
   Turuncu  → sadece yıldızlar için küçük aksan
   ============================================================ */
:root {
    --color-primary:       #e31e24;
    --color-primary-dark:  #b3151a;
    --color-primary-rgb:   227, 30, 36;

    --color-dark:          #1a1a1a;
    --color-dark-alt:      #2a2a2a;

    --color-yellow:        #f2b705;
    --color-yellow-rgb:    242, 183, 5;
    --color-yellow-soft:   rgba(242, 183, 5, .12);
    --color-yellow-softer: rgba(242, 183, 5, .22);

    --color-accent:        #f5a623;
    --color-accent-rgb:    245, 166, 35;

    --color-bg:            #ffffff;
    --color-bg-alt:        #f7f7f7;
    --color-text:          #1a1a1a;
    --color-text-muted:    #6b6b6b;
    --color-border:        #ececec;

    /* Geriye dönük alias'lar */
    --brand:        var(--color-yellow);
    --brand-rgb:    242, 183, 5;
    --accent-red:   var(--color-primary);
    --accent-red-rgb: 227, 30, 36;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

/* ---------- HEADER (Navbar) ---------- */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 8%;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: background .35s ease;
}

.navbar.scrolled {
    background: rgba(26, 26, 26, .96);
    backdrop-filter: blur(12px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 6px;
    border: 1px solid rgba(227, 30, 36, .55);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    transition: border-color .3s ease, background .3s ease;
}

.logo:hover {
    border-color: rgba(227, 30, 36, .9);
    background: rgba(255, 255, 255, .06);
}

.logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-top {
    font-size: 16px;
    font-weight: 800;
    color: white;
    letter-spacing: .3px;
}

.logo-bottom {
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
}

.nav-links a {
    position: relative;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0;
    transition: color .3s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .3s ease;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-btn {
    padding: 12px 22px;
    font-size: 14px;
}

/* ---------- HERO ---------- */

.hero {
    position: relative;
    min-height: 88vh;
    background-color: var(--color-dark);
    background-image: url("../assest/images/hero-manitou.webp");
    background-image: -webkit-image-set(url("../assest/images/hero-manitou.webp") 1x);
    background-image: image-set(
        url("../assest/images/hero-manitou.webp") type("image/webp") 1x,
        url("../assest/images/hero-manitou.jpg") type("image/jpeg") 1x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0 8%;
    overflow: hidden;
}

/* Mobil: küçük versiyon (76 KB WebP) — LCP için kritik */
@media (max-width: 720px) {
    .hero {
        background-image: url("../assest/images/hero-manitou-mobile.webp");
        background-image: -webkit-image-set(url("../assest/images/hero-manitou-mobile.webp") 1x);
        background-image: image-set(
            url("../assest/images/hero-manitou-mobile.webp") type("image/webp") 1x,
            url("../assest/images/hero-manitou-mobile.jpg") type("image/jpeg") 1x
        );
    }
}

/* WebP desteklemeyen tarayıcılar için JPG fallback */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
    .hero {
        background-image: url("../assest/images/hero-manitou.jpg");
    }
    @media (max-width: 720px) {
        .hero {
            background-image: url("../assest/images/hero-manitou-mobile.jpg");
        }
    }
}

/* Diyagonal kırmızı-siyah gradyan overlay (logo kolundaki diyagonalden ilham) */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(227, 30, 36, .55) 0%,
        rgba(26, 26, 26, .7) 35%,
        rgba(26, 26, 26, .92) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    color: white;
    padding-top: 60px;
}

.hero-tag {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 9px 18px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), .4);
}

/* Premium başlık */
.hero-title {
    font-family: "Oswald", sans-serif;
    font-size: clamp(38px, 5.6vw, 68px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.5px;
    margin: 24px 0 0;
    color: white;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.hero-title-accent {
    color: var(--color-primary);
    display: inline-block;
}

/* Sarı ayraç */
.hero-divider {
    width: 80px;
    height: 5px;
    background: var(--color-yellow);
    margin: 28px 0 32px;
    border-radius: 3px;
}

/* Açıklama */
.hero-lead {
    font-size: 19px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .9);
    max-width: 600px;
    margin: 0 0 36px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

/* Şirket istatistikleri kartı */
.hero-stats {
    display: flex;
    align-items: stretch;
    padding: 22px 28px;
    margin-bottom: 32px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid var(--color-primary);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 600px;
}

.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}

.hero-stat strong {
    font-family: "Oswald", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: white;
    line-height: 1;
    letter-spacing: 1px;
}

.hero-stat span {
    font-size: 11px;
    color: rgba(255, 255, 255, .65);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
}

.hero-stat-divider {
    width: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 4px 18px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    padding: 17px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .3px;
    box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), .4);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(var(--color-primary-rgb), .5);
}

.btn-primary svg {
    width: 18px;
    height: 18px;
}

.btn-secondary {
    border: 2px solid var(--color-primary);
    color: white;
    background: transparent;
    text-decoration: none;
    padding: 15px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    transition: background .25s ease, color .25s ease;
    display: inline-flex;
    align-items: center;
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: white;
}

/* Güven microcopy */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.hero-trust-stars {
    color: var(--color-yellow);
    letter-spacing: 3px;
    font-size: 14px;
}

.hero-trust-text {
    line-height: 1.5;
}

/* ---------- SECTION HEADER (eyebrow + h2 ayraç) ---------- */

.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title .eyebrow {
    color: var(--color-yellow);
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-block;
    background: var(--color-yellow-soft);
    padding: 6px 14px;
    border-radius: 50px;
}

.section-title h2 {
    font-family: "Oswald", sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin-bottom: 18px;
    color: var(--color-text);
    position: relative;
}

/* h2 altına sarı ayraç çubuğu */
.section-title h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: var(--color-yellow);
    margin: 16px auto 0;
    border-radius: 2px;
}

.section-title p {
    color: var(--color-text-muted);
    max-width: 660px;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------- SERVİSLER ---------- */

.services {
    background: var(--color-bg);
    padding: 110px 8%;
}

.service-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-yellow);
    border-radius: 12px;
    padding: 38px 28px 32px;
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 40px rgba(var(--color-primary-rgb), .18);
}

/* Numaralı rozet (isteğe bağlı, h2'ye uyumlu) */
.service-card-num {
    position: absolute;
    top: 18px;
    right: 28px;
    font-family: "Oswald", sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: rgba(34, 34, 34, .06);
    line-height: 1;
    letter-spacing: -2px;
    z-index: 0;
    pointer-events: none;
    transition: color .35s ease, transform .35s ease;
}

.service-card:hover .service-card-num {
    color: rgba(227, 30, 36, .1);
    transform: scale(1.05);
}

/* Üst kırmızı aksan çubuğu — hover'da tüm genişliğe yayılır */
.service-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background: var(--color-primary);
    transition: width .4s cubic-bezier(.65, 0, .35, 1);
    z-index: 1;
}

.service-card:hover .service-card-accent {
    width: 100%;
}

/* Sarı ikon (bölüm vurgusu) */
.service-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--color-yellow-soft);
    color: var(--color-yellow);
    margin-bottom: 22px;
    border: 1px solid rgba(242, 183, 5, .25);
    transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.service-icon svg {
    width: 30px;
    height: 30px;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(-4deg);
    background: var(--color-yellow-softer);
    box-shadow: 0 8px 20px rgba(242, 183, 5, .25);
}

.service-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    color: var(--color-text);
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .3px;
}

.service-card p {
    position: relative;
    z-index: 1;
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.service-card-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .3px;
    transition: gap .25s ease, color .25s ease;
}

.service-card-link:hover {
    gap: 14px;
    color: var(--color-primary-dark);
}

/* ---------- İSTATİSTİK BANDI ---------- */

.stats-band {
    background: var(--color-dark);
    padding: 70px 8%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.stat-item {
    text-align: center;
}

.stat-num {
    font-family: "Oswald", sans-serif;
    color: var(--color-primary);
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 10px;
    text-shadow: 0 4px 14px rgba(var(--color-primary-rgb), .35);
    word-break: keep-all;
}

.stat-label {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
}

/* ===========================
        İLETİŞİM
=========================== */

.contact{
    background: var(--color-dark-alt);
    color:white;
    padding:120px 8%;
}

.contact .section-title h2{
    color:white;
}

.contact .section-title p{
    color:#bdbdbd;
}

/* GRID */

.contact-container{
    margin-top:70px;
    display:grid;
    grid-template-columns:380px 1fr;
    gap:50px;
    align-items:start;
}

/* SOL TARAF */

.contact-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:#1d1d1d;
    padding:24px;
    border-radius:16px;
    border-left:4px solid var(--color-primary);
    transition:.35s;
}

.contact-item:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.30);
}

.contact-item-icon{
    flex-shrink:0;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background: var(--color-yellow-soft);
    color: var(--color-yellow);
}

.contact-item-icon svg{
    width:22px;
    height:22px;
}

.contact-item-text h4{
    margin-bottom:6px;
    color:white;
    font-size:17px;
}

.contact-item-text p,
.contact-item-text a{
    color:#d4d4d4;
    text-decoration:none;
}

/* TIKLANABİLİR AKSİYON BUTONLARI (Telefon / WhatsApp) */

.contact-action{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    border-radius:16px;
    text-decoration:none;
    transition:.3s ease;
    cursor:pointer;
}

.contact-action-icon{
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    transition:.3s ease;
}

.contact-action-icon svg{
    width:26px;
    height:26px;
}

.contact-action-text{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.contact-action-text strong{
    font-size:18px;
    line-height:1.2;
}

.contact-action-text small{
    font-size:13px;
    opacity:.85;
    font-weight:500;
}

/* Telefon: altın (marka rengi), birincil aksiyon */

.contact-call{
    background: var(--color-primary);
    color: white;
    box-shadow:0 10px 30px rgba(var(--color-primary-rgb),.35);
}

.contact-call .contact-action-icon{
    background:rgba(255,255,255,.18);
    color: white;
}

.contact-call:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 38px rgba(var(--color-primary-rgb),.5);
}

/* WhatsApp: marka yeşili, tanınırlık için */

.contact-whatsapp{
    background:#25d366;
    color:#0b2b18;
    box-shadow:0 10px 30px rgba(37,211,102,.28);
}

.contact-whatsapp .contact-action-icon{
    background:rgba(11,43,24,.14);
    color:#0b2b18;
}

.contact-whatsapp:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 38px rgba(37,211,102,.45);
}

/* SAĞ TARAF (harita çerçevesi; SVG'nin kendi görünümü css/map.css içinde) */

.contact-map{
    display:flex;
    justify-content:center;
}

.map-wrapper{
    position:relative;
    display:inline-block;
    overflow:hidden;
    border-radius:18px;
}

.map-title{
    text-align:center;
    margin-bottom:20px;
    font-size:28px;
    color:white;
}

.map-info{
    text-align:center;
    margin-top:18px;
    color:#bdbdbd;
    line-height:1.7;
}

/* ==========================
        GALERİ
========================== */

.gallery{
    background: var(--color-bg);
    padding:120px 8%;
}

.gallery-placeholder{
    margin:auto;
    max-width:700px;
    background:white;
    border:2px dashed var(--color-yellow);
    border-radius:20px;
    padding:80px;
    text-align:center;
}

.gallery-placeholder h3{
    font-size:34px;
    color:#222;
    margin-bottom:20px;
}

.gallery-placeholder p{
    color:#666;
    line-height:1.8;
}
/* ===========================
    UÇAN AKSİYON BUTONLARI (WhatsApp / Ara)
=========================== */

.floating-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 998;
}

.floating-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

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

.floating-btn:hover {
    transform: translateY(-4px) scale(1.06);
}

/* Telefon: sitendeki .contact-call ile aynı renk/gölge mantığı */
.floating-call {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .5);
}

/* WhatsApp: sitendeki .contact-whatsapp ile aynı renk/gölge mantığı */
.floating-whatsapp {
    background: #25d366;
    color: #0b2b18;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .40);
}

@media (max-width: 480px) {
    .floating-actions {
        right: 16px;
        bottom: 16px;
        gap: 12px;
    }
    .floating-btn {
        width: 50px;
        height: 50px;
    }
    .floating-btn svg {
        width: 22px;
        height: 22px;
    }
}

/* ---------- FOOTER ---------- */

.site-footer {
    background: var(--color-dark);
    border-top: 4px solid var(--color-yellow);
    padding: 70px 8% 30px;
    color: rgba(255, 255, 255, .7);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.footer-brand h3 {
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    color: white;
    margin-bottom: 14px;
    font-weight: 600;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    max-width: 320px;
    color: rgba(255, 255, 255, .7);
}

.footer-col h4 {
    color: white;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 700;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 10px;
}

.footer-col a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease;
}

.footer-col a:hover {
    color: var(--color-primary);
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.footer-contact-item a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-contact-item a:hover {
    color: var(--color-primary);
}

.footer-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-contact-icon svg {
    width: 16px;
    height: 16px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 24px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}