/* Takvim & hatırlatmalar sahnesi — .cl-* (solda telefon takvimi, sağda bildirim sütunu) */
.cl{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:center;padding:6px 0 10px}
.cl .fph{justify-self:center}

/* telefon içi takvim */
.cl-nav{display:flex;justify-content:space-between;align-items:center;color:#1f7a57;font-weight:600;font-size:11px}
.cl-nav b{color:#0e2a20;font-size:13px;font-weight:800;letter-spacing:-.02em}
.cl-cal{background:#fff;border-radius:14px;padding:8px 8px 6px}
.cl-wd,.cl-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cl-wd span{font-size:8px;font-weight:700;color:#5b6b62;padding-bottom:4px;letter-spacing:.02em}
.cl-grid span{position:relative;height:23px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;color:#0e2a20;border-radius:7px;line-height:1}
.cl-grid span:empty{visibility:hidden}
.cl-grid span.mut{color:#b7c2bb}
.cl-grid span.td{background:#1f7a57;color:#fff;font-weight:800}
.cl-dots{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;gap:2px;height:3px}
.cl-dots i{width:3px;height:3px;border-radius:50%;background:#3bb78f;transition:transform .3s,opacity .3s}
.cl-grid .td .cl-dots i{background:#fff}
.cl-dots i.new{opacity:0;transform:scale(0)}
.cl.added .cl-dots i.new{opacity:1;transform:scale(1)}
.cl-day{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;color:#0e2a20;padding:0 2px}
.cl-day small{color:#5b6b62;font-weight:600;font-size:9px}
.cl-day small b{color:#1f7a57}

/* günün listesi */
.cl-list{padding:2px 10px}
.cl-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #e4eae6;position:relative}
.cl-row:last-child{border:0}
.cl-row>div{flex:1;min-width:0}
.cl-row b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row small{display:block;font-size:9px;color:#5b6b62}
.cl-t{font-size:10px;font-weight:800;color:#1f7a57;width:30px;flex:none;font-variant-numeric:tabular-nums}
/* ghost satır: "+ Randevu" → dolu satır */
.cl-ghost{display:flex;gap:8px;align-items:center;padding:6px 0;position:relative;min-height:40px}
.cl-ghost .cl-t{color:#8a9a91}
.cl-add,.cl-new{position:absolute;left:38px;right:0;top:50%;transform:translateY(-50%);transition:opacity .3s,transform .3s}
.cl-add{font-size:10px;font-weight:700;color:#8a9a91;border:1.5px dashed #c8d3cc;border-radius:9px;padding:6px 9px;display:inline-flex;align-items:center;gap:5px;width:max-content}
.cl-add em{font-style:normal;width:14px;height:14px;border-radius:50%;background:#e4eae6;color:#1f7a57;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.cl-new{display:flex;gap:8px;align-items:center;opacity:0;transform:translateY(-50%) translateY(6px);pointer-events:none}
.cl-new>div{flex:1;min-width:0}
.cl-new b{display:block;font-size:10.5px}
.cl-new small{display:block;font-size:9px;color:#5b6b62}
.cl.added .cl-add{opacity:0;transform:translateY(-50%) scale(.9)}
.cl.added .cl-new{opacity:1;transform:translateY(-50%)}
.cl.added .cl-ghost .cl-t{color:#1f7a57}
.cl.added .cl-ghost{background:linear-gradient(90deg,rgba(59,183,143,.14),rgba(59,183,143,0));border-radius:8px;margin:0 -6px;padding-left:6px;padding-right:6px}
/* dokunma halkası */
.cl-tap{position:absolute;left:74px;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(31,122,87,.35);opacity:0;transform:scale(.3);pointer-events:none}
.cl.tap .cl-tap{animation:clTap .55s ease-out}
@keyframes clTap{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}
.cl .fph-btn{margin-bottom:14px}

/* bildirim sütunu */
.cl-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.cl-ey{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#6ee7b7;display:flex;align-items:center;gap:8px}
.cl-ey i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25)}
.cl-n{display:flex;gap:11px;align-items:flex-start;background:#0b1f15;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 13px;box-shadow:0 18px 36px -20px rgba(0,0,0,.7);transition:opacity .45s,transform .45s;opacity:1}
.cl-n.off{opacity:.0;transform:translateX(14px);transition:opacity .25s,transform .25s}
.cl-ni{width:32px;height:32px;border-radius:9px;background:#3bb78f;color:#05130c;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cl-ni.amb{background:#f5a524}
.cl-n>div{min-width:0;flex:1}
.cl-nh{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:700;color:rgba(214,235,224,.6);letter-spacing:.02em}
.cl-nh span:last-child{flex:none;font-variant-numeric:tabular-nums}
.cl-n b{display:block;font-size:13.5px;margin-top:2px;letter-spacing:-.01em}
.cl-n p{margin:3px 0 0;font-size:12px;line-height:1.45;color:rgba(214,235,224,.78)}
.cl-n .cl-act{display:inline-flex;gap:6px;margin-top:8px}
.cl-n .cl-act span{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(52,211,153,.14);color:#6ee7b7}
.cl-n .cl-act span.ghost{background:rgba(255,255,255,.06);color:rgba(214,235,224,.7)}

@media (max-width:600px){
 .cl{grid-template-columns:minmax(0,1fr);gap:22px}
 .cl-side{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
 .cl-n,.cl-add,.cl-new,.cl-dots i{transition:none}
 .cl.tap .cl-tap{animation:none}
}