/*  GENEL ARKA PLAN*/

body {
  background: #ffffff !important;   /* Genel site arka planı */
  color: #fff;                      /* Genel yazı rengi */
  font-family: Arial, Helvetica, sans-serif;
}

/* SAĞ BLOK (sag-sticky) */
.sag-sticky {
  background: #ffffff;      /* Açık krem (ana sayfaya uyumlu, istersen değiştir) */
  border-radius: 13px;
  box-shadow: 0 2px 10px #ffffff;
  padding: 16px;
  margin-bottom: 28px;
}

/* ANA BAŞLIK & ALT BAŞLIK (Rüya Tabirleri A'dan Z'ye ve altındaki yazı) */
h1.text-center.mb-4,
h2, .index-ozel-baslik {
  color: #A68774 !important;
  font-family: 'PoiretOne', Arial, sans-serif !important;
}
.lead, .alt-baslik, p.lead {
  color: #A68774 !important;
  font-size: 1.18rem;
}


/* ARAMA KUTUSU ve BUTONU */
input[type="text"].form-control {
  background: #ffffff !important;
  color: #000 !important;
  font-weight: 500;
  border: 2px solid #A68774 !important;
  border-radius: 8px;
}
input[type="text"].form-control::placeholder {
  color: #A68774;
  opacity: 1;
}

.btn-primary {
  background: rgba(186, 155, 133, 0.69) !important;
  color: #000 !important;
  border: none !important;
  font-weight: bold;
  border-radius: 8px;
}

/*  EN ÇOK YORUMLANAN RÜYALAR BAŞLIĞI*/
/* En Çok Yorumlanan Rüyalar bölümü kartı */

.populer-list {
  border-radius: 13px !important;
  overflow: hidden;
  border: 1.5px solid #bfa48a !important;
  background: #fff !important;
}

.populer-list .list-group-item {
  border: none !important;              /* Bootstrap’ın iç çizgisini kaldır */
  border-bottom: 1px solid #edd9cb !important;  /* Araya açık bir çizgi ekle */
  font-size: 0.93rem;  /* metin boyutu*/
  color: #a68774;
  font-weight: bold;
  background: #fff !important;
  padding: 13px 16px;
}

.populer-list .list-group-item:last-child {
  border-bottom: none !important;
}
.populer-link {
  color: #a68774 !important;
  text-decoration: none;
  transition: color 0.16s;
}
.populer-link:hover { color: #6a4c34 !important; text-decoration: underline; }

.badge.bg-primary {
  background: #bfa48a !important;  /* Yorum sayısı rengi */
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
}


/* Yorum badge'i için */
.populer-list .badge,
.populer-list .list-group-item .badge {
  background: #BA9B85 !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.89em;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px #bfa48a11;
  padding: 5px 13px !important;
  margin-left: 12px;
  border: none;
  min-width: 58px; /* Hepsi aynı hizada olsun diye */
  text-align: center;
}




/* Responsive */
@media (max-width: 700px) {
  .populer-list {
    padding: 7px 2px;
  }
}


/* AKORDEON (Accordion) BAŞLIKLAR & İÇERİK yazi basligini index.php den düzelt */
    @font-face {
      font-family: 'PoiretOne';
      src: url('/fonts/PoiretOne-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    h1, h2, h3, h4, .index-ozel-baslik, h4.fw-bold {
      font-family: 'PoiretOne', Arial, sans-serif !important;
      letter-spacing: 0.01em;
      color: #826448;
    }
    h1.text-center.mb-4 { font-size: 3.7rem; }
    .accordion-button {
      border: 2px solid #e5d3c6 !important;


.accordion-button strong {
  font-size: 2.7rem !important;   /* istediğin boyuta göre ayarla */
  color: #a5897d !important;
  font-family: 'PoiretOne', Arial, sans-serif !important;
  letter-spacing: 0.015em;
}


    }
.accordion-button:focus, 
.accordion-button:active, 
.accordion-button:focus-visible {
  border-color: #e5d3c6 !important;      /* Kendi rengin */
  box-shadow: none !important;
  outline: none !important;
  background: #FDF0EC !important;        /* Aktif rengin ile aynı kalabilir */
  color: #a5897d !important;             /* Senin istediğin renk */
}
    .accordion-button:not(.collapsed) {
      background-color: #FDF0EC!important;
      color: #a5897d !important;
      box-shadow: none !important;
    }
    .accordion-item {
      border-bottom: none !important;
    }


/*KARTLAR & RESİM BLOKLARI  */
.card, .benzer-ruya-card {
  background: #ffffff !important;
  border-radius: 13px !important;          /* Kartın köşesi */
  border: 1.5px solid #bfa48a !important;
  box-shadow: 0 2px 13px #e9d6bf40;
  margin-bottom: 18px;
}
.card-title {
  color: #A68774 !important;
  font-size: 2.0rem;
  font-weight: bold;
}
.card-body {
  color: #000 !important;
}
.card-text {
  color: #4D3A2A;         /* İstediğin koyu kahve, veya #000 yapmak istersen #000 yaz */
  font-size: 1.13rem;     /* Biraz daha büyük ya da küçük istersen değeri artır/azalt */
  font-weight: 400;       /* İstersen 500 yapabilirsin, bold olmasın */
  line-height: 1.6;       /* Okunabilirlik için satır arası */
  margin-bottom: 0.6em;   /* Alt boşluk, gerekirse oynayabilirsin */
}

/* Karttaki görselin köşesi */
.card-img-top,
.resim-kapsayici img,
.benzer-ruya-card img {
  border-radius: 13px !important;          /* Resim köşesi */
  object-fit: cover;
}
/* KÜÇÜK TARİH METNİ */
.text-muted, small.text-muted {
  color: #BFA48A !important;
  opacity: 1 !important;
  font-size: 0.97rem;
}

/* MOBİL KISIM */
/* SADECE MOBİLDE OVERFLOW ENGELLE! */
@media (max-width: 700px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/*  */
@media (min-width: 992px) {
  .sag-sticky {
    position: sticky;
    top: 32px;  /* Gerekirse 32 yerine 64 veya 80 yapabilirsin */
    z-index: 11;
  }
}

/*  En Son Eklenenler*/
.son-eklenen-list {
  border-radius: 13px !important;
  overflow: hidden;
  border: 1.5px solid #bfa48a !important;
  background: #fff !important;
  margin-bottom: 10px;
}

.son-eklenen-list .list-group-item {
  border: none !important;
  border-bottom: 1px solid #edd9cb !important;
   font-size: 1.25rem !important;
  color: #a68774;
  font-weight: 500;
  background: #fff !important;
  padding: 11px 15px;
}

.son-eklenen-list .list-group-item:last-child {
  border-bottom: none !important;
}

/* Harf kutusu: Kutulu, borderlı ve renkli */

.btn-harf {
  display: inline-block;
  background: #fff !important;       /* Kutunun arka planı */
  color: #A68774 !important;         /* Yazı rengi */
  border: 1px solid #A68774 !important; /* Kenar rengi */
  border-radius: 6px !important;     /* Köşe yumuşaklığı */
  font-weight: bold;
  font-size: 0.98rem;
  min-width: 28px;
  min-height: 28px;
  line-height: 20px;
  margin: 3px;
  box-shadow: 0 1px 6px #e9d6bf30;
  transition: all 0.14s;
  text-align: center;
  padding: 4px 0;
}

/* Üzerine gelince renk değişsin */
.btn-harf:hover,
.btn-harf:focus {
  background: #A68774 !important;
  color: #fff !important;
  border-color: #A68774 !important;
  box-shadow: 0 2px 12px #A6877450;
  text-decoration: none;
}

/* Aktif/Seçili harf (mesela şu anki harf) */
.btn-harf.active, .btn-harf:active {
  background: #A68774 !important;
  color: #fff !important;
  border-color: #A68774 !important;
  box-shadow: 0 1px 8px #A6877440;
}

/*  KATEGORILER*/
.btn-kat {
  display: inline-block;
  background: #fff !important;       /* Kutunun arka planı */
  color: #A68774 !important;         /* Yazı rengi */
  border: 1px solid #A68774 !important; /* Kenar rengi */
  border-radius: 5px !important;     /* Köşe yumuşaklığı */
  font-weight: bold;
  font-size: 0.97rem;
  min-width: 15px;
  min-height: 20px;
  line-height: 20px;
  margin: 3px;
  box-shadow: 0 1px 8px #e9d6bf25;
  transition: all 0.15s;
  text-align: center;
  padding: 4px 15px;
}

.btn-kat:hover,
.btn-kat:focus {
  background: #A68774 !important;
  color: #fff !important;
  border-color: #A68774 !important;
  box-shadow: 0 2px 14px #A6877444;
  text-decoration: none;
}

.btn-kat.active, .btn-kat:active {
  background: #A68774 !important;
  color: #fff !important;
  border-color: #A68774 !important;
  box-shadow: 0 1px 10px #A6877440;
}

/*  */

/* resimler üzerine gidince siyah oluyor */

.resim-kapsayici {
  width: 100%;                 /* Kart genişliği kadar */
  aspect-ratio: 16/9;          /* Oran ayarlayabilirsin */
  max-width: 100%;             /* Genişliği kısıtlamak için */
  background: #f8f5f0;
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resim-kapsayici img {
  width: 100%;                /* Veya 420px gibi de yazabilirsin */
  height: 510px;              /* Burası yükseklik! Değiştir → 170px, 250px, 300px ... */
  object-fit: cover;          /* Kutudan taşmasın diye */
  border-radius: 13px;
  transition: filter 0.32s;
}

/* Üzerine gelince siyah-beyaz (grayscale) yapar */
.ruya-img-hover {
  transition: filter 0.32s cubic-bezier(.4,2,.5,1);
  cursor: pointer;
  border-radius: 13px;
}
.ruya-img-hover:hover {
  filter: grayscale(100%);
}

/* resimler üzerine gidince EFEKT */
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 230px;              /* Kart yüksekliği */
  perspective: 1000px;
  border-radius: 13px;
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 13px;
}
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-box-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}
.flip-box-back {
  background: #A68774;
  color: #fff;
  transform: rotateY(180deg);
  padding: 18px 14px;
}


/* ==== SAYFALAMA (Pagination) ==== */

/* Tüm pagination butonları */
.pagination .page-link {
  color: #a5876d !important;
  background: #fff !important;
  border: 1.5px solid #bfa48a !important;
  border-radius: 6px !important;
  font-size: 0.89rem !important;
  font-weight: 600 !important;
  transition: all 0.2s;
  box-shadow: none !important;
  outline: none !important;
}

/* Aktif (seçili) sayfa */
.pagination .page-item.active .page-link {
  background: #fdf0ec !important;
  color: #a5876d !important;
  border-color: #bfa48a !important;
  font-weight: bold;
}

/* Oklar (ileri/geri) */
.pagination .page-link.page-arrow {
  font-size: 0.89rem !important;
}

/* Hover ve focus stilleri */
.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination .page-link:active,
.pagination .page-link:focus-visible {
  background: #f2e2d3 !important;
  color: #a5876d !important;
  border-color: #bfa48a !important;
  box-shadow: none !important;
  outline: none !important;
}