/* CreaLabs Public Mobile Experience v1.8.0 */
:root {
  --crealabs-mobile-nav-h: 74px;
  --crealabs-mobile-accent: #20d9d2;
  --crealabs-mobile-surface: rgba(7, 11, 22, .88);
  --crealabs-mobile-text: #fff;
  --crealabs-mobile-muted: #a9b7ca;
  --crealabs-mobile-active-from: #20d9d2;
  --crealabs-mobile-active-to: #16b8d9;
  --crealabs-mobile-active-text: #031c28;
}

.crealabs-public-mobile-nav,
.crealabs-pwa-install,
.crealabs-pwa-update,
.crealabs-pwa-sheet { display: none; }

@media (max-width: 900px) {
  html { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { max-width: 100%; overflow-x: clip; }

  .cl-db-hero,
  .cl-db-container,
  .cl-db-hero-grid,
  .cl-db-hero-content { width: 100%; max-width: 100%; min-width: 0; }

  .cl-db-title,
  .cl-db-title__main,
  .cl-db-title__highlight,
  .cl-db-title__suffix {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .cl-db-title {
    font-size: clamp(2.65rem, 12vw, 4.8rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .cl-db-actions { width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr) !important; }
  .cl-db-actions > * { width: 100%; max-width: 100%; }

  body.crealabs-mobile-nav-active {
    padding-bottom: calc(var(--crealabs-mobile-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  body.crealabs-mobile-touch input,
  body.crealabs-mobile-touch select,
  body.crealabs-mobile-touch textarea { font-size: 16px !important; }

  body.crealabs-mobile-touch button,
  body.crealabs-mobile-touch [role="button"],
  body.crealabs-mobile-touch a[role="button"] { min-height: 44px; }

  body.crealabs-mobile-touch img,
  body.crealabs-mobile-touch video,
  body.crealabs-mobile-touch iframe { max-width: 100%; }

  .crealabs-public-mobile-nav {
    position: fixed;
    z-index: 99980;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    min-height: 64px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(7, 13, 28, .97), rgba(3, 8, 20, .95));
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
    color: var(--crealabs-mobile-muted);
  }

  html[data-theme="light"] .crealabs-public-mobile-nav,
  html[data-crealabs-color-scheme="light"] .crealabs-public-mobile-nav {
    --crealabs-mobile-surface: rgba(255, 255, 255, .91);
    --crealabs-mobile-text: #12213a;
    --crealabs-mobile-muted: #53647b;
    --crealabs-mobile-active-from: #0dbfbd;
    --crealabs-mobile-active-to: #078fb9;
    --crealabs-mobile-active-text: #fff;
    color: var(--crealabs-mobile-muted);
    background: rgba(255, 255, 255, .96);
    border-color: rgba(44, 116, 142, .22);
    box-shadow: 0 18px 48px rgba(15, 46, 67, .16);
  }

  .crealabs-public-mobile-nav a,
  .crealabs-public-mobile-nav button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 50px;
    padding: 5px 3px;
    border-radius: 15px;
    font: 700 10px/1.15 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, background-color .16s ease, color .16s ease;
  }

  .crealabs-public-mobile-nav a:active,
  .crealabs-public-mobile-nav button:active { transform: scale(.95); }

  .crealabs-public-mobile-nav a[aria-current="page"] {
    color: var(--crealabs-mobile-active-text);
    background: linear-gradient(135deg, var(--crealabs-mobile-active-from), var(--crealabs-mobile-active-to));
    box-shadow: 0 9px 24px rgba(20, 205, 207, .28), inset 0 1px 0 rgba(255,255,255,.34);
    transform: translateY(-2px);
  }

  .crealabs-public-mobile-nav a[aria-current="page"] svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)); }
  .crealabs-public-mobile-nav svg { width: 21px; height: 21px; display: block; flex: 0 0 auto; }
  .crealabs-public-mobile-nav span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .crealabs-public-mobile-nav a:focus-visible,
  .crealabs-public-mobile-nav button:focus-visible {
    outline: 3px solid rgba(32, 217, 210, .48);
    outline-offset: 1px;
  }

  .crealabs-public-mobile-nav button:last-child {
    color: var(--crealabs-mobile-text);
    border-left: 1px solid rgba(148, 163, 184, .14);
    border-radius: 0 15px 15px 0;
  }

  html[data-theme="light"] .crealabs-public-mobile-nav button:last-child,
  html[data-crealabs-color-scheme="light"] .crealabs-public-mobile-nav button:last-child { color: #12213a; }

  [data-privacy-reopen],
  .cl-privacy-reopen,
  .cl-privacy__reopen {
    left: 12px !important;
    bottom: calc(var(--crealabs-mobile-nav-h) + max(16px, env(safe-area-inset-bottom, 0px))) !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 1px solid rgba(32, 217, 210, .34) !important;
    background: rgba(5, 15, 31, .94) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255,255,255,.025) inset !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  [data-privacy-reopen]::before,
  .cl-privacy-reopen::before,
  .cl-privacy__reopen::before {
    content: "⚙";
    display: block;
    color: #48e1dc;
    font: 700 22px/1 system-ui, sans-serif;
    text-indent: 0;
    filter: drop-shadow(0 0 8px rgba(32, 217, 210, .28));
  }

  html[data-theme="light"] [data-privacy-reopen],
  html[data-theme="light"] .cl-privacy-reopen,
  html[data-theme="light"] .cl-privacy__reopen,
  html[data-crealabs-color-scheme="light"] [data-privacy-reopen],
  html[data-crealabs-color-scheme="light"] .cl-privacy-reopen,
  html[data-crealabs-color-scheme="light"] .cl-privacy__reopen {
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(8, 159, 169, .32) !important;
    box-shadow: 0 10px 26px rgba(15, 65, 84, .18) !important;
  }

  /* CreaRobi composer ve gönder butonu mobil alt navigasyonun üstünde kalır. */
  .cr-public__panel:not([hidden]) {
    bottom: calc(var(--crealabs-mobile-nav-h) + max(10px, env(safe-area-inset-bottom, 0px))) !important;
    height: min(76dvh, calc(100dvh - var(--crealabs-mobile-nav-h) - max(18px, env(safe-area-inset-bottom, 0px)))) !important;
    max-height: calc(100dvh - var(--crealabs-mobile-nav-h) - max(18px, env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 22px 22px 18px 18px !important;
    border-bottom: 1px solid var(--cr-line, rgba(148,163,184,.20)) !important;
  }

  .cr-public__compose {
    position: relative;
    z-index: 4;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    background: #0b1524;
  }

  .cr-public__compose-actions { flex-wrap: wrap; }
  .cr-public__send { min-height: 42px; padding-inline: 15px; }

  /* Tercih kaydından sonra yüzen düğme mobilde yer kaplamaz.
     Gizlilik merkezi hamburger menüsünün altından açılır. */
  [data-privacy-reopen],
  .cl-privacy-reopen,
  .cl-privacy__reopen { display: none !important; }

  .crealabs-mobile-privacy-link {
    width: 100%;
    min-height: 52px;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 13px !important;
    border: 1px solid rgba(32, 217, 210, .24) !important;
    border-radius: 14px;
    background: rgba(32, 217, 210, .065) !important;
    color: #dffefd !important;
    text-align: left;
    cursor: pointer;
  }

  .crealabs-mobile-privacy-link span:first-child {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(32, 217, 210, .14);
    color: #48e1dc;
    font-size: 17px;
  }

  .crealabs-mobile-privacy-link b { font-size: 13px; font-weight: 800; }
  .crealabs-mobile-privacy-link span:last-child { color: #48e1dc; font-size: 22px; text-align: right; }

  html[data-theme="light"] .crealabs-mobile-privacy-link,
  html[data-crealabs-color-scheme="light"] .crealabs-mobile-privacy-link {
    border-color: rgba(8, 159, 169, .22) !important;
    background: rgba(8, 159, 169, .07) !important;
    color: #153044 !important;
  }

  .crealabs-pwa-install,
  .crealabs-pwa-update {
    position: fixed;
    z-index: 99970;
    right: 14px;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 999px;
    padding: 11px 15px;
    background: rgba(7, 11, 22, .94);
    color: #fff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .25);
    font: 800 12px/1 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  body.crealabs-mobile-nav-active .crealabs-pwa-install,
  body.crealabs-mobile-nav-active .crealabs-pwa-update {
    bottom: calc(var(--crealabs-mobile-nav-h) + max(18px, env(safe-area-inset-bottom, 0px)));
  }

  .crealabs-pwa-install[data-visible="1"],
  .crealabs-pwa-update[data-visible="1"] { display: flex; }

  .crealabs-pwa-update {
    left: 14px;
    right: 14px;
    border-radius: 18px;
    justify-content: space-between;
    padding: 13px 14px 13px 16px;
  }

  .crealabs-pwa-update-copy { min-width: 0; }
  .crealabs-pwa-update-copy strong { display: block; font-size: 13px; line-height: 1.25; }
  .crealabs-pwa-update-copy span { display: block; margin-top: 4px; color: #cbd5e1; font-size: 11px; line-height: 1.35; }
  .crealabs-pwa-update-action { flex: 0 0 auto; min-height: 38px !important; border: 0; border-radius: 11px; padding: 0 12px; background: var(--crealabs-mobile-accent); color: #06202b; font-weight: 900; }

  .crealabs-pwa-sheet {
    position: fixed;
    z-index: 99999;
    inset: 0;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 12px max(16px, env(safe-area-inset-bottom, 0px));
    background: rgba(2, 6, 23, .58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .crealabs-pwa-sheet[data-visible="1"] { display: flex; }
  .crealabs-pwa-sheet-card { width: min(100%, 520px); padding: 20px; border: 1px solid rgba(148,163,184,.20); border-radius: 24px; background: #0f172a; color: #f8fafc; box-shadow: 0 30px 80px rgba(0,0,0,.40); }
  .crealabs-pwa-sheet-card h3 { margin: 0; font: 850 18px/1.25 Inter, ui-sans-serif, system-ui, sans-serif; }
  .crealabs-pwa-sheet-card p { margin: 10px 0 0; color: #cbd5e1; font: 500 13px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; }
  .crealabs-pwa-sheet-steps { margin: 16px 0 0; padding-left: 22px; color: #e2e8f0; font: 650 13px/1.65 Inter, ui-sans-serif, system-ui, sans-serif; }
  .crealabs-pwa-sheet-close { width: 100%; margin-top: 18px; min-height: 46px; border: 0; border-radius: 14px; background: var(--crealabs-mobile-accent); color: #06202b; font-weight: 900; }
}

@supports (padding: max(0px)) {
  body.crealabs-mobile-safe-area { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

@media (prefers-reduced-motion: reduce) {
  .crealabs-public-mobile-nav a,
  .crealabs-public-mobile-nav button { transition: none; }
}