@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
:root{
    --bg:#f5f3ef;--bg2:#fff;--bg3:#faf8f5;
    --sinir:#e8e4de;--sinir2:#d4cfc8;
    --yazi:#2d2419;--yazi2:#6b5e52;--yazi3:#9b8f82;
    --bakir:#c8773a;--bakir2:#e09050;--bakir-ac:#fdf2e9;--bakir-sin:#e8a96b;
    --kirmizi:#dc2626;--kirmizi-bg:#fee2e2;--kirmizi-sin:#fca5a5;
    --yesil:#16a34a;--yesil-bg:#dcfce7;--yesil-sin:#86efac;
    --radius:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body.musteri-body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--yazi);min-height:100vh}

/* HEADER */
.m-header{background:var(--bg2);border-bottom:1px solid var(--sinir);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;gap:12px}
.m-salon-info{display:flex;align-items:center;gap:10px}
.m-logo-wrap img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.m-logo{font-size:16px;font-weight:700;color:var(--yazi);letter-spacing:-.3px}
.m-salon-alt{font-size:11px;color:var(--yazi3);margin-top:1px}

/* ADIM SİSTEMİ */
.m-container{max-width:900px;margin:0 auto;padding:20px 16px}

.adim-gostergesi{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px}
.adim{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;color:var(--yazi3);transition:all .2s}
.adim.aktif{background:var(--bakir-ac);color:var(--bakir);border:1px solid var(--bakir-sin)}
.adim.tamamlandi{color:var(--yesil)}
.adim-no{width:22px;height:22px;border-radius:50%;background:currentColor;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex-shrink:0}
.adim.aktif .adim-no{background:var(--bakir)}
.adim.tamamlandi .adim-no{background:var(--yesil)}
.adim-cizgi{width:40px;height:1px;background:var(--sinir)}

/* ÇALIŞAN SEÇİM */
.calisan-secim-baslik{text-align:center;font-size:18px;font-weight:700;color:var(--yazi);margin-bottom:6px}
.calisan-secim-alt{text-align:center;font-size:13px;color:var(--yazi3);margin-bottom:20px}
.calisan-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.calisan-kart{background:var(--bg2);border:2px solid var(--sinir);border-radius:12px;padding:20px 16px;text-align:center;cursor:pointer;transition:all .2s}
.calisan-kart:hover{border-color:var(--bakir-sin);background:var(--bakir-ac);transform:translateY(-2px);box-shadow:0 4px 12px rgba(200,119,58,.15)}
.calisan-kart.secili{border-color:var(--bakir);background:var(--bakir-ac)}
.calisan-kart-renk{width:48px;height:48px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:700}
.calisan-kart-adi{font-size:14px;font-weight:600;color:var(--yazi)}

/* TAKVİM */
.takvim-baslik{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.geri-btn{background:var(--bg2);border:1px solid var(--sinir);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px;color:var(--yazi2);display:flex;align-items:center;gap:5px}
.geri-btn:hover{border-color:var(--sinir2)}
.secili-calisan-badge{display:flex;align-items:center;gap:6px;background:var(--bakir-ac);border:1px solid var(--bakir-sin);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--bakir)}
.secili-calisan-nokta{width:10px;height:10px;border-radius:50%}

.m-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.m-nav button{background:var(--bg2);border:1px solid var(--sinir);color:var(--yazi2);width:32px;height:32px;border-radius:8px;font-size:16px;cursor:pointer}
#m-tarih-goster{font-size:15px;font-weight:600;color:var(--yazi);min-width:160px;text-align:center}
.m-bugun-btn{display:block;margin:0 auto 14px;background:var(--bakir-ac);border:1px solid var(--bakir-sin);color:var(--bakir);padding:5px 16px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Inter',sans-serif}

.m-takvim-wrap{overflow-x:auto;background:var(--bg2);border:1px solid var(--sinir);border-radius:var(--radius)}
#m-takvim{min-width:380px}
.m-takvim-header{display:grid;background:var(--bg3);border-bottom:1px solid var(--sinir);border-radius:var(--radius) var(--radius) 0 0}
.m-th{padding:8px 4px;text-align:center;font-size:10px;color:var(--yazi3);font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.m-th .m-gun-no{font-size:18px;font-weight:700;color:var(--yazi);display:block;margin-top:2px}
.m-th.bugun .m-gun-no{color:var(--bakir)}
.m-th.bugun{color:var(--bakir)}
.m-saat-row{display:grid;border-bottom:1px solid rgba(0,0,0,.04)}
.m-saat-etiket{font-size:10px;color:var(--yazi3);padding:5px 6px 0 8px;background:var(--bg2)}

/* SLOTLAR */
.m-cell{border-left:1px solid rgba(0,0,0,.04);min-height:40px;cursor:pointer;transition:all .15s;position:relative}
.m-cell.bugun-col{background:rgba(200,119,58,.03)}

/* BOŞ SLOT */
.m-cell.bos:hover{background:var(--yesil-bg)}
.m-cell.bos:hover::after{content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--yesil);font-size:18px;font-weight:700;opacity:.8}

/* DOLU SLOT */
.m-cell.dolu{background:var(--kirmizi-bg);cursor:not-allowed}
.m-cell.dolu-label{display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;color:var(--kirmizi);opacity:.8;height:100%;padding:2px}

.m-yukleniyor{padding:40px;text-align:center;color:var(--yazi3)}

/* LEGEND */
.m-legend{display:flex;gap:16px;justify-content:center;margin-bottom:12px;font-size:12px;color:var(--yazi3)}
.m-legend span{display:flex;align-items:center;gap:5px}
.leg-bos{width:12px;height:12px;background:var(--yesil-bg);border:1px solid var(--yesil-sin);border-radius:3px}
.leg-dolu{width:12px;height:12px;background:var(--kirmizi-bg);border:1px solid var(--kirmizi-sin);border-radius:3px}

/* MODAL */
.modal-arka{position:fixed;inset:0;background:rgba(45,36,25,.5);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-arka.acik{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--sinir);border-radius:16px;width:460px;max-width:95vw;max-height:90vh;overflow-y:auto;padding:26px;transform:translateY(14px);transition:transform .2s;box-shadow:0 8px 40px rgba(45,36,25,.12)}
.modal-arka.acik .modal{transform:translateY(0)}
.modal-baslik{font-size:17px;font-weight:700;color:var(--yazi);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.modal-kapat{background:none;border:none;color:var(--yazi3);font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:6px}
.modal-bilgi{background:var(--bakir-ac);border:1px solid var(--bakir-sin);border-radius:8px;padding:9px 13px;font-size:12.5px;color:var(--bakir);margin-bottom:16px;font-weight:500}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grup{margin-bottom:13px}
.form-grup label{display:block;font-size:11px;color:var(--yazi3);font-weight:600;letter-spacing:.3px;margin-bottom:4px;text-transform:uppercase}
.form-grup input,.form-grup select,.form-grup textarea{width:100%;background:var(--bg3);border:1px solid var(--sinir);color:var(--yazi);border-radius:8px;padding:9px 12px;font-size:13.5px;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s}
.form-grup input:focus,.form-grup select:focus,.form-grup textarea:focus{border-color:var(--bakir);background:var(--bg2)}
.form-grup textarea{resize:vertical;min-height:60px}
.btn-kaydet{width:100%;background:var(--bakir);color:#fff;border:none;border-radius:9px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;margin-top:4px;transition:background .15s}
.btn-kaydet:hover{background:var(--bakir2)}
.btn-kaydet:disabled{opacity:.5;cursor:not-allowed}

.bildirim{position:fixed;bottom:20px;right:20px;background:var(--bg2);border:1px solid var(--sinir);border-radius:10px;padding:12px 18px;font-size:13px;z-index:300;transform:translateY(20px);opacity:0;transition:all .25s;max-width:300px;box-shadow:0 4px 20px rgba(45,36,25,.1)}
.bildirim.goster{opacity:1;transform:translateY(0)}
.bildirim.basari{border-left:4px solid var(--yesil)}
.bildirim.hata{border-left:4px solid var(--kirmizi)}

.dil-secici{display:flex;gap:3px}
.dil-btn{background:none;border:1px solid transparent;border-radius:6px;padding:3px 5px;font-size:17px;cursor:pointer;opacity:.45;transition:all .15s;line-height:1}
.dil-btn:hover{opacity:.8;border-color:var(--sinir)}
.dil-btn.aktif{opacity:1;border-color:var(--bakir-sin);background:var(--bakir-ac)}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--sinir2);border-radius:3px}

@media(max-width:600px){
    .m-container{padding:12px}
    .calisan-kartlar{grid-template-columns:repeat(2,1fr)}
    .modal{padding:18px}
    .form-row{grid-template-columns:1fr}
}
