/*
Theme Name: KapıFix
Theme URI: https://kapifix.com
Author: KapıFix
Author URI: https://kapifix.com
Description: KapıFix – Seksiyonel Kapı Montaj, Servis ve Bakım Hizmetleri. İstanbul Anadolu Yakası, Avrupa Yakası, Kocaeli (Gebze, Dilovası, İmes OSB) ve Türkiye genelinde profesyonel seksiyonel kapı çözümleri.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Özel
Text Domain: kapifix
Tags: kurumsal, seksiyonel-kapi, servis, seo, istanbul
*/

/* ========================================
   CSS DEĞIŞKENLERI
   ======================================== */
:root {
  /* Renkler */
  --primary:        #ff6a07;
  --primary-dark:   #d45500;
  --primary-light:  #ff8c3a;
  --dark:           #1a1a2e;
  --dark-2:         #16213e;
  --dark-3:         #0f3460;
  --gray:           #6b7280;
  --gray-light:     #9ca3af;
  --border:         #e5e7eb;
  --light:          #f8f9fa;
  --light-2:        #f1f5f9;
  --white:          #ffffff;
  --success:        #10b981;
  --warning:        #f59e0b;
  --error:          #ef4444;

  /* Tipografi */
  --font-main:      'Montserrat', sans-serif;
  --h1:             48px;
  --h2:             32px;
  --h3:             24px;
  --h4:             20px;
  --h5:             18px;
  --body:           16px;
  --small:          14px;
  --xs:             12px;

  /* Layout */
  --container:      1200px;
  --container-pad:  0 20px;

  /* Efektler */
  --radius:         8px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --shadow-md:      0 8px 40px rgba(0,0,0,0.12);
  --shadow-lg:      0 16px 60px rgba(0,0,0,0.18);
  --shadow-primary: 0 8px 30px rgba(255,106,7,0.3);
  --transition:     all 0.3s ease;
  --transition-slow: all 0.5s ease;
}


/* =============================================================
   KapıFix — Mobil Responsive Eklentisi v1.9
   Orijinal stil bozulmadan sadece eksikler eklendi.
   ============================================================= */

/* ── Dokunmatik hedef boyutları ── */
.kf-hamburger { min-width: 48px; min-height: 48px; }
.mobile-nav-list li a,
.mobile-sub-toggle { min-height: 44px; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── MOBİL ALT MENÜ (orijinalde CSS yoktu) ── */
.mobile-sub-menu {
    display: none;
    margin: 0 0 6px 4px;
    padding: 0 0 4px 12px;
    border-left: 2px solid var(--primary);
    list-style: none;
}
.mobile-sub-menu.open { display: block; }
.mobile-sub-menu li a {
    display: block;
    padding: 9px 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-sub-menu li a:hover { color: var(--primary); }
.mobile-sub-menu li:last-child a { border-bottom: none; }
.mobile-sub-toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; background: none; border: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-main); font-size: 15px; font-weight: 500;
    padding: 12px 0; cursor: pointer; min-height: 44px;
}
.mobile-sub-toggle .fa-chevron-down { margin-left: auto; font-size: 12px; color: var(--primary); transition: transform .3s; }
.mobile-sub-toggle:hover { color: var(--primary); }
.mobile-sub-toggle:focus, .mobile-sub-toggle:focus-visible { outline: none; }

/* =============================================================
   BREAKPOINT 992px — Hamburger / Nav
   (Buradaki kurallar wp_head CSS'i ile de destekleniyor)
   ============================================================= */
@media (max-width: 992px) {
    .kf-header .kf-nav,
    .header-tel-btn,
    .mega-menu { display: none !important; }

    .kf-hamburger {
        display: flex !important;
        min-width: 48px; min-height: 48px;
        background: var(--primary);
        border: none;
        padding: 12px 14px;
    }
    .btn-header-cta { display: flex !important; font-size: 13px; padding: 9px 14px; min-height: 44px; }
    .header-inner { justify-content: space-between; flex-wrap: nowrap; }
    .kf-logo { flex-shrink: 0; }
    .kf-logo img { height: 44px; width: auto; }
    .header-right { display: flex; align-items: center; gap: 8px; }
}

/* =============================================================
   BREAKPOINT 768px — Mobil Ana
   ============================================================= */
@media (max-width: 768px) {

    /* CSS değişkenleri — font küçülür */
    :root { --h1: 28px; --h2: 22px; --h3: 19px; --h4: 17px; }

    /* Topbar — sadece tel + WA */
    .kf-topbar { padding: 5px 0; font-size: 12px; }
    .topbar-inner { flex-wrap: nowrap; overflow: hidden; align-items: center; }
    .topbar-left .topbar-item { display: none; }
    .topbar-left .topbar-item:first-child { display: flex; font-size: 12px; white-space: nowrap; }
    .topbar-right > * { display: none; }
    .topbar-right .topbar-wa { display: flex; padding: 4px 10px; font-size: 12px; }
    .topbar-servis-badge, .topbar-sosyal, .topbar-adres { display: none; }

    /* Hero — yükseklik, pozisyon DOKUNULMAZ */
    .kf-hero { height: 75vh; min-height: 440px; max-height: 580px; }
    .hero-prev, .hero-next, #heroPrev, #heroNext { display: none !important; }
    .hero-features { display: none !important; }

    /* Hero içerik — üstte nefes alanı, altta slide-info için yer */
    .hero-content { padding: 40px 0 175px; max-width: 100%; }
    .hero-title { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.2; }
    .hero-subtitle { font-size: 14px; margin-bottom: 20px; }
    .hero-buttons { flex-direction: column; gap: 10px; width: 100%; }
    .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; padding: 13px 20px; }

    /* Slide bilgi çubuğu — 2x2 grid */
    .hero-slide-info { bottom: 58px !important; left: 0; right: 0; }
    .hero-slide-info-inner { display: grid; grid-template-columns: 1fr 1fr; border-radius: 0; }
    .slide-info-item { padding: 10px 12px; font-size: 12px; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .slide-info-item:nth-child(even)  { border-right: none; }
    .slide-info-item:nth-child(n+3)   { border-bottom: none; }
    .hero-dots { bottom: 20px; }
    .hero-scroll-indicator { display: none; }

    /* Breadcrumb — koyu renk, beyaz boşluk ortadan kalkar */
    .kf-breadcrumb { background: var(--dark-2) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
    .breadcrumb-list { color: rgba(255,255,255,0.5) !important; }
    .breadcrumb-list a { color: var(--primary) !important; }
    .breadcrumb-list li:not(:last-child)::after { color: rgba(255,255,255,0.25) !important; }

    /* Acil bant */
    .kf-acil-band { padding: 14px 0; }
    .acil-band-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .acil-band-links { display: flex; flex-direction: column; width: 100%; gap: 8px; margin: 0; }
    .acil-tel-btn, .acil-wa-btn { width: 100%; justify-content: center; padding: 12px 16px; margin: 0; }

    /* Grid düzenleri */
    .hizmet-grid       { grid-template-columns: repeat(2,1fr); }
    .blog-grid         { grid-template-columns: 1fr; }
    .footer-grid       { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; gap: 8px; }
    .stats-grid        { grid-template-columns: repeat(2,1fr); }
    .form-row          { grid-template-columns: 1fr !important; }
    .bolge-grid        { grid-template-columns: 1fr; }
    .teklif-mini-inner { flex-direction: column; text-align: center; gap: 16px; }
    .cta-band-inner    { flex-direction: column; text-align: center; }
    .cta-band-buttons  { justify-content: center; flex-wrap: wrap; }
    .single-grid       { grid-template-columns: 1fr; }
    .blog-sidebar, .sss-sidebar, .teklif-sidebar, .hizmet-sidebar { position: static; top: auto; }
    .iletisim-grid, .sss-grid, .teklif-grid, .hizmet-detay-grid { grid-template-columns: 1fr; }
    .neden-grid        { grid-template-columns: 1fr; }
    .neden-image-area  { display: none; }

    /* Hakkımızda */
    .hakkimizda-intro-grid { grid-template-columns: 1fr; gap: 28px; }
    .hak-image-wrap        { display: none; }
    .misyon-grid           { grid-template-columns: 1fr; gap: 14px; }
    .neden-liste-grid      { grid-template-columns: 1fr; gap: 12px; }
    .markalar-grid         { grid-template-columns: repeat(2,1fr); gap: 10px; }

    /* Formlar — iOS zoom engeli */
    input, textarea, select { font-size: 16px !important; }

    /* Section padding */
    .section-pad    { padding: 44px 0; }
    .section-pad-sm { padding: 26px 0; }
    .section-header { margin-bottom: 26px; }

    /* Floating butonlar */
    .kf-whatsapp-btn { bottom: 18px; right: 14px; }
    .kf-scroll-top   { bottom: 80px; right: 14px; }

    /* Page hero */
    .kf-page-hero, .kf-page-hero-sm { padding: 32px 0 26px; }
    .page-hero-content h1, .page-hero-title { font-size: clamp(22px,6vw,28px) !important; }

    /* iOS safe-area */
    .kf-mobile-menu { padding-bottom: env(safe-area-inset-bottom,0px); }
}

/* =============================================================
   BREAKPOINT 600px
   ============================================================= */
@media (max-width: 600px) {
    .hizmet-grid { grid-template-columns: 1fr; }
    .stats-grid  { grid-template-columns: repeat(2,1fr); }
    .markalar-grid { grid-template-columns: repeat(2,1fr); }
    .blog-archive-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   BREAKPOINT 480px — Küçük telefonlar
   ============================================================= */
@media (max-width: 480px) {
    :root { --h1: 24px; --h2: 20px; --h3: 17px; }
    .container   { padding: 0 14px; }
    .kf-topbar   { display: none; }
    .kf-hero     { height: 78vh; min-height: 400px; }
    .hero-content { padding: 36px 0 185px; }
    .hero-title  { font-size: clamp(20px,6vw,24px) !important; }
    .hizmet-grid { grid-template-columns: 1fr; }
    .stats-grid  { grid-template-columns: repeat(2,1fr); }
    .stat-sayac  { font-size: 30px !important; }
    .error-404-code { font-size: 80px !important; }
}

/* =============================================================
   LANDSCAPE
   ============================================================= */
@media (max-width: 900px) and (orientation:landscape) {
    .kf-hero { height: 65vh; min-height: 300px; }
    .kf-mobile-menu { overflow-y: auto; }
}


/* =============================================================
   v1.9 EK DÜZELTMELER
   ============================================================= */

/* ── Ana sayfa: header-hero arasındaki beyaz sızıntı ── */
/* body.home sadece front-page için çalışır, diğer sayfalara dokunmaz */
body.home {
    background-color: #1a1a2e; /* var(--dark) — hero başlayana kadar boşluk koyu görünür */
}

/* ── Hero badge — üstten nefes alanı ── */
@media (max-width: 768px) {
    .hero-badge {
        margin-top: 0;
        margin-bottom: 14px;
    }
    /* Slider dots ile slide-info arasında çakışma olmasın */
    .hero-dots {
        z-index: 6 !important;
        position: absolute;
        bottom: 18px;
    }
}

/* ── İç sayfa hero: tam ekran genişliği, temiz görünüm ── */
@media (max-width: 768px) {
    .kf-page-hero {
        background-attachment: scroll !important; /* iOS için */
    }
    .page-hero-content {
        padding: 0 !important;
    }
}

/* ── Footer CTA bandı ── */
@media (max-width: 768px) {
    .footer-cta-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
    }
    .footer-cta-inner > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .footer-cta-inner a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Teklif mini bant ── */
@media (max-width: 768px) {
    .teklif-mini-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .teklif-mini-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* ── WhatsApp yuvarlak floating ── */
@media (max-width: 768px) {
    .kf-whatsapp-btn {
        bottom: 20px !important;
        right: 16px !important;
        width: 54px !important;
        height: 54px !important;
        font-size: 24px !important;
    }
}

/* ── LCP OPTİMİZASYON: Hero arka plan ── */
/* Hero slide background-image'ı content-visibility ile optimize et */
.hero-slide:not(.active) {
    content-visibility: hidden;
}
/* Hero min-height tanımlı olsun — CLS engelle */
.kf-hero {
    min-height: 500px;
    contain: layout style;
}
/* Logo CLS engelle */
.kf-logo img {
    max-height: 60px;
    width: auto;
    aspect-ratio: auto;
}
@media (max-width: 992px) {
    .kf-logo img { max-height: 44px; }
}

/* ── RENDER BLOCKING AZALT ── */
/* Font face swap ekle — FOUT yerine içerik hemen görünsün */
@font-face {
    font-display: swap;
}