/*
Theme Name: Syubbanul Akhyar
Theme URI: https://example.com/
Author: Syubbanul Akhyar
Description: Tema WordPress untuk Majelis Ta'lim Syubbanul Akhyar. Isi (pengajar, jadwal, program, kegiatan, artikel, galeri, FAQ) dikelola lewat dashboard, dan data kontak/donasi lewat menu Pengaturan Majelis.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: syubbanul
*/

:root{
      --primary:#0f766e;
      --primary-2:#115e59;
      --accent:#d4a72c;
      --accent-soft:#fff8df;
      --bg:#f7faf9;
      --surface:#ffffff;
      --surface-2:#eef6f4;
      --text:#17322f;
      --muted:#64748b;
      --line:#dbe7e4;
      --shadow:0 14px 40px rgba(15,118,110,.10);
      --radius:18px;
      --container:1180px;
    }

    html[data-theme="dark"]{
      --bg:#081716;
      --surface:#102321;
      --surface-2:#14312e;
      --text:#e8f6f3;
      --muted:#a3b9b5;
      --line:#23413d;
      --shadow:0 14px 40px rgba(0,0,0,.24);
      --accent-soft:#2c2919;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.65;
    }
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}

    .container{width:min(var(--container),calc(100% - 32px));margin:auto}
    .section{padding:88px 0}
    .section-sm{padding:56px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--primary);
      background:var(--surface-2);
      border:1px solid var(--line);
      padding:8px 12px;
      border-radius:999px;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:34px;
    }
    .section-head h2{
      margin:10px 0 0;
      font-size:clamp(1.9rem,4vw,3rem);
      line-height:1.1;
      letter-spacing:-.03em;
    }
    .section-head p{max-width:620px;color:var(--muted);margin:0}
    .muted{color:var(--muted)}
    .center{text-align:center}

    /* Topbar + navbar */
    .topbar{
      background:var(--primary-2);
      color:#eafffc;
      font-size:.84rem;
    }
    .topbar .container{
      min-height:38px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
    }
    .top-links{display:flex;gap:18px;flex-wrap:wrap}
    .top-links a{opacity:.9}
    nav{
      position:sticky;
      top:0;
      z-index:50;
      background:color-mix(in srgb,var(--surface) 92%,transparent);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      flex-shrink:0;
    }
    .brand-mark{
      width:46px;height:46px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--primary),#14b8a6);
      color:white;
      box-shadow:0 10px 22px rgba(15,118,110,.22);
      font-size:1.35rem;
    }
    .brand strong{display:block;font-size:.98rem;line-height:1.1}
    .brand span{display:block;color:var(--muted);font-size:.73rem;margin-top:4px}
    .nav-menu{
      display:flex;align-items:center;gap:22px;
      font-size:.9rem;font-weight:700;
    }
    .nav-menu a{color:var(--muted);position:relative}
    .nav-menu a:hover,.nav-menu a.active{color:var(--primary)}
    .nav-menu a.active:after{
      content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:var(--primary);border-radius:2px
    }
    .nav-actions{display:flex;align-items:center;gap:8px}
    .icon-btn,.menu-btn{
      border:1px solid var(--line);background:var(--surface);color:var(--text);
      width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
    }
    .menu-btn{display:none}

    /* Buttons */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      border:0;border-radius:12px;padding:12px 18px;font-weight:800;transition:.2s ease;
    }
    .btn-primary{background:var(--primary);color:white}
    .btn-primary:hover{background:var(--primary-2);transform:translateY(-1px)}
    .btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary)}
    .btn-outline:hover{background:var(--surface-2)}
    .btn-ghost{background:var(--surface-2);color:var(--text)}
    .btn-lg{padding:14px 22px;border-radius:14px}

    /* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:94px 0 76px;
      background:
        radial-gradient(circle at 80% 20%, rgba(20,184,166,.18), transparent 28%),
        radial-gradient(circle at 10% 80%, rgba(212,167,44,.10), transparent 26%),
        var(--surface);
      border-bottom:1px solid var(--line);
    }
    .hero-grid{
      display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:56px
    }
    .hero h1{
      font-size:clamp(2.7rem,6vw,5.5rem);
      line-height:.98;letter-spacing:-.055em;margin:18px 0;
    }
    .hero h1 span{color:var(--primary)}
    .hero p{font-size:1.08rem;color:var(--muted);max-width:660px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .hero-meta{
      display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)
    }
    .stat strong{font-size:1.45rem;display:block}
    .stat span{color:var(--muted);font-size:.82rem}
    .hero-art{
      min-height:470px;border-radius:32px;position:relative;overflow:hidden;
      background:
        linear-gradient(145deg,rgba(15,118,110,.88),rgba(8,79,74,.94)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='700' viewBox='0 0 800 700'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10'%3E%3Cpath d='M0 500 Q200 320 400 500 T800 500' stroke-width='34'/%3E%3Ccircle cx='650' cy='130' r='95' stroke-width='2'/%3E%3Ccircle cx='650' cy='130' r='115' stroke-width='1'/%3E%3Cpath d='M150 0v700M350 0v700M550 0v700' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
      box-shadow:var(--shadow);
    }
    .hero-art:before{
      content:"☪";
      position:absolute;inset:0;display:grid;place-items:center;
      color:rgba(255,255,255,.13);font-size:17rem;font-family:Georgia,serif;line-height:1;
    }
    .event-card{
      position:absolute;left:24px;right:24px;bottom:24px;
      background:rgba(255,255,255,.96);color:#17322f;border-radius:20px;padding:20px;
      box-shadow:0 22px 50px rgba(0,0,0,.16)
    }
    .event-card .mini{color:var(--primary);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
    .event-card h3{margin:5px 0 9px;font-size:1.2rem}
    .event-row{display:flex;justify-content:space-between;gap:14px;align-items:center}
    .event-date{font-weight:900}
    .event-date small{display:block;font-weight:600;color:#64748b;font-size:.75rem}

    /* Cards */
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .card{
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:var(--shadow);overflow:hidden;
    }
    .card-pad{padding:22px}
    .feature-card{padding:26px}
    .feature-icon{
      width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
      background:var(--surface-2);font-size:1.4rem;margin-bottom:18px
    }
    .feature-card h3{margin:0 0 8px}
    .feature-card p{margin:0;color:var(--muted);font-size:.92rem}
    .tag{
      display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;
      background:var(--surface-2);color:var(--primary);font-size:.74rem;font-weight:800
    }

    /* About */
    .about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
    .visual{
      min-height:440px;border-radius:28px;position:relative;overflow:hidden;
      background:
        linear-gradient(145deg,#d7f1ec,#f8ecd1);
      border:1px solid var(--line);
    }
    .visual:before{
      content:"MAJELIS";
      position:absolute;inset:0;display:grid;place-items:center;
      font-size:clamp(5rem,14vw,10rem);font-weight:900;letter-spacing:.08em;
      color:rgba(15,118,110,.08);transform:rotate(-18deg);
    }
    .visual-stamp{
      position:absolute;left:24px;bottom:24px;right:24px;
      padding:18px;border-radius:18px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.75)
    }
    .about-copy p{color:var(--muted)}
    .checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
    .check{
      display:flex;gap:10px;align-items:flex-start;padding:12px 0;
      border-bottom:1px dashed var(--line);font-weight:650;font-size:.92rem
    }
    .check b{color:var(--primary)}

    /* Schedule */
    .schedule-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
    .filter-btn{
      border:1px solid var(--line);background:var(--surface);color:var(--muted);
      padding:9px 13px;border-radius:999px;font-weight:800
    }
    .filter-btn.active{background:var(--primary);color:white;border-color:var(--primary)}
    .schedule-table{width:100%;border-collapse:collapse}
    .schedule-table th,.schedule-table td{padding:16px;border-bottom:1px solid var(--line);text-align:left}
    .schedule-table th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
    .schedule-table td{font-size:.9rem}
    .day-pill{display:inline-flex;padding:7px 10px;border-radius:10px;background:var(--surface-2);font-weight:900;color:var(--primary);font-size:.8rem}
    .table-wrap{overflow:auto}

    /* Programs */
    .program-img{
      aspect-ratio:16/9;
      display:grid;place-items:center;
      background:linear-gradient(135deg,#d8eeea,#f5e8c8);
      color:rgba(15,118,110,.5);font-size:3.2rem;
    }
    .program-body{padding:20px}
    .program-body h3{margin:8px 0 7px}
    .program-body p{margin:0;color:var(--muted);font-size:.89rem}
    .program-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.76rem;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

    /* Team */
    .person{text-align:center;padding:24px}
    .avatar{
      width:110px;height:110px;border-radius:50%;margin:0 auto 16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,#cdeae5,#f1e3ba);
      color:var(--primary);font-size:2.4rem;font-weight:900;border:6px solid var(--surface-2)
    }
    .person h3{margin:0 0 4px}
    .person p{margin:0;color:var(--muted);font-size:.84rem}
    .socials{display:flex;justify-content:center;gap:8px;margin-top:14px}
    .socials a{
      width:34px;height:34px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--muted)
    }

    /* Quote banner */
    .quote{
      background:linear-gradient(135deg,var(--primary-2),var(--primary));
      color:white;border-radius:28px;padding:48px;
      position:relative;overflow:hidden
    }
    .quote:after{content:"❞";position:absolute;right:30px;top:-20px;font-size:15rem;opacity:.08;font-family:Georgia}
    .quote p{font-family:Georgia,serif;font-size:clamp(1.35rem,3vw,2rem);line-height:1.35;margin:0;max-width:900px}
    .quote small{display:block;margin-top:18px;opacity:.75}

    /* News */
    .news-card{padding:20px}
    .news-card .date{font-size:.75rem;color:var(--primary);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
    .news-card h3{font-size:1.08rem;margin:8px 0}
    .news-card p{font-size:.86rem;color:var(--muted);margin:0}
    .news-card a{display:inline-flex;margin-top:14px;color:var(--primary);font-weight:900;font-size:.84rem}

    /* Gallery */
    .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .gallery-item{
      aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--line);
      position:relative;cursor:pointer;background:linear-gradient(135deg,#d7efeb,#f7e7c4)
    }
    .gallery-item:nth-child(2),.gallery-item:nth-child(7){background:linear-gradient(135deg,#e7d7ee,#d9eee8)}
    .gallery-item:nth-child(3),.gallery-item:nth-child(6){background:linear-gradient(135deg,#f1e4c8,#dcecf2)}
    .gallery-item:nth-child(4),.gallery-item:nth-child(8){background:linear-gradient(135deg,#dcece4,#efe0d0)}
    .gallery-item span{position:absolute;inset:0;display:grid;place-items:center;font-size:2.5rem;color:rgba(15,118,110,.45)}
    .gallery-item strong{position:absolute;left:12px;bottom:10px;color:#17322f;font-size:.76rem;background:rgba(255,255,255,.75);padding:5px 8px;border-radius:8px}

    /* Donation */
    .donate{
      background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;
      display:grid;grid-template-columns:1.1fr .9fr;gap:30px
    }
    .donate h2{margin:8px 0 10px;font-size:2rem}
    .donate p{color:var(--muted)}
    .bank-list{display:grid;gap:10px}
    .bank{
      border:1px solid var(--line);border-radius:14px;padding:14px 16px;
      display:flex;justify-content:space-between;gap:12px;align-items:center
    }
    .bank strong{display:block}
    .bank small{color:var(--muted)}
    .copy-btn{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px 10px;font-weight:800;color:var(--primary)}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}
    .contact-list{display:grid;gap:12px}
    .contact-item{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
    .contact-item strong{display:block;margin-bottom:4px}
    .contact-item span{color:var(--muted);font-size:.88rem}
    form{display:grid;gap:14px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    label{font-size:.78rem;font-weight:800;color:var(--muted);display:block;margin-bottom:6px}
    input,textarea,select{
      width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);
      border-radius:12px;padding:12px 13px;outline:none
    }
    textarea{min-height:130px;resize:vertical}
    input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(15,118,110,.09)}

    /* FAQ */
    .faq{max-width:900px;margin:auto;display:grid;gap:10px}
    details{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 16px}
    summary{list-style:none;cursor:pointer;font-weight:850;padding:16px 0;display:flex;justify-content:space-between;gap:12px}
    summary::-webkit-details-marker{display:none}
    details p{margin:0 0 16px;color:var(--muted);font-size:.9rem}

    /* Newsletter */
    .newsletter{
      border:1px solid var(--line);border-radius:22px;padding:28px;
      background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:22px
    }
    .newsletter h3{margin:0 0 4px;font-size:1.25rem}
    .newsletter p{margin:0;color:var(--muted);font-size:.87rem}
    .newsletter form{display:flex;flex-direction:row;min-width:min(100%,440px)}
    .newsletter input{background:var(--surface)}
    .newsletter .btn{flex-shrink:0}

    /* Footer */
    footer{padding:56px 0 24px;background:#09231f;color:#d9ece8;margin-top:50px}
    .footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;gap:32px}
    footer h4{margin:0 0 12px;color:white}
    footer p,footer a{color:#a8c0bc;font-size:.86rem}
    footer a:hover{color:white}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:.78rem;color:#8ca8a3}

    /* Modals / toast */
    .modal{
      position:fixed;inset:0;background:rgba(3,20,18,.62);z-index:100;
      display:none;align-items:center;justify-content:center;padding:18px
    }
    .modal.show{display:flex}
    .modal-box{width:min(720px,100%);background:var(--surface);border-radius:22px;border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.25)}
    .modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
    .modal-head h3{margin:0}
    .modal-content{padding:22px}
    .modal-art{height:300px;border-radius:16px;background:linear-gradient(135deg,#d6eee9,#f1e4c6);display:grid;place-items:center;font-size:5rem;color:rgba(15,118,110,.38)}
    .close-btn{width:36px;height:36px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px}
    #toast{
      position:fixed;right:18px;bottom:18px;z-index:120;display:none;
      background:#102925;color:white;padding:13px 16px;border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,.22);font-weight:700;font-size:.86rem
    }

    .reveal{opacity:0;transform:translateY(18px);transition:.6s ease}
    .reveal.visible{opacity:1;transform:none}


    /* Static page routing: article & gallery detail */
    .gallery-chooser{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .media-entry{padding:24px;display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;transition:.2s ease}
    .media-entry:hover{transform:translateY(-2px);border-color:var(--primary)}
    .media-entry-icon{width:88px;height:88px;border-radius:20px;display:grid;place-items:center;background:var(--surface-2);color:var(--primary);font-size:2.6rem}
    .media-entry-icon.video-icon{background:#102b27;color:#fff}
    .media-entry h3{margin:9px 0 4px}.media-entry p{margin:0;color:var(--muted);font-size:.86rem}.media-entry strong{display:inline-flex;margin-top:12px;color:var(--primary);font-size:.82rem}
    .static-page{min-height:620px}
    .static-page .page-hero{padding:60px 0 38px;background:var(--surface);border-bottom:1px solid var(--line)}
    .static-page .breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.8rem;margin-bottom:17px}
    .static-page .breadcrumb a{color:var(--primary);font-weight:800}
    .static-page .page-hero h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.05;letter-spacing:-.045em;margin:12px 0}
    .static-page .page-hero p{max-width:800px;color:var(--muted)}
    .static-page .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
    .static-page .article{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
    .static-page .article-cover,.static-media-cover{aspect-ratio:16/8.5;border-radius:16px;background:linear-gradient(135deg,#d8eee9,#f5e7c6);display:grid;place-items:center;color:rgba(15,118,110,.42);font-size:6rem;margin-bottom:25px}
    .static-page .article h2{font-size:1.5rem;line-height:1.2;margin-top:27px}.static-page .article p{color:var(--muted)}
    .static-page .article blockquote{margin:23px 0;padding:17px 19px;border-left:4px solid var(--primary);background:var(--surface-2);border-radius:0 13px 13px 0;font-family:Georgia,serif;font-size:1.08rem}
    .static-page .sidebar{position:sticky;top:94px;display:grid;gap:13px}.static-page .sidebar-card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:18px}.static-page .sidebar-card h3{font-size:1rem;margin:0 0 10px}.static-page .sidebar-card a{color:var(--primary);font-size:.82rem;font-weight:800}
    .gallery-route-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}.gallery-route-toolbar .active{background:var(--primary);color:#fff;border-color:var(--primary)}
    .route-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.route-media-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
    .route-media-cover{aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(135deg,#d8eee9,#f5e7c6);font-size:4rem;color:rgba(15,118,110,.42);position:relative}
    .route-media-cover.video{background:linear-gradient(135deg,#102d29,#081613);color:#fff}.route-media-cover .play{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2)}
    .route-media-body{padding:17px}.route-media-body h3{margin:0 0 5px;font-size:1.03rem}.route-media-body p{margin:0;color:var(--muted);font-size:.82rem}.route-media-body a{display:inline-flex;margin-top:12px;color:var(--primary);font-size:.81rem;font-weight:900}
    .media-detail{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
    .static-media-cover{margin-bottom:20px}.static-media-cover.video{background:#0b1917;color:#fff}.static-media-cover .play{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:2rem}
    .detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.detail-tags .tag{border:1px solid var(--line)}
    @media(max-width:1000px){.static-page .article-layout{grid-template-columns:1fr}.static-page .sidebar{position:static}}
    @media(max-width:720px){.gallery-chooser{grid-template-columns:1fr}.media-entry{grid-template-columns:70px 1fr}.media-entry-icon{width:70px;height:70px}.route-gallery-grid{grid-template-columns:1fr 1fr}.static-page .article,.media-detail{padding:20px}}
    @media(max-width:520px){.route-gallery-grid{grid-template-columns:1fr}}

    /* Responsive */
    @media(max-width:1000px){
      .nav-menu{display:none;position:absolute;left:16px;right:16px;top:78px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}
      .nav-menu.open{display:flex}
      .nav-menu a.active:after{display:none}
      .menu-btn{display:grid}
      .hero-grid,.about-grid,.donate,.contact-grid{grid-template-columns:1fr}
      .hero-art{min-height:380px}
      .grid-4{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
      .section-head{align-items:flex-start;flex-direction:column}
    }
    @media(max-width:720px){
      .top-links{display:none}
      .topbar .container{justify-content:center}
      .hero{padding:70px 0 54px}
      .hero h1{font-size:3rem}
      .hero-meta{gap:15px}
      .grid-3,.grid-4{grid-template-columns:1fr}
      .checks,.form-grid{grid-template-columns:1fr}
      .gallery{grid-template-columns:repeat(2,1fr)}
      .quote{padding:30px}
      .newsletter{align-items:stretch;flex-direction:column}
      .newsletter form{min-width:0}
      .footer-grid{grid-template-columns:1fr}
      .nav-actions .btn{display:none}
    }
    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*:before,*:after{transition:none!important;animation:none!important}
    }

    /* ===== Perbaikan responsif (semua ukuran layar) ===== */
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{overflow-x:hidden}
    img,video,iframe,svg{max-width:100%}
    img,video{height:auto}
    section[id]{scroll-margin-top:86px}
    footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
    h1,h2,h3{overflow-wrap:break-word}
    .contact-item span,.bank strong,.bank small,.footer-grid p{overflow-wrap:anywhere}
    .grid-3>*,.grid-4>*,.hero-grid>*,.about-grid>*,.donate>*,.contact-grid>*,.footer-grid>*,.form-grid>*,.checks>*{min-width:0}
    .icon-btn,.menu-btn{width:44px;height:44px}
    .hero-art:before{font-size:clamp(9rem,28vw,17rem)}
    .quote:after{font-size:clamp(8rem,22vw,15rem)}
    .bank{flex-wrap:wrap}
    .bank>div{min-width:0;flex:1 1 200px}
    .modal-box{max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow:auto}
    .modal-art{height:clamp(160px,38vw,300px)}
    .table-wrap{-webkit-overflow-scrolling:touch}
    .static-page .article-cover,.static-media-cover{font-size:clamp(3.5rem,14vw,6rem)}
    .route-media-cover{font-size:clamp(2.8rem,10vw,4rem)}
    .newsletter input{min-width:0}

    @media(min-width:1600px){:root{--container:1320px}}

    /* Navbar: beralih ke menu hamburger lebih awal agar 8 menu tidak sesak */
    @media(max-width:1100px){
      .nav-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0 auto;width:min(var(--container),calc(100% - 32px));padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:2px;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);overflow-y:auto}
      .nav-menu.open{display:flex}
      .nav-menu a{padding:12px 10px;border-radius:10px}
      .nav-menu a:hover,.nav-menu a.active{background:var(--surface-2)}
      .nav-menu a.active:after{display:none}
      .menu-btn{display:grid}
    }

    /* Tablet */
    @media(min-width:721px) and (max-width:1000px){
      .grid-3{grid-template-columns:repeat(2,1fr)}
      .grid-3>:last-child:nth-child(odd){grid-column:1/-1}
      .section{padding:72px 0}
    }

    /* HP */
    @media(max-width:720px){
      .section{padding:56px 0}
      .section-sm{padding:40px 0}
      .section-head{margin-bottom:24px}
      .hero h1{font-size:clamp(2.2rem,10.5vw,3rem)}
      .hero p{font-size:1rem}
      .hero-art{min-height:320px;border-radius:24px}
      .event-card{left:14px;right:14px;bottom:14px;padding:16px}
      .event-row{flex-wrap:wrap}
      .donate{padding:22px}
      .donate h2{font-size:1.6rem}
      .quote{padding:26px;border-radius:22px}
      .visual{min-height:320px}
      .newsletter{padding:22px}
      .newsletter form{flex-direction:column;width:100%}
      .newsletter .btn{width:100%}
      .static-page .page-hero{padding:40px 0 26px}
      .static-page .article,.media-detail{border-radius:18px}
      #toast{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));text-align:center}

      /* Tabel jadwal -> kartu */
      .schedule-table thead{display:none}
      .schedule-table,.schedule-table tbody{display:block;width:100%}
      .schedule-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px;border-bottom:1px solid var(--line)}
      .schedule-table tr:last-child{border-bottom:0}
      .schedule-table td{padding:0;border:0;min-width:0}
      .schedule-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
      .schedule-table td:nth-child(3){grid-column:1/-1;order:-1}
      .schedule-table td:nth-child(3)::before{display:none}
    }

    /* HP kecil */
    @media(max-width:480px){
      .container{width:calc(100% - 24px)}
      .hero-actions .btn{flex:1 1 100%}
      .hero-meta{gap:12px 20px}
      .brand span{display:none}
      .brand-mark{width:40px;height:40px;font-size:1.15rem}
      .brand strong{font-size:.92rem}
      .nav-inner{gap:12px}
      .schedule-table tr{grid-template-columns:1fr}
      .bank .copy-btn{width:100%}
      .footer-bottom{flex-direction:column}
    }

    /* Layar sentuh: matikan efek hover yang menggeser elemen */
    @media(hover:none){
      .btn-primary:hover,.media-entry:hover{transform:none}
    }

    /* Ikon sosial media pengajar */
    .socials a{transition:.2s ease}
    .socials svg{display:block}
    .socials a:hover{transform:translateY(-1px)}
    .socials a[aria-label="Instagram"]:hover{color:#e1306c;border-color:#e1306c}
    .socials a[aria-label="YouTube"]:hover{color:#ff0000;border-color:#ff0000}

/* ===== WordPress ===== */
.admin-bar nav{top:32px}
@media(max-width:782px){.admin-bar nav{top:46px}}
.avatar,.program-img,.article-cover{overflow:hidden}
.avatar img,.article-cover img,.program-img img,.route-media-cover img,.static-media-cover img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.video-embed{aspect-ratio:16/9;margin-bottom:22px}
.video-embed iframe,.video-embed video{width:100%;height:100%;border:0;border-radius:18px;display:block}
.article img{max-width:100%;height:auto;border-radius:14px}
.article .wp-block-image{margin:18px 0}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pagination .page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.contact-item a{color:inherit;text-decoration:underline}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}