@charset "UTF-8";
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Projekte CSS - V17 (TAB FULL-HEIGHT + CARD TITLE PADDING FIX) */

:root{
  --kale-accent:#00a3e0;
  --kale-ink:#0b1f3b;

  /* Poppins only */
  --ff:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --card-h:320px;
  --cap-h:56px;
  --radius:12px;

  /* HERO / TABS */
  --hero-h:220px;
  --tabs-overlap:30px;  /* filtre bar hero üstüne biniyor */
  --hero-nudge-y:-16px; /* yazıyı yukarı al (mm ayarı buradan) */
}

/* =========================
   HERO
========================= */
.projeler-hero{
  background:linear-gradient(rgba(52,73,94,.90),rgba(52,73,94,.90));
  background-size:cover;

  height:var(--hero-h);
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  color:#fff;

  /* Sekme bindirmesi kadar altta alan bırak (optik denge) */
  padding:0 0 var(--tabs-overlap) 0 !important;

  position:relative;
  overflow:hidden;
}

/* Global .hero-content absolute vb. varsa öldür + NUDGE */
.projeler-hero .hero-content{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  transform:translateY(var(--hero-nudge-y)) !important;

  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px !important;
  box-sizing:border-box;
  z-index:1;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important; /* H1-slogan arası */
}

/* Global h1/p pozisyon saçmalıkları varsa öldür */
.projeler-hero .hero-content h1,
.projeler-hero .hero-content p{
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  margin:0 !important;
}

.projeler-hero h1{
  font-family:var(--ff) !important;
  font-size:52px;
  font-weight:800;
  letter-spacing:3px;
  line-height:1.02;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.projeler-hero p{
  font-family:var(--ff) !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.18 !important;

  max-width:none !important;
  white-space:nowrap !important; /* desktop tek satır */

  opacity:.98;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* 1100 altı: slogan kırılabilir + biraz küçül */
@media (max-width:1100px){
  .projeler-hero p{
    white-space:normal !important;
    max-width:820px !important;
    font-size:22px !important;
    line-height:1.25 !important;
  }
}

/* =========================
   CATEGORY MENU (FULL-HEIGHT + EQUAL TABS FIX)
========================= */
.filtre-container{
  background:transparent;
  position:sticky;
  top:0;
  z-index:999;
  padding:0 40px;

  /* hero üstüne bindirme */
  margin-top:calc(-1 * var(--tabs-overlap));
}

.filtre-menu{
  display:flex !important;
  width:100% !important;
  justify-content:center;
  align-items:stretch;
  max-width:1300px;
  margin:0 auto;
  background:#1a252f;
  border-bottom:3px solid var(--kale-accent);
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  overflow:hidden; /* active bg tam dolsun */
}

.filtre-btn{
  font-family:var(--ff) !important;

  display:flex !important;                 /* global a display override kır */
  align-items:center !important;
  justify-content:center !important;

  flex:1 1 0% !important;                  /* eşit genişlik */
  min-width:0 !important;                  /* sıkışma/taşma kontrol */
  box-sizing:border-box !important;

  background:transparent !important;
  color:#ecf0f1 !important;

  padding:22px 10px !important;
  min-height:70px !important;              /* buton “incecik” olmasın */
  line-height:1.2 !important;

  font-weight:800 !important;
  font-size:14px !important;

  cursor:pointer;
  text-align:center !important;
  text-decoration:none !important;

  border-right:2px solid #000;
  transition:.3s;

  white-space:normal !important;           /* DE uzun başlıklar */
  word-break:break-word !important;

  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.filtre-btn:last-child{ border-right:none; }

.filtre-btn:hover,
.filtre-btn.active{
  background:var(--kale-accent) !important;
  color:#000 !important;
}

/* =========================
   GRID / CARDS
========================= */
.projeler-vitrin{
  padding:60px 0;
  display:block;
  width:100%;
}

.projeler-vitrin .container{
  max-width:1300px;
  width:100%;
  padding-left:20px;
  padding-right:20px;
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
  display:block;
  box-sizing:border-box;
}

.proje-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
  width:100%;
  margin:0 auto;
  box-sizing:border-box;
}

.app-card{
  position:relative;
  width:100%;
  min-width:0;
  height:var(--card-h) !important;
  overflow:hidden;
  border-radius:var(--radius);
  text-decoration:none;
  display:block;

  border:1px solid rgba(11,31,59,.16);
  background:#fff;
  box-shadow:0 12px 28px rgba(11,18,32,.10);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.app-card:hover{
  border-color:rgba(0,163,224,.55);
  box-shadow:0 20px 44px rgba(11,18,32,.16);
  transform:translateY(-2px);
}

.card-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:calc(100% - var(--cap-h));
  background-size:cover;
  background-position:center;
  transition:transform .8s cubic-bezier(.25,.46,.45,.94), filter .25s ease;
  filter:saturate(1.04) contrast(1.02);
}

.app-card:hover .card-bg{
  transform:scale(1.06);
  filter:saturate(1.06) contrast(1.03);
}

.card-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:calc(100% - var(--cap-h));
  background:linear-gradient(to top, rgba(0,0,0,.10) 0%, rgba(0,0,0,.04) 55%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

.card-content{
  position:absolute;
  inset:0;
  z-index:2;
  box-sizing:border-box;
  font-family:var(--ff) !important;
}

.card-content h3{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--cap-h);
  margin:0 !important;

  /* SOLDAN SIKIŞMA FIX */
  padding:0 18px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  box-sizing:border-box !important;

  font-family:var(--ff) !important;
  font-weight:800 !important;
  font-size:14px !important;
  line-height:1.15 !important;
  letter-spacing:.2px !important;
  text-transform:uppercase;
  color:var(--kale-ink) !important;

  background:linear-gradient(#fff,#f7f9fc);
  border-top:1px solid rgba(11,18,32,.10);
  overflow:hidden;

  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}

/* Metin (açıklama) sadece placeholder kartta görünsün */
.app-card:not(.is-placeholder) .card-content p{ display:none !important; }

.btn-text{
  position:absolute;
  left:50%;
  top:calc((100% - var(--cap-h)) / 2);
  transform:translate(-50%,-50%) scale(.98);

  font-family:var(--ff) !important;
  color:#fff !important;
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;

  background:var(--kale-accent);
  padding:10px 18px;
  border-radius:999px;
  box-shadow:0 14px 30px rgba(0,0,0,.22);

  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  display:inline-block !important;
  width:auto !important;
}

.app-card:hover .btn-text,
.app-card:focus-within .btn-text{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

@media (hover:none){
  .btn-text{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

/* Responsive */
@media (max-width:1100px){
  .proje-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* MOBILE TAB PREMIUM FIX */
@media (max-width:720px){
  :root{ --hero-nudge-y:0px; }

  .filtre-container{ padding:0 12px; }

  .filtre-menu{
    flex-direction:column;
    align-items:stretch;
    border-bottom:3px solid var(--kale-accent);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(0,0,0,.26);
  }

  .filtre-btn{
    flex:none !important;
    width:100% !important;
    padding:14px 12px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    min-height:52px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(0,0,0,.85) !important;
    text-transform:uppercase;
    white-space:normal;
  }

  .filtre-btn:last-child{ border-bottom:none; }
  .proje-grid{ grid-template-columns:1fr; }

  .projeler-hero{
    height:auto !important;
    min-height:190px !important;
    padding:54px 14px 30px !important;
  }

  .projeler-hero p{
    white-space:normal !important;
    font-size:clamp(16px,4.2vw,20px) !important;
    max-width:560px !important;
    margin:0 auto !important;
  }

  .projeler-hero h1{
    font-size:clamp(28px,7.2vw,36px) !important;
    letter-spacing:1px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:520px){
  :root{ --card-h:308px; --cap-h:58px; --radius:12px; }
  .card-content h3{ font-size:14px !important; }
  .btn-text{ padding:10px 16px; }
  .filtre-btn{ min-height:50px !important; font-size:12px !important; padding:13px 12px !important; }
}

@media (max-width:420px){
  .projeler-hero{ padding:50px 12px 28px !important; }
  .projeler-hero h1{ letter-spacing:.6px !important; }
}

/* =========================
   DE PROJE SAYFASI - OVERRIDES
========================= */
html body .projeler-hero{ padding:0 0 var(--tabs-overlap) 0 !important; }
html body .filtre-container{
  position:sticky !important;
  top:0 !important;
  margin-top:calc(-1 * var(--tabs-overlap)) !important;
}

/* Placeholder (boş kategori mesajı) premium kutu */
.app-card.is-placeholder{
  height:auto !important;
  min-height:220px;
  border:1px dashed rgba(11,31,59,.26);
  background:linear-gradient(#fff,#fbfcfe);
  box-shadow:0 10px 26px rgba(11,18,32,.10);
}
.app-card.is-placeholder .card-bg{
  background:linear-gradient(135deg, rgba(0,163,224,.12), rgba(11,31,59,.08));
  filter:none;
}
.app-card.is-placeholder .card-overlay{ background:none; }
.app-card.is-placeholder .card-content{
  position:relative;
  padding:22px 22px 18px;
}
.app-card.is-placeholder .card-content h3{
  position:relative;
  height:auto;
  background:none;
  border-top:none;
  padding:0 !important;
  margin:0 0 10px 0 !important;
  text-transform:none;
  font-size:18px !important;
  letter-spacing:0 !important;
}
.app-card.is-placeholder .card-content p{
  display:block !important;
  margin:0 0 14px 0;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  color:rgba(11,18,32,.70);
}
.app-card.is-placeholder .btn-text{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  opacity:1;
  box-shadow:none;
}

/* Tek proje varsa SOLDA kalsın (center override yok) */
.proje-grid > .app-card{ justify-self:stretch; }

/* Not: :has() bazı ortamlarda sorun çıkarabilir; JS ile placeholder gizleme yapıyorsan bu satır gereksiz */