/* =====================================================================
   VV TABLO — KEŞFET GALERİSİ (R20)

   DÜZEN Kling'in keşfet sayfasından alındı (kullanıcının referansı):
   üstte sekmeler + arama + Yayınla, altta değişken yükseklikli sütun
   ızgarası, kartın altında yazar ve beğeni, tıklayınca solda büyük
   görsel sağda prompt paneli.

   RENK ise VV TABLO'nun: koyu zemin + altın vurgu. Koyu zemin bir taklit
   değil, gereklilik — bu sayfada her kutu bir görsel ve açık zemin
   görsellerin kendi renkleriyle yarışıyor. Sitenin geri kalanı (sıcak
   beyaz) değişmiyor; burası kasıtlı olarak ayrı bir oda.

   TAMAMEN AYRI DOSYA: sitenin ortak CSS'ine hiç dokunulmuyor, bu sayfa
   sorun çıkarırsa tek dosya geri alınıp bitiyor.
   ===================================================================== */

:root{
  --k-gold:#C99535;
  --k-gold-soft:#E0B45F;
  --k-bg:#0B0B0A;
  --k-panel:#141412;
  --k-panel-2:#1C1B18;
  --k-line:rgba(255,255,255,.10);
  --k-line-strong:rgba(255,255,255,.18);
  --k-ink:#F2F0EC;
  --k-muted:#9A958C;
  --k-ease:cubic-bezier(.4,0,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--k-bg);
  color:var(--k-ink);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.display{ font-family:'Fraunces',Georgia,serif; font-weight:300; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-width:100%; }

:focus-visible{ outline:2px solid var(--k-gold); outline-offset:2px; border-radius:3px; }

/* ---------- ÜST ÇUBUK ---------- */
.k-top{
  position:sticky; top:0; z-index:40;
  background:rgba(11,11,10,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--k-line);
}
/* İKİ SATIRLI ÜST BAR.
   Önce logo, arama ve "Eserini Yayınla" tek sırada yan yanaydı; logo
   sola sıkışmış üçüncü bir öğe gibi duruyor, marka kimliği
   kayboluyordu. Şimdi: üstte ortalanmış logo, altında tam genişlikte
   arama. */
.k-top-inner{
  max-width:1680px; margin:0 auto;
  padding:12px clamp(16px,2.2vw,32px) 14px;
  display:flex; flex-direction:column; gap:12px;
}

/* YAN / LOGO / YAN — sitenin geri kalanındaki üst barla aynı desen.
   Yan sütunlar EŞİT genişlikte (1fr): logo gerçekten ortada dursun,
   sağdaki düğme uzadıkça sola kaymasın. */
.k-top-ust{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px;
}
.k-top-yan{ display:flex; align-items:center; min-width:0; }
.k-top-yan-son{ justify-content:flex-end; }

/* "← Ana Sayfa" — sitenin geri kalanındaki üst bar ile aynı sözcükler.
   Logo tek başına yeterli sanılmıştı; değildi. */
.k-anasayfa{
  color:var(--k-muted); font-size:12.5px;
  letter-spacing:.04em; white-space:nowrap;
  transition:color .25s var(--k-ease);
}
.k-anasayfa:hover{ color:var(--k-ink); }

/* Logo ve altındaki "Keşfet" etiketi alt alta, ortalanmış. */
.k-brand{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  letter-spacing:.18em; font-size:13px; text-transform:uppercase;
}
.k-brand b{ font-weight:500; }
.k-brand span{ color:var(--k-gold); font-size:10.5px; letter-spacing:.24em; }

/* Logo koyu zemin için: site logosu AÇIK renkli çizilmiş (ölçüldü:
   ortalama parlaklık 242/255), o yüzden burada filtresiz kullanılıyor.
   Ana sayfada koyu zemine inince brightness(0) ile siyaha çevriliyor —
   burada gerek yok.

   YÜKSEKLİK 30 DEĞİL 44: görselin %84'ü saydam, yani kutunun içindeki
   gerçek marka izi yüksekliğin çok altında kalıyor. 30 pikselde ekranda
   yok gibi görünüyordu. */
.k-brand-logo{ height:44px; width:auto; display:block; }
@media(max-width:860px){
  .k-brand-logo{ height:34px; }
  /* "← Ana Sayfa" DAR EKRANDA DA KALIYOR. Önce gizlenmişti (yer arama
     kutusuna lazım diye) ama şikâyetin kendisi "ana sayfaya
     dönemiyorum" idi; çıkış yolunu telefonda kaldırmak tam olarak o
     sorunu geri getirirdi. Yer sorunu yok: bu genişlikte üst çubuk
     zaten satır kaydırıyor ve arama kutusu kendi satırına geçiyor. */
  .k-anasayfa{ font-size:12px; }
}

/* Arama artık kendi satırında ve TAM GENİŞLİKTE. Üst sırada üçüncü
   öğe olarak sıkışıyordu; en çok kullanılan alanın en dar alan olması
   yanlıştı. */
.k-search{ width:100%; min-width:0; position:relative; }
.k-search input{
  width:100%; height:40px; padding:0 40px 0 16px;
  background:var(--k-panel); border:1px solid var(--k-line);
  border-radius:999px; color:var(--k-ink); font-size:13.5px;
  transition:border-color .25s var(--k-ease), background .25s var(--k-ease);
}
.k-search input::placeholder{ color:var(--k-muted); }
.k-search input:focus{ outline:none; border-color:var(--k-line-strong); background:var(--k-panel-2); }
.k-search button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center; color:var(--k-muted);
}
.k-search button:hover{ color:var(--k-ink); }

.k-publish{
  flex:0 0 auto; height:40px; padding:0 22px; border-radius:999px;
  background:var(--k-gold); color:#17140D; font-size:13px; font-weight:500;
  letter-spacing:.02em; white-space:nowrap;
  transition:background .25s var(--k-ease), transform .25s var(--k-ease);
}
.k-publish:hover{ background:var(--k-gold-soft); }
.k-publish:active{ transform:scale(.97); }

/* ---------- SEKMELER ---------- */
.k-tabs{
  max-width:1680px; margin:0 auto;
  padding:0 clamp(16px,2.2vw,32px) 12px;
  display:flex; gap:26px; overflow-x:auto; scrollbar-width:none;
}
.k-tabs::-webkit-scrollbar{ display:none; }
.k-tab{
  flex:0 0 auto; padding:6px 0; font-size:14px; color:var(--k-muted);
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .25s var(--k-ease), border-color .25s var(--k-ease);
}
.k-tab:hover{ color:var(--k-ink); }
.k-tab.is-active{ color:var(--k-ink); border-bottom-color:var(--k-gold); font-weight:500; }

/* ---------- IZGARA ----------
   SABİT SÜTUNLAR (2026-08-05). Önceden CSS column-count (masonry) idi;
   CSS sütunları içerik her uzadığında TÜM kartları yeniden dengeler —
   "Daha fazla" ile yeni sayfa gelince bakılan kart başka sütuna
   sıçrıyordu. Artık sütunlar .k-col kutuları: kartı en kısa sütuna
   JS yerleştirir (kesfet.js izgarayaEkle) ve yerleşen kart bir daha
   YER DEĞİŞTİRMEZ. Sütun sayısına da JS karar verir (kolonSayisi). */
.k-wrap{ max-width:1680px; margin:0 auto; padding:18px clamp(16px,2.2vw,32px) 80px; }
.k-grid{
  display:flex; align-items:flex-start; gap:14px;
}
.k-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.k-card{
  position:relative; display:block; width:100%;
  border-radius:10px; overflow:hidden; background:var(--k-panel);
  border:1px solid var(--k-line);
  /* R20.4 DÜZELTMESİ — IZGARADA BÜYÜTEÇ İMLECİ YOKTU, OLMAMALI.
     Karta tıklamak görseli büyütmüyor, DETAYI AÇIYOR. zoom-in imleci
     olmayacak bir şeyin sözünü veriyordu. Büyüteç imleci artık yalnız
     gerçekten büyüten yerlerde: detaydaki eser ve başlangıç görseli. */
  cursor:pointer;
  transition:border-color .25s var(--k-ease), transform .25s var(--k-ease);
}
.k-card:hover{ border-color:var(--k-line-strong); transform:translateY(-2px); }
.k-card img{ width:100%; height:auto; }
/* Görsel yüklenene kadar kutu doğru yükseklikte dursun diye oran
   sunucudan gelen ölçülerden JS ile yazılıyor (--k-ratio). Yoksa
   ızgara yükleme sırasında sürekli zıplar. */
.k-card-media{ position:relative; width:100%; background:#0F0F0E; aspect-ratio:var(--k-ratio, 3 / 4); }
.k-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.k-card-foot{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:8px;
  padding:22px 12px 10px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
  font-size:12px;
}
.k-card-author{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:rgba(255,255,255,.92);
}
.k-card-like{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  color:rgba(255,255,255,.86); font-variant-numeric:tabular-nums;
}
.k-card-like svg{ width:14px; height:14px; }
.k-card-like.is-liked{ color:var(--k-gold-soft); }
.k-card-like.is-liked svg{ fill:currentColor; }

/* R35 — BEĞENİ KİLİDİ: geri alma penceresi (10 sn) kapandıktan sonra
   kalp DOLU kalır ama artık bir düğme gibi davranmaz. Soluklaştırılmıyor:
   burada eksik ya da devre dışı bir şey yok, aksine beğeni kalıcı olarak
   kaydedilmiş durumda. Değişen tek şey imlecin artık "tıklanır"
   dememesi. */
.k-card-like.is-locked,
.k-icon-btn.is-locked{ cursor:default; opacity:1; }
.k-card-like.is-locked:hover,
.k-icon-btn.is-locked:hover{ opacity:1; }

.k-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 9px; border-radius:999px; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(201,149,53,.92); color:#17140D;
}

/* ---------- DURUMLAR ---------- */
.k-state{ padding:80px 20px; text-align:center; color:var(--k-muted); }
.k-state h2{ font-size:22px; color:var(--k-ink); margin-bottom:10px; }
.k-state p{ font-size:14px; line-height:1.7; max-width:46ch; margin:0 auto; }
.k-state .k-publish{ margin-top:22px; }

.k-skeleton{ background:var(--k-panel); border-radius:10px; margin-bottom:14px; break-inside:avoid;
  animation:k-pulse 1.4s ease-in-out infinite; }
@keyframes k-pulse{ 0%,100%{opacity:.5} 50%{opacity:.85} }

/* `hidden` ÖZNİTELİĞİ display KURALINI YENEMEZ.
   Tarayıcının [hidden] için uyguladığı `display:none` kendi varsayılan
   yaprağından gelir; yazarın koyduğu her `display` onu ezer. Bu
   dosyadaki `.k-more` (flex) ve `.k-uretenler` (grid) JavaScript'te
   `hidden` ile açılıp kapanıyordu — yani hiç kapanmıyorlardı. Aynı
   hata mesajlaşma sayfasında da vardı ve kullanıcı tarafından
   bildirildi. */
[hidden]{ display:none !important; }

.k-more{ display:flex; justify-content:center; padding:10px 0 30px; }
.k-more button{
  height:42px; padding:0 30px; border-radius:999px;
  border:1px solid var(--k-line-strong); font-size:13px; color:var(--k-ink);
  transition:background .25s var(--k-ease);
}
.k-more button:hover{ background:var(--k-panel-2); }
.k-more button[disabled]{ opacity:.5; cursor:default; }

/* SONSUZ KAYDIRMANIN NÖBETÇİSİ. Gözlemci sıfır yükseklikli öğede
   güvenilir çalışmadığı için bu satırın kendi yüksekliği var; aynı
   zamanda "aşağıda daha var" bilgisini veriyor. */
.k-more-yukleniyor{
  min-height:42px; display:flex; align-items:center;
  color:var(--k-muted); font-size:13px; letter-spacing:.02em;
}

/* ---------- DETAY KATMANI ---------- */
.k-detail{
  position:fixed; inset:0; z-index:80; display:none;
  background:var(--k-bg);
}
.k-detail.is-open{ display:grid; grid-template-columns:1fr 460px; }

.k-detail-stage{
  position:relative; display:grid; place-items:center;
  padding:40px; min-width:0; background:#080807;
}
.k-detail-stage img{
  max-width:100%; max-height:calc(100vh - 80px);
  width:auto; height:auto; object-fit:contain; border-radius:6px;
  /* Büyüteç imleci BURADA — ızgarada değil. Detaydaki esere tıklamak
     gerçekten büyütüyor, dolayısıyla imleç sözünü tutuyor. */
  cursor:zoom-in;
}

/* ---------- FİGÜR + VV FİLİGRANI (R20.4) ----------
   Filigran GÖRSELİN köşesine oturmalı, sahnenin köşesine değil: sahne
   ekranı kaplıyor, görsel ise oranına göre daha dar. inline-block figür
   görselin ölçüsüne büzülüyor, filigran ona göre konumlanıyor.

   NEDEN DOSYAYA GÖMÜLMÜYOR: Kling filigranı görselin içine basıyor, ama
   siz "ana sayfada görünmesin, içeriğe girince görünsün" dediniz.
   Dosyaya gömülse ızgarada da görünürdü. Katman olarak durunca hem
   istediğiniz yerde çıkıyor hem de fikir değişirse tek satırla
   kaldırılabiliyor — indirilen dosya da kirlenmiyor.

   Neden yazı, neden logo.webp değil: logo.webp "VV TABLO" içeriyor,
   siz yalnız "VV" istediniz. Markanın kendi yazı karakteri (Fraunces)
   her ölçekte net kalıyor ve yeni dosya beklemeye gerek bırakmıyor. */
.k-figure{
  position:relative;
  display:inline-block;
  line-height:0;
  max-width:100%;
  margin:0;
}
.k-mark{
  position:absolute; right:16px; bottom:14px;
  font-family:'Fraunces',Georgia,serif;
  font-weight:400; font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.16em;
  color:rgba(255,255,255,.82);
  line-height:1;
  pointer-events:none;               /* büyütme tıklamasını engellemesin */
  /* Açık renkli görsellerde de okunsun: yumuşak koyu gölge. */
  text-shadow:0 1px 10px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.55);
  user-select:none;
}
/* EKRAN ÜSTÜ FİLİGRAN ARTIK YEDEK YOL — R20.5.
   Sunucu, yayınlanan eserin damgası GÖMÜLÜ ikinci bir kopyasını üretiyor
   ve eserin içinde o gösteriliyor; böylece indirilen dosyada da damga
   oluyor. O durumda buradaki yazıyı da çizmek ÇİFT damga demek olurdu.
   Bu yüzden ikisi de varsayılan olarak GİZLİ; JS ancak gömülü damga
   yoksa (eski gönderi ya da sunucuda GD yok) sınıfı ekliyor. */
.k-detail .k-mark,
.k-lightbox .k-mark{ display:none; }
.k-detail.vv-css-filigran .k-mark,
.k-lightbox.is-eser .k-mark{ display:block; }
.k-back{
  position:absolute; top:22px; left:22px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  display:grid; place-items:center;
  transition:background .25s var(--k-ease);
}
.k-back:hover{ background:rgba(255,255,255,.16); }

/* ---------- BÜYÜTME DÜĞMESİ (R20.3) ---------- */
.k-zoom{
  position:absolute; top:22px; right:22px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  display:grid; place-items:center; color:var(--k-ink);
  transition:background .25s var(--k-ease);
}
.k-zoom:hover{ background:rgba(255,255,255,.16); }

/* ---------- BAŞLANGIÇ (REFERANS) GÖRSELİ (R20.3) ---------- */
.k-ref{
  display:block; width:100%; position:relative;
  border:1px solid var(--k-line); border-radius:8px; overflow:hidden;
  background:var(--k-panel-2); cursor:zoom-in;
  transition:border-color .25s var(--k-ease);
}
.k-ref:hover{ border-color:var(--k-gold); }
.k-ref img{ width:100%; max-height:220px; object-fit:cover; display:block; }
.k-ref-hint{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 12px 8px; font-size:11.5px; color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
  text-align:left;
}

/* ---------- BÜYÜTME KATMANI (R20.3) ----------
   Detay panelinin ÜSTÜNE biniyor; kapanınca detay olduğu gibi kalıyor,
   kullanıcı okuduğu yeri kaybetmiyor. z-index 95: detay (80) ve
   yayınla (90) katmanlarının üzerinde. */
.k-lightbox{
  position:fixed; inset:0; z-index:95; display:none;
  background:rgba(5,5,5,.95);
  padding:56px 24px 64px;
}
.k-lightbox.is-open{ display:grid; place-items:center; }
.k-lightbox img{
  max-width:100%; max-height:calc(100vh - 140px);
  width:auto; height:auto; object-fit:contain; border-radius:4px;
}
.k-lightbox-close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); display:grid; place-items:center;
  color:var(--k-ink);
  transition:background .25s var(--k-ease);
}
.k-lightbox-close:hover{ background:rgba(255,255,255,.18); }
.k-lightbox-caption{
  position:absolute; left:0; right:0; bottom:20px;
  text-align:center; font-size:12.5px; color:var(--k-muted);
  padding:0 24px;
}

.k-detail-side{
  border-left:1px solid var(--k-line);
  padding:30px clamp(20px,2vw,34px) 40px;
  overflow-y:auto; display:flex; flex-direction:column; gap:22px;
  background:var(--k-panel);
}
.k-detail-author{ display:flex; align-items:center; gap:14px; }
.k-avatar{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#2A2621,#3A342B);
  border:1px solid var(--k-line-strong);
  font-family:'Fraunces',Georgia,serif; font-size:20px; color:var(--k-gold-soft);
}
.k-detail-author-meta{ min-width:0; }
.k-detail-author-meta b{ display:block; font-weight:500; font-size:16px; }
.k-detail-author-meta small{ color:var(--k-muted); font-size:12.5px; }

.k-detail-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:14px; border-bottom:1px solid var(--k-line);
}
.k-detail-row h2{ font-size:16px; font-weight:500; }
.k-detail-actions{ display:flex; align-items:center; gap:6px; }
.k-icon-btn{
  height:36px; padding:0 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--k-muted);
  transition:background .2s var(--k-ease), color .2s var(--k-ease);
}
.k-icon-btn:hover{ background:var(--k-panel-2); color:var(--k-ink); }
.k-icon-btn svg{ width:17px; height:17px; }
.k-icon-btn.is-liked{ color:var(--k-gold-soft); }
.k-icon-btn.is-liked svg{ fill:currentColor; }

.k-detail-meta{ color:var(--k-muted); font-size:12.5px; display:flex; gap:8px; flex-wrap:wrap; }
.k-detail-meta span:not(:last-child)::after{ content:"·"; padding-left:8px; opacity:.6; }

.k-prompt-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--k-gold); margin-bottom:8px;
}
.k-prompt{
  background:var(--k-panel-2); border:1px solid var(--k-line);
  border-radius:8px; padding:14px 16px;
  font-size:13.5px; line-height:1.7; color:rgba(242,240,236,.9);
  white-space:pre-wrap; overflow-wrap:anywhere;
  max-height:8.5em; overflow:hidden; position:relative;
}
.k-prompt.is-open{ max-height:none; }
.k-prompt:not(.is-open)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3em;
  background:linear-gradient(180deg, rgba(28,27,24,0), rgba(28,27,24,1));
}
.k-prompt-toggle{ margin-top:8px; font-size:12.5px; color:var(--k-gold); }
.k-prompt-copy{ margin-top:8px; }

.k-detail-cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.k-btn{
  height:46px; border-radius:8px; font-size:13.5px; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--k-line-strong); color:var(--k-ink);
  transition:background .25s var(--k-ease);
}
.k-btn:hover{ background:var(--k-panel-2); }
.k-btn.primary{ background:var(--k-gold); border-color:var(--k-gold); color:#17140D; }
.k-btn.primary:hover{ background:var(--k-gold-soft); }

.k-more-from{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.k-more-from img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; cursor:pointer;
  border:1px solid transparent; transition:border-color .2s var(--k-ease); }
.k-more-from img:hover{ border-color:var(--k-gold); }

/* ---------- BENZER ESERLER (2026-08-04) ----------
   "Aynı kullanıcıdan" şeridiyle aynı dil; farkı, her kartın altında
   NEDEN benzer olduğunu söyleyen ortak etiket rozetleri olması. */
.k-benzer{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:560px){ .k-benzer{ grid-template-columns:repeat(2,1fr); } }
.k-benzer-kart{
  display:block; text-align:left; padding:0; border:0; background:none;
  cursor:pointer; color:inherit; font:inherit;
}
.k-benzer-kart img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px;
  border:1px solid transparent; transition:border-color .2s var(--k-ease);
}
.k-benzer-kart:hover img{ border-color:var(--k-gold); }
.k-benzer-kart:focus-visible img{ outline:2px solid var(--k-gold); outline-offset:2px; }
.k-benzer-etiketler{
  display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;
}
.k-benzer-etiket{
  font-size:10px; line-height:1; padding:4px 6px; border-radius:999px;
  background:var(--k-panel-2); color:var(--k-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.k-note{ font-size:12.5px; color:var(--k-muted); line-height:1.6; }
.k-note.is-error{ color:#E9927F; }
.k-note.is-ok{ color:var(--k-gold-soft); }

/* ---------- YAYINLA KATMANI ---------- */
.k-modal{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(6,6,5,.86); backdrop-filter:blur(6px);
  padding:24px; overflow-y:auto;
}
.k-modal.is-open{ display:grid; place-items:start center; }
.k-modal-panel{
  width:min(920px,100%); margin:auto 0;
  background:var(--k-panel); border:1px solid var(--k-line);
  border-radius:14px; padding:clamp(20px,2.6vw,32px);
  display:flex; flex-direction:column; gap:18px;
}
.k-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.k-modal-head h2{ font-size:21px; }
.k-modal-head p{ color:var(--k-muted); font-size:13px; margin-top:6px; line-height:1.6; }
.k-close{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--k-muted); }
.k-close:hover{ background:var(--k-panel-2); color:var(--k-ink); }

.k-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; max-height:46vh; overflow-y:auto; }
.k-pick-item{ position:relative; border-radius:8px; overflow:hidden; border:2px solid transparent; cursor:pointer; }
.k-pick-item img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.k-pick-item.is-picked{ border-color:var(--k-gold); }
.k-pick-item small{
  position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:11px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.k-field label{ display:block; font-size:12px; color:var(--k-muted); margin-bottom:6px; }
.k-field input{
  width:100%; height:44px; padding:0 14px; border-radius:8px;
  background:var(--k-panel-2); border:1px solid var(--k-line); color:var(--k-ink); font-size:14px;
}
.k-field input:focus{ outline:none; border-color:var(--k-gold); }

.k-mine{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.k-mine-item{ border:1px solid var(--k-line); border-radius:8px; overflow:hidden; background:var(--k-panel-2); }
.k-mine-item img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.k-mine-item div{ padding:8px 10px 10px; font-size:11.5px; }
.k-status{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; letter-spacing:.06em; }
.k-status.pending{ background:rgba(201,149,53,.18); color:var(--k-gold-soft); }
.k-status.approved{ background:rgba(122,180,120,.18); color:#8FCB8B; }
.k-status.rejected{ background:rgba(214,110,90,.18); color:#E9927F; }
.k-status.removed{ background:rgba(255,255,255,.10); color:var(--k-muted); }

/* ---------- DUYURU ---------- */
.k-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  z-index:100; padding:12px 20px; border-radius:999px;
  background:var(--k-panel-2); border:1px solid var(--k-line-strong);
  font-size:13px; opacity:0; pointer-events:none;
  transition:opacity .3s var(--k-ease), transform .3s var(--k-ease);
  max-width:calc(100vw - 40px); text-align:center;
}
.k-toast.is-open{ opacity:1; transform:translate(-50%,0); }

/* ---------- DUYARLI ----------
   Sütun SAYISI artık JS'te (kesfet.js kolonSayisi) — buradaki eski
   column-count kuralları kaldırıldı; kırılımlar aynı: 1500/1100/820. */
@media(max-width:1100px){
  .k-detail.is-open{ grid-template-columns:1fr 380px; }
  .k-more-from{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:820px){
  /* Telefonda yan yana iki sütun olmaz: görsel üstte, panel altta
     kaydırılır. Tek sütunlu grid + otomatik satır yüksekliği. */
  .k-detail.is-open{ grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto; }
  .k-detail-stage{ padding:64px 16px 16px; }
  .k-detail-stage img{ max-height:56vh; }
  .k-detail-side{ border-left:0; border-top:1px solid var(--k-line); overflow:visible; }
  .k-back{ top:14px; left:14px; }
  .k-zoom{ top:14px; right:14px; width:38px; height:38px; }
  .k-lightbox{ padding:52px 12px 56px; }
  .k-ref img{ max-height:180px; }
  .k-mark{ right:10px; bottom:9px; font-size:13px; letter-spacing:.14em; }
  /* Üst bar zaten iki satır; buradaki eski `order`/`flex-wrap`
     kuralları o düzene aitti ve kaldırıldı. Telefonda kalan tek iş
     düğmeyi küçültmek. */
  .k-publish{ height:36px; padding:0 14px; font-size:12.5px; }
  .k-detail-cta{ grid-template-columns:1fr; }
}
@media(max-width:420px){
  .k-grid{ gap:10px; }
  .k-col{ gap:10px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* =====================================================================
   ÜRETİCİ PROFİLLERİ VE ROZETLER — R23
   ===================================================================== */

/* Yazar adı artık bağlantı. Altı çizili değil: yan yana duran rozetle
   birlikte satırı gürültülü yapıyordu. Bunun yerine renk + hover'da
   çizgi — tıklanabilir olduğu anlaşılıyor, sakin duruyor. */
.k-author-link{
  color:inherit; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--k-ease), border-color .18s var(--k-ease);
}
.k-author-link:hover,
.k-author-link:focus-visible{
  color:var(--k-gold-soft);
  border-bottom-color:var(--k-gold-soft);
}

/* Rozet. Seviye rengi burada, adı sunucudan geliyor. */
.k-rozet{
  display:inline-block; vertical-align:middle; margin-left:8px;
  padding:2px 8px; border-radius:999px;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid currentColor;
  /* Rozet metni küçük; seçilebilir olması bir işe yaramıyor, yanlışlıkla
     seçilince de adın bir parçasıymış gibi kopyalanıyordu. */
  user-select:none;
}
.k-rozet-1{ color:#C08552; }               /* bronz */
.k-rozet-2{ color:#B9BCC2; }               /* gümüş */
.k-rozet-3{ color:var(--k-gold); }         /* altın */

/* Yayınlama formunda "Keşfet'te görünecek adınız" — artık girdi değil,
   okunur bir değer (R23.1). Girdi gibi görünmemeli ki kimse tıklayıp
   yazmayı denemesin; ama alan hissi de kaybolmasın. */
.k-field-sabit{
  padding:10px 12px; border-radius:10px;
  background:var(--k-panel-2); border:1px solid var(--k-line);
  color:var(--k-ink); font-size:15px;
}

/* Profil sayfasında kart görseli, esere giden bağlantıdır. block olmak
   ZORUNDA: satır içi bir <a>, içindeki oran kutusunu (--k-ratio)
   çökertir ve kartlar farklı yüksekliklerde görünürdü. */
.k-card-link{ display:block; text-decoration:none; color:inherit; }

/* ---------------------------------------------------------------
   PROFİL SAYFASI
   --------------------------------------------------------------- */
.u-hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--k-line);
  /* Kapak görseli arkada, çok soluk. Amaç kişiyi tanıtmak değil, sayfaya
     onun paletini vermek — üstündeki yazı her kapakla okunur kalmalı. */
  background:var(--k-panel);
}
.u-hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(38px) saturate(.85); opacity:.32; transform:scale(1.15);
}
.u-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,10,.55), rgba(11,11,10,.92));
}
.u-hero-inner{
  position:relative;
  max-width:1180px; margin:0 auto; padding:56px 24px 40px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.u-avatar{
  width:96px; height:96px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#2A2621,#3A342B);
  border:1px solid var(--k-line-strong);
  font-family:'Fraunces',Georgia,serif; font-size:38px; color:var(--k-gold-soft);
}
.u-kimlik{ min-width:0; flex:1 1 260px; }
.u-kimlik h1{
  font-family:'Fraunces',Georgia,serif; font-weight:300;
  font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 6px;
  text-wrap:balance;
}
.u-bio{ color:var(--k-muted); font-size:14.5px; max-width:60ch; margin:0 0 14px; }

.u-sayilar{ display:flex; gap:28px; flex-wrap:wrap; }
.u-sayi b{
  display:block; font-size:22px; font-weight:500;
  /* Sayılar alt alta hizalansın. */
  font-variant-numeric:tabular-nums;
}
.u-sayi small{ color:var(--k-muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* Bir sonraki rozete kalan. Sayfanın tek "oyunlaştırma" öğesi; bu yüzden
   sessiz tutuldu — ilerleme çubuğu değil, tek satır. */
.u-rozet-hedef{
  margin-top:14px; font-size:12.5px; color:var(--k-muted);
}
.u-rozet-hedef b{ color:var(--k-ink); font-weight:500; font-variant-numeric:tabular-nums; }

.u-govde{ max-width:1180px; margin:0 auto; padding:32px 24px 80px; }
.u-baslik{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.u-baslik h2{ font-size:17px; font-weight:500; }
.u-bos{
  padding:64px 24px; text-align:center; color:var(--k-muted);
  border:1px dashed var(--k-line); border-radius:14px;
}
/* Üst çubuk: solda Keşfet'e dönüş, sağda ana sayfaya giden logo.
   Ölçüler .u-geri'den devralındı; o eskiden tek başına ortalanan
   öğeydi, artık hizalamayı çubuk yapıyor. */
/* Logo ORTADA (2026-08-05, kullanıcı isteği) — sitenin geri kalanındaki
   üst bar düzeniyle aynı: yan / logo / yan. 1fr-auto-1fr ızgarası
   logoyu, soldaki bağlantının genişliğinden bağımsız gerçek ortaya koyar. */
.u-ustcubuk{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:20px 24px 0; max-width:1180px; margin:0 auto;
}
.u-ustcubuk .u-geri{ justify-self:start; }
.u-ustcubuk .u-logo{ justify-self:center; }
.u-geri{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--k-muted); text-decoration:none; font-size:13.5px;
}
.u-geri:hover{ color:var(--k-ink); }
.u-logo{ display:block; flex:0 0 auto; }
/* Keşfet başlığındaki logoyla aynı gerekçe: görselin %84'ü saydam,
   küçük yükseklikte ekranda yok gibi duruyor. */
.u-logo img{ height:38px; width:auto; display:block; }
@media(max-width:640px){ .u-logo img{ height:30px; } }

@media (max-width:640px){
  .u-hero-inner{ padding:36px 18px 28px; gap:18px; }
  .u-avatar{ width:72px; height:72px; font-size:28px; }
  .u-govde{ padding:24px 18px 64px; }
  .u-sayilar{ gap:20px; }
}

/* ---------------------------------------------------------------
   ÜRETİCİ AVATARI VE MESAJ DÜĞMESİ — R24
   --------------------------------------------------------------- */
/* Akıştaki kartta ismin yanındaki çok küçük daire. */
.k-card-avatar{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:#2A2621 center/cover no-repeat;
  display:inline-grid; place-items:center; vertical-align:middle;
  margin-right:6px;
  font-family:'Fraunces',Georgia,serif; font-size:10px; color:var(--k-gold-soft);
}
.k-card-author{ display:inline-flex; align-items:center; min-width:0; }

/* Detay panelindeki daire zaten vardı (.k-avatar); fotoğraf gelince
   arka plan olarak basılıyor, baş harf temizleniyor. */
.k-avatar.has-foto{ background-size:cover; background-position:center; color:transparent; }
/* Çevrimiçi ışığı (2026-08-05) — uygulamadaki yeşil noktanın web
   karşılığı. Koyu zemin halkası, ışığı görselden ayırır. */
.k-avatar{ position:relative; }
.k-avatar.is-cevrimici::after{
  content:""; position:absolute; right:1px; bottom:1px;
  width:12px; height:12px; border-radius:50%;
  background:#37B77C; border:2.5px solid var(--k-bg, #0B0B0A);
}

/* Profil sayfasındaki büyük daire. */
.u-avatar.has-foto{ background-size:cover; background-position:center; color:transparent; }

.u-mesaj{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--k-line-strong); background:transparent;
  color:var(--k-ink); font-family:inherit; font-size:14px; cursor:pointer;
  transition:border-color .18s var(--k-ease), color .18s var(--k-ease);
}
.u-mesaj:hover{ border-color:var(--k-gold-soft); color:var(--k-gold-soft); }
.u-mesaj[disabled]{ opacity:.5; cursor:default; }

/* ---------------------------------------------------------------
   "@ad" ARAMASI — ÜRETİCİ ŞERİDİ (R26)
   --------------------------------------------------------------- */
/* Kartların üstünde ayrı bir şerit. Eser ile kişi aynı ızgarada
   karışırsa hangisine tıkladığını kimse bilemez. */
.k-uretenler{
  display:grid; gap:10px; margin-bottom:22px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.k-uretici{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px;
  background:var(--k-panel); border:1px solid var(--k-line);
  transition:border-color .2s var(--k-ease);
}
.k-uretici:hover{ border-color:var(--k-line-strong); }

.k-uretici-daire{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  background:#2A2621 center/cover no-repeat;
  display:grid; place-items:center;
  font-family:'Fraunces',Georgia,serif; font-size:17px; color:var(--k-gold-soft);
}
.k-uretici-meta{ min-width:0; display:block; }
.k-uretici-ad{
  display:block; font-size:14.5px; color:var(--k-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.k-uretici-meta small{
  color:var(--k-muted); font-size:12px; font-variant-numeric:tabular-nums;
}

/* R42 — birden fazla başlangıç görseli yan yana. Tek görselde eski
   görünüm korunuyor: liste tek sütuna düşüyor ve kutu tam genişlik. */
.k-ref-liste{ display:grid; gap:8px; grid-template-columns:1fr; }
.k-ref-liste:has(> :nth-child(2)){ grid-template-columns:1fr 1fr; }
.k-ref-liste:has(> :nth-child(2)) .k-ref img{ max-height:150px; }