<template>
  <div class="voter-home-page container-fluid">
    <div class="row home-hero-row">
      <div class="col-xs-12">
        <div class="home-section-container home-hero-section">
          <section class="home-hero-wrap">
            <div class="hero-banner home-hero-banner">
              <img :src="bannerUrl" alt="Banner" class="hero-banner-image">
              <div class="home-hero-banner-shine" aria-hidden="true"></div>
            </div>
            <div class="hero-banner-caption home-hero-caption">
              <h1 class="hero-banner-title">Portal Pengundian</h1>
              <p class="hero-banner-subtitle">
                Gunakan <strong class="home-hero-strong">pautan pantas</strong> di bawah untuk navigasi pantas ke
                halaman utama portal.
              </p>
              <div class="home-hero-badges">
                <span class="home-badge home-badge--location">
                  <i class="fa fa-map-marker"></i> {{ kehadiranLabel }}
                </span>
                <span class="home-badge" :class="hasVoted() ? 'home-badge--ok' : 'home-badge--pending'">
                  <i class="fa" :class="hasVoted() ? 'fa-check-circle' : 'fa-clock-o'"></i>
                  {{ hasVoted() ? 'Sudah mengundi' : 'Belum mengundi' }}
                </span>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

    <!-- Butiran Keahlian and Coupon Claim Code -->
    <div class="row home-content-row">
      <div class="col-xs-12 col-md-6 home-column home-column--primary">
        <!-- Member Information Card -->
        <div class="home-section-container">
          <h2 class="home-section-heading">
            <span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-list-alt"></i></span>
            Maklumat Anggota
          </h2>

          <div v-if="showRegisterCta" class="home-member-cta">
            <div class="home-member-cta-hint home-member-cta-hint--warning" role="alert">
              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
              <span>Sila semak butiran keahlian anda sebelum mendaftar kehadiran.</span>
            </div>
            <div class="home-member-cta-btn-container">
              <router-link :to="{ name: 'Attendance' }" class="btn btn-primary btn-block home-member-cta-btn">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                Daftar MAT Sekarang
              </router-link>
            </div>
          </div>

          <div class="member-info-card home-member-card home-member-card--in-section">
            <div v-for="row in memberRows" :key="row.key || row.label" class="member-field">
              <span class="member-field-icon" aria-hidden="true"><i class="fa" :class="row.icon"></i></span>
              <div class="member-field-body">
                <span class="member-field-label">{{ row.label }}</span>
                <div class="member-field-value-wrap">
                  <template v-if="row.entries">
                    <div v-for="(entry, entryIdx) in row.entries" :key="entryIdx" class="member-field-entry">
                      <span class="member-field-value">{{ entry.period }}: {{ entry.value }}</span>
                      <span v-if="entry.subvalue" class="member-field-subvalue">{{ entry.subvalue }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <span class="member-field-value">{{ row.value }}</span>
                    <span v-if="row.subvalue" class="member-field-subvalue">{{ row.subvalue }}</span>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Coupon Claim Code Card -->
      <div class="col-xs-12 col-md-6 home-column home-column--secondary">
        <div class="home-claim-row">
          <div class="home-section-container home-section-container--claim">
            <h2 class="home-section-heading">
              <span class="home-section-heading-icon home-section-heading-icon--teal" aria-hidden="true"><i
                  class="fa fa-ticket"></i></span>
              Kod Tuntutan Elaun
            </h2>
            <div class="home-claim-card">
              <div v-if="!canGenerateClaimCode" class="home-claim-locked">
                <div class="home-claim-locked-icon"><i class="fa fa-lock"></i></div>
                <p class="home-claim-locked-text">
                  Kod tuntutan hanya tersedia untuk kehadiran <strong>Fizikal</strong> selepas anda
                  <strong>selesai mengundi</strong>.
                </p>
              </div>

              <div v-else class="home-claim-active">
                <p class="home-claim-hint">
                  Tunjukkan kod ini kepada petugas di kaunter untuk pengesahan bayaran tunai.
                </p>

                <div v-if="claimError" class="alert alert-danger home-claim-alert">
                  {{ claimError }}
                </div>

                <div v-if="claimCode" class="home-claim-code-box">
                  <div class="home-claim-code">{{ claimCode }}</div>
                  <div class="home-claim-expiry">
                    Tamat tempoh: <strong>{{ claimExpiresAt || '—' }}</strong>
                  </div>
                </div>

                <button type="button" class="btn btn-primary btn-block home-claim-btn" :disabled="claimLoading"
                  @click="generateClaimCode()">
                  <i class="fa fa-refresh" :class="{ 'fa-spin': claimLoading }"></i>
                  {{ claimLoading ? ' Menjana...' : (claimCode ? ' Jana Semula Kod' : ' Jana Kod Tuntutan') }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Pautan Pantas -->
    <div class="row home-quick-links-row">
      <div class="col-xs-12">
        <div class="home-section-container">
          <h2 class="home-section-heading">
            <span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-th-large"></i></span>
            Pautan Pantas
          </h2>
          <div class="home-quick-links-grid">
            <div v-for="link in quickLinks" :key="link.key" class="home-quick-link-wrap">
              <a v-if="link.external" :href="link.href" class="home-cta-link" :class="link.variant" target="_blank"
                rel="noopener noreferrer">
                <span class="home-cta-icon"><i class="fa" :class="link.icon"></i></span>
                <span class="home-cta-body">
                  <span class="home-cta-title">{{ link.title }}</span>
                  <span class="home-cta-desc">{{ link.desc }}</span>
                </span>
                <span class="home-cta-chevron" aria-hidden="true"><i class="fa fa-external-link"></i></span>
              </a>
              <router-link v-else :to="link.route" class="home-cta-link" :class="link.variant">
                <span class="home-cta-icon"><i class="fa" :class="link.icon"></i></span>
                <span class="home-cta-body">
                  <span class="home-cta-title">{{ link.title }}</span>
                  <span class="home-cta-desc">{{ link.desc }}</span>
                </span>
                <span class="home-cta-chevron" aria-hidden="true"><i class="fa fa-angle-right"></i></span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Kad Ahli Digital -->
    <!-- <div class="col-xs-12">
      <div class="home-section-container home-section-container--kad">
        <h2 class="home-section-heading">
          <span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-credit-card"></i></span>
          Kad Ahli Digital
        </h2>
        <div class="home-kad-wrap">
          <div class="kad-keahlian">
            <div class="member-card-vertical">MEMBER CARD</div>

            <div class="kad-logo">
              <img src="/images/logo_kad.png" alt="Logo" class="kad-logo-img">
            </div>

            <div class="kad-content">
              <img src="images/KOPKB_Final.png" class="watermark" alt="">

              <div class="member-details">
                <div class="detail-item">
                  <span class="detail-label">NAMA:</span>
                  <span class="detail-value">{{ data.user.name }}</span>
                </div>

                <div class="detail-item">
                  <span class="detail-label">NO KAD PENGENALAN:</span>
                  <span class="detail-value">{{ data.user.no_kp }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">NO ANGGOTA:</span>
                  <span class="detail-value">{{ data.user.no_anggota }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">UNIT:</span>
                  <span class="detail-value">{{ data.user.unit }}</span>
                </div>

                <div class="detail-item detail-item--barcode">
                  <svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- Saham Vote Blocked Message -->
    <div v-if="showSahamVoteBlockedMessage" class="row home-saham-block-row">
      <div class="col-xs-12">
        <div class="alert alert-warning home-saham-block-alert" role="alert">
          <span class="home-saham-block-icon" aria-hidden="true"><i class="fa fa-exclamation-triangle"></i></span>
          <span>{{ sahamVoteBlockedMessage }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import JsBarcode from "jsbarcode";

export default {
  data() {
    return {
      noKp: "",
      claimLoading: false,
      claimCode: "",
      claimExpiresAt: "",
      claimError: "",
      matLinkUrl: "https://linktr.ee/kopkb",
      portalSettings: null,
    };
  },

  computed: {
    etikaUrl: function () {
      var url = this.portalSettings && this.portalSettings.attendance_etika_url
        ? String(this.portalSettings.attendance_etika_url).trim()
        : '';
      return url;
    },

    bannerUrl() {
      const p = this.portalSettings && this.portalSettings.home_banner_image_path
        ? this.portalSettings.home_banner_image_path
        : "/images/banner.jpeg";

      const v = this.portalSettings && this.portalSettings.updated_at
        ? encodeURIComponent(this.portalSettings.updated_at)
        : "";

      if (!v) return p;
      return p.includes("?") ? `${p}&v=${v}` : `${p}?v=${v}`;
    },
    /**
     * Maya: boleh mengundi selepas daftar kehadiran. Fizikal: perlu disahkan pentadbir dahulu.
     */
    canProceedToVote() {
      const u = this.data?.user;
      if (!u || Number(u.kehadiran) === 0) return false;
      if (Number(u.kehadiran) !== 1) return true;
      return Boolean(u.fizikal_registration_verified_at);
    },

    /** Saham (RM) must be at least 500 to vote — see Voter model `saham`. */
    canVoteBySaham() {
      const s = Number(this.data?.user?.saham);
      return !Number.isNaN(s) && s >= 500;
    },

    showSahamVoteBlockedMessage() {
      const election = this.data?.election || {};
      return (
        Number(election.status) === 2 &&
        !this.hasVoted() &&
        this.canProceedToVote &&
        !this.canVoteBySaham
      );
    },

    sahamVoteBlockedMessage() {
      return "Undian tidak tersedia: jumlah saham anda mestilah sekurang-kurangnya RM 500.";
    },

    quickLinks() {
      const user = this.data?.user || {};
      const election = this.data?.election || {};
      const noAnggota = user.no_anggota;
      const matLabel = (this.portalSettings && this.portalSettings.home_mat_label)
        ? this.portalSettings.home_mat_label
        : "MAT KE-29";
      const links = [
        {
          key: "attendance",
          title: "Daftar MAT",
          desc: "Daftar kehadiran fizikal atau maya",
          icon: "fa-pencil-square-o",
          route: { name: "Attendance" },
          variant: "home-cta-link--teal",
          external: false
        },
        {
          key: "calon",
          title: "Maklumat Calon",
          desc: "Senarai calon dan profil penuh mengikut jawatan",
          icon: "fa-users",
          route: { name: "Voter Calon" },
          variant: "home-cta-link--indigo",
          external: false
        },
        {
          key: "mat28",
          title: matLabel,
          desc: "Pautan luar ke maklumat mesyuarat dan sumber berkaitan",
          icon: "fa-globe",
          href: this.matLinkUrl,
          variant: "home-cta-link--violet",
          external: true
        },
        // Muat Turun Etika Mesyuarat Agung
        {
          key: "etika-mesyuarat",
          title: "Etika Mesyuarat Agung",
          desc: "Muat Turun etika mesyuarat agung",
          icon: "fa-file-pdf-o",
          href: this.etikaUrl,
          variant: "home-cta-link--grey",
          external: true
        },
      ];

      if (
        Number(election.status) === 2 &&
        !this.hasVoted() &&
        this.canProceedToVote &&
        this.canVoteBySaham
      ) {
        links.push({
          key: "vote",
          title: "Undian",
          desc: "Undi calon pilihan anda",
          icon: "fa-check-square-o",
          route: { name: "Vote" },
          variant: "home-cta-link--rose",
          external: false
        });
      }

      if (Number(user.kehadiran) !== 0) {
        links.push({
          key: "zoom",
          title: "Pautan Mesyuarat",
          desc: "Sambung ke mesyuarat dalam talian",
          icon: "fa-video-camera",
          route: { name: "Zoom" },
          variant: "home-cta-link--cyan",
          external: false
        });
      }

      links.push({
        key: "penyata",
        title: "Penyata Ahli",
        desc: "Lihat dan kemaskini penyata ahli",
        icon: "fa-file-text-o",
        route: { name: "penyata", params: { no_anggota: noAnggota } },
        variant: "home-cta-link--amber",
        external: false
      });

      return links;
    },

    /**
     * Tunai: kehadiran Fizikal, dan sama ada sudah mengundi atau tidak layak mengundi
     * (saham < RM500) tetapi kehadiran/tetapan mesyuarat sudah memenuhi syarat — masih boleh tuntut elaun.
     */
    canGenerateClaimCode() {
      if (Number(this.data?.user?.kehadiran) !== 1) return false;
      if (this.hasVoted()) return true;
      return this.canProceedToVote && !this.canVoteBySaham;
    },

    kehadiranLabel() {
      const k = Number(this.data?.user?.kehadiran);
      if (k === 1) return "Kehadiran Fizikal";
      if (k === 2) return "Kehadiran Maya";
      return "Belum daftar kehadiran";
    },

    showRegisterCta() {
      // Only show the registration CTA when user hasn't registered attendance yet.
      return Number(this.data?.user?.kehadiran) === 0;
    },

    memberRows() {
      const u = this.data?.user || {};
      const fmt = (n) => {
        if (n === null || n === undefined || n === "") return "—";
        return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      };
      const dividendSub = (balance, dividend, percent) => {
        if (balance === null || balance === undefined || balance === "") return null;
        return "Dividen (" + percent + "%): RM " + fmt(dividend);
      };
      return [
        { icon: "fa-user", label: "Nama", value: u.name || "—" },
        { icon: "fa-credit-card", label: "No. Kad Pengenalan", value: u.no_kp || "—" },
        { icon: "fa-barcode", label: "No. Anggota", value: u.no_anggota || "—" },
        { icon: "fa-building", label: "Unit", value: u.unit || "—" },
        {
          key: "saham",
          icon: "fa-line-chart",
          label: "Saham",
          entries: [
            {
              period: "Sehingga Jun 2025",
              value: "RM " + fmt(u.saham),
              subvalue: dividendSub(u.saham, u.dividen_saham, 40)
            },
            {
              period: "Terkumpul Sehingga Mei 2026",
              value: "RM " + fmt(u.saham_terkini)
            }
          ]
        },
        {
          key: "yuran",
          icon: "fa-money",
          label: "Yuran",
          entries: [
            {
              period: "Sehingga Jun 2025",
              value: "RM " + fmt(u.yuran),
              subvalue: dividendSub(u.yuran, u.dividen_yuran, 8)
            },
            {
              period: "Terkumpul Sehingga Mei 2026",
              value: "RM " + fmt(u.yuran_terkini)
            }
          ]
        },
        {
          key: "pelaburan",
          icon: "fa-bank",
          label: "Pelaburan Simpanan Khas (Tabung 1) - (Sehingga Dis 2025)",
          value: "RM " + fmt(u.pelaburan),
          subvalue: dividendSub(u.pelaburan, u.dividen_pelaburan, 12)
        },
        {
          icon: "fa-bank",
          label: "Pelaburan Simpanan Khas (Tabung 2) - (Sehingga " + this.formatMalayMonthYear() + ")",
          value: "RM " + fmt(u.pelaburan_2),
        }
      ];
    }
  },

  mounted() {
    this.syncBarcodeFromUser();
    this.fetchPortalSettings();
  },

  watch: {
    "data.user.no_kp": function () {
      this.syncBarcodeFromUser();
    }
  },

  methods: {
    /**
     * Malay short month + year for "Sehingga …" labels (defaults to previous month).
     */
    formatMalayMonthYear(date) {
      const d = date ? new Date(date) : new Date();
      // End of previous calendar month
      d.setDate(0);
      const months = [
        "Jan", "Feb", "Mac", "Apr", "Mei", "Jun",
        "Jul", "Ogo", "Sep", "Okt", "Nov", "Dis"
      ];
      return months[d.getMonth()] + " " + d.getFullYear();
    },

    async fetchPortalSettings() {
      try {
        this.util.setAuthorization();
        const res = await axios.get(config.API + "portal-settings");
        if (res && res.data && res.data.status === "success") {
          this.portalSettings = res.data.data || null;
        }
      } catch (e) {
        // Non-critical — fall back to defaults.
      }
    },

    syncBarcodeFromUser() {
      if (this.data?.user?.no_kp) {
        this.noKp = this.data.user.no_kp;
        this.$nextTick(() => this.generateBarcode());
      }
    },

    generateBarcode() {
      if (!this.noKp) return;

      JsBarcode("#barcode", this.noKp, {
        format: "CODE128",
        width: 1.3,
        height: 30,
        displayValue: false
      });
    },

    hasVoted() {
      return Array.isArray(this.data.result) && this.data.result.length > 0;
    },

    async generateClaimCode() {
      if (this.claimLoading) return;
      this.claimError = "";
      this.claimLoading = true;
      try {
        this.util.setAuthorization();
        const response = await axios.post(config.API + "allowance/code", { method: "cash" });
        if (response && response.data && response.data.status === "success") {
          this.claimCode = response.data.code || "";
          this.claimExpiresAt = response.data.expires_at || "";
          this.util.notify(response.data.message || "Kod dijana.", "success");
        } else {
          this.claimError = (response && response.data && response.data.message) ? response.data.message : "Gagal menjana kod.";
          this.util.notify(this.claimError, "error");
        }
      } catch (error) {
        this.claimError =
          (error && error.response && error.response.data && error.response.data.message)
            ? error.response.data.message
            : (error && error.message ? error.message : "Gagal menjana kod.");
        if (error && error.response) this.util.showResult(error, "error");
        else this.util.notify(this.claimError, "error");
      } finally {
        this.claimLoading = false;
      }
    }
  }
};
</script>


<style>
.voter-home-page {
  margin-top: 16px;
  margin-bottom: 48px;
  padding-left: 0;
  padding-right: 0;
}

.home-hero-row {
  margin-left: 0;
  margin-right: 0;
}

.home-content-row {
  margin-left: 0;
  margin-right: 0;
}

.home-quick-links-row {
  margin-left: 0;
  margin-right: 0;
  margin-top: 18px;
}

.home-claim-row {
  margin-left: 0;
  margin-right: 0;
  margin-top: 18px;
}

.home-content-row .home-column--secondary .home-claim-row {
  margin-top: 0;
}

.home-column--primary {
  padding-top: 4px;
}

.home-column--secondary {
  padding-top: 4px;
}

@media (max-width: 767px) {
  .home-column--secondary {
    margin-top: 8px;
    padding-top: 0;
  }

  .home-content-row .home-column--secondary .home-claim-row {
    margin-top: 18px;
  }
}

@media (min-width: 992px) {
  .home-column--primary {
    padding-right: 20px;
  }

  .home-column--secondary {
    padding-left: 20px;
  }
}

/* —— Hero —— */
.home-hero-wrap {
  margin-bottom: 0;
}

.home-hero-section {
  padding: 16px 18px 20px;
}

.home-hero-section .hero-banner {
  margin-bottom: 16px;
  border-radius: 18px;
}

.home-hero-section .hero-banner-caption {
  box-shadow: 0 8px 28px rgba(35, 64, 97, 0.08);
}

.hero-banner {
  position: relative;
  margin-bottom: 20px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(11, 39, 79, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  background: linear-gradient(145deg, #e8f0ff 0%, #f4f8fd 50%, #eef5ff 100%);
}

.home-hero-banner-shine {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top,
      rgba(13, 110, 253, 0.07) 0%,
      transparent 100%);
}

.hero-banner-image {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.hero-banner-caption {
  margin-top: 0;
  margin-bottom: 6px;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(13, 110, 253, 0.12);
  box-shadow:
    0 16px 40px rgba(35, 64, 97, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.hero-banner-title {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero-banner-subtitle {
  max-width: 720px;
  margin: 0 0 16px;
  color: #475569;
  font-size: 1.45rem;
  line-height: 1.65;
}

.home-hero-strong {
  color: #1d4ed8;
  font-weight: 700;
}

.home-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.home-hero-actions {
  margin: 14px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}

.home-hero-register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.35rem;
  box-shadow: 0 10px 24px rgba(13, 110, 253, 0.35);
}

.home-hero-register-hint {
  color: #64748b;
  font-size: 1.2rem;
  line-height: 1.35;
}

.home-member-cta {
  margin: 0 0 14px;
}

.home-member-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.35rem;
  box-shadow: 0 10px 24px rgba(13, 110, 253, 0.35);
}

.home-member-cta-hint {
  margin-top: 8px;
  color: #64748b;
  font-size: 1.2rem;
  line-height: 1.35;
}

.home-member-cta-hint--warning {
  margin-top: 0;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #92400e;
}

.home-member-cta-hint--warning .fa {
  flex-shrink: 0;
  margin-top: 2px;
}

.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.home-badge .fa {
  opacity: 0.9;
}

.home-badge--location {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}

.home-badge--ok {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
}

.home-badge--pending {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.4);
}

/* —— Section containers (hero, quick links, panels) —— */
.home-section-container {
  background: #fff;
  border: 1px solid #e5ebf3;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(35, 64, 97, 0.08);
  padding: 20px 22px 24px;
  margin-bottom: 28px;
}

.home-content-row .home-section-container {
  margin-bottom: 0;
}

.home-column--secondary .home-section-container:not(:last-child) {
  margin-bottom: 24px;
}

.home-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef2f7;
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.home-section-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d6efd, #3b82f6);
  color: #fff;
  font-size: 1.65rem;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.28);
  flex-shrink: 0;
}

.home-section-heading-icon--teal {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  box-shadow: 0 8px 20px rgba(20, 184, 166, 0.35);
}

.home-member-card--in-section {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  box-shadow: none;
  border-radius: 14px;
}

.home-section-container--kad .home-kad-wrap {
  padding-top: 4px;
}

.home-saham-block-row {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 8px;
}

.home-saham-block-alert {
  margin-bottom: 0;
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.3rem;
  line-height: 1.5;
}

.home-saham-block-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  padding-top: 2px;
}

.home-quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 0;
}

.home-quick-link-wrap {
  min-width: 0;
  display: flex;
}

.home-quick-link-wrap .home-cta-link {
  flex: 1;
  width: 100%;
  min-height: 100%;
  margin-bottom: 0;
}

/* —— CTA tiles —— */
.home-cta-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-cta-link:hover {
  transform: translateY(-2px);
  color: #fff !important;
}

.home-cta-link--indigo {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 48%, #1d4ed8 100%);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.35);
}

.home-cta-link--indigo:hover {
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.45);
}

.home-cta-link--violet {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #6d28d9 100%);
  box-shadow: 0 14px 36px rgba(124, 58, 237, 0.35);
}

.home-cta-link--violet:hover {
  box-shadow: 0 18px 44px rgba(124, 58, 237, 0.48);
}

.home-cta-link--teal {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #0d9488 100%);
  box-shadow: 0 14px 36px rgba(20, 184, 166, 0.32);
}

.home-cta-link--teal:hover {
  box-shadow: 0 18px 44px rgba(20, 184, 166, 0.45);
}

.home-cta-link--rose {
  background: linear-gradient(135deg, #9f1239 0%, #e11d48 50%, #be123c 100%);
  box-shadow: 0 14px 36px rgba(225, 29, 72, 0.32);
}

.home-cta-link--rose:hover {
  box-shadow: 0 18px 44px rgba(225, 29, 72, 0.45);
}

.home-cta-link--cyan {
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 50%, #0891b2 100%);
  box-shadow: 0 14px 36px rgba(6, 182, 212, 0.3);
}

.home-cta-link--cyan:hover {
  box-shadow: 0 18px 44px rgba(6, 182, 212, 0.42);
}

.home-cta-link--amber {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #d97706 100%);
  box-shadow: 0 14px 36px rgba(245, 158, 11, 0.32);
}

.home-cta-link--amber:hover {
  box-shadow: 0 18px 44px rgba(245, 158, 11, 0.45);
}

.home-cta-link--grey {
  background: linear-gradient(135deg, #64748b 0%, #94a3b8 50%, #64748b 100%);
  box-shadow: 0 14px 36px rgba(100, 116, 139, 0.3);
}

.home-cta-link--grey:hover {
  box-shadow: 0 18px 44px rgba(100, 116, 139, 0.42);
}

.home-cta-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 2.2rem;
}

.home-cta-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-cta-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.home-cta-desc {
  font-size: 1.25rem;
  opacity: 0.92;
  line-height: 1.4;
}

.home-cta-chevron {
  flex-shrink: 0;
  font-size: 2.4rem;
  opacity: 0.85;
}

.member-info-card {
  margin-bottom: 0;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e5ebf3;
  box-shadow: 0 12px 32px rgba(35, 64, 97, 0.08);
  overflow: hidden;
}

.home-member-card {
  padding: 6px 0;
}

.member-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
  transition: background 0.15s ease;
}

.member-field:last-child {
  border-bottom: 0;
}

.member-field:hover {
  background: #f8fafc;
}

.member-field-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1.45rem;
}

.member-field-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
}

.member-field-label {
  flex: 0 0 38%;
  max-width: 200px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 4px;
  line-height: 1.35;
}

.member-field-value-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.member-field-entry {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.member-field-entry+.member-field-entry {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.member-field-value {
  width: 100%;
  text-align: right;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}

.member-field-subvalue {
  width: 100%;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2563eb;
  line-height: 1.35;
  word-break: break-word;
}

/* —— Claim —— */
.home-claim-card {
  padding: 20px 22px;
}

.home-claim-locked {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.home-claim-locked-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.home-claim-locked-text {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.55;
  color: #64748b;
}

.home-claim-hint {
  margin: 0 0 14px;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #475569;
}

.home-claim-alert {
  margin-bottom: 12px;
  border-radius: 12px;
  font-size: 1.25rem;
}

.home-claim-code-box {
  margin-bottom: 16px;
  padding: 18px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 2px dashed rgba(16, 185, 129, 0.45);
  text-align: center;
}

.home-claim-code {
  font-weight: 800;
  font-size: 2.8rem;
  letter-spacing: 0.22em;
  color: #047857;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  line-height: 1.2;
}

.home-claim-expiry {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #64748b;
}

.home-claim-btn {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 700;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.35);
}

.home-claim-btn .fa {
  margin-right: 4px;
}

/* —— Kad —— */
.home-kad-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60mm;
  opacity: 0.09;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.kad-keahlian {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1.3 / 1;
  max-height: 220px;
  overflow: hidden;
  padding: 20px;
  font-size: 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  background: #2d3748;
  position: relative;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  font-weight: bold;
  color: #f8fafc;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background-image: url("/images/kad_bg.png");
  background-size: cover;
  background-position: center;
}

.kad-keahlian:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-height: 600px) {
  .kad-keahlian {
    max-height: 200px;
    padding: 12px;
    font-size: 0.75rem;
  }
}

.kad-logo {
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: right;
}

.kad-logo-img {
  width: 124px;
  height: auto;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.member-card-vertical {
  position: absolute;
  top: 18px;
  left: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 2px;
  padding: 5px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.kad-keahlian::before {
  content: "";
  position: absolute;
  background-size: 100%;
  opacity: 0.06;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
}

.member-details {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 1.05rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 38px;
}

.kad-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  position: relative;
  z-index: 5;
}

.detail-item {
  position: relative;
  text-align: left;
}

.detail-item--barcode {
  margin-top: 4px;
}

#barcode {
  transform: scaleX(1.45);
  transform-origin: left;
  max-width: 100%;
}

.detail-label {
  text-align: left;
}

.detail-value {
  text-align: right;
}

.no-anggota {
  position: absolute;
  top: 5px;
  right: 8px;
  text-align: right;
  z-index: 10;
}

.contact-info {
  text-align: right;
  font-size: 9px;
  line-height: 1.2;
  color: rgb(12, 12, 12);
}

.contact-info i {
  margin-right: 3px;
  font-size: 8px;
  font-weight: normal;
}

@media (max-width: 991px) {
  .voter-home-page {
    margin-top: 16px;
  }

  .hero-banner-image {
    max-height: 300px;
  }

  .hero-banner-title {
    font-size: 2.35rem;
  }

  .member-field-label {
    flex: 0 0 42%;
    max-width: 220px;
  }
}

@media (max-width: 767px) {
  .hero-banner {
    border-radius: 18px;
  }

  .hero-banner-image {
    max-height: 240px;
  }

  .hero-banner-caption {
    padding: 18px;
    border-radius: 16px;
  }

  .hero-banner-title {
    font-size: 1.95rem;
  }

  .hero-banner-subtitle {
    font-size: 1.25rem;
  }

  .home-section-container {
    padding: 16px 14px 18px;
    border-radius: 16px;
  }

  .home-hero-section {
    padding: 12px 12px 16px;
  }

  .home-section-heading {
    font-size: 1.45rem;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .home-section-heading-icon {
    width: 40px;
    height: 40px;
    font-size: 1.45rem;
  }

  .home-cta-link {
    flex-wrap: wrap;
    padding: 16px;
  }

  .home-cta-title {
    font-size: 1.45rem;
  }

  .home-cta-desc {
    font-size: 1.15rem;
  }

  /* Butiran Keahlian: icon + stacked label/value — shorter rows, full width text */
  .home-member-card--in-section {
    border-radius: 12px;
  }

  .home-member-card--in-section .member-field {
    padding: 12px 12px;
    gap: 10px;
    align-items: flex-start;
  }

  .home-member-card--in-section .member-field-icon {
    width: 40px;
    height: 40px;
    margin-top: 0;
    font-size: 1.35rem;
    border-radius: 11px;
  }

  .home-member-card--in-section .member-field-body {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    justify-content: flex-start;
  }

  .home-member-card--in-section .member-field-label {
    flex: none;
    max-width: none;
    width: 100%;
    padding-top: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #475569;
    text-transform: uppercase;
    line-height: 1.25;
  }

  .home-member-card--in-section .member-field-value-wrap {
    flex: none;
    width: 100%;
    align-items: flex-start;
    gap: 3px;
  }

  .home-member-card--in-section .member-field-value {
    flex: none;
    width: 100%;
    text-align: left;
    font-size: 1.42rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .home-member-card--in-section .member-field-subvalue {
    width: 100%;
    text-align: left;
    font-size: 1.1rem;
  }

  .home-claim-code {
    font-size: 2.2rem;
    letter-spacing: 0.14em;
  }
}
</style>
