<!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.0">

<!-- ══ TEMEL SEO ══ -->
<title>Analog Hafıza · Küresel Müzik Arşivi | Emrah Bahçıvan</title>
<meta name="description" content="30 yıllık kişisel müzik arşivi. Jazz, rock, blues, soul, dünya müziği, Türkçe müzik ve daha fazlası. Küratör notları, kapak hikayeleri ve dönem analizleriyle binlerce albüm. Emrah Bahçıvan tarafından derlendi.">
<meta name="author" content="Emrah Bahçıvan">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="googlebot" content="index, follow">
<meta name="revisit-after" content="3 days">
<meta name="language" content="Turkish">
<meta name="content-language" content="tr">
<link rel="canonical" href="https://analoghafiza.org/">
<link rel="manifest" href="/site.webmanifest">

<!-- ══ OPEN GRAPH (Facebook, WhatsApp, LinkedIn) ══ -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Analog Hafıza">
<meta property="og:title" content="Analog Hafıza · Küresel Müzik Arşivi">
<meta property="og:description" content="30 yıllık kişisel müzik arşivi. Jazz, rock, blues, soul, dünya müziği ve Türkçe müzik. Küratör notları ve kapak hikayeleriyle binlerce albüm.">
<meta property="og:image" content="https://analoghafiza.org/kart-gorseli.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Analog Hafıza - Emrah Bahçıvan Küresel Müzik Arşivi">
<meta property="og:url" content="https://analoghafiza.org/">
<meta property="og:locale" content="tr_TR">
<meta property="og:locale:alternate" content="en_US">

<!-- ══ TWITTER / X CARD ══ -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@analog_hafiza_org">
<meta name="twitter:creator" content="@emrahbahcivan">
<meta name="twitter:title" content="Analog Hafıza · Küresel Müzik Arşivi">
<meta name="twitter:description" content="30 yıllık kişisel müzik arşivi. Jazz, rock, blues, soul, dünya müziği ve Türkçe müzik. Binlerce albüm, küratör notları.">
<meta name="twitter:image" content="https://analoghafiza.org/kart-gorseli.jpg">
<meta name="twitter:image:alt" content="Analog Hafıza Müzik Arşivi">

<!-- ══ GOOGLE SEARCH CONSOLE ══ -->
<meta name="google-site-verification" content="48b4b6539c4aa48f">

<!-- ══ FAVİCON / İKONLAR ══ -->
<link rel="icon" href="/EB_Logo.webp">
<link rel="apple-touch-icon" href="/EB_Logo.webp">
<meta name="theme-color" content="#34d399">
<meta name="msapplication-TileColor" content="#0f1115">

<!-- ══ SCHEMA.ORG YAPISAL VERİ ══ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://analoghafiza.org/#website",
      "url": "https://analoghafiza.org/",
      "name": "Analog Hafıza",
      "alternateName": ["Analog Hafiza", "analoghafiza.org"],
      "description": "Emrah Bahçıvan'ın 30 yıllık kişisel müzik arşivi. Jazz, rock, blues, soul, dünya müziği, Türkçe müzik ve daha fazlası.",
      "inLanguage": "tr-TR",
      "publisher": { "@id": "https://analoghafiza.org/#person" },
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://analoghafiza.org/?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@type": "Person",
      "@id": "https://analoghafiza.org/#person",
      "name": "Emrah Bahçıvan",
      "alternateName": "Emrah Bahcivan",
      "url": "https://emrahbahcivan.com",
      "image": "https://analoghafiza.org/EB_Logo.webp",
      "jobTitle": "Müzik Küratörü & Multidisipliner Tasarımcı",
      "description": "30 yıldır müzik arşivleyen, küratörlük yapan bağımsız araştırmacı ve tasarımcı. Jazz, rock, blues, soul, dünya müziği ve Türkçe müzik uzmanı.",
      "knowsAbout": [
        "Müzik Arşivcilik", "Küratörlük", "Jazz Tarihi", "Rock Tarihi",
        "Dünya Müziği", "Türkçe Müzik", "Blues", "Soul", "Klasik Müzik",
        "Ses Restorasyonu", "Grafik Tasarım", "Web Tasarım"
      ],
      "sameAs": [
        "https://www.instagram.com/analog_hafiza_org/",
        "https://emrahbahcivan.com",
        "https://formfabrikasi.com",
        "https://grafiktasarimburada.com",
        "https://avcilarwebtasarim.com"
      ],
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Avcılar",
        "addressRegion": "İstanbul",
        "addressCountry": "TR"
      },
      "email": "info@emrahbahcivan.com"
    },
    {
      "@type": "CollectionPage",
      "@id": "https://analoghafiza.org/#webpage",
      "url": "https://analoghafiza.org/",
      "name": "Analog Hafıza · Küresel Müzik Arşivi",
      "isPartOf": { "@id": "https://analoghafiza.org/#website" },
      "about": { "@id": "https://analoghafiza.org/#archive" },
      "author": { "@id": "https://analoghafiza.org/#person" },
      "description": "30 yıllık kişisel müzik arşivi. Binlerce albüm, küratör notları, kapak hikayeleri ve dönem analizleri.",
      "inLanguage": "tr-TR",
      "audience": {
        "@type": "Audience",
        "audienceType": "Müzik meraklıları, araştırmacılar, koleksiyoncular"
      },
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [{
          "@type": "ListItem",
          "position": 1,
          "name": "Analog Hafıza",
          "item": "https://analoghafiza.org/"
        }]
      },
      "speakable": {
        "@type": "SpeakableSpecification",
        "cssSelector": ["h1", ".header-sub"]
      }
    },
    {
      "@type": "ArchiveComponent",
      "@id": "https://analoghafiza.org/#archive",
      "name": "Analog Hafıza Müzik Koleksiyonu",
      "description": "Jazz, rock, blues, soul, funk, elektronik, klasik müzik, dünya müziği ve Türkçe müzikten oluşan 30 yıllık kişisel koleksiyon. Her albüm küratör notları, kapak hikayeleri ve dönem analizleriyle sunulmaktadır.",
      "url": "https://analoghafiza.org/",
      "holdingArchive": {
        "@type": "Person",
        "@id": "https://analoghafiza.org/#person"
      },
      "about": [
        { "@type": "Thing", "name": "Jazz" },
        { "@type": "Thing", "name": "Rock" },
        { "@type": "Thing", "name": "Blues" },
        { "@type": "Thing", "name": "Soul" },
        { "@type": "Thing", "name": "Funk" },
        { "@type": "Thing", "name": "Elektronik Müzik" },
        { "@type": "Thing", "name": "Klasik Müzik" },
        { "@type": "Thing", "name": "Dünya Müziği" },
        { "@type": "Thing", "name": "Türkçe Müzik" },
        { "@type": "Thing", "name": "Anadolu Rock" },
        { "@type": "Thing", "name": "Metal" },
        { "@type": "Thing", "name": "Reggae" },
        { "@type": "Thing", "name": "Tango" }
      ]
    },
    {
      "@type": "CreativeWork",
      "@id": "https://analoghafiza.org/#curation",
      "name": "Analog Hafıza Küratör Notları",
      "creator": { "@id": "https://analoghafiza.org/#person" },
      "description": "Her albüm için kaleme alınmış özgün küratör yorumları, kapak tasarım hikayeleri, dönem atmosferi analizleri ve gizli gerçekler.",
      "genre": "Müzik Eleştirisi & Arşivcilik",
      "inLanguage": "tr-TR",
      "url": "https://analoghafiza.org/"
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "Analog Hafıza nedir?",
          "acceptedAnswer": {"@type": "Answer", "text": "Analog Hafıza, Emrah Bahçıvan'ın 30 yılı aşkın süredir derlediği kişisel müzik koleksiyonunun dijital arşividir. Jazz, rock, blues, soul, funk, dünya müziği ve Türkçe müzikten oluşan binlerce albüm; küratör notları, kapak hikayeleri ve dönem analizleriyle sunulmaktadır."}
        },
        {
          "@type": "Question",
          "name": "Arşivde hangi müzik türleri var?",
          "acceptedAnswer": {"@type": "Answer", "text": "Jazz, Rock, Blues, Soul, Funk, Elektronik Müzik, Klasik Müzik, Dünya Müziği, Türkçe Müzik, Anadolu Rock, Metal, Reggae ve Tango başta olmak üzere onlarca alt tür ve dönem kapsanmaktadır."}
        },
        {
          "@type": "Question",
          "name": "Arşivi kim derledi?",
          "acceptedAnswer": {"@type": "Answer", "text": "Arşiv, Emrah Bahçıvan tarafından derlendi. Bahçıvan aynı zamanda grafik tasarımcı, web geliştirici ve dijital çözüm mimarıdır; emrahbahcivan.com üzerinden profesyonel hizmetler sunmaktadır."}
        },
        {
          "@type": "Question",
          "name": "Arşiv nasıl kullanılır?",
          "acceptedAnswer": {"@type": "Answer", "text": "Sol kenar çubuğundaki kategori ağacından tür ve alt türe göre filtreleme yapabilir, üst arama kutusuna sanatçı adı, albüm adı veya yıl girerek anında sonuç alabilirsiniz. Her albüm kartında küratör notu ve ek bilgiler yer alır."}
        }
      ]
    }
  ]
}
</script>

<!-- ══ GOOGLE ANALİTİK 4 — etkileşim sonrası yükle (TBT iyileştirmesi) ══ -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-Q4K731TF6J', {'send_page_view': false});
  var _gtmLoaded = false;
  function _loadGTM() {
    if (_gtmLoaded) return; _gtmLoaded = true;
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-Q4K731TF6J';
    document.head.appendChild(s);
    s.onload = function(){ gtag('event', 'page_view'); };
  }
  ['click','scroll','keydown','touchstart'].forEach(function(ev) {
    window.addEventListener(ev, _loadGTM, {once:true, passive:true});
  });
</script>

<!-- Fontlar - Orijinal site ile aynı -->
<link rel="preload" href="Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="Lora-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="Lora-Italic.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face{font-family:'Inter';font-style:normal;font-weight:400;src:url('Inter-Regular.woff2') format('woff2');font-display:optional}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;src:url('Inter-Bold.woff2') format('woff2');font-display:optional}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;src:url('Lora-Regular.woff2') format('woff2');font-display:swap;size-adjust:98%;ascent-override:95%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;src:url('Lora-Italic.woff2') format('woff2');font-display:swap;size-adjust:98%;ascent-override:95%;descent-override:22%;line-gap-override:0%}
</style>

<style>
:root {
  --bg: #0f1115;
  --bg2: #13161c;
  --bg3: #1a1e27;
  --text: #e2e8f0;
  --dim: #94a3b8;
  --green: #34d399;
  --green-soft: rgba(52,211,153,0.1);
  --purple: #818cf8;
  --border: rgba(255,255,255,0.08);
  --sidebar-width: 300px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;display:flex;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ══ SİDEBAR ══ */
.sidebar{
  width:var(--sidebar-width);background:rgba(15,17,21,.98);
  backdrop-filter:blur(20px);border-right:1px solid var(--border);
  padding:24px 14px 40px;height:100vh;position:sticky;top:0;
  overflow-y:auto;flex-shrink:0;z-index:100;
  scrollbar-width:thin;scrollbar-color:var(--green) transparent;
  font-size:0.8rem;
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--green);border-radius:3px}

.sidebar-logo{
  font-size:.65rem;font-weight:800;color:var(--green);letter-spacing:3px;
  text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--border);
  margin-bottom:14px;display:block;contain:layout;
}
.all-btn{
  display:block;width:100%;padding:7px 10px;background:var(--green-soft);
  border:1px solid rgba(52,211,153,.2);border-radius:7px;
  color:var(--green);font-size:.73rem;font-weight:700;letter-spacing:1px;
  cursor:pointer;margin-bottom:12px;transition:.2s;
  font-family:'Inter',sans-serif;text-align:left;
}
.all-btn:hover,.all-btn.active{background:var(--green);color:#000}

/* KATEGORİ AĞACI */
.cat-list{list-style:none}
.cat-item{margin-bottom:2px}

.cat-header{
  display:flex;align-items:center;gap:4px;
  padding:6px 8px;border-radius:7px;cursor:pointer;transition:.2s;
}
.cat-header:hover{background:var(--bg3)}
.cat-header.active{background:var(--green-soft);border-left:2px solid var(--green)}
.cat-header.empty .cat-name{color:#5a6270}   /* sadece BOŞ kategoriler soluk */

.cat-name{font-size:.78rem;font-weight:700;color:#ffffff;flex:1;line-height:1.3;letter-spacing:.3px}
.cat-count{
  font-size:.68rem;font-weight:700;color:var(--dim);background:var(--bg3);
  border:1px solid var(--border);padding:2px 8px;border-radius:11px;
  min-width:24px;text-align:center;flex-shrink:0;
}
.cat-count.has-albums{
  color:#000;background:var(--green);border-color:var(--green);
}
.cat-toggle{color:var(--green);font-size:.85rem;transition:transform .2s;flex-shrink:0;margin-left:2px}
.cat-toggle.open{transform:rotate(90deg)}
.cat-header.empty .cat-toggle{color:#5a6270}

/* ALT KATEGORİLER */
.sub-list{
  list-style:none;padding-left:12px;
  border-left:1px dashed var(--border);
  margin:3px 0 6px;display:none;
}
.sub-list.show{display:block}

.sub-item{
  padding:4px 8px;font-size:.72rem;color:#ffffff;
  cursor:pointer;border-radius:5px;
  border-left:2px solid transparent;
  transition:.15s;margin-bottom:1px;
  display:flex;align-items:center;justify-content:space-between;
}
.sub-item:hover{color:var(--green);border-left-color:rgba(52,211,153,.5);background:rgba(52,211,153,.05)}
.sub-item.active{color:var(--green);border-left-color:var(--green);background:var(--green-soft)}
.sub-item.empty{color:#5a6270;cursor:default}
.sub-item.empty:hover{color:#5a6270;border-left-color:transparent;background:none}
.sub-count{
  font-size:.62rem;font-weight:700;color:var(--green);
  background:rgba(52,211,153,.12);padding:1px 6px;border-radius:8px;
  min-width:18px;text-align:center;
}
.sub-item.empty .sub-count{color:#5a6270;background:transparent}

/* ══ ANA İÇERİK ══ */
.main{flex:1;min-width:0;padding:36px 30px;contain:layout style}
.menu-toggle{
  display:none;position:fixed;left:14px;top:14px;z-index:1100;
  background:var(--green);color:#000;border:none;padding:9px 14px;
  border-radius:6px;font-weight:800;font-size:.65rem;letter-spacing:1px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}

/* HEADER */
header{border-left:3px solid var(--green);padding-left:18px;margin-bottom:30px}
.header-label{font-size:.65rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--green);display:block;margin-bottom:6px}
header h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:#fff}
header h1 span{color:var(--green)}
.header-sub{font-size:.83rem;color:var(--dim);margin-top:6px}
.header-sub a{color:var(--green);text-decoration:none;font-weight:600}

/* ARAMA & SIRALAMA */
.filter-bar{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap;align-items:center}
.search-wrap{position:relative;flex:1;min-width:180px}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:2}
#searchInput{
  width:100%;background:var(--bg2);border:1px solid var(--border);
  color:var(--text);padding:9px 12px 9px 36px;border-radius:8px;
  font-family:'Inter',sans-serif;font-size:.83rem;outline:none;transition:.2s;
}
#searchInput:focus{border-color:var(--green)}
#searchInput::placeholder{color:var(--dim)}
.sort-select{
  background:var(--bg2);border:1px solid var(--border);color:var(--text);
  padding:9px 14px;border-radius:8px;font-family:'Inter',sans-serif;
  font-size:.8rem;outline:none;cursor:pointer;transition:.2s;
}
.sort-select:focus{border-color:var(--green)}
.filter-info{font-size:.75rem;color:var(--dim);white-space:nowrap;padding:2px 0}
.filter-info strong{color:var(--green)}

/* ALBÜM LİSTESİ */
.albums-grid{display:flex;flex-direction:column;gap:0;min-height:400px}
.entry{
  display:grid;grid-template-columns:200px 1fr;gap:28px;
  padding:28px 0;border-bottom:1px solid var(--border);align-items:start;
}
.entry:last-child{border-bottom:none}

.cover-wrap{position:relative;flex-shrink:0}
.cover{
  width:200px;height:200px;object-fit:cover;border-radius:10px;
  display:block;background:var(--bg3);
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:.3s ease;
  aspect-ratio:1/1;
}
.entry:hover .cover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.cover-badge{
  position:absolute;top:8px;left:8px;
  background:rgba(0,0,0,.8);color:var(--green);
  font-size:.58rem;font-weight:700;letter-spacing:1px;
  padding:3px 7px;border-radius:4px;backdrop-filter:blur(4px);
}

/* ALBÜM METASİ */
.album-meta{display:flex;flex-direction:column;gap:10px}
.album-cat{font-size:.63rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--purple)}
.album-title-text{font-size:1.55rem;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.5px}
.album-artist-text{font-size:1rem;color:var(--green);font-weight:600}
.album-info-row{display:flex;gap:8px;flex-wrap:wrap}
.info-pill{
  font-size:.7rem;color:var(--dim);
  background:var(--bg3);border:1px solid var(--border);
  padding:3px 10px;border-radius:20px;
}

/* SEKSİYONLAR */
.sections{display:flex;flex-direction:column;gap:0}
.sec-block{border-left:2px solid var(--border);padding-left:14px;margin-top:14px;transition:.2s}
.sec-block:hover{border-left-color:rgba(52,211,153,.4)}
.sec-title{
  font-size:.67rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--green);margin-bottom:6px;
}
.sec-text{font-family:'Lora','Georgia',serif;font-size:.9rem;color:#cbd5e1;line-height:1.72}
.sec-text strong{color:#e2e8f0}

.tracklist-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.track-pill{
  font-size:.7rem;background:var(--bg3);border:1px solid var(--border);
  color:var(--dim);padding:3px 9px;border-radius:4px;font-family:'Inter',sans-serif;
}
.track-pill:first-child{color:var(--green);border-color:rgba(52,211,153,.3)}

.empty-state{
  text-align:center;padding:80px 20px;color:var(--dim);
  font-style:italic;border:1px dashed var(--border);border-radius:12px;margin-top:20px;
}

/* FOOTER */
footer{margin-top:60px;padding:48px 0 0;border-top:1px solid var(--border);contain:layout style;min-height:320px}

.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--border);
}

.footer-identity{}
.footer-name{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:4px}
.footer-title{font-size:.75rem;color:var(--dim);margin-bottom:10px;line-height:1.5}
.footer-disciplines{
  font-size:.6rem;font-weight:700;letter-spacing:2px;color:var(--green);
  margin-bottom:12px;opacity:.8;
}
.footer-location{
  display:flex;align-items:center;gap:5px;
  font-size:.72rem;color:var(--dim);margin-bottom:14px;
}
.footer-location svg{stroke:var(--green);flex-shrink:0}

.footer-social{display:flex;gap:8px}
.footer-icon-btn{
  width:32px;height:32px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);text-decoration:none;transition:.2s;
}
.footer-icon-btn:hover{background:var(--green);color:#000;border-color:var(--green)}
.footer-icon-btn svg{stroke:currentColor}

.footer-col-title{
  font-size:.62rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--green);
  margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.footer-links-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.footer-links-list a{
  font-size:.78rem;color:var(--dim);text-decoration:none;transition:.15s;
  display:inline-flex;align-items:center;gap:5px;
}
.footer-links-list a::before{content:'›';color:var(--border);transition:.15s}
.footer-links-list a:hover{color:var(--text)}
.footer-links-list a:hover::before{color:var(--green)}

.footer-bottom{
  padding:16px 0 0;
  display:flex;flex-direction:column;gap:10px;
  font-size:.72rem;color:var(--dim);
}
.footer-bottom-main{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.footer-bottom-legal{display:flex;gap:14px}
.footer-bottom a{color:var(--dim);text-decoration:none;transition:.15s}
.footer-bottom a:hover{color:var(--green)}
.footer-bottom-legal a{
  font-size:.68rem;color:var(--dim);text-decoration:none;
  border-bottom:1px solid var(--border);padding-bottom:1px;transition:.15s;
}
.footer-bottom-legal a:hover{color:var(--green);border-bottom-color:var(--green)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-disclaimer{
  font-size:.7rem;color:#94a3b8;line-height:1.75;
  padding:12px 16px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-left:2px solid rgba(255,255,255,.1);
  border-radius:6px;
  margin-top:4px;
  margin-bottom:16px;
}
.footer-disclaimer strong{color:var(--text);font-weight:600}

@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
}

/* ══ SPOTİFY BUTONU ══ */
.spotify-btn {
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:6px 12px;
  background:rgba(30,215,96,0.1);
  border:1px solid rgba(30,215,96,0.3);
  border-radius:20px;cursor:pointer;
  color:#1ed760;font-size:.72rem;font-weight:700;
  font-family:'Inter',sans-serif;
  transition:.2s;letter-spacing:.5px;
}
.spotify-btn:hover{background:#1ed760;color:#000}
.spotify-btn svg{flex-shrink:0;transition:inherit}
.spotify-btn:hover svg{fill:#000}

.spotify-embed-wrap{
  margin-top:10px;
  border-radius:12px;overflow:hidden;
  max-width:100%;
}
.spotify-embed-wrap iframe{
  border:none;border-radius:12px;
  display:block;width:100%;
}

/* FLOATING BUTTONS */
.floating-action-buttons{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.fab-btn{
  width:42px;height:42px;border-radius:50%;background:#000;color:var(--green);
  border:2px solid #1a1e27;display:flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.8);
  transition:all .3s ease;
}
.fab-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.fab-btn:hover{transform:scale(1.12);border-color:var(--green)}

/* ══ SİDEBAR SAYFA LİNKLERİ ══ */
.sidebar-divider{border:none;border-top:1px solid var(--border);margin:12px 0 10px}
.sidebar-pages-label{font-size:.6rem;font-weight:700;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-bottom:8px;display:block;padding:0 2px}
.sidebar-page-link{display:flex;align-items:center;gap:7px;padding:7px 10px;font-size:.73rem;color:var(--dim);border-radius:7px;transition:.2s;text-decoration:none;margin-bottom:3px}
.sidebar-page-link:hover{color:var(--green);background:rgba(52,211,153,.07)}
.sidebar-page-link.is-primary{color:var(--green);border:1px solid rgba(52,211,153,.22);background:rgba(52,211,153,.05)}
.sidebar-page-link.is-primary:hover{background:rgba(52,211,153,.13)}
.sidebar-page-link svg{flex-shrink:0;opacity:.6}
.sidebar-page-link:hover svg{opacity:1}

/* ══ MOBİL ══ */
@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .3s ease;z-index:1000;width:260px}
  .sidebar.active{transform:translateX(0)}
  .main{padding:62px 15px 30px}
  .menu-toggle{display:block}
  .entry{grid-template-columns:120px 1fr;gap:16px}
  .cover{width:120px;height:120px}
  .album-title-text{font-size:1.1rem}
  .floating-action-buttons{right:14px;bottom:16px}
}
@media(max-width:480px){
  .entry{grid-template-columns:1fr}
  .cover{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;max-height:none}
  .filter-bar{flex-direction:column}
  .search-wrap{width:100%}
}
</style>
</head>
<body>

<button class="menu-toggle" id="menuToggleBtn" onclick="toggleSidebar()" aria-label="Menüyü aç/kapat" aria-expanded="false">ARŞİV MENÜSÜ</button>

<!-- ══ SİDEBAR ══ -->
<nav class="sidebar" id="sidebar" aria-label="Kategori Menüsü">
  <span class="sidebar-logo">Analog Hafıza · Arşiv</span>
  <button class="all-btn" id="allBtn" onclick="filterAll()" type="button">
    ✦ Tümünü Göster
  </button>

  <hr class="sidebar-divider">
  <span class="sidebar-pages-label">Sayfalar</span>
  <a class='sidebar-page-link is-primary' href='/oneri'>
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    Albüm Öneri Motoru
  </a>
  <a href="https://arsiv.emrahbahcivan.com/mekan-muzik-profili.html" class="sidebar-page-link" target="_blank" rel="noopener">
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    Mekan &amp; Müzik Profili ↗
  </a>
  <hr class="sidebar-divider">

  <ul class="cat-list" id="catTree" aria-label="Müzik kategorileri"></ul>
</nav>

<!-- ══ ANA İÇERİK ══ -->
<main class="main" id="mainContent">
  <header>
    <span class="header-label">Emrah Bahçıvan · Dijital Küratör</span>
    <h1>Analog <span>Hafıza</span></h1>
    <p class="header-sub">30 Yıllık Müzik Arşivi · <a href="https://emrahbahcivan.com" rel="author">emrahbahcivan.com</a></p>
  </header>

  <div class="filter-bar">
    <div class="search-wrap">
      <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text" id="searchInput" placeholder="Sanatçı, albüm, tür, yıl ara..." oninput="renderAlbums()" autocomplete="off" spellcheck="false">
    </div>
    <label for="sortSelect" class="sr-only">Sıralama ölçütü</label>
    <select class="sort-select" id="sortSelect" onchange="renderAlbums()">
      <option value="artist">Sanatçıya göre (A–Z)</option>
      <option value="year-desc">Yıla göre (Yeni → Eski)</option>
      <option value="year-asc">Yıla göre (Eski → Yeni)</option>
      <option value="title">Albüm adına göre</option>
    </select>
    <div class="filter-info" id="filterInfo" aria-live="polite"></div>
  </div>

  <div class="albums-grid" id="albumsGrid" aria-live="polite"></div>

  <footer>
    <div class="footer-grid">

      <!-- KİMLİK -->
      <div class="footer-col footer-identity">
        <div class="footer-name">Emrah Bahçıvan</div>
        <div class="footer-title">Multidisipliner Tasarımcı &amp; Medya Küratörü</div>
        <div class="footer-disciplines">GRAFİK &nbsp;·&nbsp; WEB &nbsp;·&nbsp; VİDEO &nbsp;·&nbsp; SES &nbsp;·&nbsp; SEO &nbsp;·&nbsp; FORM</div>
        <div class="footer-location">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
          Avcılar Merkez, İstanbul, Türkiye
        </div>
        <div class="footer-social">
          <a href="https://www.instagram.com/analog_hafiza_org/" target="_blank" rel="noopener" class="footer-icon-btn" aria-label="Instagram">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
          </a>
          <a href="https://wa.me/905304256740?text=Merhaba%20Emrah%20Bey%2C%20Analog%20Haf%C4%B1za%20ile%20ilgili%20g%C3%B6r%C3%BC%C5%9Fmek%20istiyorum." target="_blank" rel="noopener" class="footer-icon-btn" aria-label="WhatsApp">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
          </a>
          <a href="mailto:info@emrahbahcivan.com" class="footer-icon-btn" aria-label="E-posta">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          </a>
          <a href="https://open.spotify.com/user/carcassemrah" target="_blank" rel="noopener" class="footer-icon-btn" aria-label="Spotify">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 0 1-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 1 1-.277-1.215c3.809-.87 7.077-.496 9.712 1.115a.623.623 0 0 1 .207.857zm1.223-2.722a.779.779 0 0 1-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.779.779 0 0 1-.968-.519.78.78 0 0 1 .52-.968c3.632-1.102 8.147-.568 11.228 1.324a.779.779 0 0 1 .257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 1 1-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 0 1-.955 1.609z"/></svg>
          </a>
        </div>
      </div>

      <!-- DİJİTAL EKOSİSTEM -->
      <div class="footer-col">
        <div class="footer-col-title">Dijital Ekosistemim</div>
        <ul class="footer-links-list">
          <li><a href="https://emrahbahcivan.com" target="_blank" rel="noopener">emrahbahcivan.com</a></li>
          <li><a href="https://formfabrikasi.com" target="_blank" rel="noopener">formfabrikasi.com</a></li>
          <li><a href="https://grafiktasarimburada.com" target="_blank" rel="noopener">grafiktasarimburada.com</a></li>
          <li><a href="https://avcilarwebtasarim.com" target="_blank" rel="noopener">avcilarwebtasarim.com</a></li>
          <li><a href="https://arsiv.emrahbahcivan.com" target="_blank" rel="noopener">arsiv.emrahbahcivan.com</a></li>
          <li><a href='/oneri'>Albüm Öneri Motoru</a></li>
          <li><a href="https://arsiv.emrahbahcivan.com/mekan-muzik-profili.html" target="_blank" rel="noopener">Mekan &amp; Müzik Profili</a></li>
        </ul>
      </div>

      <!-- YASAL -->
      <div class="footer-col">
        <div class="footer-col-title">Yasal</div>
        <ul class="footer-links-list">
          <li><a href='/gizlilik-politikasi'>Gizlilik Politikası</a></li>
          <li><a href='/yasal-uyari'>Yasal Uyarı</a></li>
          <li><a href='/cerez-politikasi'>Çerez Politikası</a></li>
          <li><a href='/kvkk-aydinlatma-metni'>KVKK Aydınlatma</a></li>
        </ul>
      </div>

    </div>

    <div class="footer-bottom">
      <div class="footer-bottom-main">
        © 2026 <a href="https://analoghafiza.org">Analog Hafıza</a> &nbsp;·&nbsp;
        <a href="https://emrahbahcivan.com">Emrah Bahçıvan</a> &nbsp;·&nbsp;
        Avcılar Merkez, İstanbul 34310 &nbsp;·&nbsp; Tüm Hakları Saklıdır.
      </div>
      <div class="footer-bottom-legal">
        <a href="https://emrahbahcivan.com/gizlilik-politikasi" target="_blank" rel="noopener">Gizlilik</a>
        <a href="https://emrahbahcivan.com/legal" target="_blank" rel="noopener">Koşullar</a>
      </div>
      <div class="footer-disclaimer">
        Bu site, 13 yıllık sektör deneyimine sahip <strong>Emrah Bahçıvan</strong>'ın kişisel müzik arşividir.
        Paylaşılan albüm bilgileri, kapak görselleri ve yorumlar yalnızca <strong>tanıtım ve kültürel arşivcilik</strong> amacıyla sunulmaktadır.
        Tüm ticari haklar ilgili sanatçı, plak şirketi ve hak sahiplerine aittir.
      </div>
    </div>
  </footer>
</main>

<!-- FLOATING BUTTONS -->
<div class="floating-action-buttons">
  <button onclick="window.scrollTo({top:0,behavior:'smooth'})" class="fab-btn" title="Yukarı" aria-label="Sayfanın başına dön">
    <svg viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"></polyline></svg>
  </button>
  <a href="https://www.instagram.com/analog_hafiza_org/" target="_blank" class="fab-btn" title="Instagram" aria-label="Instagram">
    <svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="4" ry="4"></rect><circle cx="12" cy="12" r="4.5"></circle><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
  </a>
  <button onclick="window.scrollTo({top:document.body.scrollHeight,behavior:'smooth'})" class="fab-btn" title="Aşağı" aria-label="Sayfanın sonuna git">
    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
  </button>
</div>

<!-- albums.js defer ile yükleniyor — render-blocking tamamen kaldırıldı -->
<script src="albums.js" defer></script>
<script>
// ══════════════════════════════════════════════════════════
// TAM KATEGORİ AĞACI — Sabit tanımlı, albüm olmasa bile görünür
// Yeni kategori eklemek için bu listeye bir satır ekleyin.
// ══════════════════════════════════════════════════════════
const CATEGORIES = [
  {name:"AFRİKA MÜZİĞİ & TRADITIONAL",
   subs:["Afrobeat & Highlife","Desert Blues & Tuareg","Geleneksel (Traditional) Afrika","Amapiano & Modern Afro-Pop"]},

  {name:"ASYA POP & MODERN MÜZİĞİ",
   subs:["J-Pop & J-Rock","K-Pop","C-Pop & Mandopop"]},

  {name:"BLUES",
   subs:["Klasik Blues (Delta & Acoustic)","Chicago Blues & Electric","Modern Blues & Blues Rock"]},

  {name:"COUNTRY, FOLK & AMERICANA",
   subs:["Classic Country & Western","Bluegrass & Traditional Folk","Americana & Alt-Country","Modern Country"]},

  {name:"CUBA, LATİN & GÜNEY AMERİKA",
   subs:["Küba Klasikleri (Son, Salsa, Afro-Cuban)","Buena Vista Social Club","Brezilya (Samba, Bossa Nova, MPB)","Güney Amerika Folk & Nueva Canción","Latin Pop, Rock & Alternatif"]},

  {name:"DERLEMELER & PROJELER",
   subs:["Grammy Nominees","Golden Oldies","Lounge & Konsept Seriler (Hotel Costes, Cafe Del Mar vb.)","Buddha Bar & Etnik Elektronik Seçkiler","Özel Projeler"]},

  {name:"DÜNYA MÜZİĞİ (WORLD MUSIC & ETNİK)",
   subs:["Fransa (Chanson & Modern Pop)","İtalya (Italo-Pop & Klasik)","Yunanistan (Laiko, Rebetiko & Modern)","İspanya & Flamenco","Portekiz (Fado)","Geleneksel Balkan, Brass & Çingene (Gypsy)","Balkan Rock, Punk & Çağdaş Füzyon","Klezmer & Sefarad (Ladino)","Rusya, Kafkasya & Orta Asya","Hint Müziği & Bollywood","Uzakdoğu Geleneksel Müziği","İskandinav & Nordik Folk","Dünya Müziği & Enstrümantal"]},

  {name:"ELEKTRONİK & DANS MÜZİĞİ",
   subs:["Early Electronic & Synthesizer","House, Tech-House & Deep House","Techno & Minimal","Progressive House & Trance","Downtempo, IDM & Trip-Hop","Lounge & Chill-Out","Drum & Bass, Breakbeat & Big Beat","Lo-Fi & Chillhop","Dubstep & Bass Music","Synthwave & Retrowave"]},

  {name:"JAZZ",
   subs:["Klasik Caz & Vokal","Bebop & Hard Bop","Fusion & Smooth Jazz","Acid Jazz & Nu-Jazz","ECM & Çağdaş Caz"]},

  {name:"KLASİK MÜZİK",
   subs:["Senfonik & Orkestral","Opera & Vokal Eserler","Aryalar & Vokal Resitalleri","Oda Müziği","Piyano & Solo Enstrüman","Koro Müziği & Dini Eserler","Büyük Besteciler & Koleksiyonlar","Efsanevi Yorumcular & Virtüözler","Şefler & Orkestralar","Modern Klasik & Çağdaş","Bebek Müzikleri & Ninniler"]},

  {name:"METAL",
   subs:["Classic Heavy Metal & NWOBHM","Thrash & Speed Metal","Power Metal","Death Metal, Technical & Grindcore","Melodic Death Metal","Black Metal","Doom & Sludge Metal","Gothic & Doom Metal","Gothic & Symphonic Metal","Progressive Metal","Virtüözler","Folk, Pagan & Viking Metal","Groove & Nu-Metal","Industrial Metal","Deathcore & Modern Metal"]},

  {name:"NEW AGE, AMBIENT & CELTIC",
   subs:["New Age","Ambient","Celtic","Spiritüel, Meditasyon & Doğa"]},

  {name:"ORTADOĞU & KUZEY AFRİKA",
   subs:["Klasik Arap Müziği & Tarab","Modern Arap Pop & Rai","Ortadoğu Füzyon & Perküsyon","Sufi, Geleneksel & Etnik"]},

  {name:"RAP & HIP-HOP (GLOBAL)",
   subs:["Old School & Golden Era","East Coast & West Coast","Underground & Alternative Hip-Hop","Trap & Modern Rap","UK Grime & Drill"]},

  {name:"REGGAE, SKA & DUB",
   subs:["Reggae & Roots","Ska","Dub","Rocksteady & Dancehall"]},

  {name:"ROCK",
   subs:["Classic Rock","Psychedelic & Garage Rock","Progressive & Art Rock","Punk & Hardcore","Alternative Rock, Grunge & Indie","Britpop","New Wave & Post-Punk","Hard Rock & Glam Rock","Singer-Songwriter & Folk Rock"]},

  {name:"SOUNDTRACK, SİNEMA & MEDYA",
   subs:["Film Müzikleri (Score)","Soundtrack Derlemeleri","Dizi & Televizyon Müzikleri","Oyun Müzikleri (Video Game Soundtracks)","Müzikal & Tiyatro","Dünya Müziği & Etnik Film Müzikleri","Kült & Yönetmen Koleksiyonları"]},

  {name:"SOUL, FUNK & R&B",
   subs:["Classic Soul & Motown","Funk & Groove","Contemporary R&B & Neo-Soul"]},

  {name:"SÖZLÜ ESERLER & ŞİİR",
   subs:["Şiir: Kendi Sesinden","Şiir: Yorumlar & Tiyatro","Spoken Word & Sesli Performans"]},

  {name:"TANGO",
   subs:["Carlos Gardel Külliyatı","Arjantin Tango","Astor Piazzolla & Modern Klasikler","Türkçe Tangolar","Neo-Tango & Elektronik"]},

  {name:"TÜRKÇE MÜZİK",
   subs:["Pop","Rock & Alternatif","Türk Metal","Nostaljik Pop & Yeşilçam (Aranjmanlar)","Anadolu Rock & Özgün","Halk Müziği & Türküler","Ethnic Arşiv (Kalan & Yöresel)","Sanat Müziği","Klasik Türk Müziği & Fasıllar","Arabesk & Fantezi","Oyun Havaları & Roman","Türkçe Enstrümantal","Rap & Hip-Hop","Elektronik & Dans","Manevi Arşiv","Tasavvuf & İlahi"]},

  {name:"YABANCI POP & MODERN RHYTHMS",
   subs:["80s & 90s Pop Classics","Synth-Pop & Disco","Contemporary Pop & Dance","Euro-Pop"]}
];

// ══ DURUM ══
let activeMain = null;
let activeSub  = null;

// ══ ALBÜM SAYILARI — albums.js'den hesapla ══
function buildCounts() {
  const main = {}, sub = {};
  if (typeof albums !== 'undefined') {
    albums.forEach(a => {
      const m = a.mainCategory, s = a.subCategory;
      main[m] = (main[m] || 0) + 1;
      if (s) sub[m + '||' + s] = (sub[m + '||' + s] || 0) + 1;
    });
  }
  return { main, sub };
}

// ══ KATEGORİ AĞACI OLUŞTUR ══
function buildCategoryTree() {
  const { main: mainCnt, sub: subCnt } = buildCounts();
  const tree = document.getElementById('catTree');
  let html = '';

  CATEGORIES.forEach(cat => {
    const total = mainCnt[cat.name] || 0;
    const isEmpty = total === 0;
    // İçinde albüm olan kategorilerin alt listesi VARSAYILAN AÇIK
    const openClass = !isEmpty ? ' show' : '';
    const toggleOpen = !isEmpty ? ' open' : '';

    const subItems = cat.subs.map(sub => {
      const key = cat.name + '||' + sub;
      const cnt = subCnt[key] || 0;
      const emptyClass = cnt === 0 ? ' empty' : '';
      const clickHandler = cnt > 0
        ? `onclick="filterSub('${esc(cat.name)}','${esc(sub)}',this)"`
        : '';
      return `<li class="sub-item${emptyClass}" ${clickHandler} tabindex="${cnt>0?'0':'-1'}">
        <span>${sub}</span>
        ${cnt > 0 ? `<span class="sub-count">${cnt}</span>` : ''}
      </li>`;
    }).join('');

    html += `<li class="cat-item">
      <div class="cat-header${isEmpty?' empty':''}" onclick="clickCatHeader('${esc(cat.name)}',this)" tabindex="0">
        <span class="cat-name">${cat.name}</span>
        <span class="cat-count${total>0?' has-albums':''}">${total}</span>
        <span class="cat-toggle${toggleOpen}">›</span>
      </div>
      <ul class="sub-list${openClass}">${subItems}</ul>
    </li>`;
  });

  tree.innerHTML = html;
}

function esc(s){ return s.replace(/\\/g,'\\\\').replace(/'/g,"\\'"); }

// ══ KATEGORİ HEADER TIKLAMASI ══
function clickCatHeader(mainName, headerEl) {
  const subList  = headerEl.nextElementSibling;
  const toggle   = headerEl.querySelector('.cat-toggle');
  const isOpen   = subList.classList.toggle('show');
  toggle.classList.toggle('open', isOpen);

  // Tüm filtreyi bu ana kategoriye set et
  document.querySelectorAll('.cat-header').forEach(h => h.classList.remove('active'));
  document.querySelectorAll('.sub-item').forEach(s => s.classList.remove('active'));
  headerEl.classList.add('active');
  document.getElementById('allBtn').classList.remove('active');

  activeMain = mainName;
  activeSub  = null;
  renderAlbums();
  if (window.innerWidth <= 768) toggleSidebar();
}

// ══ ALT KATEGORİ FİLTRE ══
function filterSub(main, sub, el) {
  activeMain = main; activeSub = sub;
  document.querySelectorAll('.sub-item').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.cat-header').forEach(h => h.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('allBtn').classList.remove('active');
  renderAlbums();
  if (window.innerWidth <= 768) toggleSidebar();
}

// ══ TÜMÜNÜ GÖSTER ══
function filterAll() {
  activeMain = null; activeSub = null;
  document.querySelectorAll('.cat-header').forEach(h => h.classList.remove('active'));
  document.querySelectorAll('.sub-item').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.sub-list').forEach(l => l.classList.remove('show'));
  document.querySelectorAll('.cat-toggle').forEach(t => t.classList.remove('open'));
  document.getElementById('allBtn').classList.add('active');
  renderAlbums();
  if (window.innerWidth <= 768) toggleSidebar();
}

// ══ ALBÜMLERİ RENDER ET ══
function renderAlbums() {
  if (typeof albums === 'undefined') {
    document.getElementById('albumsGrid').innerHTML =
      '<div class="empty-state">albums.js yüklenmedi. Dosyanın bu sayfayla aynı klasörde olduğunu kontrol edin.</div>';
    return;
  }

  const q    = document.getElementById('searchInput').value.toLowerCase().trim();
  const sort = document.getElementById('sortSelect').value;

  let list = albums.filter(a => {
    if (activeMain && a.mainCategory !== activeMain) return false;
    if (activeSub  && a.subCategory  !== activeSub)  return false;
    if (q) {
      const hay = `${a.title} ${a.artist} ${a.mainCategory} ${a.subCategory} ${a.label||''} ${a.year} ${a.country||''}`.toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  // Sırala
  list = [...list].sort((a, b) => {
    if (sort === 'year-desc') return b.year - a.year;
    if (sort === 'year-asc')  return a.year - b.year;
    if (sort === 'title')     return a.title.localeCompare(b.title, 'tr');
    // Sanatçıya göre A-Z
    return a.artist.localeCompare(b.artist, 'tr');
  });

  // Durum bilgisi
  const label = activeSub ? activeSub : (activeMain ? activeMain : 'Tümü');
  document.getElementById('filterInfo').innerHTML =
    `<strong>${list.length}</strong> albüm &nbsp;·&nbsp; ${label}`;

  const grid = document.getElementById('albumsGrid');
  if (!list.length) {
    grid.innerHTML = '<div class="empty-state">Bu kriterlere uyan albüm bulunamadı.</div>';
    return;
  }

  // İlk 30'u anında göster (LCP dahil), gerisini boşta yükle → TBT azalır
  const BATCH = 30;
  grid.innerHTML = list.slice(0, BATCH).map((a, i) => albumHTML(a, i)).join('');
  if (list.length > BATCH) {
    renderAlbums._tok = (renderAlbums._tok || 0) + 1;
    const tok = renderAlbums._tok;
    const rest = list.slice(BATCH).map((a, i) => albumHTML(a, BATCH + i)).join('');
    const append = () => { if (renderAlbums._tok === tok) grid.insertAdjacentHTML('beforeend', rest); };
    'requestIdleCallback' in window ? requestIdleCallback(append, {timeout:1500}) : setTimeout(append, 80);
  }
}

// ══ ALBÜM HTML ŞABLONU ══
function albumHTML(a, idx) {
  const anchor = a.anchor || slugify(a.artist + '-' + a.title);

  const tracks = (a.tracklist || []).map((t, i) =>
    `<span class="track-pill">${String(i+1).padStart(2,'0')}. ${t}</span>`
  ).join('');

  const musicians = a.musicians
    ? `<div class="sec-block">
        <div class="sec-title">Müzisyenler</div>
        <div class="sec-text">${a.musicians.replace(/\n/g,'<br>')}</div>
       </div>` : '';

  // ── Spotify ──
  const spotifyQuery = encodeURIComponent(`${a.artist} ${a.title}`);
  const spotifyBlock = a.spotify
    ? `<div class="spotify-embed-wrap" id="sp-wrap-${anchor}" style="display:none">
        <iframe src="https://open.spotify.com/embed/album/${a.spotify}?utm_source=generator&theme=0"
                width="100%" height="152" frameborder="0" allowfullscreen=""
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"></iframe>
       </div>
       <button class="spotify-btn" onclick="toggleSpotify('${anchor}',this)" aria-label="${a.artist} – ${a.title} Spotify'da dinle">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="#1ed760"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 0 1-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 1 1-.277-1.215c3.809-.87 7.077-.496 9.712 1.115a.623.623 0 0 1 .207.857zm1.223-2.722a.779.779 0 0 1-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.779.779 0 0 1-.968-.519.78.78 0 0 1 .52-.968c3.632-1.102 8.147-.568 11.228 1.324a.779.779 0 0 1 .257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 1 1-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 0 1-.955 1.609z"/></svg>
         ▶ Spotify'da Dinle
       </button>`
    : `<a class="spotify-btn" href="https://open.spotify.com/search/${spotifyQuery}" target="_blank" rel="noopener" aria-label="${a.artist} – ${a.title} Spotify'da ara">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="#1ed760"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 0 1-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 1 1-.277-1.215c3.809-.87 7.077-.496 9.712 1.115a.623.623 0 0 1 .207.857zm1.223-2.722a.779.779 0 0 1-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.779.779 0 0 1-.968-.519.78.78 0 0 1 .52-.968c3.632-1.102 8.147-.568 11.228 1.324a.779.779 0 0 1 .257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 1 1-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 0 1-.955 1.609z"/></svg>
         Spotify'da Ara →
       </a>`;

  const tribute = a.tribute
    ? `<div class="sec-block" style="border-left-color:var(--purple)">
        <div class="sec-title" style="color:var(--purple)">🕯 Saygı</div>
        <div class="sec-text">${a.tribute}</div>
       </div>` : '';

  const eager = idx < 3;
  return `
<article class="entry" id="${anchor}" style="scroll-margin-top:80px">
  <div class="cover-wrap">
    <a href="#${anchor}" style="display:block;text-decoration:none">
      <img class="cover"
           src="covers/${a.cover}"
           alt="${a.artist} – ${a.title} albüm kapağı"
           loading="${eager ? 'eager' : 'lazy'}"
           decoding="${eager ? 'sync' : 'async'}"
           ${eager ? 'fetchpriority="high"' : ''}
           width="200" height="200"
           onerror="this.src='covers/placeholder.webp'">
    </a>
    <span class="cover-badge">${a.year}</span>
  </div>

  <div class="album-meta">
    <div class="album-cat">${a.mainCategory} &rsaquo; ${a.subCategory}</div>
    <div class="album-title-text">${a.title}</div>
    <div class="album-artist-text">${a.artist}</div>
    <div class="album-info-row">
      <span class="info-pill">${a.year}</span>
      ${a.label   ? `<span class="info-pill">${a.label}</span>`   : ''}
      ${a.country ? `<span class="info-pill">${a.country}</span>` : ''}
    </div>

    ${spotifyBlock}

    <div class="sections">
      ${tribute}

      ${a.tracklist?.length ? `
      <div class="sec-block">
        <div class="sec-title">Şarkı Listesi</div>
        <div class="tracklist-pills">${tracks}</div>
      </div>` : ''}

      ${musicians}

      ${a.coverDesigner ? `
      <div class="sec-block">
        <div class="sec-title">Kapak Hikayesi</div>
        <div class="sec-text">
          <strong>Tasarımcı:</strong> ${a.coverDesigner}<br>
          ${a.coverConcept || ''}
        </div>
      </div>` : ''}

      ${a.hiddenFacts ? `
      <div class="sec-block">
        <div class="sec-title">🔍 Bunu Biliyor muydunuz?</div>
        <div class="sec-text">${a.hiddenFacts}</div>
      </div>` : ''}

      ${a.era ? `
      <div class="sec-block">
        <div class="sec-title">Dönemin Atmosferi</div>
        <div class="sec-text">${a.era}</div>
      </div>` : ''}

      ${a.curatorNote ? `
      <div class="sec-block">
        <div class="sec-title">Küratör Yorumu</div>
        <div class="sec-text">${a.curatorNote}</div>
      </div>` : ''}

      ${a.importance ? `
      <div class="sec-block">
        <div class="sec-title">Neden Dinlemeli?</div>
        <div class="sec-text">${a.importance}</div>
      </div>` : ''}
    </div>
  </div>
</article>`;
}

// ══ SPOTİFY TOGGLE ══
function toggleSpotify(anchor, btn) {
  const wrap = document.getElementById('sp-wrap-' + anchor);
  if (!wrap) return;
  const isOpen = wrap.style.display !== 'none';
  wrap.style.display = isOpen ? 'none' : 'block';
  btn.innerHTML = isOpen
    ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="#1ed760"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 0 1-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 1 1-.277-1.215c3.809-.87 7.077-.496 9.712 1.115a.623.623 0 0 1 .207.857zm1.223-2.722a.779.779 0 0 1-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.779.779 0 0 1-.968-.519.78.78 0 0 1 .52-.968c3.632-1.102 8.147-.568 11.228 1.324a.779.779 0 0 1 .257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 1 1-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 0 1-.955 1.609z"/></svg> ▶ Spotify\'da Dinle'
    : '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 0 1-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 1 1-.277-1.215c3.809-.87 7.077-.496 9.712 1.115a.623.623 0 0 1 .207.857zm1.223-2.722a.779.779 0 0 1-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.779.779 0 0 1-.968-.519.78.78 0 0 1 .52-.968c3.632-1.102 8.147-.568 11.228 1.324a.779.779 0 0 1 .257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 1 1-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 0 1-.955 1.609z"/></svg> ✕ Kapat';
}

// ══ YARDIMCI ══
function slugify(str) {
  return str.toLowerCase()
    .replace(/ğ/g,'g').replace(/ü/g,'u').replace(/ş/g,'s')
    .replace(/ı/g,'i').replace(/ö/g,'o').replace(/ç/g,'c')
    .replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
}

// ══ MOBİL SİDEBAR ══
function toggleSidebar() {
  const sb  = document.getElementById('sidebar');
  const btn = document.getElementById('menuToggleBtn');
  const open = sb.classList.toggle('active');
  btn.setAttribute('aria-expanded', open);
}
document.addEventListener('click', e => {
  const sb = document.getElementById('sidebar');
  if (window.innerWidth <= 768 && sb.classList.contains('active')
      && !sb.contains(e.target)
      && !e.target.closest('#menuToggleBtn')) {
    sb.classList.remove('active');
  }
});

// ══ HASH KONTROLÜ (direkt link) ══
function checkHash() {
  if (!location.hash) return;
  const id = location.hash.slice(1);
  setTimeout(() => {
    const el = document.getElementById(id);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      el.style.transition = 'background .8s';
      el.style.backgroundColor = 'rgba(52,211,153,.15)';
      setTimeout(() => el.style.backgroundColor = '', 2200);
    }
  }, 250);
}

// ══ BAŞLAT ══
function initApp() {
  buildCategoryTree();
  filterAll();
  checkHash();
}

// Lora fontu yüklenmeden render yapılmasın → CLS önlenir
if (document.fonts && document.fonts.ready) {
  document.fonts.ready.then(function() {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initApp);
    } else {
      initApp();
    }
  });
} else {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initApp);
  } else {
    initApp();
  }
}
window.addEventListener('hashchange', checkHash);
</script>
</body>
</html>
