/* GarajLink — bio kartları (bio sayfası ve panel düzen editörü ortak kullanır). */
:root{
  --ink:#1B0A2E; --paper:#F7FFEF; --lime:#CCFFA0; --mag:#E122FF; --vio:#7A2BFF; --card:#fff;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --r:22px;
}
/*
 * Kart ızgarası iki sütunlu, satır yüksekliği kartlardan gelir. Kartın kendisi görselin oranındadır:
 * kare 1:1 ve ince 16:9 yarım genişlik; genis 16:9 ve buyuk 1:1 tam genişlik; uzun yarım genişlikte iki satır boyu.
 * Aynı satırdaki kartların oranı aynıysa satır tam hizalanır (ör. iki kare ya da iki ince).
 */
.izgara{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.izgara-sik{grid-auto-flow:dense} /* panelde "boşlukları doldur" açıksa: arkadaki küçük kart boşluğa kayar */
.kart{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--r);background:var(--card);color:var(--ink);
  border:2px solid var(--edge,var(--ink));box-shadow:4px 4px 0 var(--edge,var(--ink));overflow:hidden;transition:transform .12s,box-shadow .12s;min-width:0;
  aspect-ratio:1/1}
.kart:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge,var(--ink))}
.kart:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--edge,var(--ink))}
.kart-ince{aspect-ratio:16/9;padding:9px;border-radius:16px}
.kart-genis{grid-column:span 2;aspect-ratio:16/9}
.kart-buyuk{grid-column:span 2}
.kart-uzun{grid-row:span 2;aspect-ratio:auto;align-self:stretch;min-height:220px}

.kart-ust{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}
.etiket{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc,var(--mag));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt{width:22px;height:22px;flex:none}
.ok{font-weight:800;flex:none}
.kart-baslik{position:relative;z-index:1;margin-top:auto;font-size:15px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kart-buyuk .kart-baslik{font-size:19px}
.kart-kare .kart-baslik,.kart-ince .kart-baslik{-webkit-line-clamp:2}
.kart-ince .kart-baslik{font-size:13px}
.kart-ince .etiket{font-size:10px}
.kart-ince .yt{width:18px;height:18px}

/* görselli kart: görsel kartın tamamını kaplar (kart görselin oranında olduğu için kırpılmaz), yazılar üstüne biner */
.kart-gorselli{color:#fff;background:var(--ink)}
.kart-gorsel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--lime)}
.kart-gorselli::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(27,10,46,.88),rgba(27,10,46,.35) 38%,transparent 62%)}
.kart-gorselli .etiket{background:var(--paper);color:var(--ink);padding:3px 8px;letter-spacing:.03em;border-radius:999px;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.kart-gorselli .ok{background:var(--paper);color:var(--ink);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px}
.kart-gorselli .yt{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.kart-gorselli .kart-baslik{text-shadow:0 1px 3px rgba(0,0,0,.4)}
.kart-etiketsiz .etiket{visibility:hidden}
/* başlık gizliyken yalnız görsel (ve köşedeki etiket/simge) kalır */
.kart-basliksiz .kart-baslik{display:none}
.kart-basliksiz.kart-gorselli::after{display:none}

/* yazılı kart (görsel yok) */
.kart-yazi{background:var(--yazi-bg,var(--vio));color:var(--yazi-fg,var(--paper))}
.kart-yazi .etiket{color:var(--lime)}
.kart-yazi .kart-baslik{font-size:22px;font-weight:800;-webkit-line-clamp:4}
.kart-yazi.kart-ince .kart-baslik{font-size:15px;-webkit-line-clamp:2}
.kart-yazi.kart-basliksiz .kart-baslik{display:-webkit-box} /* görsel yoksa başlık her zaman görünür */

/* YouTube abone ol kartı */
.kart-abone{background:var(--ink);color:var(--paper);justify-content:space-between;gap:10px;container-type:inline-size}
.kart-abone,.kart-abone:hover,.kart-abone:active{box-shadow:4px 4px 0 var(--mag)}
.abone-kanal{display:flex;align-items:center;gap:12px;min-width:0}
.abone-logo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--lime);background:var(--lime)}
.abone-ad{display:flex;flex-direction:column;min-width:0}
.abone-ad b{font-size:20px;font-weight:900;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abone-ad small{font-size:13px;font-weight:600;color:var(--lime);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abone-dugme{display:flex;align-items:center;justify-content:center;gap:8px;background:#FF0033;color:#fff;font-weight:900;font-size:16px;border-radius:999px;padding:11px 16px}
.abone-dugme svg{width:22px;height:22px}
.kart-genis .abone-kanal,.kart-buyuk .abone-kanal,.kart-uzun .abone-kanal{flex-direction:column;align-items:flex-start;margin-top:auto}
.kart-genis .abone-logo{width:64px;height:64px}.kart-genis .abone-ad b{font-size:24px}
.kart-buyuk .abone-logo,.kart-uzun .abone-logo{width:76px;height:76px}
.kart-buyuk .abone-ad b{font-size:30px}
.kart-kare .abone-kanal{gap:8px}
.kart-kare .abone-logo{width:38px;height:38px}.kart-kare .abone-ad b{font-size:16px}.kart-kare .abone-ad small{font-size:11px}
.kart-kare .abone-dugme{padding:9px 8px;font-size:13px;margin-top:auto;white-space:nowrap;gap:5px}
/* küçük 16:9: logo + ad solda, düğme yalnız simge */
.kart-ince.kart-abone{flex-direction:row;align-items:center;gap:8px}
.kart-ince .abone-kanal{gap:7px;flex:1}
.kart-ince .abone-logo{width:34px;height:34px}.kart-ince .abone-ad b{font-size:14px}.kart-ince .abone-ad small{display:none}
.kart-ince .abone-dugme{flex:none;padding:8px}.kart-ince .abone-yazi{display:none}.kart-ince .abone-dugme svg{width:18px;height:18px}

/* dar kart (küçük ekran): düğmede yalnız YouTube simgesi */
@container (max-width:150px){.kart-kare .abone-yazi{display:none}}

@media (prefers-reduced-motion:reduce){.kart{transition:none}}