/* ------------------------------------------------------------------
 * Vitrin (showcase) — panelden yönetilen mozaik galeri.
 * page-vitrin.php ile birlikte, yalnız Vitrin sayfasında yüklenir.
 * Renk/gölge/yarıçap değerleri style.css :root token'larından gelir.
 * Sınıflar çakışmayı önlemek için `vt-` önekli.
 * ---------------------------------------------------------------- */

/* page-hero başlık vurgusu + aksiyon boşluğu */
.page-hero h1 .grad{background:linear-gradient(96deg,#8FBAFF 0%,#3B82F6 55%,#0E63C8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- filtreler ---------- */
.vt-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px}
.vt-filter{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--text-2);background:#fff;border:1px solid var(--line);border-radius:100px;padding:10px 18px;cursor:pointer;transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,color .22s,box-shadow .22s}
.vt-filter:hover{border-color:#BBD4F2;color:var(--primary)}
.vt-filter.on{background:linear-gradient(180deg,#1268C9,var(--primary));color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(0,87,184,.55)}
.vt-filter .n{opacity:.55;font-variant-numeric:tabular-nums;margin-left:2px}

/* ---------- mozaik ---------- */
.vt-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:212px;gap:16px}
.vt-tile{position:relative;border-radius:var(--r-card);overflow:hidden;background:#0A1220;border:1px solid rgba(148,178,230,.12);box-shadow:var(--shadow-soft);cursor:pointer;isolation:isolate;color:#fff;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.vt-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:rgba(59,130,246,.4)}
.vt-tile.hide{display:none}

/* arka plan görseli */
.vt-viz{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.vt-tile:hover .vt-viz{transform:scale(1.08)}
/* görsel yoksa: lacivert + ince nokta deseni */
.vt-tile.vt-noimg .vt-viz{background:radial-gradient(rgba(94,140,220,.12) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(160deg,#12203C,#0A1220)}

/* okunabilirlik için koyu alt degrade */
.vt-tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,14,26,0) 26%,rgba(7,12,22,.5) 60%,rgba(5,10,20,.92) 96%)}

.vt-top{position:absolute;top:15px;left:16px;right:16px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vt-chip{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:#9FC3F5;background:rgba(8,14,26,.5);border:1px solid rgba(148,178,230,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 10px;border-radius:100px;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s}
.vt-tile:hover .vt-chip{opacity:1;transform:none}
.vt-go{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(148,178,230,.3);background:rgba(8,14,26,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#DCE7F7;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s,background .3s,border-color .3s}
.vt-tile:hover .vt-go{opacity:1;transform:none}
.vt-tile:hover .vt-go:hover{background:var(--primary);border-color:var(--primary);color:#fff}

.vt-ov{position:absolute;left:20px;right:20px;bottom:18px;z-index:3;display:grid;gap:7px}
.vt-ov .kl{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#9FC3F5}
.vt-ov h3{font-size:18px;line-height:1.2;color:#fff;letter-spacing:-.02em;font-weight:800}
.vt-ov .m{display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;font-weight:700;color:#C9D7EC}
.vt-ov .m b{font-size:17px;font-weight:800;color:#8FBAFF;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* boyutlar */
.vt-tile.big{grid-column:span 2;grid-row:span 2}
.vt-tile.big .vt-ov{left:26px;right:26px;bottom:24px;gap:9px}
.vt-tile.big .vt-ov h3{font-size:clamp(22px,2.3vw,29px)}
.vt-tile.tall{grid-row:span 2}
.vt-tile.wide{grid-column:span 2}

@media(max-width:980px){
  .vt-mosaic{grid-template-columns:repeat(2,1fr)}
  .vt-tile.tall{grid-row:span 1}
  .vt-tile.big,.vt-tile.wide{grid-column:span 2}
}
@media(max-width:560px){
  .vt-mosaic{grid-template-columns:1fr;grid-auto-rows:230px}
  .vt-tile.big,.vt-tile.tall,.vt-tile.wide{grid-column:span 1;grid-row:span 1}
}