/*
Theme Name: Linx - roosphx Child
Theme URI: http://linx.mondotheme.com/
Author: roosphx
Author URI: http://themeforest.net/user/mondotheme/portfolio
Description: Child theme for Linx - roosphx. Use this theme for customizations.
Template: linx-roosphx
Version: 1.2
Text Domain: linx-roosphx-child
*/

/* =============================================================================
   VIVIDAPK MODERN POST CARDS - v1.2
   =============================================================================

   Bu CSS sadece ana sayfa post kartlarına uygulanır.
   Editörün Seçimi (featured) bölümünü ETKİLEMEZ.

   ANA TEMAYA ENTEGRASYON NOTLARI:
   --------------------------------
   Bu stilleri ana temaya taşımak isterseniz:

   1. DOSYA: linx-roosphx/assets/css/style.css veya main.css
      - Aşağıdaki tüm CSS kurallarını dosyanın SONUNA ekleyin

   2. DOSYA: linx-roosphx/assets/css/components/_posts.css (varsa)
      - Grid ve kart stilleri buraya eklenebilir

   3. DOSYA: linx-roosphx/template-parts/post/content.php
      - HTML yapısı değişikliği gerekirse bu dosyayı düzenleyin
      - Mevcut class'lar: .grid-item, article.type-post, .entry-wrapper,
        .entry-media, .entry-category, .entry-title, .entry-excerpt,
        .entry-author, .author-info, .author-name, .entry-date

   4. DOSYA: linx-roosphx/functions.php
      - Google Fonts (Inter) eklemek için wp_enqueue_style kullanın
      - Dinamik excerpt JavaScript kodunu ekleyin

   ============================================================================= */


/* =============================================================================
   SECTION 1: GOOGLE FONTS
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   functions.php dosyasına ekleyin:

   function vivid_enqueue_fonts() {
       wp_enqueue_style('google-fonts-inter',
           'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
           array(), null);
   }
   add_action('wp_enqueue_scripts', 'vivid_enqueue_fonts');

   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* =============================================================================
   SECTION 2: GRID LAYOUT - EŞİT BOYUTLU KARTLAR
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_grid.css veya _posts.css

   Bu bölüm kartların eşit yükseklikte olmasını sağlar.
   Masonry layout kullanılıyorsa devre dışı bırakılmalıdır.

   ============================================================================= */

/* Masonry yerine Flexbox grid kullan */
.posts-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Masonry opacity gecikmesini kaldır */
body.with-masonry .posts-wrapper {
    opacity: 1 !important;
}

/* Grid item - tam yükseklik */
.grid-item {
    display: flex !important;
    flex-direction: column !important;
}


/* =============================================================================
   SECTION 3: POST CARD - ANA KART YAPISI
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_posts.css

   Değişen özellikler:
   - border-radius: 16px (yuvarlak köşeler)
   - box-shadow: hafif gölge
   - border: ince gri çerçeve
   - hover efektleri: yukarı kalkma + gölge artışı

   ============================================================================= */

.grid-item article.type-post {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 !important;
}

.grid-item article.type-post:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    transform: translateY(-4px) !important;
}


/* =============================================================================
   SECTION 4: THUMBNAIL - GÖRSEL ALANI
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_posts.css veya _media.css

   Değişen özellikler:
   - aspect-ratio: 16/9 (sabit oran)
   - object-fit: cover (görsel kırpma)
   - hover'da scale(1.05) zoom efekti

   ============================================================================= */

.grid-item article.type-post .entry-media {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 2/1 !important;
    flex-shrink: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

.grid-item article.type-post .entry-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.grid-item article.type-post:hover .entry-media img {
    transform: scale(1.05) !important;
}


/* =============================================================================
   SECTION 5: CONTENT WRAPPER - İÇERİK ALANI
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_posts.css

   Değişen özellikler:
   - padding: 16px 18px
   - flex layout ile içerik hizalama
   - flex-grow: 1 ile boşluğu doldurma

   ============================================================================= */

.grid-item article.type-post .entry-wrapper {
    padding: 16px 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.grid-item article.type-post .entry-header {
    flex-shrink: 0 !important;
    margin-bottom: 6px !important;
}


/* =============================================================================
   SECTION 6: CATEGORY TAGS - KATEGORİ ETİKETLERİ
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_categories.css veya _posts.css

   Değişen özellikler:
   - Kompakt boyut: padding 2px 6px, font-size 9px
   - Yuvarlatılmış köşeler: 4px
   - Kategoriye göre renk kodlaması
   - "Uygulamalar" kategorisi gizlenir

   RENK KODLARI:
   - Sosyal: turuncu (#ea580c)
   - Video/Medya: mavi (#2563eb)
   - Müzik: yeşil (#16a34a)
   - Araçlar: gri (#475569)

   ============================================================================= */

.grid-item article.type-post .entry-category {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
}

.grid-item article.type-post .entry-category a {
    display: inline-block !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 4px !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    line-height: 1.4 !important;
}

.grid-item article.type-post .entry-category a:hover {
    background: #4F46E5 !important;
    color: #fff !important;
}

/* "Uygulamalar" kategorisini gizle - her post zaten uygulama */
.grid-item article.type-post .entry-category a[href="https://www.vividapk.com/category/uygulama/"] {
    display: none !important;
}

/* Kategori Renkleri */
.grid-item article.type-post .entry-category a[href*="sosyal"] {
    background: rgba(249,115,22,0.1) !important;
    color: #ea580c !important;
}

.grid-item article.type-post .entry-category a[href*="video"],
.grid-item article.type-post .entry-category a[href*="medya"] {
    background: rgba(59,130,246,0.1) !important;
    color: #2563eb !important;
}

.grid-item article.type-post .entry-category a[href*="muzik"] {
    background: rgba(34,197,94,0.1) !important;
    color: #16a34a !important;
}

.grid-item article.type-post .entry-category a[href*="araclar"] {
    background: rgba(100,116,139,0.1) !important;
    color: #475569 !important;
}


/* =============================================================================
   SECTION 7: TITLE - BAŞLIK
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_posts.css veya _typography.css

   Değişen özellikler:
   - font-family: Inter
   - font-size: 15px, font-weight: 700
   - 2 satır limit (-webkit-line-clamp: 2)
   - hover rengi: #4F46E5 (indigo)

   ============================================================================= */

.grid-item article.type-post .entry-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #0f172a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.grid-item article.type-post .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.grid-item article.type-post:hover .entry-title a {
    color: #4F46E5 !important;
}

/* Header içindeki boş entry-meta'yı gizle */
.grid-item article.type-post .entry-header .entry-meta {
    display: none !important;
}


/* =============================================================================
   SECTION 8: EXCERPT - AÇIKLAMA (DİNAMİK)
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_posts.css

   Değişen özellikler:
   - font-size: 13px
   - color: #64748b (gri)
   - flex: 1 1 auto ile esnek boyut
   - JavaScript ile dinamik karakter sayısı (functions.php'deki kod)

   NOT: Açıklama metni JavaScript ile dinamik olarak kırpılır.
   Boşluğa göre karakter sayısı otomatik ayarlanır.

   ============================================================================= */

.grid-item article.type-post .entry-excerpt {
    flex: 1 1 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.grid-item article.type-post .entry-excerpt p {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    overflow: hidden !important;
}


/* =============================================================================
   SECTION 9: AUTHOR - YAZAR BİLGİSİ
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_author.css veya _posts.css

   Değişen özellikler:
   - Avatar: 36px, yuvarlak, 2px border
   - Yazar adı: 12px, 600 weight, koyu renk
   - Tarih: 11px, açık gri
   - border-top ile üst çizgi
   - margin-top: 12px ile açıklamadan ayrılır

   ============================================================================= */

.grid-item article.type-post .entry-author {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
}

/* Avatar - Profil Fotoğrafı */
.grid-item article.type-post .entry-author > img.avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f1f5f9 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Author Info Container */
.grid-item article.type-post .entry-author .author-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Yazar Adı */
.grid-item article.type-post .entry-author .author-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.grid-item article.type-post .entry-author .author-name:hover {
    color: #4F46E5 !important;
}

/* Tarih */
.grid-item article.type-post .entry-author .entry-date {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Noscript duplicate avatar gizle */
.grid-item article.type-post .entry-author noscript {
    display: none !important;
}

/* Entry Action - sabit */
.grid-item article.type-post .entry-action {
    flex-shrink: 0 !important;
}


/* =============================================================================
   SECTION 10: DARK MODE - KARANLIK TEMA
   =============================================================================

   ANA TEMAYA TAŞIMA:
   ------------------
   DOSYA: assets/css/components/_dark-mode.css veya _posts.css

   Dark mode, body.dark-mode class'ı ile aktif olur.
   Tüm renk değerleri dark temaya uygun olarak ayarlanmıştır.

   RENK PALETİ (DARK):
   - Kart arka plan: #1e293b (slate-800)
   - Border: #334155 (slate-700)
   - Başlık: #f1f5f9 (slate-100)
   - Açıklama: #94a3b8 (slate-400)
   - Hover rengi: #818cf8 (indigo-400)

   ============================================================================= */

/* Kart Yapısı - Dark */
body.dark-mode .grid-item article.type-post {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

body.dark-mode .grid-item article.type-post:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

/* Başlık - Dark */
body.dark-mode .grid-item article.type-post .entry-title,
body.dark-mode .grid-item article.type-post .entry-title a {
    color: #f1f5f9 !important;
}

body.dark-mode .grid-item article.type-post:hover .entry-title a {
    color: #818cf8 !important;
}

/* Açıklama - Dark */
body.dark-mode .grid-item article.type-post .entry-excerpt p {
    color: #94a3b8 !important;
}

/* Kategori Etiketleri - Dark */
body.dark-mode .grid-item article.type-post .entry-category a {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .grid-item article.type-post .entry-category a:hover {
    background: #6366f1 !important;
    color: #ffffff !important;
}

/* Kategori Renkleri - Dark */
body.dark-mode .grid-item article.type-post .entry-category a[href*="sosyal"] {
    background: rgba(249,115,22,0.2) !important;
    color: #fb923c !important;
}

body.dark-mode .grid-item article.type-post .entry-category a[href*="video"],
body.dark-mode .grid-item article.type-post .entry-category a[href*="medya"] {
    background: rgba(59,130,246,0.2) !important;
    color: #60a5fa !important;
}

body.dark-mode .grid-item article.type-post .entry-category a[href*="muzik"] {
    background: rgba(34,197,94,0.2) !important;
    color: #4ade80 !important;
}

body.dark-mode .grid-item article.type-post .entry-category a[href*="araclar"] {
    background: rgba(148,163,184,0.2) !important;
    color: #cbd5e1 !important;
}

/* Author Bölümü - Dark */
body.dark-mode .grid-item article.type-post .entry-author {
    border-top-color: #334155 !important;
}

body.dark-mode .grid-item article.type-post .entry-author > img.avatar {
    border-color: #475569 !important;
}

body.dark-mode .grid-item article.type-post .entry-author .author-name {
    color: #e2e8f0 !important;
}

body.dark-mode .grid-item article.type-post .entry-author .author-name:hover {
    color: #818cf8 !important;
}

body.dark-mode .grid-item article.type-post .entry-author .entry-date {
    color: #64748b !important;
}


/* =============================================================================
   SECTION 11: RENK PALETİ REFERANSı
   =============================================================================

   LIGHT MODE RENKLERİ:
   --------------------
   --vivid-primary: #4F46E5;        (indigo - hover rengi)
   --vivid-primary-hover: #4338CA;
   --vivid-text-dark: #0f172a;      (başlık)
   --vivid-text-medium: #1e293b;    (yazar adı)
   --vivid-text-light: #64748b;     (açıklama)
   --vivid-text-muted: #94a3b8;     (tarih)
   --vivid-bg-card: #ffffff;
   --vivid-bg-tag: #f1f5f9;
   --vivid-border: #e2e8f0;
   --vivid-border-light: #f1f5f9;

   DARK MODE RENKLERİ:
   -------------------
   --vivid-dark-primary: #818cf8;   (indigo-400 - hover rengi)
   --vivid-dark-text-light: #f1f5f9;(başlık)
   --vivid-dark-text-medium: #e2e8f0;(yazar adı)
   --vivid-dark-text-muted: #94a3b8;(açıklama)
   --vivid-dark-text-dim: #64748b;  (tarih)
   --vivid-dark-bg-card: #1e293b;   (slate-800)
   --vivid-dark-bg-tag: #334155;    (slate-700)
   --vivid-dark-border: #334155;
   --vivid-dark-border-light: #475569;

   KATEGORİ RENKLERİ (LIGHT / DARK):
   ---------------------------------
   Sosyal:  #ea580c / #fb923c
   Video:   #2563eb / #60a5fa
   Müzik:   #16a34a / #4ade80
   Araçlar: #475569 / #cbd5e1

   ============================================================================= */