/* ════════════════════════════════════════
   DNZHOCA — COMPONENTS.CSS
   Tüm sayfalarda kullanılan ortak bileşenler
   ════════════════════════════════════════ */

/* ── POST KARTI ── */
.dnz-post-card {
    background: #fff;
    border-radius: var(--dnz-radius);
    border: 1px solid var(--dnz-border);
    overflow: hidden;
    transition: var(--dnz-transition);
    text-decoration: none;
    display: block;
}
.dnz-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dnz-shadow-lg);
    border-color: transparent;
}
.dnz-post-img {
    aspect-ratio: 2 / 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
    overflow: hidden;
    background: var(--dnz-bg2);
}
.dnz-post-img img {
    width: 100%; height: 100%;
    object-fit: cover; position: absolute; inset: 0;
}
.dnz-post-img.c-blue   { background: linear-gradient(135deg,#eff6ff,#dbeafe); }
.dnz-post-img.c-purple { background: linear-gradient(135deg,#faf5ff,#ede9fe); }
.dnz-post-img.c-green  { background: linear-gradient(135deg,#ecfdf5,#d1fae5); }
.dnz-post-img.c-orange { background: linear-gradient(135deg,#fff7ed,#fed7aa); }
.dnz-post-img.c-teal   { background: linear-gradient(135deg,#f0fdfa,#99f6e4); }
.dnz-post-img.c-red    { background: linear-gradient(135deg,#fff1f2,#fecdd3); }
.dnz-post-emoji        { position: relative; z-index: 1; }

/* Tür rozeti — opak, görsel üzerinde net okunur */
.dnz-post-badge {
    position: absolute; top: 10px; left: 10px;
    background: rgba(15,23,42,0.82);
    padding: 4px 10px; border-radius: 100px;
    font-size: 0.68rem; font-weight: 800;
    color: #fff; z-index: 2;
    white-space: nowrap;
}
/* Sınıf rozeti */
.dnz-post-sinif {
    position: absolute; top: 10px; right: 10px;
    background: rgba(15,23,42,0.82); color: #fff;
    padding: 4px 10px; border-radius: 100px;
    font-size: 0.68rem; font-weight: 800;
    z-index: 2; white-space: nowrap;
}
.dnz-post-body   { padding: 18px 20px; }
.dnz-post-title  { font-weight: 800; font-size: 0.95rem; color: var(--dnz-dark); line-height: 1.4; margin-bottom: 8px; }
.dnz-post-excerpt{ font-size: 0.8rem; color: var(--dnz-text2); line-height: 1.6; margin-bottom: 14px; }
.dnz-post-meta   { display: flex; align-items: center; justify-content: space-between; }
.dnz-post-date   { font-size: 0.72rem; color: var(--dnz-text3); font-weight: 600; }
.dnz-post-go     {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--dnz-bg3); display: flex;
    align-items: center; justify-content: center;
    font-size: 0.75rem; color: var(--dnz-text2);
    transition: var(--dnz-transition);
}
.dnz-post-card:hover .dnz-post-go { background: var(--dnz-red); color: #fff; }

/* ── POSTS GRİD ── */
.dnz-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px)  { .dnz-posts-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  { .dnz-posts-grid { grid-template-columns: 1fr; } }

/* ── PAGİNASYON ── */
.dnz-pagination {
    display: flex; justify-content: center;
    gap: 6px; margin-top: 40px; flex-wrap: wrap;
}
.dnz-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    border-radius: var(--dnz-radius-sm);
    font-weight: 700; font-size: 0.88rem;
    border: 1.5px solid var(--dnz-border);
    color: var(--dnz-text2); transition: var(--dnz-transition);
    text-decoration: none; white-space: nowrap;
}
.dnz-pagination .page-numbers:hover,
.dnz-pagination .page-numbers.current {
    background: var(--dnz-red); color: #fff; border-color: var(--dnz-red);
}
.dnz-pagination .page-numbers.dots { border: none; width: auto; padding: 0 4px; }
.dnz-pagination .page-numbers.next,
.dnz-pagination .page-numbers.prev { padding: 0 16px; gap: 6px; }

/* ── BREADCRUMB ── */
.dnz-breadcrumb {
    background: #fff; border-bottom: 1px solid var(--dnz-border);
    padding: 12px 0;
}
.dnz-breadcrumb-inner {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; font-size: 0.78rem;
    font-weight: 600; color: var(--dnz-text3);
}
.dnz-breadcrumb a { color: var(--dnz-text2); text-decoration: none; transition: color 0.2s; }
.dnz-breadcrumb a:hover { color: var(--dnz-red); }
.dnz-breadcrumb-sep { color: var(--dnz-border); }
.dnz-breadcrumb-current { color: var(--dnz-text); }

/* ── ETİKETLER (TAG) ── */
.dnz-tags-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── BİLGİ KUTUSU ── */
.dnz-info-box {
    border-radius: 12px; padding: 16px 18px;
    margin: 20px 0; border-left: 4px solid;
    display: flex; gap: 12px; align-items: flex-start;
}
.dnz-info-box.tip  { background: #fffbf0; border-color: var(--dnz-gold); }
.dnz-info-box.note { background: var(--dnz-blue-light); border-color: var(--dnz-blue); }
.dnz-info-box.warn { background: var(--dnz-red-light); border-color: var(--dnz-red); }
.dnz-info-box-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.dnz-info-box-title { font-weight: 800; font-size: 0.85rem; margin-bottom: 4px; }
.dnz-info-box.tip  .dnz-info-box-title { color: var(--dnz-gold-dark); }
.dnz-info-box.note .dnz-info-box-title { color: #1d4ed8; }
.dnz-info-box.warn .dnz-info-box-title { color: var(--dnz-red-dark); }
.dnz-info-box-text { font-size: 0.83rem; color: var(--dnz-text2); line-height: 1.6; }

/* ── TABLO ── */
.dnz-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.85rem; border-radius: 12px;
    overflow: hidden; margin: 20px 0;
}
.dnz-table th {
    background: var(--dnz-dark); color: #fff;
    padding: 12px 16px; text-align: left;
    font-weight: 700; font-size: 0.8rem;
}
.dnz-table td {
    padding: 11px 16px; border-bottom: 1px solid var(--dnz-border);
    color: var(--dnz-text2);
}
.dnz-table tr:last-child td { border-bottom: none; }
.dnz-table tr:nth-child(even) td { background: var(--dnz-bg2); }

/* ── PAYLAŞ BUTONLARI ── */
.dnz-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dnz-share-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dnz-text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 10px;
}
.dnz-share-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: auto;
    height: auto;
    min-width: unset;
    min-height: unset;
    box-sizing: border-box;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
}
.dnz-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.dnz-share-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.dnz-share-text,
.dnz-copy-label {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

/* Platform renkleri */
.dnz-share-whatsapp { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
.dnz-share-facebook  { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.dnz-share-twitter   { color: #0f172a; border-color: #e2e8f0; background: #f8fafc; }
.dnz-share-linkedin  { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.dnz-share-copy      { color: #475569; border-color: #e2e8f0; background: #f8fafc; }

.dnz-share-whatsapp:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.dnz-share-facebook:hover  { background: #1877F2; color: #fff; border-color: #1877F2; }
.dnz-share-twitter:hover   { background: #0f172a; color: #fff; border-color: #0f172a; }
.dnz-share-linkedin:hover  { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.dnz-share-copy:hover      { background: #475569; color: #fff; border-color: #475569; }
.dnz-share-copy.copied     { background: #dcfce7 !important; color: #16a34a !important; border-color: #bbf7d0 !important; }

/* Mobilde sadece ikon */
@media (max-width: 480px) {
    .dnz-share-text,
    .dnz-copy-label { display: none; }
    .dnz-share-btn { padding: 9px 11px; }
}

/* ── NOT FOUND ── */
.dnz-not-found {
    text-align: center; padding: 60px 24px;
}
.dnz-not-found p {
    font-size: 1rem; color: var(--dnz-text2); margin-bottom: 20px;
}

/* ── ANIMATE TARGET (scroll ile görününce) ── */
.dnz-animate-target {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.dnz-animate-target.dnz-visible {
    opacity: 1; transform: translateY(0);
}

/* ── WIDGET ── */
.dnz-widget {
    background: #fff; border-radius: var(--dnz-radius);
    border: 1px solid var(--dnz-border); padding: 20px;
    margin-bottom: 16px;
}
.dnz-widget-title {
    font-family: var(--dnz-font-heading);
    font-size: 1rem; font-weight: 800;
    color: var(--dnz-dark); margin-bottom: 14px;
    padding-bottom: 12px; border-bottom: 1px solid var(--dnz-border);
    display: flex; align-items: center; gap: 8px;
}

/* ── SECTION PİLL ── */
.dnz-section-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--dnz-bg3); padding: 6px 14px;
    border-radius: 100px; font-size: 0.78rem; font-weight: 800;
    color: var(--dnz-text2);
}

/* ── KAMİL GÖRSEL ── */
.dnz-kamil-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    /* PNG şeffaf arka plan için mix-blend-mode */
    mix-blend-mode: multiply; /* açık arka planda şeffaflık */
}

/* Footer kamil */
.dnz-footer-kamil {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -4px; /* Alta yasla */
    grid-column: 1 / -1; /* Tüm genişliği kapla ama sağa hizala */
}
.dnz-footer-kamil img {
    max-height: 200px;
    width: auto;
    opacity: 0.85;
    mix-blend-mode: screen; /* Koyu footer üzerinde daha iyi görünür */
}

/* YouTube CTA Kamil */
.dnz-yt-cta-kamil img {
    max-height: 260px;
    width: auto;
}

/* ── ÖNE ÇIKAN GÖRSEL BOYUTLARI ── */
/* dnz-card: 800×450 px (16:9) — kart görseli */
.dnz-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .dnz-footer-kamil { display: none; }
    .dnz-yt-cta-kamil { display: none; }
}

    display: flex; justify-content: center;
    padding: 12px 0;
    background: var(--dnz-bg2);
    border-top: 1px solid var(--dnz-border);
    border-bottom: 1px solid var(--dnz-border);
}