:root{--brand:#3a959a;--brand2:#1d5c62;--ink:#10282b;--muted:#587074;--bg:#eef6f6;--card:#fff;--line:#d5e5e6;
--font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;--serif:Georgia,'Times New Roman',serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#e9f4f4;--muted:#9bb5b8;--bg:#0b1a1c;--card:#122427;--line:#21393c;--brand:#5fbec3}}
:root[data-theme="dark"]{--ink:#e9f4f4;--muted:#9bb5b8;--bg:#0b1a1c;--card:#122427;--line:#21393c;--brand:#5fbec3}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.ticker{background:var(--brand2);color:#fff;font-size:13px;overflow:hidden;white-space:nowrap}
.ticker span{display:inline-block;padding:8px 0;animation:mq 30s linear infinite;padding-left:100%}
@keyframes mq{to{transform:translateX(-100%)}}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--card);border-bottom:3px solid var(--brand)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px}
.mark{width:40px;height:48px;flex:none;filter:drop-shadow(0 4px 8px rgba(58,149,154,.35))}
.logo b{font:700 24px var(--serif);letter-spacing:-.5px}.logo b i{color:var(--brand);font-style:normal}
.logo small{display:block;font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:-2px}
nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
nav a{flex:none;padding:6px 14px;border-radius:99px;font-size:14px;font-weight:600;border:1px solid var(--line)}
nav a:first-child,nav a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero{display:grid;gap:16px;margin:20px 0}
@media(min-width:860px){.hero{grid-template-columns:2fr 1fr}}
.lead{position:relative;min-height:380px;border-radius:18px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;
background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.18),transparent 40%),linear-gradient(135deg,var(--brand),var(--brand2) 60%,#0a2a2e)}
.lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 65%)}
.lead div{position:relative;z-index:1;padding:24px}
.tag{display:inline-block;background:#fff;color:var(--brand2);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.lead h1{font:700 clamp(24px,4.5vw,40px)/1.15 var(--serif);margin:12px 0}
.btn{display:inline-block;background:#fff;color:var(--brand2);font-weight:700;padding:10px 18px;border-radius:99px;font-size:14px;transition:transform .2s}
.btn:hover{transform:translateX(4px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
h2.sec{font:700 22px var(--serif);margin:32px 0 14px;display:flex;align-items:center;gap:10px}
h2.sec::before{content:"";width:6px;height:24px;background:var(--brand);border-radius:3px}
.pop ol{margin:0;padding:0;list-style:none;counter-item:p}
.pop li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:15px}
.pop li:last-child{border:0}
.pop li::before{counter-increment:p;content:counter(p);flex:none;font:700 28px/1 var(--serif);color:var(--brand);width:28px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.item{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.item:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.15)}
.thumb{height:130px;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.item:nth-child(2n) .thumb{background:linear-gradient(135deg,#12373b,var(--brand2))}
.item:nth-child(3n) .thumb{background:linear-gradient(135deg,var(--brand2),#8fd3d6)}
.item p{margin:0;padding:14px;font-weight:600;font-size:15px}
.opini{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.opini .card{border-left:5px solid var(--brand)}
.opini h3{margin:0 0 6px;font:700 18px var(--serif)}
.opini p{margin:0;color:var(--muted);font-size:14px}
.promo{margin:32px 0;border-radius:16px;padding:22px;background:linear-gradient(120deg,var(--brand2),var(--brand));color:#fff;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.promo b{font:700 20px var(--serif)}
footer{background:#0c2427;color:#b9d2d4;margin-top:40px;padding:28px 0;font-size:13px}
footer .links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px}
footer .links a:hover{color:#fff}
.fade{opacity:0;transform:translateY(16px);transition:.6s}.fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ticker span{animation:none;padding-left:0}.fade{opacity:1;transform:none}}

.prog{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));z-index:20}
.crumb{font-size:13px;color:var(--muted);margin:20px 0 10px}.crumb a{color:var(--brand)}
.layout{display:grid;gap:28px}@media(min-width:900px){.layout{grid-template-columns:minmax(0,1fr) 320px}}
article h1{font:700 clamp(28px,5vw,44px)/1.15 var(--serif);margin:12px 0}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cover{height:clamp(220px,40vw,420px);border-radius:18px;margin:20px 0 6px;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 45%),linear-gradient(135deg,var(--brand),var(--brand2) 70%,#0a2a2e);display:grid;place-items:center;color:rgba(255,255,255,.85);font-size:14px}
.cap{font-size:13px;color:var(--muted);margin-bottom:20px}
.body p{font:18px/1.8 var(--serif);margin:0 0 20px}
.body p:first-child::first-letter{float:left;font:700 64px/.85 var(--serif);color:var(--brand);padding:6px 10px 0 0}
.body blockquote{margin:28px 0;padding:18px 22px;border-left:6px solid var(--brand);background:var(--card);border-radius:0 14px 14px 0;font:italic 700 22px/1.4 var(--serif)}
.share{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.share a{padding:8px 16px;border-radius:99px;background:var(--brand);color:#fff;font-weight:700;font-size:13px}
.share a:hover{background:var(--brand2)}
aside .card{margin-bottom:18px}
aside h3{font:700 18px var(--serif);margin:0 0 8px}
.rel a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:15px}
.rel a:last-child{border:0}.rel a:hover{color:var(--brand)}
.ad{height:200px;border:2px dashed var(--line);border-radius:16px;display:grid;place-items:center;color:var(--muted);font-size:13px}

.mark{object-fit:contain}
.thumb{overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-hero{margin:20px 0;border-radius:18px;padding:34px 26px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.22),transparent 45%),linear-gradient(135deg,var(--brand),var(--brand2) 70%,#0a2a2e)}
.cat-hero h1{font:700 clamp(30px,6vw,52px)/1.1 var(--serif);margin:10px 0 6px}.cat-hero p{margin:0;opacity:.9}
.row{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:16px;transition:transform .25s,box-shadow .25s}
.row:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
.row .thumb{flex:none;width:34%;min-height:150px;height:auto}
.row div.t{padding:14px 14px 14px 0}.row small{color:var(--brand);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.row h3{font:700 19px/1.3 var(--serif);margin:6px 0}.row p{margin:0;color:var(--muted);font-size:14px}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:700}
.pager a:hover,.pager .on{background:var(--brand);color:#fff;border-color:var(--brand)}
.empty{padding:40px;text-align:center;color:var(--muted)}
nav a.on{background:var(--brand);color:#fff;border-color:var(--brand)}nav a:first-child:not(.on){background:none;color:inherit;border-color:var(--line)}nav a:first-child:not(.on):hover{background:var(--brand);color:#fff}
.sf{display:flex;border:1px solid var(--line);border-radius:99px;background:var(--bg);overflow:hidden;max-width:260px;flex:1}
.sf input{flex:1;min-width:0;border:0;background:none;padding:9px 14px;font:inherit;color:var(--ink);outline:0}
.sf button{border:0;background:var(--brand);color:#fff;padding:0 14px;cursor:pointer}
.masonry{columns:3 220px;column-gap:14px}
.ph{break-inside:avoid;margin-bottom:14px;border-radius:14px;overflow:hidden;position:relative;cursor:zoom-in;background:var(--card);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.ph:hover{transform:scale(1.02);box-shadow:0 14px 30px rgba(0,0,0,.2)}
.ph .img{display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--brand),var(--brand2));object-fit:cover}
.ph:nth-child(3n+2) .img{aspect-ratio:3/4}.ph:nth-child(4n) .img{aspect-ratio:1/1}
.ph span{position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;color:#fff;font-size:13px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.vgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.vc{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;text-align:left;padding:0;font:inherit;color:inherit}
.vc:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.vt{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center}
.vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt i{position:relative;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand2);font-style:normal;font-size:22px;padding-left:4px;transition:transform .2s}
.vc:hover .vt i{transform:scale(1.15)}
.vc h3{font:700 17px/1.3 var(--serif);margin:12px 14px 4px}.vc small{display:block;color:var(--muted);margin:0 14px 14px}
dialog.md{border:0;border-radius:16px;padding:0;width:min(960px,94vw);background:#000;color:#fff;overflow:hidden}
dialog.md::backdrop{background:rgba(5,25,28,.85);backdrop-filter:blur(4px)}
dialog.md img,dialog.md iframe{display:block;width:100%;max-height:80vh;aspect-ratio:16/9;border:0;object-fit:contain;background:#000}
dialog.md p{margin:0;padding:12px 16px;font-size:14px}
dialog.md .x{position:absolute;top:8px;right:8px;z-index:2;border:0;background:rgba(0,0,0,.6);color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer}
.sbox{display:flex;gap:10px;margin:24px 0 8px}
.sbox input{flex:1;min-width:0;font:inherit;font-size:18px;padding:14px 18px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.sbox input:focus{border-color:var(--brand);outline:0}
.sbox button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:0 24px;border-radius:14px;cursor:pointer}
mark{background:rgba(58,149,154,.28);color:inherit;border-radius:3px;padding:0 2px}
@media(max-width:600px){.bar{flex-wrap:wrap}.sf{max-width:none;flex-basis:100%;order:3}}

.komen{margin-top:28px}.kom{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}.kom small{color:var(--muted);margin-left:6px}.kom p{margin:6px 0 0}
.kf{display:grid;gap:10px;margin-top:14px}.kf input,.kf textarea{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}.kf input:focus,.kf textarea:focus{outline:0;border-color:var(--brand)}.kf .btn{border:0;cursor:pointer;justify-self:start}
.note{background:rgba(58,149,154,.15);border-left:5px solid var(--brand);padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600}

.thumb picture,.cover picture{display:block;width:100%;height:100%}.cover picture img{width:100%;height:100%;object-fit:cover;display:block}
.ph picture{display:block}.ph picture img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.ph:nth-child(3n+2) picture img{aspect-ratio:3/4}.ph:nth-child(4n) picture img{aspect-ratio:1/1}