/*
Theme Name: Açık Sayfa
Theme URI: https://example.com
Author: Mehmet BORA
Description: Siyah-beyaz, modern, shortcode tabanlı arama motoru teması.
Version: 0.1.0
Text Domain: acik-sayfa
*/

.wp-caption{max-width:100%}
.alignleft{float:left;margin-right:1rem}
.alignright{float:right;margin-left:1rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}

/* =========================
   Header (siyah-beyaz modern)
   ========================= */
.as-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.as-header__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.as-brand__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #000;
}
.as-brand__title{
  font-weight: 700;
  letter-spacing: -.02em;
}
.custom-logo{
  height: 28px;
  width: auto;
}
.as-nav__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.as-nav__menu a{
  text-decoration: none;
  color: #000;
  opacity: .85;
}
.as-nav__menu a:hover{
  opacity: 1;
}

/* =========================
   Arama (shortcode) layout
   ========================= */
.am-wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 16px;
}
.am-form{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.am-form input[type="search"]{
  flex: 1;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 14px;
  outline: none;
  background: #fff;
  color: #000;
}
.am-form input[type="search"]:focus{
  border-color: rgba(0,0,0,.35);
}
.am-form button{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: #000;
  color: #fff;
  cursor: pointer;
}
.am-form button:hover{ opacity: .92; }

.am-results{ margin-top: 10px; }
.am-result-item{ padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.am-result-title a{ color: #000; text-decoration: none; font-weight: 600; }
.am-result-title a:hover{ text-decoration: underline; }
.am-result-meta{ font-size: 12px; opacity: .7; margin-top: 4px; }
.am-result-snippet{ margin-top: 8px; opacity: .9; line-height: 1.55; }

/* Ana sayfa: arama yokken Google gibi ortada */
body.am-no-results .am-wrap{
  max-width: 720px;
  margin-top: 14vh;
  text-align: center;
}
body.am-no-results .am-form{
  justify-content: center;
}
body.am-no-results .am-results{
  text-align: left;
}

/* Ana sayfa: arama varsa kutu yukarı + sonuçlar altta */
body.am-has-results .am-wrap{
  max-width: 920px;
  margin-top: 12px;
  text-align: left;
}

/* Ana sayfa dışı: her zaman "üstte + sonuçlar altta" */
body:not(.am-no-results):not(.am-has-results) .am-wrap{
  max-width: 920px;
  margin-top: 12px;
}

<?php
if ( ! defined('ABSPATH') ) exit;
?>

<header class="as-header" role="banner">
  <div class="as-header__inner">
    <div class="as-brand">
      <a class="as-brand__link" href="<?php echo esc_url(home_url('/')); ?>" rel="home">
        <?php if ( function_exists('the_custom_logo') && has_custom_logo() ) : ?>
          <?php the_custom_logo(); ?>
        <?php else : ?>
          <span class="as-brand__title"><?php bloginfo('name'); ?></span>
        <?php endif; ?>
      </a>
    </div>

    <nav class="as-nav" aria-label="<?php echo esc_attr__('Primary menu', 'acik-sayfa'); ?>">
      <?php
      if ( has_nav_menu('primary') ) {
        wp_nav_menu([
          'theme_location' => 'primary',
          'container'      => false,
          'menu_class'     => 'as-nav__menu',
          'fallback_cb'    => false,
          'depth'          => 1,
        ]);
      }
      ?>
    </nav>
  </div>
</header>
/* =========================
   Açık Sayfa - Arama UI (Zorlayıcı)
   Bu blok, shortcode nerede olursa olsun aynı görünümü verir.
   ========================= */

/* Kapsayıcı */
.am-wrap,
.entry-content .am-wrap,
.page .am-wrap,
.single .am-wrap{
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 24px 16px !important;
  text-align: left !important;
}

/* Form */
.am-form{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 18px !important;
  flex-wrap: nowrap !important;
}

.am-form input,
.am-form input[type="search"],
.am-form input[type="text"]{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 260px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 16px !important;
  outline: none !important;
  background: #fff !important;
  color: #000 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.am-form input:focus{
  border-color: rgba(0,0,0,.35) !important;
}

.am-form button{
  flex: 0 0 auto !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: #000 !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.am-form button:hover{ opacity: .92 !important; }

/* Sonuç listesi */
.am-results{
  margin-top: 8px !important;
}
.am-result-item{
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
.am-result-title a{
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.am-result-title a:hover{
  text-decoration: underline !important;
}
.am-result-meta{
  font-size: 12px !important;
  opacity: .7 !important;
  margin-top: 4px !important;
}
.am-result-snippet{
  margin-top: 8px !important;
  opacity: .9 !important;
  line-height: 1.6 !important;
}

/* Ana sayfa - arama yoksa ortalama */
body.am-no-results .am-wrap{
  max-width: 720px !important;
  margin-top: 14vh !important;
  text-align: center !important;
}
body.am-no-results .am-form{
  justify-content: center !important;
}
body.am-no-results .am-results{
  text-align: left !important;
}

/* Mobil */
@media (max-width: 520px){
  .am-form{
    flex-wrap: wrap !important;
  }
  .am-form button{
    width: 100% !important;
  }
}