/* Real application portfolio and accessible screenshot gallery. */
.app-icon-row { display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.portfolio-app-icon { width:52px; height:52px; object-fit:cover; border-radius:13px; border:1px solid #dce2e9; box-shadow:0 4px 12px #17324d0b; }
.app-icon-row a { border-radius:13px; transition:transform .2s; }
.app-icon-row a:hover { transform:translateY(-3px); }
.featured-app { display:grid; grid-template-columns:1fr 1.2fr; gap:35px; align-items:center; padding:32px; margin:28px 0 36px; background:#edf3fa; border:1px solid #dbe5f2; border-radius:16px; }
.featured-copy { min-width:0; }
.featured-identity { display:flex; gap:15px; align-items:center; margin-bottom:17px; }
.featured-icon { width:54px; height:54px; border-radius:12px; object-fit:cover; }
.featured-identity h3 { margin:0; font-size:29px; line-height:1.2; letter-spacing:-.7px; }
.featured-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; max-width:400px; }
.featured-actions { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:25px; }
.featured-screen { display:block; min-width:0; padding:20px 0 0; }
.featured-screenshot { width:100%; height:auto; border:7px solid #1c2838; border-radius:12px; box-shadow:0 20px 30px #102a4b24; }
.featured-screen>span { display:block; text-align:center; margin-top:18px; color:#526b88; font:10px/1.6 var(--mono); letter-spacing:1px; }
.app-art { position:relative; width:100%; height:100%; overflow:hidden; background:#e4effb; }
.app-art-wind { background:#e3eef9; }
.app-art-emlak { background:#fbf1d7; }
.app-art-kuzey { background:#e4f0e8; }
.app-art-sms { background:#ece9fa; }
.app-art-copy { position:absolute; top:10%; left:6%; width:43%; }
.app-art-icon { width:50px; height:50px; border-radius:12px; box-shadow:0 3px 12px #17324d0b; margin-bottom:16px; }
.app-art-label { display:block; font:8px/1.6 var(--mono); letter-spacing:1.3px; color:#52647c; margin-bottom:10px; }
.app-art-copy strong { display:block; font-size:25px; line-height:1.25; letter-spacing:-.7px; font-weight:600; color:#23334b; }
.app-screen-frame { position:absolute; right:7%; top:8%; width:36%; height:84%; border:5px solid #253242; border-radius:21px; overflow:hidden; box-shadow:10px 16px 25px #11294223; transform:rotate(5deg); background:#fff; }
.app-screen { display:block; width:100%; height:100%; object-fit:contain; background:white; }
.app-art-landscape .app-art-copy { display:flex; align-items:center; gap:12px; top:6%; left:6%; width:88%; }
.app-art-landscape .app-art-icon { width:38px; height:38px; border-radius:9px; margin:0; }
.app-art-landscape .app-art-label { display:none; }
.app-art-landscape .app-art-copy strong { font-size:17px; letter-spacing:-.3px; }
.app-art-landscape .app-screen-frame { top:27%; left:8%; right:auto; width:84%; height:62%; border-radius:8px; border-width:4px; transform:none; background:#080f14; }
.app-art-landscape .app-screen { background:#080f14; }
.project-card .project-number { display:none; }
.card-app-icon { width:33px; height:33px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.project-card h3 { gap:10px; font-size:24px; }
.project-live-link { color:#2159cf; }
.project-card h3 a { flex:1; min-width:0; }
.detail-app-identity { display:flex; align-items:center; gap:23px; margin-bottom:22px; }
.detail-app-identity h1 { margin:0; font-size:clamp(36px,4.8vw,64px); }
.detail-app-icon { width:86px; height:86px; border-radius:20px; object-fit:cover; flex-shrink:0; border:1px solid var(--line); }
.detail-primary-action { display:flex; flex-wrap:wrap; align-items:center; gap:12px 25px; margin-top:25px; }
.detail-cover { height:440px; }
.detail-cover .app-art-copy { left:8%; top:18%; width:37%; }
.detail-cover .app-art-icon { width:75px; height:75px; border-radius:18px; }
.detail-cover .app-art-copy strong { font-size:38px; max-width:380px; }
.detail-cover .app-art-label { font-size:10px; }
.detail-cover .app-screen-frame { width:23%; right:15%; }
.detail-cover .app-art-landscape .app-art-copy { display:block; top:15%; width:29%; }
.detail-cover .app-art-landscape .app-art-icon { margin-bottom:20px; }
.detail-cover .app-art-landscape .app-screen-frame { width:56%; height:auto; aspect-ratio:20/9; top:27%; left:auto; right:5%; }
.app-features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; padding:30px 0; border-bottom:1px solid var(--line); }
.app-features>div { padding-left:18px; border-left:2px solid #dce6f7; }
.app-features span { color:#2159cf; font:10px var(--mono); }
.app-features h2 { font-size:16px; font-weight:550; line-height:1.5; margin:10px 0 0; }
.app-note { padding:18px 22px; border-left:3px solid #8ba9d6; background:#edf2fa; border-radius:0 8px 8px 0; }
.app-source-note { font-size:11px; line-height:1.8; color:var(--muted); margin:15px 0 0; }
.app-gallery-section { padding:15px 0 55px; scroll-margin-top:105px; }
.app-gallery { display:flex; gap:20px; overflow-x:auto; padding:8px 3px 20px; scroll-snap-type:x proximity; scrollbar-color:#b8c9e1 #edf2fa; scrollbar-width:thin; }
.gallery-item { display:block; flex:0 0 210px; padding:8px; border:1px solid var(--line); border-radius:12px; background:white; scroll-snap-align:start; }
.gallery-image { width:100%; height:390px; object-fit:contain; border-radius:6px; background:#f4f6f9; }
.gallery-item>span { display:flex; justify-content:space-between; align-items:center; padding:12px 8px 5px; color:#526178; font:11px var(--mono); }
.gallery-item>span>span { color:#2159cf; font-size:20px; }
.gallery-landscape .gallery-item { flex-basis:480px; }
.gallery-landscape .gallery-image { height:216px; }
.gallery-footnote { color:var(--muted); font-size:12px; margin-top:14px; }
.image-dialog { max-width:calc(100vw - 32px); width:1100px; max-height:calc(100dvh - 32px); padding:16px; border:1px solid #d7e1ee; border-radius:15px; background:#f8fafc; color:#1a2637; box-shadow:0 30px 90px #0006; }
.image-dialog::backdrop { background:#111b2cdb; }
.image-dialog-toolbar,.image-dialog-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.image-dialog-toolbar p { font-size:13px; margin:0; }
.image-dialog button { min-height:44px; padding:9px 15px; border:1px solid #cbd6e5; background:white; color:#1a2637; border-radius:7px; font-size:13px; }
.image-dialog button:disabled { opacity:.45; cursor:default; }
.image-dialog-body { display:flex; justify-content:center; align-items:center; margin-block:14px; min-height:100px; }
.image-dialog-body img { max-width:100%; max-height:calc(100dvh - 200px); width:auto; height:auto; object-fit:contain; }
.image-dialog-controls { justify-content:center; }
.gallery-open { overflow:hidden; }
@media(max-width:1100px) {
    .featured-app { padding:25px; gap:25px; }
    .featured-identity h3 { font-size:25px; }
    .app-art-copy strong { font-size:21px; }
    .app-art-icon { width:42px; height:42px; margin-bottom:12px; }
    .project-card h3 { font-size:22px; }
}
@media(max-width:860px) {
    .app-icon-row { gap:8px; }
    .portfolio-app-icon { width:45px; height:45px; }
    .featured-app { grid-template-columns:1fr; gap:15px; }
    .featured-copy>p:not(.eyebrow) { max-width:none; }
    .featured-screen { max-width:620px; margin-inline:auto; width:100%; }
    .app-art-copy strong { font-size:19px; }
    .app-art-label { font-size:7px; }
    .app-screen-frame { border-width:4px; border-radius:15px; }
    .app-art-landscape .app-art-copy strong { font-size:15px; }
    .detail-cover .app-art-copy strong { font-size:30px; }
    .detail-cover .app-screen-frame { width:28%; right:10%; }
    .detail-cover .app-art-landscape .app-screen-frame { width:55%; right:4%; top:35%; }
    .app-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
    .featured-app { padding:22px 18px; margin-block:22px 28px; }
    .featured-copy .eyebrow { font-size:9px; }
    .featured-identity h3 { font-size:25px; }
    .featured-icon { width:48px; height:48px; }
    .featured-actions { gap:10px 17px; margin-top:20px; }
    .featured-actions .button { font-size:13px; padding-inline:16px; }
    .featured-screenshot { border-width:4px; border-radius:8px; }
    .app-art-copy strong { font-size:22px; }
    .app-art-icon { width:43px; height:43px; margin-bottom:13px; }
    .project-card h3 { font-size:23px; }
    .detail-app-identity { gap:15px; align-items:center; }
    .detail-app-icon { width:62px; height:62px; border-radius:15px; }
    .detail-app-identity h1 { font-size:35px; letter-spacing:-1.5px; }
    .detail-cover { height:320px; }
    .detail-cover .app-art-copy { top:13%; left:6%; width:43%; }
    .detail-cover .app-art-icon { width:48px; height:48px; border-radius:12px; }
    .detail-cover .app-art-copy strong { font-size:24px; }
    .detail-cover .app-art-label { font-size:8px; }
    .detail-cover .app-screen-frame { width:37%; right:6%; }
    .detail-cover .app-art-landscape .app-art-copy { display:flex; width:88%; top:7%; }
    .detail-cover .app-art-landscape .app-art-icon { margin:0; }
    .detail-cover .app-art-landscape .app-art-copy strong { font-size:21px; }
    .detail-cover .app-art-landscape .app-screen-frame { width:88%; left:6%; right:auto; top:36%; }
    .app-features { gap:22px 15px; }
    .app-features h2 { font-size:14px; }
    .app-features>div { padding-left:12px; }
    .gallery-landscape .gallery-item { flex-basis:88%; }
    .gallery-landscape .gallery-image { height:auto; aspect-ratio:20/9; }
    .gallery-item { flex-basis:195px; }
    .gallery-image { height:355px; }
    .image-dialog { padding:12px; }
    .image-dialog-toolbar { gap:10px; }
    .image-dialog-toolbar p { font-size:12px; }
}
@media(max-width:380px) {
    .featured-identity h3 { font-size:21px; }
    .app-art-copy strong { font-size:18px; }
    .app-art-icon { width:34px; height:34px; margin-bottom:8px; border-radius:8px; }
    .app-art-label { font-size:6px; margin-bottom:7px; }
    .app-art-landscape .app-art-copy strong { font-size:14px; }
    .app-art-landscape .app-art-icon { width:30px; height:30px; }
    .project-card h3 { font-size:20px; }
    .project-card-actions a { font-size:12px; gap:8px; }
    .detail-app-identity h1 { font-size:29px; }
    .detail-app-icon { width:52px; height:52px; }
    .detail-cover { height:280px; }
}
/* Keep the game's 16:9 screenshot fully inside the detail cover. */
.detail-cover .app-art-game .app-screen-frame { top:16%; height:68%; }
@media(max-width:700px) {
    .detail-cover .app-art-game .app-screen-frame { top:36%; height:58%; }
}