:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}.project-card{background:#111;border-radius:10px;overflow:hidden;transition:transform .3s ease;max-width:400px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:2rem}.project-card-link{text-decoration:none;color:inherit;display:block}.project-detail{padding-top:16px}.back-btn{margin-bottom:20px;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;color:#f2f2f2;padding:10px 14px;border-radius:12px;transition:background .12s ease}.back-btn:hover{background:#ffffff1a}.project-detail-container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-top:20px}.detail-image-gallery{display:flex;flex-direction:column;gap:12px}.main-image-wrapper{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.main-image-wrapper img{width:100%;height:auto;display:block;border-radius:12px}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:#0009;color:#fff;border:none;padding:12px 16px;font-size:24px;cursor:pointer;border-radius:6px;transition:background .2s ease;z-index:10}.gallery-nav:hover{background:#000000d9}.gallery-nav.prev{left:12px}.gallery-nav.next{right:12px}.gallery-thumbnails{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.thumbnail{flex-shrink:0;width:80px;height:80px;border:2px solid rgba(255,255,255,.2);border-radius:8px;overflow:hidden;cursor:pointer;background:#ffffff0d;padding:0;transition:all .2s ease}.thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.thumbnail:hover{border-color:#fff6;transform:scale(1.05)}.thumbnail.active{border-color:#bc5a18;box-shadow:0 0 8px #bc5a1880}.detail-content h1{margin:0 0 16px;font-size:clamp(2rem,4vw,2.8rem)}.detail-description{line-height:1.6;opacity:.9;margin-bottom:24px;font-size:1rem}.detail-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:24px}.detail-buttons{display:flex;gap:12px;flex-wrap:wrap}.detail-buttons .btn{padding:10px 18px;font-size:15px}.detail-buttons .btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}@media(max-width:768px){.project-detail-container{grid-template-columns:1fr;gap:2rem}.detail-content h1{font-size:2rem}}.project-image-wrapper{position:relative;cursor:pointer;overflow:hidden}.project-img-overlay{position:absolute;inset:0;background:#16232c9a;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.project-image-wrapper:hover .project-img-overlay{opacity:1}.project-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}.tag{background:#bc5a18;padding:2px 10px;border-radius:999px;font-size:.8rem}.project-card:hover{transform:translateY(-5px)}.project-img{width:100%;display:block}.project-content{padding:16px}.project-content h3{margin-bottom:8px}.project-content p{font-size:14px;opacity:.8}.project-buttons{margin-top:15px;display:flex;gap:10px}.btn{padding:8px 14px;border-radius:6px;text-decoration:none;font-size:14px;transition:.2s}.github{background:#24292e;color:#fff}.demo{background:#4f46e5;color:#fff}.proj-btn.live{background:#505755;color:#fff;padding:8px 14px;border-radius:6px;text-decoration:none;font-size:14px;transition:.2s}.btn:hover{opacity:.8}html,body{margin:0;padding:0;background:#16232c;color:#f2f2f2}.body{min-height:100vh}.upper-bar{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a0aa6;border-bottom:1px solid rgba(255,255,255,.08)}nav{max-width:1100px;margin:0 auto;padding:18px}.nav-links{list-style:none;display:flex;gap:14px;margin:0;padding:0;justify-content:flex-end;flex-wrap:wrap;align-items:center}.nav-sep{width:1px;height:18px;background:#ffffff2e;margin:0 4px}.nav-btn{cursor:pointer;border:none;background:transparent;color:#f2f2f2;opacity:.9;padding:6px 8px;font:inherit}.nav-btn:hover{opacity:1;text-decoration:underline}.nav-link{color:#f2f2f2;text-decoration:none;opacity:.9;padding:6px 8px;border-radius:10px}.nav-link:hover{opacity:1;text-decoration:underline}.header-flex{max-width:1100px;margin:0 auto;padding:48px 18px 30px;display:flex;gap:32px;align-items:center;justify-content:space-between}.header-text{flex:1;min-width:280px}.header-text h1{margin:0 0 12px;font-size:clamp(2.2rem,4vw,3.2rem)}#texten{line-height:1.6;opacity:.9;max-width:70ch}.profile-img{width:min(320px,40vw);height:auto;border-radius:18px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px #00000080}.flex-project-resume{display:flex;gap:12px;margin-top:18px}button.projects,button.resume,.button-group-bar button{cursor:pointer;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;color:#f2f2f2;padding:10px 14px;border-radius:12px;transition:transform .12s ease,background .12s ease,border-color .12s ease}button.projects:hover,button.resume:hover,.button-group-bar button:hover{transform:translateY(-1px);background:#ffffff1a;border-color:#ffffff47}.skills{max-width:1100px;margin:0 auto;padding:22px 18px 28px}.button-group-bar{display:flex;flex-wrap:wrap;gap:10px}.button-group-bar button.is-active{background:#ffffff29;border-color:#ffffff52}.skills-panel{margin-top:14px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;border-radius:18px;padding:16px 18px}.skills-panel h3{margin:0 0 10px}.skills-panel ul{margin:0;padding-left:18px;opacity:.9}.contact-wrapper{max-width:1100px;margin:0 auto;padding:0 18px 24px}.contact-me{max-width:1100px;margin:10px auto 0;padding:0 18px}.contact-me.contact-me{display:flex;gap:18px;flex-wrap:wrap}.contact-form{display:flex;flex-direction:column;gap:6px;flex:1;min-width:240px}label{opacity:.9}input[type=text],input[type=email],textarea{border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#f2f2f2;padding:12px;outline:none}textarea{min-height:140px;resize:vertical}.message-form{max-width:1100px;margin:14px auto 0;padding:0 18px;display:flex;flex-direction:column;gap:6px}.submit-button{max-width:1100px;margin:14px auto 0;padding:0 18px}.submit-btn{cursor:pointer;border:1px solid rgba(255,255,255,.18);background:#ffffff1f;color:#f2f2f2;padding:12px 14px;border-radius:12px;width:100%}.form-status{max-width:1100px;margin:12px auto 0;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f}.form-status.success{border-color:#78ffaa59}.form-status.error{border-color:#ff787859}.social-bar{max-width:1100px;margin:0 auto;padding:18px 18px 36px;opacity:.95}.social-bar p{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 0}.social-bar a{color:#f2f2f2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}.social-bar a:hover{border-bottom-color:#fff9}.page{max-width:1100px;margin:0 auto;padding:28px 18px 40px}.card-1,.card-2{margin-top:14px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;border-radius:18px;padding:16px 18px}.project-img{width:100%;max-width:600px;cursor:pointer;border-radius:80px;transition:transform .2s ease}.project-img:hover{transform:scale(1.13)}.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000}.lightbox-img{max-width:90%;max-height:90%;border-radius:10px;cursor:pointer}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:#0009;color:#fff;border:none;padding:12px 16px;font-size:24px;cursor:pointer;border-radius:6px;transition:background .2s ease;z-index:1001}.lightbox-nav:hover{background:#000000d9}.lightbox-nav.prev{left:20px}.lightbox-nav.next{right:20px}.pdf-wrap{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.pdf{width:100%;height:min(75vh,850px);border:0}.resume-actions{margin-top:24px;padding:20px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;border-radius:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.resume-info{margin:0;opacity:.9;color:#f2f2f2}.resume-actions .btn{padding:10px 18px;font-size:15px;white-space:nowrap}.back-link{margin-top:24px}.back-link .nav-link{display:inline-block;padding:8px 0}@media(max-width:860px){.header-flex{flex-direction:column-reverse;align-items:flex-start}.profile-img{width:min(520px,100%)}.nav-links{justify-content:flex-start}}