/* MINA — kabuk ikinci katman: hamburger menu, siparis kilavuzu, randevu sheet,
   kart butonlari. Tum secici adlari .mina- / .detail-button / .product-media
   onekli; mevcut styles/ios/store/overrides CSS'ine dokunmaz.
   shell.css'teki .mina-sheet iskeleti ve degiskenleri yeniden kullanilir. */

/* Urun sayfalari styles.css'i yuklemez, yani global `box-sizing: border-box`
   oradan gelmez. Kabuk bilesenleri kendi kutu modelini kendisi sabitler;
   yoksa min-height + padding toplanir ve satirlar ana sayfadakinden uzun olur. */
.mina-sheet, .mina-sheet *, .mina-burger, .mina-burger * { box-sizing: border-box; }

/* ———————————————————————————— hamburger ———————————————————————————— */

.mina-burger {
  flex: 0 0 auto; order: -1;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--mina-hairline-strong); border-radius: 50%;
  color: var(--mina-ink); cursor: pointer;
  transition: transform .4s var(--mina-spring), background .25s var(--mina-ease);
}
.mina-burger:hover { background: rgba(255, 255, 255, .8); }
.mina-burger:active { transform: scale(.92); }
.mina-burger svg { width: 19px; height: 19px; }

/* ———————————————————————————— menu paneli ————————————————————————————
   Mobilde shell.css'ten gelen alt sheet; masaustunde basligin altina,
   sol kenara yerlesir (asistan sheet'i sag altta durdugu icin cakismaz). */

@media (min-width: 861px) {
  .mina-menu .mina-sheet-panel {
    left: max(16px, env(safe-area-inset-left)); right: auto;
    top: calc(var(--mina-header-h) + 10px); bottom: auto;
    width: min(392px, calc(100vw - 48px));
    max-height: min(80dvh, 780px);
  }
}

.mina-menu-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
/* Kaydirilabilir govdede satirlar ezilmesin: yukseklik icerikten gelir. */
.mina-menu-body > * { flex: 0 0 auto; }

.mina-menu-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mina-accent); padding: 2px 4px;
}

.mina-menu-group {
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--mina-r-m);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--mina-shadow-s);
  overflow: hidden;
}

/* Satir duzeni: 40px sabit ikon kutusu | 1fr metin | 20px chevron.
   Sutunlar sabit oldugu icin ikon, metin ve chevron butun satirlarda ayni
   x hizasinda durur; alt satiri (small) olan satir da hizayi bozmaz.      */
.mina-menu-row {
  display: grid; grid-template-columns: 40px 1fr 20px;
  align-items: center; column-gap: 12px;
  min-height: 56px; padding: 11px 14px;
  background: transparent; border: 0; width: 100%;
  border-top: 1px solid var(--mina-hairline);
  color: var(--mina-ink); text-decoration: none; text-align: left;
  font: 500 15px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background .2s var(--mina-ease);
}
.mina-menu-row:first-child { border-top: 0; }
.mina-menu-row:hover { background: rgba(255, 255, 255, .9); }
.mina-menu-row:active { background: rgba(41, 38, 34, .06); }
.mina-menu-text { min-width: 0; }
.mina-menu-row small { display: block; font-size: 12px; font-weight: 400; color: var(--mina-ink-soft); margin-top: 2px; }
.mina-menu-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(123, 85, 61, .1); color: var(--mina-accent);
  line-height: 1;
}
.mina-menu-ico svg { width: 22px; height: 22px; display: block; }
.mina-menu-chev {
  width: 20px; text-align: center;
  color: var(--mina-ink-faint); font-size: 19px; line-height: 1;
}

/* Dil satiri: chevron yerine TR|EN segmenti tasir. Ikon ve metin sutunlari
   diger satirlarla ayni oldugu icin x hizasi korunur. */
.mina-menu-langrow { grid-template-columns: 40px 1fr auto; cursor: default; }
.mina-menu-langrow:hover { background: transparent; }

/* urun sayfasindaki kategori listesi */
.mina-menu-item {
  display: flex; align-items: center; gap: 11px;
  min-height: 56px; padding: 9px 14px;
  border-top: 1px solid var(--mina-hairline);
  color: var(--mina-ink); text-decoration: none;
  font: 400 13.5px/1.35 system-ui, -apple-system, sans-serif;
  transition: background .2s var(--mina-ease);
}
.mina-menu-item:first-child { border-top: 0; }
.mina-menu-item:hover { background: rgba(255, 255, 255, .9); }
.mina-menu-item[aria-current="page"] { background: rgba(123, 85, 61, .1); font-weight: 600; }
.mina-menu-item img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #efe8df; }
.mina-menu-item > span { flex: 1 1 auto; min-width: 0; }
.mina-menu-item b { display: block; font-weight: 500; }
.mina-menu-item i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mina-accent); }

/* ———————————————————————————— siparis kilavuzu ————————————————————————————
   iOS onboarding: yatay scroll-snap seritte 5 adim, nokta gostergesi,
   Ileri/Geri. Kaydirma tarayicinin kendi dokunma jesti ile olur. */

.mina-guide-track {
  flex: 1 1 auto; min-height: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mina-guide-track::-webkit-scrollbar { display: none; }

.mina-guide-slide {
  flex: 0 0 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 10px;
  display: flex; flex-direction: column; gap: 11px;
}
.mina-guide-step {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(123, 85, 61, .12); color: var(--mina-accent);
  font: 700 11px/1 system-ui, -apple-system, sans-serif; letter-spacing: .1em;
}
.mina-guide-art {
  width: 54px; height: 54px; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #f1e4d6, #e2cdb8);
  color: #6d4e39; font-size: 24px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.mina-guide-slide h3 {
  margin: 2px 0 0;
  font: 750 21px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.02em;
}
.mina-guide-slide p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mina-ink-soft); }
.mina-guide-slide p.is-strong { color: var(--mina-ink); }
.mina-guide-slide ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--mina-ink-soft); }
.mina-guide-slide li { margin-bottom: 5px; }
.mina-guide-note {
  margin-top: 2px; padding: 11px 13px; border-radius: var(--mina-r-s);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--mina-hairline);
  font-size: 13px; line-height: 1.55; color: var(--mina-ink);
}
.mina-guide-action {
  align-self: flex-start; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 11px 17px; border-radius: 999px;
  background: var(--mina-ink); color: #fbf8f4; border: 1px solid var(--mina-ink);
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  text-decoration: none; cursor: pointer;
  transition: transform .4s var(--mina-spring), background .2s var(--mina-ease);
}
.mina-guide-action:hover { background: #45392f; }
.mina-guide-action:active { transform: scale(.95); }
.mina-guide-action.is-soft { background: rgba(255, 255, 255, .9); color: var(--mina-ink); border-color: var(--mina-hairline-strong); }
.mina-guide-action.is-soft:hover { background: #fff; }

.mina-guide-dots {
  flex: 0 0 auto; display: flex; gap: 7px; justify-content: center;
  padding: 10px 0 2px;
}
.mina-guide-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(41, 38, 34, .2); cursor: pointer;
  transition: transform .4s var(--mina-spring), background .25s var(--mina-ease);
}
.mina-guide-dots button.is-on { background: var(--mina-accent); transform: scale(1.45); }

.mina-guide-nav {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mina-hairline);
}
.mina-guide-nav button {
  min-height: 44px; padding: 11px 18px; border-radius: 999px;
  font: 600 13px/1 system-ui, -apple-system, sans-serif; cursor: pointer;
  transition: transform .4s var(--mina-spring), background .2s var(--mina-ease);
}
.mina-guide-back { background: rgba(255, 255, 255, .9); color: var(--mina-ink); border: 1px solid var(--mina-hairline-strong); }
.mina-guide-back:hover { background: #fff; }
.mina-guide-next { margin-left: auto; background: var(--mina-ink); color: #fbf8f4; border: 1px solid var(--mina-ink); }
.mina-guide-next:hover { background: #45392f; }
.mina-guide-nav button:active { transform: scale(.95); }
.mina-guide-nav button[disabled] { opacity: .42; cursor: default; }
.mina-guide-count { font-size: 12.5px; color: var(--mina-ink-faint); font-variant-numeric: tabular-nums; }

/* ———————————————————————————— randevu sheet ———————————————————————————— */

.mina-appt-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 6px;
}
/* Govde kaydiginda tarih/saat satirlari sikismasin, kendi yuksekliklerini korusun. */
.mina-appt-body > * { flex: 0 0 auto; }
.mina-appt-label {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mina-accent); margin: 10px 0 2px;
}
.mina-appt-dates {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 8px;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.mina-appt-dates::-webkit-scrollbar { display: none; }
.mina-appt-date {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 62px; min-height: 66px; padding: 9px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(255, 255, 255, .8); color: var(--mina-ink);
  border: 1px solid var(--mina-hairline-strong); border-radius: var(--mina-r-s);
  font: 500 13px/1.2 system-ui, -apple-system, sans-serif; cursor: pointer;
  transition: transform .4s var(--mina-spring), background .2s var(--mina-ease);
}
.mina-appt-date small { font-size: 10.5px; color: var(--mina-ink-soft); letter-spacing: .04em; }
.mina-appt-date b { font-size: 17px; font-weight: 700; }
.mina-appt-date:active { transform: scale(.94); }
.mina-appt-date[aria-pressed="true"] { background: var(--mina-ink); color: #fbf8f4; border-color: var(--mina-ink); }
.mina-appt-date[aria-pressed="true"] small { color: #e2d3c4; }

.mina-appt-times { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 6px; }
.mina-appt-time {
  min-height: 42px; padding: 10px 14px;
  background: rgba(255, 255, 255, .8); color: var(--mina-ink);
  border: 1px solid var(--mina-hairline-strong); border-radius: 999px;
  font: 500 13.5px/1 system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform .4s var(--mina-spring), background .2s var(--mina-ease);
}
.mina-appt-time:active { transform: scale(.94); }
.mina-appt-time[aria-pressed="true"] { background: var(--mina-ink); color: #fbf8f4; border-color: var(--mina-ink); }

.mina-appt-field { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.mina-appt-field > span {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mina-accent);
}
.mina-appt-field input, .mina-appt-field textarea {
  width: 100%; min-height: 46px; padding: 12px 14px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--mina-hairline-strong); border-radius: var(--mina-r-s);
  color: var(--mina-ink);
  font: 400 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mina-appt-field textarea { min-height: 74px; resize: vertical; }
.mina-appt-field input::placeholder, .mina-appt-field textarea::placeholder { color: var(--mina-ink-faint); }

.mina-appt-foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mina-hairline);
  background: rgba(255, 255, 255, .42);
}
.mina-appt-send {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 18px; border-radius: 14px;
  background: var(--mina-ink); color: #fbf8f4; border: 1px solid var(--mina-ink);
  font: 700 14px/1 system-ui, -apple-system, sans-serif;
  text-decoration: none; cursor: pointer;
  transition: transform .4s var(--mina-spring), background .2s var(--mina-ease);
}
.mina-appt-send:hover { background: #45392f; }
.mina-appt-send:active { transform: scale(.98); }
.mina-appt-send.is-disabled { background: rgba(41, 38, 34, .14); border-color: transparent; color: var(--mina-ink-faint); cursor: default; }
.mina-appt-hint { font-size: 12px; line-height: 1.5; color: var(--mina-ink-soft); margin: 0; }
.mina-appt-hint.is-warn { color: #9a3b2f; font-weight: 600; }

/* ———————————————————————————— urun karti butonlari ————————————————————————————
   Fotograf ve baslik artik ayni sekmede urun sayfasina gider; modal yalniz
   fotograf uzerindeki "Yakindan incele" butonundan acilir. */

.product-media { position: relative; display: block; }
.product-card > .product-media { flex: 0 0 auto; }
.product-media > a.product-open { cursor: pointer; }
.product-media > .product-view-label {
  border: 1px solid #fff9; border-radius: 999px;
  background: #fffdf0d9; color: #2f2730;
  font-size: 12px; font-weight: 700; cursor: pointer;
  min-height: 38px;
}
.product-media > .product-view-label:hover { background: #fffdf0; }
a.product-title-open:hover { text-decoration: underline; text-underline-offset: 3px; }

/* "Urunu incele" — .add-button ile ayni olcu, beyaz zemin, ince kenarlik. */
.detail-button {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; margin: 12px 0 0; padding: 12px 16px;
  border: 1px solid #d9ccd5; border-radius: 14px;
  background: #fff; color: #29252e;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0; text-align: left; text-decoration: none;
  transition: transform .2s var(--mina-ease), background .2s var(--mina-ease), border-color .2s var(--mina-ease);
}
.detail-button:hover { background: #fbf6f8; border-color: #b9a4b1; }
.detail-button:active { transform: scale(.985); }
.detail-button span { flex: 0 0 auto; }

@media (max-width: 620px) {
  .product-card .detail-button { min-height: 44px; margin-top: 9px; padding: 10px 12px; font-size: 14px; }
}

/* Urun sayfasindaki .btn kalibi <button> olarak da kullanilir. */
button.btn { box-sizing: border-box; width: 100%; font: inherit; font-weight: 700; cursor: pointer; }

/* Goruntulu gorusme bolumundeki randevu butonu — bolumun kendi butonlariyla
   ayni olcude; .video-visit-actions dikey yiginda tam genislik alir. */
.video-appointment {
  box-sizing: border-box; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 20px;
  border: 1px solid #29252e; border-radius: 14px;
  background: #29252e; color: #fbf8f4;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: transform .2s var(--mina-ease), background .2s var(--mina-ease);
}
.video-appointment:hover { background: #45392f; }
.video-appointment:active { transform: scale(.985); }

/* ———————————————————————————— odeme ibaresi ———————————————————————————— */

.mina-pay-note {
  display: block; margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.55; color: #6f6962;
}
.mina-pay-note strong { color: #292622; font-weight: 700; }
.cart-bottom .mina-pay-note { margin: 10px 0 0; }
.mina-order-code {
  display: inline-block; margin-top: 6px; padding: 5px 10px;
  border: 1px dashed #c9b8a6; border-radius: 8px;
  background: #fffaf3; color: #5c452f;
  font: 700 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}

/* ———————————————————————————— hareket azaltma ———————————————————————————— */

@media (prefers-reduced-motion: reduce) {
  .mina-burger, .mina-menu-row, .mina-menu-item, .mina-guide-action, .mina-guide-nav button,
  .mina-guide-dots button, .mina-appt-date, .mina-appt-time, .mina-appt-send, .detail-button {
    transition-duration: .01ms !important;
  }
  .mina-guide-track { scroll-behavior: auto; }
}