body {
            margin: 0;
            padding: 0 10px;
            font-family: Arial, sans-serif;
            background-color: #fff;
        }

        .container {
            display: flex;
            min-height: 100vh;
            margin: 0 auto;
            max-width: 1200px;
        }

        .sidebar {
            width: 25%;
            background-color: #f4f4f4;
            padding: 20px;
            box-sizing: border-box;
        }

        .sidebar .logo {
            max-width: 100%;
            text-align: center;
            margin-bottom: 20px;
            align-items: center;
            margin-bottom: 10px;
            aspect-ratio: 1 / 1;
        }

        .sidebar .logo img {
            width: 200px;
            height: 200px;
            border-radius: 10px;
        }

        .sidebar .logo h2 {
            margin: 10px 0 0;
            font-size: 18px;
        }

        .sidebar nav ul {
            list-style: none;
            padding: 0;
        }

        .sidebar nav ul > li {
            margin: 10px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid grey;
        }

        .sidebar nav ul li ul.submenu li {
            border-bottom: none;
            padding: 5px 0;
        }

        .sidebar nav ul li a {
            text-decoration: none;
            color: #333;
        }

        .sidebar nav ul li a:hover {
            color: #007BFF;
        }

        .main-content {
            width: 75%;
            padding: 20px;
            box-sizing: border-box;
        }

        .header {
            background-color: maroon;
            color: white;
            padding: 10px 20px;
            font-size: 36px;
            border-radius: 8px;
        }

        .berita-terkini {
            margin-top: 50px;
        }

        .berita-terkini h3 {
            margin-bottom: 10px;
        }

        .berita-item {
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }

        .berita-item:last-child {
            border-bottom: none;
        }

        .berita-item img {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }

        .berita-item h4 {
            margin: 5px 0;
        }

        .berita-item p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }

        #editor img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
            resize: both;
            overflow: auto;
        }

        .custom-file-button:hover {
            background-color: #0d47a1;
        }

        ul.submenu {
            display: none;
            list-style: none;
            padding-left: 15px;
            margin: 0;
        }

        li:hover > ul.submenu {
            display: block;
        }

        li {
            position: relative;
        }

        ul.submenu li a {
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        ul.submenu li a:hover {
            color: #007bff;
        }

        ul.submenu li {
            margin: 5px 0;
        }

        form {
            max-width: 800px;
            margin: 0 auto;
        }

        .form-group {
            display: flex;
            align-items: left;
            margin-bottom: 15px;
        }

        .form-group label {
            width: 150px;
            margin-right: 10px;
            font-weight: bold;
        }

        .form-group input,
        .form-group textarea {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-group textarea {
            resize: vertical;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        
	}

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 0px;
  display: flex;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.9s ease-in-out;
  width: 100%;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0px;
  text-align: center;
  flex: 1;
/*.slide { */
  text-align: center;
  height: 400px; /* dari .slider */
  overflow: hidden;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
}

.slider-content {
  margin-top: 10px;
  font-size: 14px;
  background-color: transparent;
  font-color: grey;
  font-weight: bold;
}
.slider-content a {
    color: inherit;
/*    color: grey; */
    text-decoration: none;
}

button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: maroon;
  color: white;
  border: none;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}

button.prev {
  left: 0px;
}

button.next {
  right: 0px;
}


  /* ... CSS untuk mobile device ... */

  @media (max-width: 768px) {
    .container {
      flex-direction: column;
    }

    .sidebar {
      width: 100%;
      padding: 10px;
      order: 2;
    }

    .main-content {
      width: 100%;
      padding: 10px;
      order: 1;
    }

    .berita-item {
      flex-direction: column !important;
    }

    .berita-item img {
      width: 100% !important;
      height: auto !important;
    }

    .slider {
      height: auto;
    }

    .judul-alamat h1 {
      font-size: 24px;
    }

    .judul-alamat p {
      font-size: 12px;
    }