

:root{
      --clr-bg: #fff;
      --clr-ink: #000;
      --clr-ink-soft:#333;
      --clr-primary:#1f2937;   /* charcoal */
      --clr-accent:#c4722a;    /* copper */
      --clr-secondary:#0fa3b1; /* teal */
      --clr-link:#c4722a;
    }

    /* ---- Global Kurallar ---- */
    /* Tüm sayfa arkaplanı için #content kullanılacak */
    #content, body{
      background: var(--clr-bg);
      color: var(--clr-ink);
    }
    /* Tüm section'lar transparan olmalı */
    section{ background: transparent !important; }

    /* Başlık renkleri (ayrı ve !important şartı) */
    h1{ color: var(--clr-ink) !important; }
    h2{ color: var(--clr-accent) !important; }
    h3{ color: var(--clr-secondary) !important; }
    h4{ color: var(--clr-ink-soft) !important; }

    /* Ana menü link rengi (kurumsal uyumlu) */
    #mainmenu a{ color: var(--clr-link); }
    #mainmenu a:hover{ color: var(--clr-link) !important; }
    #mainmenu li li a{color: #111827 !important; background-color: var(--clr-link) !important; border-bottom: 1px solid #111827;}

    #mainmenu li li a:hover{color: #111827 !important; background-color: #d57929 !important;}

    header .social a {color: #c4722a !important;}

    .call-to-action {
    background: #af5b12;
    h2{color: #fff !important;}
} /* Footer üstü haritada bulun alanı */

footer h3{color: #fff !important;}

  /* === LogoText – dark (varsayılan) ===================================== */
.logotext{
  margin:0; line-height:1; white-space:nowrap; display:inline-flex; gap:.5rem;
  font-weight:900; letter-spacing:.3px; font-stretch:100%;
  font-size: clamp(20px, 2.1vw, 32px);

  /* koyu zemin için degrade yazı */
  background: linear-gradient(90deg, #e8edf3 0%, #c4722a 60%, #0fa3b1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;

  /* koyuda daha belirgin gölge */
  text-shadow: 0 .5px 0 rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.28);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* alt vurgu çizgisi */
h2.logotext::after{
  content:""; display:block; height:3px; border-radius:3px; margin-top:6px; width:44%;
  background: linear-gradient(90deg, #c4722a, #0fa3b1);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Menü link rengi – koyu header’a uygun */
#mainmenu a{ color: var(--clr-link, #c4722a); }

/* === Light mode (header beyazken .is-light ver) ======================= */
.is-light h2.logotext{
  /* beyaz zeminde daha koyu ve keskin */
  background: linear-gradient(90deg, #1f2937 0%, #c4722a 65%, #0fa3b1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;

  /* beyaz zeminde ağır gölgeyi azalt */
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.08);
}

/* light’ta alt çizgiyi biraz yumuşat */
.is-light h2.logotext::after{
  background: linear-gradient(90deg, #c4722a, #0fa3b1);
  opacity:.7; box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Menü link rengi – beyaz header’da koyu tonda, hover’da accent */
.is-light #mainmenu a{
  color: #1f2937 !important;
}
.is-light #mainmenu a:hover{
  color: #c4722a !important;
}

/* Mobilde header beyaz kullanıyorsan .is-light ile aynı etkiyi korumak için
   varsayılan olarak light davranışı uygula (istersen kaldır) */
@media (max-width: 991.98px){
  .mobile-header-light h2.logotext{ /* opsiyonel yardımcı sınıf */
    background: linear-gradient(90deg, #1f2937 0%, #c4722a 65%, #0fa3b1 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.08);
  }
  .mobile-header-light #mainmenu a{ color:#1f2937 !important; }
}



    /* 2. BÖLÜM  */

     .ert-about .lead{ color: var(--clr-ink-soft) !important; }

    .ert-cta{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 767.98px){
      .ert-cta{ grid-template-columns: 1fr; }
    }

    .cta-card{
      position: relative;
      padding: 18px 16px;
      border-radius: 14px;
      border: 1px solid #acaaaa;
      background: rgba(255,255,255,.04);
      text-decoration: none;
      color: var(--clr-ink) !important; /* hover’da metin rengi sabit */
      transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
      will-change: transform;
      min-height: 92px;
      display: flex; align-items: center; gap: 14px;
    }
    .cta-card:hover{
      transform: translateY(-3px);
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .cta-ico{
      flex: 0 0 auto;
      width: 44px; height: 44px;
      border-radius: 12px;
      display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(196,114,42,.18), rgba(15,163,177,.18));
      border: 1px solid rgba(255,255,255,.14);
      font-size: 20px; /* Bootstrap Icon boyutu */
    }
    .cta-text h3{
      margin: 0 0 4px; font-size: 18px; line-height: 1.2;
      color: var(--clr-accent) !important; /* h3 farklı renk, kural gereği !important */
      font-weight: 700;
    }
    .cta-text p{
      margin: 0; font-size: 14px; color: var(--clr-ink-soft) !important;
    }

    /* 3. BÖLÜM  */

    .svc .svc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  color: var(--clr-ink) !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.svc .svc-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  color: var(--clr-ink) !important;
}
.svc .svc-btn--accent{
  background: var(--clr-accent);
  border-color: transparent;
  color: #111827 !important;
}
.svc .svc-btn--accent:hover{ background: #d48139; color:#111827 !important; }
.svc .svc-btn--ghost{ background: rgba(255,255,255,.06); }

/* Kart */
.svc-card{
  position: relative; overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid #acaaaa;
  height: 100%;
  display:flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.svc-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
}

/* Görsel */
.svc-media{ position: relative; }
.svc-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.svc-media img{
  width:100%; height:auto; display:block;
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* İçerik */
.svc-content{
  padding: 16px;
}
.svc-title{
  margin: 8px 0 6px;
  font-size: 20px; line-height: 1.25; font-weight: 800;
  color: #af5b12 !important; /* h3 farklı renk ve !important */
}
.svc-desc{
  color: var(--clr-ink-soft) !important;
  margin: 0 0 12px; font-size: 14.5px;
}

/* Giriş animasyonu */
.js-svc-reveal{
  opacity: 0; transform: translateY(16px);
}
.js-svc-reveal.is-visible{
  animation: svcRise .7s ease forwards;
}
.js-svc-reveal.is-visible:nth-child(1){ animation-delay: .05s; }
.js-svc-reveal.is-visible:nth-child(2){ animation-delay: .15s; }
.js-svc-reveal.is-visible:nth-child(3){ animation-delay: .25s; }

@keyframes svcRise{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* 4. BÖLÜM  */

 .cta-bnr{
      --bnr-img: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1920&auto=format&fit=crop');
      position: relative;
      isolation: isolate;
      min-height: clamp(44vh, 60vh, 72vh);
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    /* Arka plan görseli */
    .cta-bnr::before{
      content:""; position:absolute; inset:0; z-index:-2;
      background-image: var(--bnr-img);
      background-size: cover; background-position: center;
      transform: scale(1.02);
      transition: transform .6s ease;
    }
    /* Karanlık overlay */
    .cta-bnr::after{
      content:""; position:absolute; inset:0; z-index:-1;
      background: radial-gradient(80% 80% at 50% 40%, rgba(12,18,32,.15) 0%, rgba(12,18,32,.55) 50%, rgba(12,18,32,.85) 100%);
    }
    .cta-bnr:hover::before{ transform: scale(1.05); }

    /* İçerik */
    .cta-bnr__inner{
      width: 100%;
      max-width: 1200px;
      padding: clamp(20px, 6vw, 48px);
      text-align: center;
    }
    .cta-bnr h2{
      color: #acaaaa !important;
      font-weight: 900; line-height: 1.1;
      font-size: clamp(28px, 5vw, 56px);
      margin: 0 0 10px;
      text-shadow: 0 2px 14px rgba(0,0,0,.35);
    }
    .cta-bnr p{
      color: #fff !important;
      margin: 0 auto 18px;
      max-width: 70ch;
      font-size: clamp(14px, 1.4vw, 18px);
    }

    /* Butonlar (a etiketi) */
    .cta-actions{
      display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    }
    .cta-btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      text-decoration: none; font-weight: 700; letter-spacing:.2px;
      color: #e7e1e1 !important;       /* hover’da metin rengi sabit */
      transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
      will-change: transform;
    }
    .cta-btn:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.25);
      box-shadow: 0 10px 28px rgba(0,0,0,.30);
      color: var(--clr-ink) !important;
    }
    .cta-btn--accent{
      background: var(--clr-accent);
      border-color: transparent;
      color: #111827 !important;
    }
    .cta-btn--accent:hover{ background:#d48139; color:#111827 !important; }

    /* Giriş animasyonu */
    .cta-bnr .reveal{
      opacity:0; transform: translateY(14px);
      animation: none;
    }
    .cta-bnr.is-visible .reveal{ animation: ctaRise .7s ease forwards; }
    .cta-bnr.is-visible .reveal:nth-child(1){ animation-delay:.05s; }
    .cta-bnr.is-visible .reveal:nth-child(2){ animation-delay:.15s; }
    .cta-bnr.is-visible .reveal:nth-child(3){ animation-delay:.25s; }

    @keyframes ctaRise{
      from{ opacity:0; transform: translateY(14px); }
      to{ opacity:1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce){
      .cta-bnr::before{ transform:none !important; transition:none !important; }
      .cta-bnr .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
    }

    /* 5. BÖLÜM  */

    /* ===== ERT – Referanslar ===== */
.refs-filters{
  display:inline-flex; gap:10px; flex-wrap:wrap;
}
.refs-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  color: var(--clr-ink) !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.refs-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.refs-chip.is-active{
  background: var(--clr-accent); color:#111827 !important; border-color: transparent;
}

/* Kartlar */
.ref-card{
  position:relative; overflow:hidden; height:100%;
  border-radius:16px;
  border:1px solid #acaaaa;
  background: rgba(255,255,255,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.ref-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
}
.ref-media{
  position:relative;
}
.ref-media img{
  width:100%; display:block; height:auto; aspect-ratio: 3/2; object-fit:cover;
}
.ref-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.ref-badge{
  position:absolute; left:12px; top:12px;
  padding:6px 10px; border-radius:999px;
  background: rgba(15,163,177,.85);
  color:#fff; font-size:12.5px; font-weight:700;
  border:1px solid rgba(255,255,255,.18);
}
.ref-badge--done{ background: rgba(196,114,42,.9); }

.ref-body{ padding:14px 14px 16px; }
.ref-title{
  margin:8px 0 4px; font-size:18px; line-height:1.25; font-weight:800;
  color: #af5b12 !important; /* h3 farklı renk kuralı */
}
.ref-meta{
  margin:0 0 10px; font-size:14px; color: var(--clr-ink-soft) !important;
}
.ref-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  color: var(--clr-ink) !important;
  border-bottom:1px dashed rgba(255,255,255,.35);
}
.ref-link:hover{ border-bottom-color: rgba(255,255,255,.7); }

/* Giriş animasyonu */
.js-ref-reveal{ opacity:0; transform: translateY(16px); }
.js-ref-reveal.is-visible{ animation: refRise .7s ease forwards; }
@keyframes refRise{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Filtre gizleme (yumuşak geçiş) */
.ref-hide{
  opacity:.0; transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
