/* Klinikim — hastane randevu sistemi. Sakin, açık, sağlık teması: yumuşak mint-teal,
   büyük okunur yazı, bol boşluk. Diğer IDOR sitelerinden (menekşe, beyaz-turuncu,
   koyu-altın) ayrı; en sakin olanı. */
:root {
    --teal: #2f9e94;
    --teal-koyu: #227a72;
    --zemin: #eef6f5;
    --kart: #ffffff;
    --metin: #203636;
    --soluk: #6d8785;
    --cizgi: #dbe9e7;
    --uyari-bg: #fff4e5;
    --uyari-metin: #a2660a;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--zemin); color: var(--metin); line-height: 1.6; font-size: 16px; }
a { color: inherit; text-decoration: none; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px; background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; color: var(--teal-koyu); }
.brand-mark { color: var(--teal); font-size: 22px; }
.top-ad { font-size: 15px; color: var(--soluk); font-weight: 600; }

.wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 56px; }
.basliklar h1 { font-size: 28px; letter-spacing: -.5px; margin: 0 0 6px; }
.basliklar .alt { color: var(--soluk); margin: 0 0 24px; }

.uyari { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-size: 15px; }
.uyari.basarili { background: #e4f4f0; color: var(--teal-koyu); }
.uyari.hata { background: #fcebea; color: #b0453b; }
.uyari.flag { background: var(--uyari-bg); color: var(--uyari-metin); border: 1px solid #f0d9ad; }
.uyari.flag strong { font-family: 'Cascadia Code', Consolas, monospace; }

/* ── Randevu kartları ── */
.randevu-liste { display: grid; gap: 14px; }
.randevu { display: flex; align-items: center; gap: 20px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 20px 22px; }
.randevu.iptalli { opacity: .55; }
.rnd-gun { flex-shrink: 0; width: 62px; height: 62px; border-radius: 14px; background: var(--zemin); display: grid; place-items: center; align-content: center; }
.rnd-gun-sayi { font-size: 24px; font-weight: 800; color: var(--teal-koyu); line-height: 1; }
.rnd-gun-ay { font-size: 12px; color: var(--soluk); }
.rnd-orta { flex: 1; min-width: 0; }
.rnd-orta h2 { margin: 0 0 3px; font-size: 18px; }
.rnd-dr { margin: 0 0 4px; color: var(--metin); font-size: 14.5px; }
.rnd-saat { margin: 0; color: var(--soluk); font-size: 14px; }
.rnd-sag { flex-shrink: 0; }

.btn-iptal { background: #fff; color: #b0453b; border: 1px solid #f0cfca; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-iptal:hover { background: #fcebea; border-color: #e3a89f; }
.rozet-iptal { font-size: 13px; color: var(--soluk); font-style: italic; }

.foot { text-align: center; color: var(--soluk); font-size: 13px; padding: 30px 20px 40px; }

@media (max-width: 520px) {
    .randevu { gap: 14px; padding: 16px; flex-wrap: wrap; }
    .rnd-sag { width: 100%; }
    .btn-iptal { width: 100%; }
}