/* ==============================================================
   PROJELER (temiz modül)
   - Kart ARKA PLANI YOK, animasyon YOK
   - Çerçeve SADECE GÖRSELİN ETRAFINDA
   - Görsel, çerçevenin kenarlarından %3 içeri (inset)
   - Detaylar butonu: btn-overshoot (daralan kenar) ile
   - Aynı kolondaki kartlar arasında 80px boşluk
   ============================================================== */

/* Sayfa değişkenleri (tek yerden oyna) */
body.projects-page{
  --col-w: clamp(300px, 30vw, 360px); /* kolon genişliği */
  --center-gap: 200px;                /* kolonlar arası boşluk */
  --row-gap: 80px;                    /* kartlar arası boşluk */
  --stagger: 200px;                   /* sağ kolon ilk kart ofseti */
  --proj-media-ratio: 4 / 5;          /* görsel oranı */

  /* Görsel çerçevesi */
  --img-outline-color: rgba(255,255,255,.20);
  --img-outline-w: 1px;

  /* ÜST BOŞLUK — projeler sayfası */
  --page-top-gap: var(--page-gap-base, 150px);
}

/* Başlık alanı */
body.projects-page .projects-hero{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  text-align: center;
  /* eskiden: padding: 28px 16px 16px; */
  padding: var(--page-top-gap) 16px 16px;       /* ← burada */
}
body.projects-page .projects-hero h1{
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  letter-spacing: .6px;
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 0 0 12px;
}
body.projects-page .projects-hero .muted{ margin:0; opacity:.7; font-size:15px; }

/* --------------------------------------------------------------
   İki kolon grid — odd/even ile SOL/SAĞ
   -------------------------------------------------------------- */
body.projects-page .projects-list.two-col{
  width: calc(var(--col-w)*2 + var(--center-gap));
  max-width: 100%;
  margin: 0 auto clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: var(--col-w) var(--col-w); /* 2 sabit kolon */
  column-gap: var(--center-gap);                    /* kolon arası boşluk */
  align-items: start;
}
/* Kolonlar: düşey akış ve 80px aralık */
body.projects-page .projects-list.two-col .proj-col{
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);                               /* kartlar arası 80px */
}

body.projects-page .projects-list.two-col .project-card:nth-child(odd){  grid-column:1; }
body.projects-page .projects-list.two-col .project-card:nth-child(even){ grid-column:2; }
/* Diğer sağ kolon kartları düz aksın */
body.projects-page .projects-list.two-col .project-card:nth-child(even):not(:nth-child(2)){ margin-top:0; }

/* Başlık alanı */
.projects-hero{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  text-align: center;
  /* eskiden: padding: 28px 16px 16px; */
  padding: var(--page-top-gap) 16px 16px;   /* ← üst boşluk burada */
}

/* --------------------------------------------------------------
   KART — yalın iskelet (arka plan yok, border yok)
   -------------------------------------------------------------- */
body.projects-page .project-card{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;            /* keskin hat */
  margin: 0 !important;        /* aralığı yalnız grid gap yönetir */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ------------------ GÖRSEL KUTUSU ------------------
   - Çerçeve SADECE bu kutuda
   - Görsel %3 içeri (inset) — çerçeveden boşluk kalır
   --------------------------------------------------- */
body.projects-page .project-card .proj-media{
  position: relative;
  width: 100%;
  aspect-ratio: var(--proj-media-ratio);
  overflow: hidden;
  /* dış çizgi (sadece resim kutusunda) */
  outline: var(--img-outline-w) solid var(--img-outline-color);
  outline-offset: 0;           /* çizgi tam kenarda */
}
body.projects-page .project-card .proj-media img{
  /* kutu kenarlarından %3 içeri al */
  position: absolute; inset: 3%;
  width: 94%; height: 94%;
  object-fit: cover;
  display: block;
}

/* Başlık */
body.projects-page .project-card .proj-body h3{
  margin: 20px 0 0px;
  font-weight: 500;
  font-size: clamp(18px,1.8vw,22px);
  letter-spacing: .6px;
}

/* Meta/açıklama gizli (yalın kart) */
body.projects-page .project-card .proj-body .proj-meta,
body.projects-page .project-card .proj-body p{ display:none !important; }

/* Projeler sayfasındaki Detaylar butonunun temel görünümü */
body.projects-page .project-card .proj-cta{
  /* kutuyu büyütmek için padding */
  --btn-pad-y: 20px;     /* ↑ dikey boşluk (üst/alt) */
  --btn-pad-x: 25px;     /* → yatay boşluk (sağ/sol) */
  padding: var(--btn-pad-y) var(--btn-pad-x);

  /* şeffaf, keskin köşe — overshoot çizgileri buna çizilecek */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none; filter:none; backdrop-filter:none;

  display:inline-flex; align-items:center; justify-content:center;
  margin: 10px auto 0;
  text-decoration:none; font-weight:600; letter-spacing:.2px;
  color: inherit;
}

/* Projeler → Detaylar butonu: Randevu'daki modelin AYNISI
   - Arkaplan/border YOK (tam şeffaf)
   - Çizgiler buton KUTUSU içinde; hover’da sadece çizgiler kısalır
   - shrink tek değerden yönetilir (hem yatay hem dikey) */
/* Projeler → Detaylar butonu (overshoot): YATAY/DİKEY kısalma ayrı */
body.projects-page .project-card .proj-cta.btn-overshoot{
  /* kutu boyutu – istersen değiştir */
  padding: var(--btn-pad-y, 14px) var(--btn-pad-x, 22px);
  padding-top:    calc(var(--btn-pad-y, 14px) + 4px);

  /* her zaman şeffaf ve keskin köşe */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none; filter: none; backdrop-filter: none;
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 10px auto 0; font-weight: 600; letter-spacing: .4px;
  
  /* çizgi görünümü + metinden uzaklık */
  --line-color: rgba(255,255,255,.45);
  --thick: 1px;
  --inset-x: 10px;   /* sol/sağ çizgilerin kenardan uzaklığı */
  --inset-y: 10px;   /* üst/alt çizgilerin kenardan uzaklığı */

  /* >>> KISALMA MİKTARLARI — ayrı ayrı kontrol <<< */
  --shrink-h: 20px;  /* ÜST/ALT çizgilerin toplam kısalması (px veya %) */
  --shrink-v: 20px;  /* SOL/SAĞ çizgilerin toplam kısalması (px veya %) */
}




/* btn-overshoot sınıfını HTML’de eklemeyi unutma:
   <a class="proj-cta btn-overshoot" ...>Detaylar →</a> */

/* ============================================================
   INFO CARD — solda görsel (4), sağda metin (6)
   - Kartta arka plan/border yok (sade)
   - Görsel yüksekliği sabit: 200px
   - Çerçeve SADECE görsel kutusunda; görsel çerçeveden %3 içeride
   - Eski markup (.info-grid) ile de uyumlu çalışır
   ============================================================ */

/* 1) Kart iskeleti: yan yana 4:6 (yüksek spesifiklik + !important) */
body.projects-page .project-card.info-card{
  display: grid !important;                 /* yan yana */
  grid-template-columns: 4fr 6fr !important;/* 4:6 oran */
  align-items: center !important;           /* dikey ortala */
  gap: clamp(12px, 2vw, 20px) !important;   /* resim–metin arası boşluk */

  background: transparent !important;       /* kart sade */
  border: 0 !important;
  border-radius: 0 !important;              /* keskin köşe */
  margin: 0 !important; padding: 0 !important;
  text-align: left !important;
}

/* 2) Görsel kutusu — sadece burada çerçeve var */
body.projects-page .project-card.info-card .info-media{
  position: relative;
  width: 100%;
  height: 200px;                            /* sabit yükseklik */
  outline: var(--img-outline-w, 1px) solid
           var(--img-outline-color, rgba(255,255,255,.20));
  outline-offset: 0;
  overflow: hidden;                         /* içe alma güvenle kesilsin */
}

/* Görseli çerçeveden %3 içeri al (üst/sağ/alt/sol = 3%) */
body.projects-page .project-card.info-card .info-media > img{
  position: absolute; inset: 3%;
  width: 94%; height: 94%;
  object-fit: cover; display: block;
}

/* 3) Metin bloğu (sağ taraf) */
body.projects-page .project-card.info-card .info-text{
  display: grid; align-content: center; gap: 6px;
}
body.projects-page .project-card.info-card .info-text h4{
  margin: 0; font-weight: 800; font-size: clamp(16px,1.6vw,20px);
}
body.projects-page .project-card.info-card .info-text p{
  margin: 0; opacity: .85; font-size: 14px; line-height: 1.45;
}

/* 4) ESKİ MARKUP UYUMU: .info-grid kullanıyorsan da yan yana 4:6 olsun */
body.projects-page .project-card.info-card .info-grid{
  display: grid !important;
  grid-template-columns: 4fr 6fr !important;
  align-items: center; gap: clamp(12px, 2vw, 20px);
}
body.projects-page .project-card.info-card .info-grid .img{ /* eski sol hücre */
  position: relative; width: 100%; height: 200px;
  outline: var(--img-outline-w, 1px) solid
           var(--img-outline-color, rgba(255,255,255,.20));
  outline-offset: 0; overflow: hidden;
}
body.projects-page .project-card.info-card .info-grid .img > img{
  position: absolute; inset: 3%; width:94%; height:94%; object-fit: cover;
}
body.projects-page .project-card.info-card .info-grid .text{ display:grid; gap:6px; }

  /* Kolon sarmalayıcılarını içerik gibi davranır hâle getir (flatten) */
  .projects-page .projects-list.two-col .proj-col{
    display: contents; /* kartlar doğrudan grid çocuğu olur */
  }

  /* Intro (örnek resim + açıklama) en üst sıraya çıksın, mümkünse tam satır kapla */
  .projects-page .project-card.info-card{
    order: -1;                 /* en başa */
    grid-column: 1 / -1;       /* iki kolonu birleştirip tam satırda göster */
    margin-bottom: clamp(24px, 4vw, 40px);
  }
/* =========================================================
   ORTA ŞERİT (spine) — iki kolonun tam ortasından geçen çizgi
   - Kartların arkasında durur (z-index:0 + pointer-events:none)
   - Yalnız geniş ekranda görünür, mobilde kapalıdır
   - Kalınlık / renk / üst-alt boşlukları değişkenlerle yönetilir
   ========================================================= */

/* 0) Güvenlik: kapsayıcıyı referans noktası yap ve stacking ayarla */
body.projects-page .projects-list.two-col{
  position: relative;     /* ::before konumlandırma referansı */
  z-index: 0;             /* şerit en arkada kalsın */
}

/* (opsiyonel) kartları bir tık üste alalım */
body.projects-page .project-card{ position: relative; z-index: 1; }

/* 1) Değerler — istersen buradan tek yerden oynarsın */
body.projects-page{
  --spine-w: 3px;                                /* şerit kalınlığı */
  --spine-color: rgb(208, 208, 208);          /* şerit rengi */
  --spine-fade: 80px;                            /* üst/alt solma uzunluğu */
  --spine-top-gap: 0px;                          /* üstten boşluk */
  --spine-bottom-gap: 0px;                       /* alttan boşluk */
}


/* Sadece bu sayfalarda, global .page-content üst boşluğunu sıfırla */
body.servisler-page .page-content,
body.projects-page  .page-content,
body.project-detail .page-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================
   PROJELER — Orta “spine” çizgisi
   (iki sütunun tam ortasından geçen beyaz hat)
   ============================ */

/* 1) Çizginin referansı: iki sütunlu liste kapsayıcısı */
.projects-page .projects-list.two-col{
  position: relative;        /* ::before için referans alan */
  z-index: 0;                /* çizgi altta kalacak */
  /* Ayarlanabilir değişkenler */
  --spine-w: 3px;            /* çizgi kalınlığı */
  --spine-color: rgba(255,255,255,.88); /* çizgi rengi (beyaz) */
  --spine-fade: 80px;        /* üst-alt yumuşak geçiş miktarı */
  --spine-top-gap: 0px;      /* üstte bırakılacak boşluk (başlık/menü için) */
  --spine-bottom-gap: 0px;   /* altta bırakılacak boşluk (footer için) */
  --spine-shift: 0px;        /* gerekiyorsa merkezden sağ/sol kaydırma */
}

/* 2) Çizginin kendisi: pseudo-element (arka planda) */
.projects-page .projects-list.two-col::before{
  content: "";
  position: absolute;
  top:    var(--spine-top-gap);
  bottom: var(--spine-bottom-gap);

  /* Tam orta: 50%; genişlik kadar yarım piksel dengeleme + opsiyonel shift */
  left: calc(50% + var(--spine-shift) - (var(--spine-w) / 2));
  width: var(--spine-w);

  /* Üstte ve altta yumuşak kaybolan dikey hat */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    var(--spine-color) var(--spine-fade),
    var(--spine-color) calc(100% - var(--spine-fade)),
    rgba(0,0,0,0) 100%
  );

  pointer-events: none;  /* tıklamaları engellemesin */
  z-index: 0;            /* kartların arkasında kalsın */
}

/* 3) Kartları üste alalım ki çizgi kartların “altından” geçsin */
.projects-page .project-card{
  position: relative;
  z-index: 1;
}

html { scroll-behavior: auto !important; }