/* ═════ MOBİL DÜZEN (Gülbin, 18 Ekim: "mobili geliştir, sayfa sağa sola kayıyor, üstten kesiliyor";
   "üst bar dip dibe ve mobilde gözükmüyor") ═════
   1) iPhone, puntosu 16 px'ten küçük yazı kutusuna dokununca sayfayı büyütüyor: sayfa sağa sola kayıyor,
      üst çubuk ekrandan çıkıyordu. Kutular telefonda 16 px.
   2) 100vh iPhone'da adres çubuğunu saymıyor; yükseklik görünen ekrana (dvh) göre.
   3) Üst çubuk 375 px'e sığmıyordu: telefonda logo + Çıkış + Onaya gönder, aralarında pay; ekranın
      üstüne sabit. Tasarım hizmeti ve Yardım Tasarım panelinde de var.
   4) 3D / Çizim / Kurulum tek satır. Ürün görseli (izle) bu kurallardan etkilenmez. */
@media (max-width: 820px) {
  html:not(:has(body.izle)), body:not(.izle) { overflow-x: hidden; overscroll-behavior: none; }
  body:not(.izle) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  body:not(.izle) select, body:not(.izle) textarea { font-size: 16px !important; }
  html body:not(.izle) #ctxText, html body:not(.izle) #textInput, html body:not(.izle) #fontSelect { font-size: 16px !important; }
  body:not(.izle) .header { position: sticky; top: 0; z-index: 60; height: 56px !important; padding: 0 12px !important; gap: 12px; }
  body:not(.izle) .layout { height: calc(100vh - 56px) !important; }
  @supports (height: 100dvh) { body:not(.izle) .layout { height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)) !important; } }
}
@media (max-width: 820px) {
  /* Çift dokunma / iki parmakla sayfa yakınlaşmasın (3D'nin kendi yakınlaştırma düğmeleri var) */
  html:not(:has(body.izle)), body:not(.izle) { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* Gülbin, 18 Ekim: "parmağımla sağa sola çekebiliyorum hala". Sayfa telefonda uygulama gibi sabit: belge hiçbir
     yöne kaymaz (iPhone, body'deki overflow-x:hidden'ı dokunmada yok sayabiliyor); yalnız panel kendi içinde
     yukarı aşağı kayar. */
  html:not(:has(body.izle)) { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body:not(.izle) { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  body:not(.izle) .sidebar { overflow-x: hidden !important; overscroll-behavior: contain; touch-action: pan-y; }
  /* 3D / Çizim / Kurulum çubuğu ortada */
  body:not(.izle) .view-buttons { justify-content: center !important; left: 0 !important; right: 0 !important; width: auto !important; }
  /* Gülbin, 18 Ekim: "mobilde bar olsa, mobil bar gibi". Stand / Tasarım / Yazı / Öğeler / Katman telefonda gerçek
     bir alt menü: ekranın altına tam genişlik sabit, beş eşit sekme, üstte simge altta yazı, iPhone'un alt
     çizgisine pay. Yazı yalnız lacivert ya da beyaz: seçili sekme lacivert zemin, beyaz simge ve yazı. */
  body:not(.izle) .sidebar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Gülbin, 18 Ekim: "bar kaydırınca yukarıya çıkıyor". Paneldeki cam bulanıklığı (backdrop-filter), içindeki sabit
     alt menüyü ekrana değil panele bağlıyordu; menü panelle birlikte kayıyordu. Telefonda panel düz renk (aynı ton). */
  html body:not(.izle) .sidebar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f6f7f8 !important; }
  body:not(.izle) .sidebar > .rail {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; height: auto !important; margin: 0 !important; z-index: 40 !important;
    display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important;
    background: #fff !important; border: 0 !important; box-shadow: none !important; }
  body:not(.izle) .sidebar > .rail .rail-btn {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 5px !important; min-height: 64px !important; width: auto !important; margin: 0 !important; padding: 8px 0 !important;
    font-size: 11px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
    color: #021f36 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
  body:not(.izle) .sidebar > .rail .rail-btn svg { display: block !important; width: 22px !important; height: 22px !important; margin: 0 !important; }
  body:not(.izle) .sidebar > .rail .rail-btn span { display: block !important; }
  body:not(.izle) .sidebar > .rail .rail-btn.active { background: #021f36 !important; color: #fff !important; }
  /* Gülbin, 18 Ekim: "alt bar seçimi tam alan olsun, etrafında çerçeve olmasın": boşluk, kenar çizgisi ve dokununca çıkan odak çerçevesi yok */
  html body:not(.izle) .sidebar > .rail .rail-btn, html body:not(.izle) .sidebar > .rail .rail-btn:focus, html body:not(.izle) .sidebar > .rail .rail-btn:focus-visible { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
  body:not(.izle) .sidebar > .rail .rail-btn::before, body:not(.izle) .sidebar > .rail .rail-btn::after { display: none !important; }
  body:not(.izle) .header { padding-top: env(safe-area-inset-top, 0px) !important; height: calc(56px + env(safe-area-inset-top, 0px)) !important; }
}
@media (max-width: 560px) {
  /* Üst çubuk sade: logo + Onaya gönder; Çıkış küçük × */
  body:not(.izle) #btnExit { width: 40px; padding: 0 !important; font-size: 0 !important; position: relative; }
  body:not(.izle) #btnExit::before { content: "×"; font-size: 22px; line-height: 1; }
  body:not(.izle) .gecmis { display: none !important; }
  /* Gülbin, 18 Ekim: "koli lazım mobilde ortada olsun". Telefonun alışılmış düzeni: solda × (kapat), ortada logo,
     sağda Onaya gönder. Üç sütun (1fr auto 1fr): logo iki yandaki düğmelerin genişliğinden bağımsız tam ortada. */
  body:not(.izle) .header { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; }
  body:not(.izle) .header .stepper { display: none !important; }
  body:not(.izle) .header-actions { display: contents !important; }
  body:not(.izle) #btnExit { grid-column: 1; grid-row: 1; justify-self: start; }
  body:not(.izle) .header-logo { grid-column: 2; grid-row: 1; justify-self: center; margin: 0 !important; }
  body:not(.izle) #btnReview { grid-column: 3; grid-row: 1; justify-self: end; }
  /* Gülbin, 18 Ekim: "onaya gönder yerine tik koysak, x tuşu gibi, okey anlamında". Telefonda ✓ (× ile aynı boy);
     dolu lacivert, ana işlem belli olsun. Düğmenin adı ekran okuyucuda yine "Onaya Gönder". */
  html body:not(.izle) #btnReview { width: 40px !important; min-width: 0 !important; padding: 0 !important; font-size: 0 !important;
    display: grid !important; place-items: center !important; }
  html body:not(.izle) #btnReview::before { content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* Gizli yazı ikinci satır açıp simgeyi yukarı itiyordu; simge kutunun tam ortasına sabit. */
  html body:not(.izle) #btnExit, html body:not(.izle) #btnReview { position: relative !important; }
  html body:not(.izle) #btnExit::before, html body:not(.izle) #btnReview::before { position: absolute; inset: 0; margin: auto; }
  html body:not(.izle) #btnExit::before { width: 20px; height: 20px; content: ""; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
  body:not(.izle) #btnHizmet, body:not(.izle) #btnHelp { display: none !important; }
  body:not(.izle) .header-logo-mark svg { height: 28px; width: auto; }
  body:not(.izle) .header-actions { gap: 8px !important; flex: 0 0 auto; margin-left: auto; }
  body:not(.izle) .header-actions .btn-exit, body:not(.izle) .header-actions .btn-save {
    height: 40px !important; padding: 0 14px !important; font-size: 12px !important; white-space: nowrap; }
  body:not(.izle) .mode-sw { display: flex !important; gap: 4px !important; flex-wrap: nowrap !important; }
  body:not(.izle) .mode-sw .view-btn { padding: 8px 12px !important; font-size: 11px !important; min-width: 0 !important; }
}
/* Gülbin, 18 Ekim: "İçerik" başlığı kalktı, alanlar Otomatik tasarla'nın devamı; renk kartlarıyla arası açık kalsın. */
.s-section[data-tab="yukle"] .tpl-grid:not([hidden]) + .icerik { margin-top: 24px; }
/* Gülbin, 19 Ekim: özel kesim başlık, sektör kütüphanesi. Kartlar raf kartlarının dili (köşede kare);
   sektör düğmeleri çerçeveli, seçili dolu lacivert. */
#bkKok .bk-tur { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
#bkKok .bk-tur .raf-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px !important; }
#bkKok .bk-not { font-size: 13px; line-height: 1.5; color: var(--lac); margin: 0 0 14px; }
#bkKok .bk-sektor { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#bkKok .bk-cip { height: 34px; padding: 0 12px; border: 1px solid var(--lac); background: transparent; color: var(--lac); font: inherit; font-size: 13px; font-weight: 300; cursor: pointer; border-radius: 0; transition: background-color .16s ease, color .16s ease, transform .16s cubic-bezier(.23,1,.32,1); }
#bkKok .bk-cip.active { background: var(--lac); color: #fff; font-weight: 500; }
#bkKok .bk-cip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { #bkKok .bk-cip:not(.active):hover { background: var(--lac); color: #fff; } }
#bkKok .bk-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
#bkKok .bk-kart { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 6px 10px !important; }
#bkKok .bk-kart svg { width: 100%; height: 64px; }
#bkKok .bk-kart svg path { fill: rgba(2,31,54,.1); stroke: var(--lac); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#bkKok .bk-kart.active svg path { fill: rgba(2,31,54,.22); }
#bkKok .bk-kart .opt-t { font-size: 12px; text-align: center; }
/* Gülbin, 18 Ekim: "mobilde onaya gönder popupta kayık karışık". Görsel kutusu 220 px'e
   sınırlıydı ama resim kendi boyunda (408 px) kalıp başlığın ve yazının arkasına taşıyordu;
   düğmeler de sağa yığılıyordu. Telefonda: görsel kutuda kalır, pencere ekrana sığar ve
   kendi içinde kayar, iki düğme eşit ve tam genişlik. */
@media (max-width: 640px) {
  .rv-back .rv:not(.hz) { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .rv:not(.hz) .rv-shot { height: 240px; min-height: 0 !important; max-height: none !important; overflow: hidden; }
  .rv:not(.hz) .rv-shot img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
  .rv:not(.hz) .rv-body { padding: 24px 20px 20px !important; }
  .rv:not(.hz) .rv-body h3 { font-size: 18px !important; }
  .rv:not(.hz) .rv-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rv:not(.hz) .rv-actions button { width: 100%; padding: 0 8px !important; font-size: 12px !important; line-height: 1.2; }
  .rv:not(.hz) .rv-actions button:only-child { grid-column: 1 / -1; }
}