/* ==========================================================================
   Dikey kartlar: portaldeki içerik kartları (atölye, canlı ders, veli panelindeki dersler) yatay satır değil,
   ızgarada yan yana dizilen dikey karttır — üstte kapak / tarih, altında bilgiler, en altta işlem düğmeleri.
   Geniş ekranda 3, orta genişlikte 2, telefonda 1 sütun.
   ========================================================================== */

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: stretch; }

/* Ortak dikey kart iskeleti */
.vgrid > .card { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.vgrid > .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.vgrid > .card.is-past { opacity: .82; }

/* ------------------------------------------------------------------ Atölye kartı */
.vgrid > .ws-card { padding: 0; overflow: hidden; }
.vgrid > .ws-card .ws-cover { margin: 12px 12px 0; aspect-ratio: 16 / 9; }
.vgrid > .ws-card > div:not(.ws-action) { padding: 14px 18px 0; flex: 1; }
.vgrid > .ws-card .h3 { font-size: 17px; line-height: 1.3; }
.vgrid > .ws-card .meta { gap: 6px 12px; }
.vgrid > .ws-card .ws-action { padding: 16px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: end; }
.vgrid > .ws-card .ws-action form, .vgrid > .ws-card .ws-action .btn { width: 100%; }
.vgrid > .ws-card .ws-action .btn { justify-content: center; }

/* ------------------------------------------------------------------ Eğitmen: canlı ders kartı (.ws) */
.vgrid > a.ws { padding: 18px; gap: 12px; }
.vgrid > a.ws .ws-date { display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start; padding: 6px 12px; border-radius: 12px; }
.vgrid > a.ws .ws-date .d { font-size: 22px; }
.vgrid > a.ws .ws-date .m { margin: 0; }
.vgrid > a.ws > div[style*="min-width"] { flex: 1; }
.vgrid > a.ws .ws-action { text-align: left !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ Öğrenci / ders sayfası: canlı ders kartı (.live-row) */
.vgrid > .live-row { flex-wrap: nowrap; padding: 18px; gap: 12px; }
.vgrid > .live-row > .ibox { align-self: flex-start; }
.vgrid > .live-row > div[style*="flex:1"] { flex: 1 !important; }
.vgrid > .live-row > .chip { align-self: flex-start; }
.vgrid > .live-row > form, .vgrid > .live-row > a.btn { margin-top: auto; }
.vgrid > .live-row > form .btn, .vgrid > .live-row > a.btn { width: 100%; justify-content: center; }

/* ------------------------------------------------------------------ Veli paneli: aldığı dersler */
.vp-courses { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.vp-course { grid-template-columns: 1fr; align-items: stretch; align-content: start; gap: 12px; padding: 10px 10px 14px; border-radius: 16px; }
.vp-course-cover { width: 100%; border-radius: 12px; }
.vp-course-main { padding: 0 4px; display: grid; gap: 4px; }
.vp-course-top { flex-direction: column; align-items: flex-start; }
.vp-course-meta { flex-direction: column; align-items: flex-start; }

/* ------------------------------------------------------------------ Vitrin onayı kartları (yönetim, eğitmen, öğretmen, mentör) */
.sr-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.sr-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.sr-thumb { min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; }

/* Kart içinde kontenjan çubuğu tam genişlik, yazı altında */
.vgrid .seat-bar { display: grid; grid-template-columns: 1fr; gap: 6px; }
.vgrid .seat-bar .progress { width: 100%; }

/* ------------------------------------------------------------------ Kurs kayıt dönemi ve programı */
.intake-box { display: grid; gap: 14px; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2, #F5F8F7); min-width: 0; }
.intake-box legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-weight: 800; font-size: 15px; }
.intake-box .hint { margin: 0; }
.intake-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-chip { position: relative; cursor: pointer; }
.intake-chip input { position: absolute; opacity: 0; pointer-events: none; }
.intake-chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--text); }
.intake-chip input:checked + span { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.intake-chip input:focus-visible + span { outline: 2px solid var(--primary-green); outline-offset: 2px; }
.intake-card { margin-bottom: 18px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, #F2FAF6, #fff); color: var(--text); }
.intake-card .h3, .intake-card .intake-facts dd { color: var(--text); }
.intake-card .h3 .i { color: var(--primary-green); }
.intake-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.intake-head .h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.intake-status { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 700; font-size: 14px; }
.intake-status.is-open { color: var(--dark-green); }
.intake-status.is-soon { color: var(--info, #2563EB); }
.intake-status.is-full, .intake-status.is-closed { color: #B45309; }
.intake-aud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.intake-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 0; }
.intake-facts > div { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.intake-facts dt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.intake-facts dd { margin: 4px 0 0; font-weight: 800; font-size: 15px; }
.cc-intake { display: grid; gap: 4px; margin: 2px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cc-intake > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-intake .i { flex: none; width: 14px; height: 14px; color: var(--primary-green); }
.cc-state { font-weight: 800; }
.cc-state.is-open { color: var(--dark-green); }
.cc-state.is-soon { color: var(--info, #2563EB); }
.cc-state.is-full, .cc-state.is-closed { color: #B45309; }
.cc-state.is-full .i, .cc-state.is-closed .i { color: #B45309; }

/* ------------------------------------------------------------------ Kurs kartı: kayıtlı derste fiyat yerine ilerleme */
.course-foot .cc-progress { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cc-progress-text { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cc-progress-text strong { font-weight: 800; color: var(--text); }
body.has-circuit.is-student-portal .course-card .cc-progress-text { color: rgba(255, 255, 255, .78); }
body.has-circuit.is-student-portal .course-card .cc-progress-text strong { color: #fff; }
body.has-circuit.is-student-portal .course-card .progress { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------------ Öğrenci Paneli → Bugün (yapılacaklar, canlı dersler, yoklama, bildirimler) */
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.today-card { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.today-card-h { display: flex; align-items: center; gap: 10px; }
.today-card-h .h3 { font-size: 16px; margin: 0; flex: 1; min-width: 0; }
.today-list { display: grid; gap: 6px; }
.today-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); color: var(--text); min-width: 0; }
a.today-item:hover { background: var(--tint); }
.today-item form { margin-left: auto; flex: none; }
.today-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--dark-green); border: 1px solid var(--border); }
.today-ico.is-quiz { color: var(--info); }
.today-txt { display: grid; min-width: 0; flex: 1; }
.today-txt strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-item .chip { flex: none; }
.today-date { width: 40px; height: 44px; flex: none; border-radius: 10px; display: grid; place-content: center; justify-items: center; gap: 2px; background: #fff; border: 1px solid var(--border); line-height: 1; }
.today-date b { font-size: 16px; font-weight: 800; }
.today-date small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--dark-green); }
.today-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
.today-empty .i { color: var(--primary-green); flex: none; }
.today-att { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.today-sub { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.today-notes { display: grid; gap: 2px; }
.today-notes a { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; font-size: 13px; color: var(--text); }
.today-notes a:hover { background: var(--surface-2); }
.today-notes small { font-size: 11.5px; color: var(--muted); }
.today-notes .is-unread a { position: relative; font-weight: 700; }
/* Okunmamış işareti: inset gölge yuvarlak köşede kıvrılıp üst/alt kenarda çizgi bırakıyordu; düz çubuk */
.today-notes .is-unread a::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary-green); }
@media (max-width: 1100px) { .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .today-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 680px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }
/* Karşılama kartı (öğrenci paneli): tablet genişliğinde sayaçlar metni 64 px'e sıkıştırıyordu; sayaçlar 2×2'ye geçer */
@media (min-width: 769px) and (max-width: 1180px) {
  .welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .welcome .welcome-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome .welcome-stats .wstat { min-width: 0; }
}

/* ------------------------------------------------------------------ Bootcamp'lerim (öğrencinin canlı dersleri) */
.lv-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.lv-summary > div { display: grid; padding: 10px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-width: 96px; }
.lv-summary .is-warn { border-color: #F3DDB0; background: var(--warning-bg); }
.lv-sum-n { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.lv-sum-k { font-size: 12px; font-weight: 600; color: var(--muted); }
.vgrid > .lv-card { padding: 18px; gap: 10px; }
.lv-card.is-live { border-color: var(--primary-green); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.lv-top { display: flex; align-items: center; gap: 12px; }
.lv-date { width: 48px; height: 52px; flex: none; border-radius: 12px; display: grid; place-content: center; justify-items: center; gap: 3px; line-height: 1; background: var(--tint); color: var(--deep-green); }
.lv-date b { font-size: 19px; font-weight: 800; }
.lv-date small { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--dark-green); }
.lv-card.is-past .lv-date { background: var(--surface-2); color: var(--muted); }
.lv-when { display: grid; flex: 1; min-width: 0; }
.lv-when strong { font-size: 14.5px; }
.lv-when span { font-size: 12.5px; color: var(--muted); }
.lv-title { font-size: 16px; line-height: 1.35; margin: 0; }
.lv-meta { margin: 0; }
.lv-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------ Veli paneli: çocuğun öğretmenleri (mesaj kısayolu) */
.vp-staff { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.vp-staff-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vp-staff ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.vp-staff li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); min-width: 0; }
.vp-staff-n { display: grid; flex: 1; min-width: 0; }
.vp-staff-n strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-staff-n small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-staff .btn { flex: none; }

/* ------------------------------------------------------------------ Öğretmen / Mentör: Bugün akademide kartı */
.ta-came { display: flex; align-items: baseline; gap: 6px; }
.ta-came strong { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1; }
.ta-came span { font-size: 13px; color: var(--muted); font-weight: 600; }
.ta-counts { display: grid; gap: 6px; }
.ta-counts li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.ta-counts li span { flex: 1; }
.ta-counts .is-inside, .ta-counts .is-present { color: var(--dark-green); }
.ta-counts .is-absent { color: var(--danger); background: var(--danger-bg); }
.ta-counts .is-excused { color: var(--info); }