/* ============================================================
   KPSS Akademisi — harita, kronoloji, dil bilgisi
   site.css'in üstüne yüklenir; onun değişkenlerini kullanır.
   ============================================================ */

/* ============================================================
   HARİTA
   ============================================================ */
.harita-kap {
  position: relative;
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  overflow: hidden;
  box-shadow: var(--golge);
  /* Görselin kendi oranı: 1026×490 */
  aspect-ratio: 1026 / 490;
}
.harita-gorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Noktalar yüzde konumlu: harita küçülünce orantılı kayar */
.harita-nokta {
  position: absolute;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--nokta-renk, var(--ana));
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow .12s ease;
  z-index: 2;
}
.harita-nokta:hover {
  transform: scale(1.55);
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,.34);
}
.harita-nokta.secili {
  transform: scale(1.8);
  z-index: 6;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nokta-renk) 30%, transparent),
              0 2px 8px rgba(0,0,0,.3);
}
.harita-nokta:focus-visible { transform: scale(1.7); z-index: 6; }

/* Sınav kipindeki hedef işareti — nabız gibi atar */
.harita-hedef {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--kirmizi);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  z-index: 4;
}
.hedef-halka {
  position: absolute;
  inset: -12px;
  border: 2.5px solid var(--kirmizi);
  border-radius: 50%;
  opacity: .75;
  animation: nabiz 1.7s ease-out infinite;
}
@keyframes nabiz {
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Seçilen yerin ayrıntı paneli */
.yer-panel {
  position: sticky;
  bottom: 16px;
  margin-top: -74px;
  z-index: 40;
  padding: 0 4px;
}
.yer-panel-ic {
  background: var(--kagit);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge-buyuk);
  padding: 16px 18px;
}

/* Liste görünümü */
.yer-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.yer-kart {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--nokta-renk, var(--ana));
  border-radius: var(--yuvarlak-k);
  padding: 15px 16px;
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.yer-kart:hover { box-shadow: var(--golge-orta); transform: translateY(-1px); }
.yer-im {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 14px;
}
.yer-isim { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.yer-tur  { font-size: 12px; color: var(--soluk); }
.yer-aciklama {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--orta);
}

/* Sınav düzeni */
.harita-sinav { max-width: 820px; margin: 0 auto; }
.sinav-skor { margin-bottom: 14px; }
.sinav-soru { margin-top: 18px; }
.sinav-baslik {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 16px; font-weight: 600; margin: 0 0 14px;
}
.sinav-siklar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.sik {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--kagit);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak-k);
  font-family: inherit; font-size: 15px; text-align: left;
  color: var(--metin); cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis), transform var(--gecis);
}
.sik:hover { border-color: var(--ana); background: var(--ana-soluk); }
.sik:active { transform: translateY(1px); }
.sik-harf {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--zemin); color: var(--orta);
  font-weight: 700; font-size: 13px;
}

/* ============================================================
   KRONOLOJİ
   ============================================================ */
.donem-kart { position: relative; }
.donem-sira {
  position: absolute; top: 16px; right: 18px;
  font-family: 'Bitter', Georgia, serif;
  font-size: 34px; font-weight: 700;
  color: var(--ders-renk, var(--ana));
  opacity: .16; line-height: 1;
}

.donem-tepe {
  border-radius: var(--yuvarlak);
  border-left: 4px solid var(--donem-renk, var(--ana));
  padding: 20px 22px;
  margin-bottom: 22px;
}
.donem-tepe h3 { font-size: 21px; margin-bottom: 5px; }
.donem-tepe p  { margin: 0 0 11px; color: var(--orta); font-size: 15px; }

.alt-donem {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 16px; margin: 24px 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--donem-renk, var(--ana));
}
.alt-donem span {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 500; color: var(--soluk);
}

.zaman-cizelge { overflow: hidden; }
.zaman-satir {
  display: flex; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--cizgi);
}
.zaman-satir:last-child { border-bottom: 0; }
.zaman-satir:hover { background: var(--kagit-alt); }

.zaman-yil {
  flex-shrink: 0;
  width: 62px;
  font-family: 'Bitter', Georgia, serif;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--donem-renk, var(--ana));
  text-align: right;
  /* Yıl sütunu ile olay arasında ince bir ayraç */
  border-right: 2px solid var(--cizgi);
  padding-right: 12px;
}
.zaman-govde { flex: 1; min-width: 0; }
.zaman-olay  { font-size: 15px; line-height: 1.55; }
.zaman-donem {
  font-size: 12px; color: var(--soluk); margin-top: 3px;
}

/* ============================================================
   DİL BİLGİSİ
   ============================================================ */
.dil-alan { max-width: 580px; margin: 0 auto; padding: 24px 0 60px; }

.dil-kahraman {
  text-align: center;
  padding: 30px 22px;
  margin-bottom: 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 420px 220px at 30% 0%, var(--lavanta-soluk), transparent 72%),
    radial-gradient(ellipse 380px 200px at 78% 100%, var(--gokyuzu-soluk), transparent 72%),
    var(--kagit);
  border: 1px solid var(--cizgi);
}
.dil-im {
  display: inline-grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ana), #7C8AD6);
  color: #fff;
  font-family: 'Bitter', Georgia, serif;
  font-size: 25px; font-weight: 700;
  margin-bottom: 14px;
}
.dil-kahraman h1 { font-size: 24px; margin-bottom: 6px; }
.dil-kahraman p  { margin: 0; color: var(--orta); font-size: 15px; }

.dil-soru { text-align: center; margin: 22px 0 18px; }
.dil-soru p {
  margin: 10px 0 0;
  font-family: 'Bitter', Georgia, serif;
  font-size: 18px; font-weight: 600;
}

.dil-siklar { display: flex; flex-direction: column; gap: 13px; }
.dil-sik {
  padding: 24px 20px;
  background: var(--kagit);
  border: 2px solid var(--cizgi);
  border-radius: 18px;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  color: var(--metin);
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis),
              transform var(--gecis), box-shadow var(--gecis);
  line-height: 1.35;
}
.dil-sik:hover {
  border-color: var(--ana);
  background: var(--ana-soluk);
  transform: translateY(-2px);
  box-shadow: var(--golge-orta);
}
.dil-sik:active { transform: translateY(0); }

/* Önceki sorunun geri bildirimi */
.dil-geri {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  border-radius: var(--yuvarlak-k);
  font-size: 14.5px;
  margin-bottom: 14px;
}
.dil-geri i { font-size: 17px; flex-shrink: 0; }
.dil-geri.dogru  { background: var(--yesil-soluk);  color: #256B47; }
.dil-geri.yanlis { background: var(--kirmizi-soluk); color: #96392E; }
.dil-geri s { opacity: .65; }

.dil-seri {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px;
  background: var(--sari-soluk);
  color: #7A5A12;
  border-radius: 100px;
  font-size: 13.5px; font-weight: 600;
  margin-bottom: 14px;
}

/* Sonuç ekranındaki yanlış listesi */
.yanlis-satir {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 15px;
}
.yanlis-satir:last-child { border-bottom: 0; }
.yanlis-eski  { color: var(--kirmizi); text-decoration: line-through; opacity: .8; }
.yanlis-dogru { color: var(--yesil); font-weight: 600; }

/* ============================================================
   Dar ekran
   ============================================================ */
@media (max-width: 860px) {
  .yer-panel { margin-top: 12px; position: static; }
  .sinav-siklar { grid-template-columns: 1fr; }
  .harita-nokta { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
}

@media (max-width: 560px) {
  .zaman-yil { width: 50px; font-size: 14px; padding-right: 9px; }
  .zaman-satir { gap: 10px; padding: 10px 13px; }
  .dil-sik { padding: 20px 16px; }
  .donem-sira { font-size: 26px; }
  .yer-izgara { grid-template-columns: 1fr; }
}

/* ============================================================
   Azaltılmış hareket
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hedef-halka { animation: none; opacity: .5; }
  .harita-nokta:hover, .dil-sik:hover { transform: none; }
}

/* ============================================================
   Mağaza bölümü — ana sayfa
   ============================================================ */
.magaza {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 36px 38px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 460px 260px at 8% 10%,  var(--nane-soluk),    transparent 70%),
    radial-gradient(ellipse 420px 240px at 92% 90%, var(--lavanta-soluk), transparent 70%),
    var(--kagit);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  overflow: hidden;
}
.magaza-metin h2 { font-size: 27px; margin-bottom: 10px; }
.magaza-metin p  { margin: 0 0 16px; color: var(--orta); max-width: 440px; }

.magaza-liste {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.magaza-liste li {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--orta);
}
.magaza-liste i { color: var(--yesil); font-size: 15px; }

.magaza-dugmeler { display: flex; gap: 11px; flex-wrap: wrap; }
.magaza-dug {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  background: var(--metin);
  color: #fff;
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.magaza-dug:hover {
  background: #17222E;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(35,48,63,.24);
}
.magaza-dug i { font-size: 26px; }
.magaza-dug span {
  display: flex; flex-direction: column; line-height: 1.2;
  font-size: 16px; font-weight: 600;
}
.magaza-dug small {
  font-size: 10.5px; font-weight: 500;
  opacity: .72; letter-spacing: .04em; text-transform: uppercase;
}

/* Telefon temsili — görsel dosya yerine CSS ile çizildi,
   içerik değişince güncelleme gerektirmiyor */
.magaza-gorsel { display: flex; justify-content: center; }
.telefon {
  width: 190px; height: 330px;
  border-radius: 28px;
  background: linear-gradient(160deg, #2E3B4D, var(--metin));
  padding: 9px;
  box-shadow: 0 14px 40px rgba(35,48,63,.26), 0 2px 8px rgba(35,48,63,.14);
  transform: rotate(-4deg);
}
.telefon-ic {
  width: 100%; height: 100%;
  background: var(--zemin);
  border-radius: 21px;
  padding: 16px 13px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.telefon-cizgi {
  width: 46px; height: 4px; border-radius: 100px;
  background: rgba(35,48,63,.16);
  margin: 0 auto 16px;
}
.telefon-kart {
  background: var(--kagit);
  border-radius: 14px;
  padding: 15px 13px;
  box-shadow: 0 2px 10px rgba(35,48,63,.08);
  flex: 1;
}
.tk-rozet {
  width: 52px; height: 15px; border-radius: 100px;
  background: var(--ana-soluk); margin-bottom: 13px;
}
.tk-satir { height: 9px; border-radius: 100px; background: #DDE2EA; margin-bottom: 8px; }
.tk-satir.uzun { width: 100%; }
.tk-satir.orta { width: 74%; }
.tk-satir.kisa { width: 56%; background: #C9D3E0; }
.tk-ayrac {
  height: 1px; background: var(--cizgi);
  margin: 15px 0 13px;
}
.telefon-dugmeler {
  display: flex; justify-content: center; gap: 13px; margin-top: 15px;
}
.td {
  width: 34px; height: 34px; border-radius: 50%;
  background: #E3E8EF;
}
.td.kirmizi { background: #F6D5D0; }
.td.yesil   { background: #CFEADD; }

@media (max-width: 860px) {
  .magaza { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .magaza-gorsel { order: -1; }
  .telefon { width: 158px; height: 274px; transform: rotate(-3deg); }
  .magaza-metin h2 { font-size: 23px; }
}

@media (max-width: 420px) {
  .magaza-dugmeler { flex-direction: column; }
  .magaza-dug { justify-content: center; }
}

/* ============================================================
   Reklam alanları
   ============================================================ */
.reklam-alan {
  margin: 26px 0;
  padding: 10px 0;
  min-height: 90px;
  text-align: center;
  position: relative;
}
/* "Reklam" etiketi: kullanıcı içerikle reklamı ayırt edebilsin.
   AdSense politikası da içerikten ayırt edilebilir olmasını istiyor. */
.reklam-etiket {
  display: block;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cok-soluk);
  margin-bottom: 6px;
}
.reklam-alan ins { display: block; }

.reklam-ici {
  margin: 30px 0;
  padding: 16px 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}

@media (max-width: 520px) {
  .reklam-alan { margin: 20px 0; min-height: 60px; }
}

/* ============================================================
   Favori yıldızı
   ============================================================ */
.yildiz-form { display: inline-flex; margin: 0; flex-shrink: 0; }

.yildiz {
  background: none; border: 0; cursor: pointer;
  color: var(--cok-soluk); font-size: 17px;
  padding: 5px 7px; border-radius: 9px; line-height: 1;
  transition: color var(--gecis), background var(--gecis), transform var(--gecis);
}
.yildiz:hover { background: var(--sari-soluk); color: var(--sari); }
.yildiz:active { transform: scale(.9); }
.yildiz.dolu { color: var(--sari); }

/* Koyu zeminli bilgi kartlarında yıldız beyaz olmalı */
.bilgi-alt .yildiz { color: rgba(255,255,255,.55); margin-left: auto; }
.bilgi-alt .yildiz:hover { background: rgba(255,255,255,.18); color: #fff; }
.bilgi-alt .yildiz.dolu { color: #FFD97A; }

/* Çalışma kartının üst şeridinde */
.soru-ust .yildiz { font-size: 16px; padding: 3px 6px; }

/* ============================================================
   Favoriler sayfası
   ============================================================ */
.favori-kart {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--fav-renk, var(--ana));
  border-radius: var(--yuvarlak-k);
  padding: 15px 17px;
  transition: box-shadow var(--gecis);
}
.favori-kart:hover { box-shadow: var(--golge); }
.favori-baslik {
  font-family: 'Bitter', Georgia, serif;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  margin: 0 0 5px;
}
.favori-metin {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--orta);
}

/* İçi boş tür sekmesi — tıklanabilir ama dikkat çekmesin */
.cip.sonuk { opacity: .5; }