/* =========================
   Pariteler Page CSS
   File: /assets/css/parite.css
========================= */

.parites-page{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(230,126,34,.20), transparent 55%),
              radial-gradient(1000px 500px at 90% 10%, rgba(15,52,96,.35), transparent 60%),
              linear-gradient(135deg,#121528 0%,#0f172a 100%);
  min-height:100vh;
  padding:32px 0 50px;
}

.parites-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* =========================
   Breadcrumb (microdata)
========================= */
.breadcrumb-wrapper{ margin-bottom: 18px; }

.breadcrumb-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background: rgba(30,39,56,.75);
  border: 1px solid rgba(230,126,34,.10);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
}

.breadcrumb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ffd7b0;
  text-decoration:none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(230,126,34,.10);
  border: 1px solid rgba(230,126,34,.12);
  transition: transform .18s ease, background .18s ease;
}

.breadcrumb-chip:hover{
  transform: translateY(-1px);
  background: rgba(230,126,34,.16);
}

.separator{ color:#9aa4b2; }

/* =========================
   Hero / Title
========================= */
.page-title{
  background: linear-gradient(135deg, rgba(15,52,96,.85) 0%, rgba(22,33,62,.85) 100%);
  border-radius: 18px;
  padding: 26px 22px;
  border: 1px solid rgba(230,126,34,.18);
  box-shadow: 0 12px 48px rgba(0,0,0,.32);
  margin-bottom: 18px;
}

.page-title-inner{ display:flex; flex-direction:column; gap:12px; }

.title-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.page-icon{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(230,126,34,.18);
  border: 1px solid rgba(230,126,34,.25);
  color:#ffb36a;
  font-size: 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.page-title h1{
  margin:0;
  font-size: 28px;
  font-weight: 800;
  color: #ffb36a;
  letter-spacing: .2px;
}

.page-desc{
  margin:0;
  color:#d6dde6;
  font-size: 14px;
  line-height: 1.55;
}

.badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  color:#eaf0f6;
  background: rgba(255,255,255,.06);
}

.badge .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#2ecc71;
  box-shadow: 0 0 0 3px rgba(46,204,113,.16);
}

.badge.cache .dot{
  background:#f39c12;
  box-shadow: 0 0 0 3px rgba(243,156,18,.18);
}

.badge time{ opacity:.9; }

/* =========================
   Controls (search/sort/view)
========================= */
.controls{
  display:grid;
  grid-template-columns: 1.3fr .9fr .9fr;
  gap:12px;
  margin: 14px 0 18px;
}

.control{
  background: rgba(30,39,56,.68);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

.control label{
  display:block;
  font-size: 12px;
  color:#aab4c0;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.control input,
.control select{
  width:100%;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 11px 12px;
  color:#f1f5f9;
  outline:none;
}

.control input:focus,
.control select:focus{
  border-color: rgba(243,156,18,.55);
  box-shadow: 0 0 0 3px rgba(243,156,18,.14);
}

@media (max-width: 900px){
  .controls{ grid-template-columns: 1fr; }
}

/* =========================
   Grid
========================= */
.parite-box-wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* compact mode */
.parite-box-wrapper.is-compact{
  grid-template-columns: 1fr;
}

.parite-box{
  position:relative;
  background: linear-gradient(135deg, rgba(30,39,56,.92) 0%, rgba(39,52,73,.92) 100%);
  border: 1px solid rgba(230,126,34,.18);
  border-radius: 16px;
  text-decoration:none;
  overflow:hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline:none;
}

.parite-box::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg,#e67e22 0%,#d35400 100%);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
}

.parite-box:hover{
  border-color: rgba(230,126,34,.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(230,126,34,.10), 0 12px 34px rgba(0,0,0,.26);
}

.parite-box:hover::before{ transform: scaleX(1); }

.parite-box:focus-visible{
  border-color: rgba(243,156,18,.75);
  box-shadow: 0 0 0 3px rgba(243,156,18,.14), 0 12px 34px rgba(0,0,0,.26);
}

.box-content{
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.parite-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.parite-name{
  font-size: 16px;
  font-weight: 800;
  color:#ffcf9b;
  letter-spacing:.2px;
}

.parite-tag{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(230,126,34,.10);
  border: 1px solid rgba(230,126,34,.16);
  color:#ffd7b0;
  white-space:nowrap;
}

.parite-change{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 800;
  width: fit-content;
}

.parite-change.up{
  color:#2ecc71;
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.30);
}

.parite-change.down{
  color:#e74c3c;
  background: rgba(231,76,60,.12);
  border: 1px solid rgba(231,76,60,.30);
}

.parite-change .muted{
  font-size: 12px;
  color:#aab4c0;
  font-weight: 700;
}

.parite-values{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}

.parite-box-wrapper.is-compact .parite-values{
  grid-template-columns: 1fr 1fr;
}

.value{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
}

.value .k{
  display:block;
  font-size: 11px;
  color:#aab4c0;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom: 6px;
}

.value .v{
  display:block;
  font-size: 15px;
  font-weight: 900;
  color:#f8fafc;
}

.empty-state{
  grid-column: 1 / -1;
  text-align:center;
  padding: 22px 14px;
  border-radius: 16px;
  background: rgba(30,39,56,.6);
  border: 1px solid rgba(255,255,255,.08);
  color:#e6edf6;
}

.small-muted{
  margin-top: 8px;
  color:#aab4c0;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}