/* ============================================================
   PAYLAŞIM KARTI ve KEŞİF BİLEŞENLERİ — index.html ile kesfet.html
   arasında ORTAK olan tek kaynak.

   Bu dosya index.html'in kendi <style> bloğundan çıkarıldı: aynı
   kart iki sayfada birden basılıyor ve kuralın iki kopyası zamanla
   birbirinden ayrışırdı. Renk, tipografi, gölge ve yarıçap yine
   assets/site.css'teki token'lardan gelir; burada yeni renk
   tanımlanmaz. Kurallar index.html'deki sırayı korur.

   Yükleme sırası: site.css → kart.css → sayfanın kendi <style>'ı.
   Sayfaya özgü ince ayarlar bu yüzden kendi dosyasında yazılır.
   ============================================================ */

.filtrebar{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; margin-top:20px}
.suzgec{display:flex; gap:10px; align-items:center}
.suzgec .select{width:auto; min-width:186px}
@media (max-width:640px){
  .filtrebar{align-items:stretch}
  .suzgec{width:100%; flex-wrap:wrap}
  .suzgec .select{flex:1 1 0; min-width:0}
}
@media (max-width:480px){.suzgec .select{flex:1 1 100%}}
.sekmeler{display:flex; gap:6px; background:var(--surface-2); padding:4px; border-radius:999px}
.sekmeler button{
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; border:0; border-radius:999px;
  padding:8px 16px; background:transparent; color:var(--ink-muted); transition:background .15s ease, color .15s ease;
}
.sekmeler button[aria-pressed="true"]{background:var(--surface); color:var(--ink); font-weight:600}

/* Özel anlar — başlangıç ızgarası.
   Ragged bir etiket bulutu değil, eşit hücreli giriş noktaları: her hücre
   bir özel anı temsil eder. Biçim, panelin "hızlı işlem" kartıyla birebir
   aynı dildedir: yüzey + line-strong çerçeve + pirinç zeminli simge kutusu;
   okun kayması ise kayıt kartlarındaki .lgit davranışıdır. Yeni renk
   tanımlanmaz.

   Hücre bir BAĞLANTIDIR: o anın paylaşım sayfasını açar. Sağdaki sayı
   o anda gerçekten kaç paylaşım olduğunu söyler; boş bir kapıya
   girilmesin diye kapının üstünde yazar. */
.anlar-bas{
  padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
}
.anlar-etiket{
  font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink);
}
.anlar-ipucu{font-size:13.5px; line-height:1.6; color:var(--ink-muted)}

.anlar{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:10px;
}
@media (max-width:640px){
  .anlar{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
}

.an-hucre{
  font:inherit; text-align:left; text-decoration:none;
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:var(--r-m);
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.an-hucre:hover{border-color:var(--mor); box-shadow:var(--shadow-lift)}
.an-hucre:focus-visible{outline:2px solid var(--brass); outline-offset:4px}

.an-sim{
  flex:none; width:36px; height:36px; border-radius:10px;
  background:var(--brass-soft); display:grid; place-items:center;
}
.an-sim svg{
  width:19px; height:19px; display:block;
  fill:none; stroke:var(--brass-deep); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.an-ad{
  font-family:var(--font-baslik); font-size:14px; font-weight:500;
  line-height:1.3; letter-spacing:-.01em;
}
/* Kaç paylaşım var: adla ok arasında, sakin. Ok zaten sağa yaslı
   olduğu için sayı ondan önce, margin-left:auto ile itilir. */
.an-adet{
  margin-left:auto; flex:none;
  font-size:12px; font-weight:600; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.an-ok{
  flex:none; width:15px; height:15px;
  fill:none; stroke:var(--green); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.an-hucre:hover .an-ok{transform:translateX(3px)}
@media (max-width:640px){
  .an-hucre{padding:11px 12px; gap:9px}
  .an-sim{width:30px; height:30px; border-radius:9px}
  .an-sim svg{width:16px; height:16px}
  .an-ad{font-size:13px}
  .an-adet{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.an-hucre,.an-ok{transition:none}}

/* Özet şeridi: beyaz kart içinde üç eşit sütun; rakam üstte, etiket altta,
   ortalı. Telefonda da üç sütun yan yana kalır, yalnızca ölçü küçülür. */
.giris-sayi{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:24px; padding:18px 8px;
  border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow);
}
.giris-sayi div{display:flex; flex-direction:column-reverse; align-items:center; justify-content:flex-end; gap:4px; padding:0 12px; text-align:center; border-left:1px solid var(--line)}
.giris-sayi div:first-child{border-left:0}
.giris-sayi span{display:block; font-size:13.5px; font-weight:500; color:var(--ink-muted); line-height:1.35}
.giris-sayi b{
  display:block; font-family:var(--font-baslik); font-weight:700;
  font-size:clamp(22px,2.4vw,30px); line-height:1.1; color:var(--green);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (max-width:520px){
  .giris-sayi{padding:14px 4px; border-radius:14px}
  .giris-sayi div{padding:0 6px}
  .giris-sayi b{font-size:18px}
  .giris-sayi span{font-size:11.5px}
}

/* Kayıt ızgarası: kayıtlar sabit bir ızgarada durur; otomatik kayma yoktur.
   Sütun genişliği ve düşey aralık artırıldı: fotoğraf sayfanın en güçlü
   öğesi, kalabalık bir ızgarada gücünü kaybediyordu. */
.izgara{display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:46px 28px; margin-top:34px}
/* Telefon: ikili sıra. Kart aynı kalır, yalnızca ölçüler küçülür;
   marka ve ürün tek satır, durum satırı kısa, düğme oksuz. */
@media (max-width:560px){
  .izgara{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 12px; margin-top:22px}
  .izgara .lgorsel{border-radius:12px}
  .izgara .lvideo,.izgara .lrozet{top:8px; font-size:10px; padding:3px 8px}
  .izgara .lvideo{left:8px} .izgara .lrozet{right:8px}
  .izgara .lkategori{left:8px; bottom:7px; font-size:10.5px}
  .izgara .lgovde{padding-top:10px; gap:4px}
  .izgara .lmarka{font-size:9.5px; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
  .izgara .lbaslik{font-size:15.5px}
  .izgara .lurun{font-size:12px; -webkit-line-clamp:1}
  .izgara .ldurum{font-size:11px; line-height:1.4}
  .izgara .lcta{padding:9px 6px; font-size:13px; margin-top:4px; white-space:nowrap}
  .izgara .lcta svg{display:none}
}
/* Kart bir kutu değil: görsel + altında metin. Zemin sayfanın kendisi;
   ayrım çizgiden değil boşluktan geliyor. */
.lkart{
  position:relative; display:flex; flex-direction:column;
  background:none; border:0; border-radius:0; color:inherit; text-decoration:none;
}
.lgorsel{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-m); background:var(--surface-2);
}
.lgorsel img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
a.lkart:hover .lgorsel img{transform:scale(1.035)}
/* Perde yalnızca ALTTA. Eskiden üstte de bir katman vardı; üstteki rozet
   kendi zeminini taşıdığı için gereksizdi ve fotoğrafın en aydınlık yerini
   kirletiyordu. Alt perde tek işe yarar: an etiketi her fotoğrafta okunsun. */
.lgorsel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,8,40,0) 52%,rgba(20,8,40,.44) 100%);
}
/* Rozet yalnızca tamamlanmış kayıtta basılır; "devam ediyor" etiketi kalktı. */
.lrozet{
  position:absolute; right:12px; top:12px; z-index:1;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  background:var(--ok); color:var(--on-ok);
}
/* İzlenecek bir anlatısı olan paylaşım: sol üstte küçük oynat rozeti.
   Sol üst köşe boştu — sağ üstte tamamlanma rozeti, sol altta özel an
   etiketi duruyor. Zemin koyu ve yarı saydam, her fotoğrafta okunur. */
.lvideo{
  position:absolute; left:12px; top:12px; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:5px 10px 5px 9px; border-radius:999px;
  background:rgba(20,8,40,.62); color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lvideo svg{width:11px; height:11px; fill:currentColor; stroke:none; flex:none}
.lgovde{padding:15px 2px 0; display:flex; flex-direction:column; flex:1; gap:7px}
.lmarka{
  font-size:11px; font-weight:600; color:var(--ink-faint); letter-spacing:.11em; text-transform:uppercase;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
@media (prefers-reduced-motion: reduce){.lgorsel img{transition:none}}

/* Özel an: fotoğrafın içinde, sol altta — kaydın duygusu önce okunsun. */
.lkategori{
  position:absolute; left:12px; bottom:12px; z-index:1;
  text-transform:none; letter-spacing:.02em; font-size:11.5px; font-weight:600;
  background:none; color:#fff; padding:0; border-radius:0;
}
.lbaslik{
  font-family:var(--font-baslik); font-size:19px; font-weight:600; line-height:1.28;
  color:var(--ink); letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lurun{
  font-size:13px; color:var(--ink-muted); line-height:1.5; flex:1;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* İlerleme: kıl kadar ince bir hat. Kalın çubuk kartın dikkatini
   fotoğraftan çalıyordu. */
.lkart .bar{height:3px; margin-top:5px; border:0; background:var(--line)}
/* Durum tek satır: yüzde · kaç kişi · kalan. Üç ayrı satır yerine bir
   cümle; sayılar koyu, bağlaçlar sönük. */
.ldurum{font-size:12.5px; line-height:1.5; color:var(--ink-faint)}
.ldurum b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
a.lkart:hover .lbaslik{text-decoration:underline; text-underline-offset:3px}
a.lkart:focus-visible{outline:2px solid var(--brass); outline-offset:4px; border-radius:var(--r-m)}
.lkart .btn{width:100%; padding:9px 12px; font-size:13px; margin-top:2px}
/* Harekete geçirici çağrı: kartın tamamı bağlantı olduğu için düğme bir
   span'dır; marka sarısı, tam satır, üzerine gelince hafifçe yükselir. */
.lcta{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px;
  padding:11px 14px; border-radius:var(--r-s, 10px); background:var(--green); color:var(--on-green);
  font-family:var(--font-arayuz); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none;
  transition:transform .15s ease, background .15s ease;
}
.lcta svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease}
a.lkart:hover .lcta{background:var(--green-deep); transform:translateY(-1px)}
a.lkart:hover .lcta svg{transform:translateX(3px)}
/* Süresi dolan kart: rozet sarı-kahve tonunda, tamamlanan yeşil kalır. */
.lrozet.doldu{background:var(--warn); color:#fff}