/*
 * Düz içerik sayfaları (/s/{slug}) ve Sponsorlar (/sponsorlar)
 * Renk yok: yalnız tema değişkenleri (var(--vurgu), --kart, --cizgi ...) ve onlardan türeyen tonlar.
 * Sponsor kartında isteğe bağlı --sy-renk (satır içi, doğrulanmış #rrggbb) vurgu için kullanılır; yoksa --vurgu.
 * app.css içindeki .btn / .btn-vurgu / .ic sınıflarını kullanır.
 * .sy-govde bloğu yönetim panelindeki önizlemede de kullanılır; bu yüzden değişkenlere yedek değer verilir.
 */
.sy{
  --sy-parlak:color-mix(in srgb,var(--vurgu) 60%,var(--metin));
  --sy-a45:color-mix(in srgb,var(--vurgu) 45%,transparent);
  --sy-koyu:color-mix(in srgb,var(--zemin) 40%,var(--kart));
  --sy-baslik:var(--font-baslik,inherit);
  padding-bottom:10px;
}

/* ---------- ortak ---------- */
.sy-h1{margin:0;font-family:var(--sy-baslik);font-style:var(--baslik-stil,normal);font-weight:400;letter-spacing:.5px;font-size:clamp(26px,3vw,38px);line-height:1.05;text-transform:uppercase}
.sy-sayfa-baslik{margin-bottom:16px}
.sy-bos{margin:0;color:var(--ikincil);font-size:14px}
.sy-bos-kutu{padding:30px 16px;text-align:center;border:1px dashed var(--cizgi);border-radius:14px;background:var(--kart)}

/* ---------- düz içerik sayfası ---------- */
.sy-sayfa{max-width:860px;padding:26px 30px;border-radius:16px;border:1px solid var(--cizgi);background:var(--kart)}
.sy-sayfa>.sy-h1{margin-bottom:18px}
.sy-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:26px;padding-top:14px;border-top:1px solid var(--cizgi);color:var(--ikincil);font-size:12px}
.sy-alt a{color:var(--sy-parlak);font-weight:600}
.sy-alt a:hover{text-decoration:underline}

/* HTML gövde (panelden gelen, temizlenmiş içerik) */
.sy-govde{color:color-mix(in srgb,var(--metin) 85%,var(--zemin));font-size:15px;line-height:1.75;overflow-wrap:anywhere}
.sy-govde>:first-child{margin-top:0}
.sy-govde>:last-child{margin-bottom:0}
.sy-govde p{margin:0 0 1em}
.sy-govde h2,.sy-govde h3,.sy-govde h4{margin:1.6em 0 .6em;color:var(--metin);font-family:var(--sy-baslik);font-style:var(--baslik-stil,normal);font-weight:400;letter-spacing:.4px;line-height:1.15}
.sy-govde h2{font-size:24px}
.sy-govde h3{font-size:20px}
.sy-govde h4{font-size:17px}
.sy-govde b,.sy-govde strong{color:var(--metin);font-weight:700}
.sy-govde a{color:var(--sy-parlak);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sy-a45)}
.sy-govde a:hover{text-decoration-color:currentColor}
.sy-govde ul,.sy-govde ol{margin:0 0 1em;padding-left:1.4em}
.sy-govde ul{list-style:disc}
.sy-govde ol{list-style:decimal}
.sy-govde li{margin:.3em 0}
.sy-govde li::marker{color:var(--vurgu)}
.sy-govde blockquote{margin:0 0 1em;padding:.6em 1em;border-left:3px solid var(--vurgu);border-radius:0 8px 8px 0;background:var(--sy-koyu);color:var(--ikincil)}
.sy-govde blockquote>:last-child{margin-bottom:0}
.sy-govde hr{margin:1.6em 0;border:0;border-top:1px solid var(--cizgi)}
.sy-govde img{display:block;max-width:100%;height:auto;margin:1em 0;border-radius:10px}
.sy-govde table{display:block;width:100%;max-width:100%;overflow-x:auto;margin:0 0 1em;border-collapse:collapse;font-size:14px}
.sy-govde th,.sy-govde td{padding:8px 12px;border:1px solid var(--cizgi);text-align:left;vertical-align:top}
.sy-govde th{background:var(--sy-koyu);color:var(--metin);font-weight:700}
/* masaüstü: tablo içerik genişliğinde büzülmesin, sayfa genişliğini doldursun */
@media (min-width:761px){.sy-govde table{display:table}}

/* ---------- sponsorlar ---------- */
.sy-uyari{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--kayip) 45%,transparent);background:color-mix(in srgb,var(--kayip) 9%,var(--kart));color:var(--ikincil);font-size:13px;line-height:1.5}
.sy-uyari p{margin:0}
.sy-uyari strong{color:var(--metin)}
.sy-uyari a{color:var(--metin);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sy-18{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--kayip);color:var(--kayip);font-size:13px;font-weight:800;letter-spacing:-.02em}

.sy-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:12px}
.sy-kart{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;overflow:hidden;border-radius:14px;border:1px solid var(--cizgi);
  background:radial-gradient(280px 150px at 50% 0%,color-mix(in srgb,var(--sy-renk,var(--vurgu)) 20%,transparent),transparent 75%),var(--kart);
  transition:border-color .2s,transform .2s}
.sy-kart:hover{border-color:color-mix(in srgb,var(--sy-renk,var(--vurgu)) 55%,var(--cizgi));transform:translateY(-2px)}
.sy-kart.ana{grid-column:span 2}

.sy-rozet{position:absolute;left:10px;top:10px;z-index:1;padding:3px 8px;border-radius:6px;border:1px solid var(--cizgi);background:color-mix(in srgb,var(--zemin) 80%,transparent);color:var(--ikincil);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sy-rozet.ana{border-color:transparent;background:var(--sy-renk,var(--vurgu));color:var(--zemin)}

.sy-logo{display:grid;place-items:center;height:96px;margin-top:14px;overflow:hidden}
.sy-kart.ana .sy-logo{height:124px}
.sy-logo img{max-width:80%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--sy-renk,var(--vurgu)) 35%,transparent))}
.sy-logo b{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;border:1px solid color-mix(in srgb,var(--sy-renk,var(--vurgu)) 45%,transparent);background:color-mix(in srgb,var(--sy-renk,var(--vurgu)) 14%,var(--kart));color:color-mix(in srgb,var(--sy-renk,var(--vurgu)) 60%,var(--metin));font-family:var(--sy-baslik);font-style:var(--baslik-stil,normal);font-size:34px;font-weight:400;line-height:1;text-transform:uppercase}

.sy-kart-govde{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.sy-ad{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:800;line-height:1.3}
.sy-acik{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ikincil);font-size:12px;line-height:1.5}
.sy-bonus{display:flex;align-items:flex-start;gap:6px;margin:0;color:color-mix(in srgb,var(--sy-renk,var(--vurgu)) 60%,var(--metin));font-size:13px;font-weight:800;line-height:1.35}
.sy-bonus .ic{margin-top:1px}
.sy-git{width:100%}

@media (max-width:1100px){
  .sy-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .sy-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .sy-sayfa{padding:18px 16px}
  .sy-uyari{align-items:flex-start;padding:12px}
}
@media (max-width:420px){
  .sy-izgara{grid-template-columns:minmax(0,1fr)}
  .sy-kart.ana{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .sy-kart{transition:none}
  .sy-kart:hover{transform:none}
}