/* TorGeoLab ortak portföy detay sayfası */
.tgl-portfolio-detail{
    --navy:#0E2A4D;
    --navy-deep:#081A33;
    --blue:#1E74C9;
    --green:#22A559;
    --green-deep:#16793F;
    --bg:#F6F8FB;
    --panel:#FFFFFF;
    --border:#E3E8EF;
    --text:#23324A;
    --soft:#5B6B85;
    color:var(--text);
    background:var(--bg);
}

.tgl-portfolio-detail *{box-sizing:border-box}

.tgl-portfolio-wrap{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}

.tgl-portfolio-hero{
    padding:86px 0 68px;
    border-bottom:1px solid var(--border);
    background:
        radial-gradient(circle at 78% 20%,rgba(30,116,201,.10),transparent 30%),
        radial-gradient(circle at 90% 70%,rgba(34,165,89,.08),transparent 28%),
        var(--bg);
}

.tgl-portfolio-back{
    display:inline-block;
    margin-bottom:24px;
    color:var(--soft);
    text-decoration:none;
    font-weight:600;
}

.tgl-portfolio-back:hover{color:var(--blue)}

.tgl-portfolio-tag,
.tgl-portfolio-kicker{
    display:inline-block;
    color:var(--green-deep);
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
}

.tgl-portfolio-tag{
    padding:7px 11px;
    border:1px solid rgba(34,165,89,.15);
    border-radius:999px;
    background:#EAF7EF;
}

.tgl-portfolio-hero h1{
    max-width:850px;
    margin:18px 0 16px;
    color:var(--navy);
    font-size:clamp(40px,6vw,72px);
    line-height:1.02;
    letter-spacing:-.045em;
}

.tgl-portfolio-lead{
    max-width:780px;
    margin:0;
    color:var(--soft);
    font-size:18px;
    line-height:1.75;
}

.tgl-portfolio-meta{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:26px;
}

.tgl-portfolio-meta span{
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--soft);
    font-size:13px;
}

.tgl-portfolio-content{padding:78px 0;background:#fff}

.tgl-portfolio-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);
    gap:28px;
    align-items:start;
}

.tgl-portfolio-panel{
    padding:30px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--panel);
}

.tgl-portfolio-panel h2{
    margin:10px 0 14px;
    color:var(--navy);
    font-size:28px;
}

.tgl-portfolio-panel p,
.tgl-portfolio-panel li{
    color:var(--soft);
    line-height:1.7;
}

.tgl-placeholder{
    min-height:320px;
    margin-top:28px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    text-align:center;
    border:1px dashed #B8C5D4;
    border-radius:16px;
    background:
        linear-gradient(rgba(30,116,201,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,116,201,.05) 1px,transparent 1px),
        #F8FBFD;
    background-size:28px 28px;
}

.tgl-placeholder strong{color:var(--navy)}
.tgl-placeholder span{color:var(--soft);font-size:14px}

.tgl-portfolio-panel ul{
    margin:18px 0 28px;
    padding-left:20px;
}

.tgl-portfolio-cta{
    display:inline-flex;
    min-height:46px;
    align-items:center;
    justify-content:center;
    padding:11px 18px;
    border-radius:9px;
    color:#fff;
    text-decoration:none;
    font-weight:750;
    background:linear-gradient(90deg,var(--blue),var(--green));
}

.portfolio-grid > a.proj-card{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.portfolio-grid > a.proj-card:hover,
.portfolio-grid > a.proj-card:focus{
    color:inherit;
    text-decoration:none;
}

.portfolio-grid > a.proj-card:focus-visible{
    outline:3px solid rgba(30,116,201,.35);
    outline-offset:4px;
}

@media(max-width:850px){
    .tgl-portfolio-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
    .tgl-portfolio-wrap{width:min(100% - 26px,1180px)}
    .tgl-portfolio-hero{padding:60px 0 50px}
    .tgl-portfolio-content{padding:52px 0}
}