:root{--green:#176b48;--ink:#162631;--muted:#71808b;--border:#e1e7ed;--shadow:0 12px 30px rgba(17,35,46,.08);--male:#eaf4ff;--female:#fff1f5;--dead:#edf1f4;--gold:#d5ad40}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#fafcff,#eef4f8);color:var(--ink)}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#10291f;color:#fff;padding:20px 15px;overflow:auto}.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}.logo{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#2f9567,#70b58f);display:grid;place-items:center;font-weight:900}.brand strong{display:block}.brand small{display:block;color:#b9d2c6;margin-top:3px}.sidebar nav{display:flex;flex-direction:column;gap:6px}.sidebar nav a{padding:10px 11px;border-radius:10px;color:#d0e0d8}.sidebar nav a:hover{background:#1b4935;color:#fff}.side-note{margin-top:20px;padding:11px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#c8dbd1;font-size:11px;line-height:1.5}.logout-form button{margin-top:10px;width:100%;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;padding:9px;border-radius:9px}.main{min-width:0}.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;justify-content:space-between}.birthday-indicator{font-size:12px;background:#fff8df;border:1px solid #ead99b;border-radius:999px;padding:7px 10px;color:#7b6312}.content{padding:22px}.page-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}.page-head h1{margin:0;font-size:28px}.page-head p{margin:6px 0 0;color:var(--muted)}.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.stat{padding:16px}.stat span{font-size:12px;color:var(--muted)}.stat strong{display:block;font-size:28px;margin-top:7px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.section-card{padding:16px}.section-card h3{margin:0 0 12px}.top-gap{margin-top:14px}.list{display:flex;flex-direction:column;gap:8px}.list-item{display:flex;justify-content:space-between;gap:10px;padding:10px;border:1px solid #edf1f4;border-radius:10px}.list-item span{font-size:11px;color:var(--muted)}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:14px;padding:11px;margin-bottom:14px}.toolbar input,.toolbar select{padding:9px;border:1px solid #d6dfe7;border-radius:9px;background:#fff}.btn{padding:9px 11px;border:1px solid #d4dde5;border-radius:9px;background:#fff;cursor:pointer}.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.badge{display:inline-block;padding:4px 7px;border-radius:999px;background:#edf3f6;color:#50616d;font-size:10px;font-weight:800}.muted{color:var(--muted);font-size:12px}.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.news-card{overflow:hidden}.news-card img,.photo-placeholder{width:100%;height:180px;object-fit:cover}.photo-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#d8e8df,#cbdceb);font-size:42px}.news-body{padding:15px}.news-body h3{margin:8px 0}.news-body p{color:#61707b;font-size:13px;line-height:1.5}.news-body small{margin-left:7px;color:var(--muted)}.activity-grid,.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.activity-card,.member-card{padding:15px}.activity-card h3,.member-card h3{margin:8px 0}.pagination{display:flex;justify-content:center;gap:6px;margin-top:16px}.pagination a{padding:7px 9px;border:1px solid #d5dee6;border-radius:8px;background:#fff}.pagination a.active{background:var(--green);color:#fff}.tree-shell{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px}.tree-canvas{overflow:auto;min-height:900px;background:#fff;border:1px solid var(--border);border-radius:17px}.profile{padding:15px;height:max-content;position:sticky;top:82px}.profile h3{margin:0}.profile-grid{display:grid;grid-template-columns:95px 1fr;gap:8px;margin-top:12px;font-size:12px}.key{color:var(--muted)}#treeStage{position:relative;min-width:1600px;height:1250px}#treeSvg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}#treeSvg path{fill:none;stroke-linecap:round;stroke-linejoin:round}.gen-band{position:absolute;left:0;right:0;height:280px;background:linear-gradient(180deg,#fbfdff,#f7fafc);border-top:1px dashed #dfe7ed;z-index:0}.gen-band span{position:absolute;left:12px;top:10px;color:#7d8994;font-size:11px;font-weight:900}.person-card{position:absolute;z-index:4;width:185px;min-height:150px;border:1px solid #d2dbe3;border-radius:16px;padding:11px;background:#fff;box-shadow:var(--shadow);cursor:pointer}.person-card.male{background:linear-gradient(180deg,#fff,var(--male))}.person-card.female{background:linear-gradient(180deg,#fff,var(--female))}.person-card.dead{background:linear-gradient(180deg,#fcfcfc,var(--dead));filter:saturate(.65)}.person-card.direct{border:2px solid var(--gold)}.person-card img{display:block;width:62px;height:62px;margin:0 auto 7px;border-radius:13px}.person-card.dead img{filter:grayscale(1)}.person-name{text-align:center;font-weight:800;font-size:13px}.person-meta{text-align:center;color:var(--muted);font-size:10px;margin-top:4px}.union-card{position:absolute;z-index:5;width:220px;padding:10px;border:2px solid var(--uc,#2e8558);border-radius:14px;background:#fff;text-align:center}.union-card strong{font-size:11px}.union-card small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.union-card button{margin-top:6px;border:1px solid #d5dee6;border-radius:999px;background:#fff;font-size:9px;padding:4px 7px}.security-banner{padding:11px 13px;margin-bottom:12px;border:1px solid #bcd8c8;border-radius:12px;background:#edf7f1;color:#205d40;font-size:12px}.chat{max-width:940px;margin:auto}.messages{height:540px;overflow:auto;padding:15px;background:#f9fbfd}.msg{max-width:78%;padding:10px 11px;border-radius:13px;margin-bottom:9px;font-size:13px;line-height:1.5;white-space:pre-wrap}.msg.ai{background:#fff;border:1px solid #e0e7ed}.msg.user{margin-left:auto;background:var(--green);color:#fff}.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid #e4eaef}.chat-input input{flex:1;padding:10px;border:1px solid #d6dfe7;border-radius:9px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{padding:9px;border-bottom:1px solid #edf1f4;text-align:left}.table th{background:#fafcfd}.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#10291f,#eaf1ed)}.login-card{width:min(430px,92vw);padding:26px;background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.login-brand{width:50px;height:50px;border-radius:14px;background:#176b48;color:#fff;display:grid;place-items:center;font-weight:900}.login-card h1{margin:14px 0 5px}.login-card p{color:var(--muted)}.login-card input{width:100%;padding:10px;border:1px solid #d6dfe7;border-radius:9px}.full{width:100%}.error-box{margin-top:10px;padding:10px;border-radius:9px;background:#fae9eb;color:#8d4650;font-size:12px}

.admin-login-body{background:linear-gradient(135deg,#1c2430,#dfe7ee)}
.admin-login-card{border-top:5px solid #26384b}
.admin-brand{width:58px;background:#26384b}
.admin-primary{background:#26384b!important;border-color:#26384b!important;color:#fff!important}
.admin-security{background:#eef3f7;border-color:#c9d5df;color:#33495c}
.login-links{margin-top:14px;font-size:12px}.login-links a{color:#176b48;font-weight:700}
.top-actions{display:flex;align-items:center;gap:9px}.profile-link{padding:7px 10px;border-radius:999px;background:#edf4f0;color:#176b48;font-size:12px;font-weight:800}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.quick-card{padding:15px;display:flex;flex-direction:column;gap:6px}.quick-card b{font-size:14px}.quick-card span{font-size:11px;line-height:1.5;color:var(--muted)}.text-link{display:inline-block;margin-top:10px;color:#176b48;font-size:12px;font-weight:800}.stat small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.recap-row{display:flex;gap:8px;overflow:auto;margin-bottom:14px;padding-bottom:3px}.recap-chip{min-width:105px;padding:9px 10px;border:1px solid var(--border);border-radius:11px;background:#fff}.recap-chip b,.recap-chip span{display:block}.recap-chip b{font-size:11px}.recap-chip span{margin-top:3px;color:var(--muted);font-size:10px}.related-note{margin-top:9px;padding-top:8px;border-top:1px solid #edf1f4;color:#687781;font-size:10px}.activity-date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;margin-right:7px;border-radius:12px;background:#edf6f1;color:#176b48;vertical-align:middle}.activity-date b{font-size:19px}.activity-date span{font-size:9px}.member-avatar{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#edf4f8;font-size:20px}.member-deceased{filter:saturate(.65)}.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.security-card{padding:16px}.security-card h3{margin:0 0 8px}.security-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.profile-account{max-width:720px;padding:20px}.account-avatar{width:64px;height:64px;border-radius:18px;background:#176b48;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:900}.profile-account h2{margin:12px 0}.ai-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.ai-help{padding:15px;height:max-content}.ai-help h3{margin:0 0 10px}.ai-example{width:100%;padding:9px 10px;margin-bottom:7px;border:1px solid #dce4ea;border-radius:10px;background:#fff;text-align:left;cursor:pointer;font-size:11px}.ai-example:hover{background:#f4f8f6}.ai-note{margin-top:10px;padding:10px;border-radius:10px;background:#f7faf8;color:#607068;font-size:11px;line-height:1.55}.login-divider{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--muted);font-size:10px}.login-divider:before,.login-divider:after{content:"";height:1px;background:#e2e7eb;flex:1}.admin-outline{display:block;text-align:center;border-color:#34495d!important;color:#34495d!important}.login-foot{text-align:center;font-size:10px!important}.birthday-week .member-card{border-color:#ead99b;background:#fffdf5}
@media(max-width:1100px){.quick-grid{grid-template-columns:repeat(2,1fr)}.security-grid{grid-template-columns:repeat(2,1fr)}.ai-shell{grid-template-columns:1fr}}
@media(max-width:700px){.quick-grid,.security-grid{grid-template-columns:1fr}.profile-link{display:none}}

.stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.committee-hero{padding:18px;margin-bottom:14px}.committee-hero h2{margin:8px 0 5px}
.committee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.committee-card{padding:15px;display:flex;gap:12px;align-items:flex-start}
.committee-card h3{margin:7px 0 4px}.committee-division{margin:0 0 7px;font-weight:700;color:#4b6575}
.committee-avatar{width:62px;height:62px;flex:0 0 62px;border-radius:15px;overflow:hidden;background:#e8f2ec;display:grid;place-items:center;color:#176b48;font-weight:900;font-size:22px}
.committee-avatar img{width:100%;height:100%;object-fit:cover}
.committee-contact{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:#52626d}
.committee-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.committee-mini{padding:10px;border:1px solid #edf1f4;border-radius:11px;background:#fafcfd}
.committee-mini b,.committee-mini span,.committee-mini small{display:block}.committee-mini span{margin-top:3px}.committee-mini small{margin-top:3px;color:var(--muted)}
@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}.committee-grid,.committee-preview{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.stats,.committee-grid,.committee-preview{grid-template-columns:1fr}}
.tree-empty{position:absolute;left:50%;top:120px;transform:translateX(-50%);padding:16px 20px;border:1px dashed #cfdbe3;border-radius:14px;background:#f8fbfd;color:#667782;font-size:13px;z-index:5;min-width:340px;text-align:center}
.tree-summary,.tree-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.tree-summary span,.tree-legend span{padding:5px 8px;border-radius:999px;background:#f4f8fa;color:#51636e;font-size:10px}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.male-dot{background:#8bb7e7}.female-dot{background:#efacc0}.legend-line{display:inline-block;width:24px;border-top:3px solid #2e8558;margin-right:5px;vertical-align:middle}.adopted-line{border-top-style:dashed}.legend-box{display:inline-block;width:18px;height:10px;border:2px solid #d5ad40;margin-right:5px;vertical-align:middle}.direct-ribbon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 7px;border-radius:999px;background:#dfba55;color:#4b3a08;font-size:8px;font-weight:900;white-space:nowrap}.person-chips{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:7px}.tree-chip{padding:3px 5px;border-radius:999px;background:#edf2f5;color:#586974;font-size:8px;font-weight:800}.dead-chip{background:#e2e6e9;color:#56616a}#treeStage{transform-origin:top left;transition:transform .12s ease}
.ai-data-card{margin-bottom:12px}.ai-data-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ai-data-item{padding:9px;border:1px solid #e2e8ed;border-radius:10px;background:#fbfcfd;font-size:10px}.ai-data-item b,.ai-data-item small{display:block}.ai-data-item small{margin-top:3px;color:#71808b}.ai-data-grid.excluded .ai-data-item{background:#fff7f7;border-color:#eed8dc}@media(max-width:800px){.ai-data-grid{grid-template-columns:1fr}}

/* v8 user menu */
.user-menu-title{margin:4px 7px 8px;color:#9fc1b0;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.user-nav{display:block!important}
.user-menu-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.user-menu-list li{margin:0;padding:0}
.user-menu-list li.user-menu-account{margin-top:7px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12)}
.user-menu-list a{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:10px 11px;border-radius:10px;color:#d0e0d8;line-height:1.25}
.user-menu-list a:hover{background:#1b4935;color:#fff}
.user-menu-list a span{width:22px;flex:0 0 22px;text-align:center}
.user-menu-list a b{font-size:12px;font-weight:700}
@media(max-width:1000px){
  .sidebar{position:relative;height:auto;overflow:visible}
  .sidebar .user-nav{display:block!important;overflow:visible!important}
  .user-menu-list{grid-template-columns:1fr!important}
  .side-note,.logout-form{display:block!important}
}

/* v9 portal collapsible list */
.portal-menu-details{display:block}
.portal-menu-details summary{
  display:none;
  list-style:none;
  cursor:pointer;
  min-height:46px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:#183d2d;
  color:#fff;
  align-items:center;
  gap:8px
}
.portal-menu-details summary::-webkit-details-marker{display:none}
@media(max-width:1000px){
  .portal-menu-details summary{display:flex}
  .portal-menu-details:not([open]) .user-menu-title,
  .portal-menu-details:not([open]) .user-nav{display:none!important}
}
.page-hero {
    min-height: 220px;
    margin-bottom: 18px;
    padding: 28px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    color: #fff;
    box-shadow: var(--shadow);
}

.page-hero h1 {
    margin: 0;
    font-size: 30px;
}

.page-hero p {
    margin: 7px 0 0;
    opacity: .92;
}

/* =========================================================
   PAGE APPEARANCE - CONTROLLED FROM ADMIN
   ========================================================= */

.page-theme {
    --page-accent: var(--gold);
}


/* Accent color dari Page Appearance */
.page-theme .text-link {
    color: var(--page-accent);
}

.page-theme .quick-card {
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.page-theme .quick-card:hover {
    border-color: var(--page-accent);
    transform: translateY(-2px);
}

.page-theme .section-card h3 {
    border-left: 4px solid var(--page-accent);
    padding-left: 10px;
}


/* Tombol tertentu mengikuti accent halaman */
.page-theme .btn.page-accent {
    background: var(--page-accent);
    border-color: var(--page-accent);
    color: #fff;
}


/* =========================================================
   DASHBOARD LAYOUT PRESET
   ========================================================= */

/* Default */
.dashboard-layout.layout-default .quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* Grid */
.dashboard-layout.layout-grid .quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-layout.layout-grid .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Cards */
.dashboard-layout.layout-cards .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-layout.layout-cards .quick-card {
    min-height: 120px;
}


/* List */
.dashboard-layout.layout-list .quick-grid {
    grid-template-columns: 1fr;
}

.dashboard-layout.layout-list .quick-card {
    min-height: auto;
}

.dashboard-layout.layout-list .two-col {
    grid-template-columns: 1fr;
}


/* Calendar
   Untuk Dashboard sementara diperlakukan seperti grid.
   Calendar sesungguhnya nanti digunakan terutama di
   Rencana Kegiatan.
*/
.dashboard-layout.layout-calendar .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.page-theme .page-hero {
    position: relative;
    overflow: hidden;
}

.page-theme .page-hero > div {
    position: relative;
    z-index: 2;
}

.page-theme .page-hero h1 {
    color: #fff;
}

.page-theme .page-hero p {
    color: rgba(255, 255, 255, .92);
}


/* =========================================================
   RESPONSIVE PAGE APPEARANCE
   ========================================================= */

@media (max-width: 1100px) {

    .dashboard-layout.layout-default .quick-grid,
    .dashboard-layout.layout-grid .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-layout.layout-cards .quick-grid,
    .dashboard-layout.layout-calendar .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {

    .dashboard-layout.layout-default .quick-grid,
    .dashboard-layout.layout-grid .quick-grid,
    .dashboard-layout.layout-cards .quick-grid,
    .dashboard-layout.layout-list .quick-grid,
    .dashboard-layout.layout-calendar .quick-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-layout .two-col {
        grid-template-columns: 1fr;
    }

    .page-hero {
        min-height: 180px;
        padding: 20px;
    }

    .page-hero h1 {
        font-size: 24px;
    }
}

/* =========================================================
   SIDEBAR USER ACCOUNT & LOGOUT
   ========================================================= */

.sidebar-account {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px 12px;
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 800;
}

.sidebar-user-info strong {
    display: block;
    color: #fff;
    font-size: 12px;
}

.sidebar-user-info small {
    display: block;
    margin-top: 2px;
    color: #9fc1b0;
    font-size: 10px;
}

.logout-form {
    display: block;
    margin: 0;
}

.logout-form .logout-button {
    width: 100%;
    margin: 0;
    padding: 10px 11px;

    display: flex;
    align-items: center;
    gap: 9px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;

    background: transparent;
    color: #d0e0d8;

    cursor: pointer;
    text-align: left;
}

.logout-form .logout-button:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}

.logout-form .logout-button span {
    width: 22px;
    text-align: center;
}

.logout-form .logout-button b {
    font-size: 12px;
}

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-info strong,
.sidebar-user-info small {
    display: block;
}

/* =========================================================
   KABAR KELUARGA - PAGE APPEARANCE
   ========================================================= */

.news-layout .news-card {
    border-top: 3px solid var(--page-accent);
}

.news-layout.layout-default .news-grid,
.news-layout.layout-grid .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-layout.layout-cards .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-layout.layout-list .news-grid {
    grid-template-columns: 1fr;
}

.news-layout.layout-list .news-card {
    display: grid;
    grid-template-columns: 260px 1fr;
}

.news-layout.layout-list .news-card img,
.news-layout.layout-list .photo-placeholder {
    height: 100%;
    min-height: 190px;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
}

.page-theme .pagination a.active {
    background: var(--page-accent);
    border-color: var(--page-accent);
    color: #fff;
}

.page-theme .toolbar .btn.primary {
    background: var(--page-accent);
    border-color: var(--page-accent);
}

@media (max-width: 1100px) {

    .news-layout.layout-cards .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .news-layout .news-grid,
    .news-layout.layout-default .news-grid,
    .news-layout.layout-grid .news-grid,
    .news-layout.layout-cards .news-grid,
    .news-layout.layout-list .news-grid {
        grid-template-columns: 1fr;
    }

    .news-layout.layout-list .news-card {
        display: block;
    }

    .news-layout.layout-list .news-card img,
    .news-layout.layout-list .photo-placeholder {
        height: 180px;
        min-height: 180px;
    }

}

/* =========================================================
   RENCANA KEGIATAN - PAGE APPEARANCE
   ========================================================= */

.activity-layout .activity-card {
    border-top: 3px solid var(--page-accent);
    overflow: hidden;
}

.activity-layout.layout-default .activity-grid,
.activity-layout.layout-grid .activity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.activity-layout.layout-cards .activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.activity-layout.layout-list .activity-grid {
    grid-template-columns: 1fr;
}

.activity-layout.layout-list .activity-card {
    display: grid;
    grid-template-columns: 280px 1fr;
}

.activity-photo {
    width: 100%;
    height: 190px;
    overflow: hidden;
}

.activity-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-card-body {
    padding: 15px;
}

.activity-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.activity-card h3 {
    margin: 12px 0 8px;
}

.activity-layout.layout-list .activity-photo {
    height: 100%;
    min-height: 220px;
}

.activity-layout.layout-calendar .activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.activity-layout.layout-calendar .activity-date {
    width: 70px;
    height: 70px;
    background: var(--page-accent);
    color: #fff;
}

.activity-layout.layout-calendar .activity-date b {
    font-size: 24px;
}

@media (max-width: 1100px) {

    .activity-layout.layout-grid .activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .activity-layout .activity-grid,
    .activity-layout.layout-default .activity-grid,
    .activity-layout.layout-grid .activity-grid,
    .activity-layout.layout-cards .activity-grid,
    .activity-layout.layout-list .activity-grid,
    .activity-layout.layout-calendar .activity-grid {
        grid-template-columns: 1fr;
    }

    .activity-layout.layout-list .activity-card {
        display: block;
    }

    .activity-layout.layout-list .activity-photo {
        height: 190px;
        min-height: 190px;
    }

}

/* =========================================================
   ANGGOTA KELUARGA - PAGE APPEARANCE
   ========================================================= */

.member-layout .member-card {
    border-top: 3px solid var(--page-accent);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.member-layout.layout-default .member-grid,
.member-layout.layout-grid .member-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-layout.layout-cards .member-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-layout.layout-list .member-grid {
    grid-template-columns: 1fr;
}

.member-layout.layout-list .member-card {
    min-height: 110px;
}

.member-layout .member-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;

    border-radius: 16px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background: #edf4f8;

    font-size: 30px;
}

.member-layout .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    min-width: 0;
    flex: 1;
}

.member-code {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.member-info h3 {
    margin: 5px 0 8px;
}

.member-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.member-occupation {
    margin: 9px 0 4px;
    font-size: 12px;
}

.direct-badge {
    background: var(--page-accent);
    color: #fff;
}

.deceased-badge {
    background: #e4e9ed;
    color: #59666e;
}

.member-deceased {
    opacity: .78;
}

.member-deceased .member-avatar img {
    filter: grayscale(1);
}

@media (max-width: 1200px) {

    .member-layout.layout-cards .member-grid,
    .member-layout.layout-grid .member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .member-layout .member-grid,
    .member-layout.layout-default .member-grid,
    .member-layout.layout-grid .member-grid,
    .member-layout.layout-cards .member-grid,
    .member-layout.layout-list .member-grid {
        grid-template-columns: 1fr;
    }

    .member-layout .member-card {
        gap: 11px;
    }

    .member-layout .member-avatar {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

}

/* =========================================================
   PENGURUS KELUARGA - PAGE APPEARANCE
   ========================================================= */

.committee-period {
    margin-bottom: 15px;
    padding: 17px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-left: 4px solid var(--page-accent);
}

.committee-period h2 {
    margin: 8px 0 0;
}

.committee-active {
    padding: 6px 10px;

    border-radius: 999px;

    background: var(--page-accent);
    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


.committee-layout .committee-card {
    border-top: 3px solid var(--page-accent);
}

.committee-layout.layout-default .committee-grid,
.committee-layout.layout-grid .committee-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.committee-layout.layout-cards .committee-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.committee-layout.layout-list .committee-grid {
    grid-template-columns: 1fr;
}

.committee-layout.layout-list .committee-card {
    min-height: 110px;
}


.committee-avatar {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;

    border-radius: 16px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background: #e8f2ec;
    color: var(--green);

    font-size: 22px;
    font-weight: 900;
}

.committee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.committee-info {
    min-width: 0;
    flex: 1;
}

.committee-position {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 999px;

    background: var(--page-accent);
    color: #fff;

    font-size: 9px;
    font-weight: 800;
}

.committee-info h3 {
    margin: 7px 0 5px;
}

.committee-division {
    margin: 0 0 7px;

    color: #4b6575;

    font-size: 11px;
    font-weight: 700;
}


@media (max-width: 1200px) {

    .committee-layout.layout-grid .committee-grid,
    .committee-layout.layout-cards .committee-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .committee-layout .committee-grid,
    .committee-layout.layout-default .committee-grid,
    .committee-layout.layout-grid .committee-grid,
    .committee-layout.layout-cards .committee-grid,
    .committee-layout.layout-list .committee-grid {
        grid-template-columns: 1fr;
    }

    .committee-period {
        align-items: flex-start;
        gap: 12px;
    }

}

/* =========================================================
   ULANG TAHUN - PAGE APPEARANCE
   ========================================================= */

.birthday-summary {
    padding: 16px;
    margin-bottom: 18px;

    border-left: 4px solid var(--page-accent);
}

.birthday-summary > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.birthday-summary-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: var(--page-accent);

    font-size: 23px;
}

.birthday-summary strong,
.birthday-summary small {
    display: block;
}

.birthday-summary small {
    margin-top: 4px;
    color: var(--muted);
}


.birthday-week-section,
.birthday-list-section {
    margin-top: 20px;
}

.birthday-week-section h2,
.birthday-list-section h2 {
    margin: 0 0 12px;
}


.birthday-week-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.birthday-week-card {
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-top: 3px solid var(--page-accent);
}

.birthday-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #fff8df;

    font-size: 25px;
}

.birthday-week-card h3 {
    margin: 0 0 5px;
}


.birthday-grid {
    display: grid;
    gap: 12px;
}


/* GRID */

.birthday-layout.layout-default .birthday-grid,
.birthday-layout.layout-grid .birthday-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* CARDS */

.birthday-layout.layout-cards .birthday-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* LIST */

.birthday-layout.layout-list .birthday-grid {
    grid-template-columns: 1fr;
}


.birthday-card {
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-top: 3px solid var(--page-accent);
}


.birthday-card-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #fff8df;

    font-size: 23px;
}


.birthday-card-info {
    min-width: 0;
}

.birthday-card-info h3 {
    margin: 0 0 5px;
}


.birthday-countdown {
    display: inline-block;

    padding: 4px 8px;

    border-radius: 999px;

    background: var(--page-accent);
    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


@media (max-width: 1100px) {

    .birthday-week-grid,
    .birthday-layout.layout-grid .birthday-grid,
    .birthday-layout.layout-cards .birthday-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .birthday-week-grid,
    .birthday-layout .birthday-grid,
    .birthday-layout.layout-default .birthday-grid,
    .birthday-layout.layout-grid .birthday-grid,
    .birthday-layout.layout-cards .birthday-grid,
    .birthday-layout.layout-list .birthday-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   FAMILY TREE - PAGE APPEARANCE
   ========================================================= */

.tree-page-layout .tree-canvas {
    border-top: 3px solid var(--page-accent);
}

.tree-page-layout .profile {
    border-top: 3px solid var(--page-accent);
}

.tree-page-layout .tree-toolbar .btn:hover {
    border-color: var(--page-accent);
}

.tree-page-layout .tree-summary span {
    border: 1px solid rgba(0,0,0,.06);
}

.tree-page-layout .tree-summary span:first-child {
    background: var(--page-accent);
    color: #fff;
}

.tree-page-layout .direct-box {
    border-color: var(--page-accent);
}

.tree-page-layout .person-card.direct {
    border-color: var(--page-accent);
}


/* layout default / grid */

.tree-page-layout.layout-default .tree-shell,
.tree-page-layout.layout-grid .tree-shell,
.tree-page-layout.layout-cards .tree-shell,
.tree-page-layout.layout-calendar .tree-shell {
    grid-template-columns: minmax(0, 1fr) 310px;
}


/* layout list */

.tree-page-layout.layout-list .tree-shell {
    grid-template-columns: 1fr;
}

.tree-page-layout.layout-list .profile {
    position: static;
}


/* tombol cetak jika memakai hero */

.tree-hero-actions,
.tree-print-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: -6px 0 14px;
}


/* responsive */

@media (max-width: 1000px) {

    .tree-page-layout .tree-shell,
    .tree-page-layout.layout-default .tree-shell,
    .tree-page-layout.layout-grid .tree-shell,
    .tree-page-layout.layout-cards .tree-shell,
    .tree-page-layout.layout-list .tree-shell,
    .tree-page-layout.layout-calendar .tree-shell {
        grid-template-columns: 1fr;
    }

    .tree-page-layout .profile {
        position: static;
    }
}


/* =========================================================
   FAMILY TREE - FINAL PRINT SYSTEM
   ========================================================= */

@media print {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        background: #fff !important;
    }


    /* Hilangkan seluruh interface portal */

    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }


    /* Hilangkan struktur layout layar */

    .app {
        display: block !important;
        min-height: 0 !important;
    }


    .main,
    .content,
    .page-theme,
    .tree-page-layout,
    .tree-shell,
    .tree-canvas {

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;

        background: #fff !important;

        overflow: visible !important;
    }


    .tree-shell {
        display: block !important;
    }


    /*
       Canvas menjadi tempat untuk
       memusatkan Family Tree.
    */

    .tree-canvas {

        display: flex !important;

        justify-content: center !important;
        align-items: flex-start !important;

        overflow: visible !important;
    }


    /*
       Ukuran width / height berasal dari
       preparePrintStage() di tree.js.

       Jangan pakai width:max-content !important
       karena akan mengalahkan JavaScript.
    */

    #treeStage {

        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform:
            scale(
                var(--print-scale, 1)
            ) !important;

        transform-origin:
            top center !important;

        transition: none !important;
    }


    #treeSvg {
        overflow: visible !important;
    }


    /*
       Jangan memotong kartu orang /
       Family Union.
    */

    .person-card,
    .union-card {

        box-shadow: none !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

}

/* =========================================================
   LANDSCAPE
   ========================================================= */

@media print {

    body.print-landscape #treeStage {
        margin-top: 8mm !important;
    }

}


/* =========================================================
   NEWS DETAIL
   ========================================================= */

.news-detail-wrap{
    max-width:1100px;
    margin:0 auto;
}

.news-detail-back{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:18px;

    color:#344054;
    text-decoration:none;

    font-family:"Inter", Arial, sans-serif;
    font-size:14px;
    font-weight:500;
}

.news-detail-back:hover{
    color:#176B48;
}

.news-detail-card{
    background:#ffffff;
    border:1px solid #e4e7ec;
    border-radius:18px;
    padding:28px;

    box-shadow:
        0 4px 18px rgba(16,24,40,.05);
}


/* HEADER */

.news-detail-header{
    display:grid;
    grid-template-columns:
        180px minmax(0,1fr);

    gap:30px;
    align-items:start;
}


/* FOTO */

.news-detail-photo-wrap{
    width:180px;
}

.news-detail-photo{
    display:block;

    width:180px !important;
    height:120px !important;

    object-fit:cover;

    border-radius:12px;
    border:1px solid #eaecf0;
}


/* META */

.news-detail-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;
    margin-bottom:12px;

    font-family:"Inter", Arial, sans-serif;
    font-size:13px;
    font-weight:400;

    color:#667085;
}

.news-detail-category{
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    border-radius:999px;

    background:#fff7e0;
    color:#8a6400;

    font-weight:600;
}


/* TITLE */

.news-detail-title{
    margin:0 0 16px;

    font-family:"Montserrat", Arial, sans-serif;
    font-size:36px;
    font-weight:700;

    line-height:1.18;
    letter-spacing:-.5px;

    color:#101828;
}


/* SUMMARY */

.news-detail-summary{
    margin-top:18px;
    margin-bottom:8px;

    padding:16px 18px;

    border-left:4px solid #D5AD40;

    border-radius:
        0 10px 10px 0;

    background:#f8fafc;

    font-family:"Poppins", Arial, sans-serif;
    font-size:18px;
    font-weight:400;

    line-height:1.65;

    color:#475467;
}


/* ISI BERITA */

.news-content-section{
    margin-top:52px;
    padding-top:32px;

    border-top:1px solid #eaecf0;
}

.news-content-label{
    margin-bottom:16px;

    font-family:"Montserrat", Arial, sans-serif;

    font-size:12px;
    font-weight:700;

    letter-spacing:.10em;
    text-transform:uppercase;

    color:#176B48;
}

.news-detail-content{
    max-width:850px;

    font-family:"Inter", Arial, sans-serif;

    font-size:18px;
    font-weight:300;

    line-height:1.8;

    white-space:pre-line;

    color:#1d2939;
}


/* RELATED PEOPLE */

.news-related{
    margin-top:56px;
    padding-top:30px;

    border-top:1px solid #eadfbf;
}

.news-related-title{
    margin-bottom:22px;

    font-family:"Montserrat", Arial, sans-serif;

    font-size:11px;
    font-weight:700;

    letter-spacing:.10em;
    text-transform:uppercase;

    color:#9a720d;
}

.news-related-list{
    display:flex;
    flex-wrap:wrap;

    gap:16px 20px;
}

.news-related-person{
    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    border-radius:999px;

    background:#fff8e7;
    border:1px solid #e7cf8a;

    font-family:"Inter", Arial, sans-serif;

    font-size:11px;
    font-weight:500;

    color:#765600;
}


/* MOBILE */

@media(max-width:760px){

    .news-detail-card{
        padding:18px;
    }

    .news-detail-header{
        grid-template-columns:1fr;
        gap:20px;
    }

    .news-detail-photo-wrap{
        width:100%;
        max-width:100%;
    }

    .news-detail-photo{
        width:100% !important;
        height:220px !important;
    }

    .news-detail-title{
        font-size:28px;
    }

    .news-detail-summary{
        font-size:16px;
    }

    .news-detail-content{
        font-size:17px;
    }
}

/* =========================================================
   RENCANA KEGIATAN
   ========================================================= */

.activity-toolbar{
    margin-bottom:18px;
}

.activity-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(330px,430px));
    gap:24px;
    align-items:start;
}

.activity-card-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.activity-card-link:hover{
    color:inherit;
    text-decoration:none;
}

.activity-card{
    overflow:hidden;

    background:#fff;

    border:1px solid #e4e7ec;
    border-top:3px solid #d5ad40;

    border-radius:18px;

    box-shadow:
        0 6px 20px rgba(16,24,40,.06);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.activity-card-link:hover .activity-card{
    transform:translateY(-4px);

    box-shadow:
        0 15px 32px rgba(16,24,40,.12);
}


/* FOTO CARD */

.activity-card-photo{
    position:relative;

    width:100%;
    height:175px;

    overflow:hidden;

    background:#f5f7fa;
}

.activity-card-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.activity-photo-placeholder{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:44px;

    background:
        linear-gradient(
            135deg,
            #fff8e7,
            #f1f7f4
        );
}


/* BODY */

.activity-card-body{
    padding:20px;
}

.activity-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:12px;
}

.activity-category{
    display:inline-flex;

    padding:5px 10px;

    border-radius:999px;

    background:#fff7e0;

    color:#876400;

    font-family:"Inter",Arial,sans-serif;

    font-size:11px;
    font-weight:600;
}

.activity-date-small{
    font-family:"Inter",Arial,sans-serif;
    font-size:11px;

    color:#667085;
}

.activity-card-title{
    margin:
        0
        0
        11px;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:19px;
    font-weight:700;

    line-height:1.3;

    color:#101828;
}

.activity-card-description{
    margin:
        0
        0
        18px;

    font-family:"Poppins",Arial,sans-serif;

    font-size:13px;
    font-weight:400;

    line-height:1.65;

    color:#667085;
}


/* STATUS */

.activity-status{
    display:inline-flex;
    align-items:center;

    padding:6px 10px;

    border-radius:999px;

    font-family:"Inter",Arial,sans-serif;

    font-size:10px;
    font-weight:700;

    letter-spacing:.02em;
}

.activity-card-photo > .activity-status{
    position:absolute;

    top:12px;
    right:12px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.12);
}

.status-pending{
    background:#fff4ce;
    color:#855f00;
}

.status-planned{
    background:#eaf2ff;
    color:#245ea8;
}

.status-ongoing{
    background:#dcfce7;
    color:#167044;
}

.status-completed{
    background:#e9f5ef;
    color:#315f4a;
}

.status-cancelled{
    background:#feecec;
    color:#b42318;
}


/* INFO DI CARD */

.activity-info-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px 18px;

    padding-top:16px;

    border-top:1px solid #f0f1f3;
}

.activity-info{
    display:flex;

    align-items:flex-start;

    gap:9px;
}

.activity-info-icon{
    font-size:14px;
}

.activity-info div{
    min-width:0;
}

.activity-info small{
    display:block;

    margin-bottom:3px;

    font-family:"Inter",Arial,sans-serif;

    font-size:10px;

    color:#98a2b3;
}

.activity-info strong{
    display:block;

    font-family:"Inter",Arial,sans-serif;

    font-size:12px;
    font-weight:600;

    line-height:1.4;

    color:#344054;
}

.activity-info span{
    display:block;

    font-size:11px;

    color:#667085;
}


/* FOOTER CARD */

.activity-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-top:18px;
    padding-top:14px;

    border-top:1px solid #f0f1f3;

    font-family:"Inter",Arial,sans-serif;

    font-size:11px;

    color:#667085;
}

.activity-card-footer strong{
    color:#176b48;
}


/* =========================================================
   DETAIL KEGIATAN
   ========================================================= */

.activity-detail-wrap{
    max-width:1050px;
    margin:0 auto;
}

.activity-detail-back{
    display:inline-flex;

    margin-bottom:18px;

    color:#344054;

    text-decoration:none;

    font-family:"Inter",Arial,sans-serif;

    font-size:13px;
    font-weight:500;
}

.activity-detail-back:hover{
    color:#176b48;
}

.activity-detail-card{
    padding:28px;

    background:#fff;

    border:1px solid #e4e7ec;
    border-radius:20px;

    box-shadow:
        0 6px 22px rgba(16,24,40,.06);
}

.activity-detail-header{
    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr);

    gap:32px;

    align-items:start;
}

.activity-detail-photo-wrap{
    width:220px;
}

.activity-detail-photo{
    display:block;

    width:220px;
    height:150px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid #eaecf0;
}

.activity-detail-meta{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:14px;
}

.activity-detail-title{
    margin:
        0
        0
        18px;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:34px;
    font-weight:700;

    line-height:1.18;

    color:#101828;
}

.activity-detail-summary{
    padding:
        16px
        18px;

    background:#f8fafc;

    border-left:
        4px solid #d5ad40;

    border-radius:
        0
        10px
        10px
        0;

    font-family:"Poppins",Arial,sans-serif;

    font-size:16px;
    font-weight:400;

    line-height:1.7;

    color:#475467;
}


/* DETAIL SECTION */

.activity-detail-section{
    margin-top:48px;
    padding-top:28px;

    border-top:1px solid #eaecf0;
}

.activity-section-title{
    margin-bottom:20px;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:12px;
    font-weight:700;

    letter-spacing:.09em;

    text-transform:uppercase;

    color:#176b48;
}

.activity-detail-info-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;
}

.activity-detail-info{
    padding:15px;

    background:#f8fafc;

    border:1px solid #eaecf0;

    border-radius:12px;
}

.activity-detail-info small{
    display:block;

    margin-bottom:6px;

    font-family:"Inter",Arial,sans-serif;

    font-size:11px;

    color:#98a2b3;
}

.activity-detail-info strong{
    display:block;

    font-family:"Inter",Arial,sans-serif;

    font-size:14px;
    font-weight:600;

    color:#344054;
}

.activity-detail-info span{
    display:block;

    margin-top:3px;

    font-size:12px;

    color:#667085;
}


/* PIC */

.activity-main-pic{
    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 18px;

    background:#eef7f2;

    border:1px solid #d8ebdf;

    border-radius:14px;
}

.activity-pic-icon{
    width:40px;
    height:40px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#d9eee2;

    font-size:18px;
}

.activity-main-pic small,
.activity-sub-label{
    display:block;

    margin-bottom:4px;

    font-family:"Inter",Arial,sans-serif;

    font-size:10px;

    color:#667085;
}

.activity-main-pic strong{
    display:block;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:14px;

    color:#164c38;
}

.activity-main-pic span{
    display:block;

    margin-top:3px;

    font-family:"Inter",Arial,sans-serif;

    font-size:11px;

    color:#667085;
}

.activity-support-wrap{
    margin-top:22px;
}


/* PEOPLE */

.activity-person-list{
    display:flex;

    flex-wrap:wrap;

    gap:14px 18px;
}

.activity-person-chip{
    display:inline-flex;

    padding:7px 12px;

    background:#eef7f2;

    border:1px solid #cfe5d8;

    border-radius:999px;

    font-family:"Inter",Arial,sans-serif;

    font-size:11px;
    font-weight:500;

    color:#315f4a;
}

.activity-person-chip.family{
    background:#fff8e7;

    border-color:#ead28a;

    color:#765600;
}


/* STATUS NOTES */

.activity-status-note,
.activity-cancel-note{
    margin-top:32px;

    padding:18px;

    border-radius:12px;

    font-family:"Inter",Arial,sans-serif;
}

.activity-status-note{
    background:#f6f8fb;

    border-left:4px solid #667085;
}

.activity-cancel-note{
    background:#fff2f1;

    border-left:4px solid #d92d20;
}

.activity-status-note strong,
.activity-cancel-note strong{
    display:block;

    margin-bottom:7px;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:13px;
}

.activity-status-note p,
.activity-cancel-note p{
    margin:0;

    font-size:13px;

    line-height:1.7;
}


/* RELATED FAMILY */

.activity-related{
    margin-top:48px;

    padding-top:28px;

    border-top:1px solid #eadfbf;
}


/* MOBILE */

@media(max-width:760px){

    .activity-grid{
        grid-template-columns:1fr;
    }

    .activity-info-grid{
        grid-template-columns:1fr;
    }

    .activity-detail-card{
        padding:18px;
    }

    .activity-detail-header{
        grid-template-columns:1fr;
        gap:20px;
    }

    .activity-detail-photo-wrap{
        width:100%;
    }

    .activity-detail-photo{
        width:100%;
        height:210px;
    }

    .activity-detail-title{
        font-size:27px;
    }

    .activity-detail-info-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   SIDEBAR ACTIVE MENU
   ========================================================= */

.user-menu-list a{
    position:relative;

    transition:
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* Hover menu biasa */

.user-menu-list a:hover{
    background:rgba(255,255,255,.09);
    color:#ffffff;
    transform:translateX(2px);
}


/* Menu halaman yang sedang dibuka */

.user-menu-list a.active{
    background:var(--gold, #f2c94c) !important;

    color:#111827 !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.16);

    transform:translateX(2px);
}


/* Text active */

.user-menu-list a.active b{
    color:#111827 !important;
    font-weight:800;
}


/* Icon active */

.user-menu-list a.active span{
    color:#111827 !important;
}


/* Garis kecil sebagai penanda */

.user-menu-list a.active::before{
    content:"";

    position:absolute;

    left:0;
    top:8px;
    bottom:8px;

    width:4px;

    border-radius:
        0
        4px
        4px
        0;

    background:#725600;
}


/* Hover saat menu sudah active */

.user-menu-list a.active:hover{
    background:var(--gold, #f2c94c) !important;

    color:#111827 !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.20);
}

/* =========================================================
   FAMILY TREE - FRAME + TOP SCROLLBAR
   ========================================================= */

.tree-main-column{
    min-width:0;
}


/*
   Satu frame untuk scrollbar + Family Tree.
*/

.tree-page-layout .tree-frame{
    min-width:0;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);
    border-top:3px solid var(--page-accent);

    border-radius:17px;
}


/*
   Scrollbar berada DI DALAM box Family Tree.
*/

.tree-scroll-top{
    display:block;

    width:100%;
    height:19px;

    margin:0;

    overflow-x:scroll !important;
    overflow-y:hidden !important;

    background:#f4f7f9;

    border:0;
    border-bottom:1px solid #dfe6eb;

    border-radius:0;

    scrollbar-gutter:stable;
}


.tree-scroll-top-inner{
    display:block;

    height:1px;
    min-width:100%;
}


/*
   Canvas tidak perlu border sendiri lagi,
   karena border dipindahkan ke tree-frame.
*/

.tree-page-layout .tree-frame .tree-canvas{
    border:0 !important;
    border-radius:0 !important;

    margin:0 !important;
}


/* EDGE / CHROME */

.tree-scroll-top::-webkit-scrollbar{
    height:13px;
}

.tree-scroll-top::-webkit-scrollbar-track{
    background:#e8edf1;
}

.tree-scroll-top::-webkit-scrollbar-thumb{
    background:#87949d;

    border:3px solid #e8edf1;

    border-radius:999px;
}

.tree-scroll-top::-webkit-scrollbar-thumb:hover{
    background:#64737d;
}


/* =========================================================
   BIRTHDAY PAGE
   ========================================================= */

.birthday-page{
    padding-bottom:38px;
}

.birthday-page-head{
    align-items:flex-start;
}

.birthday-head-summary{
    display:flex;
    gap:10px;
}

.birthday-head-summary > div{
    min-width:100px;

    padding:10px 14px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:12px;

    text-align:center;
}

.birthday-head-summary strong{
    display:block;

    font-family:"Montserrat",Arial,sans-serif;
    font-size:19px;

    color:var(--page-accent);
}

.birthday-head-summary span{
    display:block;

    margin-top:2px;

    font-family:"Inter",Arial,sans-serif;
    font-size:9px;

    color:#667085;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.birthday-toolbar{
    margin-bottom:22px;
}


/* =========================================================
   SECTION
   ========================================================= */

.birthday-section,
.birthday-highlight-section{
    margin-top:30px;
}

.birthday-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:16px;

    margin-bottom:14px;
}

.birthday-section-heading h2{
    margin:3px 0 3px;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:19px;
    font-weight:700;

    color:#101828;
}

.birthday-section-heading p{
    margin:0;

    font-family:"Poppins",Arial,sans-serif;

    font-size:11px;

    color:#667085;
}

.birthday-eyebrow{
    display:block;

    font-family:"Inter",Arial,sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:.10em;
    text-transform:uppercase;

    color:var(--page-accent);
}

.birthday-counter{
    min-width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--page-accent);

    color:#fff;

    font-size:12px;
    font-weight:800;
}


/* =========================================================
   HARI INI
   ========================================================= */

.birthday-highlight-section{
    padding:20px;

    border:1px solid #ead69b;
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8df 100%
        );
}

.birthday-today-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:15px;
}

.birthday-today-card{
    display:flex;

    gap:17px;

    padding:17px;

    border:1px solid #eadcad;
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 5px 15px rgba(16,24,40,.05);
}

.birthday-today-photo{
    width:96px;
    height:96px;

    flex:0 0 96px;

    overflow:hidden;

    border-radius:17px;

    background:#fff8df;
}

.birthday-today-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.birthday-photo-placeholder{
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    background:#fff6d8;

    font-size:36px;
}

.birthday-photo-placeholder.small{
    font-size:24px;
}

.birthday-tag-row{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-bottom:7px;
}

.birthday-today-badge{
    padding:4px 8px;

    border-radius:999px;

    background:#176b48;
    color:#fff;

    font-family:"Inter",Arial,sans-serif;

    font-size:8px;
    font-weight:800;
}

.birthday-milestone-badge{
    padding:4px 8px;

    border-radius:999px;

    background:#fff1bc;
    color:#795900;

    font-family:"Inter",Arial,sans-serif;

    font-size:8px;
    font-weight:800;
}

.birthday-today-content h3{
    margin:0 0 3px;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:17px;
}

.birthday-today-content p{
    margin:0;

    font-family:"Inter",Arial,sans-serif;

    font-size:10px;

    color:#667085;
}

.birthday-age-big{
    display:flex;
    align-items:baseline;

    gap:5px;

    margin-top:7px;
}

.birthday-age-big strong{
    font-family:"Montserrat",Arial,sans-serif;

    font-size:24px;

    color:var(--page-accent);
}

.birthday-age-big span{
    font-size:10px;

    color:#667085;
}

.birthday-wish-note{
    margin-top:7px;

    font-size:10px;
    line-height:1.5;

    color:#667085;
}


/* =========================================================
   7 HARI
   ========================================================= */

.birthday-week-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;
}

.birthday-week-card{
    display:flex;

    gap:11px;

    padding:13px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;
}

.birthday-week-photo{
    width:58px;
    height:58px;

    flex:0 0 58px;

    overflow:hidden;

    border-radius:13px;

    background:#fff8df;
}

.birthday-week-photo img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.birthday-week-body{
    min-width:0;
}

.birthday-week-top{
    display:flex;
    flex-wrap:wrap;

    gap:5px;

    margin-bottom:5px;
}

.birthday-date-chip{
    padding:3px 6px;

    border-radius:999px;

    background:#fff5cf;

    color:#806000;

    font-size:8px;
    font-weight:700;
}

.birthday-countdown{
    padding:3px 6px;

    border-radius:999px;

    background:#eef7f2;

    color:#176b48;

    font-size:8px;
    font-weight:700;
}

.birthday-week-body h3{
    margin:0;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:12px;
}

.birthday-week-body p{
    margin:3px 0 6px;

    font-size:9px;

    color:#667085;
}

.birthday-next-age{
    font-size:9px;

    color:#475467;
}


/* =========================================================
   MILESTONE
   ========================================================= */

.milestone-section{
    padding:18px;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #f8fbf9,
            #fff9e8
        );
}

.birthday-milestone-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;
}

.birthday-milestone-card{
    display:flex;
    align-items:center;

    gap:13px;

    padding:14px;

    border:1px solid #e6d18a;
    border-radius:15px;

    background:#fff;
}

.birthday-milestone-age{
    width:60px;
    height:60px;

    flex:0 0 60px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--page-accent);

    color:#fff;
}

.birthday-milestone-age strong{
    font-family:"Montserrat",Arial,sans-serif;

    font-size:21px;
}

.birthday-milestone-age span{
    font-size:7px;
}

.birthday-milestone-label{
    font-size:7px;
    font-weight:800;

    letter-spacing:.08em;

    color:#987000;
}

.birthday-milestone-info h3{
    margin:3px 0;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:12px;
}

.birthday-milestone-info p{
    margin:0;

    font-size:9px;

    color:#667085;
}

.birthday-milestone-info > span:last-child{
    display:block;

    margin-top:4px;

    font-size:8px;

    color:#176b48;
}


/* =========================================================
   BULAN INI
   ========================================================= */

.birthday-month-list{
    overflow:hidden;

    border:1px solid var(--border);
    border-radius:15px;

    background:#fff;
}

.birthday-month-row{
    display:grid;

    grid-template-columns:
        58px
        42px
        minmax(0,1fr)
        55px
        auto;

    align-items:center;

    gap:11px;

    padding:10px 14px;

    border-bottom:
        1px solid #edf0f2;
}

.birthday-month-row:last-child{
    border-bottom:0;
}

.birthday-date-box{
    padding:6px;

    border-radius:10px;

    text-align:center;

    background:#fff6d7;
}

.birthday-date-box strong{
    display:block;

    font-size:17px;
}

.birthday-date-box span{
    display:block;

    font-size:8px;
}

.birthday-month-avatar{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border-radius:50%;

    background:#f4f7f9;
}

.birthday-month-avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.birthday-month-person strong{
    display:block;

    font-size:11px;
}

.birthday-month-person span{
    display:block;

    margin-top:2px;

    font-size:8px;

    color:#667085;
}

.birthday-month-age{
    text-align:center;
}

.birthday-month-age span{
    display:block;

    font-size:7px;

    color:#98a2b3;
}

.birthday-month-age strong{
    display:block;

    font-size:13px;
}

.birthday-month-countdown{
    padding:5px 8px;

    border-radius:999px;

    background:#eef7f2;

    color:#176b48;

    font-size:8px;
    font-weight:700;
}


/* =========================================================
   CALENDAR
   ========================================================= */

.birthday-calendar-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:11px;
}

.birthday-calendar-card{
    min-height:145px;

    overflow:hidden;

    border:1px solid var(--border);
    border-top:3px solid var(--page-accent);

    border-radius:13px;

    background:#fff;
}

.birthday-calendar-head{
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:10px 12px;

    border-bottom:1px solid #edf0f2;
}

.birthday-calendar-head h3{
    margin:0;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:11px;
}

.birthday-calendar-head span{
    min-width:22px;
    height:22px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff4c8;

    font-size:8px;
    font-weight:800;
}

.birthday-calendar-body{
    padding:7px 11px;
}

.birthday-calendar-person{
    display:grid;

    grid-template-columns:
        25px
        minmax(0,1fr);

    gap:7px;

    padding:6px 0;

    border-bottom:1px dashed #edf0f2;
}

.birthday-calendar-person:last-child{
    border-bottom:0;
}

.birthday-calendar-date{
    font-weight:800;

    color:var(--page-accent);
}

.birthday-calendar-person strong{
    display:block;

    overflow:hidden;

    font-size:9px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.birthday-calendar-person small{
    display:block;

    margin-top:1px;

    font-size:7px;

    color:#98a2b3;
}

.birthday-calendar-empty{
    padding:12px 0;

    text-align:center;

    font-size:8px;

    color:#98a2b3;
}


/* =========================================================
   ALL BIRTHDAYS
   ========================================================= */

.birthday-all-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;
}

.birthday-all-card{
    position:relative;

    display:flex;

    gap:10px;

    padding:12px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;
}

.birthday-all-photo{
    width:54px;
    height:54px;

    flex:0 0 54px;

    overflow:hidden;

    border-radius:13px;

    background:#fff8df;
}

.birthday-all-photo img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.birthday-all-body{
    min-width:0;
}

.birthday-all-body h3{
    margin:0;

    overflow:hidden;

    font-family:"Montserrat",Arial,sans-serif;

    font-size:11px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.birthday-all-body > span{
    display:block;

    margin:2px 0 5px;

    font-size:8px;

    color:#667085;
}

.birthday-all-body > strong{
    display:block;

    font-size:9px;
}

.birthday-all-body small{
    display:block;

    margin-top:3px;

    font-size:8px;

    color:#176b48;
}

.birthday-card-milestone{
    position:absolute;

    top:7px;
    right:7px;

    min-width:24px;
    height:24px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#e0b536;

    color:#111827;

    font-size:8px;
    font-weight:800;
}


/* =========================================================
   EMPTY
   ========================================================= */

.birthday-empty{
    display:flex;
    align-items:center;

    gap:12px;

    padding:15px;

    border:1px dashed #d5dde3;
    border-radius:12px;

    background:#fafcfd;

    color:#667085;
}

.birthday-empty > span{
    font-size:24px;
}

.birthday-empty strong{
    display:block;

    color:#344054;

    font-size:11px;
}

.birthday-empty p{
    margin:3px 0 0;

    font-size:9px;
}

.birthday-empty.compact{
    min-height:65px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.birthday-pagination{
    margin-top:18px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1200px){

    .birthday-week-grid,
    .birthday-all-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .birthday-calendar-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


@media(max-width:900px){

    .birthday-today-grid{
        grid-template-columns:1fr;
    }

    .birthday-week-grid,
    .birthday-all-grid,
    .birthday-milestone-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .birthday-calendar-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:650px){

    .birthday-head-summary{
        display:none;
    }

    .birthday-week-grid,
    .birthday-all-grid,
    .birthday-milestone-grid,
    .birthday-calendar-grid{
        grid-template-columns:1fr;
    }

    .birthday-month-row{
        grid-template-columns:
            52px
            38px
            minmax(0,1fr);
    }

    .birthday-month-age,
    .birthday-month-countdown{
        grid-column:3;
        justify-self:start;
    }

    .birthday-today-card{
        align-items:flex-start;
    }

}
/* v10: navigasi mudah diakses keyboard dan konsisten di mobile */
.portal-menu-details summary:focus-visible,
.user-menu-list a:focus-visible,
.logout-button:focus-visible,
.tree-toolbar button:focus-visible {outline:3px solid #e9bc66;outline-offset:3px}
.user-menu-list a.active {background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 3px 0 0 #d6aa56}
@media(max-width:1000px){
  .app{display:block;min-width:0}
  .sidebar{width:100%;height:auto;position:relative;top:auto;padding:14px 16px}
  .brand{margin-bottom:12px}
  .portal-menu-details summary{display:flex}
  .content{padding:16px}
  .topbar{padding:12px 16px;gap:12px}
  .tree-shell{grid-template-columns:minmax(0,1fr)}
  .profile{position:relative;top:auto}
  .tree-canvas{min-height:560px}
}
@media(max-width:650px){
  .topbar{flex-wrap:wrap}
  .birthday-indicator{max-width:100%}
  .tree-toolbar{align-items:stretch}
  .tree-toolbar input{flex:1 1 100%;min-width:0}
  .tree-toolbar select{flex:1 1 100%;min-width:0}
}

/* ==================================================
   F4.5 - Ukuran gambar Kabar Keluarga
   Berlaku hanya pada halaman daftar berita
   ================================================== */

.news-layout .news-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Tampilan daftar: gambar di sisi kiri */
.news-layout.layout-list .news-card img {
    width: 180px;
    height: 120px;
    object-fit: cover;
}

@media (max-width: 600px) {
    .news-layout.layout-list .news-card img {
        width: 100%;
        height: 150px;
    }
}