/*
Theme Name: zerennet
Theme URI: http://www.zerennet.net
Version: 2.1
Author: Muharrem Zeren
Author URI: http://www.zerennet.net
*/
@charset "utf-8";

/* ==================================================
   TASARIM SİSTEMİ — RENK DEĞİŞKENLERİ
   Tek yerden yönetim. Bir rengi buradan değiştir, tüm site değişsin.
   (Değerler mevcut tasarımdan alındı; görünüm birebir korunuyor.)
   ================================================== */
:root {
    /* Ana vurgu — kırmızı */
    --kirmizi:        #d32f2f;
    --kirmizi-koyu:   #b71c1c;
    --kirmizi-acik:   #ff6b6b;
    --kirmizi-soluk:  #ffcdd2;   /* hover kenar */

    /* Koyu panel/giriş yüzeyleri */
    --panel-koyu:     #1e1e1e;   /* filtre paneli zemini */
    --giris-koyu:     #2c2c2c;   /* input/select zemini */
    --kenar-koyu:     #3a3a3a;   /* koyu yüzey kenarı */

    /* Metin */
    --metin:          #222222;   /* başlık/koyu metin */
    --metin-orta:     #555555;   /* gövde */
    --metin-soluk:    #999999;   /* meta/ikincil */
    --metin-acik:     #aaaaaa;   /* koyu zeminde etiket */

    /* Zemin ve kenar (açık taraf) */
    --zemin:          #ffffff;
    --zemin-alt:      #f4f4f4;   /* sayfa arka planı */
    --zemin-rozet:    #f3f4f6;   /* rozet/etiket zemini */
    --kenar:          #eeeeee;
    --kenar-orta:     #dddddd;

    /* Yardımcı */
    --link-hover:     #0000ff;
    --turuncu:        #e67e22;   /* eski sayfalama vurgusu */

    /* Ölçü */
    --kutu-golge:     0 2px 8px rgba(0,0,0,.06);
    --kutu-golge-hover: 0 10px 28px rgba(211,47,47,.15);
    --r-kart:         10px;
    --r-panel:        14px;
    --max-genislik:   1200px;
}

/* ==================================================
   GENEL (FOOTER SABİTLEME DÜZELTMESİ)
   ================================================== */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900&subset=latin,latin-ext);

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

strong, b {
    font-weight: bold;
}

ul, ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

body {
    font-size: 16px;
    background: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;
}

@media (max-width: 768px) {
    body { padding-top: 60px; }
}

#content { flex: 1 0 auto; }

a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
}
a:hover { color: #0000ff; }

/* ==================================================
   HEADER / NAV
   ================================================== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 99999;
}

.site-nav .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav .site-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.site-nav li a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
}
.site-nav li a:hover { background: #f2f2f2; }

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: #333;
    margin: 4px 0;
}

/* ==================================================
   CONTENT / ARTICLE
   ================================================== */
article {
    border: 1px solid #f2f2f2;
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 1px 3px rgba(0,0,0,0.05);
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    margin-bottom: 30px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ==================================================
   ALBÜM & SANATÇI GRID (FINAL)
   ================================================== */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.archive-grid .archive-card {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    transition: all .25s ease;
}
.archive-grid .archive-card:hover {
    background: #7a00df;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.archive-card .thumb {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.archive-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-card .hata {
    margin-top: auto;
    padding: 8px 10px;
    text-align: center;
}
.archive-card .hata a {
    display: block;
    color: #333;
    line-height: 1.3;
}
.archive-card:hover .hata a { color: #fff; }

/* ==================================================
   LİSTE STİLLERİ & BAŞLIK
   ================================================== */
ul:not(.nav-menu) {
    list-style: none;
    padding: 0;
}
ul:not(.nav-menu) li {
    background: #f9f9f9;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
ul:not(.nav-menu) li:hover {
    background: #ff6b6b;
    transform: translateX(5px);
}
ul:not(.nav-menu) li:hover a { color: #fff; }

.baslik {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    background: #f9f9f9;
    padding: 10px 15px;
    border-left: 5px solid #d32f2f;
    border-bottom: 2px solid #eeeeee;
    margin: 8px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    overflow-x: auto;
}
.baslik a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    margin-right: 2px;
}
.baslik:hover {
    background: #f1f1f1;
    border-bottom-color: #d32f2f;
}
.baslik a:hover { color: #d32f2f !important; }

/* ==================================================
   RIBBON / BİYOGRAFİ
   ================================================== */
.ribbon-wrapper {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px;
}
.ribbon-card {
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #eee;
    transition: .25s;
}
.ribbon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.ribbon-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.ribbon-title {
    background: #ff6b6b;
    color: #fff;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
}

/* ==================================================
   TAG GRID (3 SÜTUN)
   ================================================== */
.tag-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
}
@media (max-width: 991px) { .tag-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 576px) { .tag-grid { grid-template-columns: 1fr !important; } }

/* ==================================================
   FOOTER (EN ALTA SABİT)
   ================================================== */
#footer {
    flex-shrink: 0;
    background: #111;
    color: #ccc;
    text-align: center;
    padding: 14px 10px;
    font-size: 14px;
    margin-top: 30px;
}
#footer a { color: #ccc; }

/* ==================================================
   DARK MODE & PAGINATION
   ================================================== */
body.dark-mode { background-color: #121212 !important; color: #e0e0e0 !important; }
body.dark-mode #content { background-color: #121212 !important; }
body.dark-mode .baslik, body.dark-mode article { background: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode h1, body.dark-mode h5, body.dark-mode strong { color: #fff !important; }

.pagination { display: flex; justify-content: center; list-style: none; padding: 20px 0; gap: 5px; }
.page-link { color: #d32f2f; border: 1px solid #dee2e6; padding: 8px 16px; border-radius: 4px; background: #fff; }
.page-item.active .page-link { background-color: #d32f2f !important; border-color: #d32f2f !important; color: #fff !important; }

/* ==================================================
   DİĞER
   ================================================== */
.video-wrapper { position: relative; width: 100%; padding-top: 56.25%; background: #000; margin-bottom: 15px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.dashicons { vertical-align: middle; margin-right: 4px; }

.video-alt-yazi {
    display: block !important;
    width: 100% !important;
    background: #f8f8f8 !important;
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    border-left: 5px solid #d32f2f !important;
    border-right: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 0 15px 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    clear: both;
}
.video-alt-yazi span { margin-right: 8px; font-size: 18px; }

.yt-video-container {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

@media print {
    .no-print, #footer, .site-nav { display: none !important; }
}

blockquote {
    background-color: #fffafb;
    border: 1px solid #d32f2f;
    border-left: 10px solid #d32f2f;
    color: #080707;
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
    font-style: normal;
    letter-spacing: 0.5px;
    padding: 10px;
    margin: 15px 0;
    line-height: 1.6;
    border-radius: 3px;
}

.album-kapak-cerceve {
    text-align: center;
    margin: 10px 0;
}
.album-kapak-cerceve figcaption {
    font-size: 14px;
    color: #555;
    margin-top: 8px;
    font-style: italic;
}

/* ==================================================
   TÜRKÜ ARŞİVİ ÖZEL STİLLERİ
   ================================================== */
#turku-ara-wrap {
    background: #f4f4f4;
    padding: 40px 0;
}

.zn-alpha-panel {
    background: #1e1e1e;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.zn-alpha-label {
    color: #aaa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.zn-alpha-label span { color: #d32f2f; font-size: 14px; }

.zn-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zn-letter-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    background: #2c2c2c;
    border: 1.5px solid #3a3a3a;
    border-radius: 6px;
    color: #ccc;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    line-height: 34px;
    text-align: center;
}
.zn-letter-btn:hover { border-color: #d32f2f; color: #d32f2f; }
.zn-letter-btn.active { background: #d32f2f; color: #fff; border-color: #d32f2f; }
.zn-letter-btn.all-btn { background: #3a3a3a; color: #fff; min-width: 55px; }
.zn-letter-btn.all-btn.active { background: #555; border-color: #555; }

.zn-panel {
    background: #1e1e1e;
    border-radius: 14px;
    padding: 28px 24px 20px;
    margin-bottom: 36px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    position: sticky;
    top: 0;
    z-index: 999;
}

.zn-panel-body {
    transition: max-height .3s ease, opacity .3s ease;
    max-height: 600px;
    opacity: 1;
    overflow: hidden;
}
.zn-panel.collapsed .zn-panel-body {
    max-height: 0;
    opacity: 0;
}

.zn-panel-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 2px solid #d32f2f;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.zn-panel:not(.collapsed) .zn-panel-title { margin-bottom: 20px; }

.zn-panel-toggle {
    margin-left: auto;
    font-size: 12px;
    color: #888;
    background: #2c2c2c;
    border-radius: 6px;
    padding: 3px 10px;
    transition: color .2s;
}
.zn-panel-title:hover .zn-panel-toggle { color: #fff; }

.zn-filter-badge {
    background: #d32f2f;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    display: none;
}

.zn-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.zn-filter-col {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.zn-filter-col label {
    color: #aaa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.zn-filter-col select {
    background: #2c2c2c;
    border: 1.5px solid #3a3a3a;
    border-radius: 8px;
    color: #f0f0f0;
    padding: 9px 12px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.zn-filter-col select:focus { border-color: #d32f2f; }
.zn-filter-col select option { background: #2c2c2c; }

.zn-search-col { flex: 2 1 240px; }
.zn-search-col input {
    background: #2c2c2c;
    border: 1.5px solid #3a3a3a;
    border-radius: 8px;
    color: #f0f0f0;
    padding: 9px 14px;
    font-size: 13px;
    width: 100%;
    outline: none;
    transition: border-color .2s;
}
.zn-search-col input::placeholder { color: #666; }
.zn-search-col input:focus { border-color: #d32f2f; }

.zn-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.zn-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.zn-btn-sifirla { background: #3a3a3a; color: #ccc; }
.zn-btn-sifirla:hover { background: #444; }

.zn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.zn-tag {
    background: #d32f2f22;
    border: 1px solid #d32f2f55;
    color: #ff6b6b;
    border-radius: 20px;
    padding: 4px 12px 4px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .15s;
}
.zn-tag:hover { background: #d32f2f44; }
.zn-tag-x { font-weight: 900; color: #ff4444; }

.zn-loader {
    display: none;
    align-items: center;
    gap: 10px;
    color: #d32f2f;
    font-size: 13px;
    margin-left: auto;
}

.zn-spinner {
    width: 20px; height: 20px;
    border: 2px solid #3a3a3a;
    border-top-color: #d32f2f;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.zn-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.zn-result-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    border-left: 4px solid #d32f2f;
    padding-left: 12px;
    margin: 0;
}

.zn-result-count {
    font-size: 13px;
    color: #888;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 4px 14px;
}

.zn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.zn-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.zn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(211,47,47,.15);
    border-color: #ffcdd2;
    text-decoration: none;
    color: inherit;
}

.zn-card-thumb {
    /* Türkü/sanatçı görselleri 400x400 kare. Kare oran kullanılınca
       boşluk kalmıyor ve kart genişliğiyle birlikte ölçekleniyor.
       contain: kare olmayan bir görsel gelirse kırpılmaz. */
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fdfdfd;
}

.zn-card-thumb-placeholder {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1e1e 0%, #2c2c2c 100%);
    color: #555;
    font-size: 36px;
}

.zn-card-body { padding: 10px 12px 12px; }

.zn-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

.zn-card-sanatci {
    font-size: 11px;
    color: #d32f2f;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zn-card-meta {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zn-person-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.zn-person-link:hover { opacity: .7; }

.zn-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #999;
}
.zn-empty-icon { font-size: 52px; margin-bottom: 12px; }
.zn-empty p { font-size: 16px; color: #555; margin-bottom: 6px; }

.zn-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 36px;
}

.zn-pg-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid #ddd;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .15s;
}
.zn-pg-btn:hover  { border-color: #d32f2f; color: #d32f2f; }
.zn-pg-btn.active { background: #d32f2f; color: #fff; border-color: #d32f2f; }
.zn-pg-btn:disabled { opacity: .35; cursor: default; }

/* Türkü arşivi mobil */
@media (max-width: 576px) {
    .zn-filter-col { flex: 1 1 100%; }
    .zn-search-col { flex: 1 1 100%; }
    .zn-grid { grid-template-columns: repeat(2, 1fr); }
    .zn-letter-btn { min-width: 30px; height: 30px; font-size: 12px; line-height: 30px; }
}
/* Header ek stilleri */
.nav-brand {
    text-decoration: none;
}
.nav-brand .site-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.zerennet-search-box {
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
}

.favori-link {
    color: #d32f2f !important;
    font-weight: bold;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.favori-icon-wrapper {
    position: relative;
    display: inline-block;
}
.favori-icon {
    font-size: 20px;
    vertical-align: middle;
}
.favori-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #d32f2f;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==================================================
   FOOTER
   ================================================== */
/* Footer */
#footer {
    flex-shrink: 0;
    border-top: 4px solid #d32f2f;
    background: #2c3e50;
    color: #fff;
    padding: 25px 10px;
    text-align: center;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.footer-links {
    margin-bottom: 15px;
}
.footer-links a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    margin: 0 5px;
}
.footer-links a:hover {
    color: #d32f2f;
    text-decoration: underline;
}
.footer-copy {
    font-size: 13px;
    opacity: .8;
}

/* ==================================================
   MOBİL MENÜ TOGGLE
   ================================================== */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10001;
    outline: none;
}
.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.4s ease;
}
.nav-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

@media (max-width: 991px) {
    .nav-toggle {
        display: block !important;
    }
    .nav-menu {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff !important;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 99999 !important;
        padding: 10px 0 !important;
    }
    .nav-menu.active {
        display: flex !important;
    }
}

/* ==================================================
   FAVORİ SAYACI
   ================================================== */
#fav-menu-count {
    font-size: 12px !important;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: none; /* JS ile inline-flex yapılacak */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ==================================================
   FAVORİ & BEĞENİ BUTONLARI
   ================================================== */
.fav-btn.is-fav {
    background: #d32f2f !important;
    color: #fff !important;
}
.z-like-btn {
    transition: all 0.3s ease;
}
.z-like-btn.is-liked {
    background: #2196F3 !important;
    color: #fff !important;
}

/* ==================================================
   VİDEO OYNATICI
   ================================================== */
.yt-video-container:hover .yt-thumb {
    transform: scale(1.03);
}
.yt-video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 15px;
}
@media (max-width: 768px) {
    .yt-play-button {
        width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }
}
.yt-video-container:hover .yt-thumb {
    opacity: 1 !important;
    transform: scale(1.02);
}
.yt-play-button i {
    margin-left: 5px;
}

/* Albüm arşivi ek stilleri */
#album-ara-wrap {
    background: #f4f4f4;
    padding: 40px 0;
}
.zn-album-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.zn-album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(211,47,47,.15);
    border-color: #ffcdd2;
    text-decoration: none;
    color: inherit;
}
.zn-album-thumb {
    /* Albüm kapakları kare değil, farklı oranlarda. contain kullanılıyor ki
       kapak KIRPILMADAN tam görünsün; artan alan açık zeminle dolar. */
    aspect-ratio: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fdfdfd;
}
.zn-album-thumb-placeholder {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1e1e 0%, #2c2c2c 100%);
    color: #555;
    font-size: 40px;
}
.zn-album-body {
    padding: 10px 12px 14px;
}
.zn-album-name {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.zn-album-sanatci {
    font-size: 13px;
    color: #d32f2f;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.zn-album-meta {
    font-size: 12.5px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination .page-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    margin: 0 3px;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
    font-size: 14px;
    background: #fff;
    transition: 0.2s;
}
.pagination .page-link:hover {
    background: #f0f0f0;
    border-color: #bbb;
}
.pagination .page-link.active {
    background-color: #e67e22;
    border-color: #e67e22;
    color: #fff;
    font-weight: bold;
}
.pagination .page-link.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.yt-video-container:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}
.yt-video-container:hover img {
    opacity: 0.9 !important;
}
.yt-video-container iframe {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border-radius: 15px;
}


/* ==================================================
   TAKSONOMİ LİSTE SAYFALARI (makam, konu, tür, yöre...)
   Ortak kart + panel — inline stilleri buraya taşındı, tek tutarlı görünüm.
   ================================================== */
.zn-tax-wrap {
    background: var(--zemin-alt);
    padding: 30px 0;
    min-height: 60vh;
}
.zn-tax-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.zn-tax-card {
    background: var(--zemin);
    border: 1px solid var(--kenar);
    border-radius: var(--r-kart);
    text-decoration: none;
    color: var(--metin);
    display: block;
    overflow: hidden;
    box-shadow: var(--kutu-golge);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.zn-tax-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kutu-golge-hover);
    border-color: var(--kirmizi-soluk);
    color: var(--metin);
    text-decoration: none;
}
.zn-tax-card .zn-tax-resim {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    display: block; background: var(--zemin-alt);
}
.zn-tax-card .zn-tax-govde { padding: 14px 12px; text-align: center; }
.zn-tax-card .zn-tax-ad { font-weight: 800; font-size: 15px; margin-bottom: 4px; line-height: 1.3; }
.zn-tax-card .zn-tax-say { font-size: 12.5px; color: var(--kirmizi); font-weight: 600; }

/* Taksonomi arama paneli — tek satır arama (koyu panel, referansla aynı) */
.zn-tax-panel {
    background: var(--panel-koyu);
    border-radius: var(--r-panel);
    padding: 24px;
    margin-bottom: 26px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.zn-tax-panel label {
    display: block; color: var(--metin-acik); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
.zn-tax-panel input {
    width: 100%; background: var(--giris-koyu); border: 1.5px solid var(--kenar-koyu);
    border-radius: 8px; color: #f0f0f0; padding: 10px 14px; font-size: 13.5px;
    outline: none; transition: border-color .2s;
}
.zn-tax-panel input:focus { border-color: var(--kirmizi); }
.zn-tax-panel input::placeholder { color: #666; }

/* ==================================================
   TAKSONOMİ DETAY SAYFASI — 8/4 iki kolon + sidebar
   ================================================== */
.zn-tax-detay { background: #fcfcfc; padding: 30px 0; }
.zn-breadcrumb { margin-bottom: 20px; font-size: 13px; color: var(--metin-soluk); }
.zn-breadcrumb a { color: var(--metin-orta); text-decoration: none; }
.zn-breadcrumb a:hover { color: var(--kirmizi); }

/* Sidebar kutuları */
.zn-yan-kutu {
    background: var(--zemin);
    border: 1px solid var(--kenar);
    border-radius: var(--r-kart);
    overflow: hidden;
    box-shadow: var(--kutu-golge);
    margin-bottom: 20px;
}
.zn-yan-resim {
    width: 100%; height: 200px;
    background-size: cover; background-position: center;
    background-color: var(--panel-koyu);
}
.zn-yan-govde { padding: 18px; }
.zn-yan-baslik { font-size: 18px; font-weight: 800; color: var(--metin); margin: 0 0 14px; }
.zn-yan-alt-baslik {
    font-size: 15px; font-weight: 700; color: var(--metin); margin: 0 0 12px;
    padding-bottom: 8px; border-bottom: 2px solid var(--kirmizi);
}

/* İstatistik rozetleri */
.zn-yan-istatistik { display: flex; gap: 12px; margin-bottom: 14px; }
.zn-ist-oge {
    flex: 1; text-align: center; background: var(--zemin-alt);
    border-radius: 8px; padding: 12px 8px;
}
.zn-ist-sayi { display: block; font-size: 24px; font-weight: 800; color: var(--kirmizi); line-height: 1; }
.zn-ist-etiket { display: block; font-size: 11px; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

.zn-yan-aciklama { font-size: 13.5px; line-height: 1.7; color: var(--metin-orta); }

/* Popüler liste */
.zn-populer-liste { list-style: none; counter-reset: pop; padding: 0; margin: 0; }
.zn-populer-liste li {
    counter-increment: pop;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--kenar);
    font-size: 13.5px;
}
.zn-populer-liste li:last-child { border-bottom: none; }
.zn-populer-liste li::before {
    content: counter(pop);
    flex-shrink: 0; width: 22px; height: 22px;
    background: var(--kirmizi); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.zn-populer-liste li a { flex: 1; color: var(--metin); text-decoration: none; }
.zn-populer-liste li a:hover { color: var(--kirmizi); }
.zn-populer-say { font-size: 11px; color: var(--metin-soluk); }

/* Mobilde sidebar alta iner (Bootstrap col-sm-12 zaten yapıyor) */
@media (max-width: 991px) {
    .zn-tax-detay aside { margin-top: 24px; }
}

/* ==================================================
   TAKSONOMİ DETAY — yöre kalıbı (ortak, tüm tax detayları)
   img tabanlı kart + sidebar kutuları. Inline stiller buraya taşındı.
   ================================================== */
.zn-detay-wrap { background: var(--zemin); padding: 20px 0; }
.zn-detay-breadcrumb {
    padding: 15px 0; font-size: 13px; color: var(--metin-soluk);
    border-bottom: 1px solid #f0f0f0; margin-bottom: 20px;
}
.zn-detay-breadcrumb a { color: var(--kirmizi); text-decoration: none; }
.zn-detay-baslik { font-size: 18px; margin: 0 0 20px; line-height: 1.4; color: var(--metin); font-weight: 800; }

/* Kart ızgarası — 4/3/2 kırılım */
.zn-detay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.zn-detay-kart { text-align: center; text-decoration: none; display: block; }
.zn-detay-kart img {
    /* Görseller 400x400 kare; kutu da kare olduğu için contain ile
       boşluksuz tam oturur. Kare olmayan bir görsel gelirse kırpılmaz,
       kenarda açık zemin görünür. */
    width: 100%; aspect-ratio: 1/1; object-fit: contain;
    background: #fdfdfd;
    border-radius: 10px; border: 1px solid var(--kenar); transition: .3s;
}
.zn-detay-kart:hover img { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0,0,0,.1); }
.zn-detay-kart p {
    font-size: 13px; margin-top: 8px; color: var(--metin); font-weight: 700;
    height: 32px; overflow: hidden; line-height: 1.2;
}
@media (max-width: 991px) { .zn-detay-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .zn-detay-grid { grid-template-columns: repeat(2, 1fr); } }

/* Sidebar kutuları */
.zn-side-kutu {
    background: var(--zemin); border: 1px solid var(--kenar);
    padding: 15px; border-radius: 12px; margin-bottom: 25px;
}
.zn-side-baslik {
    border-bottom: 2px solid var(--kirmizi); margin-bottom: 15px;
}
.zn-side-baslik h4 { font-size: 16px; margin: 0; padding-bottom: 5px; font-weight: 800; }

/* Sidebar: taksonomi resmi + açıklama + istatistik */
.zn-side-resim {
    width: 100%; height: 180px; border-radius: 10px;
    object-fit: cover; margin-bottom: 12px; display: block;
    background: var(--zemin-alt);
}
.zn-side-ist {
    text-align: center; background: var(--zemin-alt); border-radius: 8px;
    padding: 12px; margin-bottom: 12px;
}
.zn-side-ist .sayi { font-size: 26px; font-weight: 800; color: var(--kirmizi); line-height: 1; }
.zn-side-ist .etiket { font-size: 11px; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: .5px; }
.zn-side-aciklama { font-size: 13px; line-height: 1.7; color: var(--metin-orta); }

/* Popüler liste */
.zn-side-populer { list-style: none; padding: 0; margin: 0; }
.zn-side-populer li {
    padding: 10px 0; border-bottom: 1px dashed var(--kenar);
    display: flex; align-items: center; gap: 8px;
}
.zn-side-populer li:last-child { border-bottom: none; }
.zn-side-populer li .ikon { color: #2196F3; }
.zn-side-populer li a { color: var(--metin-orta); font-weight: 600; text-decoration: none; font-size: 14px; flex: 1; }
.zn-side-populer li a:hover { color: var(--kirmizi); }
.zn-side-populer li small { color: var(--metin-soluk); }

/* Etiket bulutu (diğer yöreler/makamlar) */
.zn-side-etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.zn-side-etiketler a {
    background: var(--zemin-alt); color: var(--metin-orta);
    padding: 5px 10px; border-radius: 4px; font-size: 12px;
    text-decoration: none; border: 1px solid var(--kenar); transition: .2s;
}
.zn-side-etiketler a:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }

/* ==================================================
   MOBİL ÖNCELİKLİ DÜZENLEMELER
   Ziyaretçilerin ~%90'ı mobil. Buradaki kurallar masaüstünü
   bozmadan telefon deneyimini birinci sınıf yapar.
   ================================================== */

/* Yatay kaydırma koruması — tek bir taşan öğe tüm sayfayı kaydırır */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }

/* ---------- TABLET VE ALTI (991px) ---------- */
@media (max-width: 991px) {
    .container { padding: 0 14px; }

    /* Taksonomi detay: sol/sağ üst üste binince nefes payı */
    .zn-detay-wrap { padding: 14px 0; }
    .zn-detay-baslik { font-size: 17px; }
}

/* ---------- TELEFON (768px ve altı) ---------- */
@media (max-width: 768px) {
    /* Izgaralar: telefonda 2 sütun — tek sütun yer israfı olur */
    .zn-tax-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .zn-grid       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .zn-detay-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Kart içi yazılar telefonda biraz küçülsün ki taşmasın */
    .zn-tax-card .zn-tax-ad   { font-size: 14px; }
    .zn-tax-card .zn-tax-say  { font-size: 11.5px; }
    .zn-tax-card .zn-tax-govde{ padding: 11px 9px; }
    .zn-detay-kart p          { font-size: 12px; height: 30px; }

    /* Koyu filtre panelleri: telefonda daha dar padding */
    .zn-panel, .zn-tax-panel { padding: 16px 14px; border-radius: 12px; margin-bottom: 20px; }
    .zn-panel-title { font-size: 16px; }

    /* Süzgeç alanları tam genişlik, alt alta */
    .zn-filter-row  { flex-direction: column; gap: 12px; }
    .zn-filter-col,
    .zn-search-col  { flex: 1 1 100%; width: 100%; }

    /* DOKUNMA HEDEFLERİ — parmakla rahat basılsın (min 44px) */
    .zn-filter-col select,
    .zn-filter-col input,
    .zn-tax-panel input { min-height: 44px; font-size: 16px; } /* 16px: iOS'ta odaklanınca zoom yapmaz */
    .zn-btn { min-height: 44px; width: 100%; }
    .zn-pg-btn { min-width: 44px; height: 44px; }
    .zn-letter-btn { min-width: 38px; height: 38px; line-height: 38px; font-size: 13px; }

    /* Sonuç başlığı alt alta */
    .zn-result-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .zn-result-title  { font-size: 17px; }

    /* Sidebar kutuları */
    .zn-side-kutu  { padding: 14px; margin-bottom: 18px; }
    .zn-side-resim { height: 160px; }
    .zn-side-populer li { padding: 12px 0; }        /* dokunma alanı */
    .zn-side-populer li a { font-size: 14px; }
    .zn-side-etiketler a { padding: 8px 12px; font-size: 12.5px; }  /* etiketler parmakla basılabilir */

    /* Türkü detay: sözler telefonda rahat okunsun */
    .turku-soz, .soz-alani { font-size: 16px; line-height: 1.9; }
}

/* ---------- KÜÇÜK TELEFON (400px ve altı) ---------- */
@media (max-width: 400px) {
    .container { padding: 0 10px; }
    .zn-tax-grid, .zn-grid, .zn-detay-grid { gap: 10px; }
    .zn-tax-card .zn-tax-ad { font-size: 13px; }
    .zn-detay-baslik { font-size: 16px; }
    .zn-side-resim { height: 140px; }
}

/* ---------- MOBİL MENÜ: dokunma hedefleri ---------- */
@media (max-width: 991px) {
    .nav-menu li { width: 100%; }
    .nav-menu li a {
        display: block;
        width: 100%;
        padding: 14px 18px;          /* parmakla rahat basılır (>=44px yükseklik) */
        font-size: 15.5px;
        border-bottom: 1px solid var(--kenar);
    }
    .nav-menu li:last-child a { border-bottom: none; }
    .nav-menu li a:active { background: var(--zemin-alt); }

    /* Hamburger butonu da yeterince büyük olsun */
    .nav-toggle { padding: 10px; min-width: 44px; min-height: 44px; }
}

/* ---------- DAR TELEFON (480px ve altı): TEK SÜTUN ---------- */
/* Telefonda kartlar yan yana sıkışmasın — tam genişlik tek kart.
   Bu blok en sonda olduğu için yukarıdaki 2 sütun kurallarını ezer. */
@media (max-width: 600px) {
    .zn-tax-grid,
    .zn-grid,
    .zn-detay-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Tek sütunda kart yazıları normal boyuta dönsün (artık yer var) */
    .zn-tax-card .zn-tax-ad  { font-size: 16px; }
    .zn-tax-card .zn-tax-say { font-size: 13px; }
    .zn-tax-card .zn-tax-govde { padding: 14px 16px; }

    /* Tam genişlik resim çok uzun olmasın — daha yatay oran */
    .zn-tax-card .zn-tax-resim { aspect-ratio: 16/9; }

    /* Türkü kartı: kare resim tam genişlikte devasa olur, sınırla */
    .zn-detay-kart img { aspect-ratio: 1/1; object-fit: contain; }
    .zn-detay-kart p   { font-size: 14px; height: auto; min-height: 20px; }
}

/* ==================================================
   TÜRKİYE HARİTASI (yoreler, memleketler, dogum_yerleri, index)
   Ortak stil — sayfalardaki inline tekrarlar buraya taşındı.
   ================================================== */
.harita-section { background: var(--zemin-alt); padding: 40px 0; border-bottom: 1px solid var(--kenar); }
.harita-wrapper {
    position: relative; background: var(--zemin); border-radius: 20px;
    padding: 25px; border: 1px solid #f0f0f0; box-shadow: 0 5px 15px rgba(0,0,0,.05);
}
.harita-wrapper svg { width: 100%; height: auto; max-height: 450px; display: block; }
.harita-wrapper path { stroke: #fff; stroke-width: 1; cursor: pointer; transition: .3s; }
.harita-wrapper path:hover { filter: brightness(.85); stroke: var(--kirmizi); stroke-width: 2; }

.harita-tooltip {
    position: fixed; background: rgba(18,18,18,.98); color: #fff;
    padding: 15px; border-radius: 15px; display: none; z-index: 10000;
    border-top: 4px solid var(--kirmizi); box-shadow: 0 15px 40px rgba(0,0,0,.5);
    pointer-events: none; width: 220px;
}
.tt-head { font-size: 16px; font-weight: 900; color: var(--kirmizi); text-align: center; margin-bottom: 5px; }
.tt-info { font-size: 12px; display: flex; justify-content: space-between; margin-bottom: 5px; color: #ddd; }
.tt-link { display: block; text-align: center; margin-top: 8px; color: #ffeb3b; font-size: 11px; cursor: pointer; text-decoration: underline; }

/* Harita mobilde: dokunmatik cihazda hover yok, tooltip dokununca çıkar.
   Küçük ekranda harita alanı daralsın, sayfa yer kaplamasın. */
@media (max-width: 768px) {
    .harita-section { padding: 22px 0; }
    .harita-wrapper { padding: 12px; border-radius: 14px; }
    .harita-wrapper svg { max-height: 260px; }
    .harita-tooltip { width: 190px; padding: 12px; font-size: 13px; }
}
@media (max-width: 480px) {
    .harita-wrapper svg { max-height: 210px; }
    .harita-tooltip { width: 170px; }
}
.harita-baslik { color: var(--kirmizi); font-weight: 900; margin-bottom: 10px; font-size: 24px; }
.harita-alt { color: var(--metin-orta); font-style: italic; margin-bottom: 30px; }
@media (max-width: 768px) {
    .harita-baslik { font-size: 19px; }
    .harita-alt { font-size: 13.5px; margin-bottom: 18px; }
}
.zn-pg-nokta { padding: 0 4px; color: var(--metin-acik); line-height: 40px; }

/* ==================================================
   SAYFALAMA (pagination_html çıktısı) — ortak stil
   Eskiden inline'dı; turuncu aktif renk tema kırmızısına çekildi.
   ================================================== */
.pagination {
    display: flex; justify-content: center; flex-wrap: wrap;
    list-style: none; padding: 20px 0; gap: 6px;
}
.page-link {
    min-width: 40px; height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--kenar-orta); background: var(--zemin);
    border-radius: 8px; font-size: 14px; font-weight: 600;
    color: var(--metin-orta); text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.page-link:hover { border-color: var(--kirmizi); color: var(--kirmizi); text-decoration: none; }
.page-link.active {
    background: var(--kirmizi); color: #fff; border-color: var(--kirmizi);
}
.page-link.disabled { opacity: .4; cursor: default; }
.page-link.dots { border: none; background: transparent; color: var(--metin-soluk); min-width: auto; padding: 0 4px; }

/* Mobilde parmakla basılabilir boyut */
@media (max-width: 768px) {
    .pagination { gap: 8px; padding: 16px 0; }
    .page-link { min-width: 44px; height: 44px; font-size: 15px; }
}

/* ==================================================
   ETİKET LİSTESİ — kompakt pill/bulut
   Etiketler yüzlerce olabilir ve görselleri yoktur; resimli kart yerine
   sıkı bir bulut daha okunaklı ve hızlıdır.
   ================================================== */
.zn-etiket-bulut { display: flex; flex-wrap: wrap; gap: 10px; }
.zn-etiket-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--zemin); border: 1px solid var(--kenar-orta);
    border-radius: 24px; padding: 10px 16px;
    text-decoration: none; color: var(--metin);
    font-size: 14px; font-weight: 600;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.zn-etiket-pill:hover {
    background: var(--kirmizi); border-color: var(--kirmizi);
    color: #fff; text-decoration: none; transform: translateY(-2px);
}
.zn-etiket-pill .say {
    background: var(--zemin-rozet); color: var(--kirmizi);
    border-radius: 12px; padding: 2px 9px; font-size: 12px; font-weight: 700;
}
.zn-etiket-pill:hover .say { background: rgba(255,255,255,.22); color: #fff; }

@media (max-width: 768px) {
    .zn-etiket-bulut { gap: 8px; }
    .zn-etiket-pill { padding: 11px 15px; font-size: 14px; }  /* 44px dokunma */
}

/* ==================================================
   KART EK SINIFLARI (klipler ve benzeri listeler)
   zn-card-thumb hem <div background-image> hem <img> olarak kullanılabilsin.
   ================================================== */
img.zn-card-thumb { width: 100%; object-fit: contain; background: #fdfdfd; display: block; }

.zn-kisi-link { color: var(--kirmizi); text-decoration: none; font-weight: 600; }
.zn-kisi-link:hover { text-decoration: underline; }

.zn-geri-link {
    font-size: 13px; color: var(--metin-soluk); text-decoration: none;
    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
}
.zn-geri-link:hover { color: var(--kirmizi); background: var(--zemin-alt); }

/* ==================================================
   SANATÇI KARTI — zn-card tabanlı, altında istatistik şeridi
   ================================================== */
.zn-sanatci-resim {
    /* Sanatçı görselleri 400x400 KARE. Kutu da kare olunca resim
       boşluk bırakmadan tam oturur. Oran kullanıldığı için kart
       genişledikçe resim alanı da büyür. */
    width: 100%; aspect-ratio: 1/1; background: #fdfdfd;
    display: block; overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
}
.zn-sanatci-resim img {
    /* width/height 100% + contain: resim kutuyu DOLDURACAK kadar büyür,
       ama kırpılmaz. Eskiden width:auto vardı; küçük resimler
       büyütülmediği için ortada minik kalıyordu. */
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}
.zn-sanatci-ad {
    font-weight: 800; color: var(--metin); font-size: 15px;
    height: 38px; overflow: hidden; line-height: 1.3;
    display: flex; align-items: center; justify-content: center;
    text-align: center; margin-bottom: 10px;
}
.zn-sanatci-ist {
    background: #fef9f3; border: 1px solid #fff1e0; border-radius: 10px;
    padding: 9px 5px; display: flex; justify-content: space-around; align-items: center;
}
.zn-ist-blok { line-height: 1.2; text-align: center; }
.zn-ist-blok .sayi { display: block; font-size: 14px; font-weight: 800; }
.zn-ist-blok .sayi.albom { color: var(--turuncu); }
.zn-ist-blok .sayi.eser  { color: var(--metin); }
.zn-ist-blok small { font-size: 10px; color: #a1887f; font-weight: 600; }
.zn-ist-ayrac { width: 1px; height: 22px; background: #ffe0b2; }

@media (max-width: 768px) {
    .zn-sanatci-ad { font-size: 14px; height: 36px; }
}
@media (max-width: 480px) {
    /* Tek sütuna düşünce kart tam genişlik olur; sabit yükseklik resmi
       küçük bırakıyordu. Oran kullanınca resim alanı genişlikle büyür. */
    .zn-sanatci-ad { font-size: 16px; }
}

/* ==================================================
   SANATÇI KÜNYESİ — çoklu değerler alt alta
   Bir sanatçının birden çok memleketi/doğum yeri/türü olabilir;
   yan yana yazılınca birbirine yapışıyordu.
   ================================================== */
.kunye-liste { font-weight: 800; font-size: 13px; }
.kunye-liste a {
    display: block;
    color: var(--metin);
    text-decoration: none;
    padding: 2px 0;
    line-height: 1.45;
}
.kunye-liste a + a { border-top: 1px dashed var(--kenar); margin-top: 3px; padding-top: 5px; }
.kunye-liste a:hover { color: var(--kirmizi); }
.kunye-liste.kirmizi a { color: var(--kirmizi); }
.kunye-liste.kirmizi a:hover { text-decoration: underline; }

/* Uzun sanatçı listeleri için "daha fazla göster" */
.zn-daha-fazla-sarmal { text-align: center; padding: 16px 0 4px; }
.zn-daha-fazla {
    background: var(--zemin); border: 1.5px solid var(--kenar-orta);
    border-radius: 22px; padding: 10px 22px;
    font-size: 13.5px; font-weight: 700; color: var(--metin-orta);
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.zn-daha-fazla:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
@media (max-width: 768px) {
    .zn-daha-fazla { min-height: 44px; width: 100%; font-size: 14px; }
}

/* ==================================================
   HİYERARŞİK SANATÇI TAKSONOMİLERİ (memleket, doğum yeri)
   Sayfa içi inline stillerden taşındı — iki sayfada tekrar ediyordu.
   ================================================== */
.sanatci-kart {
    background: var(--zemin);
    border: 1px solid var(--kenar);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    height: 100%;
    transition: .3s;
}
.sanatci-kart:hover {
    border-color: var(--kirmizi) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
.sanatci-kart:hover h2 a { color: var(--kirmizi) !important; }

.page-numbers {
    padding: 10px 16px; border: 1px solid var(--kenar); margin: 0 3px;
    border-radius: 6px; text-decoration: none; color: var(--metin-orta);
    font-weight: bold; background: var(--zemin); display: inline-block;
}
.page-numbers:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.page-numbers.current { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }

@media (max-width: 768px) {
    .page-numbers { min-width: 44px; min-height: 44px; padding: 12px 14px; text-align: center; }
}

/* ==================================================
   ALBÜM DETAY SAYFASI
   Sayfa içi <style> bloğundan taşındı; renkler :root değişkenlerine
   bağlandı. Sınıflar sayfaya özeldir, başka yerde kullanılmaz.
   ================================================== */
.album-header-box { display: flex; gap: 25px; margin-bottom: 30px; background: #fff; padding: 20px; border-radius: 12px; border: 1px solid var(--kenar); align-items: flex-start; }
.album-img-container { width: 200px; height: 200px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); background: #fdfdfd; padding: 6px; }
.album-img-container img { width: 100%; height: 100%; object-fit: contain; display: block; }
.album-badges { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.badge-item { text-decoration: none !important; color: #fff !important; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; }
.badge-item.orange { background: #e67e22; }
.badge-item.purple { background: #8e44ad; }
.badge-item.green { background: #27ae60; }
.badge-item.blue { background: #2196F3; }
.badge-item.dark { background: #2c3e50; }
.badge-item.light { background: #f9f9f9; color: var(--metin-orta) !important; border: 1px solid var(--kenar-orta); }
.fav-btn { background: #fff; border: 1px solid var(--kirmizi); color: var(--kirmizi); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.fav-btn.is-fav { background: var(--kirmizi); color: #fff; }
.fav-btn:hover { background: var(--kirmizi); color: #fff; }
.z-like-btn { background: #fff; border: 1px solid #2196F3; color: #2196F3; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.z-like-btn.is-liked { background: #2196F3 !important; color: #fff !important; }
.z-count { position: absolute; top: -5px; right: -5px; background: #2196F3; color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; }
.entry-content { font-size: 16px; line-height: 1.8; color: #111; background: #fff; padding: 30px; border-radius: 12px; border: 1px solid var(--kenar); }
.album-excerpt-box { font-style: italic; color: var(--metin-orta); margin-bottom: 25px; border-bottom: 1px dashed var(--kenar-orta); padding-bottom: 15px; }
.album-tags-wrapper { margin-top: 30px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.tags-title { font-weight: 800; font-size: 13px; color: var(--metin); display: block; margin-bottom: 10px; text-transform: uppercase; }
.tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tags-list a { background: #f1f1f1; color: #666; padding: 5px 12px; border-radius: 4px; font-size: 12px; text-decoration: none; transition: 0.2s; }
.tags-list a:hover { background: var(--kirmizi); color: #fff; }
.sidebar-box { background: #fff; padding: 18px; border-radius: 12px; border: 1px solid var(--kenar); margin-bottom: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.sidebar-head { margin-bottom: 15px; padding-bottom: 8px; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--kenar); }
.sidebar-head.green-border { border-color: #27ae60; }
.sidebar-head.red-border { border-color: var(--kirmizi); }
.sidebar-head h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--metin); }
.side-sarki-item { display: flex; align-items: center; gap: 10px; text-decoration: none !important; padding: 10px; border-radius: 8px; margin-bottom: 6px; transition: 0.2s; background: #f9f9f9; border: 1px solid transparent; }
.side-sarki-item:hover { background: #fff !important; border-color: #27ae60 !important; transform: translateX(5px); }
.play-icon { color: #27ae60; font-size: 10px; }
.sarki-name { font-size: 13px; font-weight: 600; color: #444; }
.side-album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.side-oa-item { text-decoration: none !important; display: block; text-align: center; }
.side-oa-img-container { width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; border: 1px solid #f0f0f0; margin-bottom: 8px; background: #f9f9f9; }
.side-oa-img-container img { width: 100%; height: 100%; object-fit: contain; background: #fdfdfd; transition: .3s; }
.side-oa-item:hover img { transform: scale(1.1); }
.side-oa-title { font-size: 11px; color: var(--metin); font-weight: 600; line-height: 1.3; height: 2.6em; overflow: hidden; }
.zerennet-modal { display: none; position: fixed; z-index: 10000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
.zerennet-modal-content { margin: auto; display: block; width: 80%; max-width: 700px; border-radius: 12px; box-shadow: 0 4px 15px rgba(255,255,255,0.2); animation: zerennetZoom 0.6s; }
@keyframes zerennetZoom { from {transform:scale(0)} to {transform:scale(1)} }
.zerennet-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; }
.zerennet-close:hover { color: var(--kirmizi); }
@media (max-width: 767px) {
    .album-header-box { flex-direction: column !important; align-items: center !important; text-align: center; }
    .album-img-container { width: 180px; height: 180px; margin-bottom: 15px; }
    .album-badges { justify-content: center; }
    .zerennet-album-nav { flex-direction: column; text-align: center !important; gap: 20px; }
    .nav-item.next { text-align: center !important; }
    .zerennet-album-nav div[style*="width: 1px"] { display: none; }
}
@media only screen and (max-width: 700px) {
    .zerennet-modal-content { width: 100%; }
    .zerennet-close { top: 10px; right: 20px; }
}
.zn-album-turku-say { font-size: 12px; color: var(--metin-soluk); margin-top: 2px; }

/* Albüm arşivi sarmalayıcı (albumler.php) */
#album-ara-wrap { background: var(--zemin-alt); padding: 40px 0; }
@media (max-width: 768px) { #album-ara-wrap { padding: 22px 0; } }

/* Sanatçı detay: eser/beste/şiir listeleri — 2 sütun metin listesi */
.eser-list-grid-2 {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 20px; font-size: 13px;
}
@media (max-width: 767px) {
    .eser-list-grid-2 { grid-template-columns: 1fr; }   /* telefonda tek sütun */
}

/* ==================================================
   ANASAYFA ŞERİDİ (zn-serit)
   Masaüstünde normal ızgara; TELEFONDA yatay kaydırmalı şerit.
   Amaç: anasayfada birden çok bölüm (albümler, sanatçılar, top10)
   tek ekrana sığsın. Ziyaretçilerin ~%90'ı mobil.
   Aynı HTML, sadece davranış değişiyor — PHP tarafı tek.
   ================================================== */
@media (max-width: 768px) {
    .zn-serit {
        display: flex !important;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Sağda kesik kart görünsün ki kaydırılabildiği anlaşılsın */
        scroll-padding-left: 4px;
    }
    .zn-serit > * {
        flex: 0 0 46%;          /* ~2 kart + kesik üçüncü */
        scroll-snap-align: start;
    }
    /* Kaydırma çubuğunu gizle, kaydırma çalışmaya devam etsin */
    .zn-serit::-webkit-scrollbar { display: none; }
    .zn-serit { -ms-overflow-style: none; scrollbar-width: none; }
}

@media (max-width: 480px) {
    .zn-serit > * { flex: 0 0 60%; }   /* dar telefonda kartlar biraz büyür */
}

/* ==================================================
   SOSYAL PAYLAŞIM BUTONLARI (paylas_butonlari)
   ================================================== */
.zn-paylas {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 18px 0; padding: 12px 0;
    border-top: 1px solid var(--kenar); border-bottom: 1px solid var(--kenar);
}
.zn-paylas-etiket {
    font-size: 13px; font-weight: 700; color: var(--metin-orta); margin-right: 4px;
}
.zn-paylas-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; line-height: 1;
    color: #fff; text-decoration: none; border: none; cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.zn-paylas-btn:hover { transform: translateY(-2px); opacity: .9; color: #fff; text-decoration: none; }
.pb-facebook { background: #1877f2; }
.pb-x        { background: #000; font-size: 15px; }
.pb-whatsapp { background: #25d366; font-size: 19px; }
.pb-telegram { background: #229ed9; font-size: 15px; }
.pb-kopyala  { background: var(--metin-orta); font-size: 17px; }
.pb-cihaz    { background: var(--kirmizi); font-size: 18px; }
.pb-kopyala.kopyalandi { background: #4caf50; }

/* Mobilde parmakla basılabilir boyut */
@media (max-width: 768px) {
    .zn-paylas { gap: 10px; justify-content: center; }
    .zn-paylas-btn { width: 44px; height: 44px; font-size: 18px; }
    .zn-paylas-etiket { width: 100%; text-align: center; margin: 0 0 4px; }
}

/* ==================================================
   SİTE GENELİ ARAMA (arama.php)
   ================================================== */
.zn-arama-form label {
    display: block; color: var(--metin-acik); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
.zn-arama-satir { display: flex; gap: 8px; }
.zn-arama-satir input {
    flex: 1; background: var(--giris-koyu); border: 1.5px solid var(--kenar-koyu);
    border-radius: 8px; color: #f0f0f0; padding: 11px 14px; font-size: 15px;
    outline: none; transition: border-color .2s;
}
.zn-arama-satir input:focus { border-color: var(--kirmizi); }
.zn-arama-satir input::placeholder { color: #666; }
.zn-arama-satir .zn-btn { background: var(--kirmizi); color: #fff; white-space: nowrap; }
.zn-arama-satir .zn-btn:hover { background: var(--kirmizi-koyu); }

.zn-arama-bolum { margin-bottom: 34px; }
.zn-arama-bolum-baslik {
    font-size: 17px; font-weight: 800; color: var(--metin);
    margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid var(--kenar);
    display: flex; align-items: center; gap: 10px;
}
.zn-arama-say {
    background: var(--kirmizi); color: #fff; border-radius: 12px;
    padding: 1px 9px; font-size: 12px; font-weight: 700;
}
.zn-empty span { display: block; font-size: 13.5px; color: var(--metin-soluk); margin-top: 6px; }

@media (max-width: 768px) {
    .zn-arama-satir { flex-direction: column; }
    .zn-arama-satir input { font-size: 16px; min-height: 46px; }  /* iOS zoom engeli */
    .zn-arama-satir .zn-btn { min-height: 46px; width: 100%; }
    .zn-arama-bolum-baslik { font-size: 16px; }
}

/* ==================================================
   SÖZ ARAÇLARI — yazı boyutu ayarı + sözleri kopyala
   ================================================== */
.zn-soz-araclar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin: 0 0 14px; padding: 10px 0;
    border-bottom: 1px dashed var(--kenar-orta);
}
.zn-yazi-boyut { display: flex; gap: 6px; }
.zn-ab-btn {
    min-width: 40px; height: 36px; padding: 0 10px;
    background: var(--zemin); border: 1.5px solid var(--kenar-orta);
    border-radius: 8px; cursor: pointer;
    font-weight: 700; color: var(--metin-orta);
    transition: border-color .15s, color .15s;
}
.zn-ab-btn:hover  { border-color: var(--kirmizi); color: var(--kirmizi); }
.zn-ab-btn:active { background: var(--zemin-alt); }
.zn-ab-sifirla { font-size: 13px; }

.zn-soz-kopyala {
    height: 36px; padding: 0 16px;
    background: var(--kirmizi); color: #fff; border: none;
    border-radius: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 700;
    transition: background .15s;
}
.zn-soz-kopyala:hover { background: var(--kirmizi-koyu); }
.zn-soz-kopyala.kopyalandi { background: #4caf50; }

/* Söz alanı: boyut JS ile değiştirilecek, varsayılan 18px */
#zn-soz { font-size: 18px; transition: font-size .15s; }

@media (max-width: 768px) {
    .zn-soz-araclar { justify-content: center; }
    .zn-ab-btn      { min-width: 46px; height: 44px; font-size: 15px; }
    .zn-soz-kopyala { height: 44px; flex: 1 1 100%; font-size: 15px; }
    #zn-soz         { font-size: 19px; }   /* telefonda biraz büyük başlasın */
}

/* ==================================================
   İLETİŞİM FORMU (iletisim.php)
   ================================================== */
.zn-form { background: var(--zemin); border: 1px solid var(--kenar);
           border-radius: 12px; padding: 22px; }
.zn-form-satir { display: flex; gap: 14px; }
.zn-form-satir > * { flex: 1; }
.zn-form-alan { margin-bottom: 16px; }
.zn-form-alan label {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--metin-orta); margin-bottom: 6px;
}
.zn-form-alan .zorunlu { color: var(--kirmizi); }
.zn-form-alan input, .zn-form-alan textarea {
    width: 100%; padding: 11px 13px; font-size: 15px;
    border: 1.5px solid var(--kenar-orta); border-radius: 8px;
    background: #fff; color: var(--metin);
    outline: none; transition: border-color .15s;
    font-family: inherit;
}
.zn-form-alan input:focus, .zn-form-alan textarea:focus { border-color: var(--kirmizi); }
.zn-form-alan textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.zn-form-not { display: block; font-size: 12px; color: var(--metin-soluk); margin-top: 4px; }

.zn-form-gonder {
    background: var(--kirmizi); color: #fff; border: none;
    border-radius: 8px; padding: 13px 30px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.zn-form-gonder:hover { background: var(--kirmizi-koyu); }

/* Bot tuzağı — ekran okuyucudan ve gözden gizli, display:none DEĞİL
   (bazı botlar display:none alanları atlıyor) */
.zn-balkupu {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.zn-mesaj-basarili, .zn-mesaj-hata {
    padding: 14px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14.5px;
}
.zn-mesaj-basarili { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.zn-mesaj-hata     { background: #fdecea; border: 1px solid #f5c6cb; color: #8a1c1c; }
.zn-mesaj-hata ul  { margin: 6px 0 0 18px; }

@media (max-width: 768px) {
    .zn-form { padding: 16px; }
    .zn-form-satir { flex-direction: column; gap: 0; }
    .zn-form-alan input, .zn-form-alan textarea { font-size: 16px; min-height: 46px; }
    .zn-form-alan textarea { min-height: 150px; }
    .zn-form-gonder { width: 100%; min-height: 48px; }
}

/* Doğum/Ölüm yılları kartında resim yerine yıl rozeti */
.zn-tax-card .zn-yil-tile {
    width: 100%; aspect-ratio: 16/10;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--kirmizi), #8e1c1c);
    color: #fff;
}
.zn-tax-card .zn-yil-rakam {
    font-size: 40px; font-weight: 800; letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px){ .zn-tax-card .zn-yil-rakam { font-size: 32px; } }

/* Doğum yeri / memleket: il ve ilçe yan yana, " / " ile ayrı linkler */
.kunye-liste-inline a { display: inline; padding: 0; }
.kunye-liste-inline a + a { border-top: none; margin-top: 0; padding-top: 0; }

/* Albüm arşivi: web'de 4 sütun (kartlar daha büyük/belirgin) — sadece masaüstü */
@media (min-width: 769px) {
    #zna-grid { grid-template-columns: repeat(4, 1fr); }
}