/* Paylaşım kartı penceresi: biçim seçilir, önizleme çizilir, hazır görsel
   paylaşılır. Hem sitede hem yönetim panelinde aynı dosya kullanılıyor, o
   yüzden renkler ve yazı tipi burada kendi adlarıyla duruyor: iki tarafın
   değişken adları birebir aynı değil. */

.kart-diyalog {
  --kart-yer:min(44vh, 360px);
  --kart-lacivert:#0a2949;
  --kart-altin:#c99a46;
  --kart-kirmizi:#a5121f;
  --kart-kagit:#fff;
  --kart-metin:#1c2732;
  --kart-soluk:#68717b;
  --kart-cizgi:#dde3e9;
  --kart-krem:#f6f4ef;
  --kart-yazi:'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  width:min(560px, calc(100vw - 24px)); max-height:min(92vh,900px);
  padding:0; border:0; border-radius:12px;
  background:var(--kart-kagit); color:var(--kart-metin);
  box-shadow:0 26px 60px rgba(4,15,28,.4); overflow:hidden;
}
.kart-diyalog[open] { display:flex; flex-direction:column; }
.kart-diyalog::backdrop { background:rgba(4,15,28,.62); }
.kart-diyalog-ust { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 12px 12px 18px; background:var(--kart-lacivert); color:#fff; }
.kart-diyalog-ust h2 { margin:0; font-family:var(--kart-yazi); font-weight:700; font-size:21px;
  letter-spacing:.03em; }
.kart-kapat { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0;
  border-radius:6px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.kart-kapat:hover { background:var(--kart-kirmizi); }
.kart-kapat svg { width:16px; height:16px; }
.kart-bicimler { display:flex; gap:8px; overflow-x:auto; padding:14px 18px 4px; }
.kart-secenek { flex:0 0 auto; display:flex; flex-direction:column; gap:1px; padding:7px 12px;
  border:1px solid var(--kart-cizgi); border-radius:8px; background:transparent;
  color:var(--kart-metin); cursor:pointer; text-align:left; font:inherit; }
.kart-secenek-ad { font-family:var(--kart-yazi); font-weight:700; font-size:16px;
  line-height:1.1; color:var(--kart-lacivert); }
.kart-secenek-not { font-size:11px; color:var(--kart-soluk); }
.kart-secenek[aria-pressed="true"] { border-color:var(--kart-altin); background:var(--kart-krem); }
.kart-cumle { padding:10px 18px 0; min-height:52px; }
.kart-cumle-not { font-size:12px; color:var(--kart-soluk); }
/* Önizlemenin yeri sabit ve kart o yerin içinde küçülüyor: biçim değişince
   pencere boyca oynamasın diye. Kartın ölçüsü yüzdeyle verilmiyor, yüzde
   satırın kendi boyuna göre çözülüyor ve kart kutuyu taşırıyordu. */
.kart-onizleme { display:flex; align-items:center; justify-content:center;
  padding:14px 18px; height:var(--kart-yer); min-height:0; flex:none; }
.kart-tuval { max-width:100%; max-height:calc(var(--kart-yer) - 28px);
  height:auto; width:auto; border-radius:4px; box-shadow:0 2px 10px rgba(10,41,73,.22); }
.kart-islem { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:12px 18px 18px; border-top:1px solid var(--kart-cizgi); }
.kart-gonder { padding:11px 22px; border:0; border-radius:6px; background:var(--kart-lacivert);
  color:#fff; font-family:var(--kart-yazi); font-weight:700; font-size:18px;
  letter-spacing:.02em; cursor:pointer; }
.kart-gonder:hover { background:#123a63; }
.kart-indir { font-size:14px; color:var(--kart-lacivert); text-decoration:underline; }
.kart-durum { flex:1 1 100%; margin:0; font-size:13px; color:var(--kart-soluk); min-height:1.2em; }