/**
 * Hub Portfolio Excerpt - Ribbon & University Styles
 * Sağ köşe şerit (ribbon) + Kategori yerine üniversite
 * Version: 2.0.0
 */

/* ===========================
   ÜNİVERSİTE - KATEGORİ YERİNE
   =========================== */
.hpe-university {
    display: inline-block;
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

/* Portfolio Item Position Düzeltmesi */
.lqd-pf-item .lqd-pf-item-inner,
.lqd-pf-column .lqd-pf-item-inner {
    position: relative;
    overflow: hidden;
}

.lqd-pf-item .lqd-pf-img,
.lqd-pf-column .lqd-pf-img {
    position: relative !important;
    overflow: hidden !important;
}

/* Excerpt Wrapper */
.lqd-pf-excerpt-wrapper,
.hpe-ribbon-auto {
    z-index: 10;
}

/* ===========================
   RIBBON STYLE - SAĞ ÜST KÖŞE
   =========================== */
.lqd-pf-ribbon {
    --ribbon-bg: #c8102e;
    --ribbon-text: #ffffff;
    --ribbon-width: 200px;
    --ribbon-offset: 55px;
    
    position: absolute;
    top: 25px;
    right: calc(var(--ribbon-offset) * -1);
    width: var(--ribbon-width);
    
    background: var(--ribbon-bg);
    color: var(--ribbon-text);
    
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
    
    padding: 8px 10px;
    
    transform: rotate(45deg);
    transform-origin: center center;
    
    box-shadow: 
        0 3px 10px -2px rgba(0, 0, 0, 0.3),
        0 2px 3px rgba(0, 0, 0, 0.1);
    
    z-index: 100;
    
    /* Gölge efekti için önce/sonra elemanlar */
    overflow: visible;
}

/* Ribbon kenar gölgeleri - katlama efekti */
.lqd-pf-ribbon::before,
.lqd-pf-ribbon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    border: 6px solid transparent;
    border-top-color: color-mix(in srgb, var(--ribbon-bg) 70%, #000);
}

.lqd-pf-ribbon::before {
    left: 0;
    border-left-color: color-mix(in srgb, var(--ribbon-bg) 70%, #000);
}

.lqd-pf-ribbon::after {
    right: 0;
    border-right-color: color-mix(in srgb, var(--ribbon-bg) 70%, #000);
}

/* Ribbon içindeki metin */
.lqd-pf-ribbon .lqd-pf-excerpt-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ===========================
   SOL ÜST KÖŞE
   =========================== */
.lqd-pf-ribbon.lqd-pf-ribbon-top-left {
    left: calc(var(--ribbon-offset) * -1);
    right: auto;
    transform: rotate(-45deg);
}

/* ===========================
   SIMPLE STYLE (Ribbon olmadan)
   =========================== */
.lqd-pf-excerpt-simple {
    display: block;
    margin-top: 8px;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
    opacity: 0.75;
}

.lqd-pf-excerpt-simple .lqd-pf-excerpt-text {
    display: block;
}

/* ===========================
   PORTFOLIO ITEM STYLES
   =========================== */

/* Style 01 - Grid */
.lqd-pf-item[class*="style01"] .lqd-pf-ribbon,
.lqd-pf-item-style-1 .lqd-pf-ribbon {
    top: 20px;
    right: -50px;
}

/* Style 02 */
.lqd-pf-item[class*="style02"] .lqd-pf-ribbon,
.lqd-pf-item-style-2 .lqd-pf-ribbon {
    top: 18px;
    right: -52px;
}

/* Style 05 - Carousel */
.lqd-pf-item-style-5 .lqd-pf-ribbon {
    top: 30px;
    right: -45px;
}

/* ===========================
   HOVER EFFECTS
   =========================== */
.lqd-pf-item:hover .lqd-pf-ribbon {
    animation: ribbon-pulse 0.5s ease-out;
}

@keyframes ribbon-pulse {
    0% {
        transform: rotate(45deg) scale(1);
    }
    50% {
        transform: rotate(45deg) scale(1.05);
    }
    100% {
        transform: rotate(45deg) scale(1);
    }
}

.lqd-pf-ribbon-top-left:hover {
    animation: ribbon-pulse-left 0.5s ease-out;
}

@keyframes ribbon-pulse-left {
    0% {
        transform: rotate(-45deg) scale(1);
    }
    50% {
        transform: rotate(-45deg) scale(1.05);
    }
    100% {
        transform: rotate(-45deg) scale(1);
    }
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 991px) {
    .lqd-pf-ribbon {
        --ribbon-width: 180px;
        --ribbon-offset: 50px;
        top: 20px;
        font-size: 10px;
        padding: 6px 8px;
    }
}

@media (max-width: 767px) {
    .lqd-pf-ribbon {
        --ribbon-width: 160px;
        --ribbon-offset: 45px;
        top: 15px;
        font-size: 9px;
        padding: 5px 6px;
    }
}

@media (max-width: 480px) {
    .lqd-pf-ribbon {
        --ribbon-width: 140px;
        --ribbon-offset: 38px;
        top: 12px;
        font-size: 8px;
        padding: 4px 5px;
    }
}

/* ===========================
   CATEGORY HIDDEN (Opsiyonel)
   =========================== */
/* Kategoriyi tamamen gizlemek için bu satırı aktif edin */
/*
.lqd-pf-item .lqd-pf-cat:not(.lqd-pf-excerpt-wrapper) {
    display: none !important;
}
*/

/* ===========================
   DARK MODE SUPPORT
   =========================== */
@media (prefers-color-scheme: dark) {
    .lqd-pf-excerpt-simple {
        opacity: 0.8;
    }
}

/* ===========================
   ELEMENTOR WIDGET SUPPORT
   =========================== */
.elementor-widget-ld_portfolio .lqd-pf-ribbon,
.elementor-widget-ld_portfolio .hpe-ribbon-auto {
    z-index: 100;
}

/* ===========================
   AUTO INJECTED RIBBON
   =========================== */
.hpe-ribbon-auto {
    position: absolute !important;
    top: 25px !important;
    width: 200px !important;
    
    background: var(--ribbon-bg, #c8102e) !important;
    color: var(--ribbon-text, #ffffff) !important;
    
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
    
    padding: 8px 10px;
    
    box-shadow: 
        0 3px 10px -2px rgba(0, 0, 0, 0.3),
        0 2px 3px rgba(0, 0, 0, 0.1);
    
    z-index: 100 !important;
    pointer-events: none;
}

.hpe-ribbon-auto.lqd-pf-ribbon-top-right {
    right: -55px !important;
    left: auto !important;
    transform: rotate(45deg) !important;
}

.hpe-ribbon-auto.lqd-pf-ribbon-top-left {
    left: -55px !important;
    right: auto !important;
    transform: rotate(-45deg) !important;
}

.hpe-ribbon-auto .lqd-pf-excerpt-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ===========================
   ANIMATION ON LOAD
   =========================== */
.lqd-pf-ribbon {
    animation: ribbon-slide-in 0.6s ease-out;
}

@keyframes ribbon-slide-in {
    0% {
        opacity: 0;
        transform: rotate(45deg) translateX(30px);
    }
    100% {
        opacity: 1;
        transform: rotate(45deg) translateX(0);
    }
}

.lqd-pf-ribbon-top-left {
    animation: ribbon-slide-in-left 0.6s ease-out;
}

@keyframes ribbon-slide-in-left {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: rotate(-45deg) translateX(0);
    }
}