@charset "UTF-8";
/* =====================================================================
   MÜFREDAT AKADEMİ — SINAV SAYACI  (R63)
   ---------------------------------------------------------------------
   Yeni görsel dil İCAT EDİLMEZ: renk, yarıçap, gölge ve yazı tipleri
   ma-ui.css token'larından (--mau-*) gelir. Token yoksa (eski sayfa) aynı
   değerler yedek olarak yazılıdır.
   Sınav türleri yalnızca küçük bir vurgu rengiyle ayrılır:
     data-accent="royal" → YKS (logonun kraliyet mavisi)
     data-accent="mint"  → LGS (sistemin nane yeşili)
   Koyu tema: sitede yok; sayaç için ayrıca KURULMADI. Sayaç koyu bir
   hero'nun içinde de beyaz kart olarak durur, kontrastı kendi taşır.
   ===================================================================== */

.mas{
  --mas-ink:var(--mau-ink,#0B1F3A);
  --mas-ink-2:var(--mau-ink-2,#33455F);
  --mas-ink-3:var(--mau-ink-3,#657590);
  --mas-line:var(--mau-line,#DEE6F2);
  --mas-line-2:var(--mau-line-2,#EBF0F8);
  --mas-paper:var(--mau-paper,#F6F8FC);
  --mas-accent:var(--mau-royal,#1552C8);
  --mas-accent-2:var(--mau-royal-100,#DCE7FF);
  --mas-accent-50:var(--mau-royal-50,#EEF3FF);
  --mas-accent-strong:var(--mau-royal,#1552C8);   /* küçük metin için AA kontrastlı ton */
  --mas-display:var(--mau-ff-display,'Sora','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif);
  --mas-body:var(--mau-ff-body,'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif);

  position:relative; isolation:isolate; overflow:hidden;
  container-type:inline-size;
  display:block; box-sizing:border-box;
  width:100%; max-width:560px;
  padding:18px 20px 0;
  background:#fff;
  border:1px solid var(--mas-line);
  border-radius:var(--mau-r-lg,20px);
  box-shadow:var(--mau-sh-2,0 6px 18px -6px rgba(11,31,58,.12),0 2px 6px rgba(11,31,58,.05));
  color:var(--mas-ink);
  font-family:var(--mas-body);
  text-align:left;
  line-height:1.5;
  letter-spacing:normal;
}
.mas *,.mas *::before,.mas *::after{ box-sizing:border-box; }
.mas p{ margin:0; }
.mas[data-accent="mint"]{
  --mas-accent:var(--mau-mint,#0E9E6E);
  --mas-accent-2:#BFE8D8;
  --mas-accent-50:var(--mau-mint-50,#E8F7F1);
  --mas-accent-strong:#0B7A55;
}

/* İnce kurumsal vurgu çizgisi + çok hafif köşe ışığı (neon/cam yok) */
.mas::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:-1;
  background:linear-gradient(90deg,var(--mas-accent) 0%,var(--mas-accent-2) 70%,transparent 100%);
}
.mas::after{
  content:""; position:absolute; top:-120px; right:-90px; width:260px; height:220px; z-index:-1;
  background:radial-gradient(closest-side,var(--mas-accent-50),transparent);
  pointer-events:none;
}

/* Başlık satırı */
.mas .mas-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mas .mas-exam{
  display:inline-flex; align-items:center; height:24px; padding:0 9px;
  border-radius:7px; background:var(--mas-accent-strong); color:#fff;
  font-family:var(--mas-display); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.mas .mas-badge{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
  border-radius:999px; font-size:12px; font-weight:600;
  background:var(--mau-amber-50,#FFF5EA); color:#8A4B0F;
  border:1px dashed rgba(232,130,30,.45);
}
.mas .mas-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--mau-amber,#E8821E); }
.mas[data-official="true"] .mas-badge{
  background:var(--mau-mint-50,#E8F7F1); color:#0B6B4B; border:1px solid rgba(14,158,110,.35);
}
.mas[data-official="true"] .mas-badge::before{ background:var(--mau-mint,#0E9E6E); }

.mas .mas-title{
  margin-top:10px !important;
  font-family:var(--mas-display); font-size:15px; font-weight:650; letter-spacing:-.015em;
  color:var(--mas-ink); line-height:1.35;
}

/* Rakam rayı: dört modül, tek bütün */
.mas .mas-rail{
  position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:12px;
  background:var(--mas-paper);
  border:1px solid var(--mas-line-2);
  border-radius:var(--mau-r,14px);
}
.mas .mas-unit{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:0; padding:13px 4px 11px;
}
.mas .mas-unit + .mas-unit{ box-shadow:inset 1px 0 0 var(--mas-line); }
.mas .mas-num{
  display:block;
  font-family:var(--mas-display);
  font-size:clamp(24px, 4.2cqi + 6px, 36px);
  font-weight:650; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:var(--mas-ink);
  min-height:1em;
  /* Hücre genişliğinde ve ortalı: "–" yer tutucusundan gerçek değere
     geçerken kutunun konumu oynamaz (layout-shift kaydı oluşmaz). */
  align-self:stretch; text-align:center;
}
.mas .mas-unit--d .mas-num{ color:var(--mas-accent); }
.mas .mas-unit--s .mas-num{ color:var(--mas-ink-3); font-weight:600; }
.mas .mas-lbl{
  display:block; margin-top:7px;
  font-size:12px; font-weight:600; color:var(--mas-ink-3); letter-spacing:.01em;
}
/* Değer değişince kısa, sakin bir iz (saniyede yok) */
.mas .mas-num.is-bump{ animation:mas-bump .32s var(--mau-ease,cubic-bezier(.22,.7,.3,1)); }
@keyframes mas-bump{ from{ opacity:.35; transform:translateY(3px); } to{ opacity:1; transform:none; } }

.mas .mas-over{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:10px 14px; text-align:center;
  background:var(--mas-paper); border-radius:inherit;
  font-size:14px; font-weight:600; color:var(--mas-ink-2);
}
.mas .mas-over[hidden]{ display:none; }
.mas.is-over .mas-unit{ visibility:hidden; }

/* Tarih satırı */
.mas .mas-date{
  display:flex; align-items:center; gap:7px; margin-top:12px !important;
  font-size:13.5px; font-weight:600; color:var(--mas-ink-2);
}
.mas .mas-date svg{ width:15px; height:15px; flex:0 0 15px; color:var(--mas-accent); }
.mas .mas-note{ margin-top:3px !important; padding-left:22px; font-size:12.5px; color:var(--mas-ink-3); }

/* Motivasyon / taktik şeridi — sayacın doğal devamı */
.mas .mas-tip{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:start;
  margin:16px -20px 0; padding:14px 14px 16px 20px;
  border-top:1px solid var(--mas-line-2);
  background:linear-gradient(180deg,var(--mas-paper),#fff 85%);
}
.mas .mas-tip[hidden]{ display:none; }
.mas .mas-tip-ic{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--mas-accent-50); color:var(--mas-accent); margin-top:1px;
}
.mas .mas-tip-ic svg{ width:16px; height:16px; }
.mas .mas-tip-body{ min-width:0; }
.mas .mas-tip-phase{ display:block; min-height:18px; font-size:12px; line-height:18px; font-weight:600; color:var(--mas-accent-strong); margin-bottom:3px; }  /* etiket JS ile dolar; yeri baştan ayrılır */
/* Evrenin bütün mesajları aynı hücrede: yükseklik en uzuna göre sabit.
   Ayrıca yer, mesaj dosyasındaki EN UZUN metne (≤150 karakter, testle
   denetlenir) göre sayfa açılırken ayrılır; mesajlar yüklenince kutu
   büyümez, sayfa kaymaz. Satır sayıları R63'te ölçülmüştür. */
.mas .mas-tip-stack{ display:grid; font-size:14.5px; min-height:calc(1.55em * 3); }
.mas .mas-msg{
  grid-area:1/1;
  font-size:14.5px; font-weight:500; line-height:1.55; color:var(--mas-ink-2);
  font-style:normal; overflow-wrap:anywhere;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
.mas .mas-msg.is-on{ opacity:1; visibility:visible; transition:opacity .6s ease .15s, visibility 0s; }
.mas .mas-tip-ctl{ display:flex; gap:2px; margin-top:-2px; }
.mas .mas-tip-b{
  -webkit-appearance:none; appearance:none; position:relative;
  width:30px; height:30px; padding:0; border:0; border-radius:8px; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--mas-ink-3);
  transition:background .15s ease, color .15s ease;
}
.mas .mas-tip-b::before{ content:""; position:absolute; inset:-6px -3px; }  /* ~42px dokunma alanı */
.mas .mas-tip-b svg{ width:16px; height:16px; }
.mas .mas-tip-b:hover{ background:var(--mas-accent-50); color:var(--mas-accent); }
.mas .mas-tip-b:focus-visible{ outline:2px solid var(--mas-accent); outline-offset:1px; }
.mas .mas-tip-b[aria-pressed="true"]{ color:var(--mas-accent); background:var(--mas-accent-50); }

.mas .mas-sr{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Dar kutular: 2×2 düzen (kart ya da ekran daraldığında) */
@container (max-width:499px){
  .mas .mas-tip-stack{ min-height:calc(1.55em * 4); }
}
@container (max-width:270px){
  .mas .mas-tip-stack{ min-height:calc(1.55em * 5); }
}
@container (max-width:280px){
  .mas .mas-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mas .mas-unit:nth-child(3){ box-shadow:inset 0 1px 0 var(--mas-line); }
  .mas .mas-unit:nth-child(4){ box-shadow:inset 1px 0 0 var(--mas-line), inset 0 1px 0 var(--mas-line); }
  .mas .mas-num{ font-size:30px; }
}
@media (max-width:420px){
  .mas{ padding:16px 16px 0; }
  /* Dar ekranda kontroller evre etiketinin hizasına çıkar; mesaj tam genişlik */
  .mas .mas-tip{ position:relative; grid-template-columns:28px minmax(0,1fr); margin:14px -16px 0; padding:13px 14px 15px 16px; gap:10px; }
  .mas .mas-tip-ic{ width:28px; height:28px; }
  .mas .mas-tip-phase{ padding-right:68px; min-height:22px; }
  .mas .mas-tip-ctl{ position:absolute; top:8px; right:8px; margin:0; }
  .mas .mas-msg,.mas .mas-tip-stack{ font-size:14px; }
}
@media (max-width:360px){
  .mas .mas-tip{ grid-template-columns:minmax(0,1fr); }
  .mas .mas-tip-ic{ display:none; }
}
/* Çok dar sayaç (≈320 px ekrandaki kart): kontroller mesajın altına iner,
   evre etiketi tek satırda kalır; etiket dolduğunda yükseklik değişmez. */
@container (max-width:310px){
  .mas .mas-tip{ grid-template-columns:minmax(0,1fr); }
  .mas .mas-tip-ic{ display:none; }
  .mas .mas-tip-phase{ padding-right:0; }
  .mas .mas-tip-ctl{ position:static; justify-content:flex-end; margin:4px -6px -4px 0; }
}

@media (prefers-reduced-motion:reduce){
  .mas .mas-msg,.mas .mas-msg.is-on{ transition:none; }
  .mas .mas-num.is-bump{ animation:none; }
}

/* ── Yerleşimler ─────────────────────────────────────────────────── */
/* YKS rehberi: hero içinde, düğmelerin altında sade */
.mas-slot--yks{ margin-top:30px; max-width:560px; }
/* LGS rehberi: koyu hero'nun sağ sütunu */
.mas-slot--lgs{ width:100%; max-width:520px; justify-self:end; }
.mas-slot--lgs .mas{ box-shadow:0 30px 70px -28px rgba(0,0,0,.55), 0 2px 8px rgba(6,25,55,.18); border-color:rgba(255,255,255,.6); }
@media (max-width:980px){ .mas-slot--lgs{ justify-self:start; } }

/* =====================================================================
   SINAV REHBERLERİ GİRİŞ SAYFASI (/sinav-rehberi)
   ===================================================================== */
.msr-hub{ padding:8px 0 72px; }
.msr-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch;
}
.msr-card{
  --mas-accent:var(--mau-royal,#1552C8);
  --mas-accent-50:var(--mau-royal-50,#EEF3FF);
  display:flex; flex-direction:column; gap:0;
  background:#fff; border:1px solid var(--mau-line,#DEE6F2);
  border-radius:var(--mau-r-xl,28px);
  box-shadow:var(--mau-sh-2,0 6px 18px -6px rgba(11,31,58,.12),0 2px 6px rgba(11,31,58,.05));
  padding:26px;
  font-family:var(--mau-ff-body,'Inter',system-ui,sans-serif);
  color:var(--mau-ink,#0B1F3A);
}
.msr-card[data-accent="mint"]{ --mas-accent:#0B7A55; --mas-accent-50:var(--mau-mint-50,#E8F7F1); }
.msr-card-top{ display:flex; align-items:center; gap:14px; }
.msr-card-ic{
  width:46px; height:46px; flex:0 0 46px; border-radius:13px; display:grid; place-items:center;
  background:var(--mas-accent-50); color:var(--mas-accent);
}
.msr-card-ic svg{ width:22px; height:22px; }
.msr-card-t{
  margin:0 !important; font-family:var(--mau-ff-display,'Sora',sans-serif) !important;
  font-size:24px !important; font-weight:700; letter-spacing:-.025em; line-height:1.15; color:var(--mau-ink,#0B1F3A);
}
.msr-card-aud{ margin:3px 0 0 !important; font-size:13.5px; font-weight:600; color:var(--mau-ink-3,#657590); }
.msr-card-d{ margin:16px 0 0 !important; font-size:15.5px; line-height:1.65; color:var(--mau-ink-2,#33455F); max-width:62ch; }
.msr-card-go{ align-self:flex-start; margin-top:18px; margin-bottom:22px; }
/* Kartlar eşit boyda: sayaçlar alt kenara hizalanır, yan yana aynı hizada durur */
.msr-card .mas{ margin-top:auto; max-width:none; box-shadow:none; }
@media (max-width:900px){
  .msr-grid{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:560px){
  .msr-card{ padding:20px 18px; border-radius:22px; }
  .msr-card-t{ font-size:21px !important; }
  .msr-card-go{ align-self:stretch; }
  .msr-hub{ padding-bottom:48px; }
}