/* =====================================================
   YASIN SURESI - Original Design (yasin.suresi.gen.tr)
   Blogger Theme CSS - Exact Clone
   ===================================================== */

/* =====================================================
   Base Styles
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  margin: auto;
  font-size: 14px;
  text-align: left;
  line-height: 150%;
  background: #fff;
  margin-top: 1px;
  margin-bottom: 1px;
  max-width: 1024px;
  min-width: 320px;
}

/* =====================================================
   Typography
   ===================================================== */
h1, h2, h3, h4 {
  line-height: normal;
  color: #333;
  font-size: 22px;
  margin: 10px 0;
}

p {
  line-height: 150%;
  margin: 4px;
}

a, a:link, a:visited, a:hover, a:active {
  color: #000080;
  text-decoration: none;
  font-weight: 600;
}

ul, ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* =====================================================
   Header (.h)
   ===================================================== */
.h {
  background-color: #f8f8f8;
  border: solid #ddd 1px;
  border-radius: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
}

.h a {
  color: #333;
  font-size: 26px;
  font-weight: 700;
  padding: 20px;
  text-align: center;
  display: block;
  text-decoration: none;
}

/* =====================================================
   Menu (#m)
   ===================================================== */
#m input[type=checkbox] {
  display: none;
}

#m input[type=checkbox]:checked + .mg + #me {
  display: block !important;
}

.mg {
  font-weight: 700;
  text-decoration: none;
  color: #333;
  background: #f5f5f5;
  text-align: center;
  padding: 10px 0;
  display: block;
  border: solid #ddd 1px;
  border-radius: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
  cursor: pointer;
}

#me {
  display: none;
}

#m ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#m li {
  display: block;
  border: solid #ddd 1px;
  border-radius: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
}

#m li a {
  display: block;
  min-width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #333;
  background: #f5f5f5;
  text-decoration: none;
  font-weight: 400;
}

#m li:hover a,
#m li a:hover {
  background: #ddd;
}

/* =====================================================
   Content Container (.c)
   ===================================================== */
.c {
  background-color: #fff;
  padding: 9px;
  border: solid #ddd 1px;
  border-radius: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
}

/* =====================================================
   Footer (.f)
   ===================================================== */
.f {
  background-color: #F7F7F7;
  text-align: center;
  padding: 9px;
  border: solid #ddd 1px;
  border-radius: 3px;
  margin-top: 1px;
  margin-bottom: 1px;
}

/* =====================================================
   CTA Link Box (.l)
   ===================================================== */
.l {
  margin: 20px 0;
  background-color: #cce5ff;
  text-align: center;
  box-shadow: 0 0 3px #000;
  border-radius: 10px;
  clear: both;
}

.l a {
  font-weight: 700;
  text-decoration: none;
  color: #1f3a93;
  font-size: 18px;
  padding: 15px 5px;
  display: block;
  line-height: normal;
}

/* =====================================================
   Alert/Info Boxes (.p0 - .p5)
   ===================================================== */
.p0, .p1, .p2, .p3, .p4, .p5 {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  border: solid 1px #676767;
}

.p0 { background-color: #cce5ff; } /* Primary/Info - Açık Mavi */
.p1 { background-color: #e2e3e5; } /* Secondary - Gri */
.p2 { background-color: #d4edda; } /* Success - Açık Yeşil */
.p3 { background-color: #f8d7da; } /* Danger - Açık Kırmızı */
.p4 { background-color: #fff3cd; } /* Warning - Açık Sarı */
.p5 { background-color: #d1ecf1; } /* Info - Açık Cyan */

/* =====================================================
   Images
   ===================================================== */
img {
  width: 99%;
  height: auto;
  margin-left: 0;
  display: block;
}

.r {
  width: 99%;
  height: auto;
}

/* =====================================================
   Platform/App Store Links (.pyls)
   ===================================================== */
.pyls {
  margin: 10px 0px;
  background-color: #d4edda;
  border-radius: 10px;
  border: solid 1px #676767;
  text-align: center;
  font-size: 18px;
  padding: 10px;
}

.pyls span a {
  display: inline-block;
  margin: 5px;
  text-decoration: none;
  padding: 10px;
  color: #FFF;
  border-radius: 5px;
}

.sf a { background-color: #2B416E; } /* App Store */
.sw a { background-color: #0A5C2C; } /* Play Store */

/* =====================================================
   Tables
   ===================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 700;
}

/* =====================================================
   Navigation Cards (Homepage)
   ===================================================== */
.nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.nav-card {
  flex: 1 1 calc(50% - 10px);
  min-width: 140px;
  background-color: #cce5ff;
  border-radius: 10px;
  box-shadow: 0 0 3px #000;
  text-align: center;
  padding: 15px 10px;
  text-decoration: none;
  color: #1f3a93;
  font-weight: 700;
  font-size: 16px;
  display: block;
}

.nav-card:hover {
  background-color: #b8daff;
  color: #1f3a93;
}

.nav-card__icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.nav-card__title {
  font-size: 16px;
  margin: 0;
  color: #1f3a93;
}

.nav-card__desc {
  font-size: 12px;
  color: #333;
  font-weight: 400;
  margin-top: 5px;
}

@media (min-width: 600px) {
  .nav-card {
    flex: 1 1 calc(33.333% - 10px);
  }
}

@media (min-width: 800px) {
  .nav-card {
    flex: 1 1 calc(25% - 10px);
  }
}

/* =====================================================
   Verse Display
   ===================================================== */
.verse {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}

.verse:last-child {
  border-bottom: none;
}

.verse__number {
  display: inline-block;
  background: #cce5ff;
  color: #1f3a93;
  padding: 5px 10px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  min-width: 35px;
  text-align: center;
}

.verse__arabic {
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade', serif;
  font-size: 24px;
  line-height: 2;
  direction: rtl;
  text-align: right;
  margin-bottom: 10px;
  color: #333;
}

.verse__transliteration {
  font-style: italic;
  color: #555;
  margin-bottom: 8px;
  font-size: 15px;
}

.verse__translation {
  color: #333;
  line-height: 1.6;
}

/* =====================================================
   Audio Player
   ===================================================== */
.audio-player {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 15px;
  margin: 10px 0;
}

.audio-player__title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.audio-player__subtitle {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  color: #666;
  margin-bottom: 10px;
  font-size: 16px;
}

.audio-player audio {
  width: 100%;
}

/* =====================================================
   FAQ Accordion
   ===================================================== */
.faq-item {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 5px 0;
}

.faq-item__question {
  width: 100%;
  padding: 15px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

.faq-item__question:hover {
  background: #eee;
}

.faq-item__icon {
  font-size: 14px;
  transition: transform 0.2s;
}

.faq-item--open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  display: none;
  padding: 0 15px 15px;
  color: #333;
  line-height: 1.6;
}

.faq-item--open .faq-item__answer {
  display: block;
}

/* =====================================================
   Hadith List
   ===================================================== */
.hadith-item {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 15px;
  margin: 10px 0;
  border-left: 4px solid #1f3a93;
}

.hadith-item__number {
  display: inline-block;
  background: #cce5ff;
  color: #1f3a93;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.hadith-item__text {
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #333;
}

.hadith-item__source {
  color: #666;
  font-size: 12px;
}

/* =====================================================
   Virtues/Importance Items
   ===================================================== */
.virtue-item {
  background: #d4edda;
  border: 1px solid #676767;
  border-radius: 10px;
  padding: 15px;
  margin: 10px 0;
}

.virtue-item__title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.virtue-item__text {
  color: #333;
  line-height: 1.6;
}

/* =====================================================
   Contact
   ===================================================== */
.contact-item {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 20px;
  margin: 10px 0;
  text-align: center;
}

.contact-item__icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.contact-item__title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.contact-item__value {
  color: #000080;
}

/* =====================================================
   Dua Page
   ===================================================== */
.dua-image {
  margin: 10px 0;
}

.dua-section {
  margin: 20px 0;
}

.dua-section__title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.dua-section__content {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 15px;
  line-height: 1.8;
}

/* =====================================================
   Language Selector
   ===================================================== */
.lang-selector {
  position: relative;
  display: inline-block;
}

.lang-selector__btn {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 8px 15px;
  cursor: pointer;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lang-selector__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 100;
  margin-top: 2px;
}

.lang-selector__dropdown--open {
  display: block;
}

.lang-selector__item {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-weight: 400;
}

.lang-selector__item:hover {
  background: #f5f5f5;
}

.lang-selector__item--active {
  background: #cce5ff;
  color: #1f3a93;
}

/* =====================================================
   Page Header
   ===================================================== */
.page-header {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 20px;
  margin-bottom: 1px;
  text-align: center;
}

.page-header__title {
  font-size: 22px;
  color: #333;
  margin-bottom: 5px;
}

.page-header__subtitle {
  font-size: 14px;
  color: #666;
}

/* =====================================================
   Breadcrumb
   ===================================================== */
.breadcrumb {
  padding: 10px 0;
  font-size: 12px;
  color: #666;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__separator {
  color: #999;
}

.breadcrumb__link {
  color: #000080;
}

.breadcrumb__current {
  color: #333;
}

/* =====================================================
   Utilities
   ===================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }

.hidden { display: none; }

/* =====================================================
   RTL Support (Arabic, Urdu)
   ===================================================== */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .faq-item__question {
  text-align: right;
}

[dir="rtl"] .hadith-item {
  border-left: none;
  border-right: 4px solid #1f3a93;
}

[dir="rtl"] .breadcrumb__list {
  flex-direction: row-reverse;
}

[dir="rtl"] .lang-selector__dropdown {
  right: auto;
  left: 0;
}

/* =====================================================
   Print Styles
   ===================================================== */
@media print {
  .h, .f, #m, .lang-selector {
    display: none !important;
  }
  
  .c {
    border: none;
  }
}