/* =========================================================
   Akel Marin - Brand Pages (ak-*)
   File: assets/css/pages/bradns.css
========================================================= */

:root{
  --ak-brand-bg: rgba(10,18,30,.55);
  --ak-brand-panel: rgba(12,22,38,.72);
  --ak-brand-stroke: rgba(120,210,255,.18);
  --ak-brand-stroke-2: rgba(120,210,255,.28);
  --ak-brand-text: rgba(235,246,255,.92);
  --ak-brand-muted: rgba(200,225,245,.72);
  --ak-brand-accent: rgba(120,210,255,.95);
  --ak-brand-shadow: 0 14px 40px rgba(0,0,0,.35);
  --ak-brand-radius: 18px;
}

/* page wrapper */
.ak-brand{
  position: relative;
  padding: clamp(18px, 3vw, 34px) 0 64px;
}
.ak-brand .ak-container{
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* hero strip under page-hero */
.ak-brand__top{
  position: relative;
  border: 1px solid var(--ak-brand-stroke);
  background: linear-gradient(180deg, rgba(10,18,30,.64), rgba(10,18,30,.28));
  border-radius: calc(var(--ak-brand-radius) + 6px);
  box-shadow: var(--ak-brand-shadow);
  overflow: hidden;
}

.ak-brand__topGrid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 2.4vw, 26px);
}

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

.ak-brand__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ak-brand-stroke);
  background: rgba(12,22,38,.55);
  color: var(--ak-brand-accent);
  font-weight: 600;
  font-size: 13px;
}

.ak-brand__title{
  margin: 12px 0 10px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  color: var(--ak-brand-text);
  letter-spacing: -.02em;
}
.ak-brand__lead{
  margin: 0;
  color: var(--ak-brand-muted);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 72ch;
}

.ak-brand__ctaRow{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* buttons (global .ak-btn varsa onu bozmuyoruz, yoksa local stiller çalışır) */
.ak-brand__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--ak-brand-stroke-2);
  background: rgba(12,22,38,.55);
  color: var(--ak-brand-text);
  text-decoration: none;
  font-weight: 650;
  font-size: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}
.ak-brand__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(120,210,255,.45);
  background: rgba(12,22,38,.78);
}
.ak-brand__btn--primary{
  background: linear-gradient(135deg, rgba(120,210,255,.28), rgba(120,210,255,.08));
  border-color: rgba(120,210,255,.55);
}
.ak-brand__btn--ghost{
  background: transparent;
}

/* brand card right */
.ak-brand__card{
  border: 1px solid var(--ak-brand-stroke);
  background: rgba(12,22,38,.55);
  border-radius: var(--ak-brand-radius);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.ak-brand__logoBox{
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
}
.ak-brand__logo{
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ak-brand__logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.ak-brand__metaTitle{
  margin: 0;
  color: var(--ak-brand-text);
  font-weight: 750;
  font-size: 16px;
}
.ak-brand__metaSub{
  margin: 4px 0 0;
  color: var(--ak-brand-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.ak-brand__facts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 460px){
  .ak-brand__facts{ grid-template-columns: 1fr; }
}
.ak-brand__fact{
  border: 1px solid rgba(120,210,255,.14);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
}
.ak-brand__factK{
  display:block;
  color: rgba(200,225,245,.66);
  font-size: 12.5px;
}
.ak-brand__factV{
  display:block;
  margin-top: 2px;
  color: var(--ak-brand-text);
  font-weight: 700;
  font-size: 13.5px;
}

/* section headings */
.ak-brand__section{
  margin-top: 18px;
  padding-top: 18px;
}
.ak-brand__h2{
  margin: 0 0 10px;
  color: var(--ak-brand-text);
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -.015em;
}
.ak-brand__desc{
  margin: 0 0 16px;
  color: var(--ak-brand-muted);
  line-height: 1.7;
  font-size: 14.5px;
  max-width: 90ch;
}

/* filter bar */
.ak-brand__filters{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--ak-brand-stroke);
  background: rgba(12,22,38,.42);
}
.ak-brand__search{
  flex: 1;
  min-width: 220px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.ak-brand__search input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120,210,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--ak-brand-text);
  outline: none;
}
.ak-brand__search input::placeholder{ color: rgba(200,225,245,.52); }

.ak-brand__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ak-brand__chip{
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(120,210,255,.16);
  background: rgba(0,0,0,.14);
  color: rgba(235,246,255,.86);
  font-weight: 650;
  font-size: 12.5px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ak-brand__chip:hover{
  transform: translateY(-1px);
  border-color: rgba(120,210,255,.35);
}
.ak-brand__chip.is-active{
  background: rgba(120,210,255,.18);
  border-color: rgba(120,210,255,.55);
  color: var(--ak-brand-text);
}

/* products grid */
.ak-brand__grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .ak-brand__grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 620px){ .ak-brand__grid{ grid-template-columns: 1fr;} }

.ak-brandCard{
  position: relative;
  border: 1px solid var(--ak-brand-stroke);
  background: rgba(12,22,38,.55);
  border-radius: var(--ak-brand-radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease, border-color .2s ease;
  will-change: transform, opacity;
}
.ak-brandCard.is-in{
  transform: translateY(0);
  opacity: 1;
}
.ak-brandCard:hover{
  border-color: rgba(120,210,255,.45);
}
.ak-brandCard__top{
  padding: 14px 14px 10px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
}
.ak-brandCard__model{
  margin:0;
  color: var(--ak-brand-text);
  font-weight: 820;
  font-size: 18px;
  letter-spacing: -.01em;
}
.ak-brandCard__tag{
  align-self: flex-start;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(120,210,255,.14);
  border: 1px solid rgba(120,210,255,.24);
  color: rgba(235,246,255,.9);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.ak-brandCard__body{
  padding: 0 14px 14px;
}
.ak-brandCard__p{
  margin: 0 0 12px;
  color: var(--ak-brand-muted);
  line-height: 1.65;
  font-size: 13.8px;
}
.ak-brandCard__specs{
  display:grid;
  gap: 8px;
}
.ak-brandCard__spec{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(120,210,255,.12);
}
.ak-brandCard__k{ color: rgba(200,225,245,.65); font-size: 12.5px; }
.ak-brandCard__v{ color: var(--ak-brand-text); font-weight: 720; font-size: 12.8px; }

/* bottom info blocks */
.ak-brand__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){ .ak-brand__cols{ grid-template-columns: 1fr; } }

.ak-brandBox{
  border: 1px solid var(--ak-brand-stroke);
  background: rgba(12,22,38,.42);
  border-radius: var(--ak-brand-radius);
  padding: 16px;
}
.ak-brandBox h3{
  margin:0 0 10px;
  color: var(--ak-brand-text);
  font-size: 16px;
}
.ak-brandBox p, .ak-brandBox li{
  color: var(--ak-brand-muted);
  line-height: 1.75;
  font-size: 14px;
}
.ak-brandBox ul{ margin: 0; padding-left: 18px; }

.ak-brand__note{
  margin-top: 14px;
  color: rgba(200,225,245,.72);
  font-size: 13.5px;
  line-height: 1.65;
  border-left: 3px solid rgba(120,210,255,.35);
  padding-left: 12px;
}

/* utility */
.ak-hide{ display:none !important; }



/* Fallback: herhangi bir sebeple reveal çalışmazsa kartlar görünür kalsın */
.ak-brandCard { opacity: 1 !important; transform: none !important; }