/*
 * Görevler ve Ödüller: /gorevler ve /oduller
 * Renk yok: yalnız tema değişkenleri (var(--vurgu), --kart, --cizgi ...) ve onlardan türeyen tonlar.
 * app.css içindeki .btn / .btn-vurgu / .btn-ghost / .ic sınıflarını kullanır.
 */
.gv{
  --gv-a8:color-mix(in srgb,var(--vurgu) 8%,transparent);
  --gv-a15:color-mix(in srgb,var(--vurgu) 15%,transparent);
  --gv-a22:color-mix(in srgb,var(--vurgu) 22%,transparent);
  --gv-a45:color-mix(in srgb,var(--vurgu) 45%,transparent);
  --gv-kazanc45:color-mix(in srgb,var(--kazanc) 45%,transparent);
  --gv-kayip55:color-mix(in srgb,var(--kayip) 55%,transparent);
  --gv-parlak:color-mix(in srgb,var(--vurgu) 60%,var(--metin));
  --gv-grad:linear-gradient(135deg,var(--gv-parlak),var(--vurgu) 55%,var(--vurgu2));
  --gv-koyu:color-mix(in srgb,var(--zemin) 40%,var(--kart));
  --gv-kart2:color-mix(in srgb,var(--kart) 94%,var(--metin));
  padding-bottom:10px;
}
.gv [hidden]{display:none!important}

/* ---------- ortak ---------- */
.gv-h1,.gv-h2,.gv-sayi{font-family:var(--font-baslik);font-style:var(--baslik-stil,normal);font-weight:400;letter-spacing:.5px}
.gv-h1,.gv-h2{margin:0;line-height:1;text-transform:uppercase}
.gv-h1{font-size:clamp(26px,3vw,38px)}
.gv-h2{font-size:clamp(20px,2.2vw,26px)}
.gv .btn[disabled],.gv .btn.is-disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
.gv .btn-lg{height:46px;padding:0 28px;font-size:14px}
.gv-ust{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px;margin-top:6px}
.gv-ust p{margin-top:8px;max-width:62ch;color:var(--ikincil);font-size:13.5px;line-height:1.55}
.gv-bos{padding:30px 16px;text-align:center;color:var(--ikincil);border:1px dashed var(--cizgi);border-radius:14px;background:var(--kart);font-size:14px;line-height:1.6}
.gv-bos a{color:var(--gv-parlak);font-weight:700;text-decoration:underline}

/* ---------- özet ---------- */
.gv-ozet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.gv-ozet-kart{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:14px;border:1px solid var(--cizgi);background:var(--kart)}
.gv-ozet-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--gv-a15);color:var(--vurgu)}
.gv-ozet-ic .ic{width:22px;height:22px}
.gv-ozet-kart small{display:block;color:var(--ikincil);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gv-sayi{display:block;margin-top:3px;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.gv-sayi i{font-style:normal;color:var(--ikincil);font-size:16px}
.gv-ilerleme{margin-top:12px;height:8px;border-radius:999px;background:var(--cizgi);overflow:hidden}
.gv-ilerleme>span{display:block;height:100%;border-radius:inherit;background:var(--gv-grad);transition:width .4s}

/* giriş yoksa davet */
.gv-davet{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;margin-top:18px;padding:16px 20px;border-radius:16px;border:1px solid var(--gv-a22);background:radial-gradient(420px 160px at 0% 0%,var(--gv-a15),transparent 70%),var(--kart)}
.gv-davet p{flex:1 1 260px;color:var(--ikincil);font-size:13.5px;line-height:1.5}
.gv-davet b{color:var(--metin)}

/* ---------- bölümler ---------- */
.gv-bolum{margin-top:34px;scroll-margin-top:80px}
.gv-bolum-ust{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px}
.gv-bolum-ust small{color:var(--ikincil);font-size:12.5px}
.gv-say{margin-left:auto;color:var(--ikincil);font-size:13px;white-space:nowrap}
.gv-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* ---------- görev kartı ---------- */
.gv-kart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-content:start;min-width:0;padding:16px;border-radius:16px;border:1px solid var(--cizgi);background:var(--kart);transition:border-color .2s,background .2s}
.gv-kart:hover{border-color:var(--gv-a45)}
.gv-ikon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--gv-a15);color:var(--vurgu)}
.gv-ikon .ic{width:24px;height:24px}
.gv-govde{min-width:0}
.gv-baslik-satir{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gv-baslik{margin:0;font-size:15px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.gv-odul{display:inline-flex;align-items:center;gap:5px;flex:none;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid var(--gv-a45);background:var(--gv-a8);color:var(--gv-parlak);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.gv-odul .ic{width:14px;height:14px}
.gv-aciklama{margin-top:5px;color:var(--ikincil);font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.gv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.gv-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;border:1px solid var(--cizgi);background:var(--gv-koyu);color:var(--ikincil);font-size:11px;font-weight:700;line-height:1.5}
.gv-chip.donem{color:var(--gv-parlak);border-color:var(--gv-a22)}
.gv-chip.son{color:var(--metin)}
.gv-eylem{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding-top:12px;border-top:1px solid var(--cizgi)}
.gv-eylem-sol{flex:1 1 140px;min-width:0;color:var(--ikincil);font-size:12px;line-height:1.4}
.gv-eylem-sag{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
.gv-form{display:contents;margin:0}
.gv-yenile b{color:var(--metin);font-variant-numeric:tabular-nums;font-weight:700}
.gv-mesaj{flex-basis:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--cizgi);background:var(--gv-koyu);color:var(--ikincil);font-size:12.5px;line-height:1.45}
.gv-mesaj a{color:var(--gv-parlak);font-weight:700;text-decoration:underline}
.gv-mesaj.gv-hata{border-color:var(--gv-kayip55);background:color-mix(in srgb,var(--kayip) 10%,var(--kart));color:var(--kayip)}
.gv-mesaj.gv-hata a{color:inherit}
.gv-mesaj.gv-ok{border-color:var(--gv-kazanc45);background:color-mix(in srgb,var(--kazanc) 10%,var(--kart));color:var(--kazanc)}
.gv-mesaj.gv-uyari{border-color:var(--gv-a45);background:var(--gv-a8);color:var(--gv-parlak)}

/* durum düğmeleri (etkin olmayan) */
.gv .btn.gv-durum{background:transparent;border:1px solid var(--cizgi);color:var(--ikincil)}
.gv .btn.gv-durum.onay{border-color:var(--gv-kazanc45);color:var(--kazanc);opacity:1}
.gv .btn.gv-durum.bekliyor{border-color:var(--gv-a45);color:var(--gv-parlak);opacity:1}
.gv .btn.gv-durum.red{border-color:var(--gv-kayip55);color:var(--kayip);opacity:1}

/* kart durumları */
.gv-kart.is-onay{border-color:var(--gv-kazanc45)}
.gv-kart.is-onay .gv-ikon{background:color-mix(in srgb,var(--kazanc) 14%,transparent);color:var(--kazanc)}
.gv-kart.is-onay .gv-odul{border-color:var(--gv-kazanc45);background:transparent;color:var(--kazanc)}
.gv-kart.is-bekliyor{border-color:var(--gv-a45)}
.gv-kart.is-red{border-color:var(--gv-kayip55)}
.gv-kart.is-red .gv-ikon{background:color-mix(in srgb,var(--kayip) 12%,transparent);color:var(--kayip)}
.gv-kart.is-bitti{opacity:.65}

/* ---------- ödüller ---------- */
.gv-uyari-kutu{display:flex;align-items:center;flex-wrap:wrap;gap:14px 16px;margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid var(--gv-a45);background:radial-gradient(480px 180px at 0% 0%,var(--gv-a22),transparent 70%),var(--kart)}
.gv-uyari-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--gv-a15);color:var(--vurgu)}
.gv-uyari-ic .ic{width:24px;height:24px}
.gv-uyari-kutu p{flex:1 1 260px;min-width:0;font-size:13.5px;line-height:1.55}
.gv-uyari-kutu p small{display:block;margin-top:3px;color:var(--ikincil);font-size:12.5px}
.gv-uyari-btn{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.gv-say-seridi{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gv-say-seridi .gv-chip b{margin-left:5px;color:var(--metin);font-variant-numeric:tabular-nums}
.gv-odul-liste{display:grid;gap:10px;margin-top:16px}
.gv-odul-satir{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:16px;border-radius:16px;border:1px solid var(--cizgi);background:var(--kart);transition:border-color .2s}
.gv-odul-satir:hover{border-color:var(--gv-a45)}
.gv-odul-satir.teslim{border-color:var(--gv-kazanc45)}
.gv-odul-satir.iptal{opacity:.7}
.gv-odul-ikon{grid-row:1/span 3;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--gv-a15);color:var(--vurgu)}
.gv-odul-ikon .ic{width:24px;height:24px}
.gv-odul-satir.teslim .gv-odul-ikon{background:color-mix(in srgb,var(--kazanc) 14%,transparent);color:var(--kazanc)}
.gv-odul-baslik{margin:0;font-size:15px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.gv-odul-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;color:var(--ikincil);font-size:12px}
.gv-rozet{display:inline-flex;align-items:center;align-self:start;padding:4px 11px;border-radius:999px;border:1px solid var(--cizgi);background:var(--gv-koyu);color:var(--ikincil);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.gv-rozet.iletisimde{border-color:var(--gv-a45);background:var(--gv-a8);color:var(--gv-parlak)}
.gv-rozet.teslim{border-color:var(--gv-kazanc45);color:var(--kazanc)}
.gv-rozet.iptal{border-color:var(--gv-kayip55);color:var(--kayip)}
.gv-odul-not{grid-column:2/-1;margin-top:6px;padding:10px 12px;border-radius:10px;border-left:3px solid var(--vurgu);background:var(--gv-koyu);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.gv-odul-not small{display:block;margin-bottom:2px;color:var(--ikincil);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gv-adimlar{grid-column:2/-1;display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--ikincil);font-size:11px;font-weight:700}
.gv-adim{display:inline-flex;align-items:center;gap:6px}
.gv-adim::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--cizgi);background:transparent}
.gv-adim.tamam{color:var(--metin)}
.gv-adim.tamam::before{border-color:var(--vurgu);background:var(--vurgu)}
.gv-adim.son.tamam::before{border-color:var(--kazanc);background:var(--kazanc)}
.gv-adim-cizgi{flex:0 1 26px;min-width:12px;height:2px;border-radius:2px;background:var(--cizgi)}
.gv-adim-cizgi.tamam{background:var(--vurgu)}

/* ---------- dar ekran ---------- */
@media (max-width:900px){
  .gv-izgara{grid-template-columns:minmax(0,1fr)}
  .gv-ozet{grid-template-columns:minmax(0,1fr)}
  .gv-uyari-btn{margin-left:0}
}
@media (max-width:640px){
  .gv-bolum{margin-top:28px}
  .gv-kart{padding:14px}
  .gv-odul-satir{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .gv-odul-ikon{grid-row:1/span 2}
  .gv-odul-satir .gv-rozet{grid-column:2;justify-self:start;margin-top:4px}
  .gv-odul-not,.gv-adimlar{grid-column:1/-1}
  .gv-eylem-sag{width:100%;margin-left:0}
  .gv-eylem-sag .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .gv-kart,.gv-odul-satir,.gv-ilerleme>span{transition:none}
}