<div class="row mb-4">
    

    <div class="col-lg-6 col-md-6 mb-3">
        <a href="{{ url('dashboard?viewtype=masa-pemeliharaan') }}" 
           class="btn btn-lg w-100 d-flex align-items-center justify-content-center position-relative overflow-hidden"
           style="background: #f5576c;
                  color: #fff; 
                  font-weight: bold;
                  font-size: 1.1rem;
                  padding: 20px 30px;
                  border-radius: 15px;
                  box-shadow: 0 8px 20px rgba(245,87,108,0.4);
                  border: none;
                  transition: all 0.3s ease;
                  text-decoration: none;"
           onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 30px rgba(245,87,108,0.5)';"
           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 20px rgba(245,87,108,0.4)';">
            <div class="d-flex align-items-center gap-3">
                <div style="">
                    <i class="fas fa-leaf mr-3" style="font-size: 2rem;"></i>
                </div>
                <div class="text-left">
                    <h4 class="mb-0 text-white" style="font-size: 1.3rem;">Masa Pemeliharaan</h4>
                    <small style="opacity: 0.9;">Monitoring Perawatan Kebun</small>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-6 col-md-6 mb-3">
        <a href="{{ url('dashboard?viewtype=masa-panen') }}" 
           class="btn btn-lg w-100 d-flex align-items-center justify-content-center position-relative overflow-hidden"
           style="background: #667eea;
                  color: #fff; 
                  font-weight: bold;
                  font-size: 1.1rem;
                  padding: 20px 30px;
                  border-radius: 15px;
                  box-shadow: 0 8px 20px rgba(102,126,234,0.4);
                  border: none;
                  transition: all 0.3s ease;
                  text-decoration: none;"
           onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 30px rgba(102,126,234,0.5)';"
           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 20px rgba(102,126,234,0.4)';">
            <div class="d-flex align-items-center gap-3">
                <div style="">
                    <i class="fas fa-wheat-awn mr-3" style="font-size: 2rem;"></i>
                </div>
                <div class="text-left">
                    <h4 class="mb-0 text-white" style="font-size: 1.3rem;">Masa Panen</h4>
                    <small style="opacity: 0.9;">Monitoring Produksi Tebu</small>
                </div>
 
            </div>
        </a>
    </div>
    <style>
       .glow-notif-green {
            display: inline-block;
            background: #686868;
            color: #fff;
            font-weight: bold;
            padding: 1px 8px;
            border-radius: 20px;
            font-size: 0.95em;
            box-shadow: 0 0 8px 2px #28d17c, 0 0 20px 4px #28d17c80;
            animation: glow-green .7s infinite alternate;
            margin-left: 10px;
            height: 16px;
            left: 28px !important;
            position: absolute;
        }
        @keyframes glow-green {
            from {
                box-shadow: 0 0 4px 1px #28d17d00, 0 0 20px 4px #28d17c80;
            }
            to {
                background: #28d17c;
            }
        }
    </style>
</div>