/* =====================================================================
   Private Hotel "Pixel Skyline" kimligi (ph-theme.css'in ustune biner).
   Geri almak: layouts/app.blade.php ve guest.blade.php icindeki ph-skyline.css satirini sil.
   ===================================================================== */
:root { --ph-glass: rgba(26,26,31,.80); --ph-glass-line: rgba(255,255,255,.08); }

/* --- Arka plan: gece sehri siluet --- */
main.site-bg, html.dark main { background: transparent !important; }
.ph-sky {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 500px at 12% -5%, rgba(255,196,0,.10), transparent 65%),
        radial-gradient(700px 420px at 100% 0%, rgba(255,196,0,.05), transparent 65%),
        url('/assets/images/ph-skyline.svg') center bottom / 100% auto no-repeat;
    opacity: .85;
}
#app, footer { position: relative; z-index: 1; }
main > div { position: relative; z-index: 1; padding-top: 36px; }

/* --- Yuzen cam cubuk --- */
.ph-bar { position: sticky; top: 0; z-index: 60; background: rgba(15,15,18,.72); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--ph-glass-line); }
.ph-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,196,0,.45) 50%, transparent); }
.ph-bar-inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; gap: 22px; }
.ph-bar-logo img { height: 34px; width: auto; image-rendering: pixelated; display: block; transition: transform .2s ease; }
.ph-bar-logo:hover img { transform: scale(1.04); }
.ph-bar-nav { flex: 1; min-width: 0; }
.ph-bar-nav #mobile-menu { width: auto !important; gap: 2px !important; padding: 0 !important; height: 64px; align-items: stretch; }
.ph-bar-nav .nav-item, .ph-bar-nav [class*="md:h-[60px]"] { height: 64px !important; }
.ph-bar-nav .nav-item, .ph-bar-nav button { padding: 0 12px; }
.ph-bar .navigation-icon { display: none !important; }
.ph-bar-nav .nav-item, .ph-bar-nav [class*="dark:text-gray-200"] { font-size: 12px !important; letter-spacing: .1em; }
.ph-bar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ph-btn-sm { padding: 8px 18px; font-size: 11.5px; }
.ph-userbar { display: flex; align-items: center; gap: 14px; }
.ph-chips { display: flex; gap: 8px; }
.ph-chips > div { display: flex !important; align-items: center; gap: 8px !important; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--ph-glass-line); }
.ph-chips > div > div:first-child { width: 22px !important; height: 22px !important; min-width: 22px; outline: none !important; background-size: contain; }
.ph-chips > div > div:last-child { font-size: 0 !important; line-height: 1; }
.ph-chips > div > div:last-child span { font-size: 13px; color: var(--ph-gold) !important; font-weight: 600; }
.ph-userbar [x-ref="panel"] { left: auto !important; right: 0; min-width: 170px; }
.ph-userbar > div:last-child { height: 64px; }
.ph-userbar [class*="md:h-[60px]"] { height: 64px !important; border: 0 !important; }
@media (max-width: 1100px) { .ph-chips { display: none; } }
@media (max-width: 767px) { .ph-bar-inner { flex-wrap: wrap; padding: 10px 16px; gap: 10px; } .ph-bar-nav { order: 3; flex: 1 0 100%; } .ph-bar-right { display: none; } }

/* --- Lobi --- */
.ph-lobby { position: relative; overflow: hidden; min-height: 640px; background: transparent; border-bottom: 0; }
.ph-lobby::after { display: none; }
.ph-lobby-sky { position: absolute; inset: 0; background: url('/assets/images/ph-skyline.svg') center bottom / cover no-repeat; opacity: .9; }
.ph-lobby-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,21,0) 55%, var(--ph-bg) 100%), linear-gradient(90deg, rgba(18,18,21,.55) 0%, transparent 60%); }
.ph-lobby-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: center; max-width: 80rem; min-height: 640px; margin: 0 auto; padding: 56px 24px 120px; }
.ph-lobby-text h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; font-weight: 700; letter-spacing: -.02em; color: var(--ph-text-strong); margin: 18px 0 18px; max-width: none; }
.ph-lobby-text h1 em { font-style: normal; background: linear-gradient(90deg, #ffc400, #ffe27a 60%, #ffc400); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-lobby-text > p { font-size: 16px; line-height: 1.65; color: var(--ph-text); max-width: 520px; margin: 0 0 26px; }
.ph-chip-live { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; background: rgba(255,255,255,.06); border: 1px solid var(--ph-glass-line); color: var(--ph-text); letter-spacing: .06em; }
.ph-chip-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: ph-pulse 2s infinite; }
@keyframes ph-pulse { 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.ph-stats > div { background: rgba(15,15,18,.55); backdrop-filter: blur(8px); border-color: var(--ph-glass-line); }
.ph-login { background: rgba(22,22,26,.78); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-color: rgba(255,255,255,.1); border-radius: 20px; padding: 30px 26px; }
.ph-login-title { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--ph-text-strong); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 1023px) { .ph-lobby-inner { grid-template-columns: 1fr; padding: 40px 16px 80px; } .ph-lobby { min-height: 0; } }

/* --- Sayfa basligi afisi --- */
.ph-banner { position: relative; padding: 64px 24px 44px; border-bottom: 1px solid var(--ph-glass-line); background: radial-gradient(700px 240px at 8% 100%, rgba(255,196,0,.10), transparent 70%); }
.ph-banner-inner { max-width: 80rem; margin: 0 auto; }
.ph-banner h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -.01em; color: var(--ph-text-strong); margin: 0; display: flex; align-items: center; gap: 16px; }
.ph-banner h1::before { content: ""; width: 6px; height: 1em; background: var(--ph-gold); border-radius: 3px; box-shadow: 0 0 22px rgba(255,196,0,.55); }
.ph-banner p { color: var(--ph-muted); font-size: 15px; margin: 10px 0 0 22px; }

/* --- Cam kartlar --- */
html.dark .bg-white, html.dark .dark\:bg-gray-900, html.dark .dark\:bg-gray-800, html.dark .bg-gray-100 { background-color: var(--ph-glass) !important; }
html.dark .bg-gray-50 { background-color: rgba(255,255,255,.03) !important; }
.rounded.overflow-hidden.bg-white, div.shadow.rounded, .rounded.border.bg-white {
    background: var(--ph-glass) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ph-glass-line) !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
}
div.border-b.bg-gray-50, .border-b.bg-gray-50, [class*="dark:bg-gray-900"].border-b { background: rgba(255,255,255,.03) !important; border-bottom: 1px solid var(--ph-glass-line) !important; }
.ph-play-card, .ph-side-card, .ph-news-item, .ph-empty, .ph-friends { background: var(--ph-glass); backdrop-filter: blur(10px); border-color: var(--ph-glass-line); }

/* --- Ana sayfa kartlari --- */
.ph-play-grid { grid-template-columns: 1.1fr 1.1fr 1fr; }
.ph-top h3 { margin-bottom: 4px; }
.ph-top-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.04); text-decoration: none; transition: background .15s ease; }
.ph-top-row:hover { background: rgba(255,196,0,.10); }
.ph-top-row b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--ph-gold); color: var(--ph-on-gold); }
.ph-top-row:nth-of-type(2) b { background: #c9ccd3; } .ph-top-row:nth-of-type(3) b { background: #d98b3a; }
.ph-top-row img { height: 30px; image-rendering: pixelated; }
.ph-top-row span { flex: 1; color: var(--ph-text-strong); font-weight: 600; font-size: 13.5px; }
.ph-top-row em { font-style: normal; color: var(--ph-gold); font-size: 12.5px; }
.ph-top-more { margin-top: 4px; font-size: 12.5px; color: var(--ph-muted); }
.ph-top-more:hover { color: var(--ph-gold); }
@media (max-width: 900px) { .ph-play-grid { grid-template-columns: 1fr; } }

/* --- Profil: parlak renkli kutulari koyu cama cevir --- */
.bg-\[\#f8ef2b\], .bg-\[\#e99bdc\], .bg-\[\#82d6db\] { background-image: linear-gradient(180deg, var(--tint), rgba(255,255,255,0) 90%) !important; background-color: var(--ph-glass) !important; border: 1px solid var(--ph-glass-line); }
.bg-\[\#f8ef2b\] { --tint: rgba(255,196,0,.26); } .bg-\[\#e99bdc\] { --tint: rgba(233,155,220,.24); } .bg-\[\#82d6db\] { --tint: rgba(130,214,219,.24); }
.bg-\[\#f8ef2b\] *, .bg-\[\#e99bdc\] *, .bg-\[\#82d6db\] * { color: var(--ph-text-strong) !important; }
.bg-\[\#f68b08\] { background: rgba(255,196,0,.10) !important; border: 1px solid rgba(255,196,0,.35); color: var(--ph-text-strong) !important; }
.bg-\[\#f68b08\] a { color: var(--ph-gold) !important; }

/* --- Alt bilgi --- */
footer { background: rgba(10,10,12,.82) !important; backdrop-filter: blur(10px); }

/* --- Cubuk sikistirma (giris yapmis kullanici) --- */
.ph-bar-nav #mobile-menu, .ph-bar-nav #mobile-menu * { white-space: nowrap; }
.ph-bar-nav .nav-item, .ph-bar-nav button { padding: 0 9px !important; }
.ph-bar-nav .nav-item, .ph-bar-nav [class*="dark:text-gray-200"] { letter-spacing: .06em; font-size: 11.5px !important; }
.ph-bar-inner { gap: 16px; }
.ph-bar-logo img { height: 28px; }
.ph-userbar .ph-chips > div { padding: 3px 10px 3px 5px; }
.ph-userbar > div:last-child span { display: none; }            /* kullanici adi: yalniz avatar */
.ph-bar-right > .hidden.lg\:flex { display: none !important; }  /* bayrak: alt bilgiye tasinabilir */

/* --- Butonlarin eski yesil/sari kenarligi --- */
button[type="submit"], button.w-full { border-color: transparent !important; border-radius: 999px !important; }

/* --- Kontrol paneli (me) --- */
.ph-me-hero { padding: 30px 32px 30px 230px; min-height: 230px; border-radius: 20px; background: radial-gradient(520px 220px at 0% 100%, rgba(255,196,0,.18), transparent 70%), var(--ph-glass); border: 1px solid var(--ph-glass-line); backdrop-filter: blur(12px); overflow: visible; }
.ph-me-avatar { left: 42px; bottom: -6px; }
.ph-me-name { font-size: 34px; font-weight: 700; margin: 0 0 6px; }
.ph-me-motto { color: var(--ph-muted); font-size: 14px; margin: 0; font-style: italic; }
.ph-me-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-left: auto; }
.ph-btn-lg { padding: 15px 34px; font-size: 14px; }
.ph-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph-tile { position: relative; padding: 22px; border-radius: 16px; background: var(--ph-glass); border: 1px solid var(--ph-glass-line); display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.ph-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px 120px at 0% 0%, var(--tint), transparent 70%); pointer-events: none; }
.ph-tile > div { width: 30px; height: 30px; background-size: contain; position: relative; }
.ph-tile b { position: relative; font-size: 30px; font-weight: 700; color: var(--ph-text-strong); line-height: 1.1; margin-top: 8px; }
.ph-tile span { position: relative; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-muted); }
.ph-tile-gold { --tint: rgba(255,196,0,.22); } .ph-tile-pink { --tint: rgba(233,155,220,.20); } .ph-tile-teal { --tint: rgba(130,214,219,.20); }
.ph-friends { flex-direction: column; padding: 20px 22px; border-radius: 16px; }
.ph-friends-head { display: flex; align-items: center; justify-content: space-between; }
.ph-friends-count { min-width: 26px; text-align: center; padding: 2px 9px; border-radius: 999px; background: rgba(255,196,0,.14); color: var(--ph-gold); font-size: 12px; font-weight: 600; }
.ph-friends-list { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-friend { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; padding: 8px 4px; border-radius: 12px; text-decoration: none; background: rgba(255,255,255,.04); transition: background .15s ease; }
.ph-friend:hover { background: rgba(255,196,0,.10); }
.ph-friend span { width: 44px; height: 44px; background-position: center; background-repeat: no-repeat; }
.ph-friend em { font-style: normal; font-size: 11.5px; color: var(--ph-text); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-friends-empty { color: var(--ph-muted); font-size: 13.5px; margin: 0; }
.ph-side-news { padding: 20px; border-radius: 16px; background: var(--ph-glass); border: 1px solid var(--ph-glass-line); display: flex; flex-direction: column; gap: 12px; }
.ph-side-news h3 { color: var(--ph-text-strong); font-size: 16px; font-weight: 600; margin: 0; }
@media (max-width: 767px) { .ph-me-hero { padding: 24px 20px 150px; } .ph-me-cta { margin: 0; } .ph-tiles { grid-template-columns: 1fr; } }

/* --- Yuruyen pixel-art karakterler + ay --- */
.ph-moon { position: absolute; top: 84px; right: 33%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #ffd54a 70%); box-shadow: 0 0 60px 18px rgba(255,196,0,.22); opacity: .9; z-index: 1; }
.ph-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 9%, transparent 10%), radial-gradient(circle at 30% 70%, rgba(0,0,0,.10) 0 7%, transparent 8%); }
.ph-street { position: absolute; left: 0; right: 0; bottom: 6px; height: 220px; z-index: 3; pointer-events: none; overflow: hidden; }
.ph-street::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,196,0,.45), transparent); }
.ph-walker { pointer-events: auto; cursor: pointer; position: absolute; bottom: 2px; left: 0; animation: ph-walk var(--dur) linear infinite; animation-delay: var(--delay); will-change: transform; }
.ph-walker img { display: block; height: 124px; width: auto; transform: scaleX(var(--dir)); filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
@keyframes ph-step { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ph-walk { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
.ph-walker[style*="--dir:-1"] { animation-name: ph-walk-rev; }
@keyframes ph-walk-rev { from { transform: translateX(calc(100vw + 80px)); } to { transform: translateX(-80px); } }
@media (prefers-reduced-motion: reduce) { .ph-walker, .ph-chip-live i { animation: none; } .ph-walker { left: 40%; } }

/* --- Genis ekran: cubuk icerikten biraz genis, sikisma yok --- */
.ph-bar-inner, .ph-banner-inner, .ph-lobby-inner { max-width: 88rem; }
main > div.max-w-7xl { max-width: 88rem; }
.ph-bar-nav { overflow: visible; }
@media (max-width: 1300px) { .ph-chips > div > div:last-child span { font-size: 12px; } .ph-bar-nav .nav-item, .ph-bar-nav button { padding: 0 7px !important; } }
@media (max-width: 1180px) { .ph-chips { display: none; } }

/* --- Oyuncu adi: fareyle gelince goster, yuruyus dursun --- */
.ph-walker:hover { animation-play-state: paused; z-index: 5; }
.ph-nick { position: absolute; left: 50%; top: -26px; transform: translate(-50%, 4px); padding: 3px 10px; border-radius: 999px; background: rgba(15,15,18,.92); border: 1px solid rgba(255,196,0,.55); color: var(--ph-gold); font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; opacity: 0; transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.ph-walker:hover .ph-nick { opacity: 1; transform: translate(-50%, 0); }

/* --- /download sayfasi --- */
.ph-dl-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 44px; border-radius: 22px; background: radial-gradient(560px 260px at 0% 100%, rgba(255,196,0,.16), transparent 70%), var(--ph-glass); border: 1px solid var(--ph-glass-line); backdrop-filter: blur(12px); }
.ph-dl-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ph-dl-copy h2 { color: var(--ph-text-strong); font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.1; margin: 4px 0 0; }
.ph-dl-copy p { color: var(--ph-text); font-size: 16px; line-height: 1.6; margin: 0; max-width: 480px; }
.ph-dl-note { color: var(--ph-muted); font-size: 13px; max-width: 420px; }
.ph-dl-alt { color: var(--ph-gold); font-size: 14px; font-weight: 600; text-decoration: none; }
.ph-dl-alt:hover { color: var(--ph-gold-hover); text-decoration: underline; }
.ph-dl-art { display: flex; justify-content: center; }
.ph-dl-window { width: 100%; max-width: 420px; border-radius: 14px; overflow: hidden; background: #15161a; border: 1px solid var(--ph-line); box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,196,0,.12); transform: perspective(900px) rotateY(-8deg) rotateX(3deg); }
.ph-dl-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--ph-band); border-bottom: 2px solid var(--ph-gold); }
.ph-dl-bar i { width: 9px; height: 9px; border-radius: 50%; background: #555b66; }
.ph-dl-screen { height: 220px; background: url('/assets/images/ph-skyline.svg') center bottom / cover no-repeat, #121215; }
.ph-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph-step { padding: 22px; border-radius: 16px; background: var(--ph-glass); border: 1px solid var(--ph-glass-line); display: flex; flex-direction: column; gap: 6px; }
.ph-step b { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ph-gold); color: var(--ph-on-gold); font-size: 14px; }
.ph-step h3 { color: var(--ph-text-strong); font-size: 17px; font-weight: 600; margin: 8px 0 0; }
.ph-step p { color: var(--ph-muted); font-size: 13.5px; margin: 0; }
@media (max-width: 900px) { .ph-dl-hero { grid-template-columns: 1fr; padding: 26px 20px; } .ph-dl-window { transform: none; } .ph-steps { grid-template-columns: 1fr; } }

/* --- Mobil duzeltmeler --- */
@media (max-width: 767px) {
    .ph-moon { top: 20px; right: 6%; width: 40px; height: 40px; opacity: .55; }
    .ph-me-hero { padding: 24px 20px 210px; }
    .ph-me-avatar { left: 50%; bottom: 0; transform: translateX(-50%); }
    .ph-me-avatar:hover { transform: translateX(-50%); }
    .ph-me-cta { width: 100%; }
    .ph-walker img { height: 96px; }
    .ph-street { height: 180px; }
}

/* --- Tiklayinca ziplama --- */
.ph-hop { display: block; position: relative; transform-origin: 50% 100%; }
.ph-hop.ph-hopping { animation: ph-hop .75s cubic-bezier(.3,.7,.4,1); }
@keyframes ph-hop { 0% { transform: translateY(0) scale(1,1); } 12% { transform: translateY(0) scale(1.12,.86); } 40% { transform: translateY(-58px) scale(.94,1.08); } 62% { transform: translateY(0) scale(1.1,.9); } 76% { transform: translateY(-16px) scale(.98,1.03); } 100% { transform: translateY(0) scale(1,1); } }
.ph-lobby-inner { min-height: 700px; padding-bottom: 150px; } .ph-lobby { min-height: 700px; }

/* --- Kucuk duzeltmeler --- */
.ph-featured .ph-chip { align-self: flex-start; }
.ph-dl-hero + .ph-section { margin-top: 56px; }