
.trio-pg{
    --trio-gold:#c9a85d;
    --trio-dark:#2e2d2a;
    --trio-panel:#f5f3ef;
    width:100%;
    position:relative;
    color:#fff;
}
.trio-pg-stage{
    position:relative;
    width:100%;
    height:clamp(520px,66vw,760px);
    min-height:520px;
    overflow:hidden;
    background:#171717;
}
.trio-pg-slides,
.trio-pg-slide{
    position:absolute;
    inset:0;
}
.trio-pg-slide{
    margin:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .45s ease,visibility .45s ease;
}
.trio-pg-slide.is-active{
    opacity:1;
    visibility:visible;
}
.trio-pg-slide img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    cursor:zoom-in;
    user-select:none;
}
.trio-pg-stage::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,0) 36%),
        linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.12) 45%,rgba(0,0,0,0) 68%);
}
.trio-pg-nav{
    position:absolute;
    top:50%;
    z-index:5;
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:rgba(42,40,36,.68);
    backdrop-filter:blur(5px);
    transform:translateY(-50%);
    cursor:pointer;
    transition:background .2s ease,transform .2s ease;
}
.trio-pg-nav:hover{
    background:rgba(42,40,36,.92);
    transform:translateY(-50%) scale(1.04);
}
.trio-pg-nav svg,
.trio-pg-gallery-button svg,
.trio-pg-meta-icon svg,
.trio-pg-mobile-chips svg,
.trio-pg-lightbox svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.trio-pg-prev{left:28px;}
.trio-pg-next{right:28px;}
.trio-pg-nav svg{
    width:29px;
    height:29px;
}
.trio-pg-gallery-button{
    position:absolute;
    z-index:6;
    left:28px;
    bottom:166px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:0;
    border-radius:5px;
    padding:9px 12px;
    color:#d8752e;
    background:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.trio-pg-gallery-button strong{
    min-width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:3px;
    color:#fff;
    background:#343434;
    font-size:11px;
}
.trio-pg-button-icon{
    width:17px;
    height:17px;
}
.trio-pg-counter{
    display:none;
}
.trio-pg-overlay{
    position:absolute;
    z-index:4;
    left:0;
    right:0;
    bottom:0;
    padding:0 28px 32px;
}
.trio-pg-overlay-inner{
    max-width:1420px;
}
.trio-pg-title{
    margin:0 0 8px;
    color:#fff;
    font-family:inherit;
    font-size:clamp(24px,2vw,36px);
    line-height:1.16;
    font-weight:700;
    text-shadow:0 2px 14px rgba(0,0,0,.42);
}
.trio-pg-price{
    margin-bottom:14px;
    color:#fff;
    font-size:clamp(23px,1.8vw,32px);
    line-height:1;
    font-weight:800;
}
.trio-pg-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 16px;
}
.trio-pg-meta-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:28px;
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.trio-pg-meta-icon svg{
    width:20px;
    height:20px;
}
.trio-pg-mobile-info{
    display:none;
}

/* Lightbox */
html.trio-pg-lock,
body.trio-pg-lock{
    overflow:hidden!important;
}
.trio-pg-lightbox{
    position:fixed;
    z-index:999999;
    inset:0;
    display:flex;
    flex-direction:column;
    color:#fff;
    background:#303030;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
}
.trio-pg-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.trio-pg-lightbox-bar{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    background:#383838;
}
.trio-pg-lightbox-count{
    font-size:24px;
    font-weight:500;
}
.trio-pg-lightbox-close{
    width:46px;
    height:46px;
    padding:10px;
    border:0;
    color:#fff;
    background:transparent;
    cursor:pointer;
}
.trio-pg-lightbox-body{
    position:relative;
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:82px minmax(0,1fr) 82px 178px;
    align-items:stretch;
}
.trio-pg-lightbox-main{
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    overflow:hidden;
    background:#303030;
}
.trio-pg-lightbox-main img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    user-select:none;
}
.trio-pg-lightbox-nav{
    align-self:center;
    width:58px;
    height:58px;
    margin:auto;
    padding:13px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:rgba(82,82,82,.78);
    cursor:pointer;
}
.trio-pg-lightbox-nav:hover{
    background:#5b5b5b;
}
.trio-pg-thumbs{
    min-width:0;
    overflow-y:auto;
    padding:0 10px 16px;
    background:#303030;
}
.trio-pg-thumb{
    width:100%;
    aspect-ratio:4/3;
    display:block;
    margin:0 0 7px;
    padding:0;
    border:2px solid transparent;
    background:#1e1e1e;
    cursor:pointer;
    overflow:hidden;
    opacity:.58;
}
.trio-pg-thumb.is-active{
    border-color:#e97722;
    opacity:1;
}
.trio-pg-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

@media (max-width:1024px){
    .trio-pg-stage{
        height:620px;
    }
    .trio-pg-gallery-button{
        bottom:180px;
    }
    .trio-pg-meta-item{
        font-size:14px;
    }
    .trio-pg-lightbox-body{
        grid-template-columns:66px minmax(0,1fr) 66px 140px;
    }
}

@media (max-width:767px){
    .trio-pg{
        color:#171717;
        background:#fff;
    }
    .trio-pg-stage{
        height:auto;
        min-height:0;
        aspect-ratio:4/5;
        background:#eee;
    }
    .trio-pg-stage::after{
        background:linear-gradient(0deg,rgba(0,0,0,.26),transparent 38%);
    }
    .trio-pg-slide img{
        object-fit:cover;
    }
    .trio-pg-nav{
        width:48px;
        height:48px;
        background:rgba(42,40,36,.70);
    }
    .trio-pg-prev{left:12px;}
    .trio-pg-next{right:12px;}
    .trio-pg-nav svg{
        width:25px;
        height:25px;
    }
    .trio-pg-gallery-button{
        left:12px;
        bottom:14px;
        padding:8px 10px;
    }
    .trio-pg-gallery-button strong{
        display:none;
    }
    .trio-pg-counter{
        position:absolute;
        z-index:6;
        right:12px;
        bottom:16px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:46px;
        height:28px;
        border-radius:14px;
        color:#fff;
        background:rgba(0,0,0,.58);
        font-size:12px;
        font-weight:700;
    }
    .trio-pg-overlay{
        display:none;
    }
    .trio-pg-mobile-info{
        display:block;
        padding:24px 12px 4px;
        color:#171717;
        background:#fff;
    }
    .trio-pg-mobile-info h2{
        margin:0 0 12px;
        color:#111;
        font-family:inherit;
        font-size:24px;
        line-height:1.2;
        font-weight:600;
    }
    .trio-pg-mobile-chips{
        display:flex;
        flex-wrap:wrap;
        gap:7px;
    }
    .trio-pg-mobile-chips span{
        min-height:29px;
        display:inline-flex;
        align-items:center;
        gap:5px;
        padding:5px 8px;
        border-radius:3px;
        color:#111;
        background:#f1f1f1;
        font-size:12px;
        line-height:1.2;
        font-weight:600;
    }
    .trio-pg-mobile-chips svg{
        width:15px;
        height:15px;
    }

    .trio-pg-lightbox-bar{
        height:58px;
        padding:0 12px;
    }
    .trio-pg-lightbox-count{
        font-size:18px;
    }
    .trio-pg-lightbox-close{
        width:40px;
        height:40px;
    }
    .trio-pg-lightbox-body{
        display:grid;
        grid-template-columns:46px minmax(0,1fr) 46px;
        grid-template-rows:minmax(0,1fr) 92px;
    }
    .trio-pg-lightbox-main{
        grid-column:2;
        grid-row:1;
    }
    .trio-pg-lightbox-prev{
        grid-column:1;
        grid-row:1;
    }
    .trio-pg-lightbox-next{
        grid-column:3;
        grid-row:1;
    }
    .trio-pg-lightbox-nav{
        width:42px;
        height:42px;
        padding:9px;
    }
    .trio-pg-thumbs{
        grid-column:1 / -1;
        grid-row:2;
        display:flex;
        gap:6px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:8px 10px 12px;
    }
    .trio-pg-thumb{
        width:92px;
        min-width:92px;
        height:68px;
        margin:0;
    }
}

@media (max-width:430px){
    .trio-pg-mobile-info h2{
        font-size:21px;
    }
}


/* v2.0.1 görünür ikonlar ve geliştirilmiş lightbox */
.trio-pg-stage{
    border-radius:6px;
}
.trio-pg-slide{
    overflow:hidden;
    border-radius:6px;
}
.trio-pg-slide img{
    transform:scale(1.035);
    transition:transform .55s ease;
}
.trio-pg-title{
    color:#fff !important;
    opacity:1 !important;
    text-shadow:0 2px 16px rgba(0,0,0,.88) !important;
}
.trio-pg-nav,
.trio-pg-lightbox-nav,
.trio-pg-lightbox-close{
    font-family:Arial,Helvetica,sans-serif !important;
}
.trio-pg-nav > span{
    display:block;
    color:#fff !important;
    font-size:48px;
    font-weight:300;
    line-height:.72;
    transform:translateY(-2px);
}
.trio-pg-lightbox-nav > span{
    display:block;
    color:#fff !important;
    font-size:52px;
    font-weight:300;
    line-height:.72;
    transform:translateY(-2px);
}
.trio-pg-lightbox-close > span{
    display:block;
    color:#fff !important;
    font-size:42px;
    font-weight:200;
    line-height:.72;
}
.trio-pg-button-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    color:#d8752e;
    font-size:18px;
    line-height:1;
}
.trio-pg-meta-symbol{
    gap:7px;
}
.trio-pg-symbol{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:19px;
    height:19px;
    color:#fff;
    font-size:16px;
    line-height:1;
}
.trio-pg-symbol-home{
    font-size:21px;
    transform:translateY(-1px);
}
.trio-pg-chip-symbol{
    color:#555;
    font-size:12px;
    line-height:1;
}

/* Masaüstü lightbox: görsel alanı büyüt, okları görsel üstüne al */
.trio-pg-lightbox-body{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 210px !important;
    grid-template-rows:minmax(0,1fr) !important;
    position:relative;
}
.trio-pg-lightbox-main{
    grid-column:1;
    grid-row:1;
    padding:14px 18px;
}
.trio-pg-lightbox-main img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    border-radius:5px;
}
.trio-pg-lightbox-prev,
.trio-pg-lightbox-next{
    position:absolute;
    z-index:8;
    top:50%;
    transform:translateY(-50%);
    margin:0;
}
.trio-pg-lightbox-prev{left:18px;}
.trio-pg-lightbox-next{right:228px;}
.trio-pg-thumbs{
    grid-column:2;
    grid-row:1;
    padding:14px 12px 18px;
}
.trio-pg-thumb{
    aspect-ratio:16/10;
    min-height:104px;
    margin-bottom:10px;
    border-radius:5px;
}
.trio-pg-thumb img{
    border-radius:3px;
}
.trio-pg-lightbox-close{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    background:rgba(255,255,255,.06);
}
.trio-pg-lightbox-nav{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Mobil: görseli tam genişlikte tut, küçük fotoğrafları daha büyük göster */
@media (max-width:767px){
    .trio-pg-stage,
    .trio-pg-slide{
        border-radius:5px;
    }
    .trio-pg-slide img{
        transform:scale(1.025);
    }
    .trio-pg-nav > span{
        font-size:42px;
    }
    .trio-pg-lightbox-body{
        display:grid !important;
        grid-template-columns:1fr !important;
        grid-template-rows:minmax(0,1fr) 118px !important;
    }
    .trio-pg-lightbox-main{
        grid-column:1;
        grid-row:1;
        width:100%;
        padding:8px 6px;
    }
    .trio-pg-lightbox-main img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        border-radius:4px;
    }
    .trio-pg-lightbox-prev,
    .trio-pg-lightbox-next{
        top:45%;
        width:46px;
        height:46px;
    }
    .trio-pg-lightbox-prev{left:6px;}
    .trio-pg-lightbox-next{right:6px;}
    .trio-pg-lightbox-nav > span{
        font-size:44px;
    }
    .trio-pg-thumbs{
        grid-column:1;
        grid-row:2;
        display:flex;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:9px 10px 13px;
        scroll-snap-type:x proximity;
    }
    .trio-pg-thumb{
        width:132px;
        min-width:132px;
        height:92px;
        min-height:92px;
        margin:0;
        border-radius:5px;
        scroll-snap-align:start;
    }
    .trio-pg-lightbox-close > span{
        font-size:36px;
    }
}
