/* DataTani — atlas: kontur, koordinat, lapisan peta. Nada biru kehijauan. */
.app-datatani{--tone:#1F7A9A;--tone-d:#155E78;--tone-bg:#E7F3F7;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%231F7A9A' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M-20 120C80 60 160 160 260 110S420 40 620 100'/%3E%3Cpath d='M-20 160C90 100 170 200 270 150S430 80 620 140'/%3E%3Cpath d='M-20 200C100 140 180 240 280 190S440 120 620 180'/%3E%3Cpath d='M-20 330C60 300 140 380 240 350S400 270 620 320'/%3E%3Cpath d='M-20 370C70 340 150 420 250 390S410 310 620 360'/%3E%3Cpath d='M-20 480C90 450 200 530 300 500S470 430 620 470'/%3E%3Cpath d='M-20 520C100 490 210 570 310 540S480 470 620 510'/%3E%3Cellipse cx='450' cy='250' rx='60' ry='34'/%3E%3Cellipse cx='450' cy='250' rx='34' ry='18'/%3E%3Cellipse cx='120' cy='430' rx='44' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  background:#F6FAFB}
.app-datatani .btn-primary{background:var(--tone);box-shadow:0 8px 20px -8px rgba(31,122,154,.6)}
.app-datatani .btn-primary:hover{background:var(--tone-d)}
.app-datatani .btn-line:hover{border-color:var(--tone);color:var(--tone)}

.dt-hero{padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,88px);background:var(--topo),linear-gradient(180deg,#E5F1F5,#F6FAFB);background-size:600px 600px,auto}
.dt-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.dt-coord{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--tone-d);background:rgba(255,255,255,.8);border:1px dashed rgba(31,122,154,.45);padding:6px 12px;border-radius:6px;margin-bottom:20px}
.dt-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.08;margin-bottom:18px;color:#0E3A4A}
.dt-lead{font-size:17.5px;color:var(--muted);max-width:52ch;margin-bottom:26px}
.dt-plate{position:relative;padding:18px}
.dt-hero-shot{border-radius:12px;overflow:hidden;border:1px solid #C3DCE5;background:#fff;box-shadow:0 30px 60px -28px rgba(14,58,74,.45)}
.dt-tick{position:absolute;width:22px;height:22px;border-color:var(--tone);border-style:solid;border-width:0}
.dt-tick.tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.dt-tick.tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.dt-tick.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.dt-tick.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.dt-legend{position:absolute;left:-14px;bottom:-14px;display:grid;gap:5px;background:#fff;border:1px solid #C3DCE5;border-radius:10px;padding:12px 14px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow)}
.dt-legend b{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--tone-d)}
.dt-legend span{display:flex;align-items:center;gap:8px}
.dt-legend i{width:14px;height:10px;border-radius:2px;opacity:.85}

.dt-sec{padding:clamp(64px,8vw,100px) 0}
.dt-sec-band{background:var(--topo),var(--tone-bg);background-size:600px 600px,auto;border-top:1px solid #CFE4EB;border-bottom:1px solid #CFE4EB}
.dt-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--tone);margin-bottom:12px}
.dt-kicker::before{content:"";width:10px;height:10px;border:2px solid var(--tone);border-radius:50%}
.dt-sec h2{font-size:clamp(28px,3.2vw,40px);color:#0E3A4A}
.dt-head{max-width:720px;margin-bottom:36px}
.dt-muted{color:var(--muted)}
.dt-small{font-size:14px;color:var(--muted)}
.dt-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:start}

.dt-layers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dt-layers li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;background:#fff;border:1px solid #CFE4EB;border-radius:14px;padding:18px 20px;margin-left:calc(var(--i) * 10px);box-shadow:0 1px 0 #CFE4EB,0 8px 18px -14px rgba(14,58,74,.4);transition:transform .2s}
.dt-layers li:hover{transform:translateX(4px)}
.dt-lid{font-family:var(--mono);font-weight:500;font-size:14px;color:#fff;background:var(--tone);border-radius:8px;display:grid;place-items:center;height:36px}
.dt-layers h3{font-size:17px;margin-bottom:2px;color:#0E3A4A}
.dt-layers p{margin:0;font-size:14.5px;color:var(--muted)}

.dt-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.dt-roles li{background:#fff;border:1px solid #CFE4EB;border-radius:16px;padding:22px}
.dt-scope{display:block;width:48px;height:48px;color:var(--tone);margin-bottom:14px}
.dt-scope.is-local{color:#D08A1E}
.dt-roles h3{font-size:17px;margin-bottom:8px;color:#0E3A4A}
.dt-badge{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:5px;background:var(--tone-bg);color:var(--tone-d);margin-bottom:10px}
.dt-roles p{font-size:14px;color:var(--muted);margin:0}

.dt-split-rev{grid-template-columns:1fr 1fr}
.dt-verif{display:flex;align-items:center;gap:8px;margin:22px 0 12px;flex-wrap:wrap}
.dt-verif span{font-size:13.5px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #CFE4EB;color:var(--ink)}
.dt-verif span.ok{background:var(--ok-bg);border-color:#B7E2CB;color:var(--ok)}
.dt-verif i{width:24px;height:2px;background:repeating-linear-gradient(90deg,var(--tone) 0 4px,transparent 4px 7px)}
.dt-rules{list-style:none;margin:0;padding:24px;display:grid;gap:4px;background:#fff;border:1px solid #CFE4EB;border-radius:18px}
.dt-rules li{display:flex;gap:14px;align-items:flex-start;padding:12px 4px;border-bottom:1px dashed #CFE4EB;font-weight:500;color:var(--ink)}
.dt-rules li:last-child{border-bottom:0}
.dt-pin{flex:none;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--tone);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;margin-top:1px}
.dt-pin{line-height:1}
.dt-rules li .dt-pin{font-weight:500}

.dt-viewer{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
.dt-vtabs{display:grid;gap:6px;background:#fff;border:1px solid #CFE4EB;border-radius:18px;padding:10px;position:sticky;top:calc(var(--header-h) + 20px)}
.dt-vtabs button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;cursor:pointer;font:inherit;color:var(--text)}
.dt-vtabs button:hover{background:var(--tone-bg)}
.dt-vtabs button[aria-selected="true"]{background:var(--tone);color:#fff}
.dt-vtabs button[aria-selected="true"] small,.dt-vtabs button[aria-selected="true"] .dt-vn{color:#CFEAF3}
.dt-vn{font-family:var(--mono);font-size:12px;color:var(--faint)}
.dt-vtabs b{display:block;font-size:14.5px}
.dt-vtabs small{display:block;font-size:12.5px;color:var(--muted)}
.dt-vpanels [role="tabpanel"]{outline-offset:6px}
.dt-vshot{border-radius:14px;overflow:hidden;border:1px solid #C3DCE5;background:#fff;box-shadow:var(--shadow)}
.dt-vpanels p{margin:14px 4px 0;color:var(--muted)}

@media (max-width:1080px){.dt-roles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){
  .dt-hero-grid,.dt-split,.dt-split-rev{grid-template-columns:1fr}
  .dt-viewer{grid-template-columns:1fr}
  .dt-vtabs{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
  .dt-vtabs small{display:none}
}
@media (max-width:640px){
  .dt-roles{grid-template-columns:1fr 1fr}
  .dt-layers li{margin-left:0}
  .dt-legend{display:none}
}