/* =========================================================
   PREMIUM MODERN CATALOG - SOFT MIDNIGHT EDITION (FIXED)
   - 'ş' kırpılması yok
   - Pill üstte, başlık alt satırda (yan yana binme yok)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

:root{
  --brand-blue:#0a192f;
  --accent-gold:#d6b15e;
  --gold-glow:rgba(214,177,94,.2);
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.1);
  --text-main:#f8fafc;
  --text-muted:#94a3b8;
}

.sc-hero,.sc-body{
  background-color:var(--brand-blue)!important;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--text-main);
  position:relative;
  overflow:hidden;
}

/* Arka plandaki ışık süzmeleri */
.sc-hero::before,.sc-body::after{
  content:"";
  position:absolute;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(17,94,163,.15) 0%,transparent 70%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.sc-hero::before{ top:-200px; right:-100px; }
.sc-body::after{ bottom:-200px; left:-100px; }

.container{ position:relative; z-index:1; }

/* --- HERO --- */
.sc-hero{
  padding:100px 0 50px;
  text-align:center;
}

.sc-pill{
  display:inline-flex;            /* inline-block yerine, daha stabil */
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  border-radius:12px;
  background:rgba(214,177,94,.08);
  border:1px solid rgba(214,177,94,.25);
  color:var(--accent-gold);
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:24px;
}

/* Başlık: Ş kırpılmasın + pill ile aynı satıra çıkmasın */
.sc-title{
  font-size:clamp(32px,5vw,64px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.18;

  display:block;                  /* ÖNEMLİ: inline-block DEĞİL */
  padding-bottom:.08em;           /* 'ş' gibi harfler için güvenli alan */
  overflow:visible;

  margin:0 0 20px;

  background:linear-gradient(to bottom,#fff 40%,#cbd5e1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.sc-lead{
  max-width:650px;
  margin:0 auto;
  font-size:19px;
  font-weight:400;
  color:var(--text-muted);
  line-height:1.7;
}

/* --- GRID / CARDS --- */
.sc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding-top:40px;
}

.sc-card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:28px;
  padding:45px 35px;
  backdrop-filter:blur(12px);
  transition:all .5s cubic-bezier(.2,1,.3,1);
  margin-bottom:15px;
  text-decoration: none !important;
  color: inherit;
   text-decoration: none !important;
}

.sc-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.07);
  border-color:rgba(214,177,94,.4);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}

.sc-no{
  font-size:13px;
  font-weight:700;
  color:var(--accent-gold);
  border-bottom:2px solid var(--accent-gold);
  display:inline-block;
  margin-bottom:25px;
  padding-bottom:5px;
}

.sc-card-title{
  font-size:24px;
  font-weight:700;
  margin-bottom:15px;
  color:#fff;
  letter-spacing:-0.01em;
}

.sc-card-text{
  font-size:15.5px;
  color:var(--text-muted);
  line-height:1.8;
  margin-bottom:0;
}

.sc-link{
  margin-top:25px;
  font-size:13px;
  font-weight:600;
  color:var(--accent-gold);
  display:flex;
  align-items:center;
  gap:10px;
  transition:.3s ease;
}

.sc-card:hover .sc-link{
  letter-spacing:.5px;
}
.sc-icon{
  position:absolute;
  top:28px;
  right:28px;

  font-size:34px;
  color:rgba(214,177,94,.9);

  opacity:.9;
  transition:.4s ease;
}

.sc-card:hover .sc-icon{
  transform:scale(1.08) rotate(-3deg);
  color:#ffd97a;
}

/* Responsive */
@media (max-width:1100px){
  .sc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .sc-grid{ grid-template-columns:1fr; }
}