/* Özellikler sayfası — tüm seçiciler oz- ad alanındadır. */
.oz-bolum {
  padding-bottom: clamp(64px, 9vw, 120px);
}

.oz-liste-baslik { margin-bottom: 24px; font: 500 20px/1.4 var(--font-display); color: var(--baslik-rengi); }

.oz-izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.oz-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  min-width: 0;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid var(--kenar-rengi);
  border-radius: 30px;
  background: var(--kart-zemin-alt);
  box-shadow: var(--kart-golge);
  isolation: isolate;
}

.oz-kart-plan,
.oz-kart-anlatim {
  grid-column: span 7;
}

.oz-kart-yanlis,
.oz-kart-kutuphane {
  grid-column: span 5;
}

.oz-kart::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  border: 1px solid var(--kenar-rengi);
  border-radius: 50%;
  box-shadow: 0 0 0 44px var(--kart-zemin-alt), 0 0 0 45px var(--kenar-rengi);
  opacity: .8;
  pointer-events: none;
}

.oz-kart:nth-child(odd)::before { right: -130px; top: -176px; }
.oz-kart:nth-child(even)::before { left: -148px; bottom: -176px; }

.oz-metin {
  position: relative;
  z-index: 3;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3.2vw, 42px) 16px;
}

.oz-durum {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 15px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--mor-vurgu) 25%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mor-zemin-yumusak) 75%, transparent);
  color: var(--mor-vurgu);
  font: 700 10px/1 var(--font-body);
  letter-spacing: .075em;
  text-transform: uppercase;
}

.oz-kart h3 {
  max-width: 20ch;
  color: var(--baslik-rengi);
  font: 400 clamp(26px, 2.6vw, 38px)/1.08 var(--font-display);
  letter-spacing: -.025em;
}

.oz-kart .oz-metin > p {
  max-width: 56ch;
  margin-top: 15px;
  color: var(--ikincil-metin);
  font-size: 14px;
  line-height: 1.68;
}

.oz-plan-gorsel,
.oz-soru-gorsel,
.oz-mini-gorsel,
.oz-tekrar-gorsel,
.oz-katman-gorsel,
.oz-kutuphane-gorsel {
  position: relative;
  min-width: 0;
  margin: auto clamp(20px, 3vw, 40px) 28px;
}

.oz-plan-gorsel,
.oz-soru-gorsel {
  padding: 22px;
  border: 1px solid var(--kenar-rengi);
  border-radius: 22px;
  background: var(--kart-zemin);
  box-shadow: var(--tile-golge);
}

.oz-plan-ust,
.oz-soru-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ikincil-metin);
  font-size: 11px;
}

.oz-plan-ust strong,
.oz-soru-baslik b { color: var(--baslik-rengi); font-size: 12px; }

.oz-gunler {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 18px 0;
}

.oz-gun {
  display: grid;
  min-width: 0;
  min-height: 62px;
  place-content: center;
  gap: 4px;
  border: 1px solid var(--kenar-rengi);
  border-radius: 13px;
  color: var(--ikincil-metin);
  text-align: center;
}

.oz-gun b { color: var(--baslik-rengi); font-size: 11px; }
.oz-gun i { overflow: hidden; font: 600 9px/1 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.oz-gun-aktif { border-color: color-mix(in srgb, var(--purple) 42%, transparent); background: var(--purple); color: var(--card); }
.oz-gun-aktif b { color: var(--card); }

.oz-plan-kart {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--yellow) 22%, var(--kart-zemin));
  color: var(--baslik-rengi);
}

.oz-plan-kart > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.oz-plan-kart small { color: var(--ikincil-metin); font-size: 9px; }
.oz-plan-kart strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.oz-plan-kart > b { margin-left: auto; font-size: 11px; white-space: nowrap; }
.oz-plan-nokta { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 25%, transparent); }

.oz-ornek-not {
  margin-top: 10px;
  color: var(--ikincil-metin);
  font: 700 9px/1 var(--font-body);
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
}

.oz-soru-secenekler { display: flex; gap: 8px; margin: 18px 0; }
.oz-soru-secenekler span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--kenar-rengi); border-radius: 11px; color: var(--baslik-rengi); font: 700 11px/1 var(--font-body); }
.oz-soru-secenekler .oz-secim { background: color-mix(in srgb, var(--yellow) 34%, var(--kart-zemin)); }
.oz-soru-secenekler .oz-dogru { border-color: color-mix(in srgb, var(--green) 60%, var(--kenar-rengi)); background: color-mix(in srgb, var(--green) 20%, var(--kart-zemin)); }
.oz-aciklama { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--blue) 10%, var(--kart-zemin)); color: var(--ikincil-metin); }
.oz-aciklama p { font-size: 10px; line-height: 1.5; }
.oz-aciklama strong { display: block; margin-bottom: 2px; color: var(--baslik-rengi); font-size: 11px; }
.oz-aciklama-ikon { color: var(--blue); font-weight: 700; }

.oz-mini-gorsel { display: flex; align-items: center; gap: 22px; padding: 20px 20px 34px; border-radius: 22px; background: color-mix(in srgb, var(--green) 18%, var(--kart-zemin)); }
.oz-mini-halka { display: grid; flex: 0 0 104px; width: 104px; height: 104px; place-content: center; border: 11px solid color-mix(in srgb, var(--green) 55%, var(--kart-zemin)); border-radius: 50%; background: var(--kart-zemin); color: var(--baslik-rengi); text-align: center; box-shadow: var(--tile-golge); }
.oz-mini-halka strong { font: 500 25px/1 var(--font-display); }
.oz-mini-halka span { margin-top: 4px; color: var(--ikincil-metin); font-size: 9px; }
.oz-mini-bilgi { display: grid; gap: 5px; min-width: 0; }
.oz-mini-bilgi span { color: var(--ikincil-metin); font-size: 10px; }
.oz-mini-bilgi b { max-width: 17ch; color: var(--baslik-rengi); font: 500 17px/1.25 var(--font-display); }
.oz-mini-gorsel .oz-ornek-not { position: absolute; right: 18px; bottom: 12px; }

.oz-tekrar-gorsel { height: 164px; }
.oz-tekrar-gorsel svg { position: absolute; inset: 15px 0 0; width: 100%; height: 112px; overflow: visible; }
.oz-tekrar-gorsel path { fill: none; stroke: color-mix(in srgb, var(--blue) 45%, var(--kenar-rengi)); stroke-width: 2; stroke-dasharray: 5 6; }
.oz-tekrar-gorsel circle { fill: var(--blue); }
.oz-tekrar-kart { position: absolute; z-index: 2; padding: 10px 13px; border: 1px solid var(--kenar-rengi); border-radius: var(--radius-pill); background: var(--kart-zemin); box-shadow: var(--kart-golge); color: var(--baslik-rengi); font: 700 10px/1 var(--font-body); }
.oz-tekrar-bir { left: 0; bottom: 22px; }
.oz-tekrar-iki { left: 50%; top: 7px; transform: translateX(-50%); }
.oz-tekrar-uc { right: 0; bottom: 30px; background: color-mix(in srgb, var(--blue) 14%, var(--kart-zemin)); }

.oz-katman-gorsel { height: 218px; }
.oz-katman { position: absolute; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; width: 78%; padding: 15px 17px; border: 1px solid var(--kenar-rengi); border-radius: 16px; background: var(--kart-zemin); box-shadow: var(--tile-golge); color: var(--baslik-rengi); }
.oz-katman span { grid-row: 1 / span 2; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: var(--baslik-rengi); font: 700 10px/1 var(--font-body); }
.oz-katman b { font-size: 12px; }
.oz-katman i { margin-top: 3px; color: var(--ikincil-metin); font: 500 9px/1.3 var(--font-body); }
.oz-katman-oz { left: 0; top: 0; transform: rotate(-2deg); }
.oz-katman-oz span { background: var(--yellow); }
.oz-katman-ana { right: 0; top: 62px; transform: rotate(2deg); }
.oz-katman-ana span { background: color-mix(in srgb, var(--blue) 28%, var(--kart-zemin)); }
.oz-katman-tuzak { left: 8%; top: 126px; transform: rotate(-1deg); }
.oz-katman-tuzak span { background: color-mix(in srgb, var(--green) 46%, var(--kart-zemin)); }
.oz-katman-gorsel .oz-ornek-not { position: absolute; right: 0; bottom: 0; }

.oz-kutuphane-gorsel { height: 220px; }
.oz-dosya { position: absolute; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; width: 78%; padding: 16px; border: 1px solid var(--kenar-rengi); border-radius: 16px; background: var(--kart-zemin); box-shadow: var(--tile-golge); color: var(--baslik-rengi); }
.oz-dosya span { grid-row: 1 / span 2; align-self: center; padding: 8px 7px; border-radius: 9px; background: color-mix(in srgb, var(--purple) 14%, var(--kart-zemin)); color: var(--mor-vurgu); font: 700 8px/1 var(--font-body); }
.oz-dosya b { font-size: 11px; }
.oz-dosya i { margin-top: 4px; color: var(--ikincil-metin); font: 500 9px/1 var(--font-body); }
.oz-dosya-bir { left: 0; top: 4px; transform: rotate(-3deg); }
.oz-dosya-iki { right: 0; top: 66px; transform: rotate(3deg); }
.oz-eslesme { position: absolute; left: 8%; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--kenar-rengi)); border-radius: var(--radius-pill); background: var(--kart-zemin); box-shadow: var(--kart-golge); color: var(--baslik-rengi); font: 700 9px/1 var(--font-body); }
.oz-eslesme span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--green); color: var(--navy); }
.oz-kutuphane-gorsel .oz-ornek-not { position: absolute; right: 0; bottom: 0; }

@media (max-width: 900px) {
  .oz-kart,
  .oz-kart-plan,
  .oz-kart-anlatim,
  .oz-kart-yanlis,
  .oz-kart-kutuphane { grid-column: span 12; min-height: 520px; }
}

@media (max-width: 560px) {
  .oz-izgara { gap: 14px; }
  .oz-kart,
  .oz-kart-plan,
  .oz-kart-anlatim,
  .oz-kart-yanlis,
  .oz-kart-kutuphane { min-height: 530px; border-radius: 24px; }
  .oz-metin { padding: 24px 22px 12px; }
  .oz-plan-gorsel,
  .oz-soru-gorsel,
  .oz-mini-gorsel,
  .oz-tekrar-gorsel,
  .oz-katman-gorsel,
  .oz-kutuphane-gorsel { margin: auto 18px 22px; }
  .oz-plan-gorsel,
  .oz-soru-gorsel { padding: 17px; }
  .oz-gun i { font-size: 8px; }
  .oz-mini-gorsel { gap: 14px; padding: 16px 16px 34px; }
  .oz-mini-halka { flex-basis: 88px; width: 88px; height: 88px; border-width: 9px; }
  .oz-katman,
  .oz-dosya { width: 86%; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .oz-kart { transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
  .oz-kart:hover { transform: translateY(-3px); box-shadow: var(--tile-golge); }
}