/* ============================================================
   KAYA ELEKTRİK — ANA STİL DOSYASI
   ============================================================
   Bölümler:
   1. Değişkenler (renkler, fontlar)
   2. Reset & Temel
   3. Tipografi
   4. Düzen yardımcıları (container, grid)
   5. Header & Navigasyon
   6. Hero (üst bölüm)
   7. Bölümler (hizmetler, hakkımızda, iletişim)
   8. Kartlar & bileşenler
   9. Footer
   10. Yüzen butonlar (WhatsApp / telefon)
   11. Animasyonlar
   12. Responsive (mobil uyum)
   ============================================================
   Renkleri değiştirmek için: config/config.php → 'tema'
   ============================================================ */

/* ---------- 1. DEĞİŞKENLER ---------- */
:root {
    /* Renkler — config.php'den PHP ile basılır, burada yedek değerler */
    --renk-zemin:        #0B1929;
    --renk-zemin-2:      #0F2235;
    --renk-zemin-3:      #16314A;
    --renk-amber:        #E8A33D;
    --renk-amber-parlak: #FFC368;
    --renk-cyan:         #3DD6D0;
    --renk-cyan-koyu:    #1FA8A2;
    --renk-metin:        #E6EDF5;
    --renk-metin-soluk:  #93A6BC;
    --renk-cizgi:        rgba(147, 166, 188, 0.16);
    --renk-cam:          rgba(255, 255, 255, 0.04);

    /* Tipografi */
    --font-baslik: 'Sora', system-ui, sans-serif;
    --font-metin:  'Inter', system-ui, sans-serif;

    /* Ölçek */
    --max-genislik: 1240px;
    --bosluk-bolum: clamp(4rem, 10vw, 8rem);
    --radius:      18px;
    --radius-sm:   12px;

    /* Geçişler */
    --gecis: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    /* Gölgeler */
    --golge-yumusak: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
    --golge-amber:   0 8px 40px -8px rgba(232, 163, 61, 0.4);
}

/* ---------- 2. RESET & TEMEL ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Lenis smooth-scroll aktifken native smooth-scroll'u kapat */
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

body {
    font-family: var(--font-metin);
    background-color: var(--renk-zemin);
    color: var(--renk-metin);
    line-height: 1.65;
    font-size: 1rem;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input,
textarea {
    font-family: inherit;
    font-size: 1rem;
}

::selection {
    background: var(--renk-amber);
    color: var(--renk-zemin);
}

/* ---------- 3. TİPOGRAFİ ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-baslik);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }

p { color: var(--renk-metin-soluk); }

.metin-vurgu {
    color: var(--renk-amber);
}

/* Bölüm üst etiketi (eyebrow) */
.etiket {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-baslik);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--renk-cyan);
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(61, 214, 208, 0.3);
    border-radius: 100px;
    background: rgba(61, 214, 208, 0.06);
}

.etiket::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--renk-cyan);
    box-shadow: 0 0 10px var(--renk-cyan);
    animation: nabiz 2s ease-in-out infinite;
}

/* ---------- 4. DÜZEN YARDIMCILARI ---------- */
.container {
    width: 100%;
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

.bolum {
    position: relative;
    padding-block: var(--bosluk-bolum);
}

.bolum-baslik {
    max-width: 720px;
    margin-bottom: 3.5rem;
}

.bolum-baslik h2 {
    margin-top: 1.2rem;
    margin-bottom: 1rem;
}

.bolum-baslik.ortala {
    margin-inline: auto;
    text-align: center;
}

/* Butonlar */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-baslik);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.95rem 1.7rem;
    border-radius: 100px;
    transition: var(--gecis);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-amber {
    background: linear-gradient(135deg, var(--renk-amber-parlak), var(--renk-amber));
    color: #1A1208;
    box-shadow: var(--golge-amber);
}
.btn-amber:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 50px -8px rgba(232, 163, 61, 0.6);
}

.btn-cam {
    background: var(--renk-cam);
    color: var(--renk-metin);
    border: 1px solid var(--renk-cizgi);
    backdrop-filter: blur(10px);
}
.btn-cam:hover {
    border-color: rgba(61, 214, 208, 0.5);
    background: rgba(61, 214, 208, 0.08);
    transform: translateY(-3px);
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #1EBE5A);
    color: #fff;
    box-shadow: 0 8px 40px -8px rgba(37, 211, 102, 0.45);
}
.btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 50px -8px rgba(37, 211, 102, 0.6);
}

/* ---------- 5. HEADER & NAVİGASYON ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--gecis);
    padding-block: 1.1rem;
}

.site-header.kucuk {
    background: rgba(11, 25, 41, 0.82);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--renk-cizgi);
    padding-block: 0.7rem;
}

.header-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.logo-isaret {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--renk-amber), #C9831F);
    display: grid;
    place-items: center;
    color: #1A1208;
    flex-shrink: 0;
    box-shadow: var(--golge-amber);
    position: relative;
    overflow: hidden;
}
.logo-isaret svg { width: 24px; height: 24px; position: relative; z-index: 1; }

.logo-isaret::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: parlama 4s ease-in-out infinite;
}

.logo-yazi small {
    display: block;
    font-family: var(--font-metin);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--renk-cyan);
    letter-spacing: 0.05em;
}

/* Ana menü */
.ana-menu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ana-menu a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--renk-metin-soluk);
    padding: 0.5rem 0.9rem;
    border-radius: 100px;
    transition: var(--gecis);
    position: relative;
}
.ana-menu a:hover { color: var(--renk-metin); }
.ana-menu a.aktif { color: var(--renk-amber); }

.header-aksiyon {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* Mobil menü düğmesi */
.menu-dugme {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    border: 1px solid var(--renk-cizgi);
    background: var(--renk-cam);
    place-items: center;
    color: var(--renk-metin);
}
.menu-dugme svg { width: 24px; height: 24px; }

/* Mobil menü paneli */
.mobil-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(8, 18, 30, 0.97);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
}
.mobil-menu.acik {
    transform: translateX(0);
    visibility: visible;
}
.mobil-menu a {
    font-family: var(--font-baslik);
    font-size: 1.6rem;
    font-weight: 600;
    padding: 1rem 0;
    border-bottom: 1px solid var(--renk-cizgi);
    color: var(--renk-metin);
    transition: var(--gecis);
}
.mobil-menu a:hover { color: var(--renk-amber); padding-left: 0.5rem; }
.mobil-menu-kapat {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--renk-cizgi);
    display: grid;
    place-items: center;
}
.mobil-menu-kapat svg { width: 26px; height: 26px; }
.mobil-menu-aksiyon {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* ---------- 6. HERO (ÜST BÖLÜM) ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 7rem;
    overflow: hidden;
}

/* Arka plan ızgara dokusu */
.hero-arkaplan {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--renk-cizgi) 1px, transparent 1px),
        linear-gradient(90deg, var(--renk-cizgi) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 30%, transparent 75%);
}

/* Parlayan ışık küreleri */
.hero-isik {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}
.hero-isik.amber {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(232,163,61,0.5), transparent 70%);
    top: -10%; right: -5%;
}
.hero-isik.cyan {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(61,214,208,0.35), transparent 70%);
    bottom: -15%; left: -8%;
}

.hero-ic {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
    width: 100%;
}

.hero-metin h1 {
    margin-block: 1.5rem;
}
.hero-metin h1 .satir {
    display: block;
    overflow: hidden;
}

.hero-aciklama {
    font-size: 1.15rem;
    max-width: 540px;
    margin-bottom: 2.2rem;
    color: var(--renk-metin-soluk);
}

.hero-aksiyon {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.8rem;
}

/* Güven rozetleri (hero altı) */
.hero-rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.rozet {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.rozet-ikon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--renk-cam);
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-amber);
    flex-shrink: 0;
}
.rozet-ikon svg { width: 22px; height: 22px; }
.rozet-yazi b {
    font-family: var(--font-baslik);
    font-size: 1.4rem;
    display: block;
    line-height: 1;
    color: var(--renk-metin);
}
.rozet-yazi span { font-size: 0.85rem; color: var(--renk-metin-soluk); }

/* Hero görsel — animasyonlu pano/devre SVG */
.hero-gorsel {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.hero-pano {
    width: 100%;
    max-width: 460px;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}

/* ---------- 7. İSTATİSTİK ŞERİDİ ---------- */
.istatistik-serit {
    border-block: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin-2);
    position: relative;
    overflow: hidden;
}
.istatistik-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--renk-cizgi);
}
.istatistik {
    background: var(--renk-zemin-2);
    padding: 2.4rem 1.5rem;
    text-align: center;
}
.istatistik b {
    font-family: var(--font-baslik);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--renk-amber-parlak), var(--renk-amber));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    line-height: 1;
}
.istatistik span {
    font-size: 0.9rem;
    color: var(--renk-metin-soluk);
    margin-top: 0.6rem;
    display: block;
}

/* ---------- 8. HİZMET KARTLARI ---------- */
.hizmet-sekme {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.sekme-dugme {
    font-family: var(--font-baslik);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8rem 1.5rem;
    border-radius: 100px;
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-metin-soluk);
    transition: var(--gecis);
    background: var(--renk-cam);
}
.sekme-dugme.aktif {
    background: linear-gradient(135deg, var(--renk-amber-parlak), var(--renk-amber));
    color: #1A1208;
    border-color: transparent;
}
.sekme-dugme:not(.aktif):hover {
    color: var(--renk-metin);
    border-color: rgba(61,214,208,0.4);
}

.hizmet-panel {
    display: none;
}
.hizmet-panel.aktif {
    display: block;
    animation: belir 0.6s ease;
}

.hizmet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.4rem;
}

.hizmet-kart {
    position: relative;
    background: linear-gradient(160deg, var(--renk-zemin-2), var(--renk-zemin));
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius);
    padding: 2rem;
    transition: var(--gecis);
    overflow: hidden;
    isolation: isolate;
}

/* Hover'da beliren akım çizgisi (üst kenar) */
.hizmet-kart::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, var(--kart-renk, var(--renk-amber)), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.hizmet-kart:hover::before { transform: scaleX(1); }

/* Hover'da hafif yükselme ve glow */
.hizmet-kart:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--kart-renk, var(--renk-amber)) 40%, transparent);
    box-shadow: var(--golge-yumusak);
}

.hizmet-kart[data-renk="amber"] { --kart-renk: var(--renk-amber); }
.hizmet-kart[data-renk="cyan"]  { --kart-renk: var(--renk-cyan); }

.kart-ikon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--kart-renk) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--kart-renk) 30%, transparent);
    color: var(--kart-renk);
    margin-bottom: 1.4rem;
    transition: var(--gecis);
}
.kart-ikon svg { width: 28px; height: 28px; }
.hizmet-kart:hover .kart-ikon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 0 30px -5px color-mix(in srgb, var(--kart-renk) 60%, transparent);
}

.hizmet-kart h3 {
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
    color: var(--renk-metin);
}

.kart-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.93rem;
    color: var(--renk-metin-soluk);
    border-bottom: 1px solid rgba(147,166,188,0.07);
}
.kart-liste li:last-child { border-bottom: none; }
.kart-liste li svg {
    width: 16px; height: 16px;
    color: var(--kart-renk);
    flex-shrink: 0;
    margin-top: 4px;
}

/* ---------- 9. HAKKIMIZDA / METİN BÖLÜMLERİ ---------- */
.hakkimizda-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.metin-blok p { margin-bottom: 1.2rem; line-height: 1.8; }
.metin-blok p:last-child { margin-bottom: 0; }

.ozellik-liste {
    display: grid;
    gap: 0.9rem;
    margin-top: 2rem;
}
.ozellik {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    background: var(--renk-cam);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-sm);
    transition: var(--gecis);
}
.ozellik:hover {
    border-color: rgba(232,163,61,0.4);
    transform: translateX(6px);
}
.ozellik-ikon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(61,214,208,0.1);
    color: var(--renk-cyan);
    flex-shrink: 0;
}
.ozellik-ikon svg { width: 20px; height: 20px; }
.ozellik span { font-weight: 500; color: var(--renk-metin); font-size: 0.96rem; }

/* Yapılar listesi (villa, apartman vb.) */
.yapi-bulutu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.8rem;
}
.yapi-etiket {
    padding: 0.6rem 1.1rem;
    border-radius: 100px;
    background: var(--renk-cam);
    border: 1px solid var(--renk-cizgi);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--renk-metin);
    transition: var(--gecis);
}
.yapi-etiket:hover {
    background: rgba(232,163,61,0.12);
    border-color: rgba(232,163,61,0.4);
    color: var(--renk-amber-parlak);
}

/* Görsel çerçeve (resim alanı) */
.gorsel-cerceve {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--renk-cizgi);
    aspect-ratio: 4 / 5;
    background: var(--renk-zemin-2);
}
.gorsel-cerceve img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.gorsel-cerceve::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,25,41,0.6), transparent 50%);
}
.gorsel-rozet {
    position: absolute;
    bottom: 1.2rem; left: 1.2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.3rem;
    background: rgba(11,25,41,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--renk-cizgi);
    border-radius: 14px;
}
.gorsel-rozet svg { width: 28px; height: 28px; color: var(--renk-amber); }
.gorsel-rozet b { font-family: var(--font-baslik); display: block; line-height: 1.2; }
.gorsel-rozet span { font-size: 0.82rem; color: var(--renk-metin-soluk); }

/* ---------- 10. SÜREÇ / NASIL ÇALIŞIR ---------- */
.surec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    counter-reset: adim;
}
.surec-kart {
    position: relative;
    padding: 2rem 1.6rem;
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius);
    transition: var(--gecis);
}
.surec-kart:hover {
    transform: translateY(-5px);
    border-color: rgba(232,163,61,0.3);
}
.surec-no {
    font-family: var(--font-baslik);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(232,163,61,0.4);
    margin-bottom: 1rem;
}
.surec-kart h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.surec-kart p { font-size: 0.92rem; }

/* Bağlantı çizgisi (süreç adımları arası) */
.surec-grid .surec-kart:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: -0.9rem;
    width: 1.4rem; height: 2px;
    background: linear-gradient(90deg, rgba(232,163,61,0.5), transparent);
    z-index: 1;
}

/* ---------- 11. İLETİŞİM BÖLÜMÜ ---------- */
.iletisim-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
}

.iletisim-bilgi-liste {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}
.iletisim-bilgi {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.3rem 1.5rem;
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-sm);
    transition: var(--gecis);
}
.iletisim-bilgi:hover {
    border-color: rgba(232,163,61,0.4);
    transform: translateY(-3px);
}
.iletisim-bilgi-ikon {
    width: 50px; height: 50px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(232,163,61,0.15), rgba(232,163,61,0.05));
    border: 1px solid rgba(232,163,61,0.25);
    color: var(--renk-amber);
    flex-shrink: 0;
}
.iletisim-bilgi-ikon svg { width: 24px; height: 24px; }
.iletisim-bilgi-yazi small {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--renk-metin-soluk);
    margin-bottom: 0.2rem;
}
.iletisim-bilgi-yazi b {
    font-family: var(--font-baslik);
    font-size: 1.05rem;
    color: var(--renk-metin);
}

/* Form */
.iletisim-form {
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 4vw, 2.6rem);
}
.form-satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-grup {
    margin-bottom: 1.2rem;
}
.form-grup label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--renk-metin);
}
.form-grup input,
.form-grup textarea {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-sm);
    color: var(--renk-metin);
    transition: var(--gecis);
}
.form-grup input:focus,
.form-grup textarea:focus {
    outline: none;
    border-color: var(--renk-amber);
    box-shadow: 0 0 0 3px rgba(232,163,61,0.15);
}
.form-grup textarea { resize: vertical; min-height: 120px; }
.form-grup input::placeholder,
.form-grup textarea::placeholder { color: rgba(147,166,188,0.5); }

/* Bal küpü — gizli alan */
.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.form-hata {
    color: #FF8087;
    font-size: 0.82rem;
    margin-top: 0.4rem;
    min-height: 1rem;
}

.form-sonuc {
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.2rem;
    font-size: 0.94rem;
    display: none;
}
.form-sonuc.basari {
    display: block;
    background: rgba(37,211,102,0.12);
    border: 1px solid rgba(37,211,102,0.4);
    color: #7EE2A8;
}
.form-sonuc.hata {
    display: block;
    background: rgba(255,128,135,0.1);
    border: 1px solid rgba(255,128,135,0.4);
    color: #FF8087;
}

.form-gonder {
    width: 100%;
    margin-top: 0.5rem;
}
.form-gonder:disabled { opacity: 0.6; cursor: not-allowed; }

/* Harita */
.harita-blok {
    margin-top: 3rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin-2);
}
.harita-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--renk-cizgi);
    flex-wrap: wrap;
}
.harita-ust-bilgi {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.harita-ust-ikon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(232,163,61,0.18), rgba(232,163,61,0.05));
    border: 1px solid rgba(232,163,61,0.3);
    color: var(--renk-amber);
    flex-shrink: 0;
}
.harita-ust-ikon svg { width: 22px; height: 22px; }
.harita-ust-bilgi small {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--renk-metin-soluk);
    margin-bottom: 0.15rem;
}
.harita-ust-bilgi b {
    font-family: var(--font-baslik);
    font-size: 0.98rem;
    color: var(--renk-metin);
}
.harita-yol-btn { flex-shrink: 0; }
.harita-cerceve {
    height: 420px;
    position: relative;
}
.harita-cerceve iframe {
    width: 100%; height: 100%;
    border: 0;
    filter: grayscale(0.3) invert(0.9) hue-rotate(180deg) contrast(0.9);
}

/* ---------- 12. CTA ŞERİDİ ---------- */
.cta-serit {
    position: relative;
    overflow: hidden;
}
.cta-kutu {
    position: relative;
    background: linear-gradient(135deg, var(--renk-zemin-3), var(--renk-zemin-2));
    border: 1px solid rgba(232,163,61,0.25);
    border-radius: 28px;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    overflow: hidden;
}
.cta-kutu::before {
    content: "";
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(232,163,61,0.25), transparent 70%);
    top: -50%; left: 50%;
    transform: translateX(-50%);
    filter: blur(40px);
}
.cta-kutu > * { position: relative; z-index: 1; }
.cta-kutu h2 { margin-bottom: 1rem; }
.cta-kutu p { max-width: 560px; margin: 0 auto 2.2rem; font-size: 1.1rem; }
.cta-aksiyon {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- 13. FOOTER ---------- */
.site-footer {
    border-top: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin-2);
    padding-top: 4.5rem;
    position: relative;
    overflow: hidden;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3.5rem;
}
.footer-marka p {
    margin-top: 1.2rem;
    font-size: 0.94rem;
    max-width: 320px;
    line-height: 1.7;
}
.footer-sosyal {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.6rem;
}
.footer-sosyal a {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--renk-cam);
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-metin-soluk);
    transition: var(--gecis);
}
.footer-sosyal a:hover {
    color: var(--renk-amber);
    border-color: rgba(232,163,61,0.5);
    transform: translateY(-3px);
}
.footer-sosyal svg { width: 20px; height: 20px; }

.footer-sutun h4 {
    font-size: 0.95rem;
    font-family: var(--font-baslik);
    margin-bottom: 1.2rem;
    color: var(--renk-metin);
    letter-spacing: 0.02em;
}
.footer-sutun ul { display: grid; gap: 0.7rem; }
.footer-sutun a {
    font-size: 0.92rem;
    color: var(--renk-metin-soluk);
    transition: var(--gecis);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-sutun a:hover { color: var(--renk-amber); gap: 0.7rem; }

.footer-alt {
    border-top: 1px solid var(--renk-cizgi);
    padding-block: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-alt p { font-size: 0.86rem; }
.footer-alt a { color: var(--renk-amber); }

/* ---------- 14. YÜZEN BUTONLAR (WhatsApp / Telefon) ---------- */
.yuzen-butonlar {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.yuzen-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    transition: var(--gecis);
    position: relative;
}
.yuzen-btn svg { width: 28px; height: 28px; }
.yuzen-btn:hover { transform: scale(1.1); }

.yuzen-btn.whatsapp { background: #25D366; }
.yuzen-btn.telefon {
    background: linear-gradient(135deg, var(--renk-amber), #C9831F);
    color: #1A1208;
}

/* Nabız halkası */
.yuzen-btn.whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    z-index: -1;
    animation: yuzen-nabiz 2.2s ease-out infinite;
}

/* İpucu balonu */
.yuzen-btn .ipucu {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: var(--renk-zemin-3);
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-metin);
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--gecis);
    pointer-events: none;
}
.yuzen-btn:hover .ipucu {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Yukarı çık butonu */
.yukari-cik {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 900;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--renk-zemin-3);
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-metin);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--gecis);
}
.yukari-cik.gorunur {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.yukari-cik svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.yukari-cik:hover {
    border-color: var(--renk-amber);
    color: var(--renk-amber);
}

/* ---------- 15. ANİMASYONLAR ---------- */
@keyframes nabiz {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

@keyframes yuzen-nabiz {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes parlama {
    0%, 100% { transform: translateX(-100%); }
    50%, 60% { transform: translateX(100%); }
}

@keyframes belir {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Akım akışı (devre yollarında) */
@keyframes akim-akis {
    to { stroke-dashoffset: -1000; }
}

/* Scroll reveal başlangıç durumu (JS ile .gorunur eklenince açılır) */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
[data-reveal].gorunur {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* Devre SVG akım çizgileri */
.akim-yolu {
    stroke-dasharray: 8 12;
    animation: akim-akis 20s linear infinite;
}
.akim-yolu.hizli { animation-duration: 8s; }

/* Pano SVG nabız noktaları */
.pano-nokta {
    animation: nabiz 2.5s ease-in-out infinite;
}
.pano-nokta.gecikme-1 { animation-delay: 0.4s; }
.pano-nokta.gecikme-2 { animation-delay: 0.8s; }
.pano-nokta.gecikme-3 { animation-delay: 1.2s; }

/* ---------- 16. RESPONSIVE (MOBİL UYUM) ---------- */
@media (max-width: 1024px) {
    .hero-ic { grid-template-columns: 1fr; gap: 3rem; }
    .hero-gorsel { max-width: 440px; margin-inline: auto; order: -1; }
    .hakkimizda-grid { grid-template-columns: 1fr; }
    .iletisim-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .surec-grid { grid-template-columns: 1fr 1fr; }
    .surec-grid .surec-kart::after { display: none; }
}

@media (max-width: 860px) {
    .ana-menu { display: none; }
    .header-aksiyon .btn-telefon-text { display: none; }
    .menu-dugme { display: grid; }
    .istatistik-grid { grid-template-columns: 1fr 1fr; }
    .istatistik-grid .istatistik:nth-child(1),
    .istatistik-grid .istatistik:nth-child(2) {
        border-bottom: 1px solid var(--renk-cizgi);
    }
}

@media (max-width: 560px) {
    :root { --bosluk-bolum: 3.5rem; }
    .hero { padding-top: 6rem; }
    .hero-aksiyon { flex-direction: column; }
    .hero-aksiyon .btn { width: 100%; }
    .hero-rozetler { gap: 1.2rem; }
    .form-satir { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .surec-grid { grid-template-columns: 1fr; }
    .footer-alt { flex-direction: column; text-align: center; }
    .hizmet-grid { grid-template-columns: 1fr; }
    .yuzen-butonlar { bottom: 1rem; right: 1rem; }
    .yukari-cik { display: none; }
}

/* ---------- 17. ERİŞİLEBİLİRLİK ---------- */
:focus-visible {
    outline: 2px solid var(--renk-amber);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* Yazdırma */
@media print {
    .site-header, .yuzen-butonlar, .yukari-cik, .hero-arkaplan { display: none; }
    body { background: #fff; color: #000; }
}