/* ============================================
   ShiftCV — APP-NATIVE düzen
   YALNIZCA Capacitor app'te etkin (body.is-native).
   Web sitesi HİÇ etkilenmez.
   ============================================ */

/* Web'de app-özel öğeler tamamen gizli */
.app-tabbar,
.app-sheet,
.app-sheet-backdrop { display: none; }

/* ════════ NATIVE APP ════════ */
body.is-native {
  /* alt tab bar için içerik boşluğu + güvenli alan (gesture bar) */
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

/* — Web pazarlama/gereksiz bölümleri app'te gizle — */
body.is-native #landing-sections,
body.is-native .footer,
body.is-native .tab-nav,                 /* üst sekme şeridi → yerine alt bar */
body.is-native .hero-marketing,          /* hero sol sütun (başlık/slogan/CTA/istatistik) */
body.is-native .pwa-install-wrap,
body.is-native .navbar-nav,              /* üst menü linkleri (Tools/Preise vb.) → alt bar */
body.is-native .hero::before { display: none !important; }

/* — Hero: app'te yalnızca AI hızlı-CV kartı, sade arka plan — */
body.is-native .hero {
  background: none;
  padding: .35rem 0 0;
}
body.is-native .hero .row { row-gap: 0 !important; }
body.is-native .ai-quick-card {
  background: var(--card);
  border: 1px solid var(--border);
}
/* Hero (AI hızlı-CV) yalnızca CV sekmesinde; araç/diğer sekmelerde gizli
   → kullanıcı bir araç seçince doğrudan o araç öne gelir */
body.is-native:not([data-app-tab="cv"]) .hero { display: none !important; }

/* — Navbar → kompakt app başlığı (durum çubuğu güvenli alanı) — */
body.is-native .navbar {
  position: sticky; top: 0;
  padding-top: calc(.4rem + env(safe-area-inset-top));
  padding-bottom: .4rem;
}

/* — Ana uygulama üst boşluğu — */
body.is-native .main-app { padding-top: .35rem; }

/* ════════ ALT TAB BAR ════════ */
body.is-native .app-tabbar {
  display: flex;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 18px rgba(0,0,0,.28);
}
.app-tabbar .app-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; cursor: pointer;
  padding: .5rem 0 .4rem;
  color: var(--muted); font-family: inherit; font-size: .64rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.app-tabbar .app-tab i { font-size: 1.2rem; line-height: 1; }
.app-tabbar .app-tab.active { color: var(--pr); }
.app-tabbar .app-tab.active i { transform: translateY(-1px); }
.app-tabbar .app-tab-pro { color: #f59e0b; }
.app-tabbar .app-tab-pro.active { color: #f59e0b; }

/* ════════ ARAÇLAR — ALT SAYFA (bottom sheet) ════════ */
body.is-native .app-sheet-backdrop {
  display: block;
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
body.is-native .app-sheet {
  display: block;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1051;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: .5rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,.45);
}
body.is-native.tools-open .app-sheet { transform: translateY(0); }
body.is-native.tools-open .app-sheet-backdrop { opacity: 1; pointer-events: auto; }

.app-sheet-grip {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border); margin: .35rem auto .7rem;
}
.app-sheet-title { font-size: 1.02rem; font-weight: 800; margin-bottom: .85rem; }
.app-tools-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
}
.app-tool {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: .85rem .25rem;
  color: var(--text); font-family: inherit; font-size: .64rem; font-weight: 600;
  cursor: pointer; text-align: center; line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .15s;
}
.app-tool:active { transform: scale(.95); }
.app-tool i { font-size: 1.35rem; color: var(--ti, var(--pr)); }

/* — Küçük ekran: 5'li tab yazıları taşmasın — */
@media (max-width: 360px) {
  .app-tabbar .app-tab { font-size: .58rem; }
  .app-tools-grid { grid-template-columns: repeat(3, 1fr); }
}