/* =========================================================
   AYNATARAK — TABLET KATMANI (>=481px)
   Karar kaynagi: ChatGPT tablet tasarim yaniti (17 Eyl 2026)
   -> ayna-flow/chatgpt-tablet-tasarim-brief.md  (istek)
   -> ayna-flow/chatgpt-tablet-tasarim-response.md (karar)

   KARARLAR (ozet):
   - Kabuk: tablette max-width 760px KORUNUR (yeni dil uretilmez).
   - Bottom sheet: YALNIZ randevu akisi sheet olarak kalir.
     Yardimci araclar (bildirim merkezi, filtre, konum/hizmet secici)
     768px'den itibaren ORTADA DIALOG olur.
   - Alt navigasyon: alt bar kalir (ray/ust sekme YOK).
   - Kesfet: 768-1023 iki kolon, >=1024 uc kolon; dizin-mrec tam satir.
   - Yatay/kisa ekran: randevu sheet'i kendi icinde kaydirilir,
     baslik sticky; ekranda en fazla iki sabit bolge.
   - Dokunma hedefi >=44px, CTA 48-52px.

   KURAL: Telefon (<=480px) BU DOSYANIN KAPSAMI DISINDADIR —
   hicbir kural <=480px'i etkilemez (istenen: sifir mobil degisiklik).
   ========================================================= */

/* =========================================================
   2. FAZ — ChatGPT tablet tasarim yaniti (17 Eyl 2026)
   Kaynak: ayna-flow/chatgpt-tablet-tasarim-faz2-response.md
   Kapsam: tipografi + bosluk + panel kolonlari + panel sheet dialog
   KURAL: her sey >=768px; telefon (<=480px) ve 481-767 DEGISMEZ.
   Not: ChatGPT'nin verdigi bazi sinif adlari projede yok
   (op-form-grid, pa-form-grid, .meta, .chip, .fav-card...) ->
   yalnizca GERCEKTE VAR OLAN selector'lara uygulandi.
   ========================================================= */

@media (min-width: 768px) {
  :root {
    --tablet-page-pad: 24px;
    --tablet-section-gap: 24px;
    --tablet-cta: 48px;
  }

  /* --- TIPOGRAFI (sayfa H1 / bolum / kart / govde / ust etiket) --- */
  .hero h1,
  .customer-page-heading h1,
  .bulk-heading h1,
  .account-app h1,
  .fav-page h1,
  .nc-page h1,
  .seller-apply h1,
  .op-page-head h1,
  .pa-page-head h1 {
    font-size: 28px;
    line-height: 1.15;
  }

  .sec-title,
  .op-section-title,
  .pa-section-title {
    font-size: 21px;
    line-height: 1.25;
  }

  .salon-card__name,
  .appointment-card__head h2,
  .bulk-card__head h2 {
    font-size: 16px;
    line-height: 1.3;
  }

  .card-desc {
    font-size: 15px;
    line-height: 1.45;
  }

  .appointment-card__eyebrow,
  .bulk-card__eyebrow,
  .salon-card__meta {
    font-size: 13px;
    line-height: 1.4;
  }

  /* --- BOSLUK: sayfa yan dolgusu + bolum aralari + liste gap --- */
  .app,
  .customer-app,
  .bulk-app {
    padding-left: var(--tablet-page-pad);
    padding-right: var(--tablet-page-pad);
  }

  .section,
  .sec,
  .op-section,
  .pa-section {
    margin-bottom: var(--tablet-section-gap);
  }

  .fav-list,
  .appointment-list,
  .bulk-list,
  .results-list {
    gap: var(--tablet-gap);
  }

  /* --- PANEL: KPI 2 kolon (>=1024: 3 kolon) --- */
  .op-kpi-grid,
  .pa-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .op-booking-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* --- PANEL SHEET -> ORTADA DIALOG (768px+) ---
     DİKKAT: kural YALNIZ `.is-open` durumunda uygulanır. Aksi halde kapalı sheet'lerin
     "ekran dışı" transform'u ezilir ve kapalı sheet'ler ortada GÖRÜNÜR (regresyon). */
  .op-sheet.is-open {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(600px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    transform: translate(-50%, -50%);
    border-radius: 18px;
    overflow: hidden;
  }
  .op-sheet.is-open .op-sheet__body {
    overflow-y: auto;
    max-height: calc(100dvh - 160px);
  }

  .pa-sheet.is-open {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(600px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    transform: translate(-50%, -50%);
    border-radius: 18px;
    overflow: hidden;
  }
}

/* Panel: >=1024 KPI 3 kolon + master-detail primitifleri */
@media (min-width: 1024px) {
  .op-kpi-grid,
  .pa-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .op-master-detail,
  .pa-master-detail,
  .appointment-master-detail,
  .bulk-master-detail {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .op-master-detail > .op-booking-list,
  .op-master-detail > .op-customer-list,
  .pa-master-detail__list,
  .op-master-detail__list {
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .op-master-detail__detail,
  .pa-master-detail__detail {
    min-width: 0;
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------
   481px+ : ortak degiskenler + dokunma hedefleri
   --------------------------------------------------------- */
@media (min-width: 481px) {
  :root {
    --tablet-max: 760px;
    --tablet-gap: 16px;
    --tablet-section-gap: 24px;
    --tablet-touch: 44px;
  }

  /* Dokunma hedefi: tablette birincil kontroller >=44px yuksek */
  .customer-bottom-nav button,
  .customer-bottom-nav a,
  .bottom-nav button,
  .bottom-nav a,
  .nav-items button,
  .location-button,
  .ayna-mobile-header__back,
  .customer-header__back,
  .dl-filter-trigger,
  .dl-loc-row,
  .dl-filter-option,
  .dl-filter-chip,
  .bulk-loc-opt,
  #atKonum .row,
  .time-chip,
  .day-chip,
  .expert-chip,
  .chip {
    min-height: var(--tablet-touch);
  }

  /* Kategori elipsleri: dokunma hedefi 44px standardindan MUAF tutuldu, biraz daha ince
     (18 Eyl 2026, kullanici: "elipsleri biraz daraltabilirsin yukseklikten"). 36px hala
     rahat dokunulur; ana sayfa ve Kesfet ayni olcuyu kullanir. */
  .cat-chip,
  .category-chip {
    min-height: 36px;
  }

  /* Ana CTA'lar biraz daha buyuk (karar: 48-52px) */
  .booking-sticky-cta button,
  .btn-primary,
  .primary-btn,
  .auth-google,
  .at-confirm__button {
    min-height: 48px;
  }
}

/* ---------------------------------------------------------
   768px+ : yardimci sheet'ler -> ortada DIALOG
   (Randevu sheet'i HARIC: o bottom sheet kalir)
   --------------------------------------------------------- */

/* Bildirim merkezi + degerlendirme sheet'i (560px) */
@media (min-width: 768px) {
  .notification-sheet {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
  }

  /* Kesfet: filtre (600px) ve konum (560px) dialog.
     NOT: bu iki sheet backdrop'un KARDESIDIR ve gorunurlugu [hidden] ile yonetilir
     -> acik durumu `:not([hidden])` secer (dizin.html'deki kural ile ayni mantik). */
  .dl-filter-sheet {
    top: 50%;
    bottom: auto;
    width: min(600px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
  }
  .dl-loc-sheet {
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
  }
  .dl-filter-sheet:not([hidden]),
  .dl-loc-sheet:not([hidden]) {
    transform: translate(-50%, -50%);
  }

  /* Kesfet: HIZMET secici (600px) — ana sayfadaki hizmet seciciyle AYNI olcu
     (18 Eyl 2026: Kesfet'e hizmet secici eklendi; tablet katmaninda yer almadigi icin
     760px bottom sheet olarak kaliyordu = tasarim tutarsizligi). Kapali durumda
     ekran disina +120vh ile itilir (kapali dialog ortada gorunmesin). */
  .dl-svc-sheet {
    top: 50%;
    bottom: auto;
    width: min(600px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
    transform: translate(-50%, calc(-50% + 120vh));
  }
  .dl-svc-sheet:not([hidden]) {
    transform: translate(-50%, -50%);
  }

  /* Ana sayfa hizmet (600px) + konum (560px) secici dialog */
  #svcSheet .sheet {
    top: 50%;
    bottom: auto;
    width: min(600px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
    transform: translate(-50%, calc(-50% + 120vh));
  }
  #locSheet .sheet {
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
    transform: translate(-50%, calc(-50% + 120vh));
  }
  #svcSheet.open .sheet,
  #locSheet.open .sheet {
    transform: translate(-50%, -50%);
  }

  /* Toplu fiyat: konum secici dialog (560px) */
  .bulk-loc-backdrop.open .bulk-loc-sheet {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
  }

  /* Ortak konum secici (isletme header cipi) dialog (560px) */
  #atKonumBd.open #atKonum {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 48px));
    max-height: calc(100dvh - 64px);
    border-radius: 22px;
  }

  /* Kesfet: dizin-mrec reklami tam satir (kart hucresine sikismasin) */
  [data-ad-slot="dizin-mrec"] {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------
   >=1024px : Kesfet 3 kolon (760px kabuk icinde ~246px kart)
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .results-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------
   Yatay / kisa viewport: randevu SHEET olarak kalir,
   kendi icinde kaydirilir; baslik sticky (ekranda en fazla
   iki sabit bolge: sheet basligi + sabit CTA cubugu).
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-height: 900px) {
  .sheet.booking-sheet {
    max-height: calc(100dvh - 24px);
  }
  .sheet.booking-sheet .sheet__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .sheet.booking-sheet .sheet__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
  }
}

/* =========================================================
   2. FAZ (devam) — TAKVİM + PANEL DETAY PANOSU
   ChatGPT: takvim tablette 7 gün SABİT; hücre yüksekliği 84/96px
   (kısa ekranda 76px). Panel detay panosu: sticky başlık + iç scroll.
   ========================================================= */

@media (min-width: 768px) {
  .op-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .op-calendar-day {
    min-width: 0;
    min-height: 84px;
    padding: 8px;
  }
}

@media (min-width: 1024px) {
  .op-calendar-day {
    min-height: 96px;
    padding: 10px;
  }
}

@media (min-width: 1024px) and (max-height: 850px) {
  .op-calendar-day {
    min-height: 76px;
  }
}

@media (min-width: 1024px) {
  /* Panel master-detail sağ panosu (owner/admin) */
  .op-master-detail__detail {
    border: 1px solid var(--line, #e7ebee);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
  }
  .op-detail__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line, #e7ebee);
    background: #fff;
  }
  .op-detail__body {
    max-height: calc(100dvh - 260px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px;
  }
  .op-detail__empty {
    margin: 0;
    color: var(--muted, #687582);
    font-size: 13.5px;
    line-height: 1.5;
  }
  .op-detail__title {
    display: block;
    margin-top: 4px;
    font-size: 16px;
  }
  .op-booking-card.is-selected,
  .op-customer-row.is-selected {
    border-color: var(--brand, #0ea5a4);
    box-shadow: inset 3px 0 0 var(--brand, #0ea5a4);
    background: var(--brand-soft, #e9fbfa);
  }
  .op-master-detail > .op-booking-list,
  .op-master-detail > .op-customer-list {
    gap: 12px;
  }
}