:root{
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#22b8cf; /* turkuaz */
  --card:#ffffff;
  --bg:#f5f7fa;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.10);
}

/* Reset mini */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; display:block; }

body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; color:var(--ink); background:var(--bg); }

/* Üst bar */
.site-top{
  background:#192333; color:#fff; position:sticky; top:0; z-index:10;
}
.site-top .container{
  max-width:1200px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:24px; justify-content:space-between;
}
.brand{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px; }
.top-nav a{ color:#dbeafe; text-decoration:none; margin-left:16px; font-weight:600; }
.top-nav a.active{ color:#fff; }

/* Başlık bölümü */
.hero{
  padding:56px 0 22px;
  background:linear-gradient(180deg, #ffffff 0%, transparent 100%);
}
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.hero h1{ font-size:44px; margin:0 0 12px; letter-spacing:.3px; }
.lead{ font-size:18px; color:var(--muted); margin:0; max-width:920px; }

/* === 3 geniş kart — ortalı === */
.collectionList{
  display:grid;
  grid-template-columns: repeat(3, 420px); /* daha büyük kartlar */
  gap: 28px;
  justify-content:center; /* bloğu ortala */
  padding: 46px 0 56px;
}

.collectionView{
  width:100%;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.collectionView:hover{ transform: translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.14); }

.fixed-image-container{
  width:100%;
  aspect-ratio: 3 / 2;        /* daha yüksek görüntü */
  overflow:hidden;
}
@supports not (aspect-ratio: 1){
  .fixed-image-container{ height: 360px; }
}

.base-image{
  width:100%; height:100%; object-fit:cover; cursor:zoom-in;
  transition: transform .35s ease;
}
.collectionView:hover .base-image{ transform: scale(1.06); }

.text-section{ padding: 14px 18px 18px; text-align:center; }
.card-title{ margin:0; font-size:1.15rem; font-weight:800; }

/* Alt bilgi */
.site-footer{ padding:28px 0; background:#fff; border-top:1px solid #eef2f7; margin-top:20px; }
.site-footer small{ color:#8a94a6; }

/* Responsive */
@media (max-width: 1200px){
  .collectionList{ grid-template-columns: repeat(3, 360px); }
}
@media (max-width: 1100px){
  .collectionList{ grid-template-columns: repeat(2, 420px); }
}
@media (max-width: 768px){
  .hero{ padding:48px 0 12px; }
  .hero h1{ font-size:20px; }
  .collectionList{ grid-template-columns: 1fr; padding: 28px 0 40px; }
  .fixed-image-container{ aspect-ratio: 4 / 3; }
}

/* === Lightbox (JS DOM'a ekler) === */
.omega-lb[hidden]{ display:none; }
.omega-lb{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  display: grid; place-items: center;
  z-index: 9999;
}
.omega-lb-img{
  max-width: 92vw; max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transform: scale(.98); opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.omega-lb.show .omega-lb-img{ opacity:1; transform: scale(1); }

.omega-lb-btn{
  position:absolute; width:46px; height:46px;
  border-radius:999px; border:1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.14); color:#fff;
  display:grid; place-items:center; font-size:28px; line-height:1;
  cursor:pointer; backdrop-filter: blur(2px);
  transition: background .15s ease, transform .1s ease;
}
.omega-lb-btn:hover{ background: rgba(255,255,255,.22); }
.omega-lb-btn:active{ transform: scale(.96); }
.omega-lb-close{ top:22px; right:22px; }
.omega-lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
.omega-lb-next{ right:22px; top:50%; transform:translateY(-50%); }
.omega-lb-caption{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#fff; opacity:.85; font-size:14px; text-align:center; max-width:92vw;
}
/* Hover zoom için hazırlık */
.fixed-image-container{
  overflow: hidden;
  position: relative;
}
.base-image{
  transition: transform .2s ease;
  will-change: transform, transform-origin;
  cursor: zoom-in; /* tıklayınca lightbox açılmaya devam ediyor */
}
/* Zoom aktifken */
.fixed-image-container.is-zooming .base-image{
  transform: scale(1.8);   /* 1.6–2.2 arası deneyebilirsin */
}
/* ==== Sayfa başlığı (daha estetik tipografi) ==== */
.section-head{            /* .hero kullanıyorsan onu da aynı şekilde stillendir */
  margin-top: 56px;       /* nav’dan uzaklaştır */
  margin-bottom: 16px;    /* grid’e yakınlaştır */
  padding: 0 20px;
}
.section-head h1{
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.1;
}
.section-head .lead{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.75;               /* daha ferah */
  color: #556070;                  /* daha sofistike gri */
  max-width: 920px;
  margin: 0;
  text-wrap: pretty;               /* satır kırılışları daha dengeli */
}

/* ==== Grid: kartlar aynı hizada, görseller tek çizgide başlasın ==== */
.collectionList{
  display: grid;
  grid-template-columns: repeat(3, 420px);
  gap: 28px;
  justify-content: center;
  align-items: start;              /* tüm kartların üstü aynı hizadan başlar */
  padding: 18px 0 56px;            /* başlıkla arası kısa */
}

/* Kart */
.collectionView{
  margin: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Görsel alanı: hepsi aynı yükseklik ve aynı çizgiden başlasın */
.fixed-image-container{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;            /* aynı oran = aynı yükseklik */
  overflow: hidden;
}
.base-image{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center;        /* zoom için referans */
  cursor: zoom-in;
}

/* Kart başlığı: daha okunaklı ve dengeli kırılım */
.text-section{
  padding: 14px 18px 18px;
  text-align: center;
}
.card-title{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.003em;
  text-wrap: balance;              /* iki satırsa dengeli dağıt */
}

/* Hover efekti daha yumuşak */
.collectionView:hover .base-image{ transform: scale(1.03); transition: transform .28s ease; }

/* Tablet & mobil uyarlama */
@media (max-width: 1200px){
  .collectionList{ grid-template-columns: repeat(3, 360px); }
}
@media (max-width: 1100px){
  .collectionList{ grid-template-columns: repeat(2, 420px); }
}
@media (max-width: 768px){
  .section-head{ margin-top: 36px; }
  .collectionList{ grid-template-columns: 1fr; padding: 12px 0 40px; }
  .fixed-image-container{ aspect-ratio: 4 / 3; }
}
/* === Kart ölçülerini değişkenle; grid ve başlık aynı hizada olsun === */
:root{
  --card-w: 420px;   /* kart genişliği */
  --card-gap: 28px;  /* kartlar arası boşluk */
}

/* Başlık bloğu – sola hizala ve grid'le aynı sol kenarı yakala */
.section-head{
  /* 3 kart + 2 boşluk kadar genişlikte bir container */
  max-width: calc(3 * var(--card-w) + 2 * var(--card-gap));
  margin: 56px auto 16px;   /* ortala ama içerik SOLA hizalı */
  padding: 0;               /* soldaki boşluğu kaldır */
  text-align: left;
}

/* Başlık tipografisi + alt vurgulu çizgi */
.section-head h1{
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 14px;
  position: relative;
  display: inline-block;       /* çizgi genişliği metne göre */
}

.section-head h1::after{
  content: "";
  display: block;
  height: 6px;
  width: 120px;                /* çizgi uzunluğu (isteğe göre 100–160px) */
  margin-top: 10px;
  border-radius: 999px;
  background: #22b8cf;         /* marka turkuazı (istersen değiştir) */
  box-shadow: 0 2px 10px rgba(34,184,207,.35);
}

/* Açıklama metni */
.section-head .lead{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.75;
  color: #556070;
  margin: 0;
  max-width: 920px;
  text-wrap: pretty;
}

/* Grid ölçülerini aynı değişkenlerle kullan (sende varsa bunları güncelle) */
.collectionList{
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  gap: var(--card-gap);
  justify-content: center;
  align-items: start;
  padding: 18px 0 56px;
}

/* Responsive: tablet ve mobilde çizgi/stiller korunur */
@media (max-width: 1100px){
  .section-head{ max-width: calc(2 * var(--card-w) + var(--card-gap)); margin-top: 44px; }
  .collectionList{ grid-template-columns: repeat(2, var(--card-w)); }
}
@media (max-width: 768px){
  .section-head{ max-width: var(--card-w); margin-top: 32px; padding: 0 16px; }
  .collectionList{ grid-template-columns: 1fr; padding: 12px 0 40px; }
}