/* Dükkân paneli (15c). Petrol yeşili ve bakır: koltuğun derisi, aynanın pirinç çerçevesi. Petrol zemin yalnız
   asıl eylemde (her ekranda tek; kasada Nakit ve Kart birlikte), bakır "sıradaki" ve şerit çizgisinde.
   Kart ve hafif gölge açık temada; koyu temada gölge yok, kartı çerçeve ayırır. İkonlar süs: etiketi yanında.
   Önce telefon; panel tr/en, hep soldan sağa. Arapça müşteri adları <bdi> içinde, cihazın yazı tipiyle. */

:root {
  --paper: #F1F4F4;
  --card: #FFFFFF;
  --ink: #14232A;
  --steel: #4F6169;     /* 5.85:1 kâğıt, 6.47:1 kart üstünde */
  --line: #D0DADC;      /* süs çizgisi; bilgi taşıyan çerçeve --steel */
  --accent: #0E4F5E;    /* petrol: asıl eylem */
  --on-accent: #FFFFFF;
  --copper: #9C5420;    /* bakır: sıradaki, şerit */
  --copper-soft: #F5E6D8;
  --ok: #17714A;
  --ok-soft: #E2F2EA;
  --error: #B42318;
  --err-soft: #FBE7E5;
  --accent-soft: #DDEDF0;
  --shadow: 0 1px 2px rgb(20 35 42 / 0.06), 0 6px 16px rgb(20 35 42 / 0.07);
  --tap: 3rem;          /* 48 px: giriş alanı ve ikincil düğme */
  --tap-main: 3.5rem;   /* 56 px: asıl düğme */
  --gap: 1rem;
  --menu-height: 4rem;
  --r-card: 0.875rem;
  --r-ctl: 0.625rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0C1518;
    --card: #152328;
    --ink: #E7EEF0;
    --steel: #9AABB1;
    --line: #2A3B41;
    --accent: #6CC3D5;
    --on-accent: #0C1518;
    --copper: #E5A06A;
    --copper-soft: #3A2A1E;
    --ok: #5FD09A;
    --ok-soft: #16352A;
    --error: #FF8A80;
    --err-soft: #3D1F1E;
    --accent-soft: #173840;
    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
  font-variant-numeric: tabular-nums;  /* tutarlar ve saatler alt alta hizalı */
}

h1 { font-family: var(--serif); font-size: 1.5625rem; line-height: 1.2; font-weight: 600; margin: 0 0 var(--gap); }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
p { margin: 0 0 var(--gap); max-width: 38rem; }

a { color: var(--ink); text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.icon { flex: none; width: 1.25rem; height: 1.25rem; }

/* Üst çubuk: marka, dil, çıkış. */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--gap);
  padding: 0.5rem var(--gap);
  background: var(--card);
  border-block-end: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; margin-inline-end: auto; min-width: 0; max-width: 100%;
         font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
/* Dükkân adı kullanıcı verisi: kesilmez, alt satıra iner; en çok 3 satır (tam ad title'da). 3 x 1.25 satır
   yüksekliği masaüstünde rayın üstündeki 4.5rem'e sığar. */
.brand-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
              display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.brand .icon { color: var(--copper); }
/* Formun görünmez varsayılan gönder düğmesi (Enter ana işlemi yapar); display:none değil, her tarayıcıda çalışsın. */
.default-submit { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%);
                  white-space: nowrap; border: 0; padding: 0; }
.bar form { margin: 0; }
.langs { display: flex; gap: 0.25rem; }
.langs a, .langs button, .quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding-inline: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: none;
  color: var(--steel);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.langs [aria-current="true"] { color: var(--ink); border-color: var(--steel); font-weight: 600; }

main { width: 100%; max-width: 32rem; margin-inline: auto; padding: 1rem var(--gap) calc(var(--menu-height) + 2rem); }

/* Sayfa şeridi: tırnaklı başlık ve altında kısa bakır çizgi (tabela). */
.page-head {
  margin-block-end: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.page-head h1 { margin: 0; overflow-wrap: anywhere; }
.page-head::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-block-start: 0.625rem;
  border-radius: 2px;
  background: var(--copper);
}
.page-sub { margin: 0.25rem 0 0; color: var(--steel); }

.card {
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

/* Form: etiket üstte, alan tam genişlik, asıl düğme başparmak boyunda. */
.stack { display: grid; gap: 0.5rem; margin-block-end: 0; }
.stack label { font-weight: 600; margin-block-start: 0.5rem; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--steel);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;  /* 16 px: iOS odaklanınca yakınlaştırmaz */
}
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-main);
  margin-block-start: 1rem;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
  font: inherit;
  font-weight: 600;
  font-size: 1.25rem;
  cursor: pointer;
}

.notice {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid;
  border-radius: var(--r-ctl);
  background: var(--card);
}
.notice.error { border-inline-start-color: var(--error); color: var(--error); }
.notice.ok { border-inline-start-color: var(--ok); color: var(--ok); }
.muted, .aside { color: var(--steel); }


/* Boş durum: ne olduğu ve ne yapılacağı, büyük soluk ikonla. */
.empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-block-end: 1.5rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--steel);
  border-radius: var(--r-card);
  text-align: center;
}
.empty .icon { width: 2.75rem; height: 2.75rem; color: var(--steel); }
.empty p { margin: 0; }
.empty-title { font-weight: 600; font-size: 1.125rem; }

/* Menü: telefonda altta (başparmak), genişte yan rayda. İkon etiketin üstünde (sonra gelir, öne alınır). */
.menu {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--card);
  border-block-start: 1px solid var(--line);
}
.menu ul { display: flex; margin: 0; padding: 0; list-style: none; }
.menu li { flex: 1; }
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: var(--menu-height);
  padding-inline: 0.25rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.menu-item .icon { order: -1; width: 1.5rem; height: 1.5rem; }
.menu-item[aria-disabled="true"] { color: var(--steel); }
.menu-item small { font-size: 0.875rem; font-weight: 600; }
.menu-item { border-block-start: 3px solid transparent; }
.menu-item[aria-current="page"] { font-weight: 600; color: var(--accent); border-block-start-color: var(--accent); }
/* C aşama 2: Yönetim grubu. Telefonda "Daha fazla" (<details>) çubuğun üstünde açılır; başlıklı liste gizli. */
.menu .menu-admin, .menu-heading { display: none; }
.menu-more { position: relative; }
.menu-more summary { list-style: none; cursor: pointer; }
.menu-more summary::-webkit-details-marker { display: none; }
.menu-more details[data-current] > summary { font-weight: 600; color: var(--accent); border-block-start-color: var(--accent); }
.menu .menu-more ul { position: absolute; inset-block-end: 100%; inset-inline-end: 0; display: block; min-width: 12rem;
                      background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.menu-more ul .menu-item { flex-direction: row; justify-content: flex-start; gap: 0.625rem; padding-inline: var(--gap);
                           min-height: var(--tap); border-block-start: 0; }

/* Randevu günü: koltuk başında bir bakış. Her randevu bir kart; sıradakinin solunda bakır şerit ve rozet,
   "Geldi" düğmesi ekranın tek dolu düğmesi. */
.day-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; margin-block-end: 1rem; }
.day-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: var(--tap);
  padding-inline: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.day-nav [aria-current="date"] { font-weight: 600; border-color: var(--steel); }

.agenda { display: grid; gap: 0.625rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.appt {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.75rem 0.875rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start-width: 4px;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.appt-time { font-size: 1.5625rem; font-weight: 600; line-height: 1; direction: ltr; text-align: start; }
.appt-body { display: grid; gap: 0.125rem; min-width: 0; }
.appt-customer { font-weight: 600; overflow-wrap: anywhere; }
.appt-meta { color: var(--steel); overflow-wrap: anywhere; }
.appt-staff { margin-inline-start: 0.5rem; }
/* Rozetler: Geldi / Gelmedi / İptal / Sıradaki. Yazı hep var ve mürekkep renginde (soluk satırda da okunur);
   zemin ve çerçeve ek ipucu, renk tek başına anlam taşımaz. */
.appt-status, .appt-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--steel);
  border-radius: 999px;
  background: var(--card);
  white-space: nowrap;
}
.appt-status { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.appt-status .icon, .appt-flag .icon { width: 1rem; height: 1rem; }
.appt[data-status="completed"] .appt-status { background: var(--ok-soft); border-color: var(--ok); }
.appt[data-status="no_show"] .appt-status { background: var(--err-soft); border-color: var(--error); }
.appt[data-status="cancelled"] .appt-status, .appt[data-voided] .appt-status { background: var(--line); border-color: var(--steel); }
.appt-flag { font-size: 0.9375rem; font-weight: 600; color: var(--ink); background: var(--copper-soft); border: 1px solid var(--copper); }
.quiet-row { background: transparent; }
.quiet-row .appt-time, .quiet-row .appt-customer { color: var(--steel); }
.appt[data-next] { border-inline-start-color: var(--copper); }
.appt[data-next] .appt-time { color: var(--copper); }
/* Geldi ama kasaya girilmedi: soluk değil, kesik mürekkep çizgisi ve yazı (renk tek başına anlam taşımaz). */
.appt[data-unrecorded] { border-inline-start: 4px dashed var(--ink); }
.appt-unrecorded { font-size: 0.9375rem; font-weight: 600; }
.appt-notice { grid-column: 1 / -1; margin: 0; }
/* Durum düğmeleri: tam genişlik satır, 48 px, arada 12 px; çerçeveli. Petrol yalnız sıradakinin "Geldi"si. */
.appt-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.appt-buttons, .appt-confirm { display: flex; flex-wrap: wrap; gap: 0.75rem; width: 100%; margin: 0; }
.appt-buttons > *, .appt-confirm > .appt-act { flex: 1; }
.appt-confirm-q { flex-basis: 100%; margin: 0; font-weight: 600; }
.appt-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding-inline: 1rem;
  border: 1px solid var(--steel);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.appt-buttons > .appt-act-main, .appt-confirm > .appt-act-main { flex: 2; border: 2px solid var(--ink); }
.appt[data-next] .appt-buttons > .appt-act-main { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.appt-act:disabled { opacity: 0.6; cursor: progress; }

.till {
  margin-block-end: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.till h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.25rem; }
.till h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.25rem; }
.till-total { font-size: 1.9375rem; font-weight: 600; line-height: 1.2; margin-block-end: 0.5rem; }
.till-rows { margin: 0; }
.till-rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  align-items: center;
  border-block-end: 1px solid var(--line);
}
.till-rows dt { color: var(--steel); }
.till-rows dd { margin: 0; font-weight: 600; }
.till-link, .appt-record, .sale-void, .back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);  /* 48 px dokunma */
  color: var(--ink);
}
.appt-record { justify-self: start; font-size: 0.9375rem; font-weight: 600; }
.sale-void { justify-self: end; font-size: 0.9375rem; }  /* tutarın sağ kenarına hizalı */

/* Kasa: tezgâh başında, tek başparmakla. Seçimler büyük satırlar; ödeme düğmeleri aynı zamanda kaydeder
   ve telefonda başparmak bölgesinde (alt menünün hemen üstünde) yapışık durur. İkonları CSS'ten (yerel dosya):
   düğmenin yazısı düz kalır. */
a.primary { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.day > .primary { margin-block: 0 1.25rem; }
/* 15e: "Randevu ekle". Sıradaki randevu başladıysa çerçeveli (dolu düğme onun "Geldi"si), değilse .primary (E7). */
.add-appt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-main);
  margin-block: 0 1.25rem;
  padding-inline: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
}
.add-appt.primary { border-color: var(--accent); color: var(--on-accent); }
.slot-choices { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.slot-choices > legend, .slot-choices > p { grid-column: 1 / -1; }
.slot-picker { display: grid; gap: 1.25rem; }
/* 15f: "Excel'e aktar" çerçeveli; kasa sayfasının dolu düğmesi "Kasaya kayıt gir" kalır. */
.export-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-block: 0 1.25rem;
  padding-inline: 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
/* C 1b: Kasa'da "Excel'e aktar" başlık kartının sağ üstünde (rtl'de sol üstünde), küçük ve ikincil. Başlık ilk
   öğe kalır (test_page_head_strip); dar ekranda (24rem altı) düğme bakır çizginin altına iner. */
.page-head:has(> .export-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem;
                                 align-items: start; }
.page-head:has(> .export-link) > h1 { grid-column: 1; grid-row: 1; }
.page-head:has(> .export-link) > .page-sub { grid-column: 1; grid-row: 2; }
.page-head:has(> .export-link)::after { grid-column: 1; grid-row: 3; }
.page-head > .export-link { grid-column: 2; grid-row: 1; margin: 0; border-width: 1px; font-size: 0.9375rem;
                            white-space: nowrap; }
@media (max-width: 24rem) {
  .page-head:has(> .export-link) { grid-template-columns: minmax(0, 1fr); }
  .page-head > .export-link { grid-column: 1; grid-row: 4; justify-self: start; margin-block-start: 0.75rem; }
}
.export-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.sale-form, .void-form { display: grid; gap: 1.25rem; }
.sale-form .page-head, .void-form .page-head { margin: 0; }
.sale-customer { font-size: 1.25rem; margin: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-block-end: 0.5rem; font-weight: 600; }
.choices { display: grid; gap: 0.5rem; }
.staff-choices { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap-main);
  padding-inline: 0.875rem;
  border: 2px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); }
.choice-price { margin-inline-start: auto; font-weight: 600; white-space: nowrap; }
.field { display: grid; gap: 0.5rem; }
.field label { font-weight: 600; }
.field p { margin: 0; }
.field-error { color: var(--error); }
.amount-row { display: flex; align-items: center; gap: 0.5rem; }
.amount-row input { font-size: 1.5625rem; font-weight: 600; text-align: end; }
.currency { color: var(--steel); font-weight: 600; }
textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--steel);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.pay {
  position: sticky;
  inset-block-end: calc(var(--menu-height) + 0.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding-block: 0.5rem;
  background: var(--paper);
}
.pay .primary { margin: 0; }
.pay button::before {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pay button[value="cash"]::before { -webkit-mask-image: url("/static/icons/cash.svg"); mask-image: url("/static/icons/cash.svg"); }
.pay button[value="card"]::before { -webkit-mask-image: url("/static/icons/card.svg"); mask-image: url("/static/icons/card.svg"); }
.sale-end { display: grid; justify-items: end; gap: 0.25rem; }
.sale-amount { font-weight: 600; white-space: nowrap; }
.sale-void-reason { color: var(--steel); overflow-wrap: anywhere; }  /* öteki soluk metinle aynı ton, AA */
.appt[data-saved] { border-inline-start-color: var(--ok); }
.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-main);
  padding-inline: 1.25rem;
  border: 2px solid var(--error);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--error);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
}
.back { justify-self: center; }

/* Takvim, ekip, hizmetler: satır satır kartlar. Bir anda tek satır açık, onun "Kaydet"i sayfanın tek dolu
   düğmesi. Kapalı ya da dükkân saatini izleyen günde saat alanları gizlenir. */
.tabs, .staff-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1.25rem; }
.tabs a, .staff-pick a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding-inline: 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--steel);
  text-decoration: none;
}
.tabs a[aria-current="page"], .staff-pick a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.block { margin-block-end: 2rem; }
.block h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem; }
.week, .items { display: grid; gap: 0.5rem; list-style: none; margin: 0 0 0.75rem; padding: 0; }
.week-row, .item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: var(--tap-main);
  padding: 0.25rem 0.875rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.week-link {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: var(--tap-main);
  color: inherit;
  text-decoration: none;
}
.week-day { flex: 0 0 6.5rem; font-weight: 600; }
.week-hours, .item-when { flex: 1 1 auto; }
.item-when { font-weight: 600; }
.week-edit { margin-inline-start: auto; padding-inline-start: 0.75rem; text-decoration: underline; text-underline-offset: 0.2em; }
.item-note { flex-basis: 100%; color: var(--steel); overflow-wrap: anywhere; order: 3; }
.item-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; }
.item-actions form { margin: 0; }
.row-act {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding-inline: 0.75rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.row-act.add {
  padding-inline: 1rem;
  border: 1px solid var(--steel);
  border-radius: var(--r-ctl);
  background: var(--card);
  font-weight: 600;
  text-decoration: none;
}
.row-form { display: grid; gap: 1rem; flex: 1 1 100%; padding-block: 0.75rem; }
.block.row-form {
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.modes { display: grid; gap: 0.5rem; }
.modes p { margin: 0; }
.span { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.row-form:has(input[name="mode"][value="off"]:checked) .span,
.row-form:has(input[name="mode"][value="shop"]:checked) .span,
.row-form:has(input[name="mode"][value="closed"]:checked) .span { display: none; }
.row-actions { display: flex; align-items: center; gap: 0.75rem; }
.row-actions .primary { flex: 1; margin: 0; }
input[type="time"], input[type="date"], select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--steel);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
[aria-invalid="true"] { border: 2px solid var(--error); }
.conflicts { padding: 0.75rem 1rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--error);
             border-radius: var(--r-ctl); background: var(--card); }
.conflicts-title { color: var(--error); font-weight: 600; margin-block-end: 0.25rem; }
.conflicts ul { list-style: none; margin: 0; padding: 0; }
.conflicts li a { display: flex; flex-wrap: wrap; gap: 0 0.5rem; min-height: var(--tap); padding-block: 0.5rem;
                  border-block-start: 1px solid var(--line); }
.conflict-when { font-weight: 600; }
.conflict-open { flex-basis: 100%; color: var(--steel); }
.saved { color: var(--ok); font-weight: 600; margin: 0; }

@media (min-width: 56.25rem) {
  h1 { font-size: 1.9375rem; }
  .menu {
    inset-block: 0;
    inset-inline-end: auto;
    width: 12rem;
    border-block-start: 0;
    border-inline-end: 1px solid var(--line);
    padding-block-start: 4.5rem;
  }
  .menu ul { flex-direction: column; }
  .menu-item { flex-direction: row; justify-content: flex-start; gap: 0.625rem; padding-inline: var(--gap); min-height: var(--tap);
               border-block-start: 0; border-inline-start: 3px solid transparent; }
  .menu-item[aria-current="page"] { border-inline-start-color: var(--accent); }
  body:has(.menu) main { margin-inline-start: max(13rem, calc((100% - 32rem) / 2)); padding-block-end: 2rem; }
  .menu-more { display: none; }
  .menu .menu-admin { display: flex; }
  .menu-heading { display: block; margin: 1.25rem var(--gap) 0.25rem; font-family: inherit; font-size: 0.875rem;
                  font-weight: 600; color: var(--steel); }
  /* C 1a: sabit yan ray şeritlerin baş kısmının üstüne biniyordu; şeritler raydan sonra başlar */
  body:has(.menu) .wa-strip, body:has(.menu) .entered { margin-inline-start: 12rem; }
  /* Marka kenar çubuğunun üstündeki boşlukta (menünün padding-block-start'ı); üst çubuğun kalanı raydan sonra */
  body:has(.menu) .bar { margin-inline-start: 12rem; }
  body:has(.menu) .brand { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 1;
                           inline-size: 12rem; block-size: 4.5rem; padding-inline: var(--gap); margin: 0; }
  .pay { inset-block-end: 0; }  /* genişte menü yan rayda */
}

/* Süper yönetici (15. adım). Liste satırları kart: bütün kart dokunma hedefi. Sayfanın tek dolu düğmesi
   "Dükkân aç" / "Dükkânı aç" / "Kaydet". Dükkâna girmişken mürekkep zeminli şerit: kimin dükkânında
   olunduğu her sayfada, renk dışında da (yazı) belli. */
.admin, .admin-form { display: grid; gap: 1rem; }
.admin .page-head, .admin-form .page-head { margin: 0; }
.admin h1, .admin-form h1 { margin: 0; overflow-wrap: anywhere; }
a.primary { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-block-start: 0; }
.shops { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.shop-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.shop-row.quiet-row { background: transparent; }
.shop-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.625rem 0.875rem;
  color: inherit;
  text-decoration: none;
}
.shop-body { display: grid; flex: 1; min-width: 0; }
.shop-name { font-weight: 600; font-size: 1.125rem; overflow-wrap: anywhere; }
.quiet-row .shop-name { color: var(--steel); }
.admin-actions { display: grid; gap: 0.75rem; }
.admin-actions .appt-act { width: 100%; }
.owner-link { display: grid; gap: 0.5rem; padding: 1rem; border: 2px solid var(--copper); border-radius: var(--r-card); background: var(--card); }
.owner-link h2 { font-size: 1.125rem; margin: 0; }
.owner-link p { margin: 0; }
.owner-link input { font-family: ui-monospace, monospace; font-size: 0.9375rem; }
.admin-danger { display: grid; }
.danger-link { display: flex; align-items: center; gap: 0.375rem; min-height: var(--tap); color: var(--error); font-weight: 600; }
.entered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem var(--gap);
  background: var(--ink);
  color: var(--paper);
}
.entered bdi { font-weight: 600; overflow-wrap: anywhere; }
.entered form { margin: 0; }
.entered button {
  min-height: var(--tap);
  padding-inline: 1rem;
  border: 1px solid var(--paper);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* K7 (17): WhatsApp bağlantı uyarısı, her sayfada; yalnız sahip ve dükkâna girmiş süper yönetici */
.wa-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem var(--gap);
  border-block: 2px solid var(--error);
  color: var(--error);
  font-weight: 600;
}
.wa-strip a { color: inherit; min-height: var(--tap); display: inline-flex; align-items: center; }
.wa-qr { display: block; width: 240px; max-width: 100%; height: auto; background: #fff; }

/* C aşama 3: sayfalar arası kısa solma (tarayıcının çapraz solması, yalnız süre kısaltılır); htmx'te
   `transition:true` olan #main değişimleri de aynı süreyi kullanır. Desteklemeyen tarayıcıda eskisi gibi. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  /* C 1f: görünüm geçişleri (htmx transition:true, sayfalar arası) kapalı. `animation:` kısaltması yerine
     `animation-name`: test_design.test_motion_only_when_allowed bloğun dışında kısaltmayı yasaklar. */
  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) { animation-name: none; }
}