/* ==== Mylasa Responsive Guard v7 (GLOBAL, LOSSLESS) =================== */
/* Hedef: Tüm sayfalarda taşmayı tamamen bitir; HİÇBİR içerik kesilmesin. */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

/* Gerçek viewport + güvenlik; taşma güvenlik ağı */
html, body, #root {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  margin: 0;
  background: var(--bg, #fff);
  overflow-x: hidden;
}
@supports (max-width: 100svw) { html, body, #root { max-width: 100svw; } }

/* ======= Sığdırma: min-width:auto kaynaklı taşmaları sonlandır ======= */
:where(*) { min-width: 0; min-height: 0; }            /* flex/grid çocukları */
:where([class*="grid"], [role="grid"]) { grid-auto-columns: minmax(0, 1fr); }
:where([style*="display:flex"], .flex, [class*="flex"]) > * { min-width: 0; }

/* Medyalar kesmeden sığsın */
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* Uzun metinler layout’u taşırmasın */
h1, h2, h3, .username, .bio, [class*="title"], [class*="name"], [class*="caption"] {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}

/* ======= Kenar boşluğu EKLE-ME (öncekinden farkı: global padding YOK) */
/* Kenar güvenliği isteyen wrap’lara .safe-x ekleyebilirsin ama gerekmez. */
.safe-x {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* ======= Profil istatistikleri — IG’ye yakın sıkı aralık ============== */
:where(.profile-mobile, .profile-header) :where(.phm-stats, .stats-row, .profile-stats, [class*="stats"]){
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(6px, 2vw, 14px) !important;
  align-items: center;
  min-width: 0;
}
:where(.profile-mobile, .profile-header) :where(.phm-stats, .stats-row, .profile-stats, [class*="stats"]) > *{
  min-width: 0;
}
:where(.profile-mobile, .profile-header) :where(.phm-stats, .stats-row, .profile-stats, [class*="stats"]) :where(b, .value){
  font-weight: 700;
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.1;
}
:where(.profile-mobile, .profile-header) :where(.phm-stats, .stats-row, .profile-stats, [class*="stats"]) :where(span, .label){
  color: #8e8e8e;
  font-size: clamp(11px, 3vw, 13px);
}

/* ======= Menü/Sheet/Toast z-index (mevcudu koru) ====================== */
.clip-cmMenu, .comment-menu, .cm-menu, .menu-popup, .popover-menu, [role="menu"] { z-index: 2605 !important; }
.sr2-panel, .star-popover, .rating-panel, .stars-panel                      { z-index: 2700 !important; }
.sheet-mask { z-index: 2600 !important; }
.sheet      { z-index: 2610 !important; }
.toast-layer{ z-index: 2800 !important; }
.clip-cmMenu, .comment-menu, .cm-menu, .menu-popup, .popover-menu,
.dropdown-menu, .dropdown.show, .dropdown-menu.show,
.ant-dropdown, .ant-popover, .MuiPopover-root, [role="menu"] { display: block; }

/* ======= Son çare: içte 1-2px taşmalar görünmesin ===================== */
html, body { overflow-x: hidden; }

/* FitWatch işaretlediğinde (100vw vb. yakalanırsa) */
[data-vw-fix="1"] { width: 100% !important; max-width: 100% !important; }

/* ===================================================================== */
/* ============ Labubu "MY BOX" Fallback v2 (GLOBAL, LOSSLESS) ========= */
/* Amaç: BoxTile görseli (mystic-box.png) hiç yüklenemese bile kutu
   her zaman görünsün. Gerçek img varsa ÜSTTE kalır, fallback altta.   */
/* ===================================================================== */

/* 1) Bazı temalarda title içeriğini overlay eden kuralları KAPAT */
.labubu-cell.labubu-box[title]::before,
.labubu-cell--box[title]::before,
.labubu-box[title]::before {
  content: none !important;
}

/* 2) Hücreyi konumlandır (zaten öyledir ama garanti) */
.labubu-cell.labubu-box,
.labubu-cell--box,
.labubu-box {
  position: relative;
}

/* 3) Inline SVG fallback — ::after ile çizilir */
.labubu-cell.labubu-box::after,
.labubu-cell--box::after,
.labubu-box::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 1;                 /* img (z:2) üstte kalsın */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* gri-sarı kutu illüstrasyonu */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='300' viewBox='0 0 220 300' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f3f4f6'/%3E%3Cstop offset='100%25' stop-color='%23e5e7eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='10' width='200' height='280' rx='18' fill='url(%23g)' stroke='%23d1d5db' stroke-width='2'/%3E%3Cg opacity='0.9' transform='translate(110 150)'%3E%3Cpath d='M0-70 l60 35 v70 l-60 35 l-60-35 v-70 z' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='4'/%3E%3Crect x='-46' y='-15' width='92' height='30' rx='6' fill='%23ffffff' stroke='%23e5e7eb' stroke-width='3'/%3E%3Ctext x='0' y='7' font-size='16' font-family='Inter, Arial' text-anchor='middle' fill='%23111827'%3EMY BOX%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* 4) Gerçek <img> varsa ÜSTE al (fallback altta kalsın) */
.labubu-box-wrap img,
.labubu-cell .labubu-box-img,
.labubu-box img,
.labubu-cell img.box-img {
  position: relative !important;
  z-index: 2 !important;
  display: block;
  max-width: 100%;
  height: auto;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 5) Nefes animasyonu sınıfları ile uyumlu (mevcudu bozmadan) */
.breathing .labubu-box-img,
.breathing .box-img {
  transform-origin: 50% 60%;
  animation: lb-breath 2.4s ease-in-out infinite;
}
@keyframes lb-breath {
  0%   { transform: scale(0.985); filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
  50%  { transform: scale(1.015); filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
  100% { transform: scale(0.985); filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
}

/* 6) (Opsiyonel) Debug — fallback aktifken küçük uyarı göstermek istersen,
   komponent köküne .lbbox-fallback sınıfı eklersen bu rozet çıkar. */
.lbbox-fallback::before {
  content: "⚠︎";
  position: absolute;
  top: 6px; left: 6px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: #111827; color: #fff; border-radius: 999px;
  font-weight: 800; font-size: 12px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 3;
}