/**
 * page.css — Gerçek WP page/post template stilleri
 *
 * SEO landing pages ve statik içerik sayfaları (nakliye-ve-iade, hakkimizda vb.)
 * SPA bundle yüklenmeden PHP tarafında render edildiğinde kullanılır.
 * page.php bu dosyayı <link rel="stylesheet"> ile yükler (inline style kullanmaz).
 */

/* ── Reset & base ─────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #F5F5F5; color: #1A1A2E; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* ── SPA CSS utility'lerini replike et ────────── */
.site-container { width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* ── Header (SPA Header.tsx ile görsel olarak birebir) ──────────────── */
.bsp-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid #E5E7EB; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.bsp-header-inner { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; }
@media (min-width: 640px) { .bsp-header-inner { padding: 0 24px; } }

/* Hamburger */
.bsp-hamburger { display: flex; align-items: center; gap: 6px; flex-shrink: 0; border-radius: 8px; padding: 8px; background: none; border: 0; cursor: pointer; color: #333; font-size: 14px; font-weight: 500; transition: opacity 0.15s; text-decoration: none; }
.bsp-hamburger:hover { opacity: 0.7; }
.bsp-hamburger span { display: none; }
@media (min-width: 640px) { .bsp-hamburger span { display: inline; } }

/* Logo */
.bsp-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #1A1A2E; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.bsp-logo img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.bsp-logo span { display: none; }
@media (min-width: 640px) { .bsp-logo span { display: inline; } }

/* Search bar (flex-1) */
.bsp-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F3F4F6; border-radius: 12px; color: #6B7280; font-size: 14px; text-decoration: none; transition: opacity 0.15s; border: 0; cursor: pointer; }
.bsp-search:hover { opacity: 0.8; }
.bsp-search svg { flex-shrink: 0; }
.bsp-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Actions cluster */
.bsp-actions { display: flex; align-items: center; gap: 4px; }
.bsp-icon-btn { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #6B7280; text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; transition: opacity 0.15s; }
.bsp-icon-btn:hover { opacity: 0.8; }

/* ── CategoryBar (Trendyol tarzı) ──────────────── */
.bsp-catbar { position: sticky; top: 56px; z-index: 30; background: #fff; border-bottom: 1px solid #E5E7EB; display: none; }
@media (min-width: 768px) { .bsp-catbar { display: block; } }
.bsp-catbar-inner { display: flex; align-items: center; overflow-x: auto; height: 44px; padding: 0 8px; }
.bsp-catbar-inner::-webkit-scrollbar { display: none; }
.bsp-catbar-inner { scrollbar-width: none; -ms-overflow-style: none; }
.bsp-catbar a { flex-shrink: 0; white-space: nowrap; padding: 0 14px; height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: #1A1A2E; text-decoration: none; transition: color 0.15s; }
.bsp-catbar a:hover { color: #FF6000; }
.bsp-catbar a.active { color: #FF6000; font-weight: 700; position: relative; }
.bsp-catbar a.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: #FF6000; border-radius: 2px 2px 0 0; }

/* ── Main content ─────────────────────────────── */
.bsp-main { max-width: 1300px; margin: 0 auto; padding: 24px 20px 40px; background: #fff; }
.bsp-main h1 { font-size: 28px; font-weight: 800; color: #111827; margin-bottom: 16px; line-height: 1.25; }
.bsp-main h2 { font-size: 22px; font-weight: 700; color: #111827; margin: 28px 0 12px; }
.bsp-main h3 { font-size: 18px; font-weight: 700; color: #1F2937; margin: 20px 0 10px; }
.bsp-main p { margin-bottom: 14px; color: #374151; }
.bsp-main a { color: #FF6000; text-decoration: none; }
.bsp-main a:hover { text-decoration: underline; }
.bsp-main img { max-width: 100%; height: auto; border-radius: 8px; }
.bsp-main ul, .bsp-main ol { padding-left: 20px; margin-bottom: 14px; }

/* ── Product grid (functions.php the_content filter'ı üretir) ── */
.bisiparis-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 20px 0; }
@media (min-width: 768px) { .bisiparis-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.bisiparis-product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.bisiparis-product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-decoration: none; }
.bisiparis-product-card .img { aspect-ratio: 1/1; background: #F9FAFB; display: flex; align-items: center; justify-content: center; padding: 8px; }
.bisiparis-product-card .img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.bisiparis-product-card .title { padding: 8px 10px 4px; font-size: 13px; color: #374151; line-height: 1.4; min-height: 40px; }
.bisiparis-product-card .price { padding: 4px 10px 10px; font-size: 14px; font-weight: 600; color: #1A1A2E; }
.bisiparis-product-card .price del { color: #9CA3AF; font-weight: 400; font-size: 12px; margin-right: 4px; }
.bisiparis-product-card .price ins { text-decoration: none; color: #008A0A; }
</content>
</invoke>