@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dynalight&display=swap');

.note-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 1em 0;
  background: #ffffff;
}

.note-box .material-icons {
  font-size: 18px;
  margin-top: 0px;
}

.note-box-header {
  display: flex;
  align-items: center;   /* sejajarkan vertikal */
  gap: 6px;              /* jarak ikon dan teks */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3px;
}

.note-box-header .material-icons {
  font-size: 18px;       /* ukuran pas dengan teks */
  line-height: 1;        /* biar gak ngedorong ke atas */
  flex-shrink: 0;        /* ikon gak mengecil */
}

.note-content h4 {
  margin: 0 0 .25em;
  font-size: 18px;
  font-weight: 600;
}

.note-content p {
  margin: 0;
  font-size: 14px;
}

/* Variasi warna */
.note-default { border-left: 4px solid #57606a; }
.note-default .material-icons, .note-default h4 { color: #57606a; }

.note-error { border-left: 4px solid #e57373; }
.note-error .material-icons, .note-error h4 { color: #e57373; }

.note-pin { border-left: 4px solid #e57373; }
.note-pin .material-icons, .note-pin h4 { color: #e57373; }

.note-security { border-left: 4px solid #e57373; }
.note-security .material-icons, .note-security h4 { color: #e57373; }

.note-warning { border-left: 4px solid #ffb74d; }
.note-warning .material-icons, .note-warning h4 { color: #ffb74d; }

.note-info { border-left: 4px solid #0366d6; }
.note-info .material-icons, .note-info h4 { color: #0366d6; }

.note-guide { border-left: 4px solid #0366d6; }
.note-guide .material-icons, .note-guide h4 { color: #0366d6; }

.note-reference { border-left: 4px solid #0366d6; }
.note-reference .material-icons, .note-reference h4 { color: #0366d6; }

.note-success { border-left: 4px solid #22863a; }
.note-success .material-icons, .note-success h4 { color: #22863a; }

.note-tip { border-left: 4px solid #ba68c8; }
.note-tip .material-icons, .note-tip h4 { color: #ba68c8; }

.note-time { border-left: 4px solid #ba68c8; }
.note-time .material-icons, .note-time h4 { color: #ba68c8; }

#isso-thread { max-width: 500px; margin: 10px auto; background: #f0f0f0; padding: 10px; }

/* CSS support dengan logo dan copy button */
.support-section {
  max-width: 720px;
  margin: 2em auto;
  padding: 1.5em;
  background: #fdfdfd;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #333;
  text-align: center;
}

.support-section h2 {
  margin-bottom: 0.5em;
  font-size: 1.9em;
  color: #222;
}

.support-section p {
  margin-bottom: 1em;
  font-size: 1em;
  color: #555;
}

.support-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.support-item {
  display: flex;
  align-items: center;
  padding: 1.4em;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: background 0.2s, box-shadow 0.2s;
}

.support-item:hover {
  background: #f9f9f9;
}

.support-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-right: 1em;
}

.support-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.support-name {
  font-weight: bold;
  font-size: 1.1em;
  color: #222;
}

.support-account {
  font-size: 1em;
  letter-spacing: 1px;
  margin-top: 0.25em;
}

.support-owner {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.2em;
}

.btn-copy {
  background: #007acc;
  color: white;
  border: none;
  padding: 0.5em 0.8em;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.2s;
}

.btn-copy:hover {
  background: #005fa3;
}

/* CSS */
img.float-left,
img.float-right {
  width: 144px;           /* atur sesuai kebutuhan */
  height: auto;
  max-width: 250px;
  height: auto;
  display: block;
}

/* gambar di kiri */
img.float-left {
  float: left;
  margin: 8px 16px 16px 8px;  /* kanan = spasi agar teks tidak nempel */
}

/* gambar di kanan */
img.float-right {
  float: right;
  margin: 8px 8px 16px 16px;  /* kiri = spasi */
}

/* clear jika perlu di akhir artikel */
article::after {
  content: "";
  display: table;
  clear: both;
}

.dynalight-regular {
  font-family: "Dynalight", cursive;
  font-weight: 400;
  font-style: normal;
}

.scpr-900-normal {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.scpr-700-normal {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.scpr-500-normal {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.scpr-400-normal {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.scpr-100-normal {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.header {
  display: flex;
  justify-content: space-between; /* Logo di kiri, nav di kanan */
  align-items: center;
  width: 120%;
  padding: 10px;
}

.nav-display {
   display: none; /* Sembunyikan teks default */
}

@media (min-width: 90vw) {
  .nav-display {
    display: inline;
   }
}