/* =======================================================
   İSG Sınav — Public (Ziyaretçi) Arayüz CSS (CLEAN + FINAL)
   - Root alan (/ ve public sayfalar) için kullanılır.
   - Bootstrap grid (container, row, col-*) burada override edilmez.
   ======================================================= */


/* =======================================================
   0) Tasarım Token'ları
   ======================================================= */
:root{
  --pub-navH: 64px;
  --pub-card-br: 12px;
  --pub-muted: #6c757d;
  --pub-bg-soft: #f8f9fa;
  --pub-border: rgba(15,23,42,.10);

  --pub-shadow-sm: 0 6px 16px rgba(2,6,23,.06);
  --pub-shadow-md: 0 18px 40px rgba(2,6,23,.08);
  --pub-shadow-lg: 0 28px 90px rgba(2,6,23,.12);

  --pub-tap: 44px; /* mobil dokunma hedefi */
}


/* =======================================================
   1) Navbar + Main boşlukları
   ======================================================= */
.navbar_public + main#public-home,
.navbar_public + main#public-topics,
.navbar_public + main#public-topic,
.navbar_public + main#public-topic-hub{
  padding-top: 0 !important;
}

main#public-home{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Konu içerik alanlarında link görünürlüğü */
.topic-content a{
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =======================================================
   2) Ana Sayfa Scope Değişkenleri
   ======================================================= */
#public-home{
  --hero-gap: 6px;
  --navH: var(--pub-navH);
  --card-br: var(--pub-card-br);
  --muted: var(--pub-muted);
}

#public-home .navbar{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}


/* =======================================================
   3) Hero (Carousel)
   ======================================================= */
#public-home .hero-public{
  position: relative;
  width: 100%;
  margin: var(--hero-gap) 0 0 0 !important;
  padding: 0 !important;
  background: #f5f6f8;
  overflow: hidden;
}

#public-home .hero-public img{
  display:block;
  width:100%;
  height:auto;
}

#public-home .hero-public .hero-slide{
  padding: 32px 0 40px;
}

@media (max-width: 991.98px){
  #public-home .hero-public .hero-slide{
    padding: 24px 0 32px;
  }
}

/* Hero CTA */
#public-home .hero-copy-topic .hero-cta,
#public-home .hero-copy-gds .hero-cta,
#public-home .hero-copy-audio .hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}

#public-home .hero-copy-topic .hero-cta .btn + .btn,
#public-home .hero-copy-gds .hero-cta .btn + .btn,
#public-home .hero-copy-audio .hero-cta .btn + .btn{
  margin-left: .5rem;
}

@media (max-width: 576px){
  #public-home .hero-copy-topic .hero-cta,
  #public-home .hero-copy-gds .hero-cta,
  #public-home .hero-copy-audio .hero-cta{
    flex-direction:column;
  }
  #public-home .hero-copy-topic .hero-cta .btn,
  #public-home .hero-copy-gds .hero-cta .btn,
  #public-home .hero-copy-audio .hero-cta .btn{
    width:100%;
    min-height: var(--pub-tap);
  }
  #public-home .hero-copy-topic .hero-cta .btn + .btn,
  #public-home .hero-copy-gds .hero-cta .btn + .btn,
  #public-home .hero-copy-audio .hero-cta .btn + .btn{
    margin-left: 0;
    margin-top: .5rem;
  }
}


/* =======================================================
   4) Hero arka planları (Section uyumlu)
   ======================================================= */
.hero-bg-topic{
  background:
    radial-gradient(1100px 420px at 15% 20%, rgba(253,224,71,.18), transparent 60%),
    radial-gradient(900px 380px at 85% 15%, rgba(125,211,252,.28), transparent 55%),
    linear-gradient(180deg, rgba(255,247,237,.55), rgba(255,255,255,1));
  background-clip: padding-box;
}

.hero-bg-gds{
  background: linear-gradient(90deg,
    #eaf7ff 0%,
    #f1f3ff 45%,
    #ffe6f0 100%
  );
  background-clip: padding-box;
}

.hero-bg-audio{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(125,211,252,.30), transparent 60%),
    radial-gradient(900px 380px at 85% 15%, rgba(167,139,250,.24), transparent 55%),
    linear-gradient(180deg, rgba(240,249,255,.65), rgba(255,255,255,1));
  background-clip: padding-box;
}


/* =======================================================
   5) Section genel düzen
   ======================================================= */
#public-home .section-wrap{ padding:40px 0; }

#public-home .sec-head{ margin-bottom:12px; }
#public-home .sec-head > *:first-child{ margin-bottom:0; }

#public-home .sec-lead{
  color:var(--muted);
  margin-bottom:16px;
}

#public-home .anchor-section{
  scroll-margin-top: calc(var(--navH) + 12px);
}


/* =======================================================
   6) Grid + Kartlar (genel)
   ======================================================= */
#public-home .feat-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(3,1fr);
}
@media (max-width: 992px){
  #public-home .feat-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 576px){
  #public-home .feat-grid{ grid-template-columns: 1fr; }
}

#public-home .feat-card{
  display:block;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--pub-card-br);
  padding:14px 16px;
  text-decoration:none;
  color:inherit;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}
#public-home .feat-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--pub-shadow-sm);
  border-color:rgba(0,0,0,.12);
  background-color:#ffffff;
}
#public-home .feat-card h3{
  font-size:1rem;
  margin:0 0 6px;
}
#public-home .feat-card p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}


/* =======================================================
   7) PREZI SAHNESİ (SINIF SEÇİMİ) — FINAL
   ======================================================= */
.prezi-wrap{ margin-top: 10px; }

.prezi-stage{
  position: relative;
  height: 560px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.62);
  box-shadow: var(--pub-shadow-lg);
  overflow: hidden;
}

/* Arka plan ışık hissi */
.prezi-stage::before{
  content:"";
  position:absolute; inset:-45%;
  background:
    radial-gradient(closest-side at 22% 35%, rgba(125,211,252,.26), transparent 62%),
    radial-gradient(closest-side at 78% 22%, rgba(167,139,250,.18), transparent 62%),
    radial-gradient(closest-side at 70% 82%, rgba(250,204,21,.14), transparent 62%);
  transform: rotate(-10deg);
  z-index: 0;
}

/* SVG çizgiler — siyah kalın çizgi sorununu kesin çözer */
.prezi-lines{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.prezi-lines path{
  fill:none;
  stroke: rgba(15,23,42,.16);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  opacity: .75;
}

/* HUB (chip'ler yok, kompakt) */
.prezi-hub{
  position:absolute;
  left:50%;
  top:48%;
  transform: translate(-50%,-50%);
  z-index: 3;
  width: min(360px, 92%);
  text-align:center;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 48px rgba(2,6,23,.14);
}

.hub-title{
  font-weight: 900;
  color: rgba(15,23,42,.95);
  font-size: 1.15rem;
}

.hub-sub{
  margin-top: 2px;
  color: rgba(51,65,85,.85);
  font-size: 14px;
}

/* Node */
.prezi-node{
  position:absolute;
  z-index:4;
  width: 340px;
  text-decoration:none;
}

.node-bubble{
  padding: 16px 16px 14px;
  border-radius: 26px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(2,6,23,.16);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prezi-node:hover .node-bubble{
  transform: translateY(-3px) scale(1.035);
  box-shadow: 0 30px 88px rgba(2,6,23,.22);
  border-color: rgba(37,99,235,.24);
}

.node-ico{ width: 56px; height: 56px; }
.ico-bubble{ width: 56px; height: 56px; display:block; }

.node-title{ margin-top: 8px; font-weight: 900; color: rgba(15,23,42,.95); }
.node-desc{ margin-top: 4px; color: rgba(51,65,85,.92); }

.node-tags{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.node-tags span{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
}

.node-cta{ margin-top: 10px; font-weight: 900; color: rgba(37,99,235,1); }

/* YERLEŞİM (İYH için alan açıldı) */
.node-igu{ left: 6%;  top: 62%; transform: translateY(-50%) rotate(-1deg); }
.node-iyh{ left: 68%; top: 32%; transform: translateY(-50%) rotate(1deg); }
.node-dsp{ left: 66%; top: 78%; transform: translateY(-50%) rotate(-.5deg); }

/* Mobil: stack (çakışma yok) */
@media (max-width: 992px){
  .prezi-stage{ height:auto; padding:16px; }
  .prezi-stage::before, .prezi-lines{ display:none; }
  .prezi-hub{ position:static; transform:none; width:100%; margin-bottom:12px; }
  .prezi-node{ position:static; width:100%; margin-bottom:12px; transform:none !important; }
}


/* =======================================================
   8) GDS (Kart + Görsel)
   ======================================================= */
.gds-grid { gap: 16px; }

.gds-card { overflow: hidden; border-radius: 16px; }

.gds-media { margin: 0 0 12px 0; border-radius: 14px; overflow: hidden; }

.gds-ratio{
  border-radius: 14px;
  overflow: hidden;
  background: #f3f5f7;
}

.gds-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}

.gds-card:hover .gds-thumb{ transform: scale(1.03); }


/* =======================================================
   9) Sesli Sorular bölümü
   ======================================================= */
.audio-hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: center;
}

.audio-copy .sec-lead{ max-width: 64ch; }

.audio-bullets{
  margin: 14px 0 18px;
  padding-left: 18px;
  color: rgba(15,23,42,.85);
}
.audio-bullets li{ margin: 8px 0; line-height: 1.55; }

.audio-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}

.audio-actions .btn{
  min-height: var(--pub-tap);
}

.audio-actions .btn-outline{
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.92);
}

.feat-grid-compact{ margin-top: 10px; }
.feat-grid-compact .feat-card{
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  background: rgba(255,255,255,.92);
}
.feat-grid-compact .feat-card h3{ margin-bottom: 6px; }

.audio-visual{
  position: relative;
  display: grid;
  align-content: center;
}

.audio-tags{
  position: absolute;
  top: -10px;
  left: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}
.audio-tags .tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
  backdrop-filter: blur(6px);
}

.audio-illus-img{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 50px rgba(2,6,23,.14);
  background: #fff;
}

@media (max-width: 992px){
  .audio-hero{ grid-template-columns: 1fr; }
  .audio-visual{ order: -1; }
  .audio-illus-img{ max-width: 100%; }
}

/* Audio bölümündeki sağ görsel: kırpılma/zoom'u engelle */
.audio-illus-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;   /* cover ise kırpar; contain sığdırır */
  object-position: center;
}

.audio-visual{
  overflow: visible; /* hidden ise kırpabilir */
}

/* =======================================================
   10) Topics sayfaları / hub / içerik / qbank
   ======================================================= */
main#public-topics{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#public-topics .section-wrap{ padding:24px 0 40px; }

#public-topics .sec-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  justify-content: space-between;
}

#public-topics .card{
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-card-br);
}
#public-topics a.card{ color: inherit; }
#public-topics a.card:hover{
  box-shadow: var(--pub-shadow-sm);
  border-color: rgba(13,110,253,.20);
}
#public-topics a.card:focus,
#public-topics a.card:focus-visible{
  outline: 2px solid rgba(13,110,253,.25);
  outline-offset: 2px;
}

/* Topic hub */
#public-topic-hub .section-wrap{ padding:24px 0 40px; }

#public-topic-hub .hub-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--pub-card-br);
  min-height: 84px;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
#public-topic-hub .hub-card:focus,
#public-topic-hub .hub-card:focus-visible{
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}
@media (hover:hover) {
  #public-topic-hub .hub-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    border-color: rgba(13,110,253,.25);
  }
}

/* Topic content */
#public-topic .section-wrap{ padding:24px 0 40px; }

#public-topic .topic-sticky-bar{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--pub-bg-soft);
  padding: .75rem 0;
  border-bottom: 1px solid var(--pub-border);
}

#public-topic .back-to-hub{
  min-height: var(--pub-tap);
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}

#public-topic .topic-content{
  line-height: 1.6;
  font-size: 1rem;
}
#public-topic .topic-content h1,
#public-topic .topic-content h2,
#public-topic .topic-content h3{
  scroll-margin-top: calc(var(--pub-navH) + 16px);
}

#public-topic .topic-content table{ max-width: 100%; }
#public-topic .topic-content img{ max-width: 100%; height: auto; }

@media (max-width: 576px){
  #public-topic .topic-content{ font-size: .98rem; }
}

/* QBank */
#public-topic-qbank .topic-sticky-bar{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--pub-bg-soft);
  padding: .75rem 0;
  border-bottom: 1px solid var(--pub-border);
}

#public-topic-qbank .choice-btn{
  text-align: left;
  min-height: var(--pub-tap);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  white-space: normal;
}
#public-topic-qbank .choice-code{
  font-weight: 700;
  min-width: 1.4rem;
}

#public-topic-qbank .choice-btn.is-correct{
  background-color: rgba(25,135,84,.12) !important;
  border-color: #198754 !important;
  color: #0f5132 !important;
}
#public-topic-qbank .choice-btn.is-wrong{
  background-color: rgba(220,53,69,.12) !important;
  border-color: #dc3545 !important;
  color: #842029 !important;
}
#public-topic-qbank .choice-btn:disabled{
  opacity: 1;
  cursor: not-allowed;
}


/* =======================================================
   11) Erişilebilirlik / Focus
   ======================================================= */
a:focus-visible,
button:focus-visible{
  outline: 2px solid rgba(13,110,253,.25);
  outline-offset: 2px;
}

.btn{
  min-height: var(--pub-tap);
}
/* =======================================================
   FIX: Mobil carousel metinleri sola yapışmasın
   ======================================================= */
@media (max-width: 576px){
  /* Hero metin kutularına güvenli iç boşluk */
  #public-home .hero-copy-topic,
  #public-home .hero-copy-gds,
  #public-home .hero-copy-audio{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Başlık/Metin satırları ekrana yapışmasın */
  #public-home .hero-title,
  #public-home .hero-text,
  #public-home .hero-eyebrow{
    padding-left: 2px;
    padding-right: 2px;
  }
}