/* ===================================================
   404 + ARAMA (misc.css)
   Tema: lacivert #1a2a6b, Cormorant + Inter
   =================================================== */

.container{ max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.eyebrow{ font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--beymen-copper, #2e4ca0); font-weight: 600; display: block; margin-bottom: 10px; }

/* Sayfa başlığı (arama) */
.page-head{ padding: 40px 0 8px; text-align: center; }
.page-head h1{ font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 40px; font-weight: 500; color: var(--ink, #111); margin: 0; }

/* Buton */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 11px; font-size: 14px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; background: var(--beymen-navy, #1a2a6b); color: #fff; transition: background .2s ease; }
.btn:hover{ background: #12204f; }
.btn-lg{ padding: 16px 34px; font-size: 15px; }
.btn-outline{ background: #fff; border: 1.5px solid #e4e4e9; color: var(--ink, #111); }
.btn-outline:hover{ background: #f6f7f9; }
.btn-sm{ padding: 10px 18px; font-size: 13px; }

/* ===== ARAMA ===== */
.search-hero{ max-width: 640px; margin: 24px auto 8px; display: flex; gap: 10px; }
.search-hero-input{ flex: 1; position: relative; }
.search-hero-input input{ width: 100%; padding: 16px 46px 16px 18px; border: 1.5px solid #e8e8ee; border-radius: 13px; font-size: 15px; font-family: inherit; background: #fafafb; outline: none; box-sizing: border-box; transition: border-color .2s ease, background .2s ease; }
.search-hero-input input:focus{ border-color: var(--beymen-navy, #1a2a6b); background: #fff; }
.search-hero-clear{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #aaa; display: flex; }
.search-hero-clear svg{ width: 18px; height: 18px; }

.search-categories{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 640px; margin: 18px auto 0; justify-content: center; }
.search-categories-label{ font-size: 13px; color: #999; }
.search-category-chip{ display: inline-flex; padding: 7px 16px; border: 1px solid #e4e4e9; border-radius: 999px; font-size: 13px; color: var(--beymen-navy, #1a2a6b); text-decoration: none; transition: all .15s ease; }
.search-category-chip:hover{ background: var(--beymen-navy, #1a2a6b); color: #fff; border-color: var(--beymen-navy, #1a2a6b); }

.result-count{ text-align: center; font-size: 14px; color: #888; margin: 24px 0 8px; }
.shop-toolbar{ display: flex; justify-content: flex-end; align-items: center; max-width: 1680px; margin: 0 auto; padding: 8px 32px; }
.shop-sort-form select{ padding: 10px 14px; border: 1px solid #e4e4e9; border-radius: 10px; font-size: 14px; background: #fff; outline: none; }

.products-grid{ max-width: 1680px; margin: 0 auto; padding: 16px 32px 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
@media (max-width: 1100px){ .products-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .products-grid{ grid-template-columns: repeat(2, 1fr); padding: 16px; } }

/* Arama boş durum */
.search-empty{ text-align: center; padding: 70px 20px; max-width: 480px; margin: 0 auto; }
.search-empty-icon{ width: 80px; height: 80px; margin: 0 auto 22px; border-radius: 50%; background: #f4f4f6; color: #bbb; display: flex; align-items: center; justify-content: center; }
.search-empty-icon svg{ width: 38px; height: 38px; }
.search-empty h2{ font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 26px; font-weight: 500; color: var(--ink, #111); margin: 0 0 10px; }
.search-empty p{ font-size: 15px; color: #888; line-height: 1.6; margin: 0 0 24px; }
.search-empty-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.search-suggestions{ margin-top: 18px; font-size: 14px; color: #888; }
.search-suggestions a{ color: var(--beymen-navy, #1a2a6b); }

/* Sayfalama */
.pagination{ display: flex; gap: 6px; justify-content: center; padding: 30px 0 60px; }
.pagination a, .pagination span{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #e4e4e9; border-radius: 10px; font-size: 14px; color: var(--ink, #111); text-decoration: none; transition: all .15s ease; }
.pagination a:hover{ border-color: var(--beymen-navy, #1a2a6b); }
.pagination .active{ background: var(--beymen-navy, #1a2a6b); color: #fff; border-color: var(--beymen-navy, #1a2a6b); }

.section-head{ text-align: center; margin: 40px 0 24px; }
.section-head h2{ font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 30px; font-weight: 500; color: var(--ink, #111); margin: 0; }

/* ===== 404 ===== */
.notfound{ text-align: center; padding: 70px 0 90px; }
.notfound-hero{ max-width: 560px; margin: 0 auto; }
.notfound-code{ font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 120px; font-weight: 500; color: var(--beymen-navy, #1a2a6b); line-height: 1; margin-bottom: 10px; opacity: .9; }
.notfound-hero h1{ font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 32px; font-weight: 500; color: var(--ink, #111); margin: 0 0 12px; }
.notfound-hero p{ font-size: 15px; color: #888; line-height: 1.6; margin: 0 0 28px; }
.notfound-search{ max-width: 440px; margin: 0 auto 24px; }
.notfound-search form{ display: flex; gap: 10px; }
.notfound-search input{ flex: 1; padding: 14px 16px; border: 1.5px solid #e8e8ee; border-radius: 12px; font-size: 14.5px; background: #fafafb; outline: none; }
.notfound-search input:focus{ border-color: var(--beymen-navy, #1a2a6b); background: #fff; }
.notfound-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.notfound-links{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.notfound-links a{ color: var(--beymen-navy, #1a2a6b); text-decoration: none; font-size: 14px; }
.notfound-links a:hover{ text-decoration: underline; }
.notfound-suggested{ margin-top: 50px; }

/* Responsive */
@media (max-width: 560px){
  .container{ padding: 0 18px; }
  .page-head h1{ font-size: 30px; }
  .notfound-code{ font-size: 80px; }
  .search-hero{ flex-direction: column; }
}