:root{
  --brand:#0F212C; --brand-2:#0b1a24; --brand-3:#0c1721;
  --line:#183041; --ink:#eaf2f9; --muted:#9db3c5;

  /* ✅ Yeni baz palet */
  --accent:#7c3aed;     /* mor */
  --ok:#12B886;
  --red:#ff3b3b;        /* kırmızı */

  --radius:18px;
  --shadow:0 18px 48px rgba(0,0,0,.35);

  /* eski --gold ismi kalsın ama artık kırmızı/mor bazlı */
  --gold:#ff3b3b;

  /* ✅ Kart boyunu buradan kontrol et */
  --cardMinH: 360px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at -10% -10%, #0a1b26 0%, transparent 70%),
    radial-gradient(900px 500px at 110% -10%, #0a1b26 0%, transparent 60%),
    linear-gradient(180deg, #0a161e 0%, #071119 100%);
}

.prd-wrap{
  width: min(1150px, calc(100% - 40px));
  margin: 0 auto;
}

.prd-hero{ padding: 62px 0 14px; }

.prd-pill{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:rgba(8,28,41,.9);
  border:1px solid rgba(124,58,237,.45); /* mor */
  color:#e9e2ff;
}

.prd-title{
  margin: 12px 0 8px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color:#f5f8fc;
}

.prd-lead{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 80ch;
}

/* =========================
   Controls
========================= */
.prd-controls{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.prd-search{
  flex: 1 1 320px;
  min-width: 220px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(4,15,24,.95);
  border:1px solid rgba(124,58,237,.35); /* mor */
}

.prd-search__icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  border-radius: 6px;
  background:
    radial-gradient(circle at 35% 35%, rgba(124,58,237,.85), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(255,59,59,.45), transparent 60%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.prd-search input{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
}
.prd-search input::placeholder{ color: #6f8192; }

.prd-filters{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(4,15,24,.95);
  border:1px solid rgba(124,58,237,.35); /* mor */
}

.prd-filter{
  appearance:none;
  border:0;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .08s ease, background .18s ease, color .18s ease;
}
.prd-filter:active{ transform: translateY(0); }
.prd-filter.is-active{
  background: linear-gradient(135deg, #7c3aed, #4c1d95); /* mor */
  color:#04111c;
}

.prd-meta{
  font-size: 13px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(4,15,24,.95);
  border:1px solid rgba(124,58,237,.22); /* mor */
}

/* =========================
   Grid
   ✅ Tek grid içinde:
      - Normal kartlar: 3’lü (span 4)
      - Üyelik Tipleri: 4’lü (span 3)
========================= */
.prd-list{ padding: 16px 0 86px; }

/* ✅ 12 kolon sistem */
.prd-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}

/* ✅ default: 3 kart / satır */
.prd-card{
  grid-column: span 4;
}

/* =========================
   Card
========================= */
.prd-card{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid rgba(230,244,255,.08);
  background: radial-gradient(130% 140% at -10% -20%, #16334a 0, #0f212c 35%, #09141d 100%);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;

  min-height: var(--cardMinH);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.prd-card:hover{
  transform: translateY(-2px);
  border-color: rgba(124,58,237,.35); /* mor */
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.prd-top{ padding: 16px 16px 0; }
.prd-top h2{
  margin: 10px 0 7px;
  font-size: 17px;
  color:#fdfefe;
}
.prd-top p{
  margin:0;
  color: var(--muted);
  line-height: 1.52;
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* head: icon + badges */
.prd-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* icon blocks */
.prd-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border:1px solid rgba(230,244,255,.10);
  background: rgba(5,14,22,.92);
  box-shadow: 0 12px 26px rgba(0,0,0,.25) inset;
  position:relative;
  flex: 0 0 auto;
}
.prd-icon::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 35%, rgba(124,58,237,.80), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(255,59,59,.42), transparent 60%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.prd-icon--premium::before{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,59,59,.70), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(124,58,237,.45), transparent 60%),
    rgba(255,255,255,.06);
}
.prd-icon--photo::before{
  background:
    radial-gradient(circle at 35% 35%, rgba(124,58,237,.80), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(18,184,134,.35), transparent 60%),
    rgba(255,255,255,.06);
}
.prd-icon--call::before{
  background:
    radial-gradient(circle at 35% 35%, rgba(18,184,134,.75), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(124,58,237,.42), transparent 60%),
    rgba(255,255,255,.06);
}
.prd-icon--video::before{
  background:
    radial-gradient(circle at 35% 35%, rgba(124,58,237,.72), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255,59,59,.28), transparent 60%),
    rgba(255,255,255,.06);
}
.prd-icon--parsel::before{
  background:
    radial-gradient(circle at 35% 35%, rgba(18,184,134,.55), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255,59,59,.22), transparent 60%),
    rgba(255,255,255,.06);
}
.prd-icon--construction::before{
  background:
    radial-gradient(circle at 35% 35%, rgba(124,58,237,.58), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255,59,59,.22), transparent 60%),
    rgba(255,255,255,.06);
}

/* badges */
.prd-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.prd-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  font-size:11px;
  border-radius:999px;
  background:rgba(8,26,38,.9);
  border:1px solid rgba(24,64,96,.9);
  color:#e9e2ff;
  font-weight:900;
}

/* ✅ mavi -> mor */
.prd-badge--blue{ border-color: rgba(124,58,237,.45); color:#efeaff; }
.prd-badge--green{ border-color: rgba(18,184,134,.45); color:#d7fff2; }
.prd-badge--purple{ border-color: rgba(124,58,237,.45); color:#efeaff; }

/* ✅ gold -> kırmızı */
.prd-badge--gold{ border-color: rgba(255,59,59,.38); color: var(--red); }

/* ✅ hot -> kırmızı + mor */
.prd-badge--hot{
  border-color: rgba(255,59,59,.38);
  color:#04111c;
  background: linear-gradient(135deg, rgba(255,59,59,.95), rgba(124,58,237,.70));
}

/* bullets */
.prd-bullets{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 5px;
  font-size: 12.25px;
  color:#d5e3f0;
}
.prd-bullets li{ line-height: 1.35; }
.prd-bullets li::before{
  content:"•";
  margin-right:6px;
  color: rgba(124,58,237,.95); /* mor */
}

/* actions */
.prd-actions{
  padding: 12px 16px 14px;
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================
   Buttons (Premium + okunur hover) ✅
========================= */
.prd-btn{
  position: relative;
  overflow: hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  letter-spacing: .02em;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,18,27,.95);
  color:#eaf2f9;

  transition: transform .10s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  will-change: transform;
}

.prd-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.prd-btn:active{ transform: translateY(0); }

.prd-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(124,58,237,.18), /* mor ring */
    0 14px 34px rgba(0,0,0,.55);
}

/* ✅ Primary: mor + kırmızı, yazı her zaman okunur */
.prd-btn--primary{
  --p1:#7c3aed;   /* mor */
  --p2:#ff3b3b;   /* kırmızı */
  --p3:#4c1d95;   /* koyu mor */

  color:#f7fbff;
  text-shadow: 0 1px 0 rgba(0,0,0,.30);

  border-color: rgba(255,255,255,.16);

  background: linear-gradient(120deg, var(--p1), var(--p2) 45%, var(--p3));
  background-size: 240% 240%;
  animation: prdGradMove 7.8s ease-in-out infinite;

  box-shadow:
    0 14px 34px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.prd-btn--primary::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(240px 120px at 20% 30%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(240px 120px at 80% 70%, rgba(255,255,255,.10), transparent 65%);
  opacity: .55;
  pointer-events:none;
}

.prd-btn--primary::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width: 55%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: .22;
  animation: prdShine 3.9s ease-in-out infinite;
  pointer-events:none;
}

.prd-btn--primary:hover{
  filter: saturate(1.15) brightness(1.07) contrast(1.03);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 44px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 4px rgba(124,58,237,.12); /* mor glow */
}

/* ghost */
.prd-btn--ghost{
  background: rgba(4,15,24,.92);
  border-color: rgba(124,58,237,.28); /* mor */
  color:#efeaff;
}
.prd-btn--ghost::before{
  content:"";
  position:absolute;
  inset: -1px;
  background:
    radial-gradient(260px 120px at 15% 30%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(260px 120px at 85% 70%, rgba(255,59,59,.10), transparent 60%);
  opacity:.8;
  pointer-events:none;
}

/* disabled */
.prd-btn--disabled{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(234,242,249,.50);
  pointer-events:none;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.prd-btn--disabled::after{ display:none; }
.prd-btn--disabled::before{ display:none; }

/* animations */
@keyframes prdGradMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes prdShine{
  0%, 55% { transform: translateX(-20%) rotate(18deg); opacity: .10; }
  76%     { transform: translateX(120%) rotate(18deg); opacity: .26; }
  100%    { transform: translateX(120%) rotate(18deg); opacity: 0; }
}

/* premium highlight */
.prd-card--premium{
  border-color: rgba(255,59,59,.18); /* kırmızı */
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.prd-card--premium::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background: linear-gradient(130deg, rgba(255,59,59,.20), transparent 45%, rgba(124,58,237,.20));
  opacity:.78;
  mix-blend-mode:screen;
  pointer-events:none;
}

/* soon card */
.prd-card--soon{
  opacity: .92;
  border-style: dashed;
}
.prd-lock{
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: rgba(255,59,59,.14);
  border:1px solid rgba(255,59,59,.18);
  display:inline-block;
}

/* =========================
   Empty state
========================= */
.prd-empty{ margin-top: 16px; }
.prd-empty__card{
  border-radius: var(--radius);
  border: 1px solid rgba(230,244,255,.08);
  background: rgba(5,14,22,.92);
  box-shadow: var(--shadow);
  padding: 16px;
  display:grid;
  gap: 10px;
  max-width: 520px;
}
.prd-empty__icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  border:1px solid rgba(124,58,237,.22);
  background:
    radial-gradient(circle at 35% 35%, rgba(124,58,237,.55), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(255,59,59,.18), transparent 60%),
    rgba(255,255,255,.06);
}
.prd-empty__card h3{ margin:0; color:#f0f4fa; }
.prd-empty__card p{ margin:0; color:var(--muted); line-height:1.55; }

/* =========================
   GROUP TITLES — çizgiler aynı, SOLA KAYAR (seamless) ✅
========================= */
.prd .prd-grid .prd-group-title{
  grid-column: 1 / -1;
  width: 100%;

  appearance: none;
  border: 0;
  outline: none;
  cursor: pointer;
  text-align: left;
  background: none;

  margin: 22px 0 12px;
  padding: 18px 18px 18px 20px;
  min-height: 66px;
  border-radius: 20px;

  /* ✅ default mor+ kırmızı set */
  --g-accent: #7c3aed;
  --g-a: rgba(124,58,237,.26);
  --g-b: rgba(255,59,59,.14);
  --g-c: rgba(124,58,237,.14);
  --g-base: rgba(14,32,44,.78);

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13.5px;
  color: #eaf2f9;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 38px rgba(0,0,0,.34);
}

.prd .prd-grid .prd-group-title.is-spaced{
  margin-top: 28px;
}

/* sol accent bar */
.prd .prd-grid .prd-group-title::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, var(--g-accent), rgba(0,0,0,0));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* ✅ KIRIK YOK: katmanlar repeat etmez, sadece çizgi layer sola kayar */
.prd .prd-grid .prd-group-title::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;

  background-image:
    linear-gradient(115deg, var(--g-a), var(--g-b), var(--g-c), var(--g-a)),
    radial-gradient(720px 220px at 18% 50%, rgba(255,255,255,.12), transparent 60%),
    /* ÇİZGİLER AYNI */
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 10px,
      transparent 10px,
      transparent 28px
    ),
    linear-gradient(180deg, var(--g-base), rgba(8,18,26,.92));

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 320% 320%, 720px 220px, 100% 100%, 100% 100%;
  background-position: 0% 50%, 18% 50%, 0 0, 0 0;

  opacity: .95;
  pointer-events:none;

  animation: prdGroupStripesLeft 4.8s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
}

/* ✅ Seamless döngü: 79.2px ~ 2*(28px*sqrt(2)) */
@keyframes prdGroupStripesLeft{
  from { background-position: 0% 50%, 18% 50%, 0 0, 0 0; }
  to   { background-position: 0% 50%, 18% 50%, -79.2px 0, 0 0; }
}

/* text stays top */
.prd .prd-grid .prd-group-title > *{
  position: relative;
  z-index: 1;
}

.prd-group-title__label{ font-size: 14px; }

.prd-group-title__right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.prd-group-title__count{
  min-width: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  font-weight: 900;
  color: #eaf2f9;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

.prd-group-title__chev{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
}

.prd-group-title__chev svg{
  width: 18px;
  height: 18px;
  display: block;
  stroke: rgba(234,242,249,.92);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
  transform: rotate(0deg);
}

.prd .prd-grid .prd-group-title[aria-expanded="false"] .prd-group-title__chev svg{
  transform: rotate(-90deg);
}

.prd .prd-grid .prd-group-title:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(124,58,237,.18),
    0 16px 38px rgba(0,0,0,.34);
}

/* color variants */
.prd .prd-grid .prd-group-title--paket{
  --g-accent: #7c3aed;
  --g-a: rgba(124,58,237,.30);
  --g-b: rgba(76,29,149,.18);
  --g-c: rgba(255,59,59,.14);
  --g-base: rgba(14,32,44,.80);
}

.prd .prd-grid .prd-group-title--modul{
  --g-accent: #ff3b3b;
  --g-a: rgba(255,59,59,.28);
  --g-b: rgba(124,58,237,.18);
  --g-c: rgba(76,29,149,.12);
  --g-base: rgba(14,32,44,.80);
}

.prd .prd-grid .prd-group-title--soon{
  --g-accent: #ff3b3b;
  --g-a: rgba(255,59,59,.24);
  --g-b: rgba(124,58,237,.16);
  --g-c: rgba(255,255,255,.08);
  --g-base: rgba(14,32,44,.74);
  border-color: rgba(255,59,59,.20);
}

/* ✅ ÜYELİK TİPLERİ başlığına ÖZEL renk (HTML değiştirmeden: data-group="uyelik") */
.prd .prd-grid .prd-group-title[data-group="uyelik"]{
  --g-accent: #12B886; /* yeşil */
  --g-a: rgba(18,184,134,.28);
  --g-b: rgba(124,58,237,.18);
  --g-c: rgba(255,59,59,.12);
  --g-base: rgba(14,32,44,.80);
  border-color: rgba(18,184,134,.22);
}

/* ✅ ÜYELİK TİPLERİ kartları: 4’lü (span 3) — sadece o bölüm */
/* Not: modern tarayıcılar (Chrome/Edge) */
@supports selector(:has(*)){
  .prd-grid > .prd-group-title[data-group="uyelik"]
    ~ .prd-card:has(~ .prd-group-title[data-group="paket"]){
    grid-column: span 3;
  }
}

/* =========================
   Responsive
========================= */
@media (max-width: 1020px){
  /* 2 kart / satır */
  .prd-card{ grid-column: span 6; }

  /* üyelik de 2 kalsın (mobilde 4’lü zaten sığmaz) */
  @supports selector(:has(*)){
    .prd-grid > .prd-group-title[data-group="uyelik"]
      ~ .prd-card:has(~ .prd-group-title[data-group="paket"]){
      grid-column: span 6;
    }
  }
}

@media (max-width: 680px){
  .prd-hero{ padding: 54px 0 12px; }

  /* 1 kart / satır */
  .prd-card{ grid-column: span 12; }

  .prd-controls{ gap: 10px; }
  .prd-filters{ width: 100%; justify-content: space-between; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .prd-btn--primary{ animation: none; }
  .prd-btn--primary::after{ animation: none; }
  .prd-group-title::after{ animation: none; }
}