/* OKÜ Sosyal Transkript — ön yüz bileşenleri. HiStudy teması değiştirilmez; bu dosya en son yüklenir.
   Koyu tema: gövde `.active-dark-mode` sınıfını alır. */

:root {
  --oku-lacivert: #0e3a6e;
  --oku-mavi: #1b57a0;
  --oku-altin: #c8912a;
  --oku-kart: #ffffff;
  --oku-kenar: #e6e3f1;
  --oku-yumusak: #f5f7fb;
  --oku-metin: #192335;
  --oku-soluk: #6b7385;
}

.active-dark-mode {
  --oku-kart: #273041;
  --oku-kenar: rgba(255, 255, 255, 0.1);
  --oku-yumusak: #232d40;
  --oku-metin: #ffffff;
  --oku-soluk: #c5ccd8;
}

/* ── Menü: aktif öğe ───────────────────────────────────────────────── */
.mainmenu-nav .mainmenu > li.oku-aktif > a {
  color: var(--color-primary);
}

.header-right .rbt-btn-wrapper {
  margin-inline-start: 14px;
}

.oku-genis-kap {
  max-inline-size: 1560px;
  padding-inline: 30px;
}

/* ── Kulüp süzgeci ─────────────────────────────────────────────────── */
.oku-kulup-suzgec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  margin-block-end: 36px;
}

.oku-kategori-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.oku-kategori-cipler button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--oku-kenar);
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s;
}

.oku-kategori-cipler button span {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 100px;
  background: var(--oku-yumusak);
  color: var(--oku-soluk);
}

.oku-kategori-cipler button .nokta {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--kat, var(--color-primary));
}

.oku-kategori-cipler button:hover,
.oku-kategori-cipler button.aktif {
  border-color: var(--kat, var(--color-primary));
  background: var(--kat, var(--color-primary));
  color: #fff;
}

.oku-kategori-cipler button.aktif .nokta {
  background: #fff;
}

.oku-kategori-cipler button.aktif span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.oku-suzgec-sag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.oku-arama-kutu {
  position: relative;
}

.oku-arama-kutu i {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--oku-soluk);
}

.oku-arama-kutu input,
.oku-suzgec-sag select {
  block-size: 46px;
  border-radius: 10px;
  border: 1px solid var(--oku-kenar);
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 15px;
}

.oku-arama-kutu input {
  inline-size: 290px;
  padding-inline: 40px 14px;
}

.oku-suzgec-sag select {
  padding-inline: 12px 30px;
  inline-size: auto;
}

.oku-onay-kutusu {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: 15px;
  color: var(--oku-metin);
  cursor: pointer;
}

.oku-onay-kutusu input {
  inline-size: 18px !important;
  block-size: 18px !important;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
  accent-color: var(--color-primary);
}

@media (max-width: 767px) {
  .oku-arama-kutu,
  .oku-arama-kutu input,
  .oku-suzgec-sag select {
    inline-size: 100%;
  }

  .oku-suzgec-sag {
    inline-size: 100%;
  }
}

/* ── Kulüp kartı ───────────────────────────────────────────────────── */
.oku-kulup-karti {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: 0 !important;
  overflow: hidden;
}

.oku-kulup-ust {
  position: relative;
  display: grid !important;
  place-items: center;
  block-size: 150px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.55), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--kat) 14%, #fff) 0%, color-mix(in srgb, var(--kat) 30%, #fff) 100%);
}

.active-dark-mode .oku-kulup-ust {
  background: linear-gradient(135deg, color-mix(in srgb, var(--kat) 30%, #1b2233) 0%, color-mix(in srgb, var(--kat) 55%, #1b2233) 100%);
}

.oku-kulup-logo {
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 10px 28px rgba(25, 35, 53, 0.18);
}

.oku-kulup-monogram {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

.oku-kulup-kategori {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--kat);
}

.oku-kulup-onecikan {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--oku-altin);
}

.oku-kulup-karti .rbt-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
}

.oku-kulup-karti .rbt-card-title {
  font-size: 19px;
  line-height: 1.35;
  margin-block-end: 10px;
}

.oku-kulup-karti .rbt-meta {
  margin-block-end: 10px;
}

.oku-kulup-karti .rbt-card-text {
  font-size: 15px;
  line-height: 1.6;
  margin-block-end: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oku-kulup-kisiler {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 0 0;
  border-block-start: 1px dashed var(--oku-kenar);
}

.oku-kulup-kisiler li {
  display: grid;
  grid-template-columns: 18px 74px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
}

.oku-kulup-kisiler li.eposta {
  grid-template-columns: 18px minmax(0, 1fr);
}

.oku-kulup-kisiler li.eposta .deger {
  font-size: 13px;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oku-kulup-kisiler i {
  color: var(--color-primary);
}

.oku-kulup-kisiler .etiket {
  color: var(--oku-soluk);
  font-size: 13px;
  white-space: nowrap;
}

.oku-kulup-kisiler .deger {
  color: var(--oku-metin);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.oku-kulup-kisiler a.deger:hover {
  color: var(--color-primary);
}

.oku-kulup-karti .rbt-card-bottom {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.oku-uyelik-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}

.oku-uyelik-durum.acik {
  color: #1d8a45;
  background: rgba(62, 183, 94, 0.12);
}

.oku-uyelik-durum.kapali {
  color: #a15c12;
  background: rgba(255, 143, 60, 0.14);
}

.oku-bos-liste {
  text-align: center;
  padding: 50px 20px;
  border: 1px dashed var(--oku-kenar);
  border-radius: 16px;
  background: var(--oku-kart);
}

.oku-bos-liste i {
  font-size: 34px;
  color: var(--oku-soluk);
}

.oku-liste-not {
  text-align: center;
  margin-block-start: 26px;
  color: var(--oku-soluk);
}

/* ── Süreç adımları ────────────────────────────────────────────────── */
.oku-adim-karti {
  position: relative;
  block-size: 100%;
  padding: 34px 28px 30px;
  border-radius: 18px;
  background: var(--oku-kart);
  border: 1px solid var(--oku-kenar);
  box-shadow: 0 10px 34px rgba(25, 35, 53, 0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}

.oku-adim-karti:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(25, 35, 53, 0.12);
}

.oku-adim-karti .sira {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 24px;
  font-size: 40px;
  font-weight: 800;
  color: var(--oku-kenar);
  line-height: 1;
}

.oku-adim-karti .ikon {
  display: grid;
  place-items: center;
  inline-size: 62px;
  block-size: 62px;
  border-radius: 16px;
  font-size: 26px;
  margin-block-end: 22px;
}

.oku-adim-karti.renk-primary .ikon { color: var(--color-primary); background: rgba(47, 87, 239, 0.1); }
.oku-adim-karti.renk-secondary .ikon { color: var(--color-secondary); background: rgba(185, 102, 231, 0.12); }
.oku-adim-karti.renk-pink .ikon { color: var(--color-pink); background: rgba(219, 112, 147, 0.12); }
.oku-adim-karti.renk-coral .ikon { color: #d9774f; background: rgba(233, 150, 122, 0.15); }

.oku-adim-karti .baslik {
  margin-block-end: 10px;
}

.oku-adim-karti .metin {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* ── Belge doğrulama ───────────────────────────────────────────────── */
.oku-dogrulama-formu .oku-dogrulama-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.oku-dogrulama-formu .oku-dogrulama-satir > i {
  font-size: 20px;
  color: var(--oku-lacivert);
}

.oku-dogrulama-formu input {
  flex: 1;
  min-inline-size: 0;
  border: 0 !important;
  block-size: 52px;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #192335;
  background: transparent;
  box-shadow: none !important;
}

.oku-dogrulama-formu.buyuk input {
  font-size: 19px;
}

.oku-dogrula-kutu .oku-hata {
  background: #fff;
}

@media (max-width: 575px) {
  .oku-dogrulama-formu .oku-dogrulama-satir {
    flex-wrap: wrap;
    padding: 12px;
  }

  .oku-dogrulama-formu .rbt-btn {
    inline-size: 100%;
  }
}

.oku-dogrulama-sonuc {
  padding: 40px;
  border-radius: 20px;
  background: var(--oku-kart);
  border: 1px solid var(--oku-kenar);
  box-shadow: 0 16px 46px rgba(25, 35, 53, 0.08);
}

.oku-dogrulama-sonuc .rozet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 100px;
  font-weight: 700;
  margin-block-end: 20px;
}

.oku-dogrulama-sonuc .rozet.gecerli { color: #1d8a45; background: rgba(62, 183, 94, 0.12); }
.oku-dogrulama-sonuc .rozet.gecersiz { color: #c0262b; background: rgba(255, 0, 3, 0.08); }
.oku-dogrulama-sonuc .rozet.iptal { color: #a15c12; background: rgba(255, 143, 60, 0.14); }

.oku-bilgi-tablo {
  inline-size: 100%;
  margin-block: 10px 24px;
  border-collapse: collapse;
}

.oku-bilgi-tablo th,
.oku-bilgi-tablo td {
  padding: 12px 14px;
  border-block-end: 1px solid var(--oku-kenar);
  font-size: 15px;
  text-align: start;
}

.oku-bilgi-tablo th {
  inline-size: 38%;
  color: var(--oku-soluk);
  font-weight: 500;
}

.oku-bilgi-tablo td {
  color: var(--oku-metin);
  font-weight: 600;
}

/* ── Kulüp detay ───────────────────────────────────────────────────── */
.oku-kulup-kapak {
  position: relative;
  padding: 40px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(120deg, color-mix(in srgb, var(--kat) 85%, #0e3a6e) 0%, var(--kat) 100%);
  color: #fff;
}

.oku-kulup-kapak.gorselli {
  background-size: cover;
  background-position: center;
}

.oku-kulup-kapak .satir {
  display: flex;
  align-items: center;
  gap: 26px;
  position: relative;
}

.oku-kulup-kapak h1 {
  color: #fff !important;
  margin: 8px 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
}

.oku-kulup-kapak p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  font-size: 17px;
  max-inline-size: 760px;
}

.oku-kulup-kapak .kategori {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
}

.oku-kulup-kapak .istatistik {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 18px;
}

.oku-kulup-kapak .istatistik span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 767px) {
  .oku-kulup-kapak {
    padding: 26px 20px;
  }

  .oku-kulup-kapak .satir {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.oku-yan-kart {
  padding: 26px;
  border-radius: 18px;
  background: var(--oku-kart);
  border: 1px solid var(--oku-kenar);
  box-shadow: 0 10px 34px rgba(25, 35, 53, 0.06);
  margin-block-end: 24px;
}

.oku-yan-kart h5 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 18px;
}

.oku-yan-kart h5 i {
  color: var(--color-primary);
}

.oku-kisi {
  display: flex;
  gap: 14px;
  padding-block: 12px;
  border-block-end: 1px dashed var(--oku-kenar);
}

.oku-kisi:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.oku-kisi .avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(47, 87, 239, 0.1);
}

.oku-kisi .rol {
  font-size: 13px;
  color: var(--oku-soluk);
}

.oku-kisi .ad {
  display: block;
  font-weight: 600;
  color: var(--oku-metin);
}

.oku-kisi a {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.oku-icerik-metin {
  font-size: 17px;
  line-height: 1.8;
}

.oku-icerik-metin p {
  margin-block-end: 16px;
}

.oku-sosyal-baglantilar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.oku-sosyal-baglantilar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--oku-kenar);
  color: var(--oku-metin);
  font-size: 14px;
}

.oku-sosyal-baglantilar a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Üyelik kutusu ─────────────────────────────────────────────────── */
.oku-uyelik-kutusu {
  padding: 28px;
  border-radius: 18px;
  background: var(--oku-kart);
  border: 2px solid color-mix(in srgb, var(--kat, #2f57ef) 40%, transparent);
  box-shadow: 0 16px 44px rgba(25, 35, 53, 0.1);
  margin-block-end: 24px;
}

.oku-uyelik-kutusu h4 {
  margin-block-end: 8px;
}

.oku-uyelik-kutusu .durum-satir {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-block: 14px;
  font-size: 15px;
}

.oku-uyelik-kutusu .durum-satir i {
  font-size: 20px;
  margin-block-start: 2px;
}

.oku-uyelik-kutusu .durum-satir.bilgi { background: rgba(47, 87, 239, 0.08); color: var(--oku-metin); }
.oku-uyelik-kutusu .durum-satir.basari { background: rgba(62, 183, 94, 0.12); color: #1d6f3a; }
.oku-uyelik-kutusu .durum-satir.uyari { background: rgba(255, 143, 60, 0.14); color: #8a4d0e; }
.oku-uyelik-kutusu .durum-satir.hata { background: rgba(255, 0, 3, 0.07); color: #a51f24; }

.active-dark-mode .oku-uyelik-kutusu .durum-satir.basari { color: #8be3a8; }
.active-dark-mode .oku-uyelik-kutusu .durum-satir.uyari { color: #ffc58a; }
.active-dark-mode .oku-uyelik-kutusu .durum-satir.hata { color: #ff9a9d; }

.oku-uyelik-kutusu textarea {
  min-block-size: 96px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--oku-kenar);
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 15px;
}

.oku-uyelik-kutusu .kvkk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--oku-soluk);
  margin-block: 12px;
}

.oku-uyelik-kutusu .kvkk input {
  flex: none;
  inline-size: 18px !important;
  block-size: 18px !important;
  margin-block-start: 2px;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
  accent-color: var(--color-primary);
}

.oku-bal-kupu {
  position: absolute !important;
  inset-inline-start: -10000px !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
}

/* ── Güvenlik kodu ─────────────────────────────────────────────────── */
.oku-guvenlik-kodu {
  margin-block: 12px 4px;
}

.oku-kod-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 14px;
}

.oku-kod-yenile {
  display: grid !important;
  place-items: center;
  inline-size: 44px !important;
  block-size: 44px !important;
  border-radius: 50%;
  border: 1px solid var(--oku-kenar);
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 18px;
}

.oku-kod-ipucu {
  display: block;
  margin-block-start: 6px;
  font-size: 13px;
  color: var(--oku-soluk);
}

/* ── Giriş sekmeleri ───────────────────────────────────────────────── */
.oku-giris-sekmeler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  margin-block-end: 26px;
  border-radius: 14px;
  background: var(--oku-yumusak);
}

.oku-giris-sekmeler button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--oku-soluk);
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
}

.oku-giris-sekmeler button.aktif {
  background: var(--oku-kart);
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(25, 35, 53, 0.1);
}

/* ── Genel ─────────────────────────────────────────────────────────── */
.oku-hata {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 0, 3, 0.07);
  color: #b3262b;
  font-size: 15px;
}

.oku-basari {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(62, 183, 94, 0.12);
  color: #1d6f3a;
  font-size: 15px;
}

.rbt-page-banner-wrapper .description {
  margin-block-start: 12px;
  max-inline-size: 820px;
}

.oku-metin-sayfa h2 {
  font-size: 26px;
  margin-block: 34px 14px;
}

.oku-metin-sayfa p,
.oku-metin-sayfa li {
  font-size: 17px;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .oku-adim-karti,
  .oku-kategori-cipler button {
    transition: none;
  }

  .oku-adim-karti:hover {
    transform: none;
  }
}


/* ════════════ Online Course (demo 10) düzeni — 2026-09-26 ════════════ */

/* Hero görseli + etiket */
.oku-hero-kare {
  position: relative;
}

.oku-hero-kare img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(25, 35, 53, 0.18);
}

.oku-hero-etiket {
  position: absolute;
  inset-inline-start: -24px;
  inset-block-end: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--oku-kart);
  box-shadow: 0 14px 40px rgba(25, 35, 53, 0.16);
}

.oku-hero-etiket i {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.oku-hero-etiket strong {
  display: block;
  font-size: 16px;
  color: var(--oku-metin);
}

.oku-hero-etiket span {
  font-size: 13px;
  color: var(--oku-soluk);
}

@media (max-width: 991px) {
  .oku-hero-etiket {
    inset-inline-start: 12px;
    inset-block-end: 12px;
  }
}

/* Kayan kulüp şeridi: içerik iki kez basılır, %-50 kayar (kesintisiz). Üzerine gelince durur. */
.oku-kayan-sira {
  display: flex;
  inline-size: max-content;
  animation: okuKaydirSol 240s linear infinite;
  will-change: transform;
}

.oku-kayan-sira.sag {
  animation-name: okuKaydirSag;
}

.oku-kayan-sira:hover,
.oku-kayan-sira:focus-within {
  animation-play-state: paused;
}

.oku-kayan-oge {
  flex: none;
}

.oku-kayan-oge .single-column-20 {
  inline-size: 440px;
  padding: 0 15px;
}

@keyframes okuKaydirSol {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes okuKaydirSag {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 767px) {
  .oku-kayan-oge .single-column-20 {
    inline-size: 310px;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oku-kayan-sira {
    animation: none;
  }

  .oku-kayan-alan .scroll-animation-wrapper {
    overflow-x: auto;
  }
}

/* Kayan kart (temanın yorum kartı düzeni) */
.oku-akis-karti .inner {
  padding: 30px !important;
  block-size: 100%;
}

.oku-akis-karti .clint-info-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block-end: 16px;
}

.oku-akis-karti .thumb {
  flex: none;
  inline-size: 70px;
  block-size: 70px;
  display: block;
}

.oku-akis-karti .thumb .oku-kulup-logo {
  border-width: 3px;
  box-shadow: 0 8px 22px rgba(25, 35, 53, 0.14);
}

.oku-akis-karti .client-info .title {
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 4px;
}

.oku-akis-karti .client-info span {
  font-size: 14px;
  font-weight: 600;
  color: var(--kat, var(--color-primary));
}

.oku-akis-karti .client-info span i {
  font-style: normal;
  color: var(--oku-soluk);
  font-weight: 500;
}

.oku-akis-karti .description .subtitle-3 {
  font-size: 15px;
  line-height: 1.6;
  margin-block-end: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 48px;
}

.oku-akis-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-start: 16px;
  border-block-start: 1px dashed var(--oku-kenar);
}

.oku-akis-uye {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--oku-soluk);
}

.oku-akis-uye strong {
  color: var(--oku-metin);
}

.oku-akis-uye i {
  color: var(--color-primary);
}

/* Kategori kutusu simgesi (tema görsel simgesi yerine) */
.oku-kategori-ikon {
  display: grid !important;
  place-items: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  margin-inline: auto;
  font-size: 24px;
  color: #fff;
  background: var(--kat, var(--color-primary)) !important;
  border: 4px solid #fff;
  box-shadow: 0 10px 24px rgba(25, 35, 53, 0.16);
}

.oku-kategori-yedek {
  display: block;
  inline-size: 100%;
  aspect-ratio: 15 / 11;
  border-radius: 10px;
}

.rbt-cat-box.variation-2 .thumbnail img {
  aspect-ratio: 15 / 11;
  object-fit: cover;
}

/* Yatay kulüp kartı (card-list-2) */
.oku-kulup-yatay .rbt-card-img {
  flex: 0 0 38%;
}

.oku-kulup-yatay .rbt-card-img a.oku-kulup-ust {
  block-size: 100%;
  min-block-size: 220px;
  border-radius: 10px;
}

@media (max-width: 575px) {
  .oku-kulup-yatay .rbt-card-img a.oku-kulup-ust {
    min-block-size: 150px;
  }
}

/* Akademik takvim — etkinlik kartı; görsel yerine tarih kutusu */
.oku-tarih-kutu {
  display: grid;
  place-items: center;
  align-content: center;
  inline-size: 150px;
  block-size: 150px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  text-align: center;
}

.oku-takvim-kart.bitti .oku-tarih-kutu { background: linear-gradient(135deg, #6b7385 0%, #9aa3b5 100%); }
.oku-takvim-kart.suruyor .oku-tarih-kutu { background: linear-gradient(135deg, #1f9d55 0%, #3eb75e 100%); }

.oku-tarih-kutu .gun { font-size: 44px; font-weight: 800; line-height: 1; }
.oku-tarih-kutu .ay { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.oku-tarih-kutu .yil { font-size: 13px; opacity: 0.85; }

.oku-takvim-kart .rbt-card-title { font-size: 20px; margin-block-end: 4px; }
.oku-takvim-tip { font-size: 14px; margin-block-end: 14px; }

.oku-takvim-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  background: var(--oku-yumusak);
  color: var(--oku-soluk);
}

.oku-takvim-durum.suruyor { color: #1d8a45; background: rgba(62, 183, 94, 0.12); }
.oku-takvim-durum.yakin { color: #a15c12; background: rgba(255, 143, 60, 0.14); }

@media (max-width: 575px) {
  .oku-tarih-kutu { inline-size: 100%; block-size: 110px; }
}

/* Tanıtım görseli */
.oku-tanitim-gorsel img {
  display: block;
  inline-size: 100%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 11 / 8;
  box-shadow: 0 24px 60px rgba(25, 35, 53, 0.14);
}

/* SSS kartı */
.oku-sss-kart .accordion-item {
  margin-block-end: 12px;
}

/* Kulüp sekmeleri: dar ekranda alt satıra kayar */
@media (max-width: 991px) {
  #okuKulupSekme {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}

/* Başlıktaki kulüp arama kutusu */
.rbt-search-with-category .search-field input {
  min-inline-size: 280px;
}

/* Kayan kartta temanın alıntı işareti gösterilmez (yorum değil, kulüp kartı) */
.oku-akis-karti .inner::before,
.oku-akis-karti .inner::after {
  display: none !important;
}

/* Kategori okları: kaydırıcının iki yanında, üzerine gelince görünür */
.oku-kat-sarici .rbt-swiper-arrow.rbt-arrow-left {
  inset-inline-start: -10px;
}

.oku-kat-sarici .rbt-swiper-arrow.rbt-arrow-right {
  inset-inline-end: -10px;
}

.oku-kat-sarici:hover .rbt-swiper-arrow {
  opacity: 1;
}

.oku-kat-sarici .rbt-swiper-arrow.swiper-button-lock {
  display: none;
}

/* Yatay kulüp kartı: görsel solda, içerik sağda */
.oku-kulup-karti.oku-kulup-yatay {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.oku-kulup-yatay .rbt-card-body {
  flex: 1;
  min-inline-size: 0;
}

@media (max-width: 575px) {
  .oku-kulup-karti.oku-kulup-yatay {
    flex-direction: column;
  }

  .oku-kulup-yatay .rbt-card-img {
    flex-basis: auto;
  }
}

/* Kayan kartlar aynı sırada eşit yükseklikte; «Üye Ol» satırı hizalı */
.oku-kayan-oge,
.oku-kayan-oge .single-column-20,
.oku-akis-karti {
  block-size: 100%;
}

.oku-akis-karti .inner {
  display: flex;
  flex-direction: column;
}

.oku-akis-karti .description {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.oku-akis-karti .oku-akis-alt {
  margin-block-start: auto;
}

/* Dar ekranda kategori okları kenardan taşmasın */
@media (max-width: 767px) {
  .oku-kat-sarici .rbt-swiper-arrow.rbt-arrow-left { inset-inline-start: 4px; }
  .oku-kat-sarici .rbt-swiper-arrow.rbt-arrow-right { inset-inline-end: 4px; }
  .oku-kat-sarici .rbt-swiper-arrow { opacity: 1; }
}

/* ════════════ Language Academy (demo 08) düzeni + yeni proje adı — 2026-09-27 ════════════ */

/* Logo: «Sosyal Transkript» */
.oku-logo-yazi .ust {
  font-size: 22px !important;
  line-height: 1.15 !important;
  text-align: start !important;
  letter-spacing: -0.1px;
}

.oku-logo-yazi .alt {
  font-size: 10.5px !important;
  margin-block-start: 3px;
}

@media (max-width: 575px) {
  .oku-logo-yazi .ust { font-size: 18px !important; }
  .oku-logo-yazi .alt { font-size: 9px !important; }
}

/* Üç sekmeli giriş */
.oku-giris-sekmeler.uc {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 480px) {
  .oku-giris-sekmeler.uc button {
    font-size: 13px;
    padding-inline: 4px;
  }
}

/* Üst şerit giriş bağlantıları ve mobil menü girişleri */
.oku-giris-baglantilari li a {
  font-weight: 600;
}

.oku-mobil-giris {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
}

.oku-mobil-giris a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--oku-kenar);
  font-weight: 600;
}

/* Duyuru şeridi */
.oku-duyuru-seridi {
  padding: 8px 0;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Düz (şeffaf olmayan) iç sayfa başlığı */
/* İç sayfalar: demo 08 header'ı temada `position: absolute` — iç sayfada içeriğin üstüne binmesin, akışta yer kaplasın. */
.rbt-header.rbt-header-8.oku-header-duz {
  position: relative;
  /* İç sayfa başlık bandı (bg-gradient-1) beyazdan başlar; menü alanı da beyaz → kesintisiz geçiş */
  background: var(--color-white);
  padding-block-end: 14px;
}

/* ════════════ Demo 08 ana sayfa bölümleri — 2026-09-27 ════════════ */

/* Hero: kulüp avatarları (monogram) */
.rbt-banner-7 .profile-share .avatar.oku-avatar-harf {
  display: inline-grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(14, 58, 110, 0.18);
}

.rbt-banner-7 .profile-share .avatar.oku-avatar-harf + .avatar { margin-inline-start: -14px; }

/* Hero: fotoğraf kolajı (büyük kare + taşan dikey kare; banner-7 850px yüksekliğine sığar) */
.oku-hero-kolaj { position: relative; padding-block-end: 70px; }
.oku-hero-kolaj .kolaj { position: relative; }
.oku-hero-kolaj .kolaj img { display: block; object-fit: cover; border-radius: 20px; box-shadow: 0 18px 40px rgba(14, 58, 110, 0.16); }
.oku-hero-kolaj .kolaj .k1 { inline-size: 88%; margin-inline-start: auto; aspect-ratio: 4 / 3; border: 6px solid #fff; }
.oku-hero-kolaj .kolaj .k2 { position: absolute; inset-inline-start: 0; inset-block-end: -70px; inline-size: 34%; aspect-ratio: 64 / 76; border: 6px solid #fff; }

.rbt-banner-7 .oku-hero-kolaj .card-info.oku-siradaki {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: -10px;
  inset-block-end: 0;
  inset-block-start: auto;
  display: block;
  max-inline-size: 320px;
  z-index: 2;
  text-decoration: none;
}

.oku-siradaki .inner { padding: 18px 22px 16px 46px !important; border-radius: 14px !important; }
.oku-siradaki .inner .name { font-size: 12px !important; line-height: 18px !important; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-primary) !important; }
.oku-siradaki .inner .name span { font-size: 12px !important; text-transform: none; letter-spacing: 0; }
.oku-siradaki-baslik { font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--color-heading); margin-block: 4px 6px; }
.oku-siradaki .rating-wrapper span { margin-inline-start: 0 !important; font-size: 13px !important; line-height: 20px !important; color: var(--color-body); }

.oku-siradaki .notify-icon {
  inline-size: 64px !important;
  block-size: 64px !important;
  inset-block-start: 50% !important;
  inset-inline-start: -32px !important;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14, 58, 110, 0.18);
}

@media (max-width: 991px) {
  .oku-hero-kolaj { padding-block-end: 0; }
  .oku-hero-kolaj .kolaj { padding-block-end: 40px; }
  .oku-hero-kolaj .kolaj .k2 { inset-block-end: 0; inline-size: 30%; }
  .rbt-banner-7 .oku-hero-kolaj .card-info.oku-siradaki {
    position: relative;
    inset: auto;
    margin: 20px 0 0 32px;
    max-inline-size: none;
  }
}

/* Kategori şeridi (6 kategori tek satır) */
.oku-kategori-seridi .rbt-cat-box .content .title { font-size: 18px; margin-block: 14px 2px; }
.oku-kategori-seridi .rbt-cat-box .content .description { font-size: 14px; line-height: 1.45; }
.oku-kategori-seridi .rbt-cat-box .thumbnail img { border-radius: 10px; }
.rbt-cat-box .thumbnail img { aspect-ratio: 15 / 11; object-fit: cover; }

/* Etkinlik satır kartı */
.oku-etkinlik-satir { block-size: 100%; }
.oku-etkinlik-satir.card-list-2 { display: flex; flex-direction: row; align-items: stretch; gap: 0; }
.oku-etkinlik-satir .rbt-card-img { flex: 0 0 150px; max-inline-size: 150px; }
.oku-etkinlik-satir .rbt-card-img a { display: block; block-size: 100%; }
.oku-etkinlik-satir .rbt-card-img img { inline-size: 100%; block-size: 100%; min-block-size: 150px; object-fit: cover; border-radius: 8px; }
.oku-etkinlik-satir .rbt-card-img .oku-tarih-kutu { inline-size: 100%; block-size: 100%; min-block-size: 150px; }
.oku-etkinlik-satir .rbt-card-body { flex: 1 1 auto; min-inline-size: 0; padding-inline-start: 24px; display: flex; flex-direction: column; }
.oku-etkinlik-satir .rbt-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; }
.oku-etkinlik-satir .rbt-meta li { margin: 0 !important; font-size: 14px; }
.oku-etkinlik-satir .rbt-meta li i { margin-inline-end: 6px; color: var(--color-primary); }
.oku-etkinlik-satir .rbt-card-title { font-size: 19px; line-height: 1.35; margin-block-end: 10px; }

.oku-etkinlik-kulup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.oku-etkinlik-kulup a { color: var(--color-body); font-weight: 600; }
.oku-etkinlik-kulup a:hover { color: var(--color-primary); }

.oku-etkinlik-tur {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(47, 87, 239, 0.08);
  color: var(--color-primary);
}

.oku-etkinlik-alt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-block-start: auto; padding-block-start: 14px; }

.oku-kayit-durum { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.oku-kayit-durum.acik { background: rgba(31, 157, 85, 0.1); color: #17864a; }
.oku-kayit-durum.dolu { background: rgba(220, 53, 69, 0.1); color: #c0283a; }

@media (max-width: 575px) {
  .oku-etkinlik-satir.card-list-2 { flex-direction: column; }
  .oku-etkinlik-satir .rbt-card-img { flex-basis: auto; max-inline-size: none; }
  .oku-etkinlik-satir .rbt-card-img img, .oku-etkinlik-satir .rbt-card-img .oku-tarih-kutu { min-block-size: 0; block-size: 110px; aspect-ratio: auto; }
  .oku-etkinlik-satir .rbt-card-img img { block-size: 180px; }
  .oku-etkinlik-satir .rbt-card-body { padding: 18px 0 0; }
}

/* Geçmiş etkinlik ve duyuru kartı (görsel üstte) */
.oku-etkinlik-gorsel, .oku-duyuru-karti { block-size: 100%; display: flex; flex-direction: column; }
.oku-etkinlik-gorsel .rbt-card-img a, .oku-duyuru-karti .rbt-card-img a { position: relative; display: block; }
.oku-etkinlik-gorsel .rbt-card-img img, .oku-duyuru-karti .rbt-card-img img:not(.oku-arma-yedek) { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.oku-etkinlik-gorsel .rbt-card-body, .oku-duyuru-karti .rbt-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.oku-etkinlik-gorsel .rbt-card-title { font-size: 17px; line-height: 1.4; margin-block-end: 10px; }
.oku-etkinlik-gorsel .rbt-meta { margin: 0 0 8px; padding: 0; font-size: 13px; }
.oku-etkinlik-gorsel .rbt-meta li i { margin-inline-end: 6px; }
.oku-etkinlik-gorsel .oku-etkinlik-kulup { margin-block-start: auto; font-size: 13px; }

.oku-gorsel-yedek {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: color-mix(in srgb, var(--kat, #0e3a6e) 12%, #fff);
}

.oku-arma-yedek { inline-size: 84px; block-size: 84px; object-fit: contain; opacity: 0.9; }

.oku-foto-sayisi, .oku-sabit-rozet {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(14, 25, 45, 0.72);
}

.oku-sabit-rozet { inset-inline-end: auto; inset-inline-start: 12px; background: var(--color-primary); }

.oku-duyuru-ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; margin-block-end: 8px; }
.oku-duyuru-ust .kaynak { font-weight: 600; color: var(--color-primary); }
.oku-duyuru-ust .tarih i { margin-inline-end: 4px; }
.oku-duyuru-karti .rbt-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oku-duyuru-karti .rbt-card-bottom { margin-block-start: auto; padding-block-start: 12px; }
.oku-duyuru-karti .transparent-button i { margin-inline-start: 6px; }

/* Geri sayım bölümü */
.oku-geri-sayim-alan { position: relative; background-size: cover; background-position: center; }
.oku-geri-sayim-alan::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 24, 52, 0.88) 0%, rgba(10, 24, 52, 0.62) 100%); }
.oku-geri-sayim-alan > .container { position: relative; z-index: 1; }
.oku-geri-sayim-alan .description i { margin-inline: 2px 4px; }
.oku-siradaki-kart { background: #fff; border-radius: 14px; padding: 36px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); }
.oku-siradaki-kart .title { font-size: 26px; margin-block: 6px 16px; }
.oku-bilgi-liste { list-style: none; margin: 0; padding: 0; }
.oku-bilgi-liste li { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.oku-bilgi-liste li i { color: var(--color-primary); flex: none; }
/* Geri sayım kutuları (temanın .countdown görünümü; sınıf adı betik çakışmasın diye farklı) */
.countdown-style-1 .oku-sayac { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: -10px; }
.oku-sayac .countdown-container { margin: 10px; text-align: center; padding: 15px 20px; background: var(--white-opacity); border-radius: 10px; min-inline-size: 120px; }
.oku-sayac .countdown-value { display: block; font-weight: 600; font-size: 40px; line-height: 1.24; color: #fff; font-variant-numeric: tabular-nums; }
.oku-sayac .countdown-heading { display: block; color: #fff; text-transform: uppercase; font-weight: 300; font-size: 16px; line-height: 32px; opacity: 0.75; }
@media (max-width: 767px) {
  .countdown-style-1 .oku-sayac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
  .oku-sayac .countdown-container { margin: 0; min-inline-size: 0; padding: 12px 4px; }
  .oku-sayac .countdown-value { font-size: 24px; }
  .oku-sayac .countdown-heading { font-size: 11px; line-height: 22px; }
}
@media (max-width: 575px) { .oku-siradaki-kart { padding: 24px; } }

/* Sosyal transkript tanıtım kolajı */
.oku-tanitim-kolaj { position: relative; padding-block-end: 60px; padding-inline-end: 70px; }
.oku-tanitim-kolaj img { display: block; border-radius: 18px; object-fit: cover; box-shadow: 0 18px 40px rgba(14, 58, 110, 0.16); }
.oku-tanitim-kolaj .t1 { inline-size: 100%; aspect-ratio: 11 / 7.6; }
.oku-tanitim-kolaj .t2 { position: absolute; inset-inline-end: 0; inset-block-end: 0; inline-size: 42%; aspect-ratio: 64 / 76; border: 6px solid #fff; }
@media (max-width: 575px) { .oku-tanitim-kolaj { padding-inline-end: 40px; padding-block-end: 40px; } }

/* Akademik takvim çizgisi */
.oku-takvim-cizgi { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.oku-takvim-cizgi::before { content: ''; position: absolute; inset-block: 10px 10px; inset-inline-start: 25px; border-inline-start: 2px dashed var(--oku-kenar, #dfe3ea); }
.oku-takvim-cizgi li { position: relative; display: flex; gap: 16px; margin: 0 0 18px; padding: 0; }
.oku-takvim-cizgi .ikon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  z-index: 1;
  box-shadow: 0 0 0 5px var(--color-extra2, #f9f9ff);
}
.oku-takvim-cizgi li.bitti .ikon { background: #8b93a5; }
.oku-takvim-cizgi li.suruyor .ikon { background: #1f9d55; }
.oku-takvim-cizgi .metin { background: #fff; border-radius: 12px; padding: 14px 18px; flex: 1; box-shadow: 0 6px 20px rgba(14, 58, 110, 0.06); }
.oku-takvim-cizgi .metin strong { display: block; color: var(--color-heading); font-size: 16px; line-height: 1.4; }
.oku-takvim-cizgi .metin span { display: block; font-size: 14px; }
.oku-takvim-cizgi .metin em { display: block; font-style: normal; font-size: 13px; margin-block-start: 4px; color: var(--color-primary); font-weight: 600; }
.oku-takvim-cizgi li.bitti .metin em { color: #8b93a5; }
.oku-takvim-cizgi li.suruyor .metin em { color: #1f9d55; }

/* Bölüm başlığındaki «tümünü gör» düğmesi mobilde başlığın altında */
@media (max-width: 767px) { .load-more-btn.text-start { margin-block-start: -10px; } }

/* Ana sayfa listeleri mobilde kısalır (tamamı «Tümünü gör» sayfasında) */
@media (max-width: 767px) { .oku-mobil-gizle { display: none !important; } }

/* Mobil üst şerit: üç giriş bağlantısı tek satıra sığsın; kısa ad sayesinde logo yazısı mobilde de görünür */
@media (max-width: 575px) {
  .oku-giris-baglantilari { display: flex; flex-wrap: nowrap; gap: 14px; }
  .oku-giris-baglantilari li { margin: 0 !important; padding: 0 !important; }
  .oku-giris-baglantilari li::after, .oku-giris-baglantilari li::before { display: none !important; }
  .oku-giris-baglantilari li a { font-size: 12.5px; white-space: nowrap; }
  .oku-giris-baglantilari li a i { display: none; }
  .oku-logo-yazi { display: flex !important; }
  .oku-logo img { inline-size: 44px; block-size: 44px; }
}

/* ════════════ Etkinlik / duyuru sayfaları — 2026-09-27 ════════════ */

/* Durum satırı kutu dışında da kullanılabilir */
.oku-iptal-notu { display: flex; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 0, 3, 0.07); color: #a51f24; margin-block-end: 16px; }

/* Liste araç çubuğu: sekmeler + arama */
.oku-liste-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; margin-block-end: 36px; border-radius: 16px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); box-shadow: 0 10px 34px rgba(25, 35, 53, 0.06); }
.oku-sekme-dugmeleri { display: flex; gap: 8px; flex-wrap: wrap; }
.oku-sekme-dugmeleri a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 600; color: var(--oku-metin); background: var(--oku-yumusak); }
.oku-sekme-dugmeleri a span { font-size: 12px; padding: 1px 8px; border-radius: 20px; background: rgba(47, 87, 239, 0.1); color: var(--color-primary); }
.oku-sekme-dugmeleri a.aktif { background: var(--color-primary); color: #fff; }
.oku-sekme-dugmeleri a.aktif span { background: rgba(255, 255, 255, 0.22); color: #fff; }
.oku-liste-arama { display: flex; flex: 1 1 260px; max-inline-size: 420px; position: relative; }
.oku-liste-arama input { block-size: 46px; border-radius: 10px; padding-inline: 16px 48px; border: 1px solid var(--oku-kenar); background: var(--oku-yumusak); font-size: 15px; inline-size: 100%; }
.oku-liste-arama button { position: absolute; inset-inline-end: 4px; inset-block-start: 4px; block-size: 38px; inline-size: 40px; border: 0; border-radius: 8px; background: var(--color-primary); color: #fff; }
@media (max-width: 575px) { .oku-liste-arama { max-inline-size: none; } }

.rbt-pagination li.disabled a { opacity: 0.4; pointer-events: none; }

/* Etkinlik detay başlığı */
.oku-etkinlik-bas { padding: 30px; border-radius: 22px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); box-shadow: 0 16px 44px rgba(25, 35, 53, 0.08); }
.oku-etkinlik-bas .afis a { position: relative; display: block; }
.oku-etkinlik-bas .afis img { display: block; inline-size: 100%; block-size: auto; max-block-size: 520px; object-fit: cover; border-radius: 16px; }
.oku-etkinlik-bas .afis .buyut { position: absolute; inset-inline-end: 12px; inset-block-end: 12px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: rgba(14, 25, 45, 0.7); color: #fff; }
.oku-tarih-kutu.buyuk { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; border-radius: 16px; }
.oku-tarih-kutu.buyuk .gun { font-size: 96px; }
.oku-tarih-kutu.buyuk .ay { font-size: 28px; }
.oku-tarih-kutu.buyuk .yil { font-size: 20px; }
.oku-etkinlik-bas .rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
.oku-etkinlik-bas .rozet { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: rgba(47, 87, 239, 0.08); color: var(--color-primary); }
.oku-etkinlik-bas .rozet.yakin { background: var(--color-primary); color: #fff; }
.oku-etkinlik-bas .rozet.suruyor { background: #1f9d55; color: #fff; }
.oku-etkinlik-bas .rozet.gecti { background: #6b7385; color: #fff; }
.oku-etkinlik-bas .rozet.iptal { background: #c0283a; color: #fff; }
.oku-etkinlik-bas .baslik { font-size: 38px; line-height: 1.25; margin-block-end: 14px; }
.oku-etkinlik-bas .ozet { font-size: 17px; margin-block-end: 16px; }
.oku-etkinlik-bas .meta { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.oku-etkinlik-bas .meta li { margin: 0; font-weight: 600; color: var(--oku-metin); }
.oku-etkinlik-bas .meta i { color: var(--color-primary); margin-inline-end: 6px; }
.oku-etkinlik-bas .kulup { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 40px; background: var(--oku-yumusak); margin-block-end: 20px; }
.oku-etkinlik-bas .kulup small { display: block; font-size: 12px; color: var(--oku-soluk); line-height: 1.2; }
.oku-etkinlik-bas .kulup strong { color: var(--oku-metin); font-size: 15px; }
.oku-etkinlik-bas .eylemler { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 18px; }
.oku-etkinlik-bas .eylemler .rbt-btn i { margin-inline-end: 6px; }
.oku-etkinlik-bas .paylas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--oku-soluk); }
.oku-etkinlik-bas .paylas a { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--oku-yumusak); color: var(--oku-metin); transition: 0.2s; }
.oku-etkinlik-bas .paylas a:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 767px) {
  .oku-etkinlik-bas { padding: 18px; }
  .oku-etkinlik-bas .baslik { font-size: 26px; }
  .oku-tarih-kutu.buyuk { aspect-ratio: 16 / 7; }
  .oku-tarih-kutu.buyuk .gun { font-size: 60px; }
}

/* Etkinliğe kalan süre kutusu (koyu zemin; sayaç temanın beyaz yazılı kutularını kullanır) */
.oku-etkinlik-zaman { padding: 22px; border-radius: 18px; margin-block-end: 24px; background: linear-gradient(135deg, #0e3a6e 0%, #2f57ef 100%); color: #fff; }
.oku-etkinlik-zaman .etiket { display: block; font-weight: 600; margin-block-end: 14px; opacity: 0.9; }
.oku-etkinlik-zaman .etiket i { margin-inline-end: 6px; }
.oku-etkinlik-zaman .countdown-style-1 .oku-sayac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.oku-etkinlik-zaman .oku-sayac .countdown-container { margin: 0; min-inline-size: 0; padding: 12px 4px; background: rgba(255, 255, 255, 0.14); }
.oku-etkinlik-zaman .oku-sayac .countdown-value { font-size: 26px; }
.oku-etkinlik-zaman .oku-sayac .countdown-heading { font-size: 11px; line-height: 22px; }

/* Kontenjan çubuğu */
.oku-kontenjan { margin-block: 10px 6px; }
.oku-kontenjan .cubuk { block-size: 8px; border-radius: 8px; background: var(--oku-yumusak); overflow: hidden; }
.oku-kontenjan .cubuk span { display: block; block-size: 100%; border-radius: 8px; background: linear-gradient(90deg, #2f57ef, #b966e7); }
.oku-kontenjan .metin { display: flex; justify-content: space-between; font-size: 14px; margin-block-start: 6px; }

/* Detay listesi, mini liste */
.oku-detay-liste { list-style: none; margin: 0; padding: 0; }
.oku-detay-liste li { display: flex; gap: 12px; margin: 0; padding: 10px 0; border-block-end: 1px dashed var(--oku-kenar); line-height: 1.45; }
.oku-detay-liste li:last-child { border-block-end: 0; }
.oku-detay-liste li i { color: var(--color-primary); margin-block-start: 4px; flex: none; }
.oku-detay-liste small { display: block; font-size: 12px; color: var(--oku-soluk); text-transform: uppercase; letter-spacing: 0.4px; }
.oku-detay-liste span { color: var(--oku-metin); font-weight: 500; }

.oku-mini-liste { list-style: none; margin: 0; padding: 0; }
.oku-mini-liste li { margin: 0; padding: 10px 0; border-block-end: 1px dashed var(--oku-kenar); }
.oku-mini-liste li:last-child { border-block-end: 0; }
.oku-mini-liste a { display: flex; gap: 12px; align-items: center; }
.oku-mini-liste strong { display: block; font-size: 15px; line-height: 1.35; color: var(--oku-metin); }
.oku-mini-liste small { display: block; font-size: 13px; color: var(--oku-soluk); margin-block-start: 2px; }
.oku-mini-liste a:hover strong { color: var(--color-primary); }
.oku-tarih-kutu.mini { flex: none; inline-size: 56px; block-size: 56px; border-radius: 10px; }
.oku-tarih-kutu.mini .gun { font-size: 20px; }
.oku-tarih-kutu.mini .ay { font-size: 11px; letter-spacing: 0.3px; }
.oku-tarih-kutu.mini .yil { display: none; }
.oku-tumu { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 12px; font-weight: 600; }

/* Konuşmacı ve galeri */
.oku-konusmaci { display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: var(--oku-yumusak); block-size: 100%; }
.oku-konusmaci img, .oku-konusmaci .avatar { flex: none; inline-size: 64px; block-size: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #fff; color: var(--color-primary); font-size: 24px; }
.oku-konusmaci strong { display: block; color: var(--oku-metin); }
.oku-konusmaci .unvan { display: block; font-size: 14px; color: var(--color-primary); }
.oku-konusmaci p { font-size: 14px; margin: 6px 0 0; }
.oku-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.oku-galeri a { display: block; border-radius: 12px; overflow: hidden; }
.oku-galeri img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.3s; }
.oku-galeri a:hover img { transform: scale(1.05); }

/* Duyuru detay */
.oku-duyuru-detay { padding: 34px; border-radius: 22px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); box-shadow: 0 16px 44px rgba(25, 35, 53, 0.06); }
.oku-duyuru-detay .ust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-block-end: 18px; }
.oku-duyuru-detay .kaynak { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--oku-metin); }
.oku-duyuru-detay .kaynak img { inline-size: 40px; block-size: 40px; object-fit: contain; }
.oku-duyuru-detay .tarih { font-size: 14px; color: var(--oku-soluk); }
.oku-duyuru-detay .tarih i { margin-inline-end: 4px; }
.oku-duyuru-detay .sabit-satir { position: static; }
.oku-duyuru-detay h1 { font-size: 34px; line-height: 1.3; margin-block-end: 14px; }
.oku-duyuru-detay .ozet { font-size: 18px; color: var(--oku-soluk); }
.oku-duyuru-detay .kapak img { display: block; inline-size: 100%; block-size: auto; border-radius: 16px; margin-block: 10px 24px; }
.oku-icerik-metin a { color: var(--color-primary); text-decoration: underline; word-break: break-word; }
.oku-ek-dosya { display: flex; align-items: center; gap: 14px; margin-block-start: 24px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--color-primary); background: rgba(47, 87, 239, 0.05); }
.oku-ek-dosya i { font-size: 24px; color: var(--color-primary); }
.oku-ek-dosya strong { display: block; color: var(--oku-metin); }
.oku-ek-dosya small { color: var(--oku-soluk); }
@media (max-width: 767px) { .oku-duyuru-detay { padding: 20px; } .oku-duyuru-detay h1 { font-size: 26px; } }

/* Kulüp sayfası bölüm gezgini */
.oku-bolum-gezgini { position: sticky; inset-block-start: 90px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; margin-block-end: 24px; border-radius: 14px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); box-shadow: 0 10px 30px rgba(25, 35, 53, 0.06); }
.oku-bolum-gezgini a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--oku-metin); }
.oku-bolum-gezgini a:hover { background: var(--oku-yumusak); color: var(--color-primary); }
.oku-bolum-gezgini a span { font-size: 12px; padding: 0 7px; border-radius: 20px; background: rgba(47, 87, 239, 0.1); color: var(--color-primary); }
#hakkinda, #etkinlikler, #duyurular, #yonetim-kurulu { scroll-margin-block-start: 170px; }
.oku-yan-kart h5 small { font-size: 14px; color: var(--oku-soluk); font-weight: 500; }

/* Üst menü (demo 08): öğeler tek satır; 1200–1399 px arasında sıkıştır ki logo, menü ve düğme kutuya sığsın */
.rbt-header-8 .mainmenu-nav .mainmenu { flex-wrap: nowrap; }
.rbt-header-8 .mainmenu-nav .mainmenu > li > a { white-space: nowrap; padding: 0 14px; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .rbt-header-8 .mainmenu-nav .mainmenu > li > a { padding: 0 8px; font-size: 14.5px; }
  .rbt-header-8 .mainbar-row { padding-inline: 16px; }
  .rbt-header-8 .oku-logo-yazi .ust { font-size: 18px !important; }
  .rbt-header-8 .oku-logo-yazi .alt { font-size: 8.5px !important; letter-spacing: 0; }
  .rbt-header-8 .oku-logo img { inline-size: 44px; block-size: 44px; }
  .rbt-header-8 .rbt-header-right .rbt-btn { padding-inline: 16px; font-size: 14px; }
}
.rbt-header-8 .rbt-header-right .rbt-btn { white-space: nowrap; flex-shrink: 0; }
.rbt-header-8 .rbt-header-right .rbt-btn span { white-space: nowrap; }

/* ════════════ Geçmiş etkinlik kayan şeridi (10-online-course kayan kartları gibi) — 2026-09-27 ════════════ */
.oku-serit { display: grid; gap: 26px; }
.oku-serit-kap {
  overflow: hidden;
  padding-block: 6px 14px;
  /* Kenarlarda yumuşak kaybolma */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.oku-serit-grup { display: flex; gap: 24px; padding-inline-end: 24px; flex: none; }
.oku-serit-karti {
  display: flex;
  flex-direction: column;
  inline-size: 320px;
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--oku-kart);
  border: 1px solid var(--oku-kenar);
  box-shadow: 0 10px 28px rgba(25, 35, 53, 0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}
.oku-serit-karti:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(25, 35, 53, 0.13); }
.oku-serit-karti .gorsel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.oku-serit-karti .gorsel img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.4s; }
.oku-serit-karti:hover .gorsel img { transform: scale(1.05); }
.oku-serit-karti .gorsel .oku-gorsel-yedek { block-size: 100%; border-radius: 0; }
.oku-serit-karti .tarih {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-end: 12px;
  display: grid;
  place-items: center;
  min-inline-size: 54px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff;
  color: var(--oku-soluk);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.oku-serit-karti .tarih strong { font-size: 20px; line-height: 1.1; color: var(--color-primary); }
.oku-serit-karti .govde { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.oku-serit-karti .baslik {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--oku-metin);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 2.8em;
}
.oku-serit-karti:hover .baslik { color: var(--color-primary); }
.oku-serit-karti .alt { display: flex; flex-direction: column; gap: 6px; margin-block-start: auto; font-size: 13px; color: var(--oku-soluk); }
.oku-serit-karti .alt i { margin-inline-end: 4px; color: var(--color-primary); }
.oku-serit-karti .kulup { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--oku-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oku-serit .oku-kayan-sira:hover { animation-play-state: paused; }
@media (max-width: 767px) {
  .oku-serit-karti { inline-size: 250px; }
  .oku-serit-grup { gap: 16px; padding-inline-end: 16px; }
  .oku-serit-karti .baslik { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .oku-serit-kap { overflow-x: auto; }
  .oku-serit-grup[aria-hidden] { display: none; }
}

/* Etkinlik ve duyuru kartlarında başlıklar temanın 26 px kuralını ezsin (daha sade) */
.rbt-card.oku-etkinlik-gorsel .rbt-card-body .rbt-card-title,
.rbt-card.oku-duyuru-karti .rbt-card-body .rbt-card-title { font-size: 17px; line-height: 1.4; }
.rbt-card.oku-etkinlik-satir .rbt-card-body .rbt-card-title { font-size: 19px; line-height: 1.35; }
@media (max-width: 767px) {
  .rbt-card.oku-etkinlik-satir .rbt-card-body .rbt-card-title { font-size: 17px; }
}

/* Kulüp kartı: panelden yüklenen kapak görseli üst bantta logonun arkasında */
.oku-kulup-ust.kapakli { overflow: hidden; isolation: isolate; }
.oku-kulup-ust .oku-kulup-kapak-gorsel {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.4s;
}
.oku-kulup-ust.kapakli::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 25, 45, 0.05) 0%, rgba(14, 25, 45, 0.28) 100%);
}
.rbt-card:hover .oku-kulup-ust .oku-kulup-kapak-gorsel { transform: scale(1.05); }

/* ════════════ Giriş sayfası — Histudy login.html düzeni (iki kart yan yana) — 2026-09-27 ════════════ */
.rbt-elements-area .oku-giris-karti { block-size: 100%; margin: 0; }
.oku-giris-yardim-satiri { align-items: center; row-gap: 8px; }
.oku-giris-yardim-satiri .rbt-checkbox label { font-size: 15px; }
.oku-giris-yardim-satiri .rbt-btn-link { background: none; border: 0; padding: 0; font-size: 15px; font-weight: 500; color: var(--color-primary); cursor: pointer; }
.oku-giris-yardim-satiri .rbt-btn-link:hover { text-decoration: underline; }
.oku-parola-yardim { display: flex; gap: 10px; padding: 12px 14px; margin-block-end: 18px; border-radius: 10px; background: rgba(47, 87, 239, 0.07); font-size: 14px; line-height: 1.55; }
.oku-parola-yardim i { color: var(--color-primary); margin-block-start: 3px; }
.oku-parola-yardim a { color: var(--color-primary); font-weight: 600; }

.oku-hesap-karti { display: flex; flex-direction: column; }
.oku-hesap-adimlari { list-style: none; margin: 6px 0 26px; padding: 0; display: grid; gap: 18px; }
.oku-hesap-adimlari li { display: flex; gap: 14px; margin: 0; padding: 0; font-size: 15px; line-height: 1.6; }
.oku-hesap-adimlari .ikon { flex: none; display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 12px; font-size: 20px; color: var(--color-primary); }
.oku-hesap-adimlari .ikon.bg-secondary-opacity { color: var(--color-secondary); }
.oku-hesap-adimlari .ikon.bg-pink-opacity { color: var(--color-pink); }
.oku-hesap-adimlari strong { display: block; color: var(--oku-metin); font-size: 16px; margin-block-end: 2px; }
.oku-hesap-eylem { display: grid; gap: 12px; margin-block-start: auto; }
.oku-hesap-karti .oku-not a { color: var(--color-primary); }
@media (max-width: 991px) { .rbt-elements-area .oku-giris-karti { block-size: auto; } }
@media (max-width: 575px) {
  .rbt-newsletter-area .newsletter-form-1 { display: flex; flex-direction: column; gap: 12px; inline-size: 100%; }
  .rbt-newsletter-area .newsletter-form-1 input { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; padding-inline-end: 20px; }
  .rbt-newsletter-area .newsletter-form-1 .rbt-btn { position: static; inline-size: 100%; justify-content: center; transform: none; }
}
@media (max-width: 575px) { .rbt-newsletter-area .row.g-5 { --bs-gutter-x: 1.5rem; } }
/* Temanın gizli yerel onay kutusu tam genişlikte kalıp mobilde taşıyordu */
.oku-giris-yardim-satiri .rbt-checkbox { position: relative; }
.oku-giris-yardim-satiri .rbt-checkbox input[type='checkbox'] { inline-size: 18px; block-size: 18px; }

/* ── Belge doğrulama: yöntem sekmeleri, belge no formu, imza satırları (Özal) ── */
.oku-dogrulama-sekmeleri { margin-block-end: 20px; }
.oku-belge-no-formu .form-group { margin-block-end: 6px; }
.oku-belge-no-sonuc { padding-block-start: 30px; border-block-start: 1px solid var(--oku-kenar); }
.oku-bilgi-tablo td .oku-imza-birim { color: var(--oku-soluk); font-weight: 400; font-size: 14px; }
@media (max-width: 575px) {
  .oku-dogrulama-sekmeleri a { flex: 1 1 100%; justify-content: center; }
  .oku-dogrulama-sonuc { padding: 24px 18px; }
  .oku-bilgi-tablo th, .oku-bilgi-tablo td { padding: 10px 8px; font-size: 14px; }
}

/* ── Açılır duyuru (popup): Histudy modal düzeni, Bootstrap betiği olmadan ── */
.oku-acilir-duyuru { z-index: 100000; overflow-y: auto; }
.oku-acilir-perde { z-index: 99999; }
.oku-acilir-duyuru .modal-dialog { max-inline-size: 620px; margin-inline: auto; padding: 16px; }
.oku-acilir-duyuru .modal-content { position: relative; padding: 40px 38px 34px; border: 0; border-radius: 16px; background: var(--oku-kart); box-shadow: 0 30px 80px rgba(9, 20, 45, 0.35); }
.oku-acilir-duyuru .modal-header { padding: 0; border: 0; }
.oku-acilir-duyuru .modal-header .rbt-round-btn { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; }
.oku-acilir-duyuru .modal-title { margin-block: 12px 14px; color: var(--oku-metin); font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.oku-acilir-rozet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--color-primary); background: rgba(47, 87, 239, 0.1); }
.oku-acilir-metin { font-size: 16px; line-height: 1.7; color: var(--oku-metin); overflow-wrap: anywhere; }
.oku-acilir-metin p { margin-block: 0 12px; }
.oku-acilir-metin ul, .oku-acilir-metin ol { padding-inline-start: 22px; margin-block: 0 12px; }
.oku-acilir-metin a { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 575px) {
  .oku-acilir-duyuru .modal-dialog { padding: 12px; }
  .oku-acilir-duyuru .modal-content { padding: 34px 20px 24px; }
  .oku-acilir-duyuru .modal-title { font-size: 20px; }
}

/* İç sayfa başlığı — Histudy login.html `rbt-breadcrumb-default` (ortalı başlık + kırıntı, bg-gradient-1) */
.oku-sayfa-basligi .breadcrumb-inner .title { margin-block-end: 10px; }
.oku-sayfa-basligi .page-list { justify-content: center; flex-wrap: wrap; row-gap: 4px; }
.oku-sayfa-basligi .page-list li.active { max-inline-size: min(60ch, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oku-sayfa-aciklama { max-inline-size: 760px; margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: var(--color-body); }
@media (max-width: 767px) { .oku-sayfa-aciklama { font-size: 15px; margin-block-start: 12px; } }
.active-dark-mode .rbt-header.rbt-header-8.oku-header-duz { background: var(--color-darker); }
.oku-sayfa-basligi .page-list { align-items: center; }
.oku-sayfa-basligi .page-list li { line-height: 1.6; }
.oku-sayfa-basligi .page-list li.active { display: inline-block; vertical-align: middle; }

/* ── Hacettepe paketi 1 (2026-09-27): üyelere özel etkinlik, soru kutusu, topluluk kurma çağrısı ── */
.oku-kayit-durum.ozel { background: rgba(124, 58, 237, 0.1); color: #6d28d9; display: inline-flex; align-items: center; gap: 4px; }
.oku-etkinlik-bas .rozet.ozel { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.active-dark-mode .oku-kayit-durum.ozel, .active-dark-mode .oku-etkinlik-bas .rozet.ozel { color: #c4b5fd; }
.oku-uyelik-kutusu input[type='text'] {
  inline-size: 100%;
  block-size: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--oku-kenar);
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 15px;
}
.oku-uyelik-kutusu .durum-satir a { font-weight: 600; text-decoration: underline; }
.oku-kurma-cagri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-block-start: 50px;
  padding: 28px 32px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(47, 87, 239, 0.08), rgba(185, 102, 231, 0.1));
  border: 1px solid var(--oku-kenar);
}
.oku-kurma-cagri h4 { margin-block-end: 6px; }
.oku-kurma-cagri p { margin: 0; max-inline-size: 720px; }
@media (max-width: 575px) { .oku-kurma-cagri { padding: 22px 18px; } .oku-kurma-cagri .rbt-btn { inline-size: 100%; justify-content: center; } }

/* ── Hacettepe paketi 2 (2026-09-27): QR kartı, popüler topluluklar, etkinlik türleri, formlar, bülten, erişilebilirlik, A–Z ── */

/* QR kartı (components/site/QrKarti.tsx) — Histudy modal düzeni, Bootstrap betiksiz; yazdırmada yalnız kart basılır */
.oku-qr-yan { margin-block-end: 14px; }
.oku-qr-dugme i { margin-inline-end: 6px; }
.oku-qr-modal { z-index: 100000; overflow-y: auto; }
.oku-qr-perde { z-index: 99999; }
.oku-qr-modal .modal-dialog { max-inline-size: 520px; margin-inline: auto; padding: 16px; }
.oku-qr-modal .modal-content { position: relative; padding: 34px 30px 28px; border: 0; border-radius: 16px; background: var(--oku-kart); box-shadow: 0 30px 80px rgba(9, 20, 45, 0.35); }
.oku-qr-modal .modal-header { padding: 0; border: 0; }
.oku-qr-modal .modal-header .rbt-round-btn { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.oku-qr-modal .modal-title { margin-block: 12px 6px; color: var(--oku-metin); font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; padding-inline-end: 34px; }
.oku-qr-aciklama { margin-block: 0 16px; font-size: 15px; line-height: 1.6; color: var(--oku-soluk); }
.oku-qr-yazdir { display: flex; justify-content: center; padding: 10px; border-radius: 14px; background: var(--oku-yumusak); }
.oku-qr-yazdir img { display: block; inline-size: 100%; max-inline-size: 300px; block-size: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(25, 35, 53, 0.12); }
.oku-qr-yazdir.yukleniyor img { min-block-size: 360px; background: #fff; }
.oku-qr-eylemler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 18px; }
.oku-qr-eylemler .rbt-btn i { margin-inline-end: 6px; }
@media (max-width: 575px) {
  .oku-qr-modal .modal-dialog { padding: 10px; }
  .oku-qr-modal .modal-content { padding: 30px 16px 20px; }
  .oku-qr-eylemler .rbt-btn { flex: 1 1 100%; justify-content: center; }
}
@media print {
  body.oku-qr-yazdiriliyor > *:not(.oku-qr-kok) { display: none !important; }
  body.oku-qr-yazdiriliyor { background: #fff !important; }
  body.oku-qr-yazdiriliyor .oku-qr-perde,
  body.oku-qr-yazdiriliyor .oku-qr-gizle,
  body.oku-qr-yazdiriliyor .oku-qr-modal .modal-header { display: none !important; }
  body.oku-qr-yazdiriliyor .oku-qr-modal { position: static !important; overflow: visible !important; }
  body.oku-qr-yazdiriliyor .oku-qr-modal .modal-dialog { max-inline-size: none; margin: 0; padding: 0; transform: none !important; }
  body.oku-qr-yazdiriliyor .oku-qr-modal .modal-content { padding: 0; box-shadow: none; background: #fff; }
  body.oku-qr-yazdiriliyor .oku-qr-yazdir { padding: 0; background: #fff; }
  body.oku-qr-yazdiriliyor .oku-qr-yazdir img { inline-size: 105mm; max-inline-size: none; box-shadow: none; }
}

/* Ana sayfa: popüler topluluklar + etkinlik türleri */
.oku-bolum-baslik { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.oku-ipucu { position: relative; display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--oku-kenar); background: var(--oku-kart); color: var(--color-primary); font-size: 16px; cursor: help; vertical-align: middle; }
.oku-ipucu [role='tooltip'] { position: absolute; inset-block-end: calc(100% + 10px); inset-inline-start: 50%; transform: translateX(-50%); inline-size: min(320px, 80vw); padding: 12px 14px; border-radius: 10px; background: #192335; color: #fff; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-align: start; box-shadow: 0 14px 40px rgba(9, 20, 45, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 20; pointer-events: none; }
.oku-ipucu:hover [role='tooltip'], .oku-ipucu:focus-visible [role='tooltip'], .oku-ipucu:focus [role='tooltip'] { opacity: 1; visibility: visible; }
.oku-ipucu:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 767px) { .oku-ipucu [role='tooltip'] { inset-inline-start: auto; inset-inline-end: -8px; transform: none; } }
.oku-populer-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.oku-populer-liste li { margin: 0; padding: 0; }
.oku-populer-satir { display: flex; align-items: center; gap: 12px; block-size: 100%; padding: 12px 14px; border-radius: 14px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); box-shadow: 0 6px 20px rgba(25, 35, 53, 0.05); color: var(--oku-metin); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.oku-populer-satir:hover { transform: translateY(-2px); border-color: var(--kat, var(--color-primary)); box-shadow: 0 12px 28px rgba(25, 35, 53, 0.1); color: var(--oku-metin); }
.oku-populer-satir .sira { flex: 0 0 30px; block-size: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; font-weight: 700; color: #fff; background: var(--kat, var(--color-primary)); }
.oku-populer-liste li:nth-child(-n + 3) .sira { background: linear-gradient(135deg, #c8912a, #e6b85c); }
.oku-populer-satir .bilgi { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.oku-populer-satir .bilgi strong { font-size: 15px; line-height: 1.35; color: var(--oku-metin); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.oku-populer-satir .bilgi small { font-size: 12.5px; line-height: 1.5; color: var(--oku-soluk); margin-block-start: 2px; }
.oku-populer-satir .skor { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--color-primary); }
.oku-populer-satir .skor small { font-size: 11px; font-weight: 500; color: var(--oku-soluk); }
.oku-tur-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.oku-tur-karti { display: flex; align-items: center; justify-content: space-between; gap: 10px; block-size: 100%; padding: 14px 16px; border-radius: 14px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); color: var(--oku-metin); transition: border-color 0.2s ease, transform 0.2s ease; }
.oku-tur-karti:hover { border-color: var(--color-primary); transform: translateY(-2px); color: var(--oku-metin); }
.oku-tur-karti .ad { font-size: 15px; font-weight: 600; line-height: 1.35; min-inline-size: 0; overflow-wrap: anywhere; }
.oku-tur-karti .sayi { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--color-primary); }
.oku-tur-karti .sayi small { font-size: 11px; font-weight: 500; color: var(--color-success, #3eb75e); white-space: nowrap; margin-block-start: 3px; }
@media (max-width: 575px) { .oku-populer-liste { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .oku-populer-satir, .oku-tur-karti { transition: none; } .oku-populer-satir:hover, .oku-tur-karti:hover { transform: none; } }

/* Etkinlik listesi: tür süzgeci (bağlantı çipleri; kulüp süzgecindeki düğme çipleriyle aynı görünüm) */
.oku-tur-cipler { margin-block: -16px 30px; }
.oku-kategori-cipler a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--oku-kenar); background: var(--oku-kart); color: var(--oku-metin); font-size: 15px; font-weight: 500; transition: all 0.2s; }
.oku-kategori-cipler a span { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 100px; background: var(--oku-yumusak); color: var(--oku-soluk); }
.oku-kategori-cipler a:hover, .oku-kategori-cipler a.aktif { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.oku-kategori-cipler a.aktif span, .oku-kategori-cipler a:hover span { background: rgba(255, 255, 255, 0.22); color: #fff; }
.oku-kategori-cipler a.bos:not(.aktif) { opacity: 0.6; }

/* Formlar ve mevzuat (/formlar) */
.oku-belge-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.oku-belge-satir { display: flex; align-items: center; gap: 20px; margin: 0; padding: 20px 24px; border-radius: 16px; background: var(--oku-kart); border: 1px solid var(--oku-kenar); box-shadow: 0 10px 30px rgba(25, 35, 53, 0.05); }
.oku-belge-satir .bicim { flex: 0 0 64px; block-size: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; color: var(--bicim, var(--color-primary)); background: color-mix(in srgb, var(--bicim, #2f57ef) 10%, transparent); }
.oku-belge-satir .bicim i { font-size: 26px; }
.oku-belge-satir .bicim small { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.oku-belge-satir .govde { flex: 1 1 auto; min-inline-size: 0; }
.oku-belge-satir .kategori { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary); }
.oku-belge-satir .baslik { margin: 2px 0 4px; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.oku-belge-satir .aciklama { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--oku-soluk); }
.oku-belge-satir .meta { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; }
.oku-belge-satir .meta li { margin: 0; font-size: 13px; color: var(--oku-soluk); display: inline-flex; align-items: center; gap: 6px; }
.oku-belge-satir > .rbt-btn { flex: 0 0 auto; }
@media (max-width: 767px) {
  .oku-belge-satir { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .oku-belge-satir .bicim { flex-basis: 52px; block-size: 60px; }
  .oku-belge-satir .govde { flex-basis: calc(100% - 70px); }
  .oku-belge-satir > .rbt-btn { inline-size: 100%; justify-content: center; }
}
.oku-kurma-eylem { display: flex; flex-wrap: wrap; gap: 12px; }
.oku-kurma-eylem .rbt-btn i { margin-inline-end: 6px; }
@media (max-width: 575px) { .oku-kurma-eylem { inline-size: 100%; } .oku-kurma-eylem .rbt-btn { inline-size: 100%; justify-content: center; } }

/* Alt bilgi: haftalık etkinlik bülteni formu (Histudy demo 08 `newsletter-form`) */
.oku-abonelik-formu h6 { margin-block-end: 6px; }
.oku-abonelik-formu .description { margin-block-end: 14px; font-size: 15px; line-height: 1.6; }
.oku-abonelik-formu .form-group input { inline-size: 100%; }
.oku-abonelik-formu .oku-guvenlik-kodu { margin-block-end: 14px; }
.oku-abonelik-kvkk { align-items: flex-start !important; margin-block-end: 14px !important; font-size: 13px !important; line-height: 1.55; color: var(--color-body) !important; }
.oku-abonelik-kvkk input { flex: 0 0 18px; min-inline-size: 0 !important; margin-block-start: 2px !important; margin-inline-end: 0 !important; }
.oku-abonelik-kvkk a { color: var(--color-primary); text-decoration: underline; }
.oku-abonelik-sonuc { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.oku-abonelik-sonuc.basari { padding: 10px 12px; border-radius: 10px; background: rgba(62, 183, 94, 0.1); color: #1f7a3c; }
.active-dark-mode .oku-abonelik-sonuc.basari { color: #8be3a8; }
.oku-abonelik-formu .oku-hata { margin: 0 0 14px; font-size: 14px; }

/* Bülten onay / çıkış sayfaları */
.oku-abonelik-kart { padding: 40px 32px; }
.oku-abonelik-ikon { display: inline-grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 50%; font-size: 30px; color: var(--color-primary); background: rgba(47, 87, 239, 0.1); }
.oku-abonelik-ikon.gecerli { color: #1f7a3c; background: rgba(62, 183, 94, 0.14); }
.oku-abonelik-ikon.gecersiz { color: #b42318; background: rgba(217, 48, 37, 0.1); }
.oku-abonelik-ikon.iptal { color: #9a6700; background: rgba(200, 145, 42, 0.14); }
.active-dark-mode .oku-abonelik-ikon.gecerli { color: #8be3a8; }
.active-dark-mode .oku-abonelik-ikon.gecersiz { color: #ff9a9d; }
.active-dark-mode .oku-abonelik-ikon.iptal { color: #ffc58a; }
.oku-abonelik-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 24px; }
.oku-abonelik-eylem .rbt-btn i { margin-inline-end: 6px; }
@media (max-width: 575px) { .oku-abonelik-kart { padding: 28px 18px; } .oku-abonelik-eylem .rbt-btn { inline-size: 100%; justify-content: center; } }

/* Kulüpler: A–Z harf süzgeci (Türk alfabesi) */
.oku-harf-suzgeci { display: flex; flex-wrap: wrap; gap: 6px; margin-block: -12px 32px; }
.oku-harf-suzgeci button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--oku-kenar); background: var(--oku-kart); color: var(--oku-metin); font-size: 15px; font-weight: 600; line-height: 1; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.oku-harf-suzgeci button:hover:not(:disabled), .oku-harf-suzgeci button.aktif { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.oku-harf-suzgeci button:disabled { opacity: 0.35; cursor: not-allowed; }
.oku-harf-suzgeci button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 575px) { .oku-harf-suzgeci { flex-wrap: nowrap; gap: 5px; overflow-x: auto; padding-block-end: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; } .oku-harf-suzgeci button { flex: 0 0 auto; min-inline-size: 36px; block-size: 36px; padding: 0 8px; font-size: 14px; scroll-snap-align: start; } }

/* ── Erişilebilirlik menüsü (components/histudy/ErisilebilirlikMenusu.tsx): sol altta, çerez düğmesinin üstünde ── */
.oku-a11y { position: fixed; inset-inline-start: 30px; inset-block-end: 142px; z-index: 97; }
@media only screen and (min-width: 768px) and (max-width: 991px) { .oku-a11y { inset-inline-start: 10px; } }
@media only screen and (max-width: 767px) { .oku-a11y { inset-inline-start: 4px; } }
.oku-a11y-fab { position: relative; inline-size: 44px; block-size: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--color-border); background: #fff; color: var(--color-heading); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 10px rgb(0 0 0 / 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.oku-a11y-fab svg { inline-size: 22px; block-size: 22px; }
.oku-a11y-fab:hover, .oku-a11y-fab[aria-expanded='true'] { color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgb(25 35 53 / 0.12); }
.oku-a11y-rozet { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; }
.oku-a11y-panel { position: absolute; inset-inline-start: 0; inset-block-end: 56px; inline-size: min(340px, calc(100vw - 24px)); max-block-size: calc(100vh - 220px); overflow-y: auto; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--color-border); background: #fff; color: var(--color-body); box-shadow: 0 24px 60px rgb(25 35 53 / 0.16); text-align: start; }
.oku-a11y-panel[hidden] { display: none; }
.oku-a11y-ust { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; }
.oku-a11y-baslik { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-heading); }
.oku-a11y-kapat { inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--oku-yumusak); color: var(--color-heading); font-size: 22px; line-height: 1; cursor: pointer; }
.oku-a11y-yazi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-block-end: 10px; border-radius: 12px; background: var(--oku-yumusak); font-size: 14px; font-weight: 600; color: var(--color-heading); }
.oku-a11y-yazi-dugmeler { display: flex; align-items: center; gap: 8px; }
.oku-a11y-yazi-dugmeler button { inline-size: 40px; block-size: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; color: var(--color-heading); font-size: 15px; font-weight: 700; cursor: pointer; }
.oku-a11y-yazi-dugmeler button:disabled { opacity: 0.4; cursor: not-allowed; }
.oku-a11y-yazi-dugmeler output { min-inline-size: 48px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.oku-a11y-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oku-a11y-secenek { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-block-size: 70px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-border); background: #fff; color: var(--color-heading); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: start; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.oku-a11y-secenek i { font-size: 18px; color: var(--color-primary); }
.oku-a11y-secenek[aria-pressed='true'] { border-color: var(--color-primary); background: rgba(47, 87, 239, 0.1); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.oku-a11y-sifirla { display: inline-flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; block-size: 40px; margin-block-start: 12px; border-radius: 10px; border: 1px dashed var(--color-border); background: transparent; color: var(--color-heading); font-size: 14px; font-weight: 600; cursor: pointer; }
.oku-a11y-sifirla:disabled { opacity: 0.45; cursor: not-allowed; }
.oku-a11y-fab:focus-visible, .oku-a11y-panel button:focus-visible { outline: 3px solid #c8912a; outline-offset: 2px; }
.active-dark-mode .oku-a11y-fab { background: var(--color-darker); border-color: var(--dark-color-border); color: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 0.1); }
.active-dark-mode .oku-a11y-rozet { border-color: var(--color-darker); background: #a9b9ff; }
.active-dark-mode .oku-a11y-panel { background: var(--color-darker); border-color: var(--dark-color-border); color: var(--color-white-off); box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); }
.active-dark-mode .oku-a11y-baslik, .active-dark-mode .oku-a11y-yazi, .active-dark-mode .oku-a11y-sifirla, .active-dark-mode .oku-a11y-kapat { color: #fff; }
.active-dark-mode .oku-a11y-kapat, .active-dark-mode .oku-a11y-yazi { background: rgb(255 255 255 / 0.08); }
.active-dark-mode .oku-a11y-yazi-dugmeler button, .active-dark-mode .oku-a11y-secenek { background: rgb(255 255 255 / 0.04); border-color: var(--dark-color-border); color: #fff; }
.active-dark-mode .oku-a11y-secenek i { color: #a9b9ff; }
.active-dark-mode .oku-a11y-secenek[aria-pressed='true'] { border-color: #a9b9ff; background: rgb(169 185 255 / 0.14); color: #fff; box-shadow: inset 0 0 0 1px #a9b9ff; }
@media (prefers-reduced-motion: reduce) { .oku-a11y-fab, .oku-a11y-secenek { transition: none; } }

/* Okuma çubuğu: fareyi dikeyde izleyen yarı saydam şerit */
.oku-a11y-cubuk { position: fixed; inset-inline: 0; inset-block-start: 0; block-size: 44px; z-index: 99990; pointer-events: none; background: rgb(255 213 0 / 0.16); border-block: 2px solid rgb(200 145 42 / 0.85); transform: translateY(-100px); }

/* Yazı büyütme: içerik ve alt bilgi yakınlaşır (üst menü tek satır kalsın diye başlık hariç) */
html.oku-a11y-yazi-1 .rbt-main-wrapper, html.oku-a11y-yazi-1 .rbt-footer, html.oku-a11y-yazi-1 .oku-duyuru-seridi { zoom: 1.15; }
html.oku-a11y-yazi-2 .rbt-main-wrapper, html.oku-a11y-yazi-2 .rbt-footer, html.oku-a11y-yazi-2 .oku-duyuru-seridi { zoom: 1.3; }
html.oku-a11y-yazi-3 .rbt-main-wrapper, html.oku-a11y-yazi-3 .rbt-footer, html.oku-a11y-yazi-3 .oku-duyuru-seridi { zoom: 1.45; }

/* Yüksek kontrast (aydınlık: siyah metin / beyaz yüzey; karanlık: beyaz metin / siyah yüzey) */
html.oku-a11y-kontrast body { --color-body: #111111; --color-heading: #000000; --oku-metin: #000000; --oku-soluk: #1f1f1f; --oku-kenar: #5c5c5c; --color-border: #5c5c5c; --oku-kart: #ffffff; --oku-yumusak: #f1f1f1; --color-primary: #0038b8; }
html.oku-a11y-kontrast body.active-dark-mode { --color-body: #f5f5f5; --color-heading: #ffffff; --oku-metin: #ffffff; --oku-soluk: #eeeeee; --oku-kenar: #a8a8a8; --color-border: #a8a8a8; --oku-kart: #000000; --oku-yumusak: #121212; --color-primary: #9db4ff; }
html.oku-a11y-kontrast body.active-dark-mode, html.oku-a11y-kontrast body.active-dark-mode .rbt-main-wrapper { background: #000; }
html.oku-a11y-kontrast .rbt-main-wrapper p, html.oku-a11y-kontrast .rbt-main-wrapper li, html.oku-a11y-kontrast .rbt-footer p, html.oku-a11y-kontrast .rbt-footer li { color: var(--color-body); }
html.oku-a11y-kontrast .rbt-main-wrapper :is(h1, h2, h3, h4, h5, h6) { color: var(--color-heading); }

/* Bağlantıları vurgula */
html.oku-a11y-baglanti a:not(.rbt-btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; }
html.oku-a11y-baglanti .rbt-main-wrapper a:not(.rbt-btn), html.oku-a11y-baglanti .rbt-footer a:not(.rbt-btn) { background-color: rgb(255 213 0 / 0.28); border-radius: 3px; }
html.oku-a11y-baglanti a.rbt-btn, html.oku-a11y-baglanti button.rbt-btn { box-shadow: 0 0 0 3px #c8912a !important; }

/* Okunabilir yazı tipi (simge yazı tipleri korunur) */
html.oku-a11y-okunabilir body, html.oku-a11y-okunabilir body :not(i):not([class*='feather-']):not([class*='fa-']):not(.fa):not(.fab):not(.fas):not(.far) { font-family: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important; }
html.oku-a11y-okunabilir .rbt-main-wrapper :is(p, li, dd, td), html.oku-a11y-okunabilir .rbt-footer :is(p, li) { line-height: 1.8 !important; letter-spacing: 0.012em; word-spacing: 0.06em; }

/* Büyük imleç */
html.oku-a11y-imlec, html.oku-a11y-imlec body, html.oku-a11y-imlec body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2 3.8 7.3-2.7 1.4-3.8-7.3L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.oku-a11y-imlec :is(a, button, [role='button'], label, summary, select), html.oku-a11y-imlec :is(a, button, [role='button'], label, summary, select) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5a1.5 1.5 0 0 1 3 0V10l1-.2a1.5 1.5 0 0 1 1.8 1l.2.7.9-.2a1.5 1.5 0 0 1 1.8 1l.1.4.7-.1a1.5 1.5 0 0 1 1.7 1.4l.3 4.3c.1 2.9-2.2 5.3-5.1 5.3h-2.1a5 5 0 0 1-4-2l-4-5.2a1.5 1.5 0 0 1 2.3-1.9L9 15.5z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2, pointer !important; }

/* Görselleri gizle (arka plan görselleri dâhil; site düğmelerinin simgeleri korunur) */
html.oku-a11y-gorselsiz :is(img, picture, video, iframe):not(.oku-tema-anahtari img) { visibility: hidden !important; }
html.oku-a11y-gorselsiz :is([style*='background-image'], .bg_image) { background-image: none !important; }

/* Animasyonları durdur (kayan şeritler dâhil) */
html.oku-a11y-hareketsiz *, html.oku-a11y-hareketsiz *::before, html.oku-a11y-hareketsiz *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.oku-populer-satir .sira + * { flex-shrink: 0; }
.oku-tur-karti { min-block-size: 64px; }
/* Yazı büyütmede alt bilgi logosu dar ekranda satıra kırılabilir (yoksa yakınlaşan logo yatay taşar). */
html[class*='oku-a11y-yazi-'] .rbt-footer .oku-logo-yazi { inline-size: auto; min-inline-size: 0; }
html[class*='oku-a11y-yazi-'] .rbt-footer .oku-logo-yazi .alt { white-space: normal; }
html[class*='oku-a11y-yazi-'] .rbt-footer .oku-logo a { min-inline-size: 0; }
/* Karanlık + yüksek kontrast: temanın koyu moddaki başlık/metin değişkenleri de saf beyaz. */
html.oku-a11y-kontrast body.active-dark-mode { --color-white: #ffffff; --color-white-dark: #ffffff; --color-white-off: #ffffff; }
html[class*='oku-a11y-yazi-'] .rbt-footer .ft-link li { overflow-wrap: anywhere; }
@media (max-width: 575px) { .oku-populer-liste { grid-template-columns: minmax(0, 1fr); } }
.oku-populer-liste li, .oku-tur-izgara > * { min-inline-size: 0; }
/* Yakınlaştırılan içerikte sütun oluklarının negatif kenar boşluğu sayfayı yana kaydırmasın. */
html[class*='oku-a11y-yazi-'] :is(.rbt-main-wrapper, .rbt-footer, .oku-duyuru-seridi) { overflow-x: clip; }
@media (min-width: 1200px) and (max-width: 1399px) { .oku-tur-izgara { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* ════════════ Form etiketleri: yüzen etiket yerine kutunun ÜSTÜNDE sabit etiket — 2026-09-27 ════════════
   Temada etiket `z-index:-1` ile girdinin ARKASINDA duruyor; tarayıcının otomatik doldurma zemini (mavi) etiketi örtüyor,
   dolu alanda da 12 px'e küçülüp okunmuyordu. Yalnız doğrudan <label> içeren form gruplarına uygulanır (işaretleme değişmez). */
.form-group:has(> label) { display: flex !important; flex-direction: column !important; position: relative; inline-size: 100%; }
.form-group:has(> label) > label,
.form-group.focused:has(> label) > label {
  order: -1;
  position: static !important;
  inset: auto !important;
  inline-size: auto !important;
  z-index: auto !important;
  margin-block-end: 7px;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  color: var(--color-heading) !important;
  pointer-events: auto;
  transition: none !important;
}
.form-group:has(> label) > input,
.form-group:has(> label) > select {
  block-size: 50px;
  padding: 0 16px !important;
  border: 1px solid var(--oku-kenar) !important;
  border-radius: 10px !important;
  background-color: var(--oku-yumusak) !important;
  font-size: 16px;
  color: var(--color-heading);
}
.form-group:has(> label) > textarea {
  min-block-size: 120px;
  padding: 12px 16px !important;
  border: 1px solid var(--oku-kenar) !important;
  border-radius: 10px !important;
  background-color: var(--oku-yumusak) !important;
  font-size: 16px;
  color: var(--color-heading);
}
.form-group:has(> label) > input:focus,
.form-group:has(> label) > textarea:focus,
.form-group:has(> label) > select:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--color-white) !important;
  box-shadow: 0 0 0 3px rgba(47, 87, 239, 0.12);
  outline: 0;
}
.form-group:has(> label) > .focus-border { display: none !important; }
/* Otomatik doldurma: mavi zemin yerine kendi zeminimiz, yazı rengi okunur kalsın */
.form-group:has(> label) > input:-webkit-autofill,
.form-group:has(> label) > input:-webkit-autofill:hover,
.form-group:has(> label) > input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  -webkit-text-fill-color: var(--color-heading) !important;
  caret-color: var(--color-heading);
  transition: background-color 9999s ease-out 0s;
}
.active-dark-mode .form-group:has(> label) > input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-bodyest) inset !important; }
/* Alt bilgi telif satırı: masaüstünde tek satır, DDYO bağlantılı */
@media (min-width: 1200px) { .oku-telif { white-space: nowrap; } }
.oku-telif a { color: inherit; text-decoration: underline; text-decoration-color: rgba(47, 87, 239, 0.35); text-underline-offset: 3px; }
.oku-telif a:hover { color: var(--color-primary); }

/* Alt bilgi bağlantılarının başına ikon (Feather; bağlantı adresine göre — işaretleme değişmeden). İkonu zaten olan bağlantılar hariç. */
footer .ft-link li a:not(:has(i))::before,
footer .copyright-link li a:not(:has(i))::before {
  font-family: 'feather' !important;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  inline-size: 1.25em;
  margin-inline-end: 8px;
  color: var(--color-primary);
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -1px;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.25s;
}
footer .ft-link li a:hover::before { transform: translateX(2px); }
footer .copyright-link li a:not(:has(i))::before { margin-inline-end: 6px; inline-size: auto; }
footer a[href='/kulupler']::before { content: '\e9f6'; }
footer a[href='/etkinlikler']::before { content: '\e927'; }
footer a[href='/etkinlikler?gecmis=1']::before { content: '\e90b'; }
footer a[href='/duyurular']::before { content: '\e91e'; }
footer a[href='/#sosyal-transkript']::before { content: '\e919'; }
footer a[href='/dogrulama']::before { content: '\e92c'; }
footer a[href^='http'][href$='osmaniye.edu.tr']::before,
footer a[href^='http'][href$='osmaniye.edu.tr/']::before { content: '\e979'; }
footer a[href$='/ogrencitopluluklari']::before { content: '\e972'; }
footer a[href*='kulup-kur']::before { content: '\e9f4'; }
footer a[href='/formlar']::before { content: '\e964'; }
footer a[href='/kvkk']::before { content: '\e9c7'; }
footer a[href='/kvkk#cerez']::before { content: '\e9d1'; }
footer a[href^='/giris']::before { content: '\e988'; }
/* Bülten kutusundaki zarf ikonu: etiket üste alınınca form grubunun ortasına değil, kutunun ortasına hizalansın */
.footer-style-1 .newsletter-form .right-icon:has(> label)::after { top: auto; bottom: 25px; right: 16px; transform: translateY(50%); color: var(--color-body); pointer-events: none; }
.footer-style-1 .newsletter-form .right-icon:has(> label) input { padding-inline-end: 44px !important; }

/* ── Giriş: kurum hesabıyla (LDAP) giriş kapalı şeridi (Ayarlar › Güvenlik `giris.ldap`) ── */
.oku-giris-serit { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin-block-end: 30px; border-radius: 12px; border: 1px solid rgba(230, 126, 34, 0.35); background: rgba(255, 159, 67, 0.12); color: #7a3f00; font-size: 15px; line-height: 1.6; }
.oku-giris-serit i { font-size: 20px; margin-block-start: 2px; color: #e67e22; flex: none; }
.oku-giris-serit a { color: inherit; font-weight: 600; text-decoration: underline; word-break: break-all; }
.active-dark-mode .oku-giris-serit { color: #ffd2a6; background: rgba(255, 159, 67, 0.14); }

/* ════════════ Sosyal transkript öncelikli ana sayfa + /sosyal-transkript — 2026-09-27 ════════════ */

/* Menü: «Sosyal Transkript ▾» açılır menüsü (Histudy has-dropdown). Klavyeyle de açılsın (tema yalnız :hover). */
.rbt-header .mainmenu-nav .mainmenu > li > a .oku-menu-ok { margin-inline-start: 4px; font-size: 14px; }
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown:focus-within > .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
  clip: rect(0px, 100vw, 200vh, -30px);
}
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown .submenu li a { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown .submenu .oku-alt-ikon { font-size: 15px; color: var(--color-primary); opacity: 0.85; }
.rbt-header .mainmenu-nav .mainmenu li.has-dropdown .submenu { min-inline-size: 250px; }
/* Mobil menüde açılır ok tema tarafından (::after) çizilir. */
.popup-mobile-menu .oku-menu-ok { display: none !important; }

/* Bölüm çapaları: yapışkan üst menünün altında kalmasın. */
:is(#nedir, #kimler, #nasil, #surec, #takvim, #belgeler, #ornek, #sss, #dogrulama, #sosyal-transkript, #belgeleyebilirsin, #kategoriler) { scroll-margin-block-start: 70px; }

/* ── Hero: iki slayt ─────────────────────────────────────────────────── */
.oku-hero-slaytlar { display: grid; }
.oku-hero-slayt-ogesi {
  grid-area: 1 / 1;
  align-self: center;
  min-inline-size: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.oku-hero-slayt-ogesi.aktif { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s; }
.oku-hero .inner .title { margin-block-end: 24px; }
.oku-hero .section-title .subtitle { margin-block-end: 18px; }

.oku-hero-kontrol { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-block-start: 44px; }
.oku-hero-sekmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.oku-hero-sekmeler button {
  display: inline-flex;
  flex-direction: column;
  gap: 9px;
  min-inline-size: 180px;
  padding: 11px 18px 12px;
  border: 1px solid var(--oku-kenar);
  border-radius: 12px;
  background: color-mix(in srgb, var(--oku-kart) 70%, transparent);
  color: var(--oku-metin);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.oku-hero-sekmeler button:hover { border-color: rgba(47, 87, 239, 0.35); }
.oku-hero-sekmeler button.aktif { background: var(--oku-kart); border-color: rgba(47, 87, 239, 0.4); color: var(--color-primary); box-shadow: 0 10px 26px rgba(14, 58, 110, 0.1); }
.oku-hero-sekmeler .cubuk { display: block; block-size: 3px; border-radius: 3px; background: rgba(47, 87, 239, 0.12); overflow: hidden; }
.oku-hero-sekmeler .cubuk span {
  display: block;
  block-size: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: okuHeroCubuk;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
.oku-hero-slayt.oynuyor .oku-hero-sekmeler .cubuk span { animation-play-state: running; }
/* Otomatik geçiş yokken (az hareket tercihi) etkin sekmenin çubuğu dolu gösterilir. */
.oku-hero-slayt:not(.otomatik) .oku-hero-sekmeler button.aktif .cubuk { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
@keyframes okuHeroCubuk { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.oku-hero-oklar { display: flex; gap: 8px; }
.oku-hero-oklar button {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border: 1px solid var(--oku-kenar);
  border-radius: 50%;
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 19px;
  box-shadow: 0 6px 16px rgba(14, 58, 110, 0.08);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.oku-hero-oklar button:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.oku-hero-sekmeler button:focus-visible,
.oku-hero-oklar button:focus-visible,
.oku-ornek-belge:focus-visible { outline: 3px solid rgba(47, 87, 239, 0.55); outline-offset: 3px; }

/* Slayt 1: faaliyet alanı çipleri, açıklama, not */
.oku-hero-alanlar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.oku-hero-alanlar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--oku-kenar);
  border-radius: 30px;
  background: var(--oku-kart);
  color: var(--oku-metin);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(14, 58, 110, 0.06);
}
.oku-hero-alanlar li i { color: var(--color-primary); }
.oku-hero-aciklama { max-inline-size: 580px; margin: 0; font-size: 18px; line-height: 1.6; }
.oku-hero-not { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 20px 0 0; font-size: 14.5px; line-height: 1.5; }
.oku-hero-not i { color: var(--color-primary); }
.oku-hero-not a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Slayt 1: örnek belge + başvuru dönemi kartı */
.oku-hero-belge { position: relative; max-inline-size: 540px; margin-inline-start: auto; padding-block-end: 36px; }
.oku-hero-belge .belge {
  position: relative;
  display: block;
  inline-size: 70%;
  margin-inline-start: auto;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 26px 56px rgba(14, 58, 110, 0.18);
  rotate: 3deg;
  transition: rotate 0.4s ease;
}
.oku-hero-belge .belge:hover { rotate: 1deg; }
.oku-hero-belge .belge img { display: block; inline-size: 100%; block-size: auto; border-radius: 7px; }
.oku-hero-belge .rozet,
.oku-ornek-rozet {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: -14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #b3163a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 8px 18px rgba(179, 22, 58, 0.28);
}
.oku-hero-belge .donem { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 2; inline-size: min(330px, 66%); }

@media (max-width: 991px) {
  .oku-hero-belge { max-inline-size: 560px; margin-inline: auto; padding-block-end: 0; }
  .oku-hero-belge .belge { inline-size: 56%; }
  .oku-hero-belge .donem { inline-size: 62%; inset-block-end: 24px; }
  .oku-hero-kontrol { margin-block-start: 30px; }
}
@media (max-width: 575px) {
  .oku-hero-belge .belge { display: none; }
  .oku-hero-belge .donem { position: static; inline-size: 100%; }
  .oku-hero-sekmeler { flex: 1 1 100%; }
  .oku-hero-sekmeler button { flex: 1 1 0; min-inline-size: 0; padding-inline: 12px; font-size: 14px; }
  .oku-hero-alanlar li { font-size: 14px; padding: 6px 12px; }
  .oku-hero-aciklama { font-size: 16px; }
}

/* ── Başvuru dönemi durum kartı ──────────────────────────────────────── */
.oku-donem-karti {
  position: relative;
  padding: 24px 24px 18px;
  border: 1px solid var(--oku-kenar);
  border-radius: 16px;
  background: var(--oku-kart);
  color: var(--oku-metin);
  box-shadow: 0 18px 40px rgba(14, 58, 110, 0.12);
}
.oku-donem-karti.kompakt { padding: 20px 20px 14px; box-shadow: 0 22px 48px rgba(14, 58, 110, 0.2); }
.oku-donem-durum { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.5; text-transform: uppercase; }
.oku-donem-karti.acik .oku-donem-durum { background: rgba(31, 157, 85, 0.12); color: #146c3c; }
.oku-donem-karti.kapali .oku-donem-durum { background: rgba(107, 115, 133, 0.14); color: #465063; }
.oku-donem-durum .nokta { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.oku-donem-karti.acik .oku-donem-durum .nokta { animation: okuNabiz 1.8s ease-out infinite; }
@keyframes okuNabiz { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(31, 157, 85, 0); } }
.oku-donem-baslik { margin: 12px 0 6px; font-size: 20px; line-height: 1.35; }
.oku-donem-karti.kompakt .oku-donem-baslik { font-size: 18px; }
.oku-donem-metin { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.oku-donem-karti.kompakt .oku-donem-metin { font-size: 14.5px; }
.oku-donem-ipucu { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--oku-yumusak); font-size: 14px; line-height: 1.5; }
.oku-donem-baglantilar { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-block-start: 12px; border-block-start: 1px dashed var(--oku-kenar); }
.oku-donem-baglantilar a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; }
.active-dark-mode .oku-donem-karti.acik .oku-donem-durum { color: #8be3a8; }
.active-dark-mode .oku-donem-karti.kapali .oku-donem-durum { background: rgba(255, 255, 255, 0.08); color: #c5ccd8; }

/* ── 4 adımlı yolculuk (service-card-6) ──────────────────────────────── */
.oku-adim-listesi { margin-block: 0; padding-inline-start: 0; list-style: none; }
.oku-adim-listesi > li { position: relative; margin: 0; }
.oku-adim .inner { display: flex; flex-direction: column; padding: 34px 26px 28px; overflow: hidden; border-radius: 16px; }
.oku-adim .inner .number-text { color: var(--oku-metin); opacity: 0.08; }
.oku-adim .content { display: flex; flex: 1; flex-direction: column; padding-block-start: 0; }
.oku-adim-ikon {
  display: grid;
  place-items: center;
  inline-size: 58px;
  block-size: 58px;
  margin-block-end: 18px;
  border-radius: 16px;
  background: var(--oku-kart);
  color: var(--color-primary);
  font-size: 26px;
  box-shadow: 0 10px 24px rgba(14, 58, 110, 0.1);
}
.oku-adim-no { font-size: 12.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-primary); }
.service-card-6.oku-adim .inner .content .title { margin: 4px 0 10px; font-size: 20px; line-height: 1.35; }
.service-card-6.oku-adim .inner .content .description { font-size: 15px; line-height: 1.6; color: var(--oku-soluk); }
.oku-adim-baglanti { margin-block-start: auto; padding-block-start: 16px; font-size: 15px; font-weight: 600; }
.oku-adim-baglanti i { margin-inline-start: 4px; transition: transform 0.25s ease; }
.oku-adim-baglanti:hover i { transform: translateX(4px); }
/* Geniş ekranda adımlar arasında ok */
@media (min-width: 1200px) {
  .oku-adim-listesi > li:not(:last-child)::after {
    content: '\e930';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -8px;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: var(--oku-kart);
    color: var(--color-primary);
    font-family: 'feather' !important;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(14, 58, 110, 0.14);
    translate: 0 -50%;
  }
}
@media (max-width: 767px) {
  .oku-adim .inner { padding: 24px 20px 22px; }
  .oku-adim-ikon { inline-size: 48px; block-size: 48px; margin-block-end: 12px; font-size: 22px; }
}

/* ── Neleri belgeleyebilirsin? ───────────────────────────────────────── */
.oku-tur-belge { block-size: 100%; }
.oku-tur-belge .inner { display: flex; flex-direction: column; align-items: center; block-size: 100%; padding: 30px 22px 24px; border-radius: 16px; }
.oku-tur-belge .inner .icons { margin-block-end: 16px; }
.oku-tur-belge .inner .icons i {
  display: inline-grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tur) 12%, transparent);
  color: color-mix(in srgb, var(--tur) 82%, #000);
  font-size: 28px;
}
.oku-tur-belge .content { display: flex; flex: 1; flex-direction: column; align-items: center; inline-size: 100%; }
.oku-tur-belge .content .title { margin-block-end: 8px; font-size: 18px; line-height: 1.35; }
.oku-tur-sayi { display: inline-block; padding: 2px 11px; border-radius: 20px; background: color-mix(in srgb, var(--tur) 11%, transparent); color: color-mix(in srgb, var(--tur) 75%, #000); font-size: 12.5px; font-weight: 700; }
.oku-tur-altlar { margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
.oku-tur-kazanim { inline-size: 100%; margin: auto 0 0; padding-block-start: 12px; font-size: 13px; line-height: 1.5; color: var(--oku-soluk); }
.oku-tur-altlar + .oku-tur-kazanim { margin-block-start: 12px; border-block-start: 1px dashed var(--oku-kenar); }
.oku-tur-kazanim i { color: color-mix(in srgb, var(--tur) 80%, #000); }
.active-dark-mode .oku-tur-belge .inner .icons i, .active-dark-mode .oku-tur-sayi, .active-dark-mode .oku-tur-kazanim i { color: color-mix(in srgb, var(--tur) 55%, #fff); }
.oku-kazanim-seridi { margin-block-start: 40px; padding: 24px 28px; border: 1px solid var(--oku-kenar); border-radius: 16px; background: var(--oku-kart); }
.oku-kazanim-seridi h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 17px; }
.oku-kazanim-seridi h3 i { color: var(--oku-altin); }
.oku-kazanim-seridi ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oku-kazanim-seridi li { margin: 0; padding: 6px 14px; border-radius: 20px; background: rgba(47, 87, 239, 0.08); color: var(--color-primary); font-size: 14px; font-weight: 600; line-height: 1.4; }
@media (max-width: 767px) {
  .oku-tur-altlar, .oku-tur-kazanim { display: none; }
  .oku-tur-belge .inner { padding: 20px 10px 18px; }
  .oku-tur-belge .inner .icons { margin-block-end: 10px; }
  .oku-tur-belge .inner .icons i { inline-size: 50px; block-size: 50px; font-size: 22px; border-radius: 14px; }
  .oku-tur-belge .content .title { font-size: 15px; }
  .oku-kazanim-seridi { padding: 18px 16px; margin-block-start: 26px; }
  .oku-kazanim-seridi li { font-size: 13px; padding: 5px 11px; }
}

/* ── Akademik takvim (koyu tema: kart zemini) ────────────────────────── */
.active-dark-mode .oku-takvim-cizgi .metin { background: var(--oku-kart); }
.oku-takvim-alan.bg-color-white .oku-takvim-cizgi .metin { border: 1px solid var(--oku-kenar); }

/* ── Örnek belge ─────────────────────────────────────────────────────── */
.oku-ornek-belge {
  position: relative;
  display: block;
  max-inline-size: 440px;
  margin-inline: auto;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(14, 58, 110, 0.16);
  rotate: -2deg;
  transition: rotate 0.35s ease, translate 0.35s ease;
}
.oku-ornek-belge:hover, .oku-ornek-belge:focus-visible { rotate: 0deg; translate: 0 -4px; }
.oku-ornek-belge img { display: block; inline-size: 100%; block-size: auto; border-radius: 7px; }
.oku-ornek-buyut {
  position: absolute;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(14, 58, 110, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.oku-ornek-pencere { max-inline-size: min(94vw, 900px); max-block-size: 94vh; padding: 0; overflow: auto; border: 0; border-radius: 12px; background: #fff; }
.oku-ornek-pencere::backdrop { background: rgba(10, 20, 40, 0.75); }
.oku-ornek-pencere img { display: block; inline-size: 100%; block-size: auto; }
.oku-ornek-pencere .kapat {
  position: fixed;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border: 0;
  border-radius: 50%;
  background: #0e3a6e;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.oku-ornek-maddeler .rbt-feature .feature-title { margin-block-end: 4px; font-size: 17px; }
.oku-ornek-maddeler .rbt-feature .feature-description { font-size: 15px; line-height: 1.55; }
@media (max-width: 991px) { .oku-ornek-belge { max-inline-size: 380px; } }

/* ── SSS (ana sayfa): mobilde ilk 6 soru, tamamı rehber sayfasında ───── */
@media (max-width: 767px) { .oku-sss-liste .accordion-item:nth-child(n + 7) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .oku-hero-slayt-ogesi, .oku-hero-slayt-ogesi.aktif { transform: none; transition: none; }
  .oku-donem-karti.acik .oku-donem-durum .nokta { animation: none; }
  .oku-hero-belge .belge, .oku-ornek-belge, .oku-adim-baglanti i { transition: none; }
}

/* Hero yüksekliği: iki slayt + sekmeler temanın sabit 850 px'ine sığmıyor ve şeffaf üst menünün altına giriyordu
   (tema betiği üst boşluğu menü yüksekliği kadar satır içi `padding-top` ile verir; ek boşluk sarmalayıcıda). */
@media (min-width: 1200px) {
  .rbt-banner-7.oku-hero { block-size: auto; min-block-size: 860px; padding-block-end: 56px; }
  .rbt-banner-7.oku-hero .wrapper { padding-block-start: 40px; }
}
/* Üst menüdeki «Kulübe Katıl» düğmesi dar kalınca iki satıra kırılıp yarım görünüyordu (eski kural `.rbt-header-right`i hedefliyordu). */
@media (min-width: 1200px) { .rbt-header-8 .header-right { flex-shrink: 0; } }
.rbt-header-8 .header-right .rbt-btn, .rbt-header-8 .header-right .rbt-btn span { white-space: nowrap; }
/* Logo, menü ve düğme tek satır: logo adı sıkışınca iki satıra kırılmasın (menü açılır oku eklenince 1200 px'te yer daraldı). */
@media (min-width: 1200px) {
  .rbt-header-8 .header-left { flex-shrink: 0; }
  .rbt-header-8 .header-left .oku-logo-yazi .ust { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .rbt-header-8 .mainmenu-nav .mainmenu > li > a { padding: 0 7px; font-size: 14px; }
  .rbt-header-8 .mainmenu-nav .mainmenu > li > a .oku-menu-ok { margin-inline-start: 2px; font-size: 13px; }
}

/* Ana sayfa SSS: bölüm başlığı üstte, soru listesi tam genişlik; iletişim satırı altta. */
.oku-sss-iletisim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 22px 0 0; font-size: 15px; }
.oku-sss-iletisim i { color: var(--color-primary); }

/* ════════════ /sosyal-transkript tanıtım sayfası — 2026-09-27 ════════════ */
footer a[href='/sosyal-transkript']::before { content: '\e919'; }

/* Yapışkan bölüm gezgini (tam genişlik şerit; kulüp sayfasındaki `oku-bolum-gezgini` düğmeleri) */
.oku-rehber-gezgin {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding-block: 10px;
  border-block-end: 1px solid var(--oku-kenar);
  background: color-mix(in srgb, var(--oku-kart) 94%, transparent);
  backdrop-filter: blur(8px);
}
/* Tema üst menüsü kaydırınca sabitlenir (`.rbt-sticky`): masaüstünde 90 px, 1199 px ve altında 119 px yüksekliğinde (ölçüldü). */
body.rbt-header-sticky:has(.rbt-header-wrapper.rbt-sticky) .oku-rehber-gezgin { inset-block-start: 119px; }
@media (min-width: 1200px) { body.rbt-header-sticky:has(.rbt-header-wrapper.rbt-sticky) .oku-rehber-gezgin { inset-block-start: 90px; } }
.oku-rehber-gezgin .oku-bolum-gezgini { position: static; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; justify-content: center; }
.oku-bolum-gezgini.oku-kaydirmali a { white-space: nowrap; }
@media (max-width: 1199px) {
  .oku-bolum-gezgini.oku-kaydirmali { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .oku-bolum-gezgini.oku-kaydirmali::-webkit-scrollbar { display: none; }
}
.oku-rehber :is(#nedir, #kimler, #turler, #nasil, #surec, #takvim, #belgeler, #ornek, #sss, #dogrulama) { scroll-margin-block-start: 150px; }

/* Bilgi kartları (kimler, belge türleri) */
.oku-bilgi-karti { block-size: 100%; padding: 28px 26px 24px; border: 1px solid var(--oku-kenar); border-radius: 16px; background: var(--oku-kart); box-shadow: 0 10px 30px rgba(25, 35, 53, 0.05); }
.oku-bilgi-karti .ikon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; margin-block-end: 16px; border-radius: 14px; background: rgba(47, 87, 239, 0.1); color: var(--color-primary); font-size: 23px; }
.oku-bilgi-karti h3 { margin-block-end: 8px; font-size: 19px; line-height: 1.35; }
.oku-bilgi-karti p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* Çağrı şeridi (üye değil misin?) */
.oku-cagri-seridi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 24px 28px; border-radius: 16px; background: var(--oku-kart); border: 1px dashed rgba(47, 87, 239, 0.35); }
.oku-cagri-seridi p { flex: 1 1 420px; margin: 0; font-size: 16px; line-height: 1.6; }

/* Belge ortak özellikleri */
.oku-belge-ozellik { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-end: 0; padding: 0; list-style: none; }
.oku-belge-ozellik li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; border-radius: 30px; background: var(--oku-yumusak); border: 1px solid var(--oku-kenar); font-size: 14.5px; font-weight: 600; color: var(--oku-metin); }
.oku-belge-ozellik li i { color: var(--color-primary); }
.oku-belge-not { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--oku-soluk); }

/* Başvuru dönemi aşamaları (tarihsiz takvim anlatımı) */
.oku-donem-asamalari .metin span { margin-block-start: 2px; line-height: 1.55; }
.oku-takvim-alan.bg-color-extra2 .oku-takvim-cizgi .ikon { box-shadow: 0 0 0 5px var(--color-extra2, #f9f9ff); }

/* Belge doğrulama şeridi (giriş sayfası düzeni): belge no bağlantısı formun altında, ayrı satırda */
.oku-belge-no-baglanti { margin: 14px 0 0; font-size: 15px; }
.oku-belge-no-baglanti a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 767px) { .oku-cagri-seridi { padding: 20px; } }
/* Hero (1199 px ve altı): temanın 100 px üst boşluğu şeffaf menünün altında gereksiz boşluk bırakıyordu; kısa slayt üste hizalı. */
@media (max-width: 1199px) {
  .rbt-banner-7.oku-hero .wrapper { padding-block: 36px 60px; margin-block-start: 0; }
  .oku-hero-slayt-ogesi { align-self: start; }
}
/* Koyu tema: yeni bölümlerde tema değişkeni (--color-heading) koyu kalıyordu → `--oku-metin`; adım kartları pastel yerine kart zemini. */
.active-dark-mode .service-card-6.oku-adim .inner { background: var(--oku-kart) !important; border-color: var(--oku-kenar); }
.active-dark-mode .oku-hero-belge .belge, .active-dark-mode .oku-ornek-belge { box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45); }
/* Mobil menü: logo adı kapat (×) düğmesinin altına giriyordu. */
.popup-mobile-menu .inner-top .content { gap: 10px; }
.popup-mobile-menu .oku-logo { min-inline-size: 0; }
.popup-mobile-menu .oku-logo img { block-size: 50px !important; margin-block: 0; }
.popup-mobile-menu .oku-logo a { gap: 8px; }
.popup-mobile-menu .oku-logo .oku-logo-yazi .ust { font-size: 15px; }
.popup-mobile-menu .oku-logo .oku-logo-yazi .alt { font-size: 8px; letter-spacing: 0.1px; }

/* Bölüm gezgini: etkin (ekranda bulunulan / tıklanan) bölüm düğmesi belirgin — `BolumGezgini` */
.oku-bolum-gezgini a.aktif { background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px rgba(47, 87, 239, 0.25); }
.oku-bolum-gezgini a.aktif span { background: rgba(255, 255, 255, 0.25); color: #fff; }
.oku-bolum-gezgini a { transition: background-color 0.2s, color 0.2s; }
/* Kulüp sayfasında gezgin <nav> sarmalayıcısıyla da yapışkan kalsın */
.oku-bolum-gezgini-kap { position: sticky; inset-block-start: 90px; z-index: 5; margin-block-end: 24px; }
.oku-bolum-gezgini-kap .oku-bolum-gezgini { position: static; margin: 0; }

/* ════════════ Ortak sıkı bölüm başlığı + bölüm boşluğu — TÜM ön yüz (kullanıcı isteği 2026-09-27; ana sayfadaki `.oku-ana-sayfa` kapsamlı kurallardan genelleştirildi) ════════════
   `components/site/BolumBasligi.tsx` (`BolumBasligi` tam satır, `BaslikBlogu` sütun içi) → `.section-title.oku-sik-baslik`: etiket hapı başlığın SOLUNDA aynı
   satırda, açıklama başlığa yakın (en çok 1100 px); ≤767 px hap üste sarar. Bölüm boşluğu `oku-bolum-bosluk` (80/50), tek bölümlü sayfaların alt boşluğu
   `oku-bolum-bosluk-alt`; temanın genel `rbt-section-gap` sınıfı DEĞİŞMEZ. Sayfa üst bandı (`SayfaBasligi`) bu kapsamda değil. Seçici özgüllükleri eski kurallarla aynı. */
.oku-bolum-bosluk { padding-block: 80px; }
.oku-bolum-bosluk-alt { padding-block-end: 80px; }
@media (max-width: 767px) {
  .oku-bolum-bosluk { padding-block: 50px; }
  .oku-bolum-bosluk-alt { padding-block-end: 50px; }
}

.section-title.oku-sik-baslik:has(> .title) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 10px; }
.section-title.oku-sik-baslik.text-center:has(> .title) { justify-content: center; }
.section-title.oku-sik-baslik:has(> .title) > .subtitle { flex: none; margin: 0; }
.section-title.oku-sik-baslik:has(> .title) > .title { flex: 0 1 auto; min-inline-size: 0; margin: 0; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.25; }
.section-title.oku-sik-baslik:has(> .title) > .description {
  flex: 1 1 100%;
  max-inline-size: 1100px;
  margin-block: 4px 0 !important;
  padding: 0;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
}
.section-title.oku-sik-baslik.text-center:has(> .title) > .description { margin-inline: auto; }
.row.oku-baslik-satir { margin-block-end: 32px !important; }
/* Sola hizalı başlıkta uzun başlık (ör. sıradaki etkinlik adı) alt satıra düşmesin: kalan genişliği alır, hap solda kalır. */
@media (min-width: 768px) { .section-title.oku-sik-baslik.text-start:has(> .title) > .title { flex: 1 1 0; } }
@media (max-width: 767px) {
  .section-title.oku-sik-baslik:has(> .title) > .title { flex-basis: 100%; }
  .section-title.oku-sik-baslik:has(> .title) > .description { font-size: 16px; }
  .row.oku-baslik-satir { margin-block-end: 24px !important; }
}
/* Ana sayfa: yan yana iki başlık (popüler topluluklar · etkinlik türleri) dar sütunda. */
.oku-ana-sayfa .oku-populer-alan .section-title.mb--30 { margin-block-end: 22px !important; }
.oku-ana-sayfa .oku-populer-alan .section-title:has(> .title) > .title { font-size: clamp(24px, 2vw, 30px); }

/* /kulupler sıralama kutusu: tema `bootstrap-select` düğmesi 25 px yükseklik / 10 px yazıyla «mini» kalıyordu → arama kutusuyla aynı
   (46 px, 15 px yazı, 10 px köşe, aynı çerçeve/zemin); mobilde tam genişlik. `KulupGezgini` (kullanıcı isteği 2026-09-27). */
.oku-suzgec-sag .bootstrap-select { inline-size: 240px !important; }
.oku-suzgec-sag .bootstrap-select > .dropdown-toggle {
  block-size: 46px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--oku-kenar) !important;
  border-radius: 10px !important;
  background: var(--oku-kart) !important;
  box-shadow: none !important;
  color: var(--oku-metin) !important;
  font-size: 15px !important;
  font-weight: 400;
  line-height: 1.2;
}
.oku-suzgec-sag .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; }
.oku-suzgec-sag .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { font-size: 15px; line-height: 1.2; }
.oku-suzgec-sag .bootstrap-select > .dropdown-toggle::after { margin-inline-start: 12px; color: var(--oku-soluk); }
.oku-suzgec-sag .bootstrap-select > .dropdown-toggle:hover,
.oku-suzgec-sag .bootstrap-select.show > .dropdown-toggle { border-color: var(--color-primary) !important; }
.oku-suzgec-sag .bootstrap-select > .dropdown-toggle:focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
.oku-suzgec-sag .bootstrap-select .dropdown-menu { min-inline-size: 100% !important; border: 1px solid var(--oku-kenar); border-radius: 10px; background: var(--oku-kart); }
.oku-suzgec-sag .bootstrap-select .dropdown-menu.inner { border: 0; }
.oku-suzgec-sag .bootstrap-select .dropdown-menu li a { padding: 9px 16px; font-size: 15px; color: var(--oku-metin); }
.oku-suzgec-sag .bootstrap-select .dropdown-menu li a:hover { background: var(--oku-yumusak); }
.oku-suzgec-sag .bootstrap-select .dropdown-menu li a.active, .oku-suzgec-sag .bootstrap-select .dropdown-menu li.selected a { background: var(--color-primary); color: #fff; }
@media (max-width: 767px) { .oku-suzgec-sag .bootstrap-select { inline-size: 100% !important; } }

/* Giriş: parolayı göster/gizle göz ikonu kutunun İÇİNDE sağ uçta (etiket üstte olduğu için ikon kutunun alt 50 px'ine hizalı) */
.oku-giris-karti .oku-parola-alani { position: relative; }
.oku-giris-karti .form-group:has(> label).oku-parola-alani > input { padding-inline-end: 52px !important; }
.oku-giris-karti .oku-parola-alani .oku-parola-goz {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-end: 5px;
  inset-block-start: auto;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-body);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}
.oku-giris-karti .oku-parola-alani .oku-parola-goz:hover,
.oku-giris-karti .oku-parola-alani .oku-parola-goz[aria-pressed='true'] { color: var(--color-primary); background: rgba(47, 87, 239, 0.08); }
.oku-giris-karti .oku-parola-alani .oku-parola-goz:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Giriş: kullanıcı adı kutusunun içinde sağda sabit alan adı (@ogr.oku.edu.tr / @osmaniye.edu.tr); kullanıcı yalnız @ öncesini yazar */
.oku-giris-karti .oku-uzantili-alan { position: relative; }
.oku-giris-karti .form-group:has(> label).oku-uzantili-alan > input { padding-inline-end: 160px !important; }
.oku-giris-karti .oku-uzantili-alan .oku-giris-uzanti {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-end: 5px;
  display: flex;
  align-items: center;
  block-size: 40px;
  padding-inline: 12px;
  border-radius: 8px;
  background: rgba(47, 87, 239, 0.08);
  color: var(--color-heading);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 400px) {
  .oku-giris-karti .form-group:has(> label).oku-uzantili-alan > input { padding-inline-end: 142px !important; }
  .oku-giris-karti .oku-uzantili-alan .oku-giris-uzanti { font-size: 13px; padding-inline: 9px; }
}

/* ════════════ Girişsiz «Kulübe Katıl» (2026-09-27): form, genel katılım penceresi, «Katıl» düğmeleri ════════════ */
.oku-katil-dugme { display: inline-flex !important; align-items: center; gap: 6px; block-size: 40px; line-height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.oku-katil-dugme i { font-size: 15px; }
.oku-katilim-formu { margin-block-start: 14px; }
.oku-katilim-formu .form-group { margin-block-end: 14px; }
.oku-katilim-formu .form-group:has(> label) > input[readonly] { background-color: var(--oku-kart) !important; color: var(--oku-soluk); cursor: default; }
.oku-katilim-formu .form-group .oku-kod-ipucu { display: block; margin-block-start: 6px; font-size: 12.5px; line-height: 1.5; color: var(--oku-soluk); }
.oku-katilim-formu input[aria-invalid='true'] { border-color: #d63939 !important; }
.oku-katilim-not { display: flex; gap: 8px; align-items: flex-start; margin-block-end: 14px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: var(--oku-metin); background: rgba(47, 87, 239, 0.07); }
.oku-katilim-not i { margin-block-start: 3px; color: var(--color-primary); }
.oku-katilim-not a { font-weight: 600; text-decoration: underline; }
.oku-katilim-formu .kvkk,
.oku-katilim-govde .kvkk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--oku-soluk); margin-block: 12px; cursor: pointer; }
.oku-katilim-formu .kvkk input { flex: none; inline-size: 18px !important; block-size: 18px !important; margin-block-start: 2px; opacity: 1 !important; position: static !important; visibility: visible !important; accent-color: var(--color-primary); }
.oku-katilim-formu .kvkk a { color: var(--color-primary); text-decoration: underline; }

/* Pencere (Histudy modal düzeni, Bootstrap betiği olmadan) */
.oku-katilim-modal { z-index: 100000; overflow-y: auto; }
.oku-katilim-modal .modal-dialog { max-inline-size: 560px; margin-inline: auto; padding: 16px; }
.oku-katilim-modal .modal-content { position: relative; padding: 34px 30px 28px; border: 0; border-radius: 16px; background: var(--oku-kart); box-shadow: 0 30px 80px rgba(9, 20, 45, 0.35); }
.oku-katilim-modal .modal-header { padding: 0; border: 0; }
.oku-katilim-modal .modal-header .rbt-round-btn { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.oku-katilim-modal .modal-body { padding: 0; }
.oku-katilim-modal .modal-title { margin-block: 12px 10px; padding-inline-end: 34px; color: var(--oku-metin); font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; }
.oku-katilim-govde .durum-satir { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; margin-block: 14px; font-size: 15px; }
.oku-katilim-govde .durum-satir i { font-size: 20px; margin-block-start: 2px; }
.oku-katilim-govde .durum-satir.bilgi { background: rgba(47, 87, 239, 0.08); color: var(--oku-metin); }
.oku-katilim-govde .durum-satir.basari { background: rgba(62, 183, 94, 0.12); color: #1d6f3a; }
.oku-katilim-govde .durum-satir.uyari { background: rgba(255, 143, 60, 0.14); color: #8a4d0e; }
.active-dark-mode .oku-katilim-govde .durum-satir.basari { color: #8be3a8; }
.active-dark-mode .oku-katilim-govde .durum-satir.uyari { color: #ffc58a; }
.oku-katilim-yukleniyor, .oku-katilim-sayi { margin: 0 0 8px; font-size: 13.5px; color: var(--oku-soluk); }
.oku-katilim-liste { list-style: none; margin: 0; padding: 0 4px 0 0; max-block-size: min(46vh, 420px); overflow-y: auto; display: grid; gap: 8px; }
.oku-katilim-liste li { margin: 0; padding: 0; min-inline-size: 0; }
.oku-katilim-liste button { display: flex; align-items: center; gap: 12px; inline-size: 100%; padding: 10px 12px; border: 1px solid var(--oku-kenar); border-radius: 12px; background: var(--oku-kart); color: var(--oku-metin); text-align: start; transition: border-color 0.15s ease, background 0.15s ease; }
.oku-katilim-liste button:hover:not(:disabled), .oku-katilim-liste button:focus-visible { border-color: var(--color-primary); background: rgba(47, 87, 239, 0.05); }
.oku-katilim-liste button.secili { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(47, 87, 239, 0.15); }
.oku-katilim-liste button:disabled { opacity: 0.6; cursor: not-allowed; }
.oku-katilim-liste img, .oku-katilim-liste .harf { flex: 0 0 36px; inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; }
.oku-katilim-liste .harf { display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.oku-katilim-liste .bilgi { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.oku-katilim-liste .bilgi strong { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.oku-katilim-liste .bilgi small { font-size: 12.5px; color: var(--oku-soluk); }
.oku-katilim-liste button > i { color: var(--oku-soluk); }
.oku-katilim-secili { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font-size: 14px; color: var(--oku-soluk); }
.oku-katilim-secili a { color: var(--color-primary); text-decoration: underline; }
.oku-katilim-secili .rbt-btn-link { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--color-primary); }
@media (max-width: 575px) {
  .oku-katilim-modal .modal-dialog { padding: 10px; }
  .oku-katilim-modal .modal-content { padding: 30px 16px 20px; }
  .oku-katilim-modal .modal-title { font-size: 19px; }
}

/* Popüler topluluklar: satırın yanında «Katıl» (bağlantı içine düğme konamaz; kardeş öğe) */
.oku-populer-liste li.oku-populer-oge { display: flex; align-items: stretch; gap: 8px; }
.oku-populer-oge .oku-populer-satir { flex: 1 1 auto; min-inline-size: 0; }
.oku-populer-oge .oku-populer-katil { flex: 0 0 auto; align-self: center; }
.oku-populer-oge .oku-katil-dugme.oku-populer-katil { block-size: 36px; line-height: 36px; padding: 0 12px; font-size: 13px; }
.oku-populer-oge .oku-uyelik-durum.oku-populer-katil { font-size: 12px; padding: 4px 8px; white-space: nowrap; }

/* Kulübe Katıl: öğrenci e-postası kutusunun içinde sağda sabit @ogr.oku.edu.tr (giriş sayfasındaki düzen); yalnız @ öncesi yazılır */
.oku-katilim-formu .oku-uzantili-alan { position: relative; margin-block-end: 6px; }
.oku-katilim-formu .form-group:has(> label).oku-uzantili-alan > input { padding-inline-end: 160px !important; }
.oku-katilim-formu .oku-uzantili-alan .oku-eposta-uzanti {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-end: 5px;
  display: flex;
  align-items: center;
  block-size: 40px;
  padding-inline: 12px;
  border-radius: 8px;
  background: rgba(47, 87, 239, 0.08);
  color: var(--color-heading);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.oku-katilim-formu .oku-kod-ipucu.oku-eposta-ipucu { display: block; margin-block: 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--oku-soluk); }
@media (max-width: 400px) {
  .oku-katilim-formu .form-group:has(> label).oku-uzantili-alan > input { padding-inline-end: 142px !important; }
  .oku-katilim-formu .oku-uzantili-alan .oku-eposta-uzanti { font-size: 13px; padding-inline: 9px; }
}