/*
Theme Name: TaskMate Company Profile
Theme URI: https://taskmate.example.com
Author: Tim TaskMate
Description: Tema company profile satu halaman untuk aplikasi TaskMate (manajemen tugas & deadline mahasiswa). Tinggal aktifkan, tanpa plugin.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: taskmate
*/
:root{--blue:#2979f5;--navy:#0f2a5e;--gold:#f2b93b;--ink:#16223b;--mut:#5b6b8a;--bg:#fbfcff;--soft:#eaf1ff;--line:#d8e3fa}
@media(prefers-color-scheme:dark){:root{--ink:#e8eefc;--mut:#9fb0d3;--bg:#0b1630;--soft:#12224a;--line:#223a6e;--navy:#cfe0ff}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 'Nunito Sans',system-ui,sans-serif}
h1,h2,h3{font-family:'Baloo 2','Nunito Sans',sans-serif;color:var(--navy);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800}h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800}h3{font-size:1.25rem;font-weight:700}
a{color:var(--blue)}p{margin:0 0 1em;max-width:68ch}
.w{max-width:1120px;margin:auto;padding:0 22px}section{padding:84px 0}section.alt{background:var(--soft)}
.lead{font-size:1.15rem;color:var(--mut)}
header.top{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .w{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:800 1.4rem 'Baloo 2';color:var(--navy);text-decoration:none}.brand img{width:38px;height:38px;border-radius:10px;object-fit:cover}
nav{display:flex;gap:18px;overflow-x:auto;white-space:nowrap}nav a{text-decoration:none;color:var(--mut);font-weight:700;font-size:.92rem}nav a:hover{color:var(--blue)}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:13px 24px;border-radius:14px;font-weight:800;text-decoration:none}
.btn.g{background:transparent;color:var(--blue);border:2px solid var(--blue)}.btn:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero .w{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1 span{background:linear-gradient(transparent 62%,var(--gold) 62%)}
.phone{background:var(--navy);border-radius:36px;padding:14px;max-width:340px;margin:auto;box-shadow:0 30px 60px -20px rgba(15,42,94,.45)}
.screen{background:#fff;border-radius:24px;padding:20px;color:#16223b}
.screen h3{color:#0f2a5e;margin:0 0 4px}.screen small{color:#5b6b8a}
.task{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #e4ebfa;cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-top:0;font:inherit;text-align:left;color:inherit}
.box{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid #2979f5;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900}
.task.done .box{background:#2979f5}.task.done .t{text-decoration:line-through;opacity:.5}
.t{flex:1;font-weight:700;font-size:.95rem}.due{font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:99px;background:#e8f0ff;color:#2979f5}
.due.hot{background:#fff1d1;color:#a56a00}.due.red{background:#ffe1e1;color:#c0292b}
.prog{height:8px;background:#e4ebfa;border-radius:9px;margin-top:14px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:#2979f5;transition:width .3s}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:24px}.alt .card{background:var(--bg)}
.card ul,.list{margin:0;padding-left:1.1em}.card li{margin:.35em 0}
.tag{display:inline-block;font-size:.78rem;font-weight:800;background:var(--soft);color:var(--blue);padding:3px 10px;border-radius:8px;margin-bottom:10px}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px}.steps li{counter-increment:s;padding-left:54px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--bg);display:grid;place-items:center;font:800 1.1rem 'Baloo 2'}
.swot{display:grid;grid-template-columns:1fr 1fr;gap:18px}.swot .card:nth-child(1){border-top:5px solid var(--blue)}.swot .card:nth-child(2){border-top:5px solid #c0292b}.swot .card:nth-child(3){border-top:5px solid var(--gold)}.swot .card:nth-child(4){border-top:5px solid var(--mut)}
.bmc{display:grid;gap:12px;grid-template-columns:repeat(10,1fr);grid-template-areas:"kp kp ka ka vp vp cr cr cs cs" "kp kp kr kr vp vp ch ch cs cs" "co co co co co ri ri ri ri ri"}
.bmc .card{padding:16px;font-size:.9rem}.bmc h3{font-size:1rem;margin-bottom:.3em}.bmc ul{padding-left:1em;margin:0}
.kp{grid-area:kp}.ka{grid-area:ka}.kr{grid-area:kr}.vp{grid-area:vp;background:var(--navy)!important;color:#fff}.vp h3{color:var(--gold)}.cr{grid-area:cr}.ch{grid-area:ch}.cs{grid-area:cs}.co{grid-area:co}.ri{grid-area:ri}
.price{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.price .card{display:flex;flex-direction:column}.price .big{font:800 2.4rem 'Baloo 2';color:var(--navy)}.price .big small{font-size:.95rem;color:var(--mut);font-weight:600}
.price .pop{border:3px solid var(--blue)}.price ul{flex:1;padding-left:1.1em}
.arch{overflow-x:auto}.arch svg{min-width:720px;width:100%;height:auto}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.95rem}th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--navy)}
footer{background:var(--navy);color:#cfe0ff;padding:48px 0;text-align:center}footer a{color:var(--gold)}
@media(max-width:860px){.hero .w,.swot{grid-template-columns:1fr}.bmc{display:grid;grid-template-columns:1fr;grid-template-areas:none}.bmc>*{grid-area:auto!important}section{padding:60px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.btn.sm{padding:9px 16px;font-size:.9rem;white-space:nowrap}.btn.gold{background:var(--gold);color:#0f2a5e}
.phead{padding:96px 0 64px;background:var(--soft)}.phead .w{max-width:760px}
.cta{background:var(--blue);color:#fff;text-align:center;padding:64px 0}.cta h2{color:#fff}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;text-align:left}footer h4{color:#fff;margin:0 0 .6em;font-family:'Baloo 2'}
footer ul{list-style:none;padding:0;margin:0}footer li{margin:.3em 0}footer a{text-decoration:none}footer p{margin:0 0 .8em}.copy{border-top:1px solid #2a4a8a;margin-top:32px!important;padding-top:20px;text-align:center;font-size:.9rem}
@media(max-width:860px){.fgrid{grid-template-columns:1fr}header.top nav{display:none}}