:root {
  --bg: #fff8e7;
  --card: #ffffff;
  --ink: #2b2d42;
  --soft: #6b6f80;
  --line: #f0e3c4;
  --blue: #3a86ff;
  --pink: #ff5d8f;
  --green: #2ec4b6;
  --orange: #ff9f1c;
  --purple: #8338ec;
  --red: #e63946;
  --star: #ffc300;
  --star-off: #e4dccb;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 10% 10%, #ffe1ec 0 60px, transparent 61px),
    radial-gradient(circle at 92% 18%, #dff3ff 0 80px, transparent 81px),
    radial-gradient(circle at 85% 92%, #e5fbe9 0 70px, transparent 71px);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 16px; }
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
h1 { font-size: 32px; margin: 4px 0; line-height: 1.1; }
h1 .rb span:nth-child(5n+1) { color: var(--pink); }
h1 .rb span:nth-child(5n+2) { color: var(--orange); }
h1 .rb span:nth-child(5n+3) { color: var(--green); }
h1 .rb span:nth-child(5n+4) { color: var(--blue); }
h1 .rb span:nth-child(5n+5) { color: var(--purple); }
h2 { font-size: 24px; margin: 0 0 12px; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 18px;
  box-shadow: 0 6px 0 var(--line); border: 3px solid var(--line); margin-bottom: 16px;
}
.muted { color: var(--soft); font-size: 16px; }
.hidden { display: none !important; }

button, .btn {
  font: inherit; font-weight: 700; border: 0; border-radius: 16px; cursor: pointer;
  padding: 12px 20px; min-height: 52px; color: #fff; background: var(--blue);
  box-shadow: 0 5px 0 rgba(0,0,0,.18); transition: transform .06s, box-shadow .06s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none;
}
button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
button:disabled { opacity: .5; cursor: default; }
button.pink { background: var(--pink); }
button.green { background: var(--green); }
button.orange { background: var(--orange); }
button.purple { background: var(--purple); }
button.red { background: var(--red); }
button.ghost { background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
button.small { min-height: 40px; padding: 6px 12px; font-size: 15px; border-radius: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 160px; }
.row > button { flex: 0 0 auto; }

label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 10px 14px; min-height: 52px;
  border: 3px solid var(--line); border-radius: 14px; background: #fffdf8; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.tabs button { background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); padding: 8px; font-size: 17px; }
.tabs button.on { color: #fff; border-color: transparent; }
.tabs button.on[data-tab="ogr"] { background: var(--pink); }
.tabs button.on[data-tab="gir"] { background: var(--green); }
.tabs button.on[data-tab="kay"] { background: var(--orange); }
.tabs button.on[data-tab="rap"] { background: var(--purple); }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg button { background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); font-size: 20px; }
.seg button.on.deneme { background: var(--blue); color: #fff; border-color: transparent; }
.seg button.on.hikaye { background: var(--pink); color: #fff; border-color: transparent; }

.tablo { width: 100%; border-collapse: collapse; }
.tablo th, .tablo td { padding: 10px 8px; border-bottom: 2px dashed var(--line); text-align: left; vertical-align: middle; }
.tablo th { font-size: 15px; color: var(--soft); }
.kod {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700;
  background: #f3edff; color: var(--purple); padding: 4px 10px; border-radius: 10px; letter-spacing: 1px;
  white-space: nowrap;
}
.acts { display: flex; gap: 6px; flex-wrap: wrap; }

.stars { white-space: nowrap; font-size: 22px; letter-spacing: 1px; }
.stars .on { color: var(--star); text-shadow: 0 2px 0 #e0a800; }
.stars .off { color: var(--star-off); }
.puan { font-weight: 800; font-size: 22px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; }
.badge.deneme { background: var(--blue); }
.badge.hikaye { background: var(--pink); }
.badge.gelmedi { background: #adb5bd; }

.giris-satir {
  display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; border-radius: 16px;
  border: 3px solid var(--line); margin-bottom: 10px; background: #fffdf8;
}
.giris-satir .ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.giris-satir .ad { font-weight: 800; font-size: 19px; }
.giris-satir .alanlar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.giris-satir .alanlar input[type=number] { width: 96px; flex: 0 0 96px; text-align: center; }
.giris-satir .alanlar input.not { flex: 1 1 200px; }
.giris-satir.yok { opacity: .55; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; user-select: none; }
.chk input { width: 26px; height: 26px; min-height: 0; }

.msg { padding: 12px 16px; border-radius: 14px; margin: 10px 0; font-weight: 700; }
.msg.ok { background: #e5fbe9; color: #1b7a43; }
.msg.err { background: #ffe5e8; color: #a4161a; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 14px; font-weight: 700;
  z-index: 10; max-width: calc(100% - 32px);
}

/* Veli sayfası */
.veli-giris { max-width: 480px; margin: 40px auto 0; text-align: center; }
.veli-giris input { text-align: center; font-size: 30px; letter-spacing: 3px; font-weight: 800; }
.veli-giris .row > div { flex: 1 1 120px; }
.veli-giris button { width: 100%; font-size: 24px; margin-top: 12px; min-height: 64px; }
.ozet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ozet .kutu { border-radius: var(--radius); padding: 16px; color: #fff; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.ozet .kutu.deneme { background: var(--blue); }
.ozet .kutu.hikaye { background: var(--pink); }
.ozet .kutu .b { font-size: 40px; font-weight: 800; line-height: 1; margin: 6px 0; }
.ozet .kutu .stars .off { color: rgba(255,255,255,.4); }
.ozet .kutu .stars .on { color: #fff3b0; text-shadow: none; }
.sonuc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px; border-radius: 16px; border: 3px solid var(--line); margin-bottom: 10px; background: #fffdf8;
}
.sonuc .sol { min-width: 0; flex: 1 1 200px; }
.sonuc .bas { font-weight: 800; font-size: 20px; overflow-wrap: anywhere; }
.sonuc .sag { text-align: right; margin-left: auto; }
.sonuc .not { margin-top: 6px; background: #fff3c4; padding: 6px 10px; border-radius: 10px; font-size: 16px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  h1 { font-size: 26px; }
  .tabs { grid-template-columns: 1fr 1fr; }
  .ozet .kutu .b { font-size: 32px; }
  .tablo.duyarli thead { display: none; }
  .tablo.duyarli tr { display: block; border-bottom: 2px dashed var(--line); padding: 8px 0; }
  .tablo.duyarli td { display: flex; justify-content: space-between; gap: 8px; border: 0; padding: 4px 0; }
  .tablo.duyarli td::before { content: attr(data-l); font-weight: 700; color: var(--soft); font-size: 15px; }
  .tablo.duyarli td.acts { justify-content: flex-start; }
  .tablo.duyarli td.acts::before { display: none; }
}

/* Gelişim grafiği */
.grafikler { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grafik { background: var(--card); border: 3px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: 0 6px 0 var(--line); min-width: 0; }
.g-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 19px; }
.g-alan { position: relative; }
.g-alan svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-izgara { stroke: #ece4d2; stroke-width: 1; }
.g-izgara.esik { stroke-dasharray: 4 5; stroke: #e6d9b8; }
.g-eksen { font-size: 13px; fill: var(--soft); font-family: inherit; }
.g-eksen.yildiz { fill: #c99a00; font-size: 12px; }
.g-deger { font-size: 18px; font-weight: 800; fill: var(--ink); font-family: inherit; }
.g-art { fill: #1b7a43; }
.g-azal { fill: #c1121f; }
.g-hedef { cursor: pointer; }
.g-rozet { font-size: 15px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #f1ede4; color: var(--ink); white-space: nowrap; }
.g-rozet.art { background: #e5fbe9; color: #1b7a43; }
.g-rozet.azal { background: #ffe5e8; color: #a4161a; }
.g-ipucu { position: absolute; top: 0; background: var(--ink); color: #fff; padding: 6px 10px; border-radius: 10px; font-size: 14px; white-space: pre-line; pointer-events: none; max-width: 240px; z-index: 2; }
.g-not { font-size: 14px; margin-top: 4px; }
@media (max-width: 760px) { .grafikler { grid-template-columns: 1fr; } }

/* Toplu ekleme */
details.toplu { margin-top: 14px; border-top: 2px dashed var(--line); padding-top: 10px; }
details.toplu summary { cursor: pointer; font-weight: 700; color: var(--purple); min-height: 40px; display: flex; align-items: center; }
details.toplu code { background: #f3edff; padding: 1px 6px; border-radius: 6px; }

/* Ders bazlı deneme */
.ders-ayar-satir { display: flex; gap: 8px; margin: 8px 0; align-items: center; }
.ders-ayar-satir input[data-d="ad"] { flex: 1 1 auto; }
.ders-ayar-satir input[data-d="soru"] { flex: 0 0 96px; text-align: center; }
.ders-gir { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-size: 13px; font-weight: 700; color: var(--soft); }
.giris-satir .alanlar .ders-gir input { width: 84px; flex: 0 0 auto; text-align: center; }
.ders-bar { margin-bottom: 12px; }
.db-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.db-iz { height: 14px; border-radius: 999px; background: #f1ede4; overflow: hidden; margin: 4px 0; }
.db-dolu { height: 100%; border-radius: 999px; background: var(--purple); }

/* Rozetler */
.rozetler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rozet { text-align: center; border-radius: 16px; padding: 10px 6px; border: 3px solid var(--line); background: #fffdf8; }
.rozet.var { background: #fff6d6; border-color: #ffd65c; }
.rozet.yok { opacity: .55; }
.r-ikon { font-size: 34px; line-height: 1.1; }
.r-ad { font-weight: 800; font-size: 16px; }
.r-ipucu { font-size: 13px; color: var(--soft); line-height: 1.2; }
@media (max-width: 420px) { .rozetler { grid-template-columns: repeat(2, 1fr); } }

/* En çok gelişenler */
ol.gelisen { margin: 0; padding-left: 22px; }
ol.gelisen li { padding: 6px 0; border-bottom: 2px dashed var(--line); }
ol.gelisen li > span:first-child { font-weight: 700; margin-right: 6px; }

/* Yazdırma: veli kartları ve karneler sadece yazdırırken görünür */
#yazdir { display: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > .wrap, .toast, .pencere, .konfeti { display: none !important; }
  #yazdir.kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  #yazdir.karneler { display: block; }
  .vk { border: 1.5px dashed #999; padding: 5mm; height: 66mm; break-inside: avoid; display: flex; flex-direction: column; justify-content: space-between; color: #000; }
  .vk-ust { font-size: 11pt; font-weight: 700; color: #3a86ff; }
  .vk-ad { font-size: 16pt; font-weight: 800; }
  .vk-govde { display: flex; gap: 5mm; align-items: center; }
  .vk-qr { width: 32mm; height: 32mm; flex: 0 0 32mm; }
  .vk-qr svg { width: 100%; height: 100%; }
  .vk-bilgi { font-size: 13pt; line-height: 1.5; }
  .vk-bilgi b { font-size: 16pt; letter-spacing: 1px; }
  .vk-url { font-size: 10pt; color: #444; }
  .vk-alt { font-size: 9pt; color: #444; }
  .karne { break-after: page; font-size: 11pt; }
  .karne:last-child { break-after: auto; }
  .karne .card, .karne .grafik { box-shadow: none; break-inside: avoid; padding: 8px 12px; margin-bottom: 8px; }
  .karne .grafikler { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .karne .grafikler:empty { display: none; }
  .karne .g-not { display: none; }
  .karne h2 { font-size: 15pt; margin-bottom: 6px; }
}

/* Sekmeler: 5 sekme */
.tabs { grid-template-columns: repeat(5, 1fr); }
.tabs button.on[data-tab="puan"] { background: #f4a300; }
@media (max-width: 640px) { .tabs { grid-template-columns: repeat(3, 1fr); } .tabs button { font-size: 15px; } }

/* Ana sayfa */
.ana-selam { font-size: 26px; margin: 4px 0 14px; }
.ana-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ana-kart {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 16px;
  text-align: left; padding: 20px; min-height: 120px; border-radius: 24px; color: #fff; justify-content: stretch;
  box-shadow: 0 7px 0 rgba(0,0,0,.18);
}
.ana-kart .ak-e { grid-row: span 2; font-size: 52px; width: 84px; height: 84px; border-radius: 22px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; }
.ana-kart .ak-yazi { display: flex; flex-direction: column; }
.ana-kart .ak-ad { font-size: 26px; font-weight: 800; line-height: 1.1; }
.ana-kart .ak-acik { font-size: 17px; font-weight: 600; opacity: .92; }
.ana-kart .ak-bilgi { grid-column: 2; justify-self: start; margin-top: 8px; background: rgba(255,255,255,.28); padding: 2px 12px; border-radius: 999px; font-size: 15px; }
.ana-kart .ak-bilgi:empty { display: none; }
.ana-kart.puan { grid-column: 1 / -1; min-height: 150px; background: linear-gradient(135deg, #ffb703, #fb8500); }
.ana-kart.puan .ak-e { font-size: 64px; width: 104px; height: 104px; }
.ana-kart.puan .ak-ad { font-size: 32px; }
.ana-kart.gir { background: linear-gradient(135deg, #2ec4b6, #1b9e8b); }
.ana-kart.kay { background: linear-gradient(135deg, #3a86ff, #2667d8); }
.ana-kart.rap { background: linear-gradient(135deg, #8338ec, #6a24c9); }
.ana-kart.ogr { background: linear-gradient(135deg, #ff5d8f, #e83e74); }
.bolum-bas { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.bolum-bas h2 { margin: 0; font-size: 28px; }
@media (max-width: 640px) {
  .ana-izgara { grid-template-columns: 1fr; }
  .ana-kart { min-height: 96px; padding: 14px; }
  .ana-kart .ak-e { width: 64px; height: 64px; font-size: 38px; }
  .ana-kart .ak-ad { font-size: 22px; }
  .ana-kart.puan .ak-e { width: 76px; height: 76px; font-size: 46px; }
  .ana-kart.puan .ak-ad { font-size: 25px; }
  .bolum-bas h2 { font-size: 22px; }
}

/* Davranış: üst bant */
.dp-bant { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; background: var(--card); border: 3px solid #ffd65c; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 6px 0 #ffe9a8; }
.dp-bant:empty { display: none; }
.dp-bugun { display: flex; align-items: center; gap: 8px; }
.dpb-et { font-weight: 800; font-size: 18px; }
.dpb-say { font-weight: 800; font-size: 20px; padding: 4px 12px; border-radius: 14px; }
.dpb-say.art { background: #e5fbe9; color: #1b7a43; }
.dpb-say.azal { background: #ffe5e8; color: #a4161a; }
.dp-yildiz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; }
.dpy { background: #fff6d6; border: 2px solid #ffd65c; border-radius: 999px; padding: 2px 12px; font-weight: 700; }
.dp-ipucu { grid-column: 1 / -1; color: var(--soft); font-size: 16px; }
@media (max-width: 640px) { .dp-bant { grid-template-columns: 1fr; } }

/* Davranış: öğrenci kartları */
.puan-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.pk { position: relative; background: var(--card); border: 3px solid var(--line); border-radius: 24px; padding: 14px 12px 10px; box-shadow: 0 6px 0 var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pk.tum { background: #fffaf0; border-color: #ffd65c; box-shadow: 0 6px 0 #ffe9a8; }
.pk-avatar { position: relative; width: 96px; height: 96px; min-height: 0; padding: 0; border-radius: 50%; font-size: 56px; color: inherit; box-shadow: inset 0 -6px 0 rgba(0,0,0,.08), 0 4px 0 rgba(0,0,0,.08); }
.pk-avatar:active { transform: scale(.95); }
.pk-net { position: absolute; top: -4px; right: -14px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; background: #1b9e4b; color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }
.pk-net.eksi { background: #c1121f; }
.pk-ad { font-weight: 800; font-size: 18px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.pk-dugme { display: flex; gap: 8px; width: 100%; }
.pk-dugme button { flex: 1; min-height: 52px; padding: 0 4px; font-size: 18px; font-weight: 800; border-radius: 14px; }
.pk-arti { background: #1b9e4b; }
.pk-eksi { background: #fff; color: #c1121f; border: 3px solid #f3c1c6; box-shadow: 0 4px 0 #f3c1c6; }
.pk-gecmis { background: none; box-shadow: none; color: var(--soft); min-height: 32px; padding: 2px 6px; font-size: 14px; font-weight: 700; }
.pk-gecmis:not(.bos):hover { text-decoration: underline; }
.pk-gecmis.bos { font-size: 14px; color: var(--soft); font-weight: 700; min-height: 32px; display: flex; align-items: center; }

/* Kutlama animasyonu */
.kutlama { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 800; padding: 4px 14px; border-radius: 999px; color: #fff; pointer-events: none; animation: yuksel 1.2s ease-out forwards; white-space: nowrap; z-index: 3; }
.kutlama.art { background: #1b9e4b; }
.kutlama.azal { background: #c1121f; }
@keyframes yuksel { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.pk.zipla { animation: zipla .5s ease; }
.pk.salla { animation: salla .4s ease; }
@keyframes zipla { 0%,100% { transform: none; } 40% { transform: translateY(-10px) scale(1.04); } }
@keyframes salla { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .kutlama, .pk.zipla, .pk.salla { animation-duration: .01s; } }

/* Açılır pencere */
.pencere { position: fixed; inset: 0; background: rgba(43,45,66,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.pencere-kutu { background: var(--card); border-radius: 26px; padding: 20px; width: 100%; max-width: 720px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.3); animation: ac .18s ease-out; }
@keyframes ac { from { transform: scale(.95); opacity: 0; } }
.pn-bas { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pn-bas > button { margin-left: auto; align-self: flex-start; }
.pn-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; flex: 0 0 64px; }
.pn-kim { display: flex; flex-direction: column; }
.pn-kim b { font-size: 24px; line-height: 1.1; }
.pn-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pn-sec button { background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); font-size: 18px; }
.pn-sec button small { font-size: 15px; opacity: .8; }
.pn-sec button.on.arti { background: #1b9e4b; color: #fff; border-color: transparent; box-shadow: 0 4px 0 #136f35; }
.pn-sec button.on.eksi { background: #d63a4a; color: #fff; border-color: transparent; box-shadow: 0 4px 0 #9d2533; }
.davranislar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dv { position: relative; flex-direction: column; gap: 8px; min-height: 140px; padding: 14px 8px; background: var(--ac); color: var(--ink); border: 3px solid transparent; box-shadow: 0 5px 0 rgba(0,0,0,.08); border-radius: 20px; font-size: 17px; line-height: 1.2; }
.dv:hover { border-color: var(--ko); }
.dv-e { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px; box-shadow: 0 3px 0 rgba(0,0,0,.08); }
.dv-ad { font-weight: 800; }
.dv-p { position: absolute; top: 8px; right: 8px; background: var(--ko); color: #fff; font-size: 14px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.gecmis .gc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 2px dashed var(--line); }
.gecmis .gc > span:nth-child(2) { flex: 1; font-weight: 700; }
.gc-d { font-weight: 800; border-radius: 10px; padding: 2px 8px; color: #fff; }
.gc-d.art { background: #1b9e4b; }
.gc-d.azal { background: #c1121f; }
.toast button { min-height: 36px; }

/* Veli: davranış özeti */
.dp-ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.dp-kutu { border-radius: 16px; background: #fffdf8; border: 3px solid var(--line); text-align: center; padding: 10px 4px; font-weight: 700; color: var(--soft); font-size: 15px; }
.dp-kutu .b { font-size: 26px; font-weight: 800; color: var(--ink); }
.dp-kutu.net { background: #1b9e4b; border-color: transparent; color: #e5fbe9; }
.dp-kutu.net.eksi { background: #c1121f; color: #ffe5e8; }
.dp-kutu.net .b { color: #fff; font-size: 30px; }


/* ---------- Ana sayfa grupları ---------- */
.ana-grup { font-size: 19px; color: var(--soft); margin: 22px 0 10px; }
.ana-grup:first-of-type { margin-top: 6px; }
.ana-kart.yok { background: linear-gradient(135deg, #06d6a0, #0a9f78); }
.ana-kart.sec { background: linear-gradient(135deg, #ff7aa8, #d63a7a); }
.ana-kart.tak { background: linear-gradient(135deg, #4cc9f0, #2a8fd6); }
.ana-kart.arac { background: linear-gradient(135deg, #7b8cde, #5560b8); }
.ana-kart.odev { background: linear-gradient(135deg, #f3722c, #d4541a); }
.ana-kart.duy { background: linear-gradient(135deg, #f9c74f, #e09b00); }

/* ---------- Sınıf hedefi ---------- */
.hedef { background: var(--card); border: 3px solid #b8e0ff; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 6px 0 #d8eeff; }
.hedef.tamam { border-color: #7ed99a; box-shadow: 0 6px 0 #c9f2d4; }
.h-ust { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 18px; }
.h-say { font-weight: 800; }
.h-iz { height: 22px; border-radius: 999px; background: #eef4fb; overflow: hidden; margin: 8px 0 4px; }
.h-dolu { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4cc9f0, #3a86ff); transition: width .5s; }
.hedef.tamam .h-dolu { background: linear-gradient(90deg, #06d6a0, #1b9e4b); }
.h-tamam { font-weight: 800; color: #1b7a43; }
.h-alt { font-size: 15px; }
.dp-araclar { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }

/* ---------- Konfeti ---------- */
.konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.konfeti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: dus linear forwards; }
@keyframes dus { to { transform: translateY(110vh) rotate(720deg); } }
.konfeti-yazi { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: var(--ink); font-size: 30px; font-weight: 800; padding: 18px 28px; border-radius: 24px; box-shadow: 0 12px 40px rgba(0,0,0,.25); text-align: center; animation: ac .3s ease-out; max-width: calc(100% - 32px); }
@media (prefers-reduced-motion: reduce) { .konfeti i { display: none; } }

/* ---------- Davranış düzenleme ---------- */
.dd-bas { margin: 14px 0 8px; font-size: 18px; }
.dd-bas.art { color: #1b7a43; }
.dd-bas.azal { color: #a4161a; }
.dd-satir { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dd-satir input { flex: 1 1 auto; min-width: 0; }
.dd-satir select { flex: 0 0 76px; width: 76px; }
.dd-emoji { flex: 0 0 52px; width: 52px; padding: 0; font-size: 26px; background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.dd-palet { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #fffdf8; border: 3px dashed var(--line); border-radius: 14px; margin-bottom: 8px; align-items: center; }
.dd-pe { min-height: 44px; width: 44px; padding: 0; font-size: 24px; background: #fff; color: inherit; border: 2px solid var(--line); box-shadow: none; }

/* ---------- Yoklama ve ödev kontrol kartları ---------- */
.y-sayac, .od-say { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ys { font-weight: 800; padding: 4px 12px; border-radius: 12px; background: #f1ede4; font-size: 16px; white-space: nowrap; }
.ys.var { background: #e5fbe9; color: #1b7a43; }
.ys.yok { background: #ffe5e8; color: #a4161a; }
.ys.gec { background: #fff0d9; color: #a35a00; }
.y-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.yk { flex-direction: column; gap: 6px; min-height: 150px; padding: 12px 8px; background: #fff; color: var(--ink); border: 4px solid #b9ecc8; box-shadow: 0 5px 0 #b9ecc8; border-radius: 20px; }
.yk-av { width: 64px; height: 64px; border-radius: 50%; font-size: 38px; display: flex; align-items: center; justify-content: center; }
.yk-ad { font-weight: 800; font-size: 16px; line-height: 1.2; }
.yk-d { font-size: 15px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #e5fbe9; color: #1b7a43; }
.yk.yok, .yk.od-yapmadi { border-color: #f5b3bb; box-shadow: 0 5px 0 #f5b3bb; background: #fff7f8; }
.yk.yok .yk-d, .yk.od-yapmadi .yk-d { background: #ffe5e8; color: #a4161a; }
.yk.gec { border-color: #ffd28a; box-shadow: 0 5px 0 #ffd28a; background: #fffaf0; }
.yk.gec .yk-d { background: #fff0d9; color: #a35a00; }
.yk.od-bekliyor { border-color: var(--line); box-shadow: 0 5px 0 var(--line); }
.yk.od-bekliyor .yk-d { background: #f1ede4; color: var(--soft); }
.yk.yok .yk-av { filter: grayscale(.8); opacity: .7; }

/* ---------- Rastgele seçici ---------- */
.sahne { background: linear-gradient(160deg, #fff6d6, #ffe3ef); border: 4px solid #ffd65c; border-radius: 28px; text-align: center; padding: 26px 16px; margin-bottom: 16px; box-shadow: 0 8px 0 #ffe9a8; }
.s-avatar { width: 180px; height: 180px; margin: 0 auto; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 110px; box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.s-ad { font-size: 40px; font-weight: 800; margin: 14px 0; min-height: 1.3em; }
.s-dugme { font-size: 30px; min-height: 76px; padding: 0 44px; background: linear-gradient(135deg, #ff7aa8, #d63a7a); border-radius: 22px; }
.sahne.donuyor .s-avatar { animation: titre .12s linear infinite; }
.sahne.secildi .s-avatar { animation: zipla .5s ease 2; }
@keyframes titre { 50% { transform: rotate(6deg) scale(1.04); } }
@media (max-width: 640px) { .s-avatar { width: 140px; height: 140px; font-size: 84px; } .s-ad { font-size: 30px; } }

/* ---------- Takımlar ---------- */
.tk-sayi { display: flex; gap: 10px; flex-wrap: wrap; }
.tk-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tk { background: var(--card); border: 4px solid var(--tr); border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 0 var(--tr); }
.tk-bas { display: flex; align-items: center; gap: 10px; }
.tk-e { font-size: 44px; }
.tk-ad { background: none; box-shadow: none; color: var(--ink); font-size: 24px; padding: 0; min-height: 0; text-align: left; }
.tk-tac { font-size: 28px; }
.tk-puan { margin-left: auto; background: var(--tr); color: #fff; font-size: 28px; font-weight: 800; min-width: 60px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.tk-uyeler { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-uye { min-height: 40px; padding: 4px 10px; font-size: 16px; background: #fffdf8; color: var(--ink); border: 2px solid var(--line); box-shadow: none; border-radius: 999px; }

/* ---------- Zamanlayıcı ve ses ölçer ---------- */
.arac-kart { text-align: center; }
.z-ekran { font-size: clamp(64px, 16vw, 150px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; margin: 6px 0 12px; }
.z-iz { height: 18px; border-radius: 999px; background: #eef4fb; overflow: hidden; margin-bottom: 12px; }
.z-dolu { height: 100%; background: linear-gradient(90deg, #06d6a0, #3a86ff); border-radius: 999px; transition: width .25s linear; }
.z-hazir { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.arac-kart.bitti { animation: yanson 1s ease 3; }
.arac-kart.bitti .z-ekran { color: #d63a4a; font-size: clamp(44px, 10vw, 100px); }
@keyframes yanson { 50% { background: #ffe5e8; } }
.arac-kart:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #fff8e7; border-radius: 0; }
.arac-kart:fullscreen .z-ekran { font-size: 30vh; }
.ses-yuz { font-size: 90px; line-height: 1.1; }
.ses-iz { position: relative; height: 36px; border-radius: 999px; background: #eef4fb; overflow: hidden; }
.ses-dolu { height: 100%; border-radius: 999px; background: #06d6a0; transition: width .1s; }
.ses-sinir { position: absolute; top: 0; bottom: 0; width: 4px; background: var(--ink); }
#sesKart[data-d="orta"] .ses-dolu { background: #ffb703; }
#sesKart[data-d="yuksek"] .ses-dolu { background: #d63a4a; }
#sesKart[data-d="yuksek"] { animation: yanson 1s ease infinite; }

/* ---------- Ödevler ve duyurular ---------- */
.od-bas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.od-ad { font-size: 20px; }
.duyuru { border-bottom: 2px dashed var(--line); padding: 10px 0; }
.duyuru:last-child { border-bottom: 0; }
.du-ust { display: flex; justify-content: space-between; align-items: center; }
.du-metin { white-space: pre-line; font-size: 18px; }

/* ---------- Karne (ekranda değil, yazdırırken) ---------- */
.kr-bas { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.kr-ust { color: var(--blue); font-weight: 700; }
.kr-ad { font-size: 26px; font-weight: 800; }
.kr-ozet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 10px; }
.kr-kutu { border: 2px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; }
.kr-b { font-size: 12px; color: var(--soft); font-weight: 700; }
.kr-d { font-size: 18px; font-weight: 800; }
.kr-alt { font-size: 13px; color: var(--soft); }
.kr-alt .stars { font-size: 16px; }
.kr-rozet { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-imza { display: flex; justify-content: space-around; margin-top: 30px; }
.kr-imza div { border-top: 1.5px solid #555; width: 40%; text-align: center; padding-top: 4px; color: var(--soft); }

/* ---------- Veli sayfası ---------- */
.v-bas { display: flex; align-items: center; gap: 12px; }
.v-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.vm { border-radius: 18px; padding: 12px 6px; text-align: center; color: #fff; display: flex; flex-direction: column; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.vm b { font-size: 30px; line-height: 1.1; }
.vm span { font-size: 14px; font-weight: 700; opacity: .92; }
.vm.deneme { background: var(--blue); }
.vm.hikaye { background: var(--pink); }
.vm.davranis { background: #1b9e4b; }
.vm.davranis.eksi { background: #c1121f; }
.v-duyuru { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; justify-content: flex-start; background: #fff6d6; color: var(--ink); border: 3px solid #ffd65c; box-shadow: 0 5px 0 #ffe9a8; margin-bottom: 16px; padding: 12px 16px; font-weight: 500; }
.v-duyuru > span:first-child { font-size: 30px; }
.v-takim { font-size: 19px; }
.v-odev { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.v-odev:last-child { border-bottom: 0; }
.gc-d.gec { background: #e09b00; }
@media (max-width: 420px) { .vm b { font-size: 24px; } }

/* ---------- Giriş: kayıt ve şifre ---------- */
.giris-alt { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.ana-okul { margin: -8px 0 10px; font-size: 17px; font-weight: 700; }
.ana-okul:empty { display: none; }
.ana-kart.kit { background: linear-gradient(135deg, #43aa8b, #2b8a6e); }
.ana-kart.profil { background: linear-gradient(135deg, #6c757d, #495057); }

/* ---------- Profil: davetler ---------- */
.davet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 2px dashed var(--line); }
.davet:last-child { border-bottom: 0; }
.davet .dv-durum { font-weight: 700; color: var(--soft); }
.davet.kullanildi .kod { background: #eee; color: var(--soft); }

/* ---------- Kitaplık ---------- */
.kitap-bek { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 2px dashed var(--line); flex-wrap: wrap; }
.kitap-bek:last-child { border-bottom: 0; }
.kb-orta { flex: 1 1 220px; min-width: 0; }
.kb-orta b { font-size: 19px; }
.kb-yorum { background: #fff6d6; border-radius: 10px; padding: 4px 10px; margin-top: 4px; font-size: 16px; }
.kb-dugme { display: flex; gap: 8px; }
.begeni { color: #f4a300; letter-spacing: 1px; white-space: nowrap; }
.begeni .off { color: var(--star-off); }
.kitaplik { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kitap { display: flex; border-radius: 12px 16px 16px 12px; overflow: hidden; background: #fffdf8; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); min-height: 96px; }
.kt-sirt { flex: 0 0 16px; background: var(--kr); box-shadow: inset -4px 0 0 rgba(0,0,0,.12); }
.kt-govde { padding: 10px 12px; min-width: 0; }
.kt-govde b { font-size: 17px; line-height: 1.2; display: block; overflow-wrap: anywhere; }
.kt-okuyan { margin-top: 6px; font-size: 15px; }
.kt-okuyan span[title] { font-size: 20px; }
.begeni-sec { display: flex; gap: 6px; }
.begeni-sec button { flex: 1; font-size: 34px; min-height: 60px; padding: 0; background: #fff; color: var(--star-off); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.begeni-sec button.on { color: #f4a300; border-color: #ffd65c; background: #fff8dc; }

/* ---------- Veli: okul bilgisi ---------- */
.v-okul { margin-top: -2px; font-weight: 700; }
.v-okul:empty { display: none; }

/* Veli: tüm bölüm kartları aynı boyda; satırlarda durum etiketi gerekirse alta iner */
#vAna .ana-kart.puan { min-height: 120px; }
#vAna .ana-kart.puan .ak-e { width: 84px; height: 84px; font-size: 52px; }
#vAna .ana-kart.puan .ak-ad { font-size: 26px; }
.v-odev { flex-wrap: wrap; }
.v-odev > div { flex: 1 1 180px; min-width: 0; }
@media (max-width: 640px) {
  #vAna .ana-kart.puan { min-height: 96px; }
  #vAna .ana-kart.puan .ak-e { width: 64px; height: 64px; font-size: 38px; }
  #vAna .ana-kart.puan .ak-ad { font-size: 22px; }
}

/* ---------- Ana sayfa düzenleme modu (telefon ekranı gibi) ---------- */
.ana-duzen-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -6px 0 12px; }
.duzen-ac, .duzen-ipucu { display: none; }
#anaSayfa.duzenle .duzen-ac { display: revert; }
#anaSayfa.duzenle .duzen-ipucu { display: inline; color: var(--soft); font-size: 15px; flex: 1 1 260px; }
#anaSayfa.duzenle #anaDuzenle { display: none; }
#anaSayfa.duzenle .ana-izgara { min-height: 110px; border: 3px dashed var(--line); border-radius: 24px; padding: 8px; }
#anaSayfa.duzenle .gizli-alan { display: grid; background: #f6f2ea; }
#anaSayfa.duzenle .ana-kart { animation: titre-kart .35s ease-in-out infinite alternate; cursor: grab; touch-action: none; }
#anaSayfa.duzenle .ana-kart:nth-child(2n) { animation-delay: -.17s; }
#anaSayfa .gizli-alan .ana-kart { filter: grayscale(.85); opacity: .75; }
@keyframes titre-kart { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
@media (prefers-reduced-motion: reduce) { #anaSayfa.duzenle .ana-kart { animation: none; } }
.ana-kart { position: relative; }
.duzen-rozet { display: none; }
#anaSayfa.duzenle .duzen-rozet {
  display: flex; position: absolute; top: -10px; left: -10px; width: 36px; height: 36px; border-radius: 50%;
  align-items: center; justify-content: center; font-size: 26px; font-weight: 800; line-height: 1;
  background: #fff; color: #c1121f; border: 3px solid #c1121f; box-shadow: 0 3px 0 rgba(0,0,0,.15); cursor: pointer; z-index: 2;
}
#anaSayfa.duzenle .duzen-rozet::before { content: "−"; }
#anaSayfa.duzenle .gizli-alan .duzen-rozet { color: #1b7a43; border-color: #1b7a43; }
#anaSayfa.duzenle .gizli-alan .duzen-rozet::before { content: "+"; }
#anaSayfa.duzenle .ana-kart[data-tab="profil"] .duzen-rozet { display: none; }
.surukle-golge { opacity: .35; }

/* ---------- Veli ekranı düzenleyici (telefon çerçevesi) ---------- */
.telefon { max-width: 340px; margin: 6px auto 0; background: #2b2d42; border-radius: 40px; padding: 14px 12px 22px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.tel-ust { width: 90px; height: 8px; border-radius: 99px; background: #555a73; margin: 0 auto 12px; }
.tel-ekran { background: var(--bg); border-radius: 26px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vd-oge { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 8px 10px; box-shadow: 0 3px 0 var(--line); transition: opacity .2s; }
.vd-oge.kapali { opacity: .5; background: #f3efe6; }
.vd-oge.kapali .vd-ad { text-decoration: line-through; }
.vd-tut { font-size: 24px; color: var(--soft); cursor: grab; padding: 4px 6px; touch-action: none; user-select: none; }
.vd-e { font-size: 26px; }
.vd-ad { flex: 1; font-weight: 800; }
.anahtar { position: relative; display: inline-block; width: 56px; height: 32px; margin: 0; flex: 0 0 56px; }
.anahtar input { opacity: 0; width: 0; height: 0; min-height: 0; position: absolute; }
.anahtar span { position: absolute; inset: 0; background: #cfc8b8; border-radius: 99px; cursor: pointer; transition: background .2s; }
.anahtar span::before { content: ""; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.anahtar input:checked + span { background: #1b9e4b; }
.anahtar input:checked + span::before { transform: translateX(24px); }
.anahtar input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
#anaSayfa.duzenle button.duzen-ac { display: inline-flex; }

/* ---------- Yönetim (yalnızca admin) ---------- */
.yon-ozet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.yo { background: #1b9e4b; color: #fff; border-radius: 18px; padding: 14px 8px; text-align: center; display: flex; flex-direction: column; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.yo b { font-size: 34px; line-height: 1.1; }
.yo span { font-size: 15px; font-weight: 700; opacity: .92; }
.yo.gec { background: #e09b00; }
.yo.yok { background: #c1121f; }
.yo.ogr { background: var(--blue); }
@media (max-width: 640px) { .yon-ozet { grid-template-columns: 1fr 1fr; } }
.yon-satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 2px dashed var(--line); }
.yon-satir:last-child { border-bottom: 0; }
.yon-satir.askida .ys-bilgi > b { text-decoration: line-through; color: var(--soft); }
.ys-bilgi { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.ys-bilgi > b { font-size: 19px; }
.yk-alt { font-size: 14px; }
.ys-ogr { flex: 1 1 100%; background: #fffdf8; border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; }
.yon-ogr { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.yon-ogr:last-child { border-bottom: 0; }
.yon-ogr .yk-av { width: 40px; height: 40px; font-size: 24px; flex: 0 0 40px; }
.yo-ad { flex: 1 1 160px; display: flex; flex-direction: column; min-width: 0; }
.btn.ghost { background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 15px; border-radius: 12px; }

/* ---------- Google ile giriş / kayıt ---------- */
.google-kutu { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--line); }
.google-kutu p { margin: 0 0 10px; font-size: 16px; color: var(--soft); }
.google-dugme { background: #fff; color: #3c4043; border: 3px solid #dadce0; box-shadow: 0 4px 0 #dadce0; font-size: 18px; gap: 10px; }
.g-logo { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 17px;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }

/* Öğrenci kodu */
.veli-giris #kod { text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; }
.vk-kod b { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; }
@media print { .vk-kod b { font-size: 17pt; } }

/* ---------- Veli mesajları ---------- */
.ana-kart.mesaj { background: linear-gradient(135deg, #00b4d8, #0077b6); }
.ana-kart.yil { background: linear-gradient(135deg, #9d4edd, #5a189a); }
.ak-bilgi.dikkat { background: #fff; color: #c1121f; }
.card.mesaj.yeni { border-color: #00b4d8; box-shadow: 0 6px 0 #a8e6f5; }
.m-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.m-bas .pn-avatar { width: 48px; height: 48px; font-size: 28px; }
.m-kim { display: flex; flex-direction: column; min-width: 0; }
.m-kim b { font-size: 19px; }
.m-yeni { color: #c1121f; }
.m-metin { white-space: pre-line; font-size: 18px; overflow-wrap: anywhere; }
.m-cevap { margin-top: 8px; background: #e5f6fb; border-radius: 12px; padding: 8px 12px; white-space: pre-line; overflow-wrap: anywhere; }
.m-yaz { margin-top: 10px; }
.m-say { text-align: right; font-size: 14px; }
.v-mesaj { padding: 10px 0; border-bottom: 2px dashed var(--line); }
.v-mesaj:last-child { border-bottom: 0; }
.seg button.on[data-mt] { background: #0096c7; color: #fff; border-color: transparent; }

/* ---------- KVKK ---------- */
.kvkk-alt { text-align: center; font-size: 15px; color: var(--soft); margin: 16px 0 0; }
.kvkk-alt a, .kvkk-chk a, .kvkk-liste a { color: var(--blue); }
.kvkk-chk { align-items: flex-start; font-weight: 600; font-size: 15px; }
.kvkk-chk input { flex: 0 0 26px; }
.kvkk-liste { padding-left: 22px; margin: 0 0 12px; }
.kvkk-liste li { margin-bottom: 4px; }

/* ---------- Dosya seçme düğmesi, devretme listesi ---------- */
label.btn.dosya-sec { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; flex: 0 0 auto; }
.dv-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; max-height: 280px; overflow: auto; padding: 8px; border: 2px solid var(--line); border-radius: 14px; }
.tablo-kutu { overflow-x: auto; }
#yonYedekSon { margin: 0 0 10px; }

/* ---------- Öğrenci resmi seçici ---------- */
.av-renkler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.av-renk { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.av-renk.on { box-shadow: 0 0 0 4px var(--blue); }
.av-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.av-e { min-height: 58px; padding: 0; font-size: 32px; border-radius: 50%; color: inherit; border: 3px solid transparent; box-shadow: none; aspect-ratio: 1; }
.av-e.on { border-color: var(--blue); transform: scale(1.08); }
.ogr-ad { display: inline-flex; align-items: center; gap: 10px; }
.ogr-av { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 26px; color: inherit; box-shadow: 0 3px 0 rgba(0,0,0,.12); flex: 0 0 44px; }
.v-av { min-height: 0; padding: 0; color: inherit; box-shadow: none; border: 0; }
.v-av:disabled { opacity: 1; cursor: default; }
.v-av:not(:disabled) { cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.v-av:not(:disabled)::after { content: "✏️"; position: absolute; right: -6px; bottom: -6px; font-size: 16px; background: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.v-av { position: relative; }
.av-alt { position: sticky; bottom: -20px; background: var(--card); padding: 12px 0 14px; margin: 6px 0 -14px; border-top: 2px dashed var(--line); }

/* ---------- Resim: canavar, robot, fotoğraf ---------- */
.av-g { width: 1.25em; height: 1.25em; vertical-align: middle; display: inline-block; }
.av-foto { width: 1.4em; height: 1.4em; border-radius: 50%; object-fit: cover; vertical-align: middle; display: inline-block; }
:is(.pn-avatar, .pk-avatar, .yk-av, .s-avatar, .ogr-av, .v-av, .av-e) .av-g { width: 82%; height: 82%; }
:is(.pn-avatar, .pk-avatar, .yk-av, .s-avatar, .ogr-av, .v-av) .av-foto { width: 100%; height: 100%; }
.av-sekmeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-bottom: 12px; }
.av-sekmeler button { min-height: 44px; padding: 6px 8px; font-size: 15px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.av-sekmeler button.on { background: var(--purple); color: #fff; border-color: transparent; box-shadow: 0 3px 0 #5a189a; }
.av-foto-alan { text-align: center; padding: 10px 0; }
.av-not { font-size: 14px; margin-top: 12px; }
.btn.purple { background: var(--purple); }
.dd-p { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-size: 20px; }
.dd-p input { width: 72px; text-align: center; padding-left: 4px; padding-right: 4px; }
.tk-sayi button small { display: block; font-size: 13px; opacity: .9; font-weight: 600; }
.tk-sayi button { flex-direction: column; gap: 0; }

/* ---------- Favoriler (hikâye halkaları) ---------- */
.fav-bar { display: flex; gap: 14px; overflow-x: auto; padding: 6px 4px 10px; margin: 0 -4px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fav { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 82px; min-height: 0; padding: 0;
  background: none; color: var(--ink); box-shadow: none; border-radius: 0; }
.fav:active { transform: scale(.94); box-shadow: none; }
.fav-halka { position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.fav-ic { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: #fff linear-gradient(135deg, #fff, #f3efe6); }
.fav.aktif .fav-halka { background: var(--ink); }
.fav.ekle .fav-halka, .fav.ev .fav-halka { background: var(--line); }
.fav-ad { font-size: 13px; font-weight: 700; line-height: 1.15; text-align: center; max-width: 82px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fav.aktif .fav-ad { color: var(--purple); }
.fav-rozet { position: absolute; top: -2px; right: -2px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: #e63946; color: #fff;
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.fav-yildiz { position: absolute; top: 8px; right: 10px; font-size: 26px; line-height: 1; color: rgba(255,255,255,.85); cursor: pointer; z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,.25); padding: 4px; }
.fav-yildiz.on { color: #ffe066; }
.fav-yildiz:hover { transform: scale(1.15); }
#anaSayfa.duzenle .fav-yildiz { display: none; }
.fav-liste { display: flex; flex-direction: column; gap: 8px; }
.fav-ekle { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .fav-halka { width: 64px; height: 64px; } .fav-ic { font-size: 28px; } .fav { width: 72px; } .fav-ad { max-width: 72px; } .fav-yildiz { font-size: 22px; top: 6px; right: 6px; } }

/* Derslere ayrılmış giriş: doğru + yanlış, boş hesaplanır */
.ders-gir.dy { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--soft); }
.dy-kutu { display: flex; gap: 4px; }
.giris-satir .alanlar .dy-kutu input { width: 58px; flex: 0 0 58px; text-align: center; padding-left: 2px; padding-right: 2px; }
.giris-satir .alanlar .dy-kutu input[data-dersy] { border-color: #f5b3bb; }
.dy-bos { min-height: 1.2em; color: var(--soft); }
.dyb-d { color: #1b7a43; } .dyb-y { color: #c1121f; } .dyb-b { color: var(--soft); }

/* Kayıtlar: sınav grafiği */
.sg-satir { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 40px; gap: 8px; align-items: center; padding: 4px 0; }
.sg-ad { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-iz { position: relative; height: 18px; background: #f1ede4; border-radius: 99px; }
.sg-dolu { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.sg-ort { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); border-radius: 2px; }
.sg-p { text-align: right; }
.sg-ders { margin-bottom: 10px; }
.sg-yigin { display: flex; height: 26px; border-radius: 10px; overflow: hidden; background: #f1ede4; font-size: 13px; font-weight: 800; color: #fff; }
.sg-yigin span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.sg-yigin .d { background: #1b9e4b; } .sg-yigin .y { background: #e63946; } .sg-yigin .b { background: #adb5bd; }

/* ---------- Rastgele seçici tasarımları ---------- */
.sec-tasarim { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.sec-tasarim button { min-height: 48px; padding: 6px; font-size: 17px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.sec-tasarim button.on { background: var(--pink); color: #fff; border-color: transparent; box-shadow: 0 4px 0 #c2255c; }
@media (max-width: 520px) { .sec-tasarim { grid-template-columns: 1fr 1fr; } }
.s-cark { position: relative; width: min(420px, 82vw); aspect-ratio: 1; margin: 0 auto; }
.s-cark svg { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 0 8px #fff, 0 0 0 12px #2b2d42, 0 12px 30px rgba(0,0,0,.2); }
.cark-ok { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 44px; color: #2b2d42; z-index: 2; text-shadow: 0 3px 0 #fff; }
.cark-yazi { fill: #fff; font-weight: 800; font-family: inherit; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: 2px; }
.s-slot { height: 258px; overflow: hidden; margin: 0 auto; max-width: 460px; border-radius: 22px; background: #2b2d42; border: 6px solid #ffb703;
  box-shadow: inset 0 30px 30px -20px rgba(0,0,0,.6), inset 0 -30px 30px -20px rgba(0,0,0,.6); position: relative; }
.s-slot::after { content: ""; position: absolute; left: 6px; right: 6px; top: 86px; height: 86px; border: 4px solid #ffb703; border-radius: 16px; pointer-events: none; }
.slot-oge { height: 86px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; font-size: 28px; }
.slot-oge .yk-av { width: 60px; height: 60px; }
.s-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-width: 760px; margin: 0 auto; perspective: 800px; }
.sk { aspect-ratio: 3 / 4; }
.sk-ic { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.sk.acik .sk-ic { transform: rotateY(180deg); }
.sk-arka, .sk-on { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sk-arka { background: var(--kr); color: #fff; font-size: 40px; font-weight: 800; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(0,0,0,.15);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 8px, transparent 8px 16px); }
.sk-on { background: #fff; border: 4px solid var(--kr); transform: rotateY(180deg); font-size: 16px; }
.sk-on .yk-av { width: 54px; height: 54px; font-size: 32px; }
.sk.parla .sk-arka { transform: scale(1.08); box-shadow: 0 0 0 5px #ffd60a, 0 8px 20px rgba(0,0,0,.25); }
.sk.acik { animation: zipla .5s ease 2; }

/* ---------- Sayfa tasarımları (Profil › Sayfa tasarımı) ---------- */
/* 1) Renkli: varsayılan (yukarıdaki :root) */
/* 2) Okyanus */
html[data-tema="okyanus"] { --bg: #eaf6ff; --line: #c5e2f6; --soft: #557089; --pink: #ff6b9a; --purple: #4361ee; --star-off: #cfe1ee; }
html[data-tema="okyanus"] body { background-image: radial-gradient(circle at 8% 12%, #c8ecff 0 70px, transparent 71px),
  radial-gradient(circle at 92% 20%, #d6f5f0 0 90px, transparent 91px), radial-gradient(circle at 80% 95%, #dde7ff 0 80px, transparent 81px); }
/* 3) Orman */
html[data-tema="orman"] { --bg: #eef7e8; --line: #cfe3c0; --soft: #5f7356; --pink: #e76f51; --purple: #6a994e; --blue: #2a9d8f; --star-off: #d7e5cc; }
html[data-tema="orman"] body { background-image: radial-gradient(circle at 10% 10%, #dcefcf 0 70px, transparent 71px),
  radial-gradient(circle at 90% 18%, #fdf0c8 0 80px, transparent 81px), radial-gradient(circle at 84% 92%, #d3ecdf 0 70px, transparent 71px); }
/* 4) Şeker (pastel) */
html[data-tema="seker"] { --bg: #fdf0f7; --line: #f2d3e6; --soft: #85677a; --purple: #b5179e; --blue: #7b2cbf; --star-off: #f0dde9; }
html[data-tema="seker"] body { background-image: radial-gradient(circle at 10% 10%, #ffd6eb 0 70px, transparent 71px),
  radial-gradient(circle at 92% 18%, #e8dcff 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #fff0c2 0 70px, transparent 71px); }
html[data-tema="seker"] .card { border-style: dashed; }
/* 5) Gece (koyu) */
html[data-tema="gece"] { --bg: #151a2d; --card: #222943; --ink: #eef0ff; --soft: #a7adc9; --line: #39415f; --star-off: #4a5070; color-scheme: dark; }
html[data-tema="gece"] body { background-image: radial-gradient(circle at 10% 10%, #2a2350 0 70px, transparent 71px),
  radial-gradient(circle at 92% 18%, #1f3355 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #213a3a 0 70px, transparent 71px); }
html[data-tema="gece"] :where(button.ghost, .btn.ghost, input, select, textarea, .tabs button, .seg button, .giris-satir, .sonuc, .rozet, .pk,
  .pk-eksi, .pn-sec button, .dv-e, .dp-kutu, .dd-emoji, .dd-palet, .dd-pe, .yk, .s-avatar, .tk-uye, .kitap, .begeni-sec button, .vd-oge,
  .ys-ogr, .av-sekmeler button, .sec-tasarim button, .sk-on, .konfeti-yazi, .pencere-kutu, .duzen-rozet, .google-dugme, .tema-sec button) {
  background-color: var(--card); color: var(--ink); }
html[data-tema="gece"] :where(.ys, .g-rozet, .db-iz, .sg-iz, .sg-yigin, .h-iz, .z-iz, .ses-iz, .kod, details.toplu code, .gizli-alan, .vd-oge.kapali) { background-color: #2f3756; }
html[data-tema="gece"] :where(.dpy, .rozet.var, .kb-yorum, .v-duyuru, .sonuc .not, .pk.tum, .yk.gec, .begeni-sec button.on) { background-color: #3a3422; color: var(--ink); }
html[data-tema="gece"] :where(.yk.yok, .yk.od-yapmadi) { background-color: #3d2431; }
html[data-tema="gece"] :where(.m-cevap) { background-color: #1f3a4a; }
html[data-tema="gece"] .kod { color: #c8b6ff; }
html[data-tema="gece"] .msg.ok { background: #1d3b2c; color: #9ff0bf; }
html[data-tema="gece"] .msg.err { background: #4a1f27; color: #ffb3bd; }
html[data-tema="gece"] .g-izgara { stroke: #39415f; }
html[data-tema="gece"] .g-deger, html[data-tema="gece"] .g-eksen { fill: var(--ink); }
html[data-tema="gece"] a { color: #8ab4ff; }
@media print { html[data-tema] { --bg: #fff; --card: #fff; --ink: #2b2d42; --soft: #6b6f80; --line: #f0e3c4; } }

/* Profil: tasarım seçici */
.tema-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tema-sec button { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; min-height: 0; background: #fff; color: var(--ink);
  border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tema-sec button.on { border-color: var(--purple); box-shadow: 0 4px 0 var(--purple); }
.tema-ornek { height: 64px; border-radius: 12px; display: flex; gap: 6px; align-items: flex-end; padding: 8px; }
.tema-ornek i { flex: 1; border-radius: 6px; }

/* ---------- Veli: Okuma Macerası ---------- */
.om-kahraman { background: linear-gradient(135deg, #43aa8b, #2b8a6e); color: #fff; border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.om-seviye { display: flex; align-items: center; gap: 14px; }
.om-rozet { width: 86px; height: 86px; flex: 0 0 86px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 52px; box-shadow: 0 0 0 5px rgba(255,255,255,.35); animation: zipla 1.6s ease infinite; }
.om-ust { font-size: 14px; font-weight: 700; opacity: .9; }
.om-ad { font-size: 28px; font-weight: 800; line-height: 1.1; }
.om-say { font-size: 17px; }
.om-bek { background: rgba(255,255,255,.25); border-radius: 99px; padding: 0 8px; }
.om-iz { height: 18px; background: rgba(255,255,255,.3); border-radius: 99px; margin: 14px 0 6px; overflow: hidden; }
.om-dolu { height: 100%; background: linear-gradient(90deg, #ffd60a, #ffb703); border-radius: 99px; transition: width .6s; }
.om-hedef { font-size: 17px; }
.om-yol { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.om-yol span { flex: 1 1 0; min-width: 40px; text-align: center; background: rgba(0,0,0,.15); border-radius: 12px; padding: 4px 2px; font-size: 22px; line-height: 1.1; opacity: .7; }
.om-yol span.acik { background: rgba(255,255,255,.3); opacity: 1; }
.om-yol small { display: block; font-size: 12px; font-weight: 700; }
.om-tirtil { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 6px 0; }
.tt-bas { font-size: 46px; line-height: 1; margin-right: -4px; transform: scaleX(-1); }
.tt-halka { width: 44px; height: 44px; margin: 4px -6px 4px 0; border-radius: 50%; background: var(--tr); color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; border: 3px solid var(--card); box-shadow: 0 3px 0 rgba(0,0,0,.15); text-transform: uppercase; }
.tt-halka:nth-child(odd) { transform: translateY(-5px); }
.tt-halka.bek { background: transparent; color: var(--soft); border: 3px dashed var(--soft); box-shadow: none; }
.tt-bos { color: var(--soft); font-weight: 700; margin-left: 10px; }
.om-ekle-dugme { width: 100%; min-height: 76px; font-size: 24px; margin-bottom: 16px; flex-direction: column; gap: 0; border-radius: 22px;
  background: linear-gradient(135deg, #ff7aa8, #d63a7a); box-shadow: 0 6px 0 #a61e5a; animation: nabiz 2.2s ease infinite; }
.om-ekle-dugme span { font-size: 15px; opacity: .9; }
@keyframes nabiz { 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .om-ekle-dugme, .om-rozet { animation: none; } }
.om-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.om-kart { display: flex; gap: 10px; align-items: flex-start; border: 3px solid var(--tr); border-radius: 16px; padding: 10px; background: var(--card); }
.om-kapak { font-size: 34px; }
.om-k-ic { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.om-k-ic b { overflow-wrap: anywhere; }
.om-oneri { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.om-o { flex: 0 0 160px; display: flex; flex-direction: column; gap: 2px; border-radius: 16px; padding: 12px; background: var(--card); border: 3px solid var(--tr); }
.om-o-e { font-size: 34px; }
.om-o b { overflow-wrap: anywhere; line-height: 1.2; }
.om-o-say { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--tr); }
.kt-satir { display: grid; grid-template-columns: minmax(120px, 210px) 1fr 32px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.kt-kim { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-tirtil { display: flex; align-items: center; flex-wrap: wrap; font-size: 22px; }
.kt-tirtil i { width: 18px; height: 18px; border-radius: 50%; margin-left: -3px; border: 2px solid var(--card); }

/* Tasarıma göre ana sayfa kartları ve favori halkaları */
html[data-tema="okyanus"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #4361ee,#3a0ca3); }
html[data-tema="okyanus"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #4cc9f0,#4895ef); }
html[data-tema="okyanus"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #2ec4b6,#168aad); }
html[data-tema="okyanus"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #3a86ff,#1e6091); }
html[data-tema="okyanus"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #48cae4,#0096c7); }
html[data-tema="okyanus"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #7209b7,#560bad); }
html[data-tema="okyanus"] .ana-kart.puan { background: linear-gradient(135deg, #3a86ff,#1e6091); }
html[data-tema="orman"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #6a994e,#386641); }
html[data-tema="orman"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #a7c957,#6a994e); }
html[data-tema="orman"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #2a9d8f,#21867a); }
html[data-tema="orman"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #e9c46a,#d4a017); }
html[data-tema="orman"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #bc6c25,#8b4513); }
html[data-tema="orman"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #52b788,#2d6a4f); }
html[data-tema="orman"] .ana-kart.puan { background: linear-gradient(135deg, #e9c46a,#d4a017); }
html[data-tema="seker"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #ff8fab,#fb6f92); }
html[data-tema="seker"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #cdb4db,#a77fc9); }
html[data-tema="seker"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #ffafcc,#f478a8); }
html[data-tema="seker"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #a2d2ff,#7ab8f5); }
html[data-tema="seker"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #ffc8dd,#f49ac1); }
html[data-tema="seker"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #b8f2e6,#5ec2b7); }
html[data-tema="seker"] .ana-kart.puan { background: linear-gradient(135deg, #ffafcc,#f478a8); }
html[data-tema="gece"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #3a0ca3,#240046); }
html[data-tema="gece"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #4361ee,#1d3557); }
html[data-tema="gece"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #7209b7,#3c096c); }
html[data-tema="gece"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #0f4c5c,#073b4c); }
html[data-tema="gece"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #5a189a,#240046); }
html[data-tema="gece"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #1b4965,#0b2545); }
html[data-tema="gece"] .ana-kart.puan { background: linear-gradient(135deg, #0f4c5c,#073b4c); }
html[data-tema="seker"] .ana-kart { color: #4a2c40; } html[data-tema="seker"] .ana-kart .ak-bilgi { background: rgba(255,255,255,.55); }
html[data-tema="gece"] .ana-kart { box-shadow: 0 6px 0 rgba(0,0,0,.35); }

/* ---------- Haftalık bülten ---------- */
.ana-kart.bul { background: linear-gradient(135deg, #ef476f, #b5179e); }
.bl-hafta-sec { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.bl-hafta-sec b { font-size: 22px; }
.bl-hafta-sec button { min-width: 56px; }
.bulten { color: var(--ink); }
.bl-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.bl-ust { color: var(--purple); font-weight: 700; font-size: 15px; }
.bl-ad { font-size: 24px; font-weight: 800; line-height: 1.1; }
.bl-hafta { background: var(--purple); color: #fff; border-radius: 99px; padding: 4px 14px; font-weight: 800; white-space: nowrap; }
.bl-yildiz { margin-top: 8px; background: #fff6d6; border: 2px solid #ffd65c; border-radius: 12px; padding: 6px 12px; font-weight: 800; color: #8a6200; }
.bl-ozet { font-size: 18px; margin: 10px 0; }
.bl-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bl-kutu { border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.bl-kutu h3 { margin: 0 0 4px; font-size: 16px; }
.bl-satir { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding: 2px 0; }
.bl-satir span { min-width: 0; overflow-wrap: anywhere; }
.bl-alt { font-size: 13px; color: var(--soft); }
.bl-not { margin-top: 10px; background: #e5f6fb; border-radius: 12px; padding: 8px 12px; }
.bl-not p { margin: 4px 0 0; white-space: pre-line; }
.bl-ozel-et { margin-top: 12px; font-size: 15px; }
html[data-tema="gece"] :where(.bl-yildiz) { background-color: #3a3422; color: #ffd166; }
html[data-tema="gece"] :where(.bl-not) { background-color: #1f3a4a; }
@media print {
  #yazdir.bultenler { display: block; }
  .bulten { break-after: page; font-size: 12pt; color: #000; }
  .bulten:last-child { break-after: auto; }
  .bl-kutu { break-inside: avoid; }
}

/* ---------- Ek sayfa tasarımları ---------- */
/* 🌻 Ayçiçeği */
html[data-tema="gunes"] { --bg: #fffbe6; --line: #f5e3a3; --soft: #7a6a3a; --pink: #f3722c; --purple: #e09f3e; --blue: #2a9d8f; --star-off: #efe2b8; }
html[data-tema="gunes"] body { background-image: radial-gradient(circle at 10% 10%, #fff1b8 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #ffe0c2 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #e6f5d0 0 70px, transparent 71px); }
html[data-tema="gunes"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #ffd166,#fcbf49); }
html[data-tema="gunes"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #ffbe0b,#fb8500); }
html[data-tema="gunes"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #f9844a,#f3722c); }
html[data-tema="gunes"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #90be6d,#43aa8b); }
html[data-tema="gunes"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #f8961e,#e76f51); }
html[data-tema="gunes"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #e9c46a,#c9a227); }
html[data-tema="gunes"] .ana-kart.puan { background: linear-gradient(135deg, #ffbe0b,#fb8500); }
html[data-tema="gunes"] .ana-kart { color: #4a3b12; } html[data-tema="gunes"] .ana-kart .ak-bilgi { background: rgba(255,255,255,.55); }
/* 🍉 Karpuz */
html[data-tema="karpuz"] { --bg: #fff3f3; --line: #f6cfd3; --soft: #7a5a5e; --pink: #ef476f; --purple: #2d6a4f; --blue: #40916c; --star-off: #f1dadd; }
html[data-tema="karpuz"] body { background-image: radial-gradient(circle at 10% 10%, #ffd6dc 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #d8f3dc 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #ffe5d9 0 70px, transparent 71px); }
html[data-tema="karpuz"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #ef476f,#d62850); }
html[data-tema="karpuz"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #52b788,#2d6a4f); }
html[data-tema="karpuz"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #ff8fa3,#ff4d6d); }
html[data-tema="karpuz"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #95d5b2,#40916c); }
html[data-tema="karpuz"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #f4845f,#e5383b); }
html[data-tema="karpuz"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #74c69d,#1b4332); }
html[data-tema="karpuz"] .ana-kart.puan { background: linear-gradient(135deg, #52b788,#2d6a4f); }
/* 🍇 Üzüm */
html[data-tema="uzum"] { --bg: #f6f0fd; --line: #e0d2f5; --soft: #6c5a85; --pink: #d63384; --purple: #7209b7; --blue: #560bad; --star-off: #e6dcf3; }
html[data-tema="uzum"] body { background-image: radial-gradient(circle at 10% 10%, #ead7ff 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #ffd6f0 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #dcd3ff 0 70px, transparent 71px); }
html[data-tema="uzum"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #9d4edd,#7209b7); }
html[data-tema="uzum"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #c77dff,#9d4edd); }
html[data-tema="uzum"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #e0aaff,#b16ee8); }
html[data-tema="uzum"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #5a189a,#3c096c); }
html[data-tema="uzum"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #f72585,#b5179e); }
html[data-tema="uzum"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #7b2cbf,#480ca8); }
html[data-tema="uzum"] .ana-kart.puan { background: linear-gradient(135deg, #c77dff,#9d4edd); }
/* 🦖 Dinozor */
html[data-tema="dinozor"] { --bg: #f3f6e8; --line: #d7e0bc; --soft: #5e6647; --pink: #e76f51; --purple: #606c38; --blue: #283618; --star-off: #dfe5cc; }
html[data-tema="dinozor"] body { background-image: radial-gradient(circle at 10% 10%, #e1efc4 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #ffe8cc 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #d8ecd0 0 70px, transparent 71px); }
html[data-tema="dinozor"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #80b918,#55a630); }
html[data-tema="dinozor"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #dda15e,#bc6c25); }
html[data-tema="dinozor"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #2b9348,#007f5f); }
html[data-tema="dinozor"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #f4a261,#e76f51); }
html[data-tema="dinozor"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #aacc00,#7cb518); }
html[data-tema="dinozor"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #8d6e63,#5d4037); }
html[data-tema="dinozor"] .ana-kart.puan { background: linear-gradient(135deg, #dda15e,#bc6c25); }
/* 🍦 Dondurma */
html[data-tema="dondurma"] { --bg: #fff8f2; --line: #f3dccb; --soft: #7d6b62; --pink: #ff7096; --purple: #7ec4cf; --blue: #5aa9e6; --star-off: #f1e1d6; }
html[data-tema="dondurma"] body { background-image: radial-gradient(circle at 10% 10%, #ffe5ec 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #d8f8ff 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #fff1cf 0 70px, transparent 71px); }
html[data-tema="dondurma"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #ffb5a7,#f08080); }
html[data-tema="dondurma"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #9bf6ff,#5ec2d6); }
html[data-tema="dondurma"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #fcd5ce,#f9a8a8); }
html[data-tema="dondurma"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #caffbf,#7ed4a0); }
html[data-tema="dondurma"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #ffd6a5,#f4a261); }
html[data-tema="dondurma"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #bdb2ff,#9381ff); }
html[data-tema="dondurma"] .ana-kart.puan { background: linear-gradient(135deg, #9bf6ff,#5ec2d6); }
html[data-tema="dondurma"] .ana-kart { color: #4a3530; } html[data-tema="dondurma"] .ana-kart .ak-bilgi { background: rgba(255,255,255,.55); }
/* ❄️ Kar */
html[data-tema="kar"] { --bg: #f2f8fc; --line: #cfe3f0; --soft: #57707f; --pink: #5e60ce; --purple: #4ea8de; --blue: #5390d9; --star-off: #d9e8f1; }
html[data-tema="kar"] body { background-image: radial-gradient(circle at 10% 10%, #e0f4ff 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #eef0ff 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #e6fbff 0 70px, transparent 71px); }
html[data-tema="kar"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #90e0ef,#48cae4); }
html[data-tema="kar"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #a2d2ff,#5390d9); }
html[data-tema="kar"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #b8c0ff,#7400b8); }
html[data-tema="kar"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #64dfdf,#48bfe3); }
html[data-tema="kar"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #cddafd,#8e9aaf); }
html[data-tema="kar"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #56cfe1,#4ea8de); }
html[data-tema="kar"] .ana-kart.puan { background: linear-gradient(135deg, #a2d2ff,#5390d9); }
/* 🏖️ Plaj */
html[data-tema="plaj"] { --bg: #fdf7ec; --line: #f0e0bf; --soft: #7a6a50; --pink: #ff6b6b; --purple: #00a6a6; --blue: #0081a7; --star-off: #ece0c8; }
html[data-tema="plaj"] body { background-image: radial-gradient(circle at 10% 10%, #d6f6f7 0 70px, transparent 71px), radial-gradient(circle at 92% 18%, #ffe8cc 0 90px, transparent 91px), radial-gradient(circle at 85% 92%, #ffdede 0 70px, transparent 71px); }
html[data-tema="plaj"] .ana-izgara .ana-kart:nth-child(6n+1):not(.puan) { background: linear-gradient(135deg, #00afb9,#0081a7); }
html[data-tema="plaj"] .ana-izgara .ana-kart:nth-child(6n+2):not(.puan) { background: linear-gradient(135deg, #fed9b7,#f4a261); }
html[data-tema="plaj"] .ana-izgara .ana-kart:nth-child(6n+3):not(.puan) { background: linear-gradient(135deg, #f07167,#e63946); }
html[data-tema="plaj"] .ana-izgara .ana-kart:nth-child(6n+4):not(.puan) { background: linear-gradient(135deg, #4cc9f0,#4895ef); }
html[data-tema="plaj"] .ana-izgara .ana-kart:nth-child(6n+5):not(.puan) { background: linear-gradient(135deg, #ffd166,#f4a261); }
html[data-tema="plaj"] .ana-izgara .ana-kart:nth-child(6n+6):not(.puan) { background: linear-gradient(135deg, #2ec4b6,#168aad); }
html[data-tema="plaj"] .ana-kart.puan { background: linear-gradient(135deg, #fed9b7,#f4a261); }
.ana-kart.vgiris { background: linear-gradient(135deg, #5e60ce, #4361ee); }
.ana-kart.sert { background: linear-gradient(135deg, #ffb703, #fb8500); }

/* Not türleri: sınav giriş seçimi ve rozetler */
.seg.tur-sec { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.seg.tur-sec button { font-size: 17px; padding: 8px 6px; }
.seg button.on.yazili, .badge.yazili { background: #4361ee; color: #fff; border-color: transparent; }
.seg button.on.sozlu, .badge.sozlu { background: #2a9d8f; color: #fff; border-color: transparent; }
.seg button.on.proje, .badge.proje { background: #f4a100; color: #fff; border-color: transparent; }
.seg button.on.performans, .badge.performans { background: #8e6cf0; color: #fff; border-color: transparent; }
.dn-not { display: inline-block; margin: 2px 8px 2px 0; white-space: nowrap; }
.dn-not small { color: var(--soft); font-weight: 600; }
.dn-ort { font: 800 20px "Baloo 2", system-ui, sans-serif; color: var(--purple); }