/* SAHNE · KULÜPLER: KULÜBÜ OLMAYAN ÖĞRENCİ → KULÜBE EKLENİR → «KATILAMAYACAĞIM» (includes/scenes/clubs.php) — adımlar:
   s1 Cem Özer'in «Kulüp seçin» seçicisi açılır · s2 «Akıl ve Zekâ Oyunları Kulübü» seçilir · s3 «Ekle» → satır düşer, sayaçlar
   (467 → 466, 10 → 9, 80 → 81), «Başarılı» penceresi → «Tamam» · s4 öğrencinin telefonu: Kulüplerim · s5 sayfa kayar,
   «Katılamayacağım» → «Neden» · s6 «Doktor randevusu» yazılır, «Bildir» · s7 sayfa yenilenir: yeşil not + danışmana bildirim.
   Telefon her kapta aynı genişlikte (236 px): içindeki kaydırma miktarı (--sc) sabittir. */
.clb { container-type: inline-size; --d: 0s; --pw: 236px; --sc: 164px;
  --clb-ok: #047857; --clb-ok-ink: #065f46; --clb-spring: cubic-bezier(.34, 1.56, .64, 1); --clb-scroll: cubic-bezier(.32, .12, .2, 1);
  font-size: 11px; line-height: 1.3; }
.clb.s2 { --d: .5s; } .clb.s3 { --d: .55s; } .clb.s4 { --d: 0s; }
.clb-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clb-st { position: relative; height: 456px; }

/* çapraz geçiş: aynı hücrede üst üste; on-A-B = A. adımdan B. adıma kadar görünür */
.clb-x { display: inline-grid; min-width: 0; vertical-align: top; }
.clb-x > * { grid-area: 1 / 1; min-width: 0; }
.clb [class^="on-"], .clb [class*=" on-"] { opacity: 0; transform: translateY(3px); transition: opacity .28s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.clb:not(.s2) .on-0-2, .clb.s2 .on-2, .clb:not(.s3) .on-0-3, .clb.s3 .on-3 { opacity: 1; transform: none; }
/* sayaç: eski değer yukarı kayıp çıkar, yenisi alttan gelir */
.clb-od { overflow: hidden; font-variant-numeric: tabular-nums; }
.clb-od > .on-3 { transform: translateY(80%); }
.clb.s3 .clb-od > .on-0-3 { transform: translateY(-80%); }
.clb.s3 .clb-od > * { transition-delay: .62s; }
.clb-od--r { justify-items: end; }

/* imleç: .clb-hit tıklama noktası; ok ucu tam orada. --fx/--fy: bir önceki tıklamanın yeri (imleç oradan kayar) */
.clb-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.clb-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.clb-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes clb-cur { 0% { opacity: 0; transform: translate(var(--fx, 14px), var(--fy, 12px)); } 10% { opacity: 1; } 38% { transform: none; scale: 1; }
  52% { scale: .8; } 66%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes clb-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes clb-push { 50% { scale: .94; } }

/* ── yönetim penceresi ── */
.clb-win { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-bg-2); }
.clb-bant { flex: none; margin: 10px 10px 0; border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.clb-band { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.clb-bico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.clb-bico .clb-i { width: 17px; height: 17px; stroke-width: 1.8; }
.clb-ttl { flex: 1; min-width: 0; }
.clb-ttl > b { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.015em; }
.clb-help { width: 15px; height: 15px; stroke-width: 1.8; opacity: .85; }
.clb-ttl small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 15px; font-weight: 600; color: rgba(255, 255, 255, .84); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clb-new { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; color: var(--navy); font-size: 11.5px; font-weight: 800;
  box-shadow: 0 1px 2px rgba(11, 36, 64, .25), inset 0 -1px 0 rgba(16, 37, 64, .06); }
.clb-new .clb-i { width: 13px; height: 13px; stroke-width: 2.4; }
.clb-row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--ui-line); }
.clb-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; color: var(--ui-text-2); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.clb-chip b { font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.clb-chip .clb-i { width: 13px; height: 13px; }
.clb-chip--w { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fcd34d; }
.clb-chip--w b { color: #78350f; }
.clb-c-nv { color: var(--navy-soft); } .clb-c-ok { color: #059669; } .clb-c-w { color: #d97706; }
.clb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.clb-seg__t { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 800; color: var(--ui-text-2); white-space: nowrap; }
.clb-seg__t .clb-i { width: 13px; height: 13px; }
.clb-seg__t em { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 5px; background: #f1f2f4; font-style: normal; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.clb-seg__t.is-on { color: #fff; background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(11, 36, 64, .3); }
.clb-seg__t.is-on em { background: rgba(255, 255, 255, .2); color: #fff; }

/* kulübü olmayanlar kartı — alta doğru sürer (sayfa devam eder) */
.clb-list { position: relative; flex: 1; min-height: 0; margin: 8px 10px -2px; padding: 10px 12px 0; border-radius: 12px 12px 0 0; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.clb-list::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%); pointer-events: none; }
.clb-lh { display: flex; align-items: center; gap: 8px; }
.clb-lh__t { min-width: 0; font-size: 11.5px; font-weight: 700; line-height: 15px; color: var(--ui-text-2); }
.clb-lh__t b { font-weight: 800; color: var(--ui-text); }
.clb-meb { margin-top: 6px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-muted); }
.clb-rows { margin-top: 6px; }
.clb-r { --rh: 40px; display: flex; align-items: center; gap: 10px; height: var(--rh); border-top: 1px solid #eef0f3; }
.clb-r__ad { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.clb-r__ad b { font-size: 12px; font-weight: 800; line-height: 15px; color: var(--ui-text); }
.clb-r__ad small { min-width: 0; font-size: 10.5px; font-weight: 700; line-height: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.clb-r__f { flex: none; display: flex; align-items: center; gap: 6px; }
.clb-sel { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 700; color: var(--ui-text);
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .04); transition: box-shadow .25s var(--ui-ease); }
.clb-sel--cls { width: 84px; font-size: 11.5px; }
.clb-sel--k { width: 192px; }
.clb-sel__v { flex: 1; min-width: 0; white-space: nowrap; }
.clb-sel .clb-chev { width: 13px; height: 13px; margin-left: auto; color: var(--ui-muted); }
.clb-mut { color: var(--ui-muted); font-weight: 600; }
.clb-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 12px -8px rgba(20, 61, 107, .75); }
.clb-btn .clb-i { width: 13px; height: 13px; }

/* işlem gören satır (Cem Özer) */
.clb-r--c { transition: height .38s var(--ui-ease) .62s, opacity .25s var(--ui-ease) .42s, border-color .2s var(--ui-ease) .62s; }
.clb.s1 .clb-r--c .clb-sel--k { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .35s; }
.clb.s2 .clb-r--c .clb-sel--k { box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .04); transition-delay: 1s; }
.clb.s3 .clb-r--c { height: 0; opacity: 0; border-color: transparent; overflow: hidden; }
.clb.s3 .clb-r--c .clb-btn { animation: clb-push .3s var(--ui-ease) .32s; }
.clb-sel--k .clb-hit--sel { right: 30px; bottom: 9px; }
.clb.s1:not(.s2) .clb-hit--sel .ui-cur { animation: clb-cur .9s var(--ui-ease) both; }
.clb.s1:not(.s2) .clb-hit--sel .clb-rip { animation: clb-rip .55s ease-out .38s both; }
.clb-btn .clb-hit--ekle { right: 20px; bottom: 9px; --fx: -87px; --fy: 50px; }
.clb.s3:not(.s4) .clb-hit--ekle .ui-cur { animation: clb-cur .85s var(--ui-ease) both; }
.clb.s3:not(.s4) .clb-hit--ekle .clb-rip { animation: clb-rip .55s ease-out .32s both; }

/* yerel seçicinin açılır listesi */
.clb-dd { position: absolute; z-index: 8; left: -1px; top: calc(100% + 3px); min-width: calc(100% + 2px); padding: 4px; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .12), 0 2px 4px rgba(16, 37, 64, .08), 0 14px 28px -10px rgba(16, 37, 64, .45);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: 50% 0; pointer-events: none;
  transition: opacity .18s var(--ui-ease), transform .22s var(--ui-ease); }
.clb.s1 .clb-dd { opacity: 1; transform: none; transition-delay: .42s; }
.clb.s2 .clb-dd { opacity: 0; transform: translateY(-3px); transition-delay: .55s; }
.clb-dd__o { position: relative; display: flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ui-text);
  transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease); }
.clb-dd__o:first-child { background: #eef1f5; }
.clb.s2 .clb-dd__o:first-child { background: transparent; transition-delay: .26s; }
.clb.s2 .clb-dd__o--a { background: var(--navy-soft); color: #fff; transition-delay: .26s; }
.clb-dd__o .clb-hit--opt { right: 44px; top: 12px; --fx: 13px; --fy: -50px; }
.clb.s2:not(.s3) .clb-hit--opt .ui-cur { animation: clb-cur .8s var(--ui-ease) both; }
.clb.s2:not(.s3) .clb-hit--opt .clb-rip { animation: clb-rip .5s ease-out .36s both; }

/* ileti penceresi (SweetAlert) */
.clb-bd { position: absolute; z-index: 9; inset: 0; background: rgba(9, 18, 32, .42); opacity: 0; transition: opacity .25s var(--ui-ease); }
.clb.s3 .clb-bd { opacity: 1; transition-delay: .82s; }
.clb.s4 .clb-bd { opacity: 0; transition-delay: 0s; }
.clb-swal { --sw: 272px; position: absolute; z-index: 10; left: round(down, (100% - var(--sw)) / 2, 1px); top: round(down, (100% - 190px) / 2, 1px); width: var(--sw); height: 190px; padding: 16px 18px; border-radius: 12px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 24px 48px -16px rgba(9, 18, 32, .55);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; scale: .7; transition: opacity .18s var(--ui-ease), scale .2s var(--ui-ease); }
.clb.s3 .clb-swal { opacity: 1; scale: 1; transition: opacity .2s var(--ui-ease) .86s, scale .42s var(--clb-spring) .86s; }
.clb.s4 .clb-swal { opacity: 0; scale: .94; transition: opacity .18s var(--ui-ease), scale .2s var(--ui-ease); }
.clb-swal__ic { width: 52px; height: 52px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.clb-swal__r { stroke: rgba(165, 220, 134, .35); stroke-width: 3.2; }
.clb-swal__k { stroke: #a5dc86; stroke-width: 3.6; stroke-dasharray: 34; stroke-dashoffset: 34; }
.clb.s3 .clb-swal__k { stroke-dashoffset: 0; transition: stroke-dashoffset .38s var(--ui-ease) 1.1s; }
.clb-swal > b { margin-top: 8px; font-size: 16px; line-height: 20px; font-weight: 800; color: #18181b; letter-spacing: -.01em; }
.clb-swal > span { margin-top: 4px; font-size: 11.5px; line-height: 16px; font-weight: 500; color: #545454; text-wrap: balance; }
.clb-swal > .clb-swal__b { position: relative; display: inline-grid; place-items: center; height: 30px; margin-top: auto; padding: 0 16px; border-radius: 6px; background: #18181b; color: #fff; font-size: 12px; line-height: 1; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .1); }
.clb-swal__b .clb-hit--tamam { right: 7px; bottom: 6px; }
.clb.s3:not(.s4) .clb-hit--tamam .ui-cur { animation: clb-cur .6s var(--ui-ease) 1.32s both; }
.clb.s3:not(.s4) .clb-hit--tamam .clb-rip { animation: clb-rip .45s ease-out 1.58s both; }
.clb.s3:not(.s4) .clb-swal__b { animation: clb-push .26s var(--ui-ease) 1.6s; }
.clb-dim { position: absolute; z-index: 11; inset: 0; background: rgba(11, 36, 64, .3); opacity: 0; transition: opacity .4s var(--ui-ease) .08s; }
.clb.s4 .clb-dim { opacity: 1; }

/* ── öğrencinin telefonu ── */
.clb-ph { position: absolute; z-index: 12; right: 16px; top: 10px; bottom: 0; width: var(--pw); padding: 6px; border-radius: 34px;
  background: linear-gradient(160deg, #22344d, var(--navy-night) 40%, #0a1626);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(11, 22, 38, .2), 0 28px 50px -24px rgba(11, 36, 64, .75);
  opacity: 0; translate: 36px 22px; scale: .97;
  transition: opacity .3s var(--ui-ease), translate .7s cubic-bezier(.3, 1.2, .5, 1), scale .7s cubic-bezier(.3, 1.2, .5, 1); }
.clb.s4 .clb-ph { opacity: 1; translate: 0 0; scale: 1; transition-delay: .14s; }
.clb-sc { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #f5f6fa; }
.clb-sb { position: absolute; z-index: 4; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; color: #0b1526; }
.clb-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.clb-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.clb-sbi { display: flex; align-items: center; gap: 3px; }
.clb-sbi .clb-i { width: 11px; height: 11px; stroke-width: 2.4; }
.clb-sbi .clb-bat { width: 16px; height: 12px; }
.clb-ah { position: absolute; z-index: 3; top: 24px; left: 0; right: 0; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 10px; background: #f5f6fa; }
.clb-ah__b { display: grid; place-items: center; width: 24px; height: 24px; color: #1c2434; }
.clb-ah__b .clb-i { width: 16px; height: 16px; }
.clb svg.clb-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 5px -1px rgba(16, 37, 64, .4); }
.clb-ah__sp { flex: 1; }
.clb-ah__bell { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: #273246; }
.clb-ah__bell .clb-i { width: 15px; height: 15px; }
.clb-ah__bell::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #f5f6fa; }
.clb-ah__av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 12px; font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 2px rgba(16, 37, 64, .1); }
.clb-pv { position: absolute; top: 64px; bottom: 46px; left: 0; right: 0; overflow: hidden; }
.clb-pc { position: absolute; inset: 0 0 auto; padding: 4px 10px 12px; }
.clb-pc--a { transition: opacity .2s var(--ui-ease), translate .75s var(--clb-scroll) .1s; }
.clb.s5 .clb-pc--a { translate: 0 calc(-1 * var(--sc)); }
.clb.s7 .clb-pc--a { opacity: 0; transition: opacity .18s var(--ui-ease); }
.clb-pc--b { opacity: 0; transition: opacity .3s var(--ui-ease); }
.clb.s7 .clb-pc--b { opacity: 1; transition-delay: .3s; }
.clb-tb { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 46px; display: flex; justify-content: space-around; align-items: flex-start; padding: 7px 4px 0;
  background: rgba(255, 255, 255, .94); box-shadow: 0 -1px 0 var(--ui-line); }
.clb-tb > span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; line-height: 12px; color: #3b4556; white-space: nowrap; }
.clb-tb .clb-i { width: 16px; height: 16px; stroke-width: 1.9; }

/* portal içeriği */
.clb-pt > b { display: block; font-size: 15.5px; line-height: 20px; font-weight: 800; letter-spacing: -.015em; color: #111827; }
.clb-pt > span { display: block; margin-top: 1px; font-size: 10px; line-height: 13px; font-weight: 600; color: var(--ui-muted); }
.clb-pn { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; padding: 7px 9px; border-radius: 11px; background: #ecfdf5; color: var(--clb-ok-ink);
  box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 10.5px; line-height: 14px; font-weight: 700; }
.clb-pn .clb-i { width: 14px; height: 14px; margin-top: 0; color: var(--clb-ok); }
.clb-card { margin-top: 8px; padding: 10px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .05), 0 8px 18px -14px rgba(16, 37, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.clb-card__h { display: flex; align-items: center; gap: 8px; }
.clb-card__ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--navy-100); color: var(--navy-soft); }
.clb-card__ico .clb-i { width: 14px; height: 14px; }
.clb-card__h > b { flex: 1; min-width: 0; font-size: 12px; line-height: 15px; font-weight: 800; letter-spacing: -.01em; color: #111827; }
.clb-bdg { flex: none; display: inline-grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 700; white-space: nowrap; }
.clb-bdg--ok { background: #d1fae5; color: var(--clb-ok); }
.clb-bdg--sky { background: #e0f2fe; color: #0369a1; }
.clb-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; margin-top: 8px; }
.clb-dl > span { min-width: 0; }
.clb-dl .clb-w2 { grid-column: span 2; }
.clb-dl small { display: block; font-size: 10px; line-height: 12px; font-weight: 600; color: var(--ui-muted); }
.clb-dl b { display: block; margin-top: 1px; font-size: 11px; line-height: 14px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.clb-h4 { margin: 10px 0 5px; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.clb-prg { padding: 6px 8px; border-radius: 9px; background: rgba(16, 37, 64, .04); }
.clb-prg b, .clb-ls__r b { display: block; font-size: 11px; line-height: 14px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.clb-prg small, .clb-ls__r small { display: block; font-size: 10px; line-height: 13px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; }
.clb-ls { padding: 7px 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .09); }
.clb-ls + .clb-ls { margin-top: 5px; }
.clb-ls__r { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.clb-ls__r .clb-bdg { margin-top: -1px; }
.clb-ls__r small { white-space: normal; }
.clb-ls__r > span { min-width: 0; }
.clb-sum { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: 6px; padding: 0 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: #1c2434;
  box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .13); transition: background-color .2s var(--ui-ease); }
.clb-sum .clb-i { width: 13px; height: 13px; }
.clb.s5 .clb-ls--1 .clb-sum { background: #f1f4f8; transition-delay: 1s; }
/* «Katılamayacağım» açılınca: Neden + Bildir */
.clb-frm { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ui-ease); }
.clb.s5 .clb-frm { grid-template-rows: 1fr; transition-delay: 1.02s; }
.clb-frm__in { display: block; min-height: 0; overflow: hidden; }
.clb-lbl { display: block; margin-top: 7px; font-size: 10.5px; line-height: 13px; font-weight: 800; color: #1c2434; }
.clb-inp { position: relative; display: flex; align-items: center; height: 28px; margin: 3px 1px 0; padding: 0 9px; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 500; color: #111827;
  box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .16); transition: box-shadow .2s var(--ui-ease); }
.clb.s6 .clb-inp { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .3s; }
.clb-ph-t { position: absolute; left: 9px; top: 0; bottom: 0; display: flex; align-items: center; color: #9aa3b2; white-space: nowrap; transition: opacity .1s linear; }
.clb.s6 .clb-ph-t { opacity: 0; transition-delay: .4s; }
.clb-typ { display: block; width: 0; overflow: hidden; white-space: nowrap; transition: width .7s steps(16, end); }
.clb.s6 .clb-typ { width: var(--tw, 94px); transition-delay: .42s; }
.clb-caret { display: block; flex: none; width: 1px; height: 13px; margin-left: 1px; background: var(--navy-soft); opacity: 0; }
.clb.s6 .clb-caret { animation: clb-blink 1s steps(1, end) .3s infinite; }
@keyframes clb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.clb-pbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; margin: 6px 1px 1px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 12px -8px rgba(20, 61, 107, .8); }
.clb-pbtn .clb-i { width: 13px; height: 13px; }
.clb.s6 .clb-pbtn { animation: clb-push .3s var(--ui-ease) 1.32s; }

/* parmak dokunuşu */
.clb-tap { position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none; }
.clb-tap i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(20, 61, 107, .22);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 2px 6px rgba(11, 36, 64, .3); opacity: 0; }
.clb-tap i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .5); opacity: 0; }
@keyframes clb-tap { 0% { opacity: 0; scale: 1.35; } 28% { opacity: 1; scale: 1; } 42% { scale: .8; } 58% { scale: 1; } 82% { opacity: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes clb-tring { 0% { opacity: 0; scale: .6; } 15% { opacity: 1; } 100% { opacity: 0; scale: 2; } }
.clb-tap--kat { left: 64%; top: 50%; }
.clb-tap--in { left: 46%; top: 50%; }
.clb-tap--bil { left: 58%; top: 50%; }
.clb.s5:not(.s6) .clb-tap--kat i { animation: clb-tap .7s var(--ui-ease) .74s both; }
.clb.s5:not(.s6) .clb-tap--kat i::after { animation: clb-tring .5s ease-out 1.02s both; }
.clb.s6:not(.s7) .clb-tap--in i { animation: clb-tap .62s var(--ui-ease) .02s both; }
.clb.s6:not(.s7) .clb-tap--in i::after { animation: clb-tring .45s ease-out .28s both; }
.clb.s6:not(.s7) .clb-tap--bil i { animation: clb-tap .66s var(--ui-ease) 1.06s both; }
.clb.s6:not(.s7) .clb-tap--bil i::after { animation: clb-tring .45s ease-out 1.32s both; }

/* ── danışman öğretmene giden bildirim ── */
/* genişlik: kart özet çip satırını tümüyle örter (çip, simgeleriyle 404 px'te biter), telefona değmez — kesik çip yazısı kalmaz */
.clb-nt { position: absolute; z-index: 14; left: 16px; top: 18px; width: min(400px, calc(100% - var(--pw) - 32px));
  display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 9px; row-gap: 7px; padding: 10px 12px; border-radius: 16px;
  background: #fff; color: #3d4a5c; font-size: 10.5px; line-height: 14px; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 2px 4px rgba(16, 37, 64, .08), 0 22px 40px -18px rgba(11, 36, 64, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
  opacity: 0; translate: 0 -14px; scale: .97; transition: opacity .25s var(--ui-ease), translate .55s var(--clb-spring), scale .55s var(--clb-spring); }
.clb.s7 .clb-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: .95s; }
.clb-nt > img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 1px 2px rgba(16, 37, 64, .2); }
.clb-nt__m { min-width: 0; }
.clb-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.clb-nt__h b { flex: 1; min-width: 0; font-size: 11.5px; line-height: 15px; font-weight: 800; color: #111827; }
.clb-nt__h em { flex: none; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ui-muted); }
.clb-nt__tag { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; justify-self: start; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--navy-50); color: var(--navy); font-size: 10px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--navy-100); }
.clb-nt__tag .clb-i { width: 12px; height: 12px; }

/* ── DAR KAPLAR ── */
/* çip simgeleri sm altında gizli (admin-clubs.php:143 «hidden … sm:block»): satır kısalır, sağdaki telefona değmez */
@container (max-width: 660px) {
  .clb-chip .clb-i { display: none; }
}
/* telefon ortada; bildirim telefonun durum çubuğuna değil orta-alt bölümüne çıkar: saat satırı, yeşil not ve «Kulüplerim»
   başlığı (sonuç) açıkta kalır. Kart ~292→379 px: iki kenarı da hem telefondaki hem soldaki karartılmış şeritteki satır
   aralıklarının ortak boşluğuna düşer (telefon 291–298 / 369–380, şerit 287–310 / 365–389) — yarım satır görünmez */
@container (max-width: 600px) {
  .clb-ph { right: auto; left: round(down, (100% - var(--pw)) / 2, 1px); translate: 0 40px; }
  .clb-nt { --nw: min(330px, calc(100% - 16px)); top: 292px; left: round(down, (100% - var(--nw)) / 2, 1px); width: var(--nw);
    padding: 9px 12px; row-gap: 5px; translate: 0 14px; }
  .clb-r { --rh: 44px; }
  .clb-r__ad { flex-direction: column; align-items: flex-start; gap: 1px; }
  .clb-r__ad small { font-size: 10px; }
  .clb-sel--k { width: 184px; }
  .clb-btn .clb-hit--ekle { --fx: -79px; --fy: 50px; }
  .clb-meb { display: none; }
}
@container (max-width: 470px) {
  .clb-st { height: 480px; }
  /* telefon geniş kaptaki boyunda (446 px) kalır: sekme çubuğu bir satırı yarıdan bölmez */
  .clb-ph { bottom: 24px; }
  .clb-bant { margin: 8px 8px 0; }
  .clb-band { padding: 9px 10px; gap: 9px; }
  .clb-bico { width: 30px; height: 30px; border-radius: 9px; }
  .clb-ttl > b { font-size: 14px; }
  .clb-ttl small { font-size: 11px; }
  .clb-new { width: 28px; padding: 0; justify-content: center; }
  .clb-new > span { display: none; }
  .clb-row { padding: 6px 8px; }
  .clb-chips { flex-wrap: wrap; row-gap: 5px; }
  .clb-chip .clb-i { display: none; }
  .clb-list { margin: 8px 8px -2px; padding: 9px 10px 0; }
  .clb-lh__t { font-size: 11px; }
  .clb-swal { --sw: min(272px, calc(100% - 32px)); }
}
/* satır iki kata iner (ad + seçici); işlem gören satır listenin altında kalır: açılır liste yukarı açılır
   (aşağıda yer yoksa yerel seçici de öyle yapar) */
@container (max-width: 500px) {
  .clb-r { --rh: 78px; flex-wrap: wrap; align-content: center; row-gap: 6px; }
  .clb-r__ad { flex-basis: 100%; }
  .clb-r__f { flex: 1; min-width: 0; }
  .clb-sel--k { flex: 1; width: auto; min-width: 0; }
  .clb-dd { top: auto; bottom: calc(100% + 3px); transform: translateY(4px) scale(.98); transform-origin: 50% 100%; }
  .clb.s2 .clb-dd { transform: translateY(3px); }
  .clb-dd__o .clb-hit--opt { --fx: 40px; --fy: 50px; }
  .clb-btn .clb-hit--ekle { --fx: -40px; --fy: -60px; }
}
/* 364–500 kap: özet çipleri tek satıra sığar (liste 29 px yukarı çıkar) ya da satırlar iki kata iner; soldaki şeridin satır
   aralıkları değişir. Kart ~294→396 px: iki kenarı yine telefon ve şeridin ortak boşluğuna düşer (380–500 ölçüldü) */
@container (min-width: 364px) and (max-width: 500px) {
  .clb-nt { top: 294px; padding: 13px 12px; row-gap: 12px; }
}