/* ============================================================================
 * IEEE Bilkent — "Hangi Alt Kola Aitsin?" testi — stiller
 * ----------------------------------------------------------------------------
 * Renkler, tipografi ve düğme biçimi ieee.bilkent.edu.tr'den alınmıştır.
 * Düzenlemek için aşağıdaki AYAR bloğuna bakın.
 *
 * DİKKAT — iki katmanlı yapı:
 *   1) SIFIRLAMA  .ieeeq h1 / .ieeeq p ...   (özgüllük 0,1,1)
 *      Temanın h1{color:#1C2930} gibi doğrudan etiket kurallarını yener.
 *   2) BİLEŞENLER .ieeeq .ieeeq__q ...        (özgüllük 0,2,0)
 *      Sıfırlamanın üstüne yazar.
 * Bileşen kurallarının başındaki ".ieeeq " ön ekini silmeyin; silerseniz
 * sıfırlama katmanı kazanır ve arka planlar/kenarlıklar kaybolur.
 *
 * KOYU TEMA YOK — BİLEREK. Site tek temalıdır; ziyaretçinin işletim sistemi
 * koyu moddayken bile açık kalır. Buraya prefers-color-scheme bloğu eklemeyin.
 * ========================================================================== */

/* ------------------------------------------------------------- AYAR: RENKLER */
.ieeeq{
  --q-ink:#1c2930;        /* ana metin (site: contrast) */
  --q-slate:#37505d;      /* başlık / ikincil (site: contrast-2) */
  --q-muted:#5f879d;      /* soluk metin */
  --q-ground:#ebebef;     /* sayfa zemini (site: base) */
  --q-surface:#ffffff;    /* kart yüzeyi */
  --q-tint:#e3e7ec;       /* hafif dolgu */
  --q-line:#cfd6dd;       /* kenarlık */
  --q-accent:#25637a;     /* IEEE Bilkent teal */
  --q-accent-deep:#1a4a5d;
  --q-sky:#8ed1fc;        /* açık mavi vurgu (site: pale-cyan-blue) */
  --q-sky-soft:#e9f4fc;
  --q-on-accent:#ffffff;

  --q-r:4px;              /* köşe yuvarlaklığı — tema da 4px kullanır */
  --q-shadow:0 1px 2px rgba(28,41,48,.04), 0 16px 36px -26px rgba(28,41,48,.4);

  color:var(--q-ink);
  background:transparent;
  font-family:"Jost","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:4px 0 32px;
}

/* ------------------------------------------------------- 1) SIFIRLAMA KATMANI */
.ieeeq *,.ieeeq *::before,.ieeeq *::after{box-sizing:border-box}
.ieeeq [hidden]{display:none !important}

.ieeeq h1,.ieeeq h2,.ieeeq h3,.ieeeq h4,.ieeeq p,.ieeeq span,.ieeeq div,
.ieeeq ul,.ieeeq ol,.ieeeq li,.ieeeq a,.ieeeq b,.ieeeq strong,.ieeeq em,
.ieeeq button,.ieeeq table,.ieeeq tr,.ieeeq td,.ieeeq th,.ieeeq svg{
  color:inherit; font-family:inherit; font-size:inherit; font-weight:inherit;
  font-style:normal; line-height:inherit; letter-spacing:normal;
  text-transform:none; text-align:inherit; text-decoration:none; text-shadow:none;
  background:none; border:0; border-radius:0; box-shadow:none;
  margin:0; padding:0; float:none; max-width:none; min-height:0;
  list-style:none; text-indent:0;
}
.ieeeq li::marker,.ieeeq li::before{content:none}
.ieeeq button{cursor:pointer;-webkit-appearance:none;appearance:none}
.ieeeq img{max-width:100%;height:auto;display:block;border:0;box-shadow:none;margin:0}
.ieeeq :focus-visible{outline:2px solid var(--q-accent);outline-offset:3px}

/* ------------------------------------------------------ 2) BİLEŞEN KATMANI */
.ieeeq .ieeeq__shell{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:26px}

/* --- ortak tipografi --- */
.ieeeq h1,.ieeeq .ieeeq__q,.ieeeq .ieeeq__name,.ieeeq .ieeeq__name2{
  font-family:"EB Garamond","Iowan Old Style",Georgia,serif;
  font-weight:500;letter-spacing:.005em;text-wrap:balance;color:var(--q-ink);
}
.ieeeq .ieeeq__eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--q-accent);
}

/* --- üst şerit --- */
.ieeeq .ieeeq__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ieeeq .ieeeq__mark{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--q-accent);
}
.ieeeq .ieeeq__mark::before{content:"";width:16px;height:3px;background:var(--q-sky)}
.ieeeq .ieeeq__step{
  margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--q-muted);font-variant-numeric:tabular-nums;
}
.ieeeq .ieeeq__rail{flex:0 0 100%;height:4px;background:var(--q-tint);border-radius:99px;overflow:hidden}
.ieeeq .ieeeq__fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--q-accent),#3d84a0);
  transition:width .36s cubic-bezier(.4,0,.2,1);
}

/* --- giriş --- */
.ieeeq .ieeeq__hero{
  background:var(--q-surface);border:1px solid var(--q-line);
  border-top:3px solid var(--q-accent);border-radius:var(--q-r);
  box-shadow:var(--q-shadow);padding:clamp(26px,5vw,44px);
  display:flex;flex-direction:column;gap:20px;
}
.ieeeq h1{font-size:clamp(36px,7.4vw,58px);line-height:1.04;margin-top:2px}
.ieeeq .ieeeq__lede{color:var(--q-slate);max-width:48ch;font-size:18px;line-height:1.55}

.ieeeq .ieeeq__strip{
  background:var(--q-sky-soft);border:1px solid #d8e8f4;border-radius:var(--q-r);
  padding:18px 20px;display:flex;flex-direction:column;gap:14px;
}
.ieeeq .ieeeq__striplabel{
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--q-accent);
}
.ieeeq .ieeeq__logos{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.ieeeq .ieeeq__logos img{height:26px;width:auto;opacity:.68;filter:grayscale(1)}

.ieeeq .ieeeq__meta{
  display:flex;gap:0;flex-wrap:wrap;font-size:14px;color:var(--q-muted);
  border-top:1px solid var(--q-line);padding-top:16px;
}
.ieeeq .ieeeq__meta span{padding-right:22px;margin-right:22px;border-right:1px solid var(--q-line)}
.ieeeq .ieeeq__meta span:last-child{border-right:0;margin-right:0;padding-right:0}
.ieeeq .ieeeq__meta b{color:var(--q-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* --- düğmeler (temanın kendi düğme biçimiyle aynı: büyük harf, aralıklı) --- */
.ieeeq .ieeeq__cta,
.ieeeq .ieeeq__btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Jost",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:15px 30px;border-radius:var(--q-r);
  transition:background .16s,color .16s,border-color .16s,transform .12s,box-shadow .16s;
}
.ieeeq .ieeeq__cta{
  align-self:flex-start;
  background:var(--q-accent);color:var(--q-on-accent);
  border:1px solid var(--q-accent);
  box-shadow:0 2px 0 0 var(--q-accent-deep);
}
.ieeeq .ieeeq__cta:hover{background:var(--q-accent-deep);border-color:var(--q-accent-deep);transform:translateY(-1px);box-shadow:0 3px 0 0 #123846}
.ieeeq .ieeeq__cta:active{transform:translateY(1px);box-shadow:0 0 0 0 var(--q-accent-deep)}
.ieeeq .ieeeq__btn2{
  background:var(--q-surface);color:var(--q-slate);border:1px solid var(--q-slate);
}
.ieeeq .ieeeq__btn2:hover{background:var(--q-slate);color:#fff}
.ieeeq .ieeeq__cta[disabled],.ieeeq .ieeeq__btn2[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.ieeeq .ieeeq__ghost{
  color:var(--q-muted);font-size:14px;font-weight:500;padding:6px 2px;
  border-bottom:1px solid var(--q-line);
}
.ieeeq .ieeeq__ghost:hover{color:var(--q-accent);border-bottom-color:var(--q-accent)}

/* --- soru --- */
.ieeeq .ieeeq__qhead{display:flex;align-items:baseline;gap:14px}
.ieeeq .ieeeq__qnum{
  font-family:"EB Garamond",Georgia,serif;font-size:52px;line-height:1;font-weight:500;
  color:var(--q-sky);font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.ieeeq.ieeeq--bonus .ieeeq__qnum{font-size:34px;color:var(--q-accent)}
.ieeeq .ieeeq__qkicker{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--q-accent);
}
.ieeeq .ieeeq__q{font-size:clamp(25px,4.8vw,34px);line-height:1.22;margin-top:14px}

/* --- soru görseli (MP4) ---
   Videolar farklı en–boy oranlarında olduğu için sabit yükseklikte bir şerit
   kullanıyoruz: kırpma yok, sorudan soruya zıplama yok. */
.ieeeq .ieeeq__media{
  margin-top:24px;height:230px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;
}
.ieeeq .ieeeq__media.is-ready{opacity:1}
.ieeeq .ieeeq__video{
  height:100%;width:auto;max-width:100%;object-fit:contain;display:block;
  border-radius:var(--q-r);border:1px solid var(--q-line);background:var(--q-tint);
}
@media (prefers-reduced-motion:reduce){
  .ieeeq .ieeeq__media{transition:none;opacity:1}
}

.ieeeq .ieeeq__opts{display:flex;flex-direction:column;gap:9px;margin-top:26px}
.ieeeq .ieeeq__opt{
  width:100%;display:flex;align-items:center;gap:16px;
  background:var(--q-surface);color:var(--q-ink);
  border:1px solid var(--q-line);border-radius:var(--q-r);
  padding:16px 18px;font-size:16.5px;line-height:1.45;text-align:left;
  box-shadow:0 1px 2px rgba(28,41,48,.04);
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
.ieeeq .ieeeq__opt:hover,.ieeeq .ieeeq__opt[aria-pressed="true"]{
  border-color:var(--q-accent);background:var(--q-sky-soft);
  transform:translateX(3px);box-shadow:0 2px 10px -4px rgba(37,99,122,.4);
}
.ieeeq .ieeeq__key{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--q-tint);display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:var(--q-slate);transition:all .15s;
}
.ieeeq .ieeeq__opt:hover .ieeeq__key,.ieeeq .ieeeq__opt[aria-pressed="true"] .ieeeq__key{
  background:var(--q-accent);color:var(--q-on-accent);
}
.ieeeq .ieeeq__optxt{flex:1;min-width:0}
.ieeeq .ieeeq__chev{
  flex:0 0 auto;color:var(--q-accent);font-size:17px;opacity:0;
  transform:translateX(-4px);transition:opacity .15s,transform .15s;
}
.ieeeq .ieeeq__opt:hover .ieeeq__chev{opacity:1;transform:translateX(0)}

.ieeeq .ieeeq__anim{animation:ieeeq-in .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes ieeeq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ieeeq .ieeeq__anim{animation:none}
  .ieeeq .ieeeq__fill{transition:none}
  .ieeeq .ieeeq__opt:hover{transform:none}
  .ieeeq .ieeeq__cta:hover{transform:none}
}

/* --- sonuç: ana kart --- */
.ieeeq .ieeeq__primary{
  background:var(--q-accent);color:var(--q-on-accent);border-radius:var(--q-r);
  padding:clamp(26px,5vw,40px);box-shadow:0 20px 44px -30px rgba(26,74,93,.9);
  display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;
}
.ieeeq .ieeeq__primary::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--q-sky);
}
.ieeeq .ieeeq__primary .ieeeq__name,.ieeeq .ieeeq__primary p{color:var(--q-on-accent)}
.ieeeq .ieeeq__kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--q-sky);
}
.ieeeq .ieeeq__tile{
  background:#fff;border-radius:var(--q-r);padding:14px 18px;align-self:flex-start;
  display:flex;align-items:center;min-height:62px;
}
.ieeeq .ieeeq__tile img{height:40px;width:auto}
.ieeeq .ieeeq__name{font-size:clamp(32px,6.4vw,48px);line-height:1.06}
.ieeeq .ieeeq__primary p{opacity:.95;max-width:46ch;font-size:16.5px;line-height:1.6}

/* --- sonuç: keşif kartı --- */
.ieeeq .ieeeq__secondary{
  background:var(--q-surface);border:1px solid var(--q-line);
  border-left:3px solid var(--q-accent);border-radius:var(--q-r);
  padding:22px clamp(18px,3.6vw,28px);display:flex;gap:20px;align-items:flex-start;
  box-shadow:0 1px 2px rgba(28,41,48,.04);
}
.ieeeq .ieeeq__sideimg{flex:0 0 58px;display:grid;place-items:center;padding-top:4px}
.ieeeq .ieeeq__sideimg img{max-height:42px;width:auto}
.ieeeq .ieeeq__sidebody{display:flex;flex-direction:column;gap:8px;min-width:0}
.ieeeq .ieeeq__kicker2{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--q-muted);
}
.ieeeq .ieeeq__name2{font-size:clamp(20px,3.6vw,25px);line-height:1.22;color:var(--q-slate)}
.ieeeq .ieeeq__secondary p{color:var(--q-muted);font-size:16px;max-width:50ch;line-height:1.55}

/* --- sonuç: eylemler --- */
.ieeeq .ieeeq__actions{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding-top:4px;
}
.ieeeq .ieeeq__note{
  font-size:13.5px;color:var(--q-muted);max-width:58ch;line-height:1.55;
  border-top:1px solid var(--q-line);padding-top:16px;
}
.ieeeq .ieeeq__toast{font-size:13px;color:var(--q-accent);font-weight:600;opacity:0;transition:opacity .2s}
.ieeeq .ieeeq__toast.is-on{opacity:1}

/* logo yüklenemezse gösterilen kısa ad rozeti */
.ieeeq .ieeeq__mono{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--q-muted);border:1px solid var(--q-line);border-radius:2px;padding:3px 8px;
}
.ieeeq .ieeeq__tile .ieeeq__mono{color:var(--q-accent);border-color:#cfe3ee;font-size:14px;letter-spacing:.14em}
.ieeeq .ieeeq__sideimg .ieeeq__mono{border:0;padding:0;text-align:center;white-space:normal}

/* --- test modu --- */
.ieeeq .ieeeq__debug{
  border:1px dashed var(--q-line);border-radius:var(--q-r);padding:16px;
  background:var(--q-surface);font-size:13px;overflow-x:auto;color:var(--q-ink);
}
.ieeeq .ieeeq__debug h3{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--q-muted);
  margin-bottom:10px;font-family:"Jost",sans-serif;font-weight:600;
}
.ieeeq .ieeeq__debug table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.ieeeq .ieeeq__debug td{padding:4px 10px 4px 0;border-bottom:1px solid var(--q-line)}
.ieeeq .ieeeq__debug td:last-child{text-align:right;font-weight:600}
.ieeeq .ieeeq__debug p{margin-top:10px;color:var(--q-muted)}

@media (max-width:600px){
  .ieeeq .ieeeq__media{height:170px}
  .ieeeq .ieeeq__qnum{font-size:38px}
  .ieeeq .ieeeq__secondary{flex-direction:column;gap:12px}
  .ieeeq .ieeeq__sideimg{flex:0 0 auto;justify-items:start}
  .ieeeq .ieeeq__cta,.ieeeq .ieeeq__btn2{width:100%}
}