/* Berber Randevu — sade görünüm, mobil öncelikli */
:root {
  --kagit: #faf7f2;
  --kart: #ffffff;
  --cizgi: #e2dbd0;
  --murekkep: #23201c;
  --soluk: #7a7266;
  --vurgu: #1f5c46;          /* koyu yeşil */
  --vurgu-acik: #e6efea;
  --kirmizi: #a8342a;
  --kirmizi-acik: #f7e6e4;
  --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;   /* taban yazı biraz büyütüldü (telefonda okunurluk) */
  line-height: 1.55;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

/* Başlık */
.baslik {
  background: var(--vurgu);
  color: #fff;
  padding: 1.35rem 1rem;
  overflow-x: hidden;   /* büyük yazı yatay kaydırma yaratmasın */
}
.baslik-ic {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.makas {
  font-size: 1.8rem;
  line-height: 1;
  background: rgba(255, 255, 255, .15);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  flex: 0 0 auto;
}
.baslik h1 { font-size: 1.35rem; }
.baslik p { margin: .15rem 0 0; font-size: .98rem; opacity: .85; }

/* Kapsayıcı */
.kap {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.adim {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 1rem;
}
.adim h2 {
  font-size: 1.12rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
}
.no {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--vurgu-acik);
  color: var(--vurgu);
  font-size: .88rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.ipucu { margin: 0 0 .75rem; color: var(--soluk); font-size: .98rem; }

/* Gün şeridi */
/* Günler tek satırda yatay kayar; 14 gün 7'li iki satıra bölünüp
   7'li ızgarada yarım kutu bırakmaz. */
.gunler {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}
.gunler .gun { scroll-snap-align: start; }
.gunler .gun { flex: 0 0 calc((100% - 6 * .35rem) / 7); }
.gunler::-webkit-scrollbar { height: 6px; }
.gunler::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 3px; }
.gun {
  appearance: none;
  border: 1px solid var(--cizgi);
  background: #fff;
  border-radius: 10px;
  padding: .5rem .15rem;
  min-height: 62px;
  cursor: pointer;
  display: grid;
  gap: .1rem;
  justify-items: center;
  font-family: inherit;
  color: inherit;
  transition: border-color .12s, background .12s;
}
.gun:hover:not(:disabled) { border-color: var(--vurgu); }
.gun .g-adi { font-size: .88rem; color: var(--soluk); text-transform: capitalize; }
.gun .g-gun { font-size: 1.2rem; font-weight: 700; }
.gun .g-ay { font-size: .85rem; color: var(--soluk); }
.gun[aria-pressed="true"] {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
}
.gun[aria-pressed="true"] .g-adi,
.gun[aria-pressed="true"] .g-ay { color: rgba(255, 255, 255, .8); }
.gun:disabled {
  background: #f3f0eb;
  color: #b3aa9d;
  cursor: not-allowed;
}
.gun:disabled .g-adi, .gun:disabled .g-ay { color: #b3aa9d; }

/* Berber seçimi */
.berberler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .55rem;
}
.berber {
  appearance: none;
  font-family: inherit;
  color: inherit;
  border: 1px solid var(--cizgi);
  background: #fff;
  border-radius: 10px;
  padding: .8rem .6rem;
  min-height: 84px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: .15rem;
  transition: border-color .12s, background .12s;
}
.berber:hover { border-color: var(--vurgu); }
.berber .b-ikon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vurgu-acik);
  color: var(--vurgu);
  font-size: 1rem;
}
.berber .b-ad { font-size: 1.02rem; font-weight: 600; }
.berber .b-alt { font-size: .86rem; color: var(--soluk); }
.berber[aria-checked="true"],
.berber[aria-pressed="true"] {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
}
.berber[aria-checked="true"] .b-ikon,
.berber[aria-pressed="true"] .b-ikon {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
.berber[aria-checked="true"] .b-alt,
.berber[aria-pressed="true"] .b-alt { color: rgba(255, 255, 255, .82); }

/* O gün gelmeyen usta: kart soluklaşır, alt etiket nedeni söyler */
.berber.gelmiyor { border-style: dashed; background: #fbf9f6; }
.berber.gelmiyor .b-ikon { background: #f1ece4; color: var(--soluk); }
.berber.gelmiyor .b-alt { color: var(--kirmizi); font-weight: 600; }
.berber.gelmiyor[aria-checked="true"],
.berber.gelmiyor[aria-pressed="true"] {
  background: #f4efe8;
  border-color: var(--soluk);
  color: var(--murekkep);
}
.berber.gelmiyor[aria-checked="true"] .b-ikon,
.berber.gelmiyor[aria-pressed="true"] .b-ikon {
  background: #e9e2d7;
  color: var(--soluk);
}
.berber.gelmiyor[aria-checked="true"] .b-alt,
.berber.gelmiyor[aria-pressed="true"] .b-alt { color: var(--kirmizi); }

.bos-mesaj.capali-mesaj { color: var(--soluk); font-weight: 600; }

/* Saat ızgarası */
.saatler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .4rem;
}
.saat {
  appearance: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--cizgi);
  background: #fff;
  color: var(--murekkep);
  border-radius: 10px;
  min-height: 46px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.saat:hover:not(:disabled) { border-color: var(--vurgu); }
.saat[aria-pressed="true"] {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
  font-weight: 600;
}
.saat:disabled {
  background: #f3f0eb;
  color: #b9b0a3;
  text-decoration: line-through;
  cursor: not-allowed;
}
.bos-mesaj {
  grid-column: 1 / -1;
  color: var(--soluk);
  font-size: .98rem;
  padding: .5rem 0;
}
/* Saat ızgarasının ortasında duran "öğle arası" bilgisi */
.oglen-notu {
  grid-column: 1 / -1;
  margin: .15rem 0;
  padding: .45rem .6rem;
  background: #f4f1ea;
  border: 1px dashed var(--cizgi);
  border-radius: 8px;
  color: var(--soluk);
  font-size: .93rem;
  text-align: center;
}

/* Form */
label {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}
input {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;   /* 16px altına inmez: iOS odakta yakınlaştırmasın */
  padding: .7rem .8rem;
  min-height: 46px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  margin-bottom: .9rem;
}
input:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
  border-color: var(--vurgu);
}
input[aria-invalid="true"] { border-color: var(--kirmizi); background: #fffafa; }

.ozet {
  background: var(--vurgu-acik);
  border-radius: 10px;
  padding: .7rem .85rem;
  font-size: 1.03rem;
  margin-bottom: .9rem;
}
.ozet strong { display: block; font-size: 1.12rem; }

.dugme, .dukme {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 600;
  padding: .85rem 1rem;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--vurgu);
  color: #fff;
  cursor: pointer;
  transition: opacity .12s;
}
.dugme:hover, .dukme:hover { opacity: .9; }
.dugme:disabled { background: #c3cbc6; cursor: not-allowed; }

.uyari {
  margin: .7rem 0 0;
  padding: .65rem .8rem;
  border-radius: 10px;
  background: var(--kirmizi-acik);
  color: var(--kirmizi);
  font-size: .98rem;
}

/* Alt bilgi */
.alt {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
  text-align: center;
  color: var(--soluk);
  font-size: .95rem;   /* alt bilgi telefonda okunur olsun */
  line-height: 1.6;
}
.alt p { margin: .25rem 0; }
.alt a { color: var(--vurgu); }
.kucuk { font-size: .88rem; }

/* Onay penceresi */
.onay-kat {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 24, .55);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 50;
}
.onay-kat[hidden] { display: none; }
.onay-kutu {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.tik {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--vurgu-acik);
  color: var(--vurgu);
  font-size: 1.6rem;
  font-weight: 700;
  display: grid; place-items: center;
  margin: 0 auto .8rem;
}
.onay-kutu h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.onay-satir { font-size: 1.08rem; font-weight: 600; margin: .3rem 0; }
.onay-kutu .kucuk { color: var(--soluk); margin: .5rem 0 1.1rem; }

/* ── Yönetim sayfası ───────────────────────────────────────── */
.arac-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.tarih-kutu {
  font-family: inherit;
  font-size: 1.05rem;
  padding: .6rem .7rem;
  min-height: 44px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  flex: 1 1 180px;
}
.kucuk-dugme {
  font-family: inherit;
  font-size: .98rem;
  padding: .55rem .85rem;
  min-height: 44px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  cursor: pointer;
}
.kucuk-dugme:hover { border-color: var(--vurgu); }
.kucuk-dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.kucuk-dugme.tehlike { color: var(--kirmizi); border-color: #e7cdc9; }
.kucuk-dugme.tehlike:hover { background: var(--kirmizi-acik); }

.sayaclar { display: flex; gap: 1.25rem; margin-top: .9rem; flex-wrap: wrap; }
.sayac { font-size: .95rem; color: var(--soluk); }
.sayac b { display: block; font-size: 1.5rem; color: var(--murekkep); font-variant-numeric: tabular-nums; }

.randevu-listesi { display: grid; gap: .6rem; }
.randevu {
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: .65rem .75rem;
  background: #fff;
}
.randevu .r-saat {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--vurgu);
  min-width: 58px;
}
.randevu .r-bilgi { flex: 1 1 auto; min-width: 0; }
.randevu .r-isim { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.randevu .r-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .15rem;
}
.randevu .r-tel { font-size: .95rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
/* Hangi ustanın randevusu — gözle ayrılsın diye renkli küçük etiket */
.randevu .r-usta {
  font-size: .84rem;
  font-weight: 600;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--vurgu-acik);
  color: var(--vurgu);
  white-space: nowrap;
}
.randevu[data-berber="mehmet"] .r-usta {
  background: #e9edf6;
  color: #2b4a7d;
}

/* Berbere göre süzme */
.suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.suz-dugme {
  appearance: none;
  font-family: inherit;
  font-size: .95rem;
  color: var(--murekkep);
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  padding: .5rem .95rem;
  min-height: 44px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.suz-dugme:hover { border-color: var(--vurgu); }
.suz-dugme.secili,
.suz-dugme[aria-selected="true"] {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
  font-weight: 600;
}

/* Satır eylemleri: WhatsApp hatırlatma + iptal */
.r-eylemler {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: stretch;
  flex: 0 0 auto;
}
.r-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 44px;
  padding: .5rem .8rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  color: #1d5c33;
  background: #e3f5e8;
  border: 1px solid #bfe3ca;
  white-space: nowrap;
}
.r-wa::before { content: '💬'; font-size: .95rem; }
.r-wa:hover { background: #d3efdc; border-color: #9ed3ae; }
.r-wa:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.r-wa-yok {
  font-size: .82rem;
  color: var(--soluk);
  text-align: center;
  padding: .4rem .2rem;
}

/* Usta başına randevu sayacı */
.usta-sayac { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.usta-rozet {
  font-size: .9rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--cizgi);
  background: #fff;
  color: var(--soluk);
}
.usta-rozet[data-berber="ahmet"] { border-color: #cfe0d6; color: var(--vurgu); }
.usta-rozet[data-berber="mehmet"] { border-color: #cfd8e8; color: #2b4a7d; }
.randevu .r-iptal {
  font-family: inherit;
  font-size: .95rem;
  padding: .5rem .7rem;
  min-height: 40px;
  border: 1px solid #e7cdc9;
  border-radius: 8px;
  background: #fff;
  color: var(--kirmizi);
  cursor: pointer;
  flex: 0 0 auto;
}
.randevu .r-iptal:hover { background: var(--kirmizi-acik); }

.bos-durum {
  text-align: center;
  color: var(--soluk);
  padding: 1.5rem .5rem;
  font-size: 1rem;
}

.giris-kutu { max-width: 340px; margin: 0 auto; }
.giris-kutu input { margin-bottom: .8rem; }

.gizli { display: none !important; }

/* Küçük ekran ince ayar */
@media (max-width: 420px) {
  /* Dar ekranda sayfa kenara yapışmasın, nefes payı kalsın */
  .kap { padding: .85rem .8rem; }
  .alt { padding: .9rem .8rem 2rem; }
  .baslik { padding: 1.15rem .8rem; }
  .baslik-ic { gap: .65rem; }
  .makas { width: 42px; height: 42px; font-size: 1.55rem; }
  .onay-kutu { padding: 1.25rem 1rem; }

  /* Dar ekranda yazı KÜÇÜLMEZ; kutu genişliği kısalır ki 7 gün sığsın. */
  .gunler { gap: .22rem; }
  .gun { min-height: 64px; padding: .4rem .05rem; }
  .gun .g-ay { display: none; }
  .gun .g-adi { font-size: .82rem; }
  .gun .g-gun { font-size: 1.15rem; }
  .saatler { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .adim { padding: .9rem; }

  /* Telefonda randevu satırı: bilgi üstte, eylemler altta tam genişlik */
  .randevu { flex-wrap: wrap; }
  .randevu .r-bilgi { flex: 1 1 calc(100% - 70px); }
  .randevu .r-eylemler {
    flex: 1 1 100%;
    flex-direction: row;
    margin-top: .15rem;
  }
  .randevu .r-eylemler > * { flex: 1 1 0; }
}

@media (min-width: 560px) {
  .randevu .r-eylemler { flex-direction: column; }
  .randevu .r-eylemler > * { flex: 0 0 auto; }
}

@media (min-width: 640px) {
  .gun .g-adi { font-size: .92rem; }
  .gun .g-gun { font-size: 1.28rem; }
  .gun .g-ay { font-size: .87rem; }
}