:root {
            --bg: #ffffff;
            --text: #0f172a;
            --muted: #475569;
            --border: #e2e8f0;
            --brand: #2563eb;
            --brand-700: #1d4ed8;
            --card: #f8fafc;
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            color: var(--text);
            background: var(--bg)
        }

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

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

        /* HEADER */
        .site-header {
            position: sticky;
            top: 0;
            background: rgba(255, 255, 255, .8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            z-index: 50
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 12px 20px
        }

        .row {
            display: flex;
            align-items: center;
            gap: 16px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700
        }

        .brand img {
            width: 38px;
            height: 38px
        }

        nav {
            margin-inline: auto
        }

        .nav {
            display: flex;
            gap: 18px;
            list-style: none;
            padding: 0;
            margin: 0
        }

        .nav a {
            padding: 8px 10px;
            border-radius: 8px;
            color: var(--muted);
            font-weight: 600
        }

        .nav a:hover {
            background: var(--card);
            color: var(--text)
        }

        .call-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #166534;
            /* butonla aynı renk */
            color: #fff;
            font-weight: 600;
            border-radius: 10px;
            padding: 8px 14px;
            transition: .2s;
            white-space: nowrap;
        }

        .call-btn:hover {
            background: #0f3e22;
            /* hoverda daha koyu yeşil */
        }

        .call-btn i {
            color: #fff;
            /* ikon rengi beyaz */
            font-size: 16px;
        }


        /* HERO */
        .hero {
            position: relative;
            min-height: 60vh;
            display: grid;
            place-items: center;
            background: #000 url("ilkresim.jpg") center/cover no-repeat
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5)
        }

        .headline {
            z-index: 1;
            text-align: center
        }

        .headline h1 {
            margin: 0;
            font-size: clamp(28px, 6vw, 72px);
            font-weight: 900;
            color: #fff;
            text-shadow:
                0 2px 8px rgba(0, 0, 0, .85),
                /* genel karartma */
                0 0 14px rgba(20, 83, 45, .85),
                /* koyu yeşil (iç glow) */
                0 0 38px rgba(4, 47, 24, .80);
            /* daha koyu dış glow */
        }

        /* Bölüm iskeleti */
        .section {
            padding: 48px 0;
            scroll-margin-top: 90px;
        }

        /* sticky header için */
        .section-muted {
            background: #f9fafb
        }

        .container.narrow {
            max-width: 900px;
            padding: 0 20px;
            margin: 0 auto
        }

        /* Başlık */
        .section-title {
            text-align: center;
            font-size: clamp(26px, 4vw, 40px);
            margin: 0 0 18px 0;
            color: #166534;
            text-shadow: 0 0 8px rgba(21, 128, 61, 0.15);
            position: relative;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 72px;
            height: 3px;
            margin: 12px auto 0;
            border-radius: 999px;
            background: #166534;
            opacity: .9;
        }

        /* Metin ve buton */
        .lead {
            font-size: 18px;
            line-height: 1.65;
            color: #334155;
            margin: 0 auto 12px auto;
            max-width: 72ch;
            text-align: center
        }

        .actions {
            display: flex;
            justify-content: center;
            margin-top: 18px
        }

        .btn-green {
            display: inline-block;
            background: #166534;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(22, 101, 52, .25);
            transition: background-color .2s ease, transform .06s ease
        }

        .btn-green:hover {
            background: #0f3e22
        }

        .btn-green:active {
            transform: translateY(1px)
        }

        /* Hero'dan sonra taşan kart görünümü */
        .section-floating {
            position: relative;
            z-index: 2;
            margin-top: -30px;
        }

        .card {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
            padding: 32px 24px;
        }

        .card h2 {
            text-align: center;
            font-size: clamp(24px, 3.6vw, 36px);
            margin: 0 0 14px 0;
            color: #166534;
        }

        .card h2::after {
            content: "";
            display: block;
            width: 72px;
            height: 3px;
            margin: 12px auto 0;
            border-radius: 999px;
            background: #166534;
            opacity: .9;
        }

        .card p {
            margin: 0 auto 10px auto;
            max-width: 70ch;
            font-size: 18px;
            line-height: 1.65;
            color: #334155;
            text-align: center;
        }

        .card .actions {
            display: flex;
            justify-content: center;
            margin-top: 18px;
        }



        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 32px;
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 24px;
        }

        .feature-card {
            background: #f9fafb;
            border-radius: 20px;
            padding: 40px 24px;
            /* daha fazla iç boşluk */
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .feature-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 2.5px solid #166534;
            /* butonla aynı renk */
            color: #166534;
            /* ikon rengi de aynı */
            font-size: 28px;
            background: #f0fdf4;
            /* çok hafif yeşil arka plan */
            transition: background .2s, transform .2s;
        }

        .feature-card:hover .feature-icon {
            background: #dcfce7;
            /* hover’da biraz daha dolu yeşil */
            transform: scale(1.05);
        }


        .feature-card h3 {
            font-size: 20px;
            /* başlık büyüdü */
            font-weight: 700;
            margin: 0 0 10px 0;
            color: #0f172a;
        }

        .feature-card p {
            font-size: 16px;
            line-height: 1.6;
            color: #475569;
            margin: 0;
        }


        /* 3 Adımda Kiralama */
        .section-steps {
            background: #f9fafb;
            padding: 56px 0
        }

        .section-subtitle {
            margin: -6px 0 28px 0;
            text-align: center;
            color: #475569
        }

        .steps {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px
        }

        @media (max-width:900px) {
            .steps {
                grid-template-columns: 1fr
            }
        }

        .steps::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 62px;
            height: 2px;
            background: linear-gradient(90deg, transparent 0 3%, #dcfce7 3% 97%, transparent 97% 100%);
        }

        @media (max-width:900px) {
            .steps::before {
                display: none
            }
        }

        .step-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
            padding: 28px 22px;
            text-align: center;
            transition: transform .2s, box-shadow .2s
        }

        .step-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, .12)
        }

        .step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 999px;
            margin: 0 auto 10px;
            background: #166534;
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            box-shadow: 0 0 0 4px #eaf5ef
        }

        .step-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 12px;
            border-radius: 50%;
            border: 2px solid #166534;
            color: #166534;
            background: #f0fdf4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px
        }

        .step-card h3 {
            margin: 6px 0 8px;
            font-size: 18px;
            font-weight: 800;
            color: var(--text)
        }

        .step-card p {
            margin: 0;
            font-size: 15px;
            line-height: 1.6;
            color: #475569
        }

        .steps-actions {
            display: flex;
            justify-content: center;
            margin-top: 24px
        }

        /* Neden Biz */
        /* Neden Biz */
        .reasons {
            display: grid;
            grid-template-columns: repeat(3, minmax(260px, 1fr));
            /* 3x2 düzen */
            gap: 32px;
            max-width: 1100px;
            /* satır genişliği dengeli */
            margin: 28px auto 0;
            padding: 0 20px;
        }

        @media (max-width:980px) {
            .reasons {
                grid-template-columns: repeat(2, minmax(260px, 1fr));
            }
        }

        @media (max-width:640px) {
            .reasons {
                grid-template-columns: 1fr;
            }
        }


        .reason-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
            padding: 28px 22px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* içerik ortalansın */
            min-height: 200px;
            /* satırlar eşit dursun */
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .reason-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
        }

        .reason-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 12px;
            border-radius: 50%;
            border: 2px solid #166534;
            background: #f0fdf4;
            color: #166534;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .reason-card h3 {
            margin: 8px 0 8px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
        }

        .reason-card p {
            margin: 0;
            font-size: 15px;
            line-height: 1.6;
            color: #475569;
        }

        .section-title {
            margin: 0 0 10px 0;
        }

        /* başlık alt boşluk biraz kısaldı */
        .section-subtitle {
            margin: 0 0 24px 0;
        }

        /* metin başlığa yaklaşsın */

        .actions {
            display: flex;
            justify-content: center;
            margin: 24px auto 0;
            width: 100%;
        }


        /* İletişim CTA (yeşil tema) */
        .section-contact {
            padding: 48px 0
        }

        .cta-card {
            background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
            color: #fff;
            border-radius: 20px;
            padding: 28px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        }

        .cta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap
        }

        .cta-title {
            margin: 0 0 6px 0;
            font-size: clamp(22px, 3vw, 34px);
            font-weight: 800
        }

        .cta-sub {
            margin: 0;
            opacity: .92
        }

        .cta-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap
        }

        .btn-invert {
            background: #fff;
            color: #166534;
            border: 1px solid #fff;
            padding: 10px 16px;
            border-radius: 999px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
            transition: transform .15s
        }

        .btn-invert:hover {
            transform: translateY(-1px)
        }

        .btn-ghost {
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .95);
            padding: 10px 16px;
            border-radius: 999px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background .15s, transform .15s
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, .12);
            transform: translateY(-1px)
        }

        .cta-note {
            max-width: 1200px;
            margin: 10px auto 0;
            padding: 0 20px;
            color: #64748b;
            font-size: 14px
        }

        /* SSS butonu yeşil outline */
        .btn-outline-green {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 2px solid #166534;
            color: #166534;
            background: transparent;
            padding: 12px 20px;
            border-radius: 10px;
            font-weight: 700;
            transition: background .15s, color .15s
        }

        .btn-outline-green:hover {
            background: #166534;
            color: #fff
        }

        /* SSS / Yardım CTA */
        .faq-cta.section {
            padding: 56px 0 64px;
            scroll-margin-top: 90px;
        }

        .faq-cta .section-title {
            color: var(--text);
            /* başlık koyu metin rengi */
            text-shadow: none;
        }

        .faq-cta .section-title::after {
            background: #166534;
            /* yeşil vurgu çizgisi */
            opacity: .25;
            /* çok hafif */
        }

        .faq-cta .section-subtitle {
            margin: 8px 0 22px;
            text-align: center;
            color: #64748b;
        }

        /* daha vurucu, yuvarlak CTA butonu */
        .btn-pill {
            border-radius: 999px;
            padding: 14px 26px;
            font-size: 18px;
        }

        .btn-icon {
            display: inline-flex;
            gap: 10px;
            align-items: center;
        }

        /* FOOTER */
        .footer {
            background: linear-gradient(180deg, #0f3e22 0%, #0b1f14 100%);
            color: #eaf5ef;
        }

        .footer .container {
            padding: 40px 20px
        }

        .footer a {
            color: #eaf5ef;
            opacity: .9;
            text-decoration: none
        }

        .footer a:hover {
            opacity: 1
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1.1fr 1.2fr 1.2fr;
            gap: 28px;
            align-items: start;
        }

        @media (max-width:1000px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width:640px) {
            .footer-grid {
                grid-template-columns: 1fr
            }
        }

        .footer-title {
            margin: 0 0 12px 0;
            font-size: 18px;
            font-weight: 800;
            color: #fff;
        }

        .footer p {
            margin: 0 0 10px 0;
            line-height: 1.6;
            color: #cde7d6
        }

        .list-unstyled {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 8px
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px
        }

        .footer-brand img {
            width: 44px;
            height: 44px
        }

        .footer-brand span {
            font-weight: 800;
            font-size: 20px;
            color: #fff
        }

        .contact-item {
            display: flex;
            gap: 10px;
            align-items: flex-start
        }

        .contact-item i {
            margin-top: 3px;
            color: #a7f3d0
        }

        .social {
            display: flex;
            gap: 8px;
            margin-top: 8px
        }

        .social a {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .35);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .15);
            margin-top: 24px;
            padding-top: 16px;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            color: #cde7d6;
            font-size: 14px;
        }

        .footer-bottom a {
            text-decoration: underline;
            opacity: .9
        }

        .footer-bottom a:hover {
            opacity: 1
        }
/* Dropdown */
/* --- Menü hizalama düzeltmeleri --- */
.nav { display:flex; align-items:center; gap:18px; }  /* zaten vardıysa sorun değil */
.nav li { position:relative; }

.nav a{
  display:inline-flex;           /* <- önemli */
  align-items:center;            /* <- önemli */
  gap:6px;
  padding:8px 10px;
  line-height:1;                 /* <- önemli: baseline sapmasını kapatır */
  border-radius:8px;
  color:var(--muted);
  font-weight:600;
}

/* Ok işareti: metni yukarı itmeyen border-arrow */
.nav li.has-sub > a::after{
  content:"";
  display:inline-block;
  width:0; height:0; margin-left:6px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:6px solid currentColor;   /* ok rengi metinle aynı */
  opacity:.7;
  transform:translateY(1px);           /* mikro hizalama */
  transition:transform .18s ease;
}
.nav li.has-sub:hover > a::after{ transform:translateY(1px) rotate(180deg); }

/* Dropdown kutusu */
.nav .sub{
  position:absolute;
  left:0;
  top:calc(100% + 8px);   /* margin-top yerine bunu kullan */
  min-width:230px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  padding:8px;
  margin:0;               /* default ul marginlerini sıfırla */
  list-style:none;
  display:none;
  z-index:80;
}
.nav .sub a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--text); white-space:nowrap;
}
.nav .sub a:hover{ background:var(--card); color:#166534; font-weight:600; }

/* Gösterme koşulları */
.nav li.has-sub:hover > .sub,
.nav li.has-sub:focus-within > .sub{ display:block; }
.nav li, .nav a { white-space: nowrap; } 


.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand img {
  width: 180px;
  height: auto;
}

/* --- Masaüstü varsayılanı: hamburger gizli --- */
.nav-toggle{ display:none; }

/* --- Mobil düzen (<=768px) --- */
@media (max-width:768px){

  /* Hamburgeri göster ve en sağa yasla */
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:auto;          /* sağa it */
    border:0;
    padding:10px 12px;
    border-radius:10px;
    background:#166534;
    color:#fff;
  }

  /* Mobilde arama butonunu gizle (isteğe bağlı) */
  .call-btn{ display:none; }

  /* Menü mobilde header’dan ayrılıp panel olsun (başlangıçta kapalı) */
  #site-nav{
    position:fixed;
    left:0; right:0; top:64px;           /* header’ın altına açılır */
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:0 16px 30px rgba(0,0,0,.08);
    transform:translateY(-16px);
    opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
    z-index:120;
    margin-inline:0;                      /* ortalamayı iptal et */
  }
  #site-nav.open{
    transform:translateY(0);
    opacity:1; pointer-events:auto;
  }

  /* Liste dikeyleşsin */
  #site-nav .nav{
    flex-direction:column;
    gap:0;
    padding:8px 0;
  }
  #site-nav .nav > li > a{
    display:block;
    padding:12px 16px;
    border-bottom:1px solid #f1f5f9;
  }

  /* Alt menüler mobilde blok olarak açık dursun */
  .has-sub > .sub{
    position:static;
    display:block;
    border:0; border-radius:0; box-shadow:none; padding:0;
  }
  .has-sub > .sub a{
    padding:10px 28px;
    border-bottom:1px dashed #e2e8f0;
  }

  /* Header satır boşluklarını biraz sıkılaştır */
  .row{ gap:12px; }
}


/* Footer mobil hizalama düzeltmesi */
@media (max-width: 768px){
  .footer-grid{
    grid-template-columns: 1fr;   /* zaten tek sütun */
    justify-items: start;          /* kartları sola hizala */
  }

  /* Hızlı Menü blok ve linkleri sola hizalı kalsın */
  .footer-grid nav{ width:100%; text-align:left; }
  .footer-grid nav .list-unstyled{
    justify-items: start;          /* grid item'ları sola */
    text-align:left;
  }
  .footer-grid nav .list-unstyled li,
  .footer-grid nav .list-unstyled a{
    text-align:left;
    display:block;                 /* tıklama alanı tam satır */
  }

  /* Sosyal ikonlar da sola hizalansın istersen */
  .footer .social{ justify-content:flex-start; }
}


/* Mobilde İletişim kutusu düzeni */
@media (max-width: 768px) {
    .cta-card {
        padding: 24px;
        border-radius: 16px;
    }

    .cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cta-text {
        text-align: left;
        width: 100%;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cta-actions a {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 12px;
        border-radius: 12px;
    }
}


/* Mobilde logo boyutunu küçült */
@media (max-width: 768px) {
  .brand img {
    width: 130px;   /* istersen 120 yapabiliriz */
    height: auto;
  }
}