@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root{
  --bg-1:#f7f6f3;
  --bg-2:#f2ebe7;
  --card:#ffffff;
  --accent:#b76e79;
  --accent-dark:#9a5460;
  --text:#222222;
  --muted:#6b6b6b;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  display:grid;
  place-items:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:2rem;
  position:relative; /* allow absolute topbar positioning */
}

/* main container (card) */
.container{
  width:100%;
  max-width:720px;
  background:var(--card);
  padding:clamp(1.15rem,2.5vw,2rem);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(20,20,30,0.08);
  text-align:center;
  backdrop-filter: blur(4px);
}

/* brand / heading */
.brand{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:clamp(1.8rem,4vw,2.4rem);
  margin:0 0 .25rem;
  color:var(--accent-dark);
  letter-spacing:0.6px;
}

/* subheading */
h2{
  margin:.35rem 0 .9rem;
  font-size:clamp(1rem,2.2vw,1.2rem);
  font-weight:600;
  color:var(--text);
}

/* lead paragraph */
.lead{
  margin:0 0 1rem;
  color:var(--muted);
  line-height:1.65;
  font-size:clamp(.95rem,1.8vw,1.05rem);
  text-align:center;
}

/* services block: original text has newlines and bullets; preserve formatting */
.services{
  display:inline-block;
  text-align:left;
  white-space:pre-line; /* respect newlines */
  margin:0 0 1.1rem;
  color:var(--muted);
  line-height:1.6;
  font-size:0.99rem;
}

/* button */
.btn-primary{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  color:#fff;
  padding:.75rem 1.35rem;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.4px;
  box-shadow:0 6px 18px rgba(167,96,107,0.18);
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}

/* hover / active / focus */
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(155,75,95,0.16); }
.btn-primary:active{ transform:translateY(-1px) scale(.997); }
.btn-primary:focus{ outline:3px solid rgba(183,110,121,0.12); outline-offset:4px; }

/* ensure links don't add decoration around button */
a{ text-decoration:none; color:inherit; }

/* Booking form layout & fields */
.booking-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:0.4rem;
}

.form-row{
  display:flex;
  gap:0.75rem;
  align-items:center;
  width:100%;
}

/* make inputs share space on wider viewports */
.form-row > input,
.form-row > select{
  flex:1;
}

/* single-column fallback on small screens */
@media (max-width:520px){
  .form-row{ flex-direction:column; align-items:stretch; }
}

/* input / select shared styling */
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form input[type="date"],
.booking-form select{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(34,34,34,0.08);
  background:linear-gradient(180deg,#fff,#fbfbfb);
  padding:0.65rem 0.9rem;
  border-radius:10px;
  font-family:inherit;
  font-size:0.95rem;
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  transition:box-shadow .12s ease, border-color .12s ease, transform .06s ease;
}

/* focus state */
.booking-form input:focus,
.booking-form select:focus{
  outline:none;
  box-shadow:0 6px 18px rgba(167,96,107,0.06);
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* visually hidden labels helper */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* center submit button and give it a bit more width on small screens */
.booking-form .btn-primary{
  padding:.75rem 1.2rem;
  min-width:180px;
}

/* small adjustments for date input icon spacing */
input[type="date"]{
  padding-right:0.8rem;
  -webkit-appearance: none;
}

/* keep container spacing consistent */
.container{
  width:100%;
  max-width:720px;
  background:var(--card);
  padding:clamp(1.15rem,2.5vw,2rem);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(20,20,30,0.08);
  text-align:center;
  backdrop-filter: blur(4px);
}

/* Dashboard layout for randevu listesi */
.dashboard-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:1.25rem;
  align-items:start;
  margin-top:1rem;
}

/* make cards consistent */
.card{
  background:var(--card);
  padding:1rem;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(20,20,30,0.04);
}

/* grid used for small forms inside cards */
.form-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.6rem;
  align-items:center;
  margin-top:0.6rem;
}

/* single-column items (e.g. full width inputs or small screens) */
.form-grid select,
.form-grid input,
.form-grid button{
  min-height:42px;
  border-radius:10px;
}

/* make some controls span multiple columns when needed */
.form-grid input[type="text"],
.form-grid textarea,
.form-grid select#service,
.form-grid select#cust{
  grid-column: span 3;
}

/* for triplet layout (date + staff + button) keep each in one column */
.form-grid input[type="date"],
.form-grid select#filter-staff,
.form-grid button{
  grid-column:auto;
}

/* Sidebar specific */
.sidebar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

/* textarea style */
.sidebar textarea{
  width:100%;
  resize:vertical;
  min-height:160px;
  padding:0.75rem;
  border:1px solid rgba(34,34,34,0.08);
  border-radius:10px;
  font-family:inherit;
  font-size:0.95rem;
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}

/* adjust form button sizing */
.form-grid .btn-primary{
  padding:.6rem .9rem;
  font-size:0.95rem;
}

/* top-right personnel link container */
.topbar{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  display:flex;
  align-items:center;
  z-index:30;
}

/* secondary button - compact, harmonious with primary */
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:.5rem .9rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  color:#fff; /* white text like primary */
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  border:0;
  box-shadow:0 6px 18px rgba(167,96,107,0.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none;
}

/* hover / focus for secondary now matches primary style */
.btn-secondary:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(155,75,95,0.16);
}
.btn-secondary:focus{
  outline:3px solid rgba(183,110,121,0.12);
  outline-offset:4px;
}

/* responsive: move topbar into flow on small screens */
@media (max-width:640px){
  .topbar{
    position:static;
    margin:0 auto 1rem;
    justify-content:flex-end;
    width:100%;
    max-width:720px;
    padding:0 1rem;
  }
  body { padding-top:1rem; }
}

/* responsive: stack columns on small screens */
@media (max-width:900px){
  .dashboard-grid{ grid-template-columns:1fr 300px; }
  .form-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid input[type="date"],
  .form-grid select#filter-staff,
  .form-grid button{ grid-column:auto; }
}

@media (max-width:640px){
  .dashboard-grid{ grid-template-columns:1fr; }
  .sidebar{ order:2; }
  .form-grid{ grid-template-columns:1fr; }
  .form-grid input[type="date"],
  .form-grid select,
  .form-grid button{ width:100%; }
}

/* responsive tweaks */
@media (max-width:480px){
  .container{ padding:1rem; }
  .services{ font-size:.95rem; text-align:left; }
  .brand{ font-size:1.9rem; }
}