/* HarbiOede Main CSS */
/* Import design system */
/* (design-system.css ayri yukleniyor) */

/* Page wrapper */
body { display:flex; flex-direction:column; }
main { flex:1; min-width:0; }

/* ===================================================
   SHARED FRONTEND LAYOUT
   =================================================== */
.page-header {
  position:relative;
  padding:3.5rem 0 2.5rem;
  overflow:hidden;
  border-bottom:1px solid var(--color-border);
  background:
    radial-gradient(circle at 12% 20%, rgba(108,76,255,.14), transparent 28rem),
    var(--color-bg);
}
.page-header-title { margin-top:.65rem; letter-spacing:-.025em; }
.section-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--color-primary-l);
  font-size:.8125rem;
  font-weight:700;
}
.card {
  padding:1.5rem;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.flex-center { display:flex; align-items:center; justify-content:center; }
.text-primary { color:var(--color-primary-l); }
.mb-4 { margin-bottom:1rem; }
.mb-6 { margin-bottom:1.5rem; }
.mb-8 { margin-bottom:2rem; }

.campaigns-grid,
.cards-grid,
.merchants-grid,
.categories-grid,
.banks-grid {
  display:grid;
  gap:1rem;
}
.campaigns-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.cards-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.merchants-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.categories-grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.banks-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

.merchant-card { min-height:170px; justify-content:center; }
.merchant-logo {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
}
.merchant-logo img { width:100%; height:100%; padding:.5rem; object-fit:contain; }
.merchant-campaign-count { color:var(--color-text-subtle); font-size:.75rem; text-align:center; }

.category-card {
  min-height:155px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  padding:1.25rem;
  text-align:center;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:var(--transition);
}
.category-card:hover { border-color:rgba(108,76,255,.4); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.category-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-primary-l);
  border-radius:var(--radius-md);
  background:rgba(108,76,255,.14);
}
.category-name { font-weight:650; }

.bank-card {
  min-height:96px;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.1rem;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:var(--transition);
}
.bank-card:hover { border-color:rgba(108,76,255,.4); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.bank-logo-wrap {
  width:52px;
  height:52px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
}
.bank-logo-wrap img { width:100%; height:100%; padding:.35rem; object-fit:contain; }
.bank-name { font-weight:700; }
.bank-card-count { margin-top:.15rem; color:var(--color-text-subtle); font-size:.8125rem; }

.cc-bank { display:flex; align-items:center; gap:.65rem; min-width:0; }
.cc-bank-logo {
  width:38px;
  height:38px;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
}
.cc-bank-logo img { width:100%; height:100%; padding:.25rem; object-fit:contain; }
.cc-card-name { font-size:.8125rem; font-weight:700; }
.cc-bank-name { color:var(--color-text-subtle); font-size:.7rem; }
.cc-title { min-height:2.8em; margin-bottom:.8rem; font-size:.9375rem; font-weight:650; line-height:1.4; }
.cc-reward { display:flex; align-items:baseline; gap:.45rem; margin-bottom:.65rem; }
.cc-reward-amount { color:var(--color-success); font-size:1.3rem; font-weight:800; }
.cc-reward-type { color:var(--color-text-muted); font-size:.75rem; }
.cc-end-date { display:flex; align-items:center; gap:.35rem; color:var(--color-text-subtle); font-size:.75rem; }
.campaign-card-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.chip {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .85rem;
  color:var(--color-text-muted);
  font-size:.8125rem;
  font-weight:600;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:rgba(255,255,255,.025);
  transition:var(--transition);
}
.chip:hover,.chip.active { color:var(--color-text); border-color:var(--color-primary); background:rgba(108,76,255,.14); }

.input-group { position:relative; display:flex; align-items:center; }
.input-group .form-control { padding-left:2.6rem; }
.input-icon { position:absolute; left:1rem; z-index:1; color:var(--color-text-subtle); pointer-events:none; }
.empty-state { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; text-align:center; }
.empty-state-icon { color:var(--color-primary-l); font-size:2rem; opacity:.55; }

.how-step {
  padding:2rem 1.5rem;
  text-align:center;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}
.how-step-number {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
  color:var(--color-primary-l);
  font-weight:800;
  border:1px solid rgba(108,76,255,.35);
  border-radius:50%;
  background:rgba(108,76,255,.16);
}
.how-step-icon { margin-bottom:.75rem; color:var(--color-primary); font-size:1.75rem; }
.how-step h3 { margin-bottom:.45rem; font-size:1.0625rem; }
.how-step p { font-size:.875rem; }

.filter-bar {
  padding:1rem;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}

@media (max-width:700px) {
  .page-header { padding:2.5rem 0 1.75rem; }
  .section { padding:2.75rem 0; }
  .filter-bar form { grid-template-columns:1fr !important; }
  .merchants-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .categories-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .banks-grid { grid-template-columns:1fr !important; }
}

/* ===================================================
   KAMPANYA DETAIL PAGE
   =================================================== */
.campaign-detail { max-width:860px; margin:0 auto; padding:2rem 0; }
.campaign-detail-header { margin-bottom:2rem; }
.campaign-meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.5rem 0; }
.meta-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1rem 1.25rem; }
.meta-card-label { font-size:.75rem; color:var(--color-text-subtle); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; }
.meta-card-value { font-size:1.125rem; font-weight:700; }

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:.375rem; font-size:.8125rem; color:var(--color-text-subtle); flex-wrap:wrap; }
.breadcrumb a { color:var(--color-text-subtle); }
.breadcrumb a:hover { color:var(--color-text-muted); }
.breadcrumb-sep { opacity:.4; }

/* Filter sidebar */
.filter-sidebar { display:flex; flex-direction:column; gap:1rem; }
.filter-group { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.125rem; }
.filter-group-title { font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-subtle); margin-bottom:.875rem; display:flex; align-items:center; gap:.4rem; }
.filter-option { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; font-size:.875rem; color:var(--color-text-muted); cursor:pointer; }
.filter-option:hover { color:var(--color-text); }
.filter-option input { accent-color:var(--color-primary); cursor:pointer; }

/* Pagination */
.pagination { display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; }
.page-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-sm);
  border:1px solid var(--color-border); font-size:.875rem;
  color:var(--color-text-muted); transition:var(--transition);
}
.page-link:hover { border-color:var(--color-primary); color:var(--color-primary-l); }
.page-link.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; font-weight:700; }
.page-link.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* Search page */
.search-results-grid { display:flex; flex-direction:column; gap:1rem; }
.search-result-item { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.125rem 1.25rem; transition:var(--transition); }
.search-result-item:hover { border-color:var(--color-border-l); }
.search-result-type { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-primary-l); margin-bottom:.375rem; }
.search-result-title { font-size:1rem; font-weight:600; margin-bottom:.375rem; }
.search-result-desc { font-size:.875rem; color:var(--color-text-muted); }

/* Error pages */
.error-page { min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:3rem 1.5rem; }
.error-page-code { font-size:6rem; font-weight:900; opacity:.15; line-height:1; }
.error-page-title { font-size:1.75rem; font-weight:700; margin:.5rem 0; }
.error-page-desc { color:var(--color-text-muted); margin-bottom:2rem; }

/* Tabs */
.tabs { display:flex; border-bottom:1px solid var(--color-border); gap:.25rem; }
.tab-btn {
  padding:.625rem 1rem; border:none; background:transparent; border-bottom:2px solid transparent;
  font-size:.875rem; font-weight:500; color:var(--color-text-muted); cursor:pointer;
  transition:var(--transition); margin-bottom:-1px;
}
.tab-btn:hover { color:var(--color-text); }
.tab-btn.active { color:var(--color-primary-l); border-bottom-color:var(--color-primary); }
.tab-content { display:none; padding-top:1.5rem; }
.tab-content.active { display:block; }

/* Conditions list */
.conditions-list { display:flex; flex-direction:column; gap:.625rem; }
.condition-item { display:flex; align-items:flex-start; gap:.625rem; font-size:.875rem; color:var(--color-text-muted); }
.condition-item i { color:var(--color-primary-l); margin-top:.1rem; flex-shrink:0; font-size:.8rem; }

/* Responsive */
@media (max-width:640px) {
  .hero { padding:3rem 0 2.5rem; }
  .section { padding:2.5rem 0; }
  .compare-widget { padding:1.25rem; }
  .stat-grid { grid-template-columns:1fr 1fr; }
}