/* PekanBewys BoordDokter 360 – interactive, responsive, accessible farmer toolkit */
:root{--night:#061b14;--deep:#09251b;--forest:#103426;--sea:#184634;--mint:#c6f08f;--gold:#e9be6f;--fog:#b5ceb8;--paper:#f5f5e9;--line:rgba(174,225,166,.19);--warning:#f4d19d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#09251b;color:var(--paper);font:15px/1.54 Inter,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
a{color:inherit}a:hover{text-decoration-thickness:2px}
.wrap{width:100%;max-width:1440px;margin:auto;padding:0 clamp(18px,3vw,43px)}
.topbar{position:sticky;top:0;z-index:30;background:rgba(7,30,21,.97);backdrop-filter:blur(16px);border-bottom:1px solid #3d5c43}
.topinner{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:70px}
.brand{font-size:21px;font-weight:900;letter-spacing:-.055em;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brandicon{width:34px;height:34px;display:grid;place-items:center;color:var(--mint);border-radius:50%;border:1px solid var(--mint);font-size:23px}
.navigation{display:flex;gap:19px;align-items:center}
.navigation>a{font-size:12px;font-weight:750;color:#cbe3ce;text-decoration:none;white-space:nowrap}
.langs{display:flex;border:1px solid #6e9478;border-radius:30px;padding:3px;gap:3px;flex-shrink:0}
.langs button{background:none;border:0;border-radius:30px;color:#cfddce;padding:7px 11px;font-size:12px;font-weight:900}
.langs button[aria-pressed=true]{background:var(--mint);color:var(--night)}
.hero{padding:54px 0 46px;overflow:hidden;position:relative;border-bottom:1px solid #3c6346;background:radial-gradient(circle at 85% 0,#38724a75,transparent 43%),linear-gradient(140deg,#071f16,#103b29)}
.hero-inner{display:flex;align-items:center;gap:20px;justify-content:space-between;position:relative}
.hero-copy{position:relative;z-index:1}
.eyebrow,.tinycap,.mini-title{color:var(--mint);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.pulse{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px #b9ee791b;margin-right:9px}
.hero h1{font-weight:850;font-size:clamp(40px,5.7vw,83px);letter-spacing:-.07em;line-height:1.02;max-width:1050px;margin:16px 0 21px}
.hero h1 em{color:var(--mint);font-style:normal}
.hero p{max-width:680px;color:#c2d9c6;font-size:clamp(15px,1.6vw,18px);margin:0}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:23px}
.pillrow span{font-size:11px;border:1px solid #63856b;color:#dbeed5;border-radius:40px;padding:8px 12px;font-weight:700}
.hero-ornament{flex:0 0 210px;position:relative;height:220px;display:grid;place-items:center}
.hero-ornament .orb{position:absolute;border:1px solid #9ac4857a;border-radius:50%;height:210px;width:210px;animation:spin 33s linear infinite}
.hero-ornament .orb2{height:155px;width:155px;border-style:dashed;animation-direction:reverse;animation-duration:25s}
.hero-ornament .orb3{height:110px;width:110px;box-shadow:0 0 95px #87cd483e;animation:none}
.hero-ornament span{font-size:48px;color:var(--mint);font-weight:850;letter-spacing:-.07em}
@keyframes spin{to{transform:rotate(360deg)}}
.main{background:linear-gradient(180deg,#123d2b,#0b2a1e 300px,#09251c 100%);padding:22px 0 52px}
.column-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:18px;align-items:start}
.panel{min-width:0;background:#102f23;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 17px 45px #061c154d}
.panelhead{padding:24px 23px 17px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.panelhead h2{margin:8px 0 5px;letter-spacing:-.047em;line-height:1.12;font-size:clamp(21px,2.25vw,28px)}
.panelhead p{margin:0;font-size:12px;color:#b6d0b9}
.scene-id{font:800 9px/1.3 system-ui;letter-spacing:.15em;color:#76a785;white-space:nowrap;margin-top:5px}
.tree-stage{position:relative;width:100%;background:#0b2a1e;overflow:hidden;min-height:320px}
.tree-art{width:100%;height:auto;display:block;filter:saturate(1.04)}
.radar-loop{pointer-events:none;position:absolute;z-index:1;width:59%;aspect-ratio:1;left:21%;top:6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(151,236,113,.1),transparent 24%,transparent 94%,rgba(151,236,113,.3));mix-blend-mode:screen;animation:spin 14s linear infinite}
.hotspot{position:absolute;z-index:3;transform:translate(-50%,-50%);border-radius:20px;border:1px solid #92bb82;background:#0c3029eb;padding:6px 10px;display:flex;align-items:center;gap:8px;color:#eaffd8;font-size:11px;font-weight:850;box-shadow:0 9px 22px #00190c66;white-space:nowrap;transition:transform .18s,background .18s;min-height:35px}
.hotspot:hover,.hotspot[aria-pressed=true]{background:#d2f6a0;color:#123a23;transform:translate(-50%,-50%) scale(1.08);border-color:#e1ffd0}
.beacon{width:11px;height:11px;border:2px solid #d8fba5;box-shadow:0 0 0 6px #c4ee9035;background:#7fb55b;border-radius:50%}
.hotspot[aria-pressed=true] .beacon{background:#164f36;border-color:#35643c}
.tree-footer{display:flex;justify-content:space-between;gap:10px;padding:15px 20px;align-items:center;background:#0c2b20;font-size:10px;color:#bad0b8}
.scan-light{color:#bdf68e;white-space:nowrap;font-size:10px;font-weight:850}
.zone-buttons{padding:15px;display:flex;flex-wrap:wrap;gap:7px}
.zone-btn{border:1px solid #4b7256;background:#1a4632;color:#d1e9ce;border-radius:50px;padding:9px 12px;font-size:12px;font-weight:800;min-height:37px}
.zone-btn[aria-pressed=true],.zone-btn:hover{background:var(--mint);border-color:var(--mint);color:#12331e}
.issue-body{padding:0 23px 23px}
.current-zone{background:linear-gradient(110deg,#235039,#1a3e2d);border:1px solid #658c63;border-radius:14px;padding:13px 17px;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.current-zone>span{font-size:26px;line-height:1}
.current-zone small{display:block;color:#aecdaa;font-size:10px;font-weight:850;letter-spacing:.1em}
.current-zone strong{font-size:19px;letter-spacing:-.03em}
.field-title{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#bad7b0;margin:20px 0 9px}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.symptom-btn{min-height:65px;text-align:left;border:1px solid #486a55;background:#0a2a1e;border-radius:12px;padding:11px 12px;color:#d6ead3;line-height:1.25;font-size:12px;font-weight:800;display:flex;align-items:center;gap:10px}
.symptom-btn .emoji{font-size:22px}
.symptom-btn:hover,.symptom-btn[aria-pressed=true]{border-color:#c2f48d;background:#294b35;color:#f6ffd8;box-shadow:0 0 0 1px #82bb6b37 inset}
.spread-options{display:flex;gap:7px;flex-wrap:wrap}
.spread-options button{font-size:11px;border:1px solid #4c7758;border-radius:25px;background:#173b2c;padding:9px 12px;color:#bfddc0;font-weight:850}
.spread-options button[aria-pressed=true]{border-color:var(--mint);background:var(--mint);color:#0e2c20}
.summary-summary{border:1px solid #467452;background:linear-gradient(135deg,#1e4a35,#153d2c);border-radius:15px;padding:18px;margin:20px 0 12px}
.summary-summary h3{font-size:23px;line-height:1.12;letter-spacing:-.045em;margin:10px 0 9px}
.summary-summary>p{font-size:12px;color:#c9ddc6;margin:0 0 13px}
.cause-list{display:flex;flex-direction:column;gap:8px}
.cause{background:#102f25a1;border:1px solid #3b6748;border-radius:10px;padding:12px 13px}
.cause b{display:block;font-size:13px;color:#dcf3d3;margin-bottom:3px}
.cause p{font-size:11px;margin:0;color:#bad3b9}
.do-next{border:1px solid #355b45;border-radius:14px;padding:15px 18px;background:#0c2b20}
.do-next ol{padding-left:19px;margin:10px 0 0;color:#d4e5d2;font-size:12px}
.do-next li{margin:0 0 8px}
.do-next li:last-child{margin-bottom:0}
.evidence-links{display:flex;flex-direction:column;gap:8px}
.evidence-links a{display:flex;justify-content:space-between;gap:11px;padding:10px 13px;background:#1b4631;border-radius:10px;border:1px solid #38684c;text-decoration:none;color:#d2efb9;font-weight:700;font-size:12px}
.evidence-links a:hover{background:#25593e}
.no-diagnosis{background:#453b26;color:#f5dfb5;border-left:4px solid var(--gold);border-radius:8px;padding:12px 14px;font-size:11px;margin-top:17px}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}
.action{min-height:42px;padding:10px 13px;border-radius:10px;font-size:11px;font-weight:900}
.action.primary{background:var(--mint);color:#0a2b19;border:1px solid var(--mint)}
.action.alt{background:#204a34;color:#e1f6d8;border:1px solid #769968}
.notice{font-size:11px;color:#c9e6ba;min-height:20px;margin:9px 0 0}
.season-panel{margin-top:18px;padding:25px}
.season-top{display:flex;justify-content:space-between;gap:25px;align-items:end}
.season-top h2{font-size:clamp(27px,3.3vw,42px);letter-spacing:-.055em;line-height:1.1;margin:10px 0}
.season-top p{max-width:690px;font-size:13px;color:#b5ccbb;margin:0}
.region-picker{min-width:270px}
.region-picker label{display:block;font-size:11px;font-weight:850;color:#cce6ba;margin-bottom:7px}
.region-picker select{width:100%;background:#173d2d;border:1px solid #739376;color:#ebf4e5;border-radius:12px;padding:11px 13px;min-height:45px;font-size:12px}
.month-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px;margin:24px 0}
.month-grid button{border-radius:11px;background:#133a2a;border:1px solid #527052;color:#c0dabe;font-size:11px;font-weight:850;padding:13px 4px;min-height:43px}
.month-grid button:hover,.month-grid button[aria-pressed=true]{background:var(--mint);color:#102c20;border-color:var(--mint)}
.season-data{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.season-current,.season-watch{border:1px solid #3b6249;background:#0b2c20;border-radius:16px;padding:21px}
.season-current{display:flex;gap:20px}
.month-number{font-size:clamp(58px,7vw,99px);font-weight:900;letter-spacing:-.09em;color:var(--mint);line-height:1}
.season-current h3{margin:9px 0;font-size:22px;letter-spacing:-.04em}
.season-current p{font-size:12px;color:#c3d7c1;margin:0;max-width:360px}
.season-watch ul{margin:11px 0 0;padding-left:20px;color:#e1ebd5;font-size:12px}
.season-watch li{padding-bottom:8px}
.region-advice{margin-top:12px;border-top:1px solid #466a51;padding-top:12px;font-size:12px;color:#b7daaa}
.source-line{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:17px}
.source-line span{font-size:11px;color:#b0c4af}
.source-line a{font-size:12px;font-weight:900;color:#caedac}
.final-notes{padding:36px 0 20px}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px;padding-bottom:30px;border-bottom:1px solid #42634c}
.final-grid h2{font-size:clamp(25px,3vw,39px);line-height:1.08;letter-spacing:-.05em;margin:12px 0 0}
.final-grid p{color:#b8d0bd;font-size:14px;margin-top:0}
.bottom-links{display:flex;gap:15px;flex-wrap:wrap}
.bottom-links a{color:var(--mint);font-size:12px;font-weight:850}
.legal{color:#9fbda5;font-size:11px;margin:20px 0 0}
footer{background:#071c14;border-top:1px solid #385641;padding:20px 0;color:#bfddc4;font-size:12px}
footer a{font-weight:900;color:#c7eda3}
@media(max-width:1120px){.column-grid{grid-template-columns:1fr}.tree-panel{max-width:100%}.tree-stage{max-height:500px}.tree-art{max-height:500px;object-fit:contain}.hero-ornament{flex-basis:150px;height:180px}.hero-ornament .orb{width:150px;height:150px}.hero-ornament .orb2{width:110px;height:110px}.hero-ornament .orb3{width:75px;height:75px}.hero-ornament span{font-size:35px}.month-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:700px){.hero{padding:39px 0 28px}.hero h1{font-size:clamp(35px,9vw,61px)}.hero-ornament{display:none}.column-grid{gap:13px}.panelhead{padding:19px 17px 15px}.panelhead h2{font-size:22px}.issue-body{padding:0 16px 19px}.tree-footer{font-size:9px;padding:12px}.scene-id{display:none}.hotspot{font-size:10px;padding:5px 7px;gap:5px;min-height:29px}.hotspot .beacon{width:7px;height:7px;box-shadow:0 0 0 3px #c4ee9035}.season-panel{padding:17px}.season-top{display:block}.region-picker{min-width:0;margin-top:20px}.season-data{grid-template-columns:1fr}.final-grid{grid-template-columns:1fr}.navigation{gap:7px}.navigation>a:nth-child(2){display:none}}
@media(max-width:390px){.brand{font-size:16px}.brandicon{width:28px;height:28px}.navigation>a{font-size:11px}.topinner{gap:7px}.langs button{padding:5px 8px}.hotspot{font-size:9px}.tree-footer .scan-light{display:none}.symptom-grid{gap:6px}.symptom-btn{padding:9px 8px;font-size:11px}.symptom-btn .emoji{font-size:19px}.month-grid{gap:4px}.month-grid button{font-size:10px}.season-current{gap:13px}.month-number{font-size:58px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.hero-ornament,.hotspot,.radar-loop,.zone-buttons,.actions,.month-grid,.lang{display:none!important}body,.main,.panel{background:#fff!important;color:#101c14!important}.cause,.summary-summary,.season-current,.season-watch{background:#fff!important;color:#101c14!important;border:1px solid #999!important}.cause *,.summary-summary *, .season-data *,.tree-panel *,.issue-panel *{color:#111!important}.column-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:30px}footer,.no-diagnosis{font-size:10px}a{color:#153!important}}

/* tree-art-align-fix: maintain exact hotspot placement when tablets show the stacked tree card */
@media(min-width:701px) and (max-width:1120px){.tree-panel{max-width:760px;margin-left:auto;margin-right:auto}.tree-stage{max-height:none}.tree-art{max-height:none;height:auto;object-fit:fill}}