diff --git a/searchform.php b/searchform.php
new file mode 100644
index 0000000..1343702
--- /dev/null
+++ b/searchform.php
@@ -0,0 +1,15 @@
+<?php
+defined( 'ABSPATH' ) || exit;
+?>
+<form role="search" method="get" class="search-form edukarsa-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+    <label class="search-form-label">
+        <span class="screen-reader-text"><?php echo esc_html_x( 'Cari untuk:', 'label', 'edukarsa' ); ?></span>
+        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Cari informasi / warta...', 'placeholder', 'edukarsa' ); ?>" value="<?php echo get_search_query(); ?>" name="s" required />
+    </label>
+    <button type="submit" class="search-submit" aria-label="<?php echo esc_attr_x( 'Kirim Pencarian', 'submit button', 'edukarsa' ); ?>">
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+    </button>
+</form>
diff --git a/style.css b/style.css
index 985b9d7..dbf4c2a 100644
--- a/style.css
+++ b/style.css
@@ -950,3 +950,72 @@ body.edukarsa-popup-open { overflow: hidden; }
     box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25);
 }
 .edukarsa-popup-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35); }
+
+/* 22. MODERN NATIVE SEARCH FORM */
+.search-form.edukarsa-search-form,
+.search-form {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    margin: 0;
+}
+.search-form .search-form-label,
+.search-form label {
+    flex: 1;
+    margin: 0;
+    position: relative;
+    width: 100%;
+    display: block;
+}
+.search-form .search-field {
+    width: 100%;
+    padding: 13px 52px 13px 20px;
+    background-color: #f8fafc;
+    border: 1.5px solid #e2e8f0;
+    border-radius: 50px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--heading-color);
+    outline: none;
+    transition: all 0.25s ease;
+    font-family: inherit;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+.search-form .search-field::placeholder {
+    color: #94a3b8;
+    font-size: 13.5px;
+}
+.search-form .search-field:focus {
+    background-color: #ffffff;
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
+}
+.search-form .search-submit {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s ease;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(11, 74, 142, 0.25);
+}
+.search-form .search-submit:hover {
+    background: var(--primary-color);
+    transform: translateY(-50%) scale(1.05);
+    box-shadow: 0 6px 16px rgba(11, 74, 142, 0.35);
+}
+.search-form .search-submit svg {
+    display: block;
+    stroke: #ffffff;
+}