/* =====================================================
    ARTICLE
  ===================================================== */
  .artikel-left{
    width:100%;
  }

  /* =====================================================
    ROOT VARIABLES
  ===================================================== */
  :root{
    --rkcal-bg-main:#0b1220;
    --rkcal-bg-card:#ffffff;
    --rkcal-border-soft:rgba(0,0,0,.08);

    --rkcal-text-main:#222;
    --rkcal-text-muted:#666;

    --rkcal-ev-default:#222262;
    --rkcal-ev-default-dark:#18184a;
    --rkcal-ev-border:#3b3b8f;
  }

  /* =====================================================
    CONTAINER
  ===================================================== */
  .rkcal-container{
    max-width:1100px;
    margin:0 auto;
    padding:22px;
    width:100%;
  }

  /* =====================================================
    CALENDAR BOX
  ===================================================== */
  #calendar{
    background:var(--rkcal-bg-card);
    border:1px solid var(--rkcal-border-soft);
    border-radius:16px;
    padding:14px;
    position:relative;
    z-index:1;
  }

  /* =====================================================
    FULLCALENDAR FIX CLICK
  ===================================================== */
  .fc .fc-daygrid-event{
    pointer-events:auto !important;
    cursor:pointer;
    z-index:0;
  }

  .fc .fc-daygrid-event *{
    pointer-events:none;
  }

  .fc .fc-daygrid-day-frame{
    position:relative;
    z-index:1;
  }

  .fc .fc-daygrid-body,
  .fc .fc-scrollgrid,
  .fc .fc-scroller{
    overflow:visible !important;
  }

  /* =====================================================
    EVENT BATANG (PISAH & CANTIK)
  ===================================================== */
  .fc-daygrid-day-events{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:6px;
  }

  .fc .fc-daygrid-event{
    background:linear-gradient(135deg,#222262,#2d2d7a);
    border:1px solid var(--rkcal-ev-border);
    border-radius:10px;
    padding:3px 6px;

    color:#fff;
    font-weight:800;
    font-size:12px;
    line-height:1.35;

    white-space:normal !important;
    word-break:break-word;

    box-shadow:
      0 2px 6px rgba(34,34,98,.25),
      inset 0 0 0 1px rgba(255,255,255,.08);

    transition:all .18s ease;
  }

  .fc .fc-daygrid-event:hover{
    background:linear-gradient(135deg,#1c1c55,#27276f);
    transform:translateY(-1px);
    box-shadow:
      0 6px 14px rgba(34,34,98,.35),
      inset 0 0 0 1px rgba(255,255,255,.15);
  }

  .fc .fc-event-title{
    white-space:normal !important;
    word-break:break-word;
  }

  /* =====================================================
    TOOLBAR
  ===================================================== */
  .fc .fc-toolbar-title{
    font-size:16px;
    font-weight:900;
    color:var(--rkcal-text-main);
  }

  .fc .fc-button{
    background:#222262;
    border:none;
    border-radius:10px;
    padding:6px 12px;
  }

  .fc .fc-button:hover{
    background:#18184a;
  }

  .fc .fc-day-today{
    background:rgba(34,34,98,.08)!important;
  }

  /* =====================================================
    MODAL BASE
  ===================================================== */
  .rkcal-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.6);
    z-index:999;
  }

  .rkcal-overlay.rkcal-is-open{
    display:flex;
  }

  .rkcal-modal{
    width:min(820px,95%);
    background:#fff;
    border-radius:18px;
    overflow:hidden;
  }

  /* =====================================================
    MODAL HEADER
  ===================================================== */
  .rkcal-modal-head{
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#222262;
    color:#fff;
  }

  .rkcal-head-title{
    font-weight:900;
  }

  .rkcal-head-subtitle{
    font-size:13px;
    opacity:.85;
  }

  /* =====================================================
    MODAL BODY
  ===================================================== */
  .rkcal-modal-body{
    padding:16px;
    max-height:500px;
    overflow:auto;
    background:#f2f3ff;
  }

  /* =====================================================
    CLOSE BUTTON
  ===================================================== */
  .rkcal-xbtn{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:#e11d48;
    color:#fff;
    font-size:16px;
    cursor:pointer;
  }

  /* =====================================================
    LIST EVENT MODAL
  ===================================================== */
  .rkcal-listwrap{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .rkcal-listitem{
    background:linear-gradient(135deg,#222262,#2d2d7a);
    border-left:6px solid var(--rkcal-ev-border);
    border-radius:18px;
    padding:16px;
    color:#fff;

    box-shadow:0 6px 16px rgba(34,34,98,.3);
    transition:.2s ease;
  }

  .rkcal-listitem:hover{
    background:linear-gradient(135deg,#1c1c55,#27276f);
    transform:translateY(-2px);
  }

  .rkcal-itemtitle{
    font-weight:900;
    font-size:15px;
    line-height:1.35;
    white-space:normal;
  }

  .rkcal-itemtime{
    font-size:13px;
    opacity:.9;
    margin-top:4px;
  }

  .rkcal-itemgrid{
    display:flex;
    gap:12px;
    margin-top:12px;
  }

  .rkcal-thumb{
    width:120px;
    height:80px;
    object-fit:cover;
    border-radius:14px;
    background-color: #f2f3ff;
    padding: 8px;
  }

  /* =====================================================
    DETAIL IMAGE
  ===================================================== */
  .rkcal-detailimg{
    width:100%;
    border-radius:14px;
    margin-bottom:14px;
  }

  /* =====================================================
    RESPONSIVE
  ===================================================== */
  @media(max-width:768px){
    .rkcal-container{
      padding:10px;
    }

    #calendar{
      padding:8px;
    }

    .rkcal-itemgrid{
      flex-direction:column;
    }

    .rkcal-thumb{
      width:100%;
      height:180px;
    }

    .fc .fc-toolbar{
      flex-wrap:wrap;
      text-align:center;
      gap:8px;
    }
  }


  .fc .fc-toolbar-title {
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
  }

  .fc .fc-prev-button,
  .fc .fc-next-button {
    font-size: 1rem;
    background: none;
    border: none;
    color: #333;
  }

  .fc .fc-daygrid-day-name {
    font-weight: 600;
    text-transform: uppercase;
    color: #555;
    font-size: 0.9rem;
  }

  .fc-daygrid-day {
    cursor: pointer;
    transition: background-color 0.2s;
  }

  /* Optional: hover effect biar lebih jelas */
  .fc-daygrid-day:hover {
    background-color: #f1b03e; /* warna hover, bisa diganti */
  }

  .textss{
    font-size: 15px;
  }