/* Ruyapanel Makale Hedef V7
   Hedef: gönderilen örnekteki ana sayfa Güncel Makaleler alanı.
   SQL yok. Sadece ölçü, renk, grid ve okunabilirlik. */

.pg{
    width:100% !important;
    max-width:1340px !important;
    margin:26px auto 0 !important;
    padding-left:28px !important;
    padding-right:28px !important;
}

.pg > .panel.art-home.art-reference{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 0 38px !important;
    overflow:visible !important;
    border-radius:0 !important;
}

.sec-strip.t-purple{
    margin:34px 0 12px !important;
}
.sec-strip.t-purple .sec-tag{
    color:#b381ff !important;
    background:rgba(132,94,194,.11) !important;
    border:1px solid rgba(132,94,194,.28) !important;
    box-shadow:0 0 22px rgba(132,94,194,.12) !important;
}

.pg > .panel.art-reference .art-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    margin:0 0 18px !important;
}
.pg > .panel.art-reference .art-tg{
    display:flex !important;
    align-items:center !important;
    gap:13px !important;
    min-width:0 !important;
}
.pg > .panel.art-reference .art-ico-wrap{
    position:relative !important;
    width:54px !important;
    height:54px !important;
    flex:0 0 54px !important;
}
.pg > .panel.art-reference .art-ico-wrap:before{
    content:'' !important;
    position:absolute !important;
    inset:-2px !important;
    border-radius:17px !important;
    background:conic-gradient(from 0deg,#FF3D71,#FF9F43,#00C9A7,#845EC2,#FF3D71) !important;
    animation:spinBorder 5s linear infinite !important;
    opacity:.95 !important;
}
.pg > .panel.art-reference .art-ico{
    position:relative !important;
    z-index:1 !important;
    width:54px !important;
    height:54px !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,rgba(255,61,113,.92),rgba(0,201,167,.78),rgba(132,94,194,.78)) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:20px !important;
    color:#fff !important;
    box-shadow:0 12px 30px rgba(132,94,194,.18) !important;
}
.pg > .panel.art-reference .art-tt{
    font-family:'Syne',sans-serif !important;
    font-size:30px !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#fff !important;
    letter-spacing:-1.2px !important;
    margin:0 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.42) !important;
}
.pg > .panel.art-reference .art-sub{
    font-family:'Syne',sans-serif !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:3px !important;
    text-transform:uppercase !important;
    color:rgba(179,129,255,.62) !important;
    margin-top:7px !important;
}
.pg > .panel.art-reference .art-navs{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}
.pg > .panel.art-reference .art-sort-btn,
.pg > .panel.art-reference .art-nb{
    height:40px !important;
    border-radius:12px !important;
    border:1px solid rgba(132,94,194,.24) !important;
    background:rgba(132,94,194,.09) !important;
    color:rgba(200,177,255,.84) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition:.22s ease !important;
}
.pg > .panel.art-reference .art-sort-btn{padding:0 13px !important;gap:7px !important;font-size:11px !important;font-weight:900 !important;}
.pg > .panel.art-reference .art-nb{width:40px !important;padding:0 !important;}
.pg > .panel.art-reference .art-sort-btn:hover,
.pg > .panel.art-reference .art-nb:hover{
    background:rgba(132,94,194,.20) !important;
    color:#fff !important;
    transform:translateY(-2px) !important;
    box-shadow:0 0 18px rgba(132,94,194,.22) !important;
}

/* Büyük slider */
.pg > .panel.art-reference .art-hw{
    position:relative !important;
    width:100% !important;
    height:350px !important;
    min-height:350px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    margin:0 0 16px !important;
    background:#101014 !important;
    border:1px solid rgba(132,94,194,.18) !important;
    box-shadow:0 18px 62px rgba(0,0,0,.33) !important;
}
.pg > .panel.art-reference .art-ht{
    display:flex !important;
    width:100% !important;
    height:100% !important;
    transition:transform .55s cubic-bezier(.4,0,.2,1) !important;
}
.pg > .panel.art-reference .art-hs{
    flex:0 0 100% !important;
    width:100% !important;
    height:100% !important;
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    text-decoration:none !important;
    color:#fff !important;
    border-radius:18px !important;
}
.pg > .panel.art-reference .art-hi{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:none !important;
    display:block !important;
    border-radius:18px !important;
    transition:transform .72s ease !important;
}
.pg > .panel.art-reference .art-hs:hover .art-hi{transform:scale(1.035) !important;}
.pg > .panel.art-reference .art-ho{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:
      linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.48) 45%,rgba(0,0,0,.10) 100%),
      linear-gradient(0deg,rgba(132,94,194,.20) 0%,rgba(0,0,0,0) 46%) !important;
}
.pg > .panel.art-reference .art-hb{
    position:absolute !important;
    z-index:2 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(740px,82%) !important;
    max-width:740px !important;
    padding:34px 38px !important;
}
.pg > .panel.art-reference .art-hcat,
.pg > .panel.art-reference .art-ccat{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    width:max-content !important;
    max-width:100% !important;
    padding:5px 13px !important;
    border-radius:999px !important;
    background:rgba(132,94,194,.20) !important;
    border:1px solid rgba(132,94,194,.35) !important;
    color:#b381ff !important;
    font-family:'Syne',sans-serif !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:1.65px !important;
    text-transform:uppercase !important;
    margin:0 !important;
    backdrop-filter:blur(8px) !important;
}
.pg > .panel.art-reference .art-hcat:before,
.pg > .panel.art-reference .art-ccat:before{
    content:'' !important;
    width:4px !important;
    height:4px !important;
    border-radius:50% !important;
    background:#b381ff !important;
    box-shadow:0 0 8px #b381ff !important;
}
.pg > .panel.art-reference .art-htitle{
    font-family:'Syne',sans-serif !important;
    font-size:36px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    letter-spacing:-1.25px !important;
    color:#fff !important;
    margin:13px 0 10px !important;
    max-width:680px !important;
    text-shadow:0 8px 28px rgba(0,0,0,.55) !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
}
.pg > .panel.art-reference .art-hexcerpt{
    font-size:13px !important;
    line-height:1.62 !important;
    font-weight:600 !important;
    color:rgba(255,255,255,.66) !important;
    max-width:610px !important;
    margin:0 0 14px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
}
.pg > .panel.art-reference .art-hmeta{
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
    flex-wrap:wrap !important;
    color:rgba(255,255,255,.55) !important;
    font-size:11px !important;
    margin:0 !important;
}
.pg > .panel.art-reference .art-hmi{display:inline-flex !important;align-items:center !important;gap:6px !important;}
.pg > .panel.art-reference .art-hmi i{color:#b381ff !important;font-size:10px !important;}
.pg > .panel.art-reference .art-hdots{
    position:absolute !important;
    right:18px !important;
    bottom:16px !important;
    z-index:5 !important;
    display:flex !important;
    gap:6px !important;
}
.pg > .panel.art-reference .art-hd{
    width:7px !important;
    height:7px !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.24) !important;
    padding:0 !important;
    cursor:pointer !important;
    transition:.22s ease !important;
}
.pg > .panel.art-reference .art-hd.on{
    width:22px !important;
    background:#845EC2 !important;
    box-shadow:0 0 10px rgba(132,94,194,.82) !important;
}

/* 4x2 küçük makale kartları */
.pg > .panel.art-reference .art-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
    align-items:stretch !important;
}
.pg > .panel.art-reference .art-card,
.pg > .panel.art-reference .art-card:first-child{
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    grid-row:auto !important;
    grid-column:auto !important;
    border-radius:14px !important;
    overflow:hidden !important;
    position:relative !important;
    background:rgba(15,15,19,.94) !important;
    border:1px solid rgba(132,94,194,.15) !important;
    color:#fff !important;
    text-decoration:none !important;
    box-shadow:none !important;
    isolation:isolate !important;
    transition:.26s ease !important;
}
.pg > .panel.art-reference .art-card:after{display:none !important;content:none !important;}
.pg > .panel.art-reference .art-card:before{
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(135deg,rgba(132,94,194,.08),transparent) !important;
    opacity:0 !important;
    transition:.26s ease !important;
}
.pg > .panel.art-reference .art-card:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(132,94,194,.36) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.44),0 0 20px rgba(132,94,194,.12) !important;
}
.pg > .panel.art-reference .art-card:hover:before{opacity:1 !important;}
.pg > .panel.art-reference .art-cimg-w{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:142px !important;
    min-height:142px !important;
    max-height:142px !important;
    overflow:hidden !important;
    background:#101014 !important;
    flex:0 0 auto !important;
}
.pg > .panel.art-reference .art-card .art-cimg{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:none !important;
    transition:transform .42s ease !important;
}
.pg > .panel.art-reference .art-card:hover .art-cimg{transform:scale(1.06) !important;}
.pg > .panel.art-reference .art-cimg-o{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:linear-gradient(to top,rgba(0,0,0,.66),transparent 62%) !important;
}
.pg > .panel.art-reference .art-cbody{
    position:relative !important;
    z-index:2 !important;
    padding:12px 13px 13px !important;
    min-height:124px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    flex:1 1 auto !important;
    background:linear-gradient(180deg,rgba(18,18,24,.95),rgba(10,10,14,.98)) !important;
}
.pg > .panel.art-reference .art-ccat{
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:1.5px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#b381ff !important;
    backdrop-filter:none !important;
}
.pg > .panel.art-reference .art-ctitle{
    font-family:'Syne',sans-serif !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:850 !important;
    color:rgba(255,255,255,.92) !important;
    margin:0 !important;
    min-height:36px !important;
    max-height:38px !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    transition:.22s ease !important;
}
.pg > .panel.art-reference .art-card:hover .art-ctitle{color:#b381ff !important;}
.pg > .panel.art-reference .art-cfoot{
    margin-top:auto !important;
    padding-top:8px !important;
    border-top:1px solid rgba(132,94,194,.10) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    font-size:9px !important;
    line-height:1 !important;
    color:rgba(255,255,255,.36) !important;
}
.pg > .panel.art-reference .art-cfoot span{display:inline-flex !important;align-items:center !important;gap:4px !important;min-width:0 !important;}
.pg > .panel.art-reference .art-cfoot i{color:rgba(179,129,255,.60) !important;font-size:9px !important;}

.pg > .panel.art-reference .art-gnav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    margin-top:14px !important;
}
.pg > .panel.art-reference .art-gd{
    width:7px !important;
    min-width:7px !important;
    height:7px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(132,94,194,.22) !important;
    color:transparent !important;
    font-size:0 !important;
    overflow:hidden !important;
    cursor:pointer !important;
    transition:.25s ease !important;
}
.pg > .panel.art-reference .art-gd.on{
    width:20px !important;
    min-width:20px !important;
    border-radius:5px !important;
    background:#845EC2 !important;
    box-shadow:0 0 9px rgba(132,94,194,.64) !important;
}

@media(max-width:1180px){
    .pg > .panel.art-reference .art-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
    .pg > .panel.art-reference .art-hw{height:330px !important;min-height:330px !important;}
}
@media(max-width:860px){
    .pg{padding-left:18px !important;padding-right:18px !important;}
    .pg > .panel.art-reference .art-head{align-items:flex-start !important;}
    .pg > .panel.art-reference .art-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .pg > .panel.art-reference .art-hw{height:300px !important;min-height:300px !important;}
    .pg > .panel.art-reference .art-hb{padding:24px !important;width:90% !important;}
    .pg > .panel.art-reference .art-htitle{font-size:27px !important;}
    .pg > .panel.art-reference .art-tt{font-size:25px !important;}
}
@media(max-width:560px){
    .pg{padding-left:14px !important;padding-right:14px !important;}
    .pg > .panel.art-reference .art-head{flex-direction:column !important;align-items:flex-start !important;}
    .pg > .panel.art-reference .art-navs{width:100% !important;justify-content:flex-start !important;flex-wrap:wrap !important;}
    .pg > .panel.art-reference .art-grid{grid-template-columns:1fr !important;}
    .pg > .panel.art-reference .art-cimg-w{height:174px !important;min-height:174px !important;max-height:174px !important;}
    .pg > .panel.art-reference .art-hw{height:270px !important;min-height:270px !important;}
    .pg > .panel.art-reference .art-hb{padding:20px !important;width:94% !important;}
    .pg > .panel.art-reference .art-htitle{font-size:22px !important;-webkit-line-clamp:2 !important;}
    .pg > .panel.art-reference .art-hexcerpt{display:none !important;}
    .pg > .panel.art-reference .art-ico-wrap,.pg > .panel.art-reference .art-ico{width:48px !important;height:48px !important;flex-basis:48px !important;}
}