/* Sample work — social media designs: four nine-post sets, one visual language each.
   Base post styles (.socset, .sp, .q) live in ornek-lojistik.css; the black/lime look in ornek-mimarlik.css (.s-kare). */
.socgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px 28px}
.sset{min-width:0}
.cap2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;font-size:14px;color:var(--mute)}
.cap2 b{font-size:19px;color:var(--fg)}
.sset .socset{gap:6px;padding:6px;border-radius:14px}
.sset .sp{border-radius:7px}
.sp .q>.shp{position:absolute;z-index:1;overflow:hidden}
.shp img{position:absolute;inset:0}

/* agency — black, lime, condensed capitals (extends .s-kare) */
.s-volt .dots:after{content:"";position:absolute;right:0;top:0;width:70%;height:70%;background-image:radial-gradient(rgba(255,255,255,.28) .5cqw,transparent .6cqw);background-size:4cqw 4cqw;-webkit-mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%);mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%);z-index:1}
.s-volt .cir:after{content:"";position:absolute;right:-22cqw;bottom:-22cqw;width:74cqw;height:74cqw;border-radius:50%;background:#C6F135;z-index:1}
.s-volt .rb{width:11cqw;height:11cqw;border-radius:50%;background:#C6F135;color:#0E0F0C;display:grid;place-items:center;font-size:5cqw;font-weight:700;align-self:flex-start}
.s-volt .xl{font-size:34cqw;line-height:.8;display:block}

/* law firm — navy, blue gradient, soft rounded shapes */
.s-law .q{padding:9cqw}
.s-law .lg{font-family:var(--body);font-weight:500;font-size:4.6cqw;line-height:1.15}
.s-law .lg small{display:block;font-size:2.4cqw;letter-spacing:.5em;opacity:.7;font-weight:400}
.s-law h5{font-family:var(--body);font-weight:400;font-size:7.2cqw;line-height:1.16;letter-spacing:-.01em}
.s-law h5 b{font-weight:700}
.s-law h5 em{font-style:italic}
.s-law p{font-size:3.5cqw;opacity:.8;max-width:60cqw}
.s-law .lw{background:#EEF2FA;color:#1F2B4D}
.s-law .bl{background:linear-gradient(150deg,#86A1E4,#2C458C);color:#fff}
.s-law .mid{align-items:center;text-align:center}
.s-law .pnl{background:#1F2B4D;color:#fff;border-radius:6cqw;padding:6cqw}
.s-law .bub{background:#EEF2FA;color:#1F2B4D;border-radius:5cqw 5cqw 5cqw 0;padding:4cqw 5cqw;font-size:4.4cqw;line-height:1.25;align-self:flex-start;max-width:74cqw}
.s-law .tm{background:#EEF2FA;color:#1F2B4D;border-radius:99px;padding:2.6cqw 0;text-align:center;font-size:11cqw;font-weight:700;letter-spacing:.02em;margin-bottom:3cqw;width:100%;line-height:1}
.s-law .opt{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;width:66%}
.s-law .opt span{background:#EEF2FA;color:#1F2B4D;border-radius:4cqw;aspect-ratio:1;display:grid;place-items:center;font-size:4.2cqw;font-weight:700;text-align:center;line-height:1.05}
.s-law .sq:after{content:"";position:absolute;right:-5cqw;top:-2cqw;width:39cqw;height:105%;z-index:1;background-color:#2C458C;background-image:linear-gradient(#EEF2FA 3cqw,transparent 0),linear-gradient(90deg,#EEF2FA 3cqw,transparent 0);background-size:18cqw 18cqw}
.s-law .blob:after{content:"";position:absolute;right:-12cqw;bottom:-16cqw;width:74cqw;height:84cqw;border-radius:18cqw;background:#1F2B4D;z-index:1}
.s-law .wave:after{content:"";position:absolute;right:-30cqw;top:-10cqw;width:86cqw;height:120%;border-radius:50% 0 0 50%;background:#8FA3E8;opacity:.45;z-index:1}
.s-law .bdg{width:22cqw;height:22cqw;border-radius:50%;background:#8FA3E8;color:#1F2B4D;display:grid;place-items:center;font-size:12cqw;font-weight:700;align-self:flex-end}
.s-law .rd{font-size:3cqw;opacity:.8}
.s-law .bar2{background:#8FA3E8;color:#1F2B4D;border-radius:99px;font-size:3cqw;font-weight:600;padding:2cqw 4cqw;align-self:stretch;text-align:center}

/* real estate — photo-led, light haze on top, terracotta emphasis */
.s-em .q{padding:7cqw;align-items:center;text-align:center;color:#2B2B2B}
.s-em .q:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.8) 28%,rgba(255,255,255,0) 54%,rgba(40,15,5,0) 70%,rgba(40,15,5,.78));z-index:1}
.s-em .lg{width:11cqw;height:11cqw;border:.6cqw solid #C8501E;color:#C8501E;display:grid;place-items:center;font-size:5.4cqw;font-family:var(--body);font-weight:800;border-radius:1cqw}
.s-em .tt{margin-bottom:auto;margin-top:3cqw}
.s-em h5{font-family:var(--body);font-weight:500;font-size:5.4cqw;line-height:1.1}
.s-em h5 em{display:block;font-style:normal;font-weight:800;font-size:9cqw;color:#C8501E;letter-spacing:-.02em;line-height:1.05}
.s-em p{font-size:3.1cqw;margin-top:1.6cqw;color:#444;max-width:74cqw;margin-left:auto;margin-right:auto}
.s-em .tel{border:.4cqw solid rgba(255,255,255,.85);color:#fff;font-size:3.3cqw;font-weight:600;padding:1.4cqw 4cqw;letter-spacing:.06em}

/* estate agency — green and off-white, photos in soft and torn shapes */
.s-gr .q{padding:8cqw}
.s-gr .gg{background:#6BBE45;color:#fff}
.s-gr .gw{background:#F4F5F2;color:#1E2A33}
.s-gr .lg{font-family:var(--body);font-weight:800;font-size:4cqw;align-self:flex-end;line-height:1}
.s-gr .lg:before{content:"";display:inline-block;width:4cqw;height:4cqw;border-radius:1.2cqw 1.2cqw 1.2cqw 0;background:currentColor;margin-right:1.4cqw;vertical-align:-.7cqw}
.s-gr .gw .lg{color:#3F9E22}
.s-gr .tt{margin-bottom:auto;margin-top:5cqw}
.s-gr h5{font-family:var(--body);font-weight:800;font-size:8.8cqw;line-height:1.05;letter-spacing:-.02em}
.s-gr h5 em{font-style:normal;color:#1E2A33}
.s-gr .gw h5{color:#3F9E22}
.s-gr p{font-size:3.5cqw;margin-top:2cqw;max-width:68cqw}
.s-gr .ftx{display:flex;justify-content:space-between;font-size:2.6cqw;opacity:.9}
.s-gr .s1{left:0;right:0;bottom:0;height:54%;clip-path:polygon(0 28%,100% 0,100% 100%,0 100%)}
.s-gr .s2{left:10%;right:10%;bottom:13%;height:46%;border-radius:4cqw;box-shadow:0 4cqw 6cqw -3cqw rgba(30,42,51,.5)}
.s-gr .s3{left:21%;bottom:12%;width:58%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2.4cqw rgba(255,255,255,.35)}
.s-gr .s4{left:11%;right:11%;bottom:12%;height:48%;border-radius:50% 50% 46% 54%/60% 58% 42% 40%}
.s-gr .s5{left:0;right:0;top:36%;height:50%;clip-path:polygon(0 6%,8% 2%,20% 7%,33% 1%,47% 6%,60% 2%,74% 7%,88% 2%,100% 6%,100% 94%,90% 99%,76% 94%,62% 99%,48% 94%,34% 99%,20% 94%,8% 99%,0 95%)}
.s-gr .s6{left:8%;right:8%;bottom:11%;height:48%;clip-path:polygon(3% 8%,14% 2%,27% 9%,41% 3%,56% 8%,70% 2%,84% 8%,97% 4%,100% 20%,96% 36%,100% 52%,96% 70%,99% 88%,88% 97%,74% 92%,60% 98%,46% 93%,32% 98%,18% 93%,5% 97%,1% 82%,4% 64%,0 46%,4% 28%)}
.s-gr .s7{left:0;right:0;bottom:0;height:50%}
.s-gr ul{list-style:none;margin-top:3cqw;font-size:3.4cqw;display:grid;gap:1cqw}
.s-gr li:before{content:"•";color:#3F9E22;margin-right:2cqw}
.s-volt .cz{right:-20cqw;bottom:-20cqw;width:76cqw;height:76cqw;border-radius:50%;border:1.6cqw solid #C6F135}
.s-law .bgp{inset:0;opacity:.3;mix-blend-mode:luminosity}
.s-law .r1{right:0;top:0;bottom:0;width:34%;border-radius:9cqw 0 0 9cqw}
.s-law .r3{right:0;bottom:0;width:62%;height:56%;border-radius:14cqw 0 0 0}
.s-law .r6{right:0;top:20%;width:40%;height:62%;border-radius:9cqw 0 0 9cqw}
.s-law .r7{right:0;bottom:0;width:52%;height:44%;border-radius:12cqw 0 0 0}
.s-law .r8{left:9cqw;right:9cqw;top:46%;height:30%;border-radius:5cqw}

/* plain colour posts keep their colour as a tint over a photo */
.sp .q.gn.tn{background:rgba(20,52,43,.86)}
.sp .q.cr.tn{background:rgba(243,239,230,.9)}
.sk .q.gn.tn{background:rgba(116,132,90,.88)}
.sk .q.cr.tn{background:rgba(250,247,242,.9)}
.s-kare .q.bk.tn{background:rgba(14,15,12,.8)}
.s-kare .q.lt.tn{background:rgba(237,237,232,.86)}
@media (max-width:900px){
  .socgrid{grid-template-columns:1fr}
}