/* Color X — paylaşım kartı görünümü (uygulamadaki PhotoShareCard'ın web eşi).
   tarifler.html + topluluk.html ortak kullanır. */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');
.xcard{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#222;border:1px solid #262626}
.xcard .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xcard .glass{position:absolute;left:20px;right:20px;top:auto;bottom:42px;border-radius:14px;padding:10px 12px;
  background:rgba(0,0,0,.32);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);color:#fff}
.xcard .head{display:flex;gap:8px;align-items:center;min-width:0}
.xcard .head>img{width:26px;height:26px;border-radius:6px;object-fit:cover;flex:none}
.xcard .hd{min-width:0}
.xcard .ttl{font-weight:800;font-size:.95rem;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcard .sub{color:rgba(255,255,255,.72);font-size:.66rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcard .sep{height:1px;background:rgba(255,255,255,.18);margin:7px 0 5px}
.xcard .ln{display:flex;justify-content:space-between;gap:8px;font-size:.64rem;padding:1.4px 0}
.xcard .ln .k{color:rgba(255,255,255,.7);font-weight:600;white-space:nowrap}
.xcard .ln .v{font-weight:800;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcard .sig{position:absolute;left:12px;bottom:8px;font-family:'Dancing Script',cursive;font-weight:600;
  font-size:1.1rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9);
  max-width:calc(100% - 118px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcard .lg{position:absolute;right:10px;bottom:12px;height:20px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.85))}
.xcard.hl{outline:2px solid #b53142;outline-offset:3px}
.xcard .more{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;
  color:#fff;line-height:0;text-decoration:none;transition:background .15s}
.xcard .more svg{display:block}
.xcard .more:hover{background:rgba(0,0,0,.6)}