/* Randevubulut demosu: telefonda randevu sayfası, resepsiyonda tablet takvim. */
.sdemo--randevubulut { --rb: #0d9488; --rb-l: #ccfbf1; }

/* Telefon: salonun randevu sayfası */
.rb-phone { font-size: 5.6cqw; background: #fbfaf8; }
.rb-head { flex: none; height: 7.5cqh; display: flex; align-items: center; gap: 3cqw; padding: 0 6cqw; }
.rb-head b { font-size: 7.6cqw; letter-spacing: -.02em; }
.rb-logo { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #1c1917; color: #f5d0a9; font-weight: 800; font-size: 5cqw; }
.rb-svc { flex: none; margin: .6cqh 5cqw 0; height: 10cqh; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw; border-radius: 4cqw; background: #fff; border: .4cqw solid var(--rb); }
.rb-svc span { display: flex; flex-direction: column; } .rb-svc b { font-size: 6cqw; } .rb-svc small { font-size: 4.4cqw; color: #64748b; }
.rb-svc em { font-style: normal; font-weight: 800; color: var(--rb); }
.rb-days { flex: none; margin: 1.6cqh 5cqw 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; }
.rb-days span { display: flex; flex-direction: column; align-items: center; padding: 1cqh 0; border-radius: 3cqw; background: #f1f0ee; color: #57534e; }
.rb-days small { font-size: 3.8cqw; white-space: nowrap; overflow: hidden; max-width: 100%; } .rb-days b { font-size: 6cqw; }
.rb-days .is-on { background: #1c1917; color: #fff; }
.rb-phone h5 { margin: 1.8cqh 6cqw .8cqh; font-size: 5cqw; color: #57534e; }
.rb-slots { flex: none; margin: 0 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqh 2.4cqw; }
.rb-slot { display: grid; place-items: center; height: 7cqh; border-radius: 3cqw; background: #fff; border: .35cqw solid #e7e5e4; font-weight: 700; font-size: 5.4cqw; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.rb-slot.is-off { color: #c4c0bb; background: #f5f5f4; text-decoration: line-through; }
.s-pick .rb-slot--pick { background: var(--rb); border-color: var(--rb); color: #fff; transform: scale(1.06); }
.rb-book { position: absolute; left: 5cqw; right: 5cqw; bottom: 3.4cqh; height: 9cqh; display: grid; place-items: center; border-radius: 4cqw; background: #d6d3d1; color: #fff; font-weight: 700; font-size: 6cqw; transition: background .3s; }
.s-pick .rb-book { background: #1c1917; }
.s-book .rb-book { background: var(--rb); }
.rb-done { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqh; padding: 0 7cqw; text-align: center;
           background: #fbfaf8; opacity: 0; transform: scale(1.04); transition: opacity .4s, transform .5s; }
.rb-done b { font-size: 7.6cqw; } .rb-done small { font-size: 5.2cqw; color: #57534e; }
.rb-done em { font-style: normal; margin-top: 1.6cqh; padding: 1.2cqh 4cqw; border-radius: 99px; background: #dcfce7; color: #166534; font-size: 4.6cqw; font-weight: 600; }
.rb-ok { display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 50%; background: var(--rb); color: #fff; font-size: 10cqw; font-weight: 800; transform: scale(.5); transition: transform .45s cubic-bezier(.2,.9,.3,1.5) .1s; }
.s-booked .rb-done { opacity: 1; transform: none; } .s-booked .rb-ok { transform: none; }

/* Tablet: resepsiyon takvimi */
.rt { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #1c1917; font-size: 2.4cqw; }
.rt-top { flex: none; height: 13cqh; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 3cqw; border-bottom: .2cqw solid #eee; }
.rt-top b { font-size: 3cqw; }
.rt-logo { display: flex; align-items: center; gap: 1.2cqw; font-weight: 800; font-size: 3cqw; color: var(--rb); }
.rt-logo i { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: var(--rb); color: #fff; font-style: normal; font-size: 2.8cqw; }
.rt-fill { position: relative; color: #78716c; font-weight: 600; }
.rt-fill i { font-style: normal; color: #1c1917; font-weight: 800; transition: opacity .3s; } .rt-f2 { position: absolute; inset-inline-end: 0; opacity: 0; }
.s-new .rt-f1 { opacity: 0; } .s-new .rt-f2 { opacity: 1; color: var(--rb); }
.rt-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 10cqw 1fr 1fr; gap: 1.4cqw; padding: 2cqh 2.4cqw 2.6cqh; }
.rt-hours { display: grid; grid-template-rows: repeat(8, 1fr); padding-top: 9cqh; color: #a8a29e; font-size: 2cqw; font-variant-numeric: tabular-nums; }
.rt-col { display: flex; flex-direction: column; min-width: 0; }
.rt-col h6 { flex: none; margin: 0; height: 9cqh; font-size: 2.8cqw; display: flex; align-items: center; }
.rt-lane { position: relative; flex: 1; overflow: hidden; border-radius: 1.2cqw; background: repeating-linear-gradient(180deg, #fafaf9 0 calc(12.5% - 1px), #efedeb calc(12.5% - 1px) 12.5%); }
.rt-ev { position: absolute; left: .8cqw; right: .8cqw; display: flex; flex-direction: column; justify-content: center; padding: 0 1.4cqw; border-radius: 1cqw; border-inline-start: .7cqw solid #a8a29e; background: #f5f5f4; overflow: hidden; }
.rt-ev b { font-size: 2.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-ev small { font-size: 1.9cqw; color: #78716c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-ev--a, .rt-ev--d { background: #fef3c7; border-color: #f59e0b; } .rt-ev--b, .rt-ev--e { background: #e0e7ff; border-color: #6366f1; } .rt-ev--c, .rt-ev--f { background: #fce7f3; border-color: #ec4899; }
.rt-ev--new { background: var(--rb-l); border-color: var(--rb); box-shadow: 0 0 0 .4cqw rgba(13,148,136,.25); opacity: 0; transform: scale(.85); transition: opacity .35s, transform .5s cubic-bezier(.2,.9,.3,1.4); }
.s-new .rt-ev--new { opacity: 1; transform: none; }
.s-new .rt-lane .sd-flash { transition: transform .9s .2s ease-out; transform: translateX(130%); }
.rt-toast { position: absolute; bottom: 3cqh; left: 50%; display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqh 2.4cqw; border-radius: 1.4cqw; background: #1c1917; color: #fff; font-weight: 600; font-size: 2.3cqw; white-space: nowrap;
            translate: -50% 0; opacity: 0; transform: translateY(4cqh); transition: opacity .35s, transform .45s; }
.rt-toast i { font-style: normal; color: #5eead4; font-weight: 800; }
.s-toast .rt-toast { opacity: 1; transform: none; }