/* ============================================================
   SunucuPARK Blog — Modern kart tasarımı
   Helix Ultimate custom.css  (templates/shaper_helixultimate/css/custom.css)
   Hazırlayan: SunucuPARK / 2026-11
   Not: Çekirdek dosya değişmez; custom.js ile birlikte çalışır.
   ============================================================ */

:root{
  --spk-brand:#1552d8; --spk-brand-2:#0d3fb0;
  --spk-ink:#0f1a2e; --spk-muted:#5a6b86; --spk-faint:#8695ad;
  --spk-surface:#ffffff; --spk-bg:#f7f9fc;
  --spk-line:#e5ebf4; --spk-line-strong:#d4ddec;
  --spk-radius:16px;
  --spk-shadow:0 1px 2px rgba(15,26,46,.04), 0 10px 30px -12px rgba(15,26,46,.14);
  --spk-shadow-lift:0 6px 14px rgba(15,26,46,.08), 0 24px 48px -18px rgba(15,26,46,.28);
  /* kategori renkleri */
  --c-guv:#e11d48;    --c-guv-bg:#fdeaee;
  --c-cpanel:#d9741a; --c-cpanel-bg:#fbefe0;
  --c-mail:#0d9488;   --c-mail-bg:#e0f3f1;
  --c-linux:#7c3aed;  --c-linux-bg:#f0e9fd;
  --c-code:#4f46e5;   --c-code-bg:#ecebfc;
  --c-tek:#1552d8;    --c-tek-bg:#e9f0ff;
}

/* ---- sayfa zemini ---- */
#sp-component{background:transparent}
.blog-featured, .blog, .com-content-category-blog{background:transparent}

/* ---- anasayfa: header ile içerik arası fazla boşluğu kıs ----
   Helix varsayılan #sp-main-body{padding:100px 0} → hero yukarı çekilir */
.view-featured #sp-main-body{padding-top:0!important;padding-bottom:50px!important}

/* ===== ortak başlık alanı (opsiyonel) ===== */
#sp-title .sp-page-title{letter-spacing:-.03em}

/* ============================================================
   GRID — 3 sütun kart düzeni
   (Menüde "Columns = 3" seçilince Bootstrap .col-lg-4 üretir;
    aşağıdaki stil kolon ne olursa olsun kartı giydirir.)
   ============================================================ */
#sp-component .article-list .row{row-gap:26px;margin-left:-13px;margin-right:-13px}
#sp-component .article-list [class*="col-"]{padding-left:13px;padding-right:13px}

/* ---- KART (grid öğesi) ---- */
#sp-component .article.blog-items{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--spk-surface);border:1px solid var(--spk-line);
  border-radius:var(--spk-radius);overflow:hidden;box-shadow:var(--spk-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#sp-component .article.blog-items:hover{
  transform:translateY(-4px);box-shadow:var(--spk-shadow-lift);border-color:var(--spk-line-strong);
}

/* ---- KAPAK (üretilen gradient + ikon) ---- */
#sp-component .article.blog-items::before{
  content:"";display:block;height:168px;flex:none;position:relative;
  background:linear-gradient(135deg,#1a2a6c,#3b82f6);
  background-size:cover;background-position:center;
}
/* kapak üstüne ince ikon-watermark; kategoriye göre class ile değişir */
#sp-component .article.blog-items::after{
  content:"";position:absolute;top:0;left:0;right:0;height:168px;z-index:1;pointer-events:none;
  background-repeat:no-repeat;background-position:right -12px bottom -14px;background-size:118px 118px;
  opacity:.9;
}

/* gerçek görsel varsa (JS .spk-has-img ekler) üretilen kapağı gizle, görseli kapak yap */
#sp-component .article.blog-items.spk-has-img::before,
#sp-component .article.blog-items.spk-has-img::after{display:none}
#sp-component .article.blog-items.spk-has-img .spk-cover-img{
  display:block;height:168px;width:100%;object-fit:cover;flex:none;
}
#sp-component .spk-cover-img{display:none}
/* Joomla'nın bastığı HAM intro görselini gizle — biz onu klonlayıp kapak yapıyoruz */
#sp-component .article-intro-image{display:none!important}
/* gerçek görsel geldiğinde üretilen kapağı her yerde kapat */
#sp-component .spk-has-img::before,
#sp-component .spk-has-img::after{display:none!important}
/* hero'da gerçek görsel ilk sütunu doldursun */
#sp-component .items-leading .blog-item.article.spk-has-img .spk-cover-img{
  display:block;width:100%;height:100%;min-height:320px;object-fit:cover;
}

/* ---- içerik ---- */
#sp-component .article.blog-items .item-content{
  padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto;
}
#sp-component .article.blog-items .article-header{margin:0}
#sp-component .article.blog-items .article-header h2{
  font-size:18.5px;line-height:1.3;margin:0;font-weight:700;letter-spacing:-.02em;
}
#sp-component .article-header h2 a{color:var(--spk-ink);text-decoration:none}
#sp-component .article-header h2 a:hover{color:var(--spk-brand)}

/* kategori adı -> renkli çip */
#sp-component .article-info{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:13px;color:var(--spk-faint);
}
#sp-component .article-info .category-name{order:-1}
#sp-component .article-info .category-name a{
  display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:7px;
  text-decoration:none;color:var(--c-tek);background:var(--c-tek-bg);
}
#sp-component .article-info .hits{color:var(--spk-faint);display:inline-flex;align-items:center;gap:5px}
#sp-component .article-info .hits meta{display:none}
#sp-component .spk-rt{color:var(--spk-muted);font-weight:600}
#sp-component .spk-dot{width:3px;height:3px;border-radius:50%;background:var(--spk-line-strong);display:inline-block}

/* etiket listesini sadeleştir */
#sp-component .article.blog-items ul.tags{display:none}

/* boş <p>&nbsp;</p> gizle — ama bizim özet <p>'mizi gizleme */
#sp-component .item-content > p:not(.spk-excerpt){display:none}

/* özet — başlık + EN FAZLA 3 satır; taşan her şey (uzun metin/tablo/kod) kesilir.
   JS'e bağımlı DEĞİL: sadece overflow+max-height ile her içerikte çalışır. */
#sp-component .article.blog-items .entry,
#sp-component .blog-item.article .entry,
#sp-component .blog-featured .entry,
#sp-component .blog .entry,
#sp-component .com-content-category-blog .entry{
  color:var(--spk-muted);font-size:14.5px!important;line-height:1.6!important;margin:0!important;
  max-height:4.8em!important;overflow:hidden!important;flex:none!important;
}
#sp-component .entry *{
  font-size:14.5px!important;line-height:1.6!important;margin:0!important;color:inherit!important;
  background:none!important;
}
/* kod/tablo/görsel özette görünmesin */
#sp-component .entry table,#sp-component .entry pre,#sp-component .entry code,
#sp-component .entry img,#sp-component .entry iframe,
#sp-component .entry [id^="highlighter"],#sp-component .entry .highlighter{display:none!important}

/* custom.js'in ürettiği TEK kısa özet (yapıdan bağımsız, max 3 satır) */
#sp-component .spk-excerpt{
  color:var(--spk-muted)!important;font-size:14.5px!important;line-height:1.6!important;margin:0!important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
#sp-component .items-leading .spk-excerpt{font-size:15.5px!important}

/* "Featured" rozeti tamamen gizli (istenmedi) */
#sp-component .featured-article-badge{display:none!important}

/* devamını oku linki (varsa) */
#sp-component .article.blog-items .readmore a,
#sp-component .article.blog-items a.readmore{
  display:inline-flex;align-items:center;gap:6px;color:var(--spk-brand);font-weight:700;font-size:14px;
  text-decoration:none;margin-top:auto;
}

/* ============================================================
   KATEGORİ RENK + İKON  (class'ları custom.js ekler)
   ============================================================ */
.spk-cat-guv::before   {background:linear-gradient(135deg,#7f1d1d,#e11d48)!important}
.spk-cat-cpanel::before{background:linear-gradient(135deg,#7c2d12,#ea8a2f)!important}
.spk-cat-mail::before  {background:linear-gradient(135deg,#134e4a,#0d9488)!important}
.spk-cat-linux::before {background:linear-gradient(135deg,#4c1d95,#8b5cf6)!important}
.spk-cat-code::before  {background:linear-gradient(135deg,#312e81,#6366f1)!important}
.spk-cat-tek::before   {background:linear-gradient(135deg,#1a2a6c,#3b82f6)!important}

.spk-cat-guv::after   {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5l-8-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important}
.spk-cat-cpanel::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='1.6' fill='white' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1.6' fill='white' stroke='none'/%3E%3Ccircle cx='8' cy='17' r='1.6' fill='white' stroke='none'/%3E%3C/svg%3E") !important}
.spk-cat-mail::after  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important}
.spk-cat-linux::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='m7 10 3 2.5L7 15M12.5 15H17'/%3E%3C/svg%3E") !important}
.spk-cat-code::after  {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M13.5 6l-3 12'/%3E%3C/svg%3E") !important}
.spk-cat-tek::after   {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6' rx='1.8'/%3E%3Crect x='4' y='14' width='16' height='6' rx='1.8'/%3E%3Ccircle cx='8' cy='7' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='8' cy='17' r='1' fill='white' stroke='none'/%3E%3C/svg%3E") !important}
#sp-component .article.blog-items::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6' rx='1.8'/%3E%3Crect x='4' y='14' width='16' height='6' rx='1.8'/%3E%3Ccircle cx='8' cy='7' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='8' cy='17' r='1' fill='white' stroke='none'/%3E%3C/svg%3E")} /* varsayılan */

/* çip renkleri kategoriye göre */
.spk-cat-guv    .category-name a{color:var(--c-guv)!important;background:var(--c-guv-bg)!important}
.spk-cat-cpanel .category-name a{color:var(--c-cpanel)!important;background:var(--c-cpanel-bg)!important}
.spk-cat-mail   .category-name a{color:var(--c-mail)!important;background:var(--c-mail-bg)!important}
.spk-cat-linux  .category-name a{color:var(--c-linux)!important;background:var(--c-linux-bg)!important}
.spk-cat-code   .category-name a{color:var(--c-code)!important;background:var(--c-code-bg)!important}
.spk-cat-tek    .category-name a{color:var(--c-tek)!important;background:var(--c-tek-bg)!important}

/* ============================================================
   HERO — öne çıkan (Leading) büyük kart
   .blog-item.article  (items-leading içinde)
   ============================================================ */
#sp-component .items-leading{margin-bottom:30px}
#sp-component .items-leading .blog-item.article{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;
  background:var(--spk-surface);border:1px solid var(--spk-line);
  border-radius:var(--spk-radius);overflow:hidden;box-shadow:var(--spk-shadow);
}
#sp-component .items-leading .blog-item.article::before{
  content:"";display:block;min-height:320px;
  background:linear-gradient(135deg,#1a2a6c,#2546b8 55%,#3b82f6);
}
#sp-component .items-leading .blog-item.article::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:52%;pointer-events:none;
  background-repeat:no-repeat;background-position:right 24px bottom 10px;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6' rx='1.8'/%3E%3Crect x='4' y='14' width='16' height='6' rx='1.8'/%3E%3Ccircle cx='8' cy='7' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='8' cy='17' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");opacity:.92;
}
#sp-component .items-leading .blog-item.article .item-content{
  padding:36px 38px;display:flex;flex-direction:column;justify-content:center;gap:16px;
}
#sp-component .items-leading .article-header h2{font-size:28px;line-height:1.15;letter-spacing:-.03em;margin:0}
#sp-component .items-leading .entry{max-height:5em!important;overflow:hidden!important}
#sp-component .items-leading .featured-article-badge{top:18px;left:18px;right:auto}

/* ---- responsive ---- */
@media (max-width:991px){
  #sp-component .items-leading .blog-item.article{grid-template-columns:1fr}
  #sp-component .items-leading .blog-item.article::before{min-height:180px}
  #sp-component .items-leading .blog-item.article::after{width:100%;height:180px;bottom:auto;background-position:right -10px bottom -14px;background-size:120px 120px}
}
@media (prefers-reduced-motion:reduce){
  #sp-component .article.blog-items{transition:none}
}

/* ============================================================
   FOOTER — footer pozisyonundaki Custom HTML modülü için
   (footer.html ile birlikte kullanılır)
   ============================================================ */
.spk-foot{max-width:1180px;margin:0 auto;padding:46px 24px 10px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px;
  font-size:14px;color:var(--spk-muted);line-height:1.7}
.spk-foot img{height:40px;width:auto;margin-bottom:12px}
.spk-foot p{margin:0 0 10px;max-width:34ch}
.spk-foot h5{color:var(--spk-ink);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  margin:0 0 14px;font-weight:700}
.spk-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.spk-foot a{color:var(--spk-muted);text-decoration:none;transition:color .15s}
.spk-foot a:hover{color:var(--spk-brand)}
.spk-foot-bottom{border-top:1px solid var(--spk-line);margin-top:20px}
.spk-foot-bottom .in{max-width:1180px;margin:0 auto;padding:16px 24px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--spk-faint)}
@media (max-width:860px){.spk-foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.spk-foot{grid-template-columns:1fr}}

/* ============================================================
   HEADER / ÜST ŞERİT düzenlemeleri
   ============================================================ */
/* Üst dark şerit TAMAMEN kaldırıldı (sosyal + telefon + e-posta) */
#sp-top-bar{display:none!important}
/* "Sign In" / giriş linki kalksın */
#sp-header a[aria-label="Sign In"], #sp-header .signin-text,
#sp-header a[href*="login"]{display:none!important}
/* Hamburger (3 çizgi) MASAÜSTÜNDE kalksın (mobilde menü için kalır) */
@media (min-width:992px){
  #sp-header .offcanvas-toggler, #sp-header .burger-icon{display:none!important}
}

/* ============================================================
   ÜST INTRO ŞERİDİ + ALT ÜRÜN CTA (custom.js enjekte eder)
   ============================================================ */
.spk-intro{margin:24px 12px 26px;padding:48px 24px 40px;
  background:linear-gradient(180deg,#eaf1ff 0%,#f4f8ff 60%,#ffffff 100%);
  border:1px solid #dfe8fb;border-radius:20px}
.spk-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--spk-brand);text-transform:uppercase}
.spk-intro h1{font-size:clamp(28px,4vw,38px);line-height:1.1;margin:10px 0 8px;font-weight:800;letter-spacing:-.03em;color:var(--spk-ink)}
.spk-intro p{color:var(--spk-muted);max-width:62ch;margin:0;font-size:16.5px}

/* ortalanmış (KB tarzı) varyant */
.spk-intro-center{text-align:center}
.spk-intro-center p{margin-left:auto;margin-right:auto}
.spk-intro-center .spk-chips{justify-content:center}

/* arama kutusu */
.spk-search{display:flex;align-items:center;max-width:620px;margin:22px auto 0;
  background:#fff;border:1.5px solid var(--spk-line-strong);border-radius:14px;
  box-shadow:0 10px 30px -14px rgba(15,26,46,.18);overflow:hidden}
.spk-search .spk-search-ic{margin:0 6px 0 18px;flex:none;color:#94a3b8}
.spk-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-size:16.5px;padding:16px 10px;color:var(--spk-ink);-webkit-appearance:none}
.spk-search input::placeholder{color:#94a3b8}
.spk-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.spk-search button{border:0;cursor:pointer;align-self:stretch;padding:0 26px;
  font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--spk-brand),var(--spk-brand-2))}
.spk-search button:hover{filter:brightness(1.06)}
.spk-search:focus-within{border-color:var(--spk-brand);box-shadow:0 10px 30px -14px rgba(21,82,216,.4)}

.spk-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.spk-chips a{padding:8px 15px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--spk-line);
  color:var(--spk-muted);background:var(--spk-surface);text-decoration:none;transition:.15s}
.spk-chips a:hover{border-color:var(--spk-line-strong);color:var(--spk-ink)}
.spk-chips a.on{background:var(--spk-ink);color:#fff;border-color:var(--spk-ink)}

/* anasayfada eşleşme yoksa: tüm blogda aramaya davet (tıklanabilir) */
.spk-searchall{display:block;width:auto;margin:16px auto 6px;cursor:pointer;
  font-size:15.5px;font-weight:700;color:#fff;border:0;border-radius:12px;
  padding:14px 26px;background:linear-gradient(135deg,var(--spk-brand),var(--spk-brand-2));
  box-shadow:0 10px 24px -12px rgba(21,82,216,.5)}
.spk-searchall:hover{filter:brightness(1.06)}

@media(max-width:520px){.spk-search button{padding:0 16px}}

.spk-cta{max-width:1180px;margin:52px auto 0;padding:0 24px}
.spk-cta-in{background:linear-gradient(135deg,var(--spk-brand-2),var(--spk-brand));border-radius:18px;
  padding:34px 40px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;box-shadow:var(--spk-shadow-lift)}
.spk-cta h3{margin:0 0 6px;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#fff}
.spk-cta p{margin:0;opacity:.92}
.spk-cta .btn{display:inline-block;border-radius:10px;padding:14px 26px;font-weight:800;
  background:#fff;color:var(--spk-brand);text-decoration:none;white-space:nowrap}
.spk-cta .btn:hover{background:#eaf0ff}
@media(max-width:620px){.spk-cta-in{flex-direction:column;align-items:flex-start}}