/* Cipek Premium / visual enhancement layer for existing Bootstrap theme */
:root{--p-ink:#0b1220;--p-muted:#69798d;--p-accent:#5f7cff;--p-teal:#40d5c2;--p-edge:#e8ebf2;--p-radius:22px;--p-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:25px}body.premium-portfolio{font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden;color:var(--p-ink)}body.premium-portfolio *,body.premium-portfolio *::before,body.premium-portfolio *::after{box-sizing:border-box}body.premium-portfolio ::selection{background:#95a7ff;color:#101827}
#reading-progress{position:fixed;inset:0 auto auto 0;width:0;height:3px;background:linear-gradient(90deg,#5d82ff,#3de0cb);z-index:99999;pointer-events:none;box-shadow:0 0 17px #6b90ff60}
body.premium-portfolio .main{overflow:hidden}body.premium-portfolio .container{max-width:1270px}body.premium-portfolio .section{padding-top:92px;padding-bottom:92px}body.premium-portfolio .section-title{padding-bottom:35px}body.premium-portfolio .section-title h2{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:-.045em;font-size:clamp(34px,4vw,54px);line-height:1.13;color:#142038}body.premium-portfolio .section-title h2:after{height:3px;border-radius:10px;background:linear-gradient(90deg,#5578ff,#42d3cc)}body.premium-portfolio .section-title p{color:#6c7b90;max-width:720px;line-height:1.75}body.premium-portfolio .premium-kicker{color:#5978f3!important;letter-spacing:.19em;font-size:11px!important;line-height:1.5;text-transform:uppercase;font-weight:800;margin:0 0 15px!important}
/* sidebar */
body.premium-portfolio #header{background:radial-gradient(ellipse at 15% 5%,#1b3052 0%,transparent 55%),#0c1424!important;border-right:1px solid #ffffff18;box-shadow:12px 0 40px #0a11220c}body.premium-portfolio #header .profile-img img{border:5px solid #92a3fa45;box-shadow:0 0 0 1px #ffffff20,0 12px 35px #0309117d;transition:transform .7s var(--p-ease)}body.premium-portfolio #header .profile-img img:hover{transform:scale(1.055)}body.premium-portfolio #header .sitename{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.035em}body.premium-portfolio .sidebar-tagline{letter-spacing:.09em;font-size:11px;color:#9aaeca}body.premium-portfolio #header .social-links a{border:1px solid #ffffff22;background:#ffffff0b;transition:transform .25s,background .25s,border-color .25s}body.premium-portfolio #header .social-links a:hover{transform:translateY(-4px);background:#5e7cff;border-color:#708aff}body.premium-portfolio #navmenu a{margin:3px 14px;border-radius:12px;transition:background .25s,color .25s,transform .25s}body.premium-portfolio #navmenu a:hover,body.premium-portfolio #navmenu a.active{background:#8298ff17;color:white;transform:translateX(3px)}body.premium-portfolio #navmenu a.active .navicon{color:#829dff}
/* hero */
body.premium-portfolio #hero{isolation:isolate;min-height:100svh;background:#090f1b!important;display:flex;align-items:center;padding:85px 0!important;position:relative}body.premium-portfolio #hero>img{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;filter:saturate(.7) contrast(1.18)}body.premium-portfolio #hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#070e1cf2 0%,#0a1325d9 54%,#080e1d80 100%)}body.premium-portfolio #hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,#080e1b 0%,transparent 20%)}body.premium-portfolio .hero-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}body.premium-portfolio .ambient-one,body.premium-portfolio .ambient-two{position:absolute;width:min(60vw,780px);aspect-ratio:1;border-radius:50%;filter:blur(65px);opacity:.42;animation:premium-float 12s ease-in-out infinite alternate}body.premium-portfolio .ambient-one{right:-25%;top:-45%;background:radial-gradient(circle,#496dff63,transparent 65%)}body.premium-portfolio .ambient-two{right:10%;bottom:-85%;background:radial-gradient(circle,#16bba95c,transparent 60%);animation-duration:18s;animation-direction:alternate-reverse}body.premium-portfolio .ambient-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 20%,#000 100%)}@keyframes premium-float{to{transform:translate3d(-5%,8%,0) scale(1.15)}}body.premium-portfolio .hero-content{position:relative;z-index:2;max-width:1270px;width:100%;margin:auto;padding-top:35px;padding-bottom:35px}body.premium-portfolio .hero-eyebrow{color:#a7c5dd;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:800;display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;padding:12px 18px;border:1px solid #b0d1ff30;border-radius:100px;background:#ffffff09;backdrop-filter:blur(10px)}body.premium-portfolio .hero-eyebrow::before{content:"";height:8px;width:8px;flex:none;border-radius:50%;background:#44e6b5;box-shadow:0 0 0 6px #42e3ba19,0 0 15px #37ebaa;animation:status-pulse 2.5s infinite}@keyframes status-pulse{50%{box-shadow:0 0 0 9px #42e3ba08,0 0 18px #37ebaa}}body.premium-portfolio .hero-display{font-family:Manrope,Inter,sans-serif;font-size:clamp(54px,7.3vw,112px)!important;letter-spacing:-.075em!important;line-height:1.04!important;font-weight:800!important;margin:0 0 26px!important;color:#fff!important;text-wrap:balance}body.premium-portfolio .hero-display span{background:linear-gradient(105deg,#a5b7ff,#83dff1 55%,#5ce8c8);background-clip:text;-webkit-background-clip:text;color:transparent}body.premium-portfolio .hero-role{color:#ebf1ff!important;font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(16px,2.1vw,25px)!important;line-height:1.5}body.premium-portfolio .hero-role .typed{color:#98adff}body.premium-portfolio .hero-description{font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:#b5c1d4!important;max-width:640px;margin:20px 0 32px}body.premium-portfolio .hero-actions{display:flex;gap:12px;flex-wrap:wrap}body.premium-portfolio .hero-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;border-radius:13px;padding:14px 22px;text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.015em;transition:transform .3s var(--p-ease),box-shadow .3s,border-color .3s}body.premium-portfolio .hero-button:hover{transform:translateY(-4px)}body.premium-portfolio .hero-button-primary{background:linear-gradient(120deg,#5d7dfc,#6888ff);color:white;border:1px solid #8fa3ff;box-shadow:0 12px 34px #466eff40}body.premium-portfolio .hero-button-primary:hover{box-shadow:0 18px 38px #466eff69;color:white}body.premium-portfolio .hero-button-secondary{background:#ffffff0c;color:#e8efff;border:1px solid #ffffff3b;backdrop-filter:blur(12px)}body.premium-portfolio .hero-button-secondary:hover{border-color:#94a7ff;color:white}body.premium-portfolio .hero-note{margin-top:30px;color:#8e9fb8!important;font-size:12px;letter-spacing:.04em}body.premium-portfolio .hero-scroll{z-index:3;color:#c3d1e9;text-transform:uppercase;font-size:10px;letter-spacing:.16em}body.premium-portfolio .hero-scroll i{display:inline-block;animation:down-bob 2s ease-in-out infinite}@keyframes down-bob{50%{transform:translateY(6px)}}
/* metrics */
.premium-metrics{background:#0b1425;color:white;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16}.premium-metrics .container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.premium-metrics .metric{min-width:0;padding:30px 24px;border-right:1px solid #ffffff17;display:flex;flex-direction:column;gap:7px}.premium-metrics .metric:first-child{border-left:1px solid #ffffff17}.premium-metrics .metric strong{font-family:Manrope,sans-serif;letter-spacing:-.055em;line-height:1;font-size:35px}.premium-metrics .metric strong span{color:#73e7cf}.premium-metrics .metric>span{color:#95a8c0;font-size:11px;letter-spacing:.095em;text-transform:uppercase;font-weight:700}.premium-metrics .metric-message{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:15px}.premium-metrics .metric-message span{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.65;color:#d4dded}.premium-metrics .metric-message i{font-size:26px;color:#78ecd4}
/* about */
body.premium-portfolio #about{background:#fff}body.premium-portfolio #about .about-portrait-wrap img{border-radius:21px;box-shadow:0 25px 65px #202d4822;aspect-ratio:4/5;object-fit:cover;transition:transform .7s var(--p-ease)}body.premium-portfolio #about .about-portrait-wrap{overflow:hidden;border-radius:21px}body.premium-portfolio #about .about-portrait-wrap:hover img{transform:scale(1.035)}body.premium-portfolio #about .content h2{font-family:Manrope,sans-serif;font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.045em;font-weight:800;color:#18253a}body.premium-portfolio #about .content>p{line-height:1.85;color:#607087}body.premium-portfolio #about .content ul{padding-left:0}body.premium-portfolio #about .content li{border-bottom:1px solid #edf0f5;min-height:49px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}body.premium-portfolio #about .content li i{color:#647efe}/* High-contrast text in light sections (independent of the original theme variables). */
body.premium-portfolio #about,
body.premium-portfolio #skills,
body.premium-portfolio #portfolio,
body.premium-portfolio #contact{color:#26364f;}
body.premium-portfolio #about .content ul li,
body.premium-portfolio #about .content ul li span{color:#42536d!important;}
body.premium-portfolio #about .content ul li strong{color:#18263e!important;font-weight:750;}
body.premium-portfolio #about .content ul li a{color:#285bc7!important;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}
body.premium-portfolio #about .content ul li a:hover{color:#173f98!important;}
body.premium-portfolio #about .content ul li i{color:#4e69e9!important;}
body.premium-portfolio #about .content > p{color:#566780!important;}
body.premium-portfolio #contact .php-email-form,
body.premium-portfolio #contact .info-wrap{color:#26364f;}
body.premium-portfolio #contact .form-control{color:#223149;}
body.premium-portfolio #contact .form-control::placeholder{color:#718198;}
body.premium-portfolio .about-callout{background:linear-gradient(110deg,#f0f3ff,#f3fbfc);border-left:3px solid #728bff;padding:19px 23px;margin-top:26px;border-radius:0 13px 13px 0;color:#52637a!important;font-weight:550}
/* skills */
body.premium-portfolio #skills{background:#f6f8fc!important}body.premium-portfolio #skills .skills-content{row-gap:20px}body.premium-portfolio #skills .progress{height:auto;background:#fff;padding:18px 20px;margin:0 0 16px;border:1px solid #e9edf4;border-radius:13px;box-shadow:0 7px 25px #29355706;transition:transform .28s,box-shadow .28s}body.premium-portfolio #skills .progress:hover{transform:translateY(-3px);box-shadow:0 14px 30px #29355712}body.premium-portfolio #skills .skill{margin-bottom:12px;font-family:Inter,sans-serif;color:#2b3850;font-size:13px;font-weight:800}body.premium-portfolio #skills .skill .val{font-style:normal;color:#677c99}body.premium-portfolio #skills .progress-bar-wrap{height:7px;border-radius:100px;background:#e8edfa;overflow:hidden}body.premium-portfolio #skills .progress-bar{background:linear-gradient(90deg,#6480ff,#56d0c3);border-radius:100px;transition:width 1.25s var(--p-ease)}
/* project gallery */
body.premium-portfolio #portfolio{background:#fff}.project-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin:0 0 28px}.project-filters{padding:5px;border:1px solid #e6eaf3;display:flex;gap:5px;background:#f5f7fb;border-radius:14px;flex-wrap:wrap}.filter-btn{border:0;background:transparent;padding:10px 15px;border-radius:10px;font-size:13px;font-weight:800;color:#617189;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}.filter-btn span{opacity:.62;margin-left:6px;font-size:11px}.filter-btn:hover{color:#37486b}.filter-btn.is-active{background:white;color:#415bd3;box-shadow:0 4px 14px #162a4d14}.project-count{color:#78879a;font-size:12px;font-weight:650}body.premium-portfolio #portfolio .row>.is-filtered-out{display:none!important}body.premium-portfolio .project-card{background:#fff;border:1px solid #e6ebf3;border-radius:20px;overflow:hidden;box-shadow:0 8px 26px #1c2d4c08;display:flex;flex-direction:column;transition:transform .45s var(--p-ease),box-shadow .45s var(--p-ease),border-color .35s;position:relative}body.premium-portfolio .project-card:hover{transform:translateY(-9px);box-shadow:0 28px 65px #2434541c;border-color:#bac8f9}body.premium-portfolio .project-shot-wrap{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#e1e8f4,#cbd9f1)}body.premium-portfolio .project-shot{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .7s var(--p-ease),filter .6s}body.premium-portfolio .project-card:hover .project-shot{transform:scale(1.055);filter:saturate(1.08)}body.premium-portfolio .project-shot-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(0deg,#09142b8c,transparent 50%);opacity:.55;transition:opacity .35s}body.premium-portfolio .project-card:hover .project-shot-wrap::after{opacity:.9}body.premium-portfolio .project-shot-fallback{position:absolute;inset:0;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;color:#5d6c8e;background:linear-gradient(135deg,#e5ebfa,#dde9ef);font-weight:700}body.premium-portfolio .project-shot-fallback i{font-size:35px}body.premium-portfolio .project-shot-fallback small{font-size:11px;font-weight:600;color:#8696ab}body.premium-portfolio .project-view-pill{position:absolute;right:18px;bottom:18px;z-index:3;padding:10px 14px;background:#ffffffec;backdrop-filter:blur(9px);border:1px solid #ffffffa6;border-radius:10px;font-size:12px;color:#17243c;font-weight:800;transform:translateY(12px);opacity:0;transition:transform .35s var(--p-ease),opacity .35s}body.premium-portfolio .project-card:hover .project-view-pill,body.premium-portfolio .project-shot-wrap:focus-visible .project-view-pill{transform:translateY(0);opacity:1}body.premium-portfolio .project-card-body{padding:25px 28px 27px;display:flex;flex:1;flex-direction:column;align-items:flex-start}body.premium-portfolio .project-index{font-size:11px;letter-spacing:.14em;font-weight:800;color:#91a0bd;margin-bottom:11px}body.premium-portfolio .project-meta{display:inline-block;background:#eff3ff;color:#5571d8;border:1px solid #e0e7ff;padding:7px 10px;border-radius:7px;font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}body.premium-portfolio .project-card h3{font-family:Manrope,sans-serif;letter-spacing:-.035em;font-size:clamp(21px,2vw,27px);font-weight:800;margin:13px 0 10px;overflow-wrap:anywhere}body.premium-portfolio .project-card h3 a{color:#1a2940;text-decoration:none}body.premium-portfolio .project-card h3 a:hover{color:#5273f1}body.premium-portfolio .project-card-body p{color:#6f7e93;font-size:13px;line-height:1.8;margin-bottom:24px}body.premium-portfolio .project-card-link{margin-top:auto;color:#5174ee;font-size:13px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:8px}body.premium-portfolio .project-card-link i{transition:transform .3s}body.premium-portfolio .project-card-link:hover i{transform:translate(3px,-3px)}
/* contact */
body.premium-portfolio #contact{background:#f6f8fc}body.premium-portfolio .contact-lead{max-width:660px}body.premium-portfolio #contact .info-wrap,body.premium-portfolio #contact .php-email-form{border:1px solid #e6eaf3;border-radius:20px;background:white;box-shadow:0 15px 40px #2338540c;padding:32px}body.premium-portfolio #contact .info-item i{background:#eff3ff;color:#5978ee;box-shadow:0 0 0 1px #e3e9ff}body.premium-portfolio #contact .info-item h3{font-size:16px;color:#223047;font-weight:800}body.premium-portfolio #contact .info-item p{font-size:13px;color:#728097;overflow-wrap:anywhere}body.premium-portfolio #contact iframe{border-radius:12px!important;max-width:100%}body.premium-portfolio .copy-email{margin-top:22px;border:1px solid #dbe3ff;background:#f0f4ff;border-radius:10px;padding:11px 17px;color:#4a66d4;font-weight:800;font-size:13px;transition:background .25s,transform .25s}body.premium-portfolio .copy-email:hover{background:#e3eaff;transform:translateY(-2px)}body.premium-portfolio #contact .form-control{border:1px solid #dfe5ee;background:#f9fbfd;border-radius:10px;min-height:46px;padding:12px 13px;transition:border-color .2s,box-shadow .2s}body.premium-portfolio #contact textarea.form-control{min-height:180px}body.premium-portfolio #contact .form-control:focus{border-color:#7791ff;box-shadow:0 0 0 4px #7791ff20}body.premium-portfolio #contact label{color:#344359;font-size:13px;font-weight:750}body.premium-portfolio #contact button[type=submit]{border-radius:11px;padding:15px 28px;font-weight:800;background:linear-gradient(110deg,#5779f1,#6a87ff);box-shadow:0 12px 24px #5c79ec35;transition:transform .25s,box-shadow .25s}body.premium-portfolio #contact button[type=submit]:hover{transform:translateY(-3px);box-shadow:0 18px 27px #5c79ec44}
/* footer */
body.premium-portfolio #footer{background:#0c1424!important;color:#a4afc3;padding:25px 0;font-size:12px}body.premium-portfolio .footer-divider{padding:0 10px;color:#6c85fb}body.premium-portfolio #scroll-top{border-radius:13px;background:#5f7efe;box-shadow:0 8px 20px #546dfa40}body.premium-portfolio #scroll-top:hover{background:#415ddc}body.premium-portfolio :focus-visible{outline:3px solid #6b8bff;outline-offset:3px}
@media(max-width:1199px){body.premium-portfolio #hero{min-height:88svh}body.premium-portfolio .hero-content{padding-inline:25px}body.premium-portfolio .hero-scroll{display:none}body.premium-portfolio .mobile-brand{border-radius:0 0 12px 0;backdrop-filter:blur(12px)}}
@media(max-width:767px){body.premium-portfolio .section{padding-top:64px;padding-bottom:64px}body.premium-portfolio #hero{min-height:85svh;padding:90px 0 55px!important}body.premium-portfolio .hero-display{font-size:clamp(48px,12vw,72px)!important}body.premium-portfolio .hero-eyebrow{font-size:9px;letter-spacing:.11em;padding:10px 12px;line-height:1.5}body.premium-portfolio .hero-role{font-size:16px!important}body.premium-portfolio .hero-role-divider{display:none}body.premium-portfolio .hero-description{font-size:15px}body.premium-portfolio .hero-actions{width:100%}body.premium-portfolio .hero-button{padding:13px 16px;font-size:12px;min-height:48px}body.premium-portfolio .premium-metrics .container{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px}.premium-metrics .metric{padding:22px 15px;border-bottom:1px solid #ffffff17}.premium-metrics .metric strong{font-size:29px}.premium-metrics .metric:first-child{border-left:none}.premium-metrics .metric:nth-child(2){border-right:none}.premium-metrics .metric:nth-child(3){border-bottom:none}.premium-metrics .metric:nth-child(4){border-right:none;border-bottom:none}body.premium-portfolio .project-card-body{padding:23px}body.premium-portfolio #contact .info-wrap,body.premium-portfolio #contact .php-email-form{padding:22px}body.premium-portfolio .project-view-pill{transform:none;opacity:1;right:12px;bottom:12px;font-size:10px}.project-toolbar{align-items:flex-start}.project-count{padding-left:3px}}
@media(max-width:390px){body.premium-portfolio .hero-button{width:100%}.premium-metrics .metric-message i{display:none}.filter-btn{padding:9px 11px;font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}body.premium-portfolio *,body.premium-portfolio *::before,body.premium-portfolio *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body.premium-portfolio .project-view-pill{transform:none;opacity:1}}