/* dertliyiz.com — Özel stiller */

/* ════════════════════════════════════════════
   MOBİL TEMELİ — Global düzeltmeler
   ════════════════════════════════════════════ */

/* Yatay taşmayı önle */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ── iOS input zoom önleme ──────────────────
   Font-size < 16px olan inputlar iOS Safari'de
   odaklanınca sayfayı zoom'lar. Tüm form
   elemanlarını 16px'e sabitliyoruz.           */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select {
  font-size: 16px !important;
}

/* ── Özel select ok ─────────────────────────
   iOS native override'ı kaldırıp kendi okunu
   ekliyoruz, tutarlı görünüm için.            */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px !important;
  cursor: pointer;
}

/* ── Safe area — alt çubuk ──────────────────
   iPhone notch / Home Indicator için          */
.safe-area-pb {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
}

/* Ana içerik: alt navın arkasında kalmasın   */
.pb-safe-nav {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ── Dokunma vurgusu kaldır ── */
button, a { -webkit-tap-highlight-color: transparent; }

/* ── iOS momentum scroll ── */
.overflow-y-auto,
.overflow-y-scroll,
#messages { -webkit-overflow-scrolling: touch; }

/* ── Overscroll davranışı ── */
#messages { overscroll-behavior: contain; }

/* ════════════════════════════════════════════
   BILEŞENLER
   ════════════════════════════════════════════ */

/* ── Swipe kartı ── */
.swipe-card {
  will-change: transform;
  transform-origin: center bottom;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Mesaj kutusu scrollbar ── */
#messages::-webkit-scrollbar { width: 4px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ── Scrollbar gizle ── */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ── Satır kırpma ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Büyük dokunma alanı ── */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* ── Blob animasyonu ── */
@keyframes blob {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(20px,-20px) scale(1.05); }
  66% { transform: translate(-10px,10px) scale(0.95); }
}
.animate-blob { animation: blob 8s ease-in-out infinite; }

/* ── Modal fade-in ── */
#match-modal { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity:0; transform: scale(0.95) } to { opacity:1; transform: scale(1) } }

/* ── Sayfa geçiş efekti ── */
.page-enter {
  animation: slideUp 0.25s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes slideUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Glassmorphism kart ── */
.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-heavy {
  background: rgba(15,15,15,0.75);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,0.07);
}

/* ── Glow efektleri ── */
.glow-brand { box-shadow: 0 0 28px rgba(239,68,68,0.35), 0 0 60px rgba(239,68,68,0.12); }
.glow-blue  { box-shadow: 0 0 28px rgba(99,102,241,0.35), 0 0 60px rgba(99,102,241,0.12); }
.glow-green { box-shadow: 0 0 28px rgba(34,197,94,0.35),  0 0 60px rgba(34,197,94,0.12); }

/* ── Mod seçim kartları (sohbet) ── */
.mode-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.2s,
              box-shadow 0.2s;
}
.mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.mode-card:hover, .mode-card:active, .mode-card.selected {
  transform: translateY(-4px) scale(1.02);
}
.mode-card.selected {
  border-color: rgb(239,68,68) !important;
  box-shadow: 0 0 0 1px rgb(239,68,68), 0 0 32px rgba(239,68,68,0.3);
}

/* ── İkon animasyonu ── */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.mode-card.selected .mode-icon { animation: iconPulse 1.5s ease-in-out infinite; }

/* ── Blur background (Spotify albüm) ── */
.spotify-bg-blur {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.25) saturate(1.8);
  transform: scale(1.15);
  z-index: 0;
  transition: background-image 1s ease;
}

/* ── Pulse ring (bekleme animasyonu) ── */
@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 1; }
  80%, 100% { transform: scale(2); opacity: 0; }
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: pulseRing 1.6s ease-out infinite;
  opacity: 0;
}

/* ── Chat mesaj baloncukları ── */
.msg-out {
  align-self: flex-end;
  background: rgb(239,68,68);
  color: white;
  border-radius: 20px 20px 4px 20px;
  max-width: 78%;
  word-break: break-word;
}
.msg-in {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  border-radius: 20px 20px 20px 4px;
  max-width: 78%;
  word-break: break-word;
}
.msg-system {
  align-self: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: transparent;
}

/* ── Anonim sohbet — chat ekranı yüksekliği ──
   100dvh = klavye açılınca küçülen viewport,
   iOS 15.4+ ve Android Chrome destekler.
   56px = top nav, 80px = bottom nav (login).  */
#chat-screen {
  height: calc(100dvh - 56px - 80px);
}
@media (min-width: 768px) {
  #chat-screen { height: calc(100dvh - 56px - 40px); }
}

/* ── Admin: expandable rows ── */
.admin-expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.admin-expand-content.open {
  max-height: 500px;
}

/* ── Skeleton loading ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-circle { border-radius: 50% !important; }
.skeleton-text   { height: 13px; margin-bottom: 8px; }
.skeleton-title  { height: 20px; margin-bottom: 10px; }

/* ── Bottom-sheet modal ── */
.sheet-enter { animation: sheetUp 0.3s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Vibe pill ── */
.vibe-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}