/* ==========================================================================
   PAWNEST — SAYFAYA ÖZEL DÜZENLER (hero, listing, profil, chat, oyun, panel)
   ========================================================================== */

/* ===== HERO ===== */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 96px); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(40% 50% at 85% 10%, rgba(20,184,160,.18), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(245,158,11,.14), transparent 70%); }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-12); align-items:center; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.hero .badge-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: var(--s-6); }
.hero-cta { display:flex; gap: var(--s-3); flex-wrap:wrap; margin-top: var(--s-8); }
.hero-trust { display:flex; gap: var(--s-6); margin-top: var(--s-8); flex-wrap:wrap; }
.hero-trust .stat b { font-family: var(--font-display); font-size: var(--text-2xl); display:block; color: var(--ink); }
.hero-trust .stat span { font-size: var(--text-sm); color: var(--ink-mute); }

/* Hero görsel kompozisyonu (SVG + yüzen kartlar) */
.hero-visual { position: relative; }
.hero-blob { width: 100%; height:auto; filter: drop-shadow(var(--shadow-lg)); }
.float-card { position:absolute; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 12px 14px; display:flex; align-items:center; gap:10px; font-size: var(--text-sm); font-weight:600; animation: floaty 5s var(--ease) infinite; }
.float-card .avatar { width:40px; height:40px; }
.fc-1 { top: 8%; left: -6%; }
.fc-2 { bottom: 12%; right: -4%; animation-delay: 1.2s; }
.fc-3 { bottom: -3%; left: 14%; animation-delay: 2.2s; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@media (max-width: 900px){ .hero-grid { grid-template-columns: 1fr; } .hero-visual { order:-1; max-width:460px; margin-inline:auto; } .fc-1{left:0} .fc-2{right:0} }

/* ===== ADIM (how it works) ===== */
.step-card { text-align:center; position: relative; }
.step-num { width:52px; height:52px; border-radius: var(--r-full); background: var(--brand-50); color: var(--brand-700); display:grid; place-items:center; font-family: var(--font-display); font-weight:800; font-size: var(--text-xl); margin:0 auto var(--s-4); border:2px solid var(--brand-200); }
[data-theme="dark"] .step-num { background: rgba(45,212,191,.1); }
.feature-icon { width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:30px; background: var(--brand-50); margin-bottom: var(--s-4); box-shadow: var(--shadow-md); }
[data-theme="dark"] .feature-icon { background: rgba(45,212,191,.1); }

/* Yenilenmiş özellik kartları */
.feature-card { position:relative; padding: clamp(24px,3vw,32px); overflow:hidden; }
.feature-card .feature-accent { position:absolute; top:0; left:0; right:0; height:5px; }
.feature-card h3 { margin-top:2px; }
.feature-link { display:inline-flex; align-items:center; gap:4px; margin-top:var(--s-5); font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--brand-700); transition:gap var(--t-fast); }
.feature-card:hover .feature-link { gap:9px; }

/* ===== CTA bandı ===== */
.cta-band { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); color:#fff; border-radius: var(--r-2xl); padding: clamp(32px, 6vw, 64px); text-align:center; position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; }
.cta-band::after { content:"🐾"; position:absolute; font-size: 220px; right:-30px; bottom:-60px; opacity:.08; }

/* ===== LISTING (bakıcı bul) ===== */
.listing-layout { display:grid; grid-template-columns: 280px 1fr; gap: var(--s-8); align-items:start; }
.listing-layout > * { min-width: 0; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); }
.filter-group { border-bottom:1px solid var(--border); padding-block: var(--s-4); }
.filter-group:last-child { border-bottom:none; }
.filter-group h4 { font-size: var(--text-base); margin-bottom: var(--s-3); }
.check { display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size: var(--text-sm); color: var(--ink-soft); }
.check input { width:18px; height:18px; accent-color: var(--brand-500); }
.range { width:100%; accent-color: var(--brand-500); }
@media (max-width: 880px){ .listing-layout { grid-template-columns: 1fr; } .filters { position: static; } }

/* ===== PROFİL ===== */
.profile-cover { height: 220px; border-radius: var(--r-2xl); background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); position:relative; }
/* Başlık: SADECE avatar kapağa taşar; isim/rozet kapağın altında kalır (kapak position:relative olduğundan üstüne boyuyordu) */
.profile-head { display:flex; gap: var(--s-6); align-items:flex-start; margin-top:14px; padding-inline: var(--s-6); position:relative; z-index:1; }
.profile-head .avatar { width:128px; height:128px; font-size: 2.4rem; border:5px solid var(--surface); margin-top:-78px; flex-shrink:0; }
.profile-layout { display:grid; grid-template-columns: 1fr 340px; gap: var(--s-8); align-items:start; margin-top: var(--s-8); }
/* Grid çocukları min-content'e (nowrap sekmeler) şişip taşmasın — kolonlar küçülebilsin */
.profile-layout > * { min-width: 0; }
.booking-box { position: sticky; top: calc(var(--header-h) + 16px); }
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom: var(--s-6); overflow-x:auto; }
.tab { padding:12px 18px; font-weight:700; color: var(--ink-mute); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; font-family: var(--font-display); }
.tab.active { color: var(--brand-700); border-color: var(--brand-500); }
@media (max-width: 880px){ .profile-layout { grid-template-columns: 1fr; } .booking-box { position: static; } }
/* Mobil: profil başlığı sıkışmasın — avatar + ad + butonlar alt alta */
@media (max-width: 600px){
  .profile-head { flex-direction: column; gap: var(--s-3); margin-top: 12px; }
  .profile-head .avatar { width: 92px; height: 92px; font-size: 1.8rem; border-width: 4px; margin-top: -64px; }
  /* İstatistik kartları taşmasın: 2'li ızgara */
  #topStats { display: grid; grid-template-columns: 1fr 1fr; }
  #topStats > .card { min-width: 0 !important; }
}

/* ===== CHAT ===== */
.chat-layout { display:grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--header-h)); border-top:1px solid var(--border); }
.chat-list { border-right:1px solid var(--border); overflow-y:auto; }
.chat-item { display:flex; gap:12px; padding: var(--s-4); cursor:pointer; border-bottom:1px solid var(--border); transition: background var(--t-fast); }
.chat-item:hover, .chat-item.active { background: var(--surface-2); }
.chat-item .avatar { width:50px; height:50px; position:relative; }
.online-dot { position:absolute; bottom:0; right:0; width:13px; height:13px; border-radius:50%; background: var(--success); border:2.5px solid var(--surface); }
.chat-main { display:flex; flex-direction:column; background: var(--bg); }
.chat-header { padding: var(--s-4) var(--s-6); border-bottom:1px solid var(--border); background: var(--surface); display:flex; align-items:center; gap:12px; }
.chat-body { flex:1; overflow-y:auto; padding: var(--s-6); display:flex; flex-direction:column; gap:10px; }
.bubble { max-width: 70%; padding: 11px 16px; border-radius: 18px; font-size: var(--text-sm); line-height:1.5; box-shadow: var(--shadow-sm); }
.bubble.them { background: var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:6px; }
.bubble.me { background: var(--brand-500); color:#fff; align-self:flex-end; border-bottom-right-radius:6px; }
.bubble .t { display:block; font-size:10px; opacity:.7; margin-top:4px; text-align:right; }
.chat-input { padding: var(--s-4); border-top:1px solid var(--border); background: var(--surface); display:flex; gap:10px; align-items:center; }
.unread-badge { background: var(--coral-500); color:#fff; font-size:11px; font-weight:800; min-width:20px; height:20px; padding:0 6px; border-radius: var(--r-full); display:grid; place-items:center; }
@media (max-width: 760px){ .chat-layout { grid-template-columns: 1fr; } .chat-list.mobile-hide { display:none; } }

/* ===== OYUN ===== */
.game-stage { max-width: 480px; margin:0 auto; }
.game-canvas-wrap { position: relative; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid var(--border); background: linear-gradient(180deg,#bff0e6,#e9fbf5); }
[data-theme="dark"] .game-canvas-wrap { background: linear-gradient(180deg,#0e2a3a,#0b1a26); }
#gameCanvas { display:block; width:100%; touch-action:none; }
.game-hud { display:flex; justify-content:space-between; padding: var(--s-4); font-family: var(--font-display); font-weight:800; }
.game-overlay { position:absolute; inset:0; background: rgba(10,20,18,.55); backdrop-filter: blur(4px); display:grid; place-items:center; text-align:center; color:#fff; padding: var(--s-6); }
.game-overlay h2 { color:#fff; }
.leaderboard li { display:flex; justify-content:space-between; padding:12px var(--s-4); border-bottom:1px solid var(--border); }
.leaderboard li .rank { font-family: var(--font-display); font-weight:800; width:28px; }

/* ===== DASHBOARD ===== */
.dash-layout { display:grid; grid-template-columns: 240px 1fr; gap: var(--s-8); align-items:start; }
.dash-layout > * { min-width: 0; }
.dash-nav a { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius: var(--r-md); color: var(--ink-soft); font-weight:600; font-size: var(--text-sm); }
.dash-nav a:hover, .dash-nav a.active { background: var(--surface-2); color: var(--ink); }
.stat-card { padding: var(--s-5); }
.stat-card .big { font-family: var(--font-display); font-size: var(--text-3xl); font-weight:800; line-height:1; }
.progress { height:10px; background: var(--surface-2); border-radius: var(--r-full); overflow:hidden; }
.progress > i { display:block; height:100%; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); border-radius: var(--r-full); }
@media (max-width: 880px){ .dash-layout { grid-template-columns: 1fr; } }

/* Auth ekranları */
.auth-wrap { min-height: calc(100vh - var(--header-h)); display:grid; place-items:center; padding: var(--s-8) var(--s-4); }
.auth-card { width:100%; max-width: 460px; }
.divider { display:flex; align-items:center; gap:12px; color: var(--ink-mute); font-size: var(--text-sm); margin: var(--s-5) 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background: var(--border); }