/* Real project screens, brand assets and mobile app icons from Kutvia references. */
.studio-signature{display:flex;align-items:center;gap:35px;padding:30px 34px;margin-bottom:45px;border:1px solid #30382d;background:linear-gradient(115deg,#111917,#0c100d);transition:border-color .25s}
.studio-signature:hover{border-color:#69735b}
.studio-signature>img{width:170px;height:60px;object-fit:contain;flex:none}
.studio-signature>div{border-left:1px solid #3b4434;padding-left:35px}
.studio-signature>div>span{font-size:8px;letter-spacing:1.5px;color:var(--accent)}
.studio-signature p{font-size:15px;color:#b7bead;margin-top:8px;letter-spacing:-.2px}
.studio-arrow{margin-left:auto;font-size:25px;color:var(--accent)}
.portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px}
.portfolio-toolbar[hidden],.portfolio-card[hidden],.portfolio-more-wrap[hidden]{display:none}
.portfolio-filters{display:flex;gap:6px;flex-wrap:wrap}
.portfolio-filters button{display:flex;gap:13px;align-items:center;border:1px solid #323b2c;border-radius:2px;padding:12px 17px;font-size:11px;color:#a4ae97;transition:color .2s,background .2s,border-color .2s}
.portfolio-filters button span{font-size:8px;color:#78866a}
.portfolio-filters button:hover{border-color:#82916e;color:var(--paper)}
.portfolio-filters button[aria-pressed=true]{background:#60a5fa;color:#ffffff;border-color:#60a5fa}
.portfolio-filters button[aria-pressed=true] span{color:#bfdbfe}
.portfolio-status{font-size:9px;color:#8c987e;white-space:nowrap}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 36px}
.portfolio-card{min-width:0;border-bottom:1px solid #30382a}
.portfolio-card>a{display:flex;flex-direction:column;height:100%;outline-offset:7px}
.portfolio-media{overflow:hidden;position:relative;isolation:isolate;background:#121811;aspect-ratio:1.62}
.portfolio-browser{height:30px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 15px;background:#191e17;border:1px solid #363e2e;border-bottom:0;font-size:8px;letter-spacing:.5px;color:#acb59c}
.portfolio-browser>span:first-child{display:flex;gap:4px;min-width:25px}
.portfolio-browser i{display:block;width:4px;height:4px;border:1px solid #7c856f;border-radius:50%}
.portfolio-browser>span:last-child{font-size:12px}
.site-screen{display:block;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.portfolio-card:hover .site-screen{transform:scale(1.025)}
.portfolio-media--app{display:flex;align-items:center;padding:28px 35px;gap:15px;background:radial-gradient(ellipse at 70% 70%,#3e2d4c66,transparent 70%),#12101b}
.portfolio-media--app[data-app=altin-defter]{background:radial-gradient(ellipse at 70% 70%,#75602555,transparent 70%),#19170e}
.portfolio-media--app[data-app=esnafini-bul-app]{background:radial-gradient(ellipse at 70% 70%,#315d6d55,transparent 70%),#101b24}
.portfolio-media--app[data-app=kaleci-pazari-app]{background:radial-gradient(ellipse at 70% 70%,#2e6b3a55,transparent 70%),#0e1a11}
.app-identity{display:flex;flex-direction:column;align-items:start;gap:20px;position:relative;z-index:1;max-width:50%}
.app-icon{width:65px;height:65px;border-radius:15px;object-fit:contain;box-shadow:0 6px 30px #0005}
.app-identity>span{font-size:6px;letter-spacing:1.3px;color:#a7af9d;line-height:2.3}
.app-identity strong{display:block;color:#efeee5;font-weight:450;letter-spacing:-.5px;font-size:22px;line-height:1.2;margin:6px 0 18px}
.app-identity small{font-size:7px;letter-spacing:1px;color:var(--accent)}
.app-screen{position:absolute;right:8%;top:23px;width:auto;height:calc(100% + 30px);max-width:46%;object-fit:contain;object-position:top;border:1px solid #5a5b4a66;border-radius:17px 17px 0 0;box-shadow:0 15px 45px #0006;transform:rotate(6deg);transform-origin:bottom;transition:transform .5s}
.portfolio-card:hover .app-screen{transform:rotate(2deg) translateY(-5px)}
.portfolio-content{padding:25px 0 29px;display:flex;flex-direction:column;flex:1}
.portfolio-meta{display:flex;justify-content:space-between;gap:15px;color:#9aa68a;font-size:7px;letter-spacing:1px;line-height:1.5}
.portfolio-meta>span:last-child{text-align:right;letter-spacing:.2px;color:#7f8b71}
.portfolio-name{display:flex;align-items:center;gap:16px;margin:20px 0 15px;min-height:45px}
.portfolio-name h3{font-size:29px;font-weight:450;letter-spacing:-1px;line-height:1.2}
.portfolio-name>span:last-child{margin-left:auto;color:var(--accent);font-size:24px;transition:transform .25s}
.portfolio-card:hover .portfolio-name>span:last-child{transform:translate(4px,-4px)}
.portfolio-logo{display:grid;place-items:center;background:#faf8f2;border-radius:2px;width:80px;height:45px;flex:none;overflow:hidden;padding:5px 8px}
.portfolio-logo .client-logo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.portfolio-name .portfolio-logo+ h3{font-size:25px}
.portfolio-content>p{font-size:12px;line-height:1.85;color:#a8b19c;margin:0 0 24px;max-width:95%}
.portfolio-visit{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;font-size:8px;letter-spacing:1.1px;color:#c1c7b6}
.portfolio-visit>span{font-size:15px;color:#a1ac90}
.portfolio-more-wrap{display:flex;justify-content:center;margin:45px 0 0}
.portfolio-more{border:1px solid #5a654d;padding:17px 23px;display:flex;align-items:center;gap:45px;font-size:11px;color:#dbeafe;transition:background .25s}
.portfolio-more:hover{background:#60a5fa10}
.portfolio-more span{font-size:10px;color:var(--accent)}
.portfolio-source{display:flex;justify-content:center;gap:13px;font-size:7px;letter-spacing:1.5px;color:#849176;margin-top:30px;padding:10px}
.portfolio-source:hover{color:var(--accent)}
@media(min-width:1500px){.portfolio-media{aspect-ratio:1.78}.app-identity{gap:25px}.app-icon{width:80px;height:80px}.app-identity strong{font-size:30px}}
@media(max-width:1000px){.studio-signature{gap:25px;padding:25px}.studio-signature>div{padding-left:25px}.studio-signature p{font-size:12px}.studio-signature>img{width:140px}.portfolio-grid{gap:40px 25px}.portfolio-status{display:none}.portfolio-filters button{font-size:10px}.portfolio-name h3{font-size:25px}.portfolio-name .portfolio-logo+h3{font-size:22px}.portfolio-logo{width:60px;height:40px}.portfolio-name{gap:12px}.portfolio-media--app{padding:25px}.app-icon{width:50px;height:50px;border-radius:12px}.app-identity strong{font-size:19px}.app-identity{gap:12px}.app-identity>span{font-size:5px;letter-spacing:1px}.app-identity small{font-size:6px}}
@media(max-width:700px){.studio-signature{gap:20px;padding:23px 20px;margin-bottom:30px;flex-wrap:wrap}.studio-signature>img{width:125px;height:45px}.studio-signature>div{order:3;width:100%;border-left:0;border-top:1px solid #343d2d;padding:17px 0 0}.studio-signature>div>span{font-size:7px;letter-spacing:1px}.studio-signature p{font-size:12px;line-height:1.6;margin-top:7px}.studio-arrow{font-size:23px}.portfolio-toolbar{margin-bottom:23px}.portfolio-filters{width:100%;gap:6px}.portfolio-filters button{flex:1;justify-content:center;padding:11px 9px;font-size:9px;gap:8px;white-space:nowrap}.portfolio-filters button span{font-size:7px}.portfolio-grid{grid-template-columns:1fr;gap:30px}.portfolio-media{aspect-ratio:1.55}.portfolio-browser{height:27px;font-size:7px;padding:0 12px}.site-screen{height:calc(100% - 27px)}.portfolio-media--app{padding:25px 30px}.app-icon{width:62px;height:62px;border-radius:14px}.app-identity{gap:17px}.app-identity strong{font-size:22px}.app-identity>span{font-size:6px}.app-identity small{font-size:7px}.app-screen{right:10%;top:23px}.portfolio-content{padding:22px 0 24px}.portfolio-meta{font-size:6px;letter-spacing:.8px}.portfolio-name{margin:17px 0 13px;gap:15px}.portfolio-name h3{font-size:28px}.portfolio-name .portfolio-logo+h3{font-size:25px}.portfolio-logo{width:75px;height:43px}.portfolio-content>p{font-size:12px;max-width:100%;margin-bottom:20px}.portfolio-visit{font-size:7px}.portfolio-more-wrap{margin-top:35px}.portfolio-more{font-size:10px;gap:30px;padding:16px 22px}.portfolio-source{margin-top:22px;font-size:6px}}
@media(max-width:360px){.portfolio-filters button{font-size:8px;padding:11px 7px;gap:5px}.portfolio-name .portfolio-logo+h3{font-size:23px}.portfolio-logo{width:60px}.app-identity strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.portfolio-card:hover .app-screen,.portfolio-card:hover .site-screen{transform:none}}
@media print{.portfolio-toolbar,.portfolio-more-wrap{display:none!important}.portfolio-card[hidden]{display:block!important}.portfolio-grid{gap:25px;grid-template-columns:1fr 1fr}.portfolio-card{break-inside:avoid}.portfolio-content>p{color:#333}.portfolio-media{print-color-adjust:exact}}

.portfolio-name h3{font-family:SpaceGrotesk,Arial,sans-serif;font-weight:500}
.portfolio-filters button,.portfolio-meta,.portfolio-visit,.portfolio-more,.portfolio-source,.studio-signature>div>span{font-family:SpaceGrotesk,Arial,sans-serif}
.studio-signature{border-color:#2c414d;background:linear-gradient(115deg,#0e1c25,#0b1218)}
.studio-signature:hover{border-color:#4d7b8c}
.studio-signature>div{border-color:#2c414d}
.studio-signature p,.portfolio-content>p{color:#a6b7c2}
.portfolio-filters button{border-color:#2c414d;color:#a6bbc6}
.portfolio-filters button:hover{border-color:#60a5fa;color:#d4f6f4}
.portfolio-filters button span,.portfolio-status{color:#7e9aa9}
.portfolio-card{border-color:#2c414d}
.portfolio-browser{background:#111e28;border-color:#2c414d;color:#a3b9c5}
.portfolio-browser i{border-color:#6c8a9a}
.portfolio-meta{color:#92aebb}
.portfolio-meta>span:last-child{color:#819daa}
.portfolio-visit{color:#c4dce3}
.portfolio-visit>span{color:var(--accent)}
.portfolio-more{border-color:#456773;color:#dbeafe}
.portfolio-source{color:#8caab6}
@media(max-width:700px){.studio-signature>div{border-color:#2c414d}}

.portfolio-filters button[aria-pressed=true]{background:var(--kutvia-blue);border-color:var(--kutvia-blue);color:#fff}
.portfolio-filters button[aria-pressed=true] span{color:#dbeafe}
.portfolio-filters button:hover{border-color:var(--kutvia-blue)}
.studio-signature{background:linear-gradient(115deg,#0d1d3b,#0b1922);border-color:#244c77}
.studio-signature:hover{border-color:var(--kutvia-blue)}
.portfolio-more{border-color:#2563eb99;color:#bfdbfe}
.portfolio-more:hover{background:#2563eb18}