<!DOCTYPE html>
<html lang="tr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#06060d">
<meta name="csrf-token" content="{{ csrf_token() }}">
@php
    // SEO ayarlarını cache'den yükle
    $__seo = cache()->remember('seo_settings', 3600, fn() =>
        \App\Models\Setting::where('key','like','seo_%')->pluck('value','key')->toArray()
    );
    $__seoSite     = $__seo['seo_site_name'] ?? 'Animexe';
    $__seoDefDesc  = $__seo['seo_home_description'] ?? 'Animexe\'de binlerce anime dizisi ve filmini Türkçe altyazılı veya dublajlı, ücretsiz HD kalitede izleyin.';
    $__seoDefKw    = $__seo['seo_home_keywords'] ?? 'anime izle, türkçe anime, anime dizi, anime film, ücretsiz anime';
    $__seoOgImg    = url($__seo['seo_og_image'] ?? '/logo.jpg');
    $__seoDomain   = rtrim($__seo['seo_canonical_domain'] ?? config('app.url'), '/');
    $__seoCanon    = $__seoDomain . '/' . ltrim(request()->path(), '/');
    $__seoTwitter  = $__seo['seo_twitter_site'] ?? '';
    $__seoGa       = $__seo['seo_google_analytics'] ?? '';
    $__seoGtm      = $__seo['seo_gtm_id'] ?? '';
    $__seoGsc      = $__seo['seo_gsc_verification'] ?? '';
    $__seoBing     = $__seo['seo_bing_verification'] ?? '';
    $__seoYandex   = $__seo['seo_yandex_verification'] ?? '';
    $__seoSchema   = ($__seo['seo_enable_schema'] ?? '1') === '1';
    // Sayfa başlığı ve diğerleri (child template section'ları okuma)
    $__pageTitle   = $__env->yieldContent('title', $__seoSite . ' — Türkçe Anime İzle');
    $__pageDesc    = $__env->yieldContent('meta_description', $__seoDefDesc);
    $__pageKw      = $__env->yieldContent('meta_keywords', $__seoDefKw);
    $__pageRobots  = $__env->yieldContent('robots', 'index, follow');
    $__pageCanon   = $__env->yieldContent('canonical', $__seoCanon);
    $__pageOgType  = $__env->yieldContent('og_type', 'website');
    $__pageOgTitle = $__env->yieldContent('og_title', $__pageTitle);
    $__pageOgDesc  = $__env->yieldContent('og_description', $__pageDesc);
    $__pageOgImg   = $__env->yieldContent('og_image', $__seoOgImg);
    $__pageOgImgW  = $__env->yieldContent('og_image_width', '1200');
    $__pageOgImgH  = $__env->yieldContent('og_image_height', '630');
@endphp
{{-- LCP Preload: sayfaya özgü kritik görseller --}}
@yield('preload')
<title>{{ $__pageTitle }}</title>
{{-- Temel Meta --}}
<meta name="description" content="{{ $__pageDesc }}">
<meta name="keywords" content="{{ $__pageKw }}">
<meta name="robots" content="{{ $__pageRobots }}">
<link rel="canonical" href="{{ $__pageCanon }}">
<link rel="alternate" hreflang="tr" href="{{ $__pageCanon }}">
<link rel="alternate" hreflang="x-default" href="{{ $__pageCanon }}">
@php $__favicon = \App\Models\Setting::get('site_favicon','') @endphp
@if($__favicon)<link rel="icon" href="{{ $__favicon }}">@else<link rel="icon" href="/favicon.png">@endif
<link rel="manifest" href="/manifest.json">
<link rel="search" type="application/opensearchdescription+xml" title="Animexe Anime Ara" href="/opensearch.xml">
{{-- Preconnect: CDN ve harici kaynaklar --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
{{-- Doğrulama Etiketleri --}}
@if($__seoGsc)<meta name="google-site-verification" content="{{ $__seoGsc }}">@endif
@if($__seoBing)<meta name="msvalidate.01" content="{{ $__seoBing }}">@endif
@if($__seoYandex)<meta name="yandex-verification" content="{{ $__seoYandex }}">@endif
{{-- Open Graph --}}
<meta property="og:site_name" content="{{ $__seoSite }}">
<meta property="og:locale" content="tr_TR">
<meta property="og:type" content="{{ $__pageOgType }}">
<meta property="og:title" content="{{ $__pageOgTitle }}">
<meta property="og:description" content="{{ $__pageOgDesc }}">
<meta property="og:image" content="{{ $__pageOgImg }}">
<meta property="og:image:width" content="{{ $__pageOgImgW }}">
<meta property="og:image:height" content="{{ $__pageOgImgH }}">
<meta property="og:url" content="{{ $__pageCanon }}">
@if(!empty($__seo['seo_facebook_app_id']))<meta property="fb:app_id" content="{{ $__seo['seo_facebook_app_id'] }}">@endif
{{-- Twitter Card --}}
<meta name="twitter:card" content="summary_large_image">
@if($__seoTwitter)<meta name="twitter:site" content="{{ Str::startsWith($__seoTwitter,'@') ? $__seoTwitter : '@'.$__seoTwitter }}">@endif
<meta name="twitter:title" content="{{ $__pageOgTitle }}">
<meta name="twitter:description" content="{{ $__pageOgDesc }}">
<meta name="twitter:image" content="{{ $__pageOgImg }}">
{{-- JSON-LD: WebSite Schema (sitewide) --}}
@if($__seoSchema)
<script type="application/ld+json">
{
  "@@context":"https://schema.org",
  "@@type":"WebSite",
  "name":"{{ $__seoSite }}",
  "url":"{{ $__seoDomain }}",
  "description":"{{ addslashes($__seoDefDesc) }}",
  "inLanguage":"tr-TR",
  "potentialAction":{
    "@@type":"SearchAction",
    "target":{"@@type":"EntryPoint","urlTemplate":"{{ $__seoDomain }}/search?q={search_term_string}"},
    "query-input":"required name=search_term_string"
  }
}
</script>
@if(!empty($__seo['seo_org_logo']) || !empty($__seo['seo_org_twitter']))
<script type="application/ld+json">
{
  "@@context":"https://schema.org",
  "@@type":"Organization",
  "name":"{{ $__seoSite }}",
  "url":"{{ $__seoDomain }}",
  "logo":{"@type":"ImageObject","url":"{{ url($__seo['seo_org_logo'] ?? '/logo.jpg') }}"},
  "sameAs":[
    @php $sameAs = array_filter([$__seo['seo_org_twitter'] ?? null, $__seo['seo_org_facebook'] ?? null, $__seo['seo_org_instagram'] ?? null]); @endphp
    @foreach(array_values($sameAs) as $i => $sa)"{{ $sa }}"{{ $i < count($sameAs)-1 ? ',' : '' }}@endforeach
  ]
}
</script>
@endif
@endif
{{-- Sayfaya özgü JSON-LD --}}
@yield('schema')
{{-- Google Analytics 4 --}}
@if($__seoGtm)
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','{{ $__seoGtm }}');</script>
@elseif($__seoGa)
<script async src="https://www.googletagmanager.com/gtag/js?id={{ $__seoGa }}"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','{{ $__seoGa }}');</script>
@endif
<style>
/* ── Initial page load splash (inline, no FOUC) ────────────────── */
#splash{
  position:fixed;inset:0;z-index:99999;
  background:#06060d;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transition:opacity .35s ease, visibility .35s ease;
}
#splash.done{ opacity:0;visibility:hidden; }
.splash-logo{
  font-family:'Orbitron','system-ui',sans-serif;
  font-size:clamp(1.6rem,5vw,2.4rem);font-weight:900;
  letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(105deg,#fff 0%,#00f5ff 40%,#ff2d7d 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;
  animation:splash-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes splash-pulse{
  from{ filter:drop-shadow(0 0 8px rgba(0,245,255,.4)); }
  to{   filter:drop-shadow(0 0 20px rgba(255,45,125,.5)); }
}
.splash-bar-wrap{
  width:min(220px,55vw);height:2px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
.splash-bar{
  height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,#00f5ff,#ff2d7d,#b84dff);
  animation:splash-fill 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes splash-fill{ to{ width:100%; } }
.splash-dots{
  display:flex;gap:7px;
}
.splash-dots span{
  width:6px;height:6px;border-radius:50%;
  background:#00f5ff;opacity:.25;
  animation:sdot 1s ease-in-out infinite;
}
.splash-dots span:nth-child(2){ animation-delay:.18s;background:#ff2d7d; }
.splash-dots span:nth-child(3){ animation-delay:.36s;background:#b84dff; }
@keyframes sdot{
  0%,100%{ opacity:.25;transform:scale(1); }
  50%{ opacity:1;transform:scale(1.5); }
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
/* ── Neon cyber theme ─────────────────────────────────────────── */
:root{
  --bg:#06060d;
  --bg2:#0a0a14;
  --surface:#11111f;
  --surface2:#18182a;
  --border:rgba(0,245,255,.14);
  --border2:rgba(255,45,125,.2);
  --accent:#ff2d7d;
  --accent2:#00f5ff;
  --accent3:#b84dff;
  --glow:rgba(0,245,255,.18);
  --glow-pink:rgba(255,45,125,.25);
  --text:#f0f4ff;
  --text2:#9ca8d4;
  --text3:#5c6789;
  --nav-h:64px;
  --r:10px;
  --r2:14px;
  --font:'Outfit',system-ui,sans-serif;
  --font-display:'Orbitron',sans-serif;
  --shadow-neon:0 0 32px rgba(0,245,255,.12),0 0 64px rgba(255,45,125,.08);
  --shadow-card:0 4px 24px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font);font-size:15px;line-height:1.6;color:var(--text);
  overflow-x:hidden;min-height:100vh;width:100%;max-width:100vw;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -25%,rgba(184,77,255,.22),transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 20%,rgba(0,245,255,.08),transparent 45%),
    radial-gradient(ellipse 70% 45% at 0% 90%,rgba(255,45,125,.1),transparent 50%),
    linear-gradient(180deg,#06060d 0%,#08081a 50%,#06060d 100%);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,245,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,245,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 70%,transparent 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(0,245,255,.35),rgba(255,45,125,.35));
  border-radius:8px;
}

/* ── Navbar ───────────────────────────────────────────────────── */
#topnav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--nav-h);
  display:flex;align-items:center;gap:10px;
  padding:0 22px;
  background:rgba(6,6,13,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 30px rgba(0,0,0,.35),0 0 40px rgba(0,245,255,.04);
}
#topnav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);
  opacity:.45;pointer-events:none;
}
.nav-logo{
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  text-shadow:0 0 24px rgba(0,245,255,.5),0 0 40px rgba(255,45,125,.35);
  flex-shrink:0;margin-right:12px;
  background:linear-gradient(105deg,#fff 0%,var(--accent2) 40%,var(--accent) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{
  padding:8px 14px;border-radius:var(--r);font-size:.86rem;font-weight:600;
  color:var(--text2);transition:all .18s;
  border:1px solid transparent;
}
.nav-links a:hover{
  color:var(--accent2);
  background:rgba(0,245,255,.06);
  border-color:rgba(0,245,255,.2);
  box-shadow:0 0 20px rgba(0,245,255,.1);
}
.nav-links a.on{
  color:var(--text);
  background:rgba(255,45,125,.1);
  border-color:rgba(255,45,125,.35);
  box-shadow:0 0 24px rgba(255,45,125,.15);
}
.nav-search{margin-left:auto;display:flex;align-items:center;gap:10px}
.ns-form{position:relative;display:flex;align-items:center}
.ns-form input{
  background:rgba(17,17,31,.9);border:1px solid var(--border);border-radius:999px;
  padding:9px 16px 9px 38px;color:var(--text);font-size:.85rem;
  width:210px;outline:none;transition:all .22s;
}
.ns-form input:focus{
  width:280px;border-color:var(--accent2);
  background:rgba(0,245,255,.06);
  box-shadow:0 0 0 2px rgba(0,245,255,.2),0 0 28px rgba(0,245,255,.12);
}
.ns-form input::placeholder{color:var(--text3)}
.ns-form .ns-icon{position:absolute;left:13px;color:var(--accent2);font-size:.92rem;pointer-events:none;opacity:.85}
/* ── Autocomplete dropdown ────────────────────────── */
.ns-ac{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:#0d0d1c;border:1px solid rgba(0,245,255,.22);
  border-radius:14px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.7),0 0 0 1px rgba(0,245,255,.06);
  z-index:9999;display:none;min-width:320px;
}
.ns-ac.show{display:block;animation:acIn .16s ease}
@keyframes acIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ns-ac-item{
  display:flex;align-items:center;gap:11px;padding:9px 14px;
  cursor:pointer;transition:background .12s;text-decoration:none;
}
.ns-ac-item:hover,.ns-ac-item.focused{background:rgba(0,245,255,.07)}
.ns-ac-item img,.ns-ac-item .ns-ac-ph{
  width:34px;height:48px;border-radius:5px;object-fit:cover;flex-shrink:0;
}
.ns-ac-ph{background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center}
.ns-ac-info{flex:1;min-width:0}
.ns-ac-title{color:var(--text);font-size:.83rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ns-ac-meta{color:var(--text3);font-size:.72rem;margin-top:2px}
.ns-ac-type{
  font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:4px;
  background:rgba(0,245,255,.1);color:var(--accent2);border:1px solid rgba(0,245,255,.2);flex-shrink:0;
}
.ns-ac-all{
  display:block;text-align:center;padding:9px;
  font-size:.78rem;color:var(--accent2);font-weight:700;
  border-top:1px solid rgba(255,255,255,.06);
  transition:background .12s;
}
.ns-ac-all:hover{background:rgba(0,245,255,.06)}
.nav-auth{display:flex;gap:10px;align-items:center;flex-shrink:0}
.btn-ghost{
  background:rgba(17,17,31,.6);border:1px solid rgba(0,245,255,.28);color:var(--text2);
  padding:8px 18px;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .18s;
}
.btn-ghost:hover{
  border-color:var(--accent2);color:var(--accent2);
  box-shadow:0 0 20px rgba(0,245,255,.2);
}
.btn-solid{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent3) 100%);
  color:#fff;border:none;
  padding:8px 20px;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:transform .16s,box-shadow .2s;
  box-shadow:0 0 24px rgba(255,45,125,.35),0 4px 16px rgba(184,77,255,.2);
}
.btn-solid:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(255,45,125,.5)}
.nav-bell{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--text2);text-decoration:none;font-size:1.1rem;transition:color .15s,background .15s}
.nav-bell:hover{color:var(--accent2);background:rgba(0,245,255,.08)}
.bell-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--accent);color:#fff;font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none}
.nav-user{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer}
.nav-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#06060d;flex-shrink:0;
  box-shadow:0 0 16px rgba(0,245,255,.4);
}
.nav-user-name{font-size:.82rem;font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-dropdown{
  position:absolute;top:100%;right:0;
  background:rgba(10,10,20,.96);border:1px solid var(--border);border-radius:var(--r2);
  padding:20px 8px 8px;min-width:180px;display:none;z-index:200;
  box-shadow:var(--shadow-neon),0 16px 48px rgba(0,0,0,.55);
  margin-top:0;
}
.nav-user:hover .nav-dropdown{display:block}
.nav-dropdown a,.nav-dropdown button{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 12px;border-radius:var(--r);color:var(--text2);font-size:.85rem;font-weight:500;
  background:none;border:none;cursor:pointer;transition:all .14s;text-align:left;
}
.nav-dropdown a:hover,.nav-dropdown button:hover{
  background:rgba(0,245,255,.08);color:var(--accent2);
}
.nav-dropdown .sep{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:6px 0}
.nav-ham{display:none;background:none;border:none;color:var(--accent2);font-size:1.45rem;cursor:pointer;margin-left:auto;padding:6px;filter:drop-shadow(0 0 8px rgba(0,245,255,.4))}

#mob-menu{
  display:none;flex-direction:column;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:rgba(6,6,14,.98);backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  padding:0 0 16px;z-index:499;gap:0;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(0,245,255,.04);
  max-height:calc(100vh - var(--nav-h));
  overflow-y:auto;
}
#mob-menu::before{
  content:'';display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);
  opacity:.4;flex-shrink:0;
}
#mob-menu.open{display:flex}
.mob-nav-links{padding:10px 14px 6px;display:flex;flex-direction:column;gap:2px}
#mob-menu a{
  padding:12px 16px;border-radius:var(--r);color:var(--text2);font-weight:600;transition:all .14s;
  border:1px solid transparent;display:flex;align-items:center;gap:10px;
}
#mob-menu a:hover{background:rgba(0,245,255,.08);border-color:rgba(0,245,255,.18);color:var(--accent2)}
#mob-menu a i{font-size:1rem;opacity:.7;width:18px;text-align:center}
.mob-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:8px 14px}
.mob-search{padding:0 14px 8px;position:relative}
.mob-search input{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 16px 12px 42px;color:var(--text);font-size:.9rem;outline:none;
  transition:border-color .18s;
}
.mob-search input:focus{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(0,245,255,.15)}
.mob-search .ns-icon{position:absolute;left:27px;top:50%;transform:translateY(-50%);color:var(--accent2);pointer-events:none}
.mob-auth{display:flex;gap:10px;padding:6px 14px;margin-top:4px}
.mob-auth a{flex:1;text-align:center;padding:13px;border-radius:var(--r);font-size:.86rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}
.mob-auth .login{background:var(--surface);color:var(--text2);border:1px solid var(--border)}
.mob-auth .login:hover{border-color:var(--accent2);color:var(--accent2)}
.mob-auth .reg{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;box-shadow:0 0 20px rgba(255,45,125,.3)}
.mob-user-block{padding:16px 14px 10px;display:flex;align-items:center;gap:13px;border-bottom:1px solid rgba(0,245,255,.08);margin-bottom:4px}
.mob-user-ava{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:800;color:#06060d;
  box-shadow:0 0 18px rgba(0,245,255,.4);
}
.mob-user-info{flex:1;min-width:0}
.mob-user-name{font-size:.9rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob-user-tier{font-size:.72rem;color:var(--text3);margin-top:1px}

#pg{padding-top:var(--nav-h);min-height:100vh;position:relative;z-index:1;overflow-x:hidden;max-width:100%}

.section{padding:40px 28px;max-width:1680px;margin:0 auto}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.0rem,1.8vw,1.3rem);font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  display:flex;align-items:center;gap:13px;color:var(--text);
}
.section-title::before{
  content:'';width:4px;height:26px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  border-radius:3px;
  box-shadow:0 0 16px rgba(0,245,255,.7),0 0 24px rgba(255,45,125,.45);
}
.section-more{
  color:var(--accent2);font-size:.82rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  padding:7px 14px;border-radius:8px;border:1px solid rgba(0,245,255,.3);
  background:rgba(0,245,255,.04);
  transition:all .18s;
}
.section-more:hover{
  background:rgba(0,245,255,.1);box-shadow:0 0 20px rgba(0,245,255,.2);
  text-decoration:none;
}

.a-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px}
.a-card{
  background:linear-gradient(145deg,rgba(17,17,31,.96),rgba(10,10,20,.99));
  border-radius:14px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .22s,box-shadow .25s,border-color .22s;
  box-shadow:0 6px 28px rgba(0,0,0,.5);
}
.a-card:hover{
  transform:translateY(-7px) scale(1.01);
  border-color:rgba(255,45,125,.48);
  box-shadow:0 20px 56px rgba(0,0,0,.6),0 0 44px rgba(255,45,125,.12),0 0 64px rgba(0,245,255,.06);
}
.a-poster{position:relative;aspect-ratio:2/3;background:var(--surface2);overflow:hidden}
.a-poster::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.3);
}
/* Shine sweep on hover */
.a-poster::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);
  transform:translateX(-100%) skewX(-15deg);
  transition:transform .65s ease;
}
.a-card:hover .a-poster::before{transform:translateX(200%) skewX(-15deg)}
.a-poster img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.a-card:hover .a-poster img{transform:scale(1.08)}
.a-no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:2.5rem}
.a-badge{
  position:absolute;top:9px;left:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  color:#fff;font-size:.6rem;font-weight:900;padding:4px 9px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.08em;
  box-shadow:0 0 16px rgba(255,45,125,.5);
  z-index:2;
}
.a-rating{
  position:absolute;top:9px;right:9px;background:rgba(6,6,13,.88);
  color:#ffd60a;font-size:.68rem;font-weight:800;padding:4px 8px;border-radius:6px;
  display:flex;align-items:center;gap:3px;backdrop-filter:blur(8px);
  border:1px solid rgba(255,214,10,.25);
  z-index:2;
}
.a-hover-play{position:absolute;inset:0;background:rgba(6,6,13,.52);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s;z-index:2}
.a-card:hover .a-hover-play{opacity:1}
.play-circle{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;
  box-shadow:0 0 28px rgba(0,0,0,.5);
}
.a-info{padding:13px 13px}
.a-title{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-meta{font-size:.73rem;color:var(--text3);margin-top:5px}

.h-row{display:flex;gap:14px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.h-row::-webkit-scrollbar{display:none}
.h-row .a-card{flex-shrink:0;width:152px}

.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ep-card{
  background:linear-gradient(145deg,rgba(17,17,31,.95),rgba(10,10,20,.98));
  border-radius:var(--r2);overflow:hidden;cursor:pointer;border:1px solid rgba(0,245,255,.1);
  transition:transform .2s,box-shadow .22s,border-color .2s;
}
.ep-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,245,255,.35);
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 30px rgba(0,245,255,.1);
}
.ep-thumb{position:relative;aspect-ratio:16/9;background:var(--surface2);overflow:hidden}
.ep-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .28s}
.ep-card:hover .ep-thumb img{transform:scale(1.05)}
.ep-ep-badge{
  position:absolute;bottom:8px;left:8px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#06060d;font-size:.65rem;font-weight:900;padding:3px 9px;border-radius:6px;
  box-shadow:0 0 16px rgba(0,245,255,.4);
}
.ep-play{position:absolute;inset:0;background:rgba(6,6,13,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.ep-card:hover .ep-play{opacity:1}
.ep-body{padding:10px 12px}
.ep-anime-name{font-size:.7rem;color:var(--accent2);font-weight:700;margin-bottom:3px}
.ep-title{font-size:.82rem;font-weight:700;color:var(--text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ep-time{font-size:.72rem;color:var(--text3);margin-top:4px}

.genre-chip{
  display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;
  background:rgba(17,17,31,.8);border:1px solid var(--border);color:var(--text2);
  font-size:.78rem;font-weight:600;transition:all .16s;cursor:pointer;
}
.genre-chip:hover,.genre-chip.on{
  background:rgba(255,45,125,.12);border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 20px rgba(255,45,125,.2);
}

.pager{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap}
.pager a,.pager span{
  padding:8px 14px;border-radius:var(--r);font-size:.84rem;font-weight:700;
  background:var(--surface);border:1px solid var(--border);color:var(--text2);transition:all .15s;
}
.pager a:hover{background:rgba(0,245,255,.08);border-color:var(--accent2);color:var(--accent2)}
.pager .on{
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  border-color:transparent;color:#fff;
  box-shadow:0 0 20px rgba(255,45,125,.35);
}

.alert{padding:12px 18px;border-radius:var(--r);font-size:.88rem;font-weight:600;margin-bottom:16px}
.alert-err{background:rgba(255,60,90,.1);border:1px solid rgba(255,60,90,.35);color:#ff8a9a;box-shadow:0 0 20px rgba(255,60,90,.08)}
.alert-ok{background:rgba(0,245,180,.08);border:1px solid rgba(0,245,180,.3);color:#6effd0}

footer{
  position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(6,6,16,.99),#030309);
  border-top:1px solid rgba(255,255,255,.05);
  padding:clamp(40px,5vw,60px) clamp(16px,4vw,40px) clamp(24px,3vw,36px);
  margin-top:56px;
  box-shadow:0 -20px 60px rgba(0,0,0,.4);
  overflow:hidden;
}
footer::before{
  content:'';position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);
  opacity:.55;
}
/* Footer ambient glow */
footer::after{
  content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:600px;height:300px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,245,255,.03),transparent 70%);
  pointer-events:none;
}
.footer-in{max-width:1200px;margin:0 auto;display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
.footer-brand .logo{
  font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:.2em;
  background:linear-gradient(105deg,#fff,var(--accent2),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px;
}
.footer-brand p{color:var(--text3);font-size:.84rem;max-width:280px;line-height:1.65}
.footer-col h5{
  font-family:var(--font-display);font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent2);font-weight:700;margin-bottom:12px;opacity:.9;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col a{color:rgba(255,255,255,.35);font-size:.84rem;font-weight:500;transition:all .16s;padding:2px 0;position:relative}
.footer-col a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--accent2);transition:width .2s ease}
.footer-col a:hover{color:var(--accent2);text-shadow:0 0 14px rgba(0,245,255,.4)}
.footer-col a:hover::after{width:100%}
.footer-bottom{
  max-width:1200px;margin:28px auto 0;padding-top:20px;
  border-top:1px solid rgba(0,245,255,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--text3);font-size:.78rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  #topnav{padding:0 16px}
  .nav-links,.nav-search,.nav-auth{display:none}
  .nav-ham{display:block}
  .section{padding:24px 14px}
  .a-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
  .h-row .a-card{width:130px}
}
@media(max-width:480px){
  .a-grid{grid-template-columns:repeat(3,1fr);gap:9px}
  .ep-grid{grid-template-columns:repeat(2,1fr);gap:9px}
}

/* ═══════════════════════════════════════════════════════
   PREMIUM GLOBAL ENHANCEMENTS v2
═══════════════════════════════════════════════════════ */

/* ── Scroll Progress Bar ────────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;z-index:10000;
  background:linear-gradient(90deg,var(--accent2),var(--accent),var(--accent3));
  box-shadow:0 0 10px rgba(0,245,255,.9),0 0 24px rgba(255,45,125,.6);
  transition:width .08s linear;pointer-events:none;
}

/* ── Scroll To Top ──────────────────────────────────── */
#scroll-top{
  position:fixed;bottom:84px;right:18px;z-index:850;
  width:40px;height:40px;border-radius:50%;background:rgba(6,6,13,.92);
  border:1px solid rgba(0,245,255,.3);color:var(--accent2);font-size:1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .26s cubic-bezier(.22,1,.36,1);
  backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.45),0 0 16px rgba(0,245,255,.1);
}
#scroll-top.show{opacity:1;visibility:visible;transform:none}
#scroll-top:hover{
  background:rgba(0,245,255,.15);border-color:var(--accent2);
  box-shadow:0 0 26px rgba(0,245,255,.4),0 4px 20px rgba(0,0,0,.4);
  transform:translateY(-3px);
}

/* ── Scroll Reveal System ───────────────────────────── */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}
.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}
.reveal-d4{transition-delay:.28s}
.reveal-d5{transition-delay:.35s}

/* Card shine effects are defined per-page */

/* ── Navbar Scroll State ────────────────────────────── */
#topnav{transition:background .3s ease,box-shadow .3s ease,height .25s ease,transform .28s cubic-bezier(.22,1,.36,1)}
#topnav.scrolled{
  background:rgba(3,3,9,.97)!important;
  box-shadow:0 2px 48px rgba(0,0,0,.65),0 0 60px rgba(0,245,255,.02)!important;
  height:56px;
}
#topnav.scrolled .nav-logo{font-size:.92rem}

/* ── Ambient Floating Orbs ──────────────────────────── */
.amb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px);will-change:transform}
.amb-1{
  width:clamp(220px,28vw,420px);height:clamp(220px,28vw,420px);
  background:radial-gradient(circle,rgba(0,245,255,.11),transparent 70%);
  top:-5%;right:0%;
  animation:amb-drift-a 20s ease-in-out infinite alternate;
}
.amb-2{
  width:clamp(180px,22vw,340px);height:clamp(180px,22vw,340px);
  background:radial-gradient(circle,rgba(255,45,125,.09),transparent 70%);
  bottom:15%;left:-5%;
  animation:amb-drift-b 25s ease-in-out infinite alternate;
}
.amb-3{
  width:clamp(140px,18vw,280px);height:clamp(140px,18vw,280px);
  background:radial-gradient(circle,rgba(184,77,255,.08),transparent 70%);
  top:45%;right:15%;
  animation:amb-drift-c 18s ease-in-out infinite alternate;
}
@keyframes amb-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,70px) scale(1.1)}}
@keyframes amb-drift-b{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-50px) scale(1.12)}}
@keyframes amb-drift-c{from{transform:translate(0,0) scale(1)}to{transform:translate(-35px,55px) scale(1.08)}}

/* ── Mobile Bottom Navigation ───────────────────────── */
#mob-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:490;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .22s;
  height:60px;
  background:rgba(4,4,11,.96);
  backdrop-filter:blur(28px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.07);
  box-shadow:0 -8px 48px rgba(0,0,0,.65),0 -4px 20px rgba(0,245,255,.03);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
#mob-bottom-nav::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,245,255,.5),rgba(255,45,125,.4),transparent);
  opacity:.6;
}
.mbn-list{
  display:flex;
  width:100%;
  height:60px;
  list-style:none;
  align-items:stretch;
  margin:0;padding:0;
}
.mbn-list li{flex:1;display:flex;min-width:0}
.mbn-a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 4px;
  color:rgba(255,255,255,.28);text-decoration:none;
  font-size:.54rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  position:relative;transition:color .18s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.mbn-a i{
  font-size:1.18rem;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .22s,opacity .18s;
}
.mbn-a:active i{transform:scale(.82)!important}
.mbn-a.on{color:var(--accent2)}
.mbn-a.on i{
  transform:scale(1.08);
  filter:drop-shadow(0 0 6px rgba(0,245,255,.85));
}
.mbn-a.on::after{
  content:'';position:absolute;top:0;left:18%;right:18%;height:2px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  border-radius:0 0 4px 4px;
  box-shadow:0 0 10px rgba(0,245,255,.7);
}
.mbn-a.mbn-ai.on{color:var(--accent3)!important}
.mbn-a.mbn-ai.on i{filter:drop-shadow(0 0 6px rgba(184,77,255,.85))!important}
.mbn-a.mbn-ai.on::after{background:linear-gradient(90deg,var(--accent3),var(--accent))!important;box-shadow:0 0 10px rgba(184,77,255,.7)!important}

@media(max-width:900px){
  #mob-bottom-nav{display:flex;flex-direction:column}
  #pg{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}
  footer{margin-bottom:0}
  #ai-fab{bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;right:14px!important}
  #ai-panel{bottom:calc(136px + env(safe-area-inset-bottom,0px))!important;right:8px!important;left:8px!important;width:auto!important}
  #scroll-top{bottom:calc(138px + env(safe-area-inset-bottom,0px));right:14px;width:36px;height:36px;font-size:.88rem}
}
@media(max-width:480px){
  .mbn-a{font-size:.5rem}
  .mbn-a i{font-size:1.12rem}
}

/* ── Enhanced Genre Cards ───────────────────────────── */
.gc{overflow:hidden;position:relative}
.gc::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 10% 90%,var(--gc,#00f5ff) 0%,transparent 60%);
  opacity:0;transition:opacity .28s;
}
.gc:hover::after{opacity:.1}

/* ── Home Section Headers Enhanced ─────────────────── */
.hs-hdr{position:relative}

/* ── Promo Banner Glow Pulse ────────────────────────── */
@keyframes promo-pulse{
  0%,100%{transform:translate(-10%,-20%) scale(1);opacity:.6}
  50%{transform:translate(15%,15%) scale(1.25);opacity:.25}
}
.promo-inner{overflow:hidden}
.promo-inner::after{
  content:'';position:absolute;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,245,255,.07),transparent);
  top:-80px;right:8%;
  animation:promo-pulse 7s ease-in-out infinite;pointer-events:none;
}

/* ── Ticker glow on hover ───────────────────────────── */
.ticker-item a{transition:color .15s,text-shadow .15s}
.ticker-item a:hover{color:var(--accent2);text-shadow:0 0 14px rgba(0,245,255,.55)}

/* ── Footer glow line ───────────────────────────────── */
footer{position:relative}

/* ── Card hover micro-interaction enhancement ───────── */
.a-card:hover,.ep-card:hover{
  border-color:rgba(255,45,125,.5);
}

/* ── Splash screen improvement ──────────────────────── */
.splash-logo{animation:splash-pulse 1.2s ease-in-out infinite alternate}

/* ── Bottom nav APK banner spacing ─────────────────── */
@media(max-width:900px){
  .app-download-banner{margin-bottom:8px}
}

/* ── Custom scrollbar (webkit) enhancement ─────────── */
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(0,245,255,.6),rgba(255,45,125,.6));
}

/* ════════════════════════════════════════════════════
   CHAT PANEL v2
════════════════════════════════════════════════════ */
#cp-backdrop{
  display:none;position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
}
#cp-backdrop.on{display:block}

#chat-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:901;
  width:420px;max-width:100vw;
  display:flex;flex-direction:column;
  background:rgba(7,7,18,.98);
  border-left:1px solid rgba(0,245,255,.1);
  box-shadow:-20px 0 80px rgba(0,0,0,.7),-4px 0 24px rgba(0,245,255,.04);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
#chat-panel.open{transform:translateX(0)}

/* Header */
.cp-hdr{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;
  background:rgba(5,5,14,.9);
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.cp-hdr-title{font-size:.98rem;font-weight:800;color:#fff;flex:1}
.cp-hdr-close,.cp-hdr-back,.cp-hdr-call{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.07);border:none;
  color:rgba(255,255,255,.5);font-size:.9rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.cp-hdr-close:hover,.cp-hdr-back:hover{background:rgba(255,255,255,.14);color:#fff}
.cp-hdr-call{color:#22c55e}
.cp-hdr-call:hover{background:rgba(34,197,94,.2);color:#22c55e}
.cp-hdr-ava{
  width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;color:#fff;
}
.cp-hdr-ava img{width:100%;height:100%;object-fit:cover}
.cp-hdr-name{font-size:.88rem;font-weight:700;color:#fff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Conversation list */
#cp-list{display:flex;flex-direction:column;flex:1;min-height:0}
#cp-convs{flex:1;overflow-y:auto;padding:8px}
#cp-convs::-webkit-scrollbar{width:3px}
#cp-convs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

.cp-conv-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:12px;cursor:pointer;
  transition:background .15s;position:relative;
  border:1px solid transparent;
}
.cp-conv-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)}
.cp-conv-item.unread{background:rgba(0,245,255,.04);border-color:rgba(0,245,255,.1)}
.cp-conv-ava{
  width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;color:#fff;
}
.cp-conv-ava img{width:100%;height:100%;object-fit:cover}
.cp-conv-body{flex:1;min-width:0}
.cp-conv-name{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:3px}
.cp-conv-preview{font-size:.76rem;color:rgba(255,255,255,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-conv-item.unread .cp-conv-preview{color:rgba(255,255,255,.65)}
.cp-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.cp-conv-time{font-size:.65rem;color:rgba(255,255,255,.2)}
.cp-unread-badge{
  min-width:18px;height:18px;border-radius:9px;
  background:var(--accent2);color:#05050e;
  font-size:.58rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}

.cp-new-btn{
  margin:12px;padding:11px;border-radius:12px;border:1px dashed rgba(0,245,255,.2);
  background:rgba(0,245,255,.04);color:var(--accent2);
  font-size:.82rem;font-weight:700;cursor:pointer;text-align:center;
  transition:all .15s;text-decoration:none;display:block;
}
.cp-new-btn:hover{background:rgba(0,245,255,.1);border-color:rgba(0,245,255,.4)}
.cp-empty{padding:40px 20px;text-align:center;color:rgba(255,255,255,.2);font-size:.84rem}
.cp-empty i{font-size:2rem;display:block;margin-bottom:10px;opacity:.2}

/* Thread view */
#cp-thread{display:none;flex-direction:column;flex:1;min-height:0}
#cp-thread.active{display:flex}

#cp-msgs{
  flex:1;overflow-y:auto;
  padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:4px;
  -webkit-overflow-scrolling:touch;
}
#cp-msgs::-webkit-scrollbar{width:3px}
#cp-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.cpm{display:flex;gap:8px;max-width:86%;align-items:flex-end}
.cpm.mine{align-self:flex-end;flex-direction:row-reverse}
.cpm.theirs{align-self:flex-start}
.cpm-ava{
  width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:800;color:#fff;
}
.cpm-ava img{width:100%;height:100%;object-fit:cover}
.cpm.mine .cpm-ava{display:none}
.cpm-bubble{
  padding:9px 13px;border-radius:18px;
  font-size:.86rem;line-height:1.5;word-break:break-word;
}
.cpm.mine .cpm-bubble{
  background:linear-gradient(135deg,var(--accent2),#00d4de);
  color:#05050e;font-weight:600;
  border-bottom-right-radius:4px;
}
.cpm.theirs .cpm-bubble{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  border-bottom-left-radius:4px;
}
.cpm-time{font-size:.58rem;color:rgba(255,255,255,.22);align-self:flex-end;margin-bottom:2px;flex-shrink:0}
.cp-date-sep{
  text-align:center;font-size:.62rem;color:rgba(255,255,255,.2);
  padding:10px 0 4px;font-weight:600;letter-spacing:.06em;
}

/* Media messages */
.cpm-img{
  max-width:200px;max-height:200px;border-radius:12px;
  cursor:pointer;display:block;object-fit:cover;
  transition:opacity .15s;
}
.cpm-img:hover{opacity:.88}
.cpm-gif{
  max-width:200px;border-radius:12px;display:block;
}

/* Share card in panel */
.cp-share-card{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.18);
  border-radius:12px;padding:9px 11px;text-decoration:none;max-width:240px;
  transition:all .15s;
}
.cp-share-card:hover{background:rgba(0,245,255,.12);border-color:rgba(0,245,255,.35)}
.cp-share-img{width:50px;height:70px;border-radius:7px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.05)}
.cp-share-img img{width:100%;height:100%;object-fit:cover;display:block}
.cp-share-title{font-size:.78rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-share-ep{font-size:.68rem;color:rgba(255,255,255,.45)}
.cp-share-play{font-size:.66rem;color:var(--accent2);display:flex;align-items:center;gap:3px;margin-top:4px;font-weight:700}

/* Input area */
#cp-input-wrap{
  padding:8px 10px;
  background:rgba(5,5,14,.95);
  border-top:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}
.cp-toolbar{
  display:flex;align-items:center;gap:6px;
  padding:6px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:6px;
}
.cp-tool-btn{
  width:38px;height:38px;border-radius:10px;border:none;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);
  font-size:.88rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.cp-tool-btn:hover{background:rgba(255,255,255,.13);color:#fff}
.cp-tool-btn.active{background:rgba(0,245,255,.12);color:var(--accent2)}
.cp-form{display:flex;align-items:flex-end;gap:8px}
#cp-textarea{
  flex:1;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  padding:10px 14px;color:#fff;font-size:.88rem;font-family:inherit;
  resize:none;max-height:100px;overflow-y:auto;min-height:40px;
  line-height:1.4;outline:none;-webkit-appearance:none;
  transition:border-color .15s;
}
#cp-textarea:focus{border-color:rgba(0,245,255,.35)}
#cp-textarea::placeholder{color:rgba(255,255,255,.22)}
#cp-send-btn{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),#00c6d4);
  border:none;color:#05050e;font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
#cp-send-btn:hover{transform:scale(1.08);box-shadow:0 0 16px rgba(0,245,255,.5)}
#cp-send-btn:disabled{opacity:.35;transform:none;cursor:default}

/* Emoji picker */
#cp-emoji-picker{
  display:none;
  background:rgba(10,10,22,.98);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:10px;
  max-height:180px;overflow-y:auto;
  margin-bottom:6px;
  scrollbar-width:thin;
}
#cp-emoji-picker.show{display:flex;flex-wrap:wrap;gap:2px}
.cp-emoji-btn{
  font-size:1.3rem;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;border-radius:8px;
  transition:background .12s;
}
.cp-emoji-btn:hover{background:rgba(255,255,255,.1)}

/* GIF picker */
#cp-gif-picker{
  display:none;
  background:rgba(10,10,22,.98);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:8px;
  margin-bottom:6px;
}
#cp-gif-picker.show{display:block}
.cp-gif-search{
  width:100%;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:.82rem;font-family:inherit;outline:none;
  margin-bottom:8px;
}
.cp-gif-search::placeholder{color:rgba(255,255,255,.3)}
.cp-gif-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  max-height:160px;overflow-y:auto;
}
.cp-gif-item{
  aspect-ratio:1;background:rgba(255,255,255,.05);border-radius:8px;
  overflow:hidden;cursor:pointer;transition:opacity .15s;
}
.cp-gif-item:hover{opacity:.8}
.cp-gif-item img{width:100%;height:100%;object-fit:cover;display:block}
.cp-gif-placeholder{
  padding:20px;text-align:center;color:rgba(255,255,255,.25);font-size:.78rem;
}

/* Loading skeleton */
.cp-loading{padding:20px;text-align:center;color:rgba(255,255,255,.2);font-size:.82rem}

/* Mobile nav chat button */
.mbn-a.mbn-chat.on{color:var(--accent2)}
.mbn-a.mbn-chat.on i{filter:drop-shadow(0 0 6px rgba(0,245,255,.85))}
.mbn-a.mbn-chat.on::after{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.mbn-chat-badge{
  position:absolute;top:4px;right:calc(50% - 14px);
  min-width:14px;height:14px;border-radius:7px;
  background:var(--accent);color:#fff;
  font-size:.5rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
}

@media(max-width:900px){
  #chat-panel{
    width:100vw;border-left:none;border-top:1px solid rgba(0,245,255,.1);
    top:0;
  }
}

/* ════════════════════════════════════════════════════
   INCOMING CALL OVERLAY
════════════════════════════════════════════════════ */
#call-overlay{
  display:none;
  position:fixed;inset:0;z-index:99998;
  background:rgba(0,0,0,.88);backdrop-filter:blur(20px);
  align-items:center;justify-content:center;flex-direction:column;
  gap:24px;
}
#call-overlay.show{display:flex}
.call-ava{
  width:90px;height:90px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:#fff;overflow:hidden;
  box-shadow:0 0 0 8px rgba(0,245,255,.15),0 0 0 16px rgba(0,245,255,.07);
  animation:call-ring 1.4s ease-in-out infinite;
}
.call-ava img{width:100%;height:100%;object-fit:cover}
@keyframes call-ring{
  0%,100%{box-shadow:0 0 0 8px rgba(0,245,255,.15),0 0 0 16px rgba(0,245,255,.07)}
  50%{box-shadow:0 0 0 14px rgba(0,245,255,.2),0 0 0 28px rgba(0,245,255,.06)}
}
.call-name{font-size:1.4rem;font-weight:800;color:#fff;text-align:center}
.call-status{font-size:.88rem;color:rgba(255,255,255,.5);text-align:center}
.call-btns{display:flex;gap:28px;margin-top:8px}
.call-btn{
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#fff;transition:transform .15s,box-shadow .15s;
}
.call-btn:active{transform:scale(.92)}
.call-btn-accept{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 0 32px rgba(34,197,94,.55);
}
.call-btn-accept:hover{box-shadow:0 0 44px rgba(34,197,94,.7)}
.call-btn-decline{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 0 32px rgba(239,68,68,.55);
}
.call-btn-decline:hover{box-shadow:0 0 44px rgba(239,68,68,.7)}
.call-btn-end{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 0 32px rgba(239,68,68,.55);
}

/* Active call bar (small, top of screen) */
#call-bar{
  display:none;
  position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:99997;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);
  border-radius:999px;padding:8px 18px;
  align-items:center;gap:10px;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
#call-bar.show{display:flex}
.call-bar-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  animation:call-dot-pulse 1s ease-in-out infinite;
}
@keyframes call-dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.call-bar-name{font-size:.82rem;font-weight:700;color:#fff}
.call-bar-timer{font-size:.78rem;color:rgba(255,255,255,.6);min-width:40px}
.call-bar-end{
  padding:4px 12px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(239,68,68,.8);color:#fff;font-size:.75rem;font-weight:700;
  transition:background .15s;
}
.call-bar-end:hover{background:#ef4444}

</style>
<link rel="stylesheet" href="/css/premium-cosmetics.css">
@stack('styles')
</head>
<body @auth @if(auth()->user()->entry_effect && auth()->user()->hasPerk('entry_effect'))class="entry-{{ auth()->user()->entry_effect }}"@endif @endauth>

{{-- Ambient floating orbs (CSS animated, no perf cost) --}}
<div class="amb amb-1" aria-hidden="true"></div>
<div class="amb amb-2" aria-hidden="true"></div>
<div class="amb amb-3" aria-hidden="true"></div>

{{-- Scroll progress bar --}}
<div id="scroll-progress" aria-hidden="true"></div>

{{-- Scroll to top button --}}
<button id="scroll-top" aria-label="Başa dön" title="Başa dön">
  <i class="bi bi-chevron-up"></i>
</button>

<div id="splash">
  <div class="splash-logo">ANIMEXE</div>
  <div class="splash-bar-wrap"><div class="splash-bar"></div></div>
  <div class="splash-dots"><span></span><span></span><span></span></div>
</div>

<nav id="topnav">
  <a href="{{ route('home') }}" class="nav-logo">ANIMEXE</a>

  <ul class="nav-links">
    <li><a href="{{ route('home') }}" class="{{ request()->routeIs('home') ? 'on' : '' }}">Ana Sayfa</a></li>
    <li><a href="{{ route('search') }}?type=series" class="{{ request()->is('search') && request('type')=='series' ? 'on' : '' }}">Diziler</a></li>
    <li><a href="{{ route('search') }}?type=movie" class="{{ request()->is('search') && request('type')=='movie' ? 'on' : '' }}">Filmler</a></li>
    <li><a href="{{ route('blog.index') }}" class="{{ request()->routeIs('blog.*') ? 'on' : '' }}"><i class="bi bi-journal-richtext" style="margin-right:4px"></i>Blog</a></li>
    <li><a href="{{ route('anime.request') }}" class="{{ request()->routeIs('anime.request*') ? 'on' : '' }}"><i class="bi bi-plus-circle" style="margin-right:4px"></i>İstek</a></li>
    <li><a href="{{ route('tribunal.index') }}" class="{{ request()->routeIs('tribunal.*') ? 'on' : '' }}" style="color:#ff9f0a;border-color:rgba(255,159,10,.2)"><i class="bi bi-balance" style="margin-right:4px"></i>Mahkeme</a></li>
    <li><a href="{{ route('premium.plans') }}" class="{{ request()->routeIs('premium.*') ? 'on' : '' }}" style="color:#ffd700;border-color:rgba(255,215,0,.2)"><i class="bi bi-stars" style="margin-right:4px"></i>Premium</a></li>
    @php $navShowMessages = \App\Models\Setting::get('nav_show_messages', '1'); @endphp
    @if($navShowMessages)
    <li><a href="{{ route('messages.index') }}" class="{{ request()->routeIs('messages.*') ? 'on' : '' }}" style="color:var(--accent2);border-color:rgba(0,245,255,.2)"><i class="bi bi-chat-dots" style="margin-right:4px"></i>Mesajlar @auth @if($unreadMsgCount??0)<span style="background:var(--accent2);color:#05050e;border-radius:8px;padding:0 5px;font-size:.6rem;font-weight:800;margin-left:2px">{{ $unreadMsgCount }}</span>@endif @endauth</a></li>
    @else
    <li><a href="{{ route('ai.index') }}" class="{{ request()->routeIs('ai.*') ? 'on' : '' }}" style="color:var(--accent3);border-color:rgba(184,77,255,.3)"><i class="bi bi-stars" style="margin-right:4px"></i>AI @guest<i class="bi bi-lock-fill" style="font-size:.6rem;opacity:.7"></i>@endguest</a></li>
    @endif
  </ul>

  <div class="nav-search">
    <form action="{{ route('search') }}" method="GET" class="ns-form" id="ns-form">
      <i class="bi bi-search ns-icon"></i>
      <input type="text" name="q" id="ns-input" placeholder="Anime ara..." value="{{ request('q') }}" autocomplete="off">
      <div class="ns-ac" id="ns-ac" role="listbox"></div>
    </form>
  </div>

  <div class="nav-auth">
    @auth
    @php
      $unreadNotifCount = \App\Models\UserNotification::where('user_id', auth()->id())->whereNull('read_at')->count();
      $unreadMsgCount = 0;
      try {
        foreach(auth()->user()->conversations()->with('messages')->get() as $_conv) {
          $unreadMsgCount += $_conv->unreadCountFor(auth()->id());
        }
      } catch(\Throwable $e) {}
    @endphp
    <button class="nav-bell" id="cp-nav-btn" onclick="chatPanelToggle()" title="Mesajlar" style="background:none;border:none;cursor:pointer;position:relative">
      <i class="bi bi-chat-dots{{ $unreadMsgCount ? '-fill' : '' }}" id="cp-nav-icon"></i>
      <span class="bell-badge" id="cp-nav-badge" style="{{ $unreadMsgCount ? '' : 'display:none' }}">{{ $unreadMsgCount > 9 ? '9+' : $unreadMsgCount }}</span>
    </button>
    <a href="{{ route('notifications') }}" class="nav-bell" title="Bildirimler">
      <i class="bi bi-bell{{ $unreadNotifCount ? '-fill' : '' }}"></i>
      @if($unreadNotifCount)<span class="bell-badge">{{ $unreadNotifCount > 9 ? '9+' : $unreadNotifCount }}</span>@endif
    </a>
    <div class="nav-user">
      <div class="nav-avatar">{{ mb_substr(auth()->user()->name,0,1) }}</div>
      <span class="nav-user-name d-none d-md-block">{{ auth()->user()->name }}</span>
      <div class="nav-dropdown">
        <a href="{{ route('profile') }}"><i class="bi bi-person"></i> Profilim</a>
        <a href="{{ route('messages.index') }}"><i class="bi bi-chat-dots"></i> Mesajlar @if($unreadMsgCount)<span style="background:var(--accent2);color:#05050e;border-radius:10px;padding:1px 6px;font-size:.65rem;margin-left:4px">{{ $unreadMsgCount }}</span>@endif</a>
        <a href="{{ route('notifications') }}"><i class="bi bi-bell"></i> Bildirimler @if($unreadNotifCount)<span style="background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:.65rem;margin-left:4px">{{ $unreadNotifCount }}</span>@endif</a>
        <a href="{{ route('capsules.index') }}"><i class="bi bi-hourglass-split"></i> Kapsüllerim</a>
        @if(auth()->user()->isPremium())
        <a href="{{ route('profile.settings') }}" style="color:#ffd700"><i class="bi bi-stars"></i> Kozmetik Ayarları</a>
        @else
        <a href="{{ route('premium.plans') }}" style="color:#ffd700"><i class="bi bi-stars"></i> Premium'a Geç ✨</a>
        @endif
        @if(auth()->user()->role === 'admin')
        <a href="{{ route('admin.dashboard') }}"><i class="bi bi-speedometer2"></i> Admin Panel</a>
        @endif
        <div class="sep"></div>
        <form action="{{ route('frontend.logout') }}" method="POST" style="display:block">
          @csrf
          <button type="submit"><i class="bi bi-box-arrow-right"></i> Çıkış Yap</button>
        </form>
      </div>
    </div>
    @else
    <a href="{{ route('frontend.login') }}" class="btn-ghost">Giriş Yap</a>
    <a href="{{ route('frontend.register') }}" class="btn-solid">Üye Ol</a>
    @endauth
  </div>

  <button class="nav-ham" id="ham-btn"><i class="bi bi-list"></i></button>
</nav>

<div id="mob-menu">
  @auth
  <div class="mob-user-block">
    <div class="mob-user-ava">{{ mb_substr(auth()->user()->name,0,1) }}</div>
    <div class="mob-user-info">
      <div class="mob-user-name">{{ auth()->user()->name }}</div>
      <div class="mob-user-tier">{{ auth()->user()->isPremium() ? '⭐ Premium Üye' : 'Standart Üye' }}</div>
    </div>
  </div>
  @endauth

  <div class="mob-search">
    <i class="bi bi-search ns-icon"></i>
    <form action="{{ route('search') }}" method="GET">
      <input type="text" name="q" placeholder="Anime ara..." value="{{ request('q') }}">
    </form>
  </div>

  <div class="mob-nav-links">
    <a href="{{ route('home') }}"><i class="bi bi-house"></i> Ana Sayfa</a>
    <a href="{{ route('search') }}?type=series"><i class="bi bi-tv"></i> Anime Diziler</a>
    <a href="{{ route('search') }}?type=movie"><i class="bi bi-film"></i> Anime Filmler</a>
    <a href="{{ route('search') }}"><i class="bi bi-grid"></i> Tüm Animeler</a>
    <a href="{{ route('blog.index') }}"><i class="bi bi-journal-richtext"></i> Blog</a>
    <a href="{{ route('anime.request') }}"><i class="bi bi-plus-circle"></i> Anime İsteği</a>
    <a href="{{ route('premium.plans') }}" style="color:#ffd700"><i class="bi bi-stars"></i> Premium</a>
    @if($navShowMessages ?? \App\Models\Setting::getValue('nav_show_messages','1'))
    <a href="{{ route('messages.index') }}" style="color:var(--accent2)"><i class="bi bi-chat-dots"></i> Mesajlar @auth @if($unreadMsgCount??0)<span style="background:var(--accent2);color:#05050e;border-radius:8px;padding:0 5px;font-size:.6rem;font-weight:800;margin-left:2px">{{ $unreadMsgCount }}</span>@endif @endauth</a>
    @else
    <a href="{{ route('ai.index') }}" style="color:var(--accent3)"><i class="bi bi-stars"></i> AI Asistan @guest<i class="bi bi-lock-fill" style="font-size:.65rem;opacity:.7"></i>@endguest</a>
    @endif
  </div>

  @auth
  <div class="mob-divider"></div>
  <div class="mob-nav-links">
    <a href="{{ route('profile') }}"><i class="bi bi-person-circle"></i> Profilim</a>
    <a href="{{ route('messages.index') }}"><i class="bi bi-chat-dots"></i> Mesajlar @if($unreadMsgCount ?? 0)<span style="background:var(--accent2);color:#05050e;border-radius:10px;padding:1px 7px;font-size:.65rem;margin-left:4px">{{ $unreadMsgCount }}</span>@endif</a>
    <a href="{{ route('notifications') }}"><i class="bi bi-bell"></i> Bildirimler @if($unreadNotifCount ?? 0)<span style="background:var(--accent);color:#fff;border-radius:10px;padding:1px 7px;font-size:.65rem;margin-left:4px">{{ $unreadNotifCount }}</span>@endif</a>
    @if(auth()->user()->role==='admin')
    <a href="{{ route('admin.dashboard') }}" style="color:var(--accent2)"><i class="bi bi-speedometer2"></i> Admin Panel</a>
    @endif
    <form action="{{ route('frontend.logout') }}" method="POST" style="display:block">
      @csrf
      <button type="submit" style="width:100%;text-align:left;padding:12px 16px;border-radius:var(--r);background:none;border:none;color:rgba(255,90,90,.85);font-weight:600;font-family:inherit;cursor:pointer;font-size:inherit;display:flex;align-items:center;gap:10px"><i class="bi bi-box-arrow-right" style="width:18px;text-align:center;opacity:.7"></i> Çıkış Yap</button>
    </form>
  </div>
  @else
  <div class="mob-auth">
    <a href="{{ route('frontend.login') }}" class="login"><i class="bi bi-box-arrow-in-right"></i> Giriş Yap</a>
    <a href="{{ route('frontend.register') }}" class="reg"><i class="bi bi-person-plus"></i> Üye Ol</a>
  </div>
  @endauth
</div>

{{-- ═══════════════════════════════════════════════════════
   MOBİL ALT NAVİGASYON ÇUBUĞU (90% mobil ziyaretçi)
════════════════════════════════════════════════════════ --}}
<nav id="mob-bottom-nav" aria-label="Alt Navigasyon">
  <ul class="mbn-list">
    <li>
      <a href="{{ route('home') }}"
         class="mbn-a {{ request()->routeIs('home') ? 'on' : '' }}"
         aria-label="Ana Sayfa">
        <i class="bi bi-house{{ request()->routeIs('home') ? '-fill' : '' }}"></i>
        <span>Anasayfa</span>
      </a>
    </li>
    <li>
      <a href="{{ route('search') }}"
         class="mbn-a {{ request()->routeIs('search') && !request('type') ? 'on' : '' }}"
         aria-label="Keşfet">
        <i class="bi bi-compass{{ request()->routeIs('search') && !request('type') ? '-fill' : '' }}"></i>
        <span>Keşfet</span>
      </a>
    </li>
    <li>
      <a href="{{ route('search') }}?type=series"
         class="mbn-a {{ request()->routeIs('search') && request('type')==='series' ? 'on' : '' }}"
         aria-label="Diziler">
        <i class="bi bi-play-circle{{ request()->routeIs('search') && request('type')==='series' ? '-fill' : '' }}"></i>
        <span>Diziler</span>
      </a>
    </li>
    <li>
      @auth
      <button onclick="chatPanelToggle()"
         class="mbn-a mbn-chat {{ request()->routeIs('messages.*') ? 'on' : '' }}"
         aria-label="Mesajlar" style="background:none;border:none;width:100%;position:relative">
        <i class="bi bi-chat-dots{{ ($unreadMsgCount??0) ? '-fill' : '' }}"></i>
        @if($unreadMsgCount??0)<span class="mbn-chat-badge">{{ ($unreadMsgCount??0) > 9 ? '9+' : ($unreadMsgCount??0) }}</span>@endif
        <span>Chat</span>
      </button>
      @else
      <a href="{{ route('ai.index') }}"
         class="mbn-a mbn-ai {{ request()->routeIs('ai.*') ? 'on' : '' }}"
         aria-label="AI Asistan">
        <i class="bi bi-stars"></i>
        <span>AI</span>
      </a>
      @endauth
    </li>
    <li>
      @auth
      <a href="{{ route('profile') }}"
         class="mbn-a {{ request()->routeIs('profile*') ? 'on' : '' }}"
         aria-label="Profilim">
        <i class="bi bi-person{{ request()->routeIs('profile*') ? '-fill' : '' }}"></i>
        <span>Profil</span>
      </a>
      @else
      <a href="{{ route('frontend.register') }}"
         class="mbn-a {{ request()->routeIs('frontend.register') ? 'on' : '' }}"
         aria-label="Üye Ol">
        <i class="bi bi-person-plus{{ request()->routeIs('frontend.register') ? '-fill' : '' }}"></i>
        <span>Üye Ol</span>
      </a>
      @endauth
    </li>
  </ul>
</nav>

{{-- ════════════════════════════════════════════════════
     CHAT PANEL (site genelinde erişilebilir)
════════════════════════════════════════════════════ --}}
<div id="cp-backdrop" onclick="chatPanelClose()"></div>
<div id="chat-panel">

  {{-- Konuşma listesi --}}
  <div id="cp-list">
    <div class="cp-hdr">
      <span class="cp-hdr-title"><i class="bi bi-chat-dots-fill" style="color:var(--accent2);margin-right:8px"></i>Mesajlar</span>
      <a href="{{ route('messages.index') }}" class="cp-hdr-close" title="Tam sayfa aç" style="text-decoration:none;font-size:.8rem">
        <i class="bi bi-box-arrow-up-right"></i>
      </a>
      <button class="cp-hdr-close" onclick="chatPanelClose()" title="Kapat">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <div id="cp-convs">
      <div class="cp-loading"><i class="bi bi-hourglass" style="font-size:1.2rem;display:block;margin-bottom:6px;opacity:.3"></i>Yükleniyor…</div>
    </div>
    <a href="{{ route('messages.index') }}" class="cp-new-btn">
      <i class="bi bi-plus-circle"></i> Tüm Mesajlar / Yeni Sohbet
    </a>
  </div>

  {{-- Sohbet ekranı --}}
  <div id="cp-thread">
    <div class="cp-hdr">
      <button class="cp-hdr-back" onclick="cpShowList()"><i class="bi bi-arrow-left"></i></button>
      <div class="cp-hdr-ava" id="cp-t-ava"></div>
      <div style="flex:1;min-width:0">
        <div class="cp-hdr-name" id="cp-t-name"></div>
      </div>
      @auth
      <button class="cp-hdr-call" id="cp-t-call-btn" onclick="cpStartCall()" title="Sesli ara">
        <i class="bi bi-telephone-fill"></i>
      </button>
      @endauth
      <a id="cp-t-fulllink" href="#" class="cp-hdr-close" style="text-decoration:none;font-size:.8rem" title="Tam sayfada aç">
        <i class="bi bi-box-arrow-up-right"></i>
      </a>
      <button class="cp-hdr-close" onclick="chatPanelClose()"><i class="bi bi-x-lg"></i></button>
    </div>
    <div id="cp-msgs"></div>
    <div id="cp-input-wrap">
      {{-- Emoji picker (desktop only) --}}
      <div id="cp-emoji-picker"></div>
      {{-- GIF picker --}}
      <div id="cp-gif-picker">
        <input type="text" class="cp-gif-search" id="cp-gif-input" placeholder="GIF ara…">
        <div class="cp-gif-grid" id="cp-gif-grid">
          <div class="cp-gif-placeholder">GIF aramak için yazmaya başla</div>
        </div>
      </div>
      {{-- Toolbar: only desktop emoji + both gif/image --}}
      <div class="cp-toolbar">
        <button class="cp-tool-btn" id="cp-emoji-btn" onclick="cpToggleEmoji()" title="Emoji" style="display:none">
          <i class="bi bi-emoji-smile"></i>
        </button>
        <button class="cp-tool-btn" id="cp-gif-btn" onclick="cpToggleGif()" title="GIF">
          <span style="font-size:.65rem;font-weight:800;letter-spacing:.03em">GIF</span>
        </button>
        <label class="cp-tool-btn" title="Resim gönder" style="cursor:pointer">
          <i class="bi bi-image"></i>
          <input type="file" id="cp-img-input" accept="image/*" style="display:none" onchange="cpSendImage(this)">
        </label>
        <div style="flex:1"></div>
      </div>
      <div class="cp-form">
        <textarea id="cp-textarea" placeholder="Mesaj yaz…" rows="1" maxlength="2000"></textarea>
        <button id="cp-send-btn" onclick="cpSend()"><i class="bi bi-send-fill"></i></button>
      </div>
    </div>
  </div>

</div>

{{-- ═══ INCOMING CALL OVERLAY ════════════════════════════════════════════════ --}}
<div id="call-overlay">
  <div class="call-ava" id="call-ava-el"></div>
  <div class="call-name" id="call-name-el"></div>
  <div class="call-status" id="call-status-el">Sesli arama…</div>
  <div class="call-btns" id="call-btns-el">
    <button class="call-btn call-btn-decline" onclick="vcDecline()" title="Reddet">
      <i class="bi bi-telephone-x-fill"></i>
    </button>
    <button class="call-btn call-btn-accept" onclick="vcAnswer()" title="Kabul et">
      <i class="bi bi-telephone-fill"></i>
    </button>
  </div>
</div>

{{-- Active call bar --}}
<div id="call-bar">
  <div class="call-bar-dot"></div>
  <span class="call-bar-name" id="call-bar-name"></span>
  <span class="call-bar-timer" id="call-bar-timer">00:00</span>
  <button class="call-bar-end" onclick="vcEnd()">Kapat</button>
</div>


<div id="page-content">@yield('content')</div>

<footer>
  <div class="footer-in">
    <div class="footer-brand">
      <div class="logo">ANIMEXE</div>
      <p>Türkçe altyazılı ve dublajlı anime topluluğu platformu. Tüm içerikler üçüncü taraf kaynaklara aittir.</p>
    </div>
    <div class="footer-col">
      <h5>Keşfet</h5>
      <ul>
        <li><a href="{{ route('search') }}?type=series">Anime Diziler</a></li>
        <li><a href="{{ route('search') }}?type=movie">Anime Filmler</a></li>
        <li><a href="{{ route('search') }}?status=ongoing">Devam Edenler</a></li>
        <li><a href="{{ route('search') }}?status=completed">Tamamlananlar</a></li>
        <li><a href="{{ route('blog.index') }}">Anime Blog</a></li>
        <li><a href="{{ route('tribunal.index') }}">Anime Mahkemesi</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h5>Hesap</h5>
      <ul>
        @guest
        <li><a href="{{ route('frontend.login') }}">Giriş Yap</a></li>
        <li><a href="{{ route('frontend.register') }}">Üye Ol</a></li>
        @else
        <li><a href="{{ route('profile') }}">Profilim</a></li>
        @endguest
      </ul>
    </div>
    <div class="footer-col">
      <h5>Yasal</h5>
      <ul>
        <li><a href="{{ route('legal.terms') }}">Kullanım Koşulları</a></li>
        <li><a href="{{ route('legal.privacy') }}">Gizlilik Politikası</a></li>
        <li><a href="{{ route('legal.dmca') }}">Telif Hakkı & DMCA</a></li>
        <li><a href="mailto:iletisim@animexe.com">İletişim</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <span>&copy; {{ date('Y') }} Animexe — Tüm hakları saklıdır. Platform yalnızca teknik aracı konumundadır; içerikler ilgili hak sahiplerine aittir.</span>
    <span style="display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end">
      <a href="{{ route('legal.terms') }}" style="color:inherit;opacity:.6;font-size:.78rem">Kullanım Koşulları</a>
      <a href="{{ route('legal.privacy') }}" style="color:inherit;opacity:.6;font-size:.78rem">Gizlilik</a>
      <a href="{{ route('legal.dmca') }}" style="color:inherit;opacity:.6;font-size:.78rem">DMCA</a>
    </span>
  </div>
</footer>

<script>
document.getElementById('ham-btn').addEventListener('click',()=>{
  document.getElementById('mob-menu').classList.toggle('open');
});
</script>
@stack('scripts')

{{-- ── Search Autocomplete ──────────────────────────────────────────────────── --}}
<script>
(function() {
  const input  = document.getElementById('ns-input');
  const ac     = document.getElementById('ns-ac');
  if (!input || !ac) return;

  let timer, focusIdx = -1, lastQ = '';

  function typeLabel(type) {
    return type === 'series' ? 'Dizi' : type === 'movie' ? 'Film' : 'OVA';
  }

  function render(results, q) {
    if (!results.length) { ac.classList.remove('show'); return; }
    const hl = (txt) => txt ? txt.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&') + ')', 'gi'), '<mark style="background:transparent;color:var(--accent2)">$1</mark>') : '';
    ac.innerHTML = results.map((r, i) =>
      `<a href="/anime/${r.slug}" class="ns-ac-item" data-idx="${i}" role="option">
        ${r.cover
          ? `<img src="${r.cover}" alt="${r.title}" loading="lazy">`
          : `<div class="ns-ac-ph"><i class="bi bi-film" style="color:var(--text3)"></i></div>`
        }
        <div class="ns-ac-info">
          <div class="ns-ac-title">${hl(r.title)}</div>
          <div class="ns-ac-meta">${r.title_en ? hl(r.title_en) + ' · ' : ''}${r.year ?? ''}${r.episodes ? ' · ' + r.episodes + ' Bölüm' : ''}</div>
        </div>
        ${r.type ? `<span class="ns-ac-type">${typeLabel(r.type)}</span>` : ''}
      </a>`
    ).join('') +
    `<a href="/search?q=${encodeURIComponent(q)}" class="ns-ac-all">Tüm sonuçları gör için →</a>`;
    focusIdx = -1;
    ac.classList.add('show');
  }

  function moveFocus(dir) {
    const items = ac.querySelectorAll('.ns-ac-item');
    if (!items.length) return;
    items.forEach(el => el.classList.remove('focused'));
    focusIdx = (focusIdx + dir + items.length + 1) % (items.length + 1) - 1;
    if (focusIdx >= 0) items[focusIdx].classList.add('focused');
  }

  input.addEventListener('input', () => {
    const q = input.value.trim();
    if (q === lastQ) return;
    lastQ = q;
    clearTimeout(timer);
    if (q.length < 2) { ac.classList.remove('show'); return; }
    timer = setTimeout(async () => {
      try {
        const res = await fetch(`/search/suggest?q=${encodeURIComponent(q)}`);
        const data = await res.json();
        if (input.value.trim() === q) render(data.results || [], q);
      } catch (_) {}
    }, 220);
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown')  { e.preventDefault(); moveFocus(1); }
    if (e.key === 'ArrowUp')    { e.preventDefault(); moveFocus(-1); }
    if (e.key === 'Escape')     { ac.classList.remove('show'); focusIdx = -1; }
    if (e.key === 'Enter' && focusIdx >= 0) {
      e.preventDefault();
      const item = ac.querySelectorAll('.ns-ac-item')[focusIdx];
      if (item) window.location.href = item.href;
    }
  });

  document.addEventListener('click', (e) => {
    if (!(e.target instanceof Node)) return;
    if (!input.contains(e.target) && !ac.contains(e.target)) ac.classList.remove('show');
  });

  input.addEventListener('focus', () => {
    if (input.value.trim().length >= 2 && ac.children.length) ac.classList.add('show');
  });
})();
</script>

@auth
{{-- ── Floating AI Chat Widget ─────────────────────────────────── --}}
<style>
#ai-fab{
  position:fixed;bottom:24px;right:24px;z-index:900;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent3),var(--accent));
  color:#fff;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(184,77,255,.5),0 4px 20px rgba(184,77,255,.4);
  animation:ai-pulse 2.8s infinite;
  transition:transform .18s,box-shadow .18s;
}
#ai-fab:hover{transform:scale(1.08);box-shadow:0 0 32px rgba(184,77,255,.55),0 6px 24px rgba(255,45,125,.3)}
@keyframes ai-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,77,255,.4),0 4px 20px rgba(184,77,255,.4)}
  50%{box-shadow:0 0 0 10px rgba(184,77,255,0),0 4px 20px rgba(184,77,255,.4)}
}
#ai-panel{
  position:fixed;bottom:92px;right:24px;z-index:899;
  width:min(400px, calc(100vw - 32px));
  background:linear-gradient(160deg,rgba(10,10,22,.99),rgba(6,6,16,.99));
  border:1px solid rgba(184,77,255,.35);border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 60px rgba(184,77,255,.1);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .22s cubic-bezier(.22,1,.36,1);
  height:min(560px, calc(100dvh - 120px));
}
#ai-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.aip-head{
  padding:13px 16px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(184,77,255,.18),rgba(255,45,125,.1));
  border-bottom:1px solid rgba(184,77,255,.2);flex-shrink:0;
}
.aip-head-icon{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent3),var(--accent));
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;
  box-shadow:0 0 14px rgba(184,77,255,.5);flex-shrink:0;
}
.aip-head-info{flex:1;min-width:0}
.aip-head-title{font-size:.88rem;font-weight:700;color:var(--text);letter-spacing:.03em}
.aip-head-sub{font-size:.7rem;color:var(--text3);margin-top:1px;display:flex;align-items:center;gap:5px}
.aip-online-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 6px #22c55e}
.aip-head-actions{display:flex;gap:4px;flex-shrink:0}
.aip-close,.aip-clear{background:none;border:none;color:var(--text3);font-size:1rem;cursor:pointer;padding:5px 6px;border-radius:7px;transition:all .14s}
.aip-close:hover,.aip-clear:hover{color:var(--text);background:rgba(255,255,255,.07)}
.aip-msgs{
  flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(184,77,255,.25) transparent;
  min-height:0;
}
.aip-msgs::-webkit-scrollbar{width:3px}
.aip-msgs::-webkit-scrollbar-thumb{background:rgba(184,77,255,.3);border-radius:3px}
.aip-msg-wrap{display:flex;flex-direction:column;gap:6px;max-width:92%}
.aip-msg-wrap.ai{align-self:flex-start}
.aip-msg-wrap.user{align-self:flex-end;align-items:flex-end}
.aip-msg{font-size:.84rem;line-height:1.6;padding:10px 13px;border-radius:14px;word-break:break-word}
.aip-msg.ai{
  background:linear-gradient(135deg,rgba(184,77,255,.14),rgba(0,245,255,.07));
  border:1px solid rgba(184,77,255,.22);color:var(--text);border-bottom-left-radius:4px;
}
.aip-msg.user{
  background:linear-gradient(135deg,rgba(255,45,125,.2),rgba(184,77,255,.14));
  border:1px solid rgba(255,45,125,.28);color:var(--text);border-bottom-right-radius:4px;
}
/* Markdown inside ai bubble */
.aip-msg.ai b,.aip-msg.ai strong{color:#e2d3ff;font-weight:700}
.aip-msg.ai em,.aip-msg.ai i{color:var(--text2);font-style:italic}
.aip-msg.ai ul{margin:6px 0 2px 16px;padding:0;list-style:disc}
.aip-msg.ai ol{margin:6px 0 2px 20px;padding:0}
.aip-msg.ai li{margin-bottom:3px}
.aip-msg.ai p{margin:0 0 6px}
.aip-msg.ai p:last-child{margin-bottom:0}
/* Anime öneri kartları */
.aip-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:2px 0}
.aip-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(184,77,255,.15);
  border-radius:10px;overflow:hidden;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;transition:all .18s;
}
.aip-card:hover{border-color:rgba(255,45,125,.4);background:rgba(255,45,125,.06);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.aip-card-img{position:relative;aspect-ratio:2/3;background:#0d0d1a;overflow:hidden}
.aip-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.aip-card:hover .aip-card-img img{transform:scale(1.05)}
.aip-card-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.15);font-size:1.6rem}
.aip-card-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);border-radius:5px;padding:2px 6px;font-size:.62rem;font-weight:700;color:rgba(255,255,255,.9)}
.aip-card-body{padding:7px 8px;flex:1}
.aip-card-title{font-size:.75rem;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.aip-card-meta{font-size:.67rem;color:var(--text3);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.aip-card-rating{color:#f59e0b;font-weight:700}
.aip-card-btns{display:flex;gap:4px;padding:0 7px 7px}
.aip-card-btn{flex:1;padding:5px 0;border-radius:7px;border:none;cursor:pointer;font-size:.7rem;font-weight:700;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:3px;transition:all .14s}
.aip-card-btn.watch{background:linear-gradient(135deg,var(--accent3),var(--accent));color:#fff}
.aip-card-btn.detail{background:rgba(255,255,255,.07);color:var(--text2);border:1px solid rgba(255,255,255,.1)}
.aip-card-btn:hover{opacity:.85}
/* Follow-up chips */
.aip-followup{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0}
.aip-fu{
  padding:5px 10px;border-radius:999px;font-size:.73rem;font-weight:600;cursor:pointer;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.2);color:var(--accent2);
  transition:all .14s;white-space:nowrap;
}
.aip-fu:hover{background:rgba(0,245,255,.12);box-shadow:0 0 10px rgba(0,245,255,.15)}
/* Typing */
.aip-typing{display:flex;gap:4px;padding:10px 13px;align-self:flex-start;background:rgba(184,77,255,.08);border:1px solid rgba(184,77,255,.15);border-radius:14px;border-bottom-left-radius:4px}
.aip-dot{width:6px;height:6px;border-radius:50%;background:var(--accent3);animation:aip-b .9s ease-in-out infinite}
.aip-dot:nth-child(2){animation-delay:.18s;background:var(--accent)}
.aip-dot:nth-child(3){animation-delay:.36s;background:var(--accent2)}
@keyframes aip-b{0%,80%,100%{transform:scale(.55);opacity:.35}40%{transform:scale(1);opacity:1}}
/* Quick actions */
.aip-quick{padding:0 12px 10px;display:flex;flex-wrap:wrap;gap:5px;flex-shrink:0}
.aip-q{
  padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:600;cursor:pointer;
  background:rgba(184,77,255,.1);border:1px solid rgba(184,77,255,.22);color:var(--accent3);
  transition:all .14s;
}
.aip-q:hover{background:rgba(184,77,255,.2);border-color:var(--accent3);box-shadow:0 0 12px rgba(184,77,255,.18)}
/* Page context badge */
.aip-ctx-badge{
  margin:0 12px 6px;padding:6px 10px;border-radius:8px;font-size:.72rem;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.18);color:var(--accent2);
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
/* Footer */
.aip-foot{
  padding:10px 12px;display:flex;gap:8px;align-items:flex-end;
  border-top:1px solid rgba(184,77,255,.12);flex-shrink:0;
  background:rgba(0,0,0,.2);
}
#ai-inp{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(184,77,255,.22);
  border-radius:10px;padding:9px 12px;color:var(--text);font-size:.84rem;
  font-family:inherit;resize:none;max-height:100px;outline:none;line-height:1.45;
  transition:border-color .16s;scrollbar-width:none;
}
#ai-inp:focus{border-color:var(--accent3);box-shadow:0 0 0 2px rgba(184,77,255,.13)}
#ai-inp::placeholder{color:var(--text3)}
#ai-send{
  width:38px;height:38px;border-radius:10px;border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent3),var(--accent));color:#fff;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s,box-shadow .16s;box-shadow:0 0 14px rgba(184,77,255,.3);
}
#ai-send:hover{transform:scale(1.06);box-shadow:0 0 22px rgba(184,77,255,.5)}
#ai-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
@media(max-width:600px){
  #ai-fab{bottom:16px;right:16px;width:52px;height:52px}
  #ai-panel{
    bottom:80px;right:8px;left:8px;width:auto;
    height:min(480px, calc(100dvh - 100px));
    border-radius:16px;
  }
}
</style>
<div id="ai-fab" title="AI Asistan" onclick="toggleAiPanel()">
  <i class="bi bi-stars"></i>
</div>
<div id="ai-panel">
  <div class="aip-head">
    <div class="aip-head-icon"><i class="bi bi-cpu-fill"></i></div>
    <div class="aip-head-info">
      <div class="aip-head-title">Animexe AI</div>
      <div class="aip-head-sub"><span class="aip-online-dot"></span> Aktif &amp; hazır</div>
    </div>
    <div class="aip-head-actions">
      <button class="aip-clear" onclick="aiClearChat()" title="Sohbeti temizle"><i class="bi bi-arrow-counterclockwise"></i></button>
      <button class="aip-close" onclick="toggleAiPanel()" title="Kapat"><i class="bi bi-x-lg"></i></button>
    </div>
  </div>
  <div id="aip-ctx-badge" class="aip-ctx-badge" style="display:none">
    <i class="bi bi-eye-fill"></i><span id="aip-ctx-text"></span>
  </div>
  <div class="aip-msgs" id="aip-msgs">
    <div class="aip-msg-wrap ai">
      <div class="aip-msg ai">Merhaba! 👋 Anime önerisi isteyebilir, site hakkında sorular sorabilir ya da izlediğin bölüm hakkında konuşabiliriz. Nasıl yardımcı olabilirim?</div>
    </div>
  </div>
  <div class="aip-quick" id="aip-quick">
    <button class="aip-q" onclick="aiQuick('Şu an ne izlesem?')">🎯 Ne izlesem?</button>
    <button class="aip-q" onclick="aiQuick('Aksiyon anime öner')">⚔️ Aksiyon</button>
    <button class="aip-q" onclick="aiQuick('Romantik anime film öner')">🌸 Romantik film</button>
    <button class="aip-q" onclick="aiQuick('Nasıl üye olabilirim?')">❓ Site yardımı</button>
    <button class="aip-q" onclick="aiQuick('2024\'te çıkan en iyi animeler?')">✨ 2024 animeleri</button>
  </div>
  <div class="aip-foot">
    <textarea id="ai-inp" rows="1" placeholder="Mesaj yaz..." onkeydown="aiKeydown(event)" oninput="autoGrow(this)"></textarea>
    <button id="ai-send" onclick="aiSend()"><i class="bi bi-send-fill"></i></button>
  </div>
</div>
<script>
(function(){
  const CSRF = document.querySelector('meta[name=csrf-token]').content;
  let aiOpen = false, aiLoading = false;

  // Mesaj geçmişi (sistem mesajları dahil)
  const _ctx = window.USER_WATCH_CTX;
  const aiMsgs = _ctx
    ? [{role:'user', content:`[SİSTEM: Kullanıcının son izledikleri: ${_ctx}. Sadece bağlam için kullan, listeyi gösterme.]`},
       {role:'assistant', content:'Anlıyorum, izleme geçmişinizi bağlam olarak kaydettim.'}]
    : [];

  // Sayfa bağlamını belirle
  function getPageContext(){
    const p = location.pathname;
    const animeTitle = document.querySelector('meta[name="anime-title"]')?.content;
    const epNum = document.querySelector('meta[name="episode-number"]')?.content;
    const seasonNum = document.querySelector('meta[name="season-number"]')?.content;
    if(p.startsWith('/watch/') && animeTitle){
      return `${animeTitle} adlı animeyi izliyor — S${seasonNum||1}E${epNum||1}`;
    }
    if(p.startsWith('/anime/') && animeTitle){
      return `${animeTitle} anime sayfasında`;
    }
    return '';
  }

  // Sayfa bağlamı badge'ini göster
  const pageCtx = getPageContext();
  if(pageCtx){
    document.getElementById('aip-ctx-badge').style.display = 'flex';
    document.getElementById('aip-ctx-text').textContent = pageCtx;
  }

  // Basit markdown renderer
  function renderMarkdown(text){
    // Başında/sonunda boşlukları temizle
    text = text.trim();
    // Satırları işle
    const lines = text.split('\n');
    const out = [];
    let inList = false, listTag = '';

    function closeList(){
      if(inList){ out.push(`</${listTag}>`); inList=false; listTag=''; }
    }

    for(let i=0; i<lines.length; i++){
      let ln = lines[i];
      // Unordered list
      if(/^[\-\*] (.+)/.test(ln)){
        if(!inList || listTag!=='ul'){ closeList(); out.push('<ul>'); inList=true; listTag='ul'; }
        out.push('<li>'+inlineMd(ln.replace(/^[\-\*] /,''))+'</li>');
      // Ordered list
      } else if(/^\d+\. (.+)/.test(ln)){
        if(!inList || listTag!=='ol'){ closeList(); out.push('<ol>'); inList=true; listTag='ol'; }
        out.push('<li>'+inlineMd(ln.replace(/^\d+\. /,''))+'</li>');
      } else {
        closeList();
        if(ln.trim()===''){
          // blank line → paragraph break
          if(out.length && !out[out.length-1].endsWith('<br>')){
            out.push('<br>');
          }
        } else {
          out.push('<p>'+inlineMd(ln)+'</p>');
        }
      }
    }
    closeList();
    return out.join('');
  }

  function inlineMd(s){
    s = s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    // Bold
    s = s.replace(/\*\*(.+?)\*\*/g,'<b>$1</b>');
    // Italic
    s = s.replace(/\*(.+?)\*/g,'<em>$1</em>');
    // Inline code
    s = s.replace(/`([^`]+)`/g,'<code style="background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:.82em">$1</code>');
    return s;
  }

  function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  function appendMsg(role, html, isHtml){
    const wrap = document.createElement('div');
    wrap.className = 'aip-msg-wrap '+role;
    const el = document.createElement('div');
    el.className = 'aip-msg '+role;
    if(isHtml) el.innerHTML = html;
    else el.textContent = html;
    wrap.appendChild(el);
    document.getElementById('aip-msgs').appendChild(wrap);
    el.scrollIntoView({behavior:'smooth', block:'end'});
    return wrap;
  }

  function appendAnimeCards(cards){
    if(!cards || !cards.length) return;
    const wrap = document.createElement('div');
    wrap.className = 'aip-msg-wrap ai';
    const grid = document.createElement('div');
    grid.className = 'aip-cards';
    cards.forEach(a=>{
      const typeLabel = a.type==='movie' ? 'Film' : (a.type==='ova' ? 'OVA' : 'Dizi');
      const ratingHtml = a.rating ? `<span class="aip-card-rating">★${parseFloat(a.rating).toFixed(1)}</span>` : '';
      grid.innerHTML += `
        <div class="aip-card">
          <div class="aip-card-img">
            ${a.cover
              ? `<img src="${esc(a.cover)}" alt="${esc(a.title)}" loading="lazy">`
              : `<div class="aip-card-img-ph"><i class="bi bi-image"></i></div>`}
            <div class="aip-card-badge">${esc(typeLabel)}</div>
          </div>
          <div class="aip-card-body">
            <div class="aip-card-title">${esc(a.title)}</div>
            <div class="aip-card-meta">
              ${ratingHtml}
              ${a.genres ? `<span>${esc(a.genres)}</span>` : ''}
            </div>
          </div>
          <div class="aip-card-btns">
            <a class="aip-card-btn watch" href="/watch/${esc(a.slug)}/1/1"><i class="bi bi-play-fill"></i>İzle</a>
            <a class="aip-card-btn detail" href="/anime/${esc(a.slug)}"><i class="bi bi-info-circle"></i>Detay</a>
          </div>
        </div>`;
    });
    wrap.appendChild(grid);
    document.getElementById('aip-msgs').appendChild(wrap);
    grid.scrollIntoView({behavior:'smooth', block:'end'});
  }

  function appendFollowUps(chips){
    if(!chips || !chips.length) return;
    const wrap = document.createElement('div');
    wrap.className = 'aip-msg-wrap ai';
    const row = document.createElement('div');
    row.className = 'aip-followup';
    chips.forEach(c=>{
      const btn = document.createElement('button');
      btn.className = 'aip-fu';
      btn.textContent = c;
      btn.onclick = ()=>{ row.parentElement?.remove(); aiQuick(c); };
      row.appendChild(btn);
    });
    wrap.appendChild(row);
    document.getElementById('aip-msgs').appendChild(wrap);
  }

  // Follow-up chip üretici — mesaj içeriğine göre
  function suggestFollowUps(reply, hasCards){
    const r = reply.toLowerCase();
    const chips = [];
    if(hasCards){
      chips.push('Daha fazla öner', 'Benzer anime var mı?');
    }
    if(r.includes('aksiyon') || r.includes('dövüş')){
      chips.push('Fantezi anime öner', '2024 aksiyon izle');
    } else if(r.includes('roman') || r.includes('sevgi') || r.includes('aşk')){
      chips.push('Hüzünlü romantik öner', 'Komedi romantik göster');
    } else if(r.includes('premium') || r.includes('üyelik') || r.includes('hesap')){
      chips.push('Premium nasıl alınır?', 'Ücretsiz özellikler neler?');
    } else if(!hasCards){
      chips.push('Aksiyon öner', 'Daha fazla anlat');
    }
    return chips.slice(0,3);
  }

  function showTyping(){
    const el=document.createElement('div');
    el.className='aip-typing';el.id='aip-typing';
    el.innerHTML='<div class="aip-dot"></div><div class="aip-dot"></div><div class="aip-dot"></div>';
    document.getElementById('aip-msgs').appendChild(el);
    el.scrollIntoView({behavior:'smooth',block:'end'});
  }

  function removeTyping(){
    document.getElementById('aip-typing')?.remove();
  }

  window.toggleAiPanel=function(){
    aiOpen=!aiOpen;
    document.getElementById('ai-panel').classList.toggle('open',aiOpen);
    if(aiOpen) setTimeout(()=>document.getElementById('ai-inp').focus(),220);
  };

  window.aiQuick=function(txt){
    document.getElementById('aip-quick').style.display='none';
    document.getElementById('ai-inp').value=txt;
    aiSend();
  };

  window.autoGrow=function(el){
    el.style.height='auto';
    el.style.height=Math.min(el.scrollHeight,80)+'px';
  };

  window.aiKeydown=function(e){
    if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();aiSend();}
  };

  window.aiClearChat=function(){
    aiMsgs.length=0;
    const msgs=document.getElementById('aip-msgs');
    msgs.innerHTML='<div class="aip-msg-wrap ai"><div class="aip-msg ai">Sohbet temizlendi. Nasıl yardımcı olabilirim? 😊</div></div>';
    document.getElementById('aip-quick').style.display='';
  };

  window.aiSend=async function(){
    if(aiLoading) return;
    const inp=document.getElementById('ai-inp');
    const txt=inp.value.trim();
    if(!txt) return;
    inp.value=''; inp.style.height='auto';
    document.getElementById('aip-quick').style.display='none';
    document.getElementById('ai-send').disabled=true;
    aiLoading=true;

    appendMsg('user', txt, false);
    aiMsgs.push({role:'user', content:txt});

    showTyping();
    try{
      const body = {messages: aiMsgs};
      if(pageCtx) body.page_context = pageCtx;

      const res=await fetch('{{ route("ai.chat") }}',{
        method:'POST',
        headers:{'Content-Type':'application/json','X-CSRF-TOKEN':CSRF},
        body:JSON.stringify(body)
      });
      const data=await res.json();
      removeTyping();

      const reply = data.reply || data.error || 'Bir hata oluştu.';
      appendMsg('ai', renderMarkdown(reply), true);
      aiMsgs.push({role:'assistant', content:reply});

      // Anime kartları
      const cards = data.anime_cards || [];
      appendAnimeCards(cards);

      // Follow-up chips
      appendFollowUps(suggestFollowUps(reply, cards.length > 0));

    }catch(e){
      removeTyping();
      appendMsg('ai','Bağlantı hatası, lütfen tekrar dene.', false);
    }
    aiLoading=false;
    document.getElementById('ai-send').disabled=false;
  };
})();
</script>
@endauth

{{-- ── Sayfa takip sistemi ────────────────────────────────────────────────── --}}
<script>
(function(){
  const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';

  function beacon(url, data) {
    // sendBeacon tercih et; fallback fetch
    const body = JSON.stringify(data);
    if (navigator.sendBeacon) {
      const blob = new Blob([body], {type:'application/json'});
      // sendBeacon CSRF header gönderemez, fetch kullan
    }
    fetch(url, {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRF-TOKEN':CSRF},
      keepalive:true, body
    }).catch(()=>{});
  }

  // Sayfa türünü URL'den tespit et
  function detectPageType() {
    const p = location.pathname;
    if (p === '/' || p === '') return 'home';
    if (p.startsWith('/watch/')) return 'player';
    if (p.startsWith('/anime/')) return 'anime';
    if (p.startsWith('/search'))  return 'search';
    if (p.startsWith('/ai'))      return 'ai';
    if (p.startsWith('/genre/'))  return 'genre';
    return 'other';
  }

  // Anime ID'yi meta tag'den al (player/anime sayfası bunu set eder)
  function getMeta(name) {
    return document.querySelector(`meta[name="${name}"]`)?.content || null;
  }

  // Sayfa görüntüleme kaydı
  window.addEventListener('load', function() {
    beacon('/track/pageview', {
      page_type:  detectPageType(),
      anime_id:   getMeta('track-anime-id'),
      episode_id: getMeta('track-episode-id'),
      url:        location.pathname + location.search,
      referrer:   document.referrer,
    });
  });

  // Video izleme takibi (player sayfasında tetiklenir)
  window.TrackWatch = function(animeId, episodeId, seasonNum, episodeNum) {
    const vd = document.querySelector('video');
    if (!vd || !animeId) return;

    let lastReported = 0;
    let trackTimer = null;

    function sendWatch() {
      const sec = Math.floor(vd.currentTime);
      if (sec === lastReported || sec < 5) return;
      lastReported = sec;
      const total = Math.floor(vd.duration) || 0;
      const pct   = total > 0 ? Math.min(100, Math.round(sec / total * 100)) : 0;
      beacon('/track/watch', {
        anime_id:       parseInt(animeId),
        episode_id:     episodeId ? parseInt(episodeId) : null,
        season_number:  parseInt(seasonNum) || 1,
        episode_number: parseInt(episodeNum) || 1,
        seconds:        sec,
        total:          total,
        percent:        pct,
      });
    }

    // Her 30 saniyede bir gönder
    trackTimer = setInterval(sendWatch, 30000);

    // Video kapanırken de gönder
    vd.addEventListener('pause', sendWatch);
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) sendWatch();
    });
    window.addEventListener('beforeunload', function() {
      sendWatch();
      clearInterval(trackTimer);
    });
  };
})();
</script>

{{-- ── Page Transition Loader ──────────────────────────────────────── --}}
<style>
#page-loader{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  opacity:0;transition:opacity .2s ease;
}
#page-loader.show{ opacity:1;pointer-events:all; }

/* Top progress bar */
#loader-bar{
  position:absolute;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--accent2),var(--accent),var(--accent3));
  box-shadow:0 0 12px var(--accent2),0 0 24px var(--accent);
  transition:width .4s cubic-bezier(.4,0,.2,1);
  border-radius:0 2px 2px 0;
}
#loader-bar::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:80px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,245,255,.7));
  filter:blur(4px);
}

/* Center spinner */
#loader-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transition:opacity .15s ease .25s;
}
#page-loader.show #loader-center{ opacity:1; }

.loader-ring{
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid rgba(0,245,255,.1);
  border-top-color:var(--accent2);
  border-right-color:var(--accent);
  animation:loader-spin .7s linear infinite;
  box-shadow:0 0 20px rgba(0,245,255,.15) inset;
}
@keyframes loader-spin{ to{ transform:rotate(360deg); } }

.loader-dots{
  display:flex;gap:6px;
}
.loader-dots span{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent2);
  animation:loader-dot .9s ease-in-out infinite;
  opacity:.3;
}
.loader-dots span:nth-child(2){ animation-delay:.15s;background:var(--accent); }
.loader-dots span:nth-child(3){ animation-delay:.3s;background:var(--accent3); }
@keyframes loader-dot{
  0%,100%{ opacity:.3;transform:scale(1); }
  50%{ opacity:1;transform:scale(1.4); }
}

/* Page content fade-out on leave */
#page-content{ transition:opacity .18s ease,transform .18s ease; }
#page-content.leaving{ opacity:0;transform:translateY(8px); }
</style>

<div id="page-loader">
  <div id="loader-bar"></div>
  <div id="loader-center">
    <div class="loader-ring"></div>
    <div class="loader-dots"><span></span><span></span><span></span></div>
  </div>
</div>

<script>
(function(){
  // ── Splash (ilk giriş) ──────────────────────────────────────────
  const splash = document.getElementById('splash');
  function hideSplash(){
    if (!splash) return;
    splash.classList.add('done');
    setTimeout(()=>{ if(splash.parentNode) splash.parentNode.removeChild(splash); }, 400);
  }
  // Sayfa hazır olunca hemen kapat, en fazla 2sn bekle
  const splashTimeout = setTimeout(hideSplash, 2000);
  function tryHideSplash(){
    clearTimeout(splashTimeout);
    hideSplash();
  }
  if (document.readyState === 'complete') tryHideSplash();
  else window.addEventListener('load', tryHideSplash);
  // back-forward cache: splash DOM yoksa sorun yok (removeChild ile silindi)
  window.addEventListener('pageshow', function(e){ if(e.persisted) hideSplash(); });
})();

(function(){
  const loader  = document.getElementById('page-loader');
  const bar     = document.getElementById('loader-bar');
  const content = document.getElementById('page-content');
  if (!loader) return;

  let barTimer, hideTimer;

  function showLoader(){
    clearTimeout(hideTimer);
    loader.classList.add('show');
    bar.style.width = '0%';
    // Progress bar animasyonu: hızlı başlar, 85'de yavaşlar
    requestAnimationFrame(()=>{
      bar.style.width = '45%';
      barTimer = setTimeout(()=>{ bar.style.width = '75%'; }, 300);
      setTimeout(()=>{ bar.style.width = '88%'; }, 700);
    });
    if (content) content.classList.add('leaving');
  }

  function hideLoader(){
    clearTimeout(barTimer);
    bar.style.transition = 'width .15s ease';
    bar.style.width = '100%';
    setTimeout(()=>{
      loader.classList.remove('show');
      bar.style.transition = 'width .4s cubic-bezier(.4,0,.2,1)';
      bar.style.width = '0%';
      if (content) content.classList.remove('leaving');
    }, 200);
  }

  // Link click'te loader göster (aynı sekme, dış link değil, anchor değil)
  document.addEventListener('click', function(e){
    if (!(e.target instanceof Element)) return;
    const a = e.target.closest('a');
    if (!a) return;
    const href = a.getAttribute('href');
    if (!href || href.startsWith('#') || href.startsWith('javascript') || href.startsWith('mailto')) return;
    if (a.target === '_blank') return;
    try {
      const url = new URL(href, location.href);
      if (url.origin !== location.origin) return;
      if (url.pathname === location.pathname && url.search === location.search) return;
    } catch(err){ return; }
    showLoader();
  });

  // Form submit'te loader göster (sadece gerçek sayfa yükleyen formlar için)
  document.addEventListener('submit', function(e){
    if (e.defaultPrevented) return;
    const f = e.target;
    if (f.method && f.method.toLowerCase() === 'get') showLoader();
  });

  // Sayfa yüklenince gizle
  window.addEventListener('pageshow', function(e){
    hideLoader();
    // back-forward cache'den geliyorsa loader'ı da kapat
    if (e.persisted) hideLoader();
  });
  window.addEventListener('load', hideLoader);

  // Geri/ileri buton
  window.addEventListener('popstate', showLoader);
})();
</script>

{{-- ── Global Kullanıcı Kart Popup ─────────────────────────────── --}}
<style>
#ucard-popup{
  position:fixed;z-index:9990;
  background:linear-gradient(160deg,rgba(10,10,22,.98),rgba(6,6,14,.99));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:16px;
  width:230px;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 40px rgba(0,0,0,.4);
  pointer-events:auto;
  opacity:0;transform:scale(.94);
  transition:opacity .16s,transform .16s;
}
#ucard-popup.show{opacity:1;transform:scale(1)}
.ucard-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ucard-ava{
  width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:800;color:#fff;text-decoration:none;
}
.ucard-ava img{width:100%;height:100%;object-fit:cover}
.ucard-info{flex:1;min-width:0}
.ucard-name{font-size:.88rem;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard-user{font-size:.72rem;color:rgba(255,255,255,.35);margin-top:1px}
.ucard-stats{display:flex;gap:14px;margin-bottom:12px}
.ucard-stat{text-align:center}
.ucard-stat-n{font-size:.88rem;font-weight:800;color:#fff}
.ucard-stat-l{font-size:.62rem;color:rgba(255,255,255,.35)}
.ucard-actions{display:flex;gap:6px}
.ucard-btn{
  flex:1;padding:7px 0;border-radius:9px;border:none;cursor:pointer;
  font-size:.75rem;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .15s;text-decoration:none;
}
.ucard-btn-follow{background:var(--accent2);color:#05050e}
.ucard-btn-follow:hover{background:#00d4de}
.ucard-btn-follow.following{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15)}
.ucard-btn-follow.following:hover{background:rgba(255,80,80,.15);color:#ff6b6b;border-color:rgba(255,80,80,.3)}
.ucard-btn-msg{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.12)}
.ucard-btn-msg:hover{background:rgba(255,255,255,.14);color:#fff}
.ucard-profile-link{display:block;text-align:center;font-size:.7rem;color:rgba(255,255,255,.3);margin-top:9px;text-decoration:none;transition:color .15s}
.ucard-profile-link:hover{color:rgba(255,255,255,.7)}
#ucard-popup .ucard-loading{text-align:center;padding:12px 0;color:rgba(255,255,255,.3);font-size:.8rem}
</style>
<div id="ucard-popup"></div>
<script>
(function(){
  const popup = document.getElementById('ucard-popup');
  if (!popup) return;

  let hideTimer = null;
  let currentUid = null;
  let cache = {};
  const IS_LOGGED = {{ auth()->check() ? 'true' : 'false' }};
  const CSRF = document.querySelector('meta[name=csrf-token]')?.content || '';

  function showPopup(uid, anchor) {
    clearTimeout(hideTimer);
    if (currentUid === uid && popup.classList.contains('show')) return;
    currentUid = uid;

    popup.classList.remove('show');
    popup.innerHTML = '<div class="ucard-loading"><i class="bi bi-arrow-repeat" style="animation:spin .8s linear infinite;display:inline-block"></i> Yükleniyor…</div>';
    positionPopup(anchor);
    popup.classList.add('show');

    if (cache[uid]) { renderCard(cache[uid]); return; }

    fetch(`/u/${uid}/card`, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } })
      .then(r => r.json())
      .then(d => { cache[uid] = d; if (currentUid == uid) renderCard(d); })
      .catch(() => { popup.classList.remove('show'); });
  }

  function positionPopup(el) {
    const r = el.getBoundingClientRect();
    const pw = 230, margin = 8;
    let left = r.right + margin;
    let top  = r.top;
    if (left + pw > window.innerWidth - 8) left = r.left - pw - margin;
    if (left < 8) left = 8;
    if (top + 220 > window.innerHeight) top = window.innerHeight - 228;
    if (top < 8) top = 8;
    popup.style.left = left + 'px';
    popup.style.top  = top  + 'px';
  }

  function renderCard(d) {
    const ava = d.avatar
      ? `<img src="${esc(d.avatar)}" alt="${esc(d.name)}">`
      : (d.name||'?').charAt(0).toUpperCase();
    const userTag = d.username ? `<div class="ucard-user">@${esc(d.username)}</div>` : '';
    const followBtn = IS_LOGGED && !d.is_me && d.follow_url
      ? `<button class="ucard-btn ucard-btn-follow${d.is_following?' following':''}" data-follow-url="${esc(d.follow_url)}" onclick="ucardFollow(this,${d.id})">${d.is_following?'<i class="bi bi-check2"></i> Takip Ediliyor':'<i class="bi bi-person-plus"></i> Takip Et'}</button>`
      : '';
    const msgBtn = IS_LOGGED && !d.is_me && d.msg_url
      ? `<form method="POST" action="${esc(d.msg_url)}" style="flex:1"><input type="hidden" name="_token" value="${CSRF}"><button type="submit" class="ucard-btn ucard-btn-msg" style="width:100%"><i class="bi bi-chat-dots"></i> Mesaj</button></form>`
      : '';
    popup.innerHTML = `
      <div class="ucard-top">
        <a href="${esc(d.profile_url)}" class="ucard-ava">${ava}</a>
        <div class="ucard-info">
          <div class="ucard-name">${esc(d.name)}</div>
          ${userTag}
        </div>
      </div>
      <div class="ucard-stats">
        <div class="ucard-stat"><div class="ucard-stat-n">${d.followers}</div><div class="ucard-stat-l">Takipçi</div></div>
        <div class="ucard-stat"><div class="ucard-stat-n">${d.following}</div><div class="ucard-stat-l">Takip</div></div>
      </div>
      <div class="ucard-actions">${followBtn}${msgBtn}</div>
      <a href="${esc(d.profile_url)}" class="ucard-profile-link">Profilini gör <i class="bi bi-arrow-right"></i></a>
    `;
  }

  function esc(s) {
    return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  window.ucardFollow = async function(btn, uid) {
    try {
      const url = btn.dataset.followUrl;
      const r = await fetch(url, { method:'POST', headers:{'X-CSRF-TOKEN':CSRF,'Accept':'application/json'} });
      const d = await r.json();
      const following = d.following;
      btn.className = `ucard-btn ucard-btn-follow${following?' following':''}`;
      btn.innerHTML = following ? '<i class="bi bi-check2"></i> Takip Ediliyor' : '<i class="bi bi-person-plus"></i> Takip Et';
      if (cache[uid]) cache[uid].is_following = following;
    } catch(e) {}
  };

  // Dismiss popup
  popup.addEventListener('mouseenter', () => clearTimeout(hideTimer));
  popup.addEventListener('mouseleave', () => { hideTimer = setTimeout(() => popup.classList.remove('show'), 300); currentUid = null; });

  document.addEventListener('click', function(e) {
    if (!(e.target instanceof Element)) return;
    // Click on [data-uid]
    const el = e.target.closest('[data-uid]');
    if (el) {
      // Anchor links with href should navigate normally (don't intercept)
      if (el.tagName === 'A' && el.href) return;
      e.preventDefault();
      const uid = el.dataset.uid;
      if (popup.classList.contains('show') && currentUid == uid) {
        popup.classList.remove('show'); currentUid = null;
      } else {
        showPopup(uid, el);
      }
      return;
    }
    // Click outside popup
    if (!popup.contains(e.target)) {
      popup.classList.remove('show'); currentUid = null;
    }
  });

  // Hover on [data-uid] (desktop)
  document.addEventListener('mouseover', function(e) {
    if (!(e.target instanceof Element)) return;
    const el = e.target.closest('[data-uid]');
    if (!el) return;
    clearTimeout(hideTimer);
    hideTimer = setTimeout(() => showPopup(el.dataset.uid, el), 350);
  });
  document.addEventListener('mouseout', function(e) {
    if (!(e.target instanceof Element)) return;
    const el = e.target.closest('[data-uid]');
    if (!el) return;
    clearTimeout(hideTimer);
    hideTimer = setTimeout(() => {
      if (!popup.matches(':hover')) { popup.classList.remove('show'); currentUid = null; }
    }, 250);
  });
})();
</script>
<style>
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
</style>

<script>
/* ══════════════════════════════════════════════════════
   ANIMEXE PREMIUM GLOBAL JS
══════════════════════════════════════════════════════ */
(function() {
  'use strict';

  // ── Scroll Progress Bar ─────────────────────────────
  const progressEl = document.getElementById('scroll-progress');
  const scrollTopBtn = document.getElementById('scroll-top');
  const topnav = document.getElementById('topnav');

  function onScroll() {
    const scrollable = document.documentElement.scrollHeight - window.innerHeight;
    if (progressEl && scrollable > 0) {
      progressEl.style.width = Math.min(100, (window.scrollY / scrollable) * 100) + '%';
    }
    if (scrollTopBtn) scrollTopBtn.classList.toggle('show', window.scrollY > 420);
    if (topnav) topnav.classList.toggle('scrolled', window.scrollY > 50);
  }
  window.addEventListener('scroll', onScroll, { passive: true });

  // Scroll to top
  if (scrollTopBtn) {
    scrollTopBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
  }

  // ── Scroll Reveal System ─────────────────────────────
  function initReveal() {
    // Auto-add reveal class to home sections and section headers
    document.querySelectorAll('.home-section').forEach((el, i) => {
      if (!el.classList.contains('reveal')) el.classList.add('reveal');
    });
    document.querySelectorAll('.hs-hdr').forEach((el, i) => {
      if (!el.classList.contains('reveal')) {
        el.classList.add('reveal');
        el.classList.add('reveal-d' + Math.min(i % 3 + 1, 5));
      }
    });
    document.querySelectorAll('.promo-banner').forEach(el => {
      if (!el.classList.contains('reveal')) el.classList.add('reveal');
    });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  }

  // Run after DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initReveal);
  } else {
    initReveal();
  }

  // ── Card hover magnetic tilt (desktop) ─────────────
  if (!('ontouchstart' in window)) {
    document.addEventListener('mousemove', function(e) {
      if (!(e.target instanceof Element)) return;
      const card = e.target.closest('.pc, .tpc, .sl-card, .mv-card');
      if (!card) return;
      const rect = card.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / (rect.width / 2);
      const dy = (e.clientY - cy) / (rect.height / 2);
      card.style.transform = `translateY(-4px) perspective(600px) rotateY(${dx * 4}deg) rotateX(${-dy * 3}deg)`;
    });
    document.addEventListener('mouseleave', function(e) {
      if (!(e.target instanceof Element)) return;
      const card = e.target.closest('.pc, .tpc, .sl-card, .mv-card');
      if (card) card.style.transform = '';
    }, true);
  }

  // ── Splash screen dismiss ───────────────────────────
  const splash = document.getElementById('splash');
  if (splash) {
    window.addEventListener('load', () => {
      setTimeout(() => splash.classList.add('done'), 300);
    });
    // Fallback: max 2.5s
    setTimeout(() => splash && splash.classList.add('done'), 2500);
  }

  // ── Button ripple effect ────────────────────────────
  document.addEventListener('click', function(e) {
    if (!(e.target instanceof Element)) return;
    const btn = e.target.closest('.h-play-btn, .btn-solid, .promo-cta, .btn-ghost');
    if (!btn) return;
    const rect = btn.getBoundingClientRect();
    const ripple = document.createElement('span');
    const size = Math.max(rect.width, rect.height) * 1.8;
    ripple.style.cssText = `
      position:absolute;width:${size}px;height:${size}px;border-radius:50%;
      background:rgba(255,255,255,.22);pointer-events:none;
      left:${e.clientX - rect.left - size/2}px;
      top:${e.clientY - rect.top - size/2}px;
      transform:scale(0);animation:ripple-burst .55s ease-out forwards;
    `;
    if (getComputedStyle(btn).position === 'static') btn.style.position = 'relative';
    btn.appendChild(ripple);
    ripple.addEventListener('animationend', () => ripple.remove());
  });

  // ── Stats counter animation ─────────────────────────
  function animateCount(el) {
    const target = parseFloat(el.dataset.count || el.textContent.replace(/\D/g,''));
    if (!target || isNaN(target)) return;
    const duration = 900;
    const start = performance.now();
    const isFloat = String(target).includes('.');
    function step(now) {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      const val = eased * target;
      el.textContent = isFloat ? val.toFixed(1) : Math.round(val).toLocaleString('tr-TR');
      if (progress < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  const countObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !entry.target.dataset.counted) {
        entry.target.dataset.counted = '1';
        animateCount(entry.target);
      }
    });
  }, { threshold: 0.5 });

  document.querySelectorAll('[data-count]').forEach(el => countObserver.observe(el));

})();
</script>

<style>
@keyframes ripple-burst{
  to{transform:scale(1);opacity:0}
}
</style>

{{-- ── Global Toast Notification System ──────────────────────── --}}
<style>
#toast-container{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:99999;display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:none;
}
.gtoast{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:12px;
  background:rgba(14,14,28,.96);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  color:var(--text);font-size:.84rem;font-weight:600;
  pointer-events:auto;white-space:nowrap;max-width:min(420px,90vw);
  animation:toast-in .28s cubic-bezier(.22,1,.36,1) forwards;
}
.gtoast.out{ animation:toast-out .25s ease forwards; }
.gtoast i{ font-size:1rem;flex-shrink:0; }
.gtoast.success{ border-color:rgba(0,245,255,.3); }
.gtoast.success i{ color:var(--accent2); }
.gtoast.error{ border-color:rgba(255,45,125,.3); }
.gtoast.error i{ color:var(--accent); }
.gtoast.info{ border-color:rgba(184,77,255,.3); }
.gtoast.info i{ color:var(--accent3); }
.gtoast.warning{ border-color:rgba(251,191,36,.3); }
.gtoast.warning i{ color:#fbbf24; }
@keyframes toast-in{
  from{ opacity:0;transform:translateY(16px) scale(.94); }
  to{   opacity:1;transform:translateY(0) scale(1); }
}
@keyframes toast-out{
  from{ opacity:1;transform:scale(1); }
  to{   opacity:0;transform:scale(.92); }
}
@media(max-width:500px){
  #toast-container{ bottom:16px;left:12px;right:12px;transform:none;align-items:stretch; }
  .gtoast{ white-space:normal; }
}
</style>
<div id="toast-container" aria-live="polite"></div>
<script>
(function(){
  const ICONS = { success:'bi-check-circle-fill', error:'bi-x-circle-fill', info:'bi-info-circle-fill', warning:'bi-exclamation-triangle-fill' };
  window.showToast = function(msg, type, duration) {
    type = type || 'success';
    duration = duration || 3200;
    const c = document.getElementById('toast-container');
    if (!c) return;
    const t = document.createElement('div');
    t.className = 'gtoast ' + type;
    t.innerHTML = '<i class="bi ' + (ICONS[type]||ICONS.info) + '"></i><span>' + msg + '</span>';
    c.appendChild(t);
    setTimeout(() => {
      t.classList.add('out');
      t.addEventListener('animationend', () => t.remove(), { once: true });
    }, duration);
  };
})();
</script>

{{-- ═══════════════════════════════════════════════════════════════
     CHAT PANEL JS v2
═══════════════════════════════════════════════════════════════ --}}
@auth
<script>
(function(){
'use strict';

const CP_CSRF       = document.querySelector('meta[name=csrf-token]')?.content || '';
const CP_ME_ID      = {{ auth()->id() }};
const CP_MY_NAME    = {!! json_encode(auth()->user()->name) !!};
const CP_MY_AVA     = {!! json_encode(auth()->user()->avatar ? \App\Support\MediaUrl::fromStoragePath(auth()->user()->avatar) : null) !!};
const CP_CONVS_URL  = '{{ route("messages.conversations") }}';
const CP_UPLOAD_URL = '{{ route("messages.upload-image") }}';
const TENOR_KEY     = '{{ env("TENOR_API_KEY","") }}';
const IS_MOBILE     = window.matchMedia('(max-width:900px)').matches;

let cpOpen       = false;
let cpConvId     = null;
let cpConvUserId = null;
let cpLastMsgId  = 0;
let cpPollTimer  = null;
let cpEmojiOpen  = false;
let cpGifOpen    = false;
let cpGifTimer   = null;

/* ════════════════════════════════════════════════════
   PANEL OPEN / CLOSE
════════════════════════════════════════════════════ */
window.chatPanelToggle = function() {
  cpOpen ? chatPanelClose() : chatPanelOpen();
};

window.chatPanelClose = function() {
  document.getElementById('chat-panel').classList.remove('open');
  document.getElementById('cp-backdrop').classList.remove('on');
  document.body.style.overflow = '';
  cpOpen = false;
  cpStopPoll();
  cpHideEmoji();
  cpHideGif();
  // Restore topnav
  const topnav = document.getElementById('topnav');
  if (topnav) topnav.style.transform = '';
  // Restore mobile bottom nav
  const nav = document.getElementById('mob-bottom-nav');
  if (nav) { nav.style.transform = ''; nav.style.opacity = ''; }
  // Restore Crisp support widget
  if (window.$crisp) try { $crisp.push(['do','chat:show']); } catch(_) {}
};

function chatPanelOpen() {
  document.getElementById('chat-panel').classList.add('open');
  document.getElementById('cp-backdrop').classList.add('on');
  document.body.style.overflow = 'hidden';
  cpOpen = true;
  // Hide topnav (site header)
  const topnav = document.getElementById('topnav');
  if (topnav) topnav.style.transform = 'translateY(-100%)';
  // Hide mobile bottom nav
  const nav = document.getElementById('mob-bottom-nav');
  if (nav) { nav.style.transform = 'translateY(100%)'; nav.style.opacity = '0'; }
  // Hide Crisp support widget
  if (window.$crisp) try { $crisp.push(['do','chat:hide']); } catch(_) {}
  cpShowList();
  cpLoadConvs();
}

document.addEventListener('keydown', e => { if (e.key === 'Escape' && cpOpen) chatPanelClose(); });

/* ════════════════════════════════════════════════════
   LIST / THREAD SWITCH
════════════════════════════════════════════════════ */
function cpShowList() {
  const list   = document.getElementById('cp-list');
  const thread = document.getElementById('cp-thread');
  list.style.display = 'flex';
  thread.classList.remove('active');
  cpStopPoll();
  cpConvId = null;
  cpConvUserId = null;
}
window.cpShowList = cpShowList;

function cpShowThread() {
  document.getElementById('cp-list').style.display = 'none';
  document.getElementById('cp-thread').classList.add('active');
}

/* ════════════════════════════════════════════════════
   LOAD CONVERSATIONS
════════════════════════════════════════════════════ */
async function cpLoadConvs() {
  const el = document.getElementById('cp-convs');
  el.innerHTML = '<div class="cp-loading"><i class="bi bi-hourglass" style="font-size:1.2rem;display:block;margin-bottom:6px;opacity:.3"></i>Yükleniyor…</div>';
  try {
    const r = await fetch(CP_CONVS_URL, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF } });
    const convs = await r.json();
    if (!convs.length) {
      el.innerHTML = '<div class="cp-empty"><i class="bi bi-chat-square-dots"></i>Henüz mesajın yok.</div>';
      return;
    }
    el.innerHTML = '';
    convs.forEach(c => {
      const convId = c.conv_id ?? c.id;
      const letter = (c.name || '?').charAt(0).toUpperCase();
      const ava = c.avatar
        ? `<div class="cp-conv-ava"><img src="${escH(c.avatar)}" alt=""></div>`
        : `<div class="cp-conv-ava">${escH(letter)}</div>`;

      let preview = '';
      if (!c.last_preview) {
        preview = '<em style="color:rgba(255,255,255,.2)">Henüz mesaj yok</em>';
      } else if (c.last_preview.startsWith('IMAGE::')) {
        preview = '📷 Fotoğraf';
      } else if (c.last_preview.startsWith('GIF::')) {
        preview = '🎞 GIF';
      } else {
        preview = escH(c.last_preview);
      }
      const badge = c.unread > 0 ? `<span class="cp-unread-badge">${c.unread > 9 ? '9+' : c.unread}</span>` : '';
      const time  = c.time ? `<span class="cp-conv-time">${escH(c.time)}</span>` : '';

      // data-* ile data taşı — JSON.stringify double-quote HTML attribute'u kırar
      const item = document.createElement('div');
      item.className = 'cp-conv-item' + (c.unread > 0 ? ' unread' : '');
      item.dataset.convId = convId;
      item.dataset.userId = c.id || '';
      item.dataset.name   = c.name || '';
      item.dataset.avatar = c.avatar || '';
      item.innerHTML = `${ava}
        <div class="cp-conv-body">
          <div class="cp-conv-name">${escH(c.name || 'Kullanıcı')}</div>
          <div class="cp-conv-preview">${preview}</div>
        </div>
        <div class="cp-conv-meta">${time}${badge}</div>`;
      item.addEventListener('click', () => {
        cpOpenThread(item.dataset.userId, item.dataset.name, item.dataset.avatar || null, item.dataset.convId);
      });
      el.appendChild(item);
    });
  } catch(e) {
    el.innerHTML = '<div class="cp-empty">Yüklenemedi.</div>';
    const btn = document.createElement('button');
    btn.textContent = 'Tekrar dene';
    btn.style.cssText = 'color:var(--accent2);background:none;border:none;cursor:pointer;font-size:.84rem;display:block;margin:8px auto';
    btn.onclick = cpLoadConvs;
    el.appendChild(btn);
  }
}

/* ════════════════════════════════════════════════════
   OPEN THREAD
════════════════════════════════════════════════════ */
window.cpOpenThread = async function(userId, name, avatar, convId) {
  cpConvId     = convId;
  cpConvUserId = userId;
  cpLastMsgId  = 0;
  cpHideEmoji();
  cpHideGif();

  document.getElementById('cp-t-name').textContent = name || 'Kullanıcı';
  document.getElementById('cp-t-fulllink').href = `/messages/${convId}`;

  // Store userId for call button
  const callBtn = document.getElementById('cp-t-call-btn');
  if (callBtn) callBtn.dataset.userId = userId;

  const avaEl = document.getElementById('cp-t-ava');
  if (avatar) {
    avaEl.innerHTML = `<img src="${escH(avatar)}" alt="">`;
  } else {
    avaEl.innerHTML = '';
    avaEl.textContent = (name || '?').charAt(0).toUpperCase();
  }

  document.getElementById('cp-msgs').innerHTML = '<div class="cp-loading">Yükleniyor…</div>';
  cpShowThread();

  try {
    const r = await fetch(`/messages/${convId}/poll?after=0`, {
      headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF }
    });
    const d = await r.json();
    const msgsEl = document.getElementById('cp-msgs');
    msgsEl.innerHTML = '';
    if (!d.messages || !d.messages.length) {
      msgsEl.innerHTML = '<div class="cp-loading" style="padding:30px 20px;color:rgba(255,255,255,.2)">İlk mesajı sen gönder! 👋</div>';
    } else {
      d.messages.forEach(m => cpAppendMsg(m));
      cpLastMsgId = d.messages[d.messages.length - 1].id;
    }
    cpScrollBottom(true);
    cpUpdateBadge(0);
  } catch(e) {}

  cpStartPoll();
  setTimeout(() => document.getElementById('cp-textarea')?.focus(), 120);
};

/* ════════════════════════════════════════════════════
   APPEND MESSAGE
════════════════════════════════════════════════════ */
function cpAppendMsg(m) {
  if (document.querySelector(`.cpm[data-id="${m.id}"]`)) return;
  const isMine = m.user_id === CP_ME_ID;
  const el = document.createElement('div');
  el.className = 'cpm ' + (isMine ? 'mine' : 'theirs');
  el.dataset.id = m.id;

  let content = '';
  const body = m.body || '';

  if (body.startsWith('ANIMESHARE::')) {
    try {
      const sd = JSON.parse(body.slice(12));
      const url = `/watch/${sd.slug}/${sd.s}/${sd.e}${sd.ts > 0 ? '?t=' + sd.ts : ''}`;
      const img = sd.cover ? `<img src="${escH(sd.cover)}" loading="lazy" alt="">` : '';
      content = `<a href="${escH(url)}" class="cp-share-card">
        <div class="cp-share-img">${img}</div>
        <div>
          <div class="cp-share-title">${escH(sd.title || '')}</div>
          <div class="cp-share-ep">${sd.s}. Sezon ${sd.e}. Bölüm</div>
          <div class="cp-share-play"><i class="bi bi-play-circle-fill"></i> İzle</div>
        </div>
      </a>`;
    } catch(_) { content = `<div class="cpm-bubble">${escH(body)}</div>`; }
  } else if (body.startsWith('IMAGE::')) {
    const url = body.slice(7);
    content = `<img src="${escH(url)}" class="cpm-img" loading="lazy" alt="Resim" onclick="window.open('${escH(url)}','_blank')">`;
  } else if (body.startsWith('GIF::')) {
    const url = body.slice(5);
    content = `<img src="${escH(url)}" class="cpm-gif" loading="lazy" alt="GIF">`;
  } else {
    content = `<div class="cpm-bubble">${escH(body)}</div>`;
  }

  const avaHtml = !isMine
    ? (m.avatar
        ? `<div class="cpm-ava"><img src="${escH(m.avatar)}" alt=""></div>`
        : `<div class="cpm-ava">${escH((m.name || '?').charAt(0).toUpperCase())}</div>`)
    : '';

  el.innerHTML = avaHtml + `<div>${content}</div><span class="cpm-time">${escH(m.created_at || '')}</span>`;
  document.getElementById('cp-msgs').appendChild(el);
}

function cpScrollBottom(force = false) {
  const el = document.getElementById('cp-msgs');
  if (!el) return;
  const near = el.scrollHeight - el.scrollTop - el.clientHeight < 200;
  if (force || near) el.scrollTop = el.scrollHeight;
}

/* ════════════════════════════════════════════════════
   SEND TEXT
════════════════════════════════════════════════════ */
window.cpSend = async function() {
  if (!cpConvId) return;
  const ta  = document.getElementById('cp-textarea');
  const btn = document.getElementById('cp-send-btn');
  const text = ta.value.trim();
  if (!text) return;

  ta.value = '';
  ta.style.height = 'auto';
  btn.disabled = true;

  try {
    const r = await fetch(`/messages/${cpConvId}/send`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
      body: JSON.stringify({ body: text }),
    });
    const d = await r.json();
    cpAppendMsg({ id: d.id, body: d.body, user_id: CP_ME_ID, created_at: d.created_at, avatar: CP_MY_AVA, name: CP_MY_NAME });
    if (d.id > cpLastMsgId) cpLastMsgId = d.id;
    cpScrollBottom(true);
  } catch(_) { ta.value = text; }
  btn.disabled = false;
};

/* ════════════════════════════════════════════════════
   SEND IMAGE
════════════════════════════════════════════════════ */
window.cpSendImage = async function(input) {
  const file = input.files[0];
  if (!file || !cpConvId) return;
  input.value = '';

  try {
    const fd = new FormData();
    fd.append('image', file);
    const r = await fetch(CP_UPLOAD_URL, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': CP_CSRF, 'Accept': 'application/json' },
      body: fd,
    });
    const d = await r.json();
    if (!d.url) throw new Error('No URL');

    const r2 = await fetch(`/messages/${cpConvId}/send`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
      body: JSON.stringify({ body: 'IMAGE::' + d.url }),
    });
    const d2 = await r2.json();
    cpAppendMsg({ id: d2.id, body: d2.body, user_id: CP_ME_ID, created_at: d2.created_at, avatar: CP_MY_AVA, name: CP_MY_NAME });
    if (d2.id > cpLastMsgId) cpLastMsgId = d2.id;
    cpScrollBottom(true);
  } catch(e) {
    showToast('Resim gönderilemedi.', 'error');
  }
};

/* ════════════════════════════════════════════════════
   SEND GIF
════════════════════════════════════════════════════ */
window.cpSendGif = async function(gifUrl) {
  if (!cpConvId) return;
  cpHideGif();
  try {
    const r = await fetch(`/messages/${cpConvId}/send`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
      body: JSON.stringify({ body: 'GIF::' + gifUrl }),
    });
    const d = await r.json();
    cpAppendMsg({ id: d.id, body: d.body, user_id: CP_ME_ID, created_at: d.created_at, avatar: CP_MY_AVA, name: CP_MY_NAME });
    if (d.id > cpLastMsgId) cpLastMsgId = d.id;
    cpScrollBottom(true);
  } catch(_) { showToast('GIF gönderilemedi.', 'error'); }
};

/* ════════════════════════════════════════════════════
   EMOJI PICKER
════════════════════════════════════════════════════ */
const EMOJIS = '😀😂😅😊😍🥰😘😎😭😤😡🥺🤔😴🤩🥳😱🙈🙄😏🤗😬😵👍👎❤️🔥💯✨🎉🎊🎮🎬🎵🍕🍜🍣🎃👻🦊🐱🐶🐼🌸🌙⭐🌈💎🚀🏆🎯🔮';
const emojiArr = [...EMOJIS];

function cpInitEmoji() {
  const picker = document.getElementById('cp-emoji-picker');
  if (!picker || picker.dataset.built) return;
  picker.dataset.built = '1';
  const frag = document.createDocumentFragment();
  emojiArr.forEach(em => {
    const btn = document.createElement('button');
    btn.className = 'cp-emoji-btn';
    btn.textContent = em;
    btn.title = em;
    btn.onclick = () => {
      const ta = document.getElementById('cp-textarea');
      const pos = ta.selectionStart;
      ta.value = ta.value.slice(0, pos) + em + ta.value.slice(ta.selectionEnd);
      ta.selectionStart = ta.selectionEnd = pos + em.length;
      ta.dispatchEvent(new Event('input'));
      ta.focus();
    };
    frag.appendChild(btn);
  });
  picker.appendChild(frag);
}

window.cpToggleEmoji = function() {
  cpEmojiOpen = !cpEmojiOpen;
  if (cpEmojiOpen) {
    cpHideGif();
    cpInitEmoji();
  }
  document.getElementById('cp-emoji-picker').classList.toggle('show', cpEmojiOpen);
  document.getElementById('cp-emoji-btn')?.classList.toggle('active', cpEmojiOpen);
};
function cpHideEmoji() {
  cpEmojiOpen = false;
  document.getElementById('cp-emoji-picker')?.classList.remove('show');
  document.getElementById('cp-emoji-btn')?.classList.remove('active');
}

/* Show emoji btn on desktop */
if (!IS_MOBILE) {
  const eb = document.getElementById('cp-emoji-btn');
  if (eb) eb.style.display = '';
}

/* ════════════════════════════════════════════════════
   GIF PICKER (Tenor)
════════════════════════════════════════════════════ */
window.cpToggleGif = function() {
  cpGifOpen = !cpGifOpen;
  if (cpGifOpen) {
    cpHideEmoji();
    if (TENOR_KEY) cpSearchGifs('');
  }
  document.getElementById('cp-gif-picker').classList.toggle('show', cpGifOpen);
  document.getElementById('cp-gif-btn')?.classList.toggle('active', cpGifOpen);
  if (cpGifOpen) setTimeout(() => document.getElementById('cp-gif-input')?.focus(), 100);
};
function cpHideGif() {
  cpGifOpen = false;
  document.getElementById('cp-gif-picker')?.classList.remove('show');
  document.getElementById('cp-gif-btn')?.classList.remove('active');
}

async function cpSearchGifs(q) {
  const grid = document.getElementById('cp-gif-grid');
  if (!grid) return;
  if (!TENOR_KEY) {
    grid.innerHTML = '<div class="cp-gif-placeholder">TENOR_API_KEY ayarlanmamış.<br>GIF özelliği devre dışı.</div>';
    return;
  }
  grid.innerHTML = '<div class="cp-gif-placeholder">Yükleniyor…</div>';
  try {
    const endpoint = q
      ? `https://tenor.googleapis.com/v2/search?q=${encodeURIComponent(q)}&key=${TENOR_KEY}&limit=12&media_filter=gif`
      : `https://tenor.googleapis.com/v2/featured?key=${TENOR_KEY}&limit=12&media_filter=gif`;
    const r = await fetch(endpoint);
    const d = await r.json();
    const results = d.results || [];
    if (!results.length) { grid.innerHTML = '<div class="cp-gif-placeholder">Sonuç bulunamadı.</div>'; return; }
    grid.innerHTML = results.map(g => {
      const url = g.media_formats?.tinygif?.url || g.media_formats?.gif?.url || '';
      return url ? `<div class="cp-gif-item" onclick="cpSendGif('${escH(url)}')"><img src="${escH(url)}" alt="" loading="lazy"></div>` : '';
    }).filter(Boolean).join('');
  } catch(e) {
    grid.innerHTML = '<div class="cp-gif-placeholder">Yüklenemedi.</div>';
  }
}

document.getElementById('cp-gif-input')?.addEventListener('input', function() {
  clearTimeout(cpGifTimer);
  cpGifTimer = setTimeout(() => cpSearchGifs(this.value.trim()), 400);
});

/* ════════════════════════════════════════════════════
   TEXTAREA EVENTS
════════════════════════════════════════════════════ */
document.getElementById('cp-textarea')?.addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); cpSend(); }
});
document.getElementById('cp-textarea')?.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = Math.min(this.scrollHeight, 100) + 'px';
  // hide pickers when typing
  if (this.value) { cpHideEmoji(); cpHideGif(); }
});

/* ════════════════════════════════════════════════════
   POLLING (messages)
════════════════════════════════════════════════════ */
function cpStartPoll() {
  cpStopPoll();
  cpPollTimer = setInterval(cpPoll, 3000);
}
function cpStopPoll() {
  clearInterval(cpPollTimer);
  cpPollTimer = null;
}
async function cpPoll() {
  if (!cpConvId || !cpOpen) return;
  try {
    const r = await fetch(`/messages/${cpConvId}/poll?after=${cpLastMsgId}`, {
      headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF }
    });
    const d = await r.json();
    if (d.messages && d.messages.length) {
      d.messages.forEach(m => {
        if (m.user_id !== CP_ME_ID) {
          cpAppendMsg(m);
          if (m.id > cpLastMsgId) cpLastMsgId = m.id;
        }
      });
      cpScrollBottom();
    }
  } catch(_) {}
}

/* ════════════════════════════════════════════════════
   BADGE UPDATE
════════════════════════════════════════════════════ */
function cpUpdateBadge(count) {
  const badge = document.getElementById('cp-nav-badge');
  const icon  = document.getElementById('cp-nav-icon');
  if (badge) {
    badge.style.display = count > 0 ? '' : 'none';
    badge.textContent = count > 9 ? '9+' : count;
  }
  if (icon) icon.className = count > 0 ? 'bi bi-chat-dots-fill' : 'bi bi-chat-dots';
}

/* ════════════════════════════════════════════════════
   VOICE CALLS
════════════════════════════════════════════════════ */
let vcCallId      = null;
let vcAgoraClient = null;
let vcCallTimer   = null;
let vcCallSecs    = 0;
let vcPollTimer   = null;

/* Start outgoing call */
window.cpStartCall = async function() {
  const callBtn = document.getElementById('cp-t-call-btn');
  const userId  = cpConvUserId || (callBtn && callBtn.dataset.userId);
  if (!userId) return;
  try {
    const r = await fetch('/calls/initiate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
      body: JSON.stringify({ callee_id: parseInt(userId) }),
    });
    const d = await r.json();
    if (d.error) { showToast(d.error, 'error'); return; }
    vcCallId = d.call_id;
    vcShowOutgoing(d.callee.name, d.callee.avatar);
    vcMaybeJoinAgora(d.agora_app_id, d.channel_name, d.token, CP_ME_ID);
    vcStartCallPoll();
  } catch(e) { showToast('Arama başlatılamadı.', 'error'); }
};

/* Answer incoming call */
window.vcAnswer = async function() {
  if (!vcCallId) return;
  try {
    const r = await fetch(`/calls/${vcCallId}/answer`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
    });
    const d = await r.json();
    vcShowActive(document.getElementById('call-name-el')?.textContent);
    vcMaybeJoinAgora(d.agora_app_id, d.channel_name, d.token, CP_ME_ID);
  } catch(e) { showToast('Arama cevaplanamadı.', 'error'); }
};

/* Decline */
window.vcDecline = async function() {
  if (!vcCallId) return;
  const id = vcCallId;
  vcCallId = null;
  vcHideOverlay();
  try {
    await fetch(`/calls/${id}/decline`, {
      method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
    });
  } catch(_) {}
};

/* End call */
window.vcEnd = async function() {
  const id = vcCallId;
  vcCallId = null;
  vcHideOverlay();
  vcHideCallBar();
  vcStopCallPoll();
  vcLeaveAgora();
  if (!id) return;
  try {
    await fetch(`/calls/${id}/end`, {
      method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF },
    });
  } catch(_) {}
};

function vcShowIncoming(name, avatar, callId) {
  vcCallId = callId;
  const avaEl = document.getElementById('call-ava-el');
  const nameEl = document.getElementById('call-name-el');
  const statusEl = document.getElementById('call-status-el');
  const btnsEl  = document.getElementById('call-btns-el');
  if (!avaEl) return;

  if (avatar) {
    avaEl.innerHTML = `<img src="${escH(avatar)}" alt="">`;
  } else {
    avaEl.innerHTML = '';
    avaEl.textContent = (name || '?').charAt(0).toUpperCase();
  }
  if (nameEl) nameEl.textContent = name || 'Bilinmeyen';
  if (statusEl) statusEl.textContent = 'Sesli arama geliyor…';
  if (btnsEl) btnsEl.innerHTML = `
    <button class="call-btn call-btn-decline" onclick="vcDecline()" title="Reddet">
      <i class="bi bi-telephone-x-fill"></i>
    </button>
    <button class="call-btn call-btn-accept" onclick="vcAnswer()" title="Kabul et">
      <i class="bi bi-telephone-fill"></i>
    </button>`;

  document.getElementById('call-overlay').classList.add('show');
}

function vcShowOutgoing(name, avatar) {
  const avaEl   = document.getElementById('call-ava-el');
  const nameEl  = document.getElementById('call-name-el');
  const statusEl = document.getElementById('call-status-el');
  const btnsEl  = document.getElementById('call-btns-el');
  if (!avaEl) return;

  if (avatar) avaEl.innerHTML = `<img src="${escH(avatar)}" alt="">`;
  else { avaEl.innerHTML = ''; avaEl.textContent = (name||'?').charAt(0).toUpperCase(); }
  if (nameEl) nameEl.textContent = name || '';
  if (statusEl) statusEl.textContent = 'Aranıyor…';
  if (btnsEl) btnsEl.innerHTML = `
    <button class="call-btn call-btn-decline" onclick="vcEnd()" title="İptal">
      <i class="bi bi-telephone-x-fill"></i>
    </button>`;

  document.getElementById('call-overlay').classList.add('show');
}

function vcShowActive(name) {
  vcHideOverlay();
  const bar = document.getElementById('call-bar');
  if (!bar) return;
  document.getElementById('call-bar-name').textContent = name || '';
  vcCallSecs = 0;
  clearInterval(vcCallTimer);
  vcCallTimer = setInterval(() => {
    vcCallSecs++;
    const m = String(Math.floor(vcCallSecs / 60)).padStart(2, '0');
    const s = String(vcCallSecs % 60).padStart(2, '0');
    const el = document.getElementById('call-bar-timer');
    if (el) el.textContent = `${m}:${s}`;
  }, 1000);
  bar.classList.add('show');
}

function vcHideOverlay() {
  document.getElementById('call-overlay')?.classList.remove('show');
}
function vcHideCallBar() {
  clearInterval(vcCallTimer);
  document.getElementById('call-bar')?.classList.remove('show');
}

/* Agora Web SDK integration */
function vcMaybeJoinAgora(appId, channel, token, uid) {
  if (!appId || !window.AgoraRTC) return;
  try {
    vcLeaveAgora();
    vcAgoraClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
    vcAgoraClient.join(appId, channel, token || null, uid).then(() => {
      return AgoraRTC.createMicrophoneAudioTrack();
    }).then(track => {
      vcAgoraClient.publish([track]);
    }).catch(e => { console.warn('Agora join failed:', e); });
  } catch(e) {}
}

async function vcLeaveAgora() {
  if (!vcAgoraClient) return;
  try { await vcAgoraClient.leave(); } catch(_) {}
  vcAgoraClient = null;
}

/* Poll for incoming calls + call status changes */
function vcStartCallPoll() {
  vcStopCallPoll();
  vcPollTimer = setInterval(vcPollCalls, 4000);
}
function vcStopCallPoll() {
  clearInterval(vcPollTimer);
  vcPollTimer = null;
}

async function vcPollCalls() {
  try {
    const url = vcCallId ? `/calls/poll?call_id=${vcCallId}` : '/calls/poll';
    const r = await fetch(url, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CP_CSRF } });
    const d = await r.json();

    if (d.type === 'incoming' && !vcCallId) {
      vcShowIncoming(d.caller.name, d.caller.avatar, d.call_id);
    } else if (d.type === 'status') {
      if (d.status === 'active' && document.getElementById('call-overlay')?.classList.contains('show')) {
        // Other side answered our outgoing — switch to active bar
        const nameEl = document.getElementById('call-name-el');
        vcShowActive(nameEl?.textContent);
      } else if (d.status === 'ended' || d.status === 'declined') {
        vcCallId = null;
        vcHideOverlay();
        vcHideCallBar();
        vcLeaveAgora();
        vcStopCallPoll();
        if (d.status === 'declined') showToast('Arama reddedildi.', 'info');
        else showToast('Arama sona erdi.', 'info');
      }
    }
  } catch(_) {}
}

// Start polling for calls immediately (even without active call)
vcStartCallPoll();

/* ════════════════════════════════════════════════════
   UTIL
════════════════════════════════════════════════════ */
function escH(s) {
  return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

})();
</script>
@endauth

{{-- Crisp Chat --}}
<script type="text/javascript">
window.$crisp=[];
window.$crisp.push(["config","position:reverse",[true]]);
window.CRISP_WEBSITE_ID="a484d897-f0e5-478c-acc5-ac9ec0814dd8";
(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

</body>
</html>
