/* ============================================================
   Soru-cevap sayfaları — Konsept C tema katmanı
   (c-sinav.css ve c-fransa.css üzerine biner)
   ============================================================ */

/* ---------- soru sayfası kahramanı ---------- */
.sq-hero{padding:52px 0 20px}
.sq-h1{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.02;letter-spacing:-.03em;
  margin:14px 0 26px;color:var(--ink,#141633);max-width:20ch}
/* Başlıkta vurgulanan kelime YAZI olduğu için tema renginin koyu eşi kullanılıyor
   (--sv zemin rengidir; krem üstünde yazı olarak okunmuyor). */
.sq-h1 .hl{color:var(--sv-metin,var(--sv,#2140F0))}

/* kısa cevap kutusu — sayfanın en önemli parçası */
.sq-kisa{position:relative;background:#fff;border:2px solid var(--ink,#141633);
  border-radius:24px;padding:30px 32px 28px;margin:10px 0 8px;max-width:76ch;
  box-shadow:8px 8px 0 var(--sv,#2140F0)}
.sq-kisa-tag{position:absolute;top:-14px;left:26px;background:var(--sv,#2140F0);
  color:var(--sv-on,#fff);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border:2px solid var(--ink,#141633);border-radius:999px;transform:rotate(-2deg)}
.sq-kisa p{margin:0;font-size:1.14rem;line-height:1.75;color:#2A2D4A}
.sq-kisa b{color:var(--ink,#141633);background:linear-gradient(180deg,transparent 62%,rgba(255,197,49,.55) 62%)}
.sq-kisa i{font-style:italic;color:#3B3E5E}
@media(max-width:760px){
  .sq-kisa{padding:26px 20px 22px;box-shadow:5px 5px 0 var(--sv,#2140F0)}
  .sq-kisa p{font-size:1.04rem}
}

/* ---------- gövde metni ---------- */
.sq-p{font-size:1.07rem;line-height:1.78;color:#3B3E5E;max-width:70ch;margin:0 0 16px}
.sq-p i{font-style:italic;color:var(--ink,#141633)}
.sq-liste{list-style:none;padding:0;margin:18px 0 6px;max-width:74ch;display:grid;gap:12px}
.sq-liste li{position:relative;padding:14px 18px 14px 46px;background:#fff;
  border:2px solid rgba(20,22,51,.12);border-radius:16px;
  font-size:1.03rem;line-height:1.65;color:#3B3E5E}
.sq-liste li::before{content:"";position:absolute;left:18px;top:22px;width:12px;height:12px;
  background:var(--sv,#2140F0);border:2px solid var(--ink,#141633);border-radius:4px;transform:rotate(12deg)}
.sq-liste li b{color:var(--ink,#141633)}
.sq-liste li i{font-style:italic}

/* ---------- dürüstlük uyarısı ---------- */
.sq-uyari{display:flex;gap:18px;align-items:flex-start;max-width:76ch;
  background:rgba(255,197,49,.16);border:2px dashed rgba(20,22,51,.28);
  border-radius:20px;padding:22px 26px}
.sq-uyari-ik{flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:var(--ink,#141633);color:#FFC531;border-radius:50%;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem}
.sq-uyari p{margin:0;font-size:1rem;line-height:1.7;color:#2A2D4A}
@media(max-width:600px){.sq-uyari{flex-direction:column;gap:12px;padding:20px}}

/* ---------- diğer sorular kutusu ---------- */
.sq-diger{margin-top:34px;background:#fff;border:2px solid var(--ink,#141633);
  border-radius:22px;padding:26px 28px;box-shadow:6px 6px 0 rgba(20,22,51,.12)}
.sq-diger h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.2rem;margin:0 0 14px;color:var(--ink,#141633)}
.sq-diger ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px}
.sq-diger li a{color:#3B3E5E;font-size:1.02rem;line-height:1.5;
  text-decoration:none;border-bottom:2px solid rgba(33,64,240,.2);transition:.18s}
.sq-diger li a:hover{color:var(--ink,#141633);border-bottom-color:#2140F0}
.sq-tumu{display:inline-flex;align-items:center;gap:8px;font-weight:800;
  color:#2140F0;text-decoration:none}
.sq-tumu i{font-style:normal;transition:transform .2s}
.sq-tumu:hover i{transform:translateX(4px)}

/* ---------- liste (hub) sayfası ---------- */
.sq-hub-hero{padding:56px 0 12px}
.sq-hub-hero .sv-lead{max-width:66ch}
/* konu grupları */
.sq-grup{margin-bottom:56px}
.sq-grup:last-child{margin-bottom:0}
.sq-grup-bas{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 16px;
  margin:0 0 22px;padding-bottom:14px;border-bottom:2px solid rgba(20,22,51,.14)}
.sq-grup-bas h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin:0;color:var(--ink,#141633)}
.sq-grup-bas p{margin:0;flex:1;min-width:220px;font-size:.98rem;line-height:1.55;color:#5A5D7C}
.sq-grup-say{flex:none;background:var(--ink,#141633);color:#fff;font-weight:800;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
@media(max-width:600px){.sq-grup{margin-bottom:42px}.sq-grup-bas{gap:8px}}

/* Bölüm atlama menüsü (sayfanın üstü).
   Sayfa 9 konu bloğu ve 30 ekrandan uzun; menü olmadan "Sınavlar" bölümüne
   ulaşmak için yaklaşık 20 ekran kaydırmak gerekiyordu. Telefonda tek satırda
   yatay kaydırılıyor, masaüstünde alt alta sarıyor. Hiçbir içerik gizlenmiyor. */
.sq-atlama{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 6px;padding:0}
.sq-atlama a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:9px 15px;background:#fff;border:2px solid var(--ink,#141633);border-radius:999px;
  color:var(--ink,#141633);text-decoration:none;font-weight:700;font-size:.92rem;
  box-shadow:3px 3px 0 var(--ink,#141633);transition:transform .18s,box-shadow .18s}
.sq-atlama a:hover,.sq-atlama a:focus-visible{transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--sv,#2140F0)}
.sq-atlama a b{font-size:.76rem;font-weight:800;padding:2px 8px;border-radius:999px;
  background:var(--ink,#141633);color:#fff}
@media(max-width:640px){
  /* telefonda sarmak yerine tek satır: menü 4 satır yer kaplıyordu */
  .sq-atlama{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding-bottom:8px}
  .sq-atlama a{flex:none;scroll-snap-align:start}
}
/* Çapaya atlayınca başlık üstteki yapışkan menünün altında kalmasın */
.sq-grup{scroll-margin-top:86px}

.sq-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px}
.sq-kart{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:2px solid var(--ink,#141633);border-radius:24px;
  padding:28px 26px 24px;color:var(--ink,#141633);text-decoration:none;
  box-shadow:6px 6px 0 var(--ink,#141633);transition:transform .22s,box-shadow .22s}
.sq-kart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--sv,#2140F0)}
.sq-kart:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--sv,#2140F0)}
.sq-kart-etiket{align-self:flex-start;background:var(--sv,#2140F0);color:var(--sv-on,#fff);
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;border:2px solid var(--ink,#141633);margin-bottom:14px}
.sq-kart h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.32rem;line-height:1.18;margin:0 0 10px;letter-spacing:-.015em}
.sq-kart p{flex:1;font-size:.97rem;line-height:1.62;color:#5A5D7C;margin:0 0 16px}
.sq-kart-go{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;color:#2140F0}
.sq-kart-go i{font-style:normal;transition:transform .2s}
.sq-kart:hover .sq-kart-go i{transform:translateX(4px)}
@media(max-width:600px){
  .sq-kart{padding:24px 20px 20px;box-shadow:4px 4px 0 var(--ink,#141633)}
  .sq-kartlar{grid-template-columns:1fr}
}