/* ====================================================
   FANTAZI — GENEL SAYFA stilleri
   Kurumsal/yardım/iletişim/sipariş-takibi gibi içerik
   sayfalarının ortak iskeleti. (global.css + components.css
   üstüne yüklenir.)
   ==================================================== */

/* --- Sayfa başlığı (breadcrumb + başlık) --- */
.page-head {
  background: var(--renk-soft);
  border-bottom: 1px solid var(--renk-cizgi);
  padding: var(--space-32) 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-13);
  color: var(--renk-metin-soft);
  margin-bottom: var(--space-12);
}
.breadcrumb a { color: var(--renk-metin-soft); transition: var(--transition); }
.breadcrumb a:hover { color: var(--renk-marka); }
.breadcrumb__sep { color: var(--renk-cizgi); }
.breadcrumb b { color: var(--renk-koyu); font-weight: var(--fw-semibold); }
.page-head h1 { font-size: var(--fs-30); }
.page-head p { color: var(--renk-metin-soft); margin-top: var(--space-8); max-width: 640px; }

/* --- Sayfa gövdesi --- */
.page-body { padding: var(--space-44) 0 var(--space-64); }

/* --- İçerik kartı (beyaz panel + çizgi) --- */
.card {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: var(--space-30);
}
.card + .card { margin-top: var(--space-24); }
.card h2 { font-size: var(--fs-20); margin-bottom: var(--space-16); }
.card h3 { font-size: var(--fs-18); margin: var(--space-24) 0 var(--space-12); }
.card p { margin-bottom: var(--space-14); line-height: 1.7; }
.card ul.dotted { margin: 0 0 var(--space-14) var(--space-20); }
.card ul.dotted li { list-style: disc; margin-bottom: var(--space-8); }

/* --- Kurumsal metin (Hakkımızda) --- */
.prose { max-width: 100%; }
.prose p { margin-bottom: var(--space-16); line-height: 1.8; color: var(--renk-metin); }
.prose .lead { font-size: var(--fs-18); color: var(--renk-metin-soft); }

/* --- İstatistik / değer kartları --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-32);
}
.stat {
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: var(--space-24);
  text-align: center;
}
.stat__num { font-family: var(--font-baslik); font-size: var(--fs-30); color: var(--renk-marka); }
.stat__label { font-size: var(--fs-14); color: var(--renk-metin-soft); margin-top: 4px; }

/* --- İletişim kartları (iletisim.php) --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-bottom: var(--space-32);
}
.contact-card {
  display: block;
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: var(--space-24);
  text-align: center;
  transition: var(--transition);
}
.contact-card:hover {
  background: var(--renk-beyaz);
  border-color: var(--renk-nude);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.contact-card:hover .contact-card__ic { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }
.contact-card:hover strong { color: var(--renk-marka); }
.contact-card__ic {
  width: 52px; height: 52px;
  margin: 0 auto var(--space-14);
  border-radius: var(--radius-full);
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-koyu);
  display: flex; align-items: center; justify-content: center;
}
.contact-card__ic .icon { width: 24px; height: 24px; }
.contact-card strong { display: block; font-size: var(--fs-16); }
.contact-card span { font-size: var(--fs-14); color: var(--renk-metin-soft); }

/* --- Form (iletişim / sipariş takibi) --- */
.form-row { margin-bottom: var(--space-18); }
.form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.form-label {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.form-control {
  width: 100%;
  padding: 12px var(--space-14);
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  font-family: var(--font);
  color: var(--renk-metin);
  outline: none;
  transition: var(--transition);
}
.form-control:focus { border-color: var(--renk-marka); background: var(--renk-beyaz); }
textarea.form-control { min-height: 130px; resize: vertical; }

/* --- Yardım (akordeon SSS) --- */
.faq { max-width: 800px; }
.faq__item { border: 1px solid var(--renk-cizgi); border-radius: var(--radius); margin-bottom: var(--space-12); overflow: hidden; background: var(--renk-beyaz); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-14);
  padding: var(--space-18) var(--space-20);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--renk-metin);
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq__q .icon { color: var(--renk-metin-soft); transition: transform var(--transition); flex-shrink: 0; }
.faq__item.is-open .faq__q { color: var(--renk-marka); }
.faq__item.is-open .faq__q .icon { transform: rotate(180deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__item.is-open .faq__a { max-height: 1200px; }
.faq__a p { padding: 0 var(--space-20) var(--space-20); color: var(--renk-metin); line-height: 1.7; }
/* CKEditor'dan gelen zengin içerik (liste/başlık/vurgu) — .faq__a p dışındaki
   etiketler için stil tanımlı değildi, global reset (list-style:none, margin:0)
   maddeleri düz metne çeviriyordu. */
.faq__a ul, .faq__a ol { padding: 0 var(--space-20) var(--space-20) calc(var(--space-20) + 20px); color: var(--renk-metin); }
.faq__a ul { list-style: disc; }
.faq__a ol { list-style: decimal; }
.faq__a li { margin-bottom: var(--space-8); line-height: 1.7; }
.faq__a strong { font-weight: var(--fw-semibold); }
.faq__a a { color: var(--renk-marka); text-decoration: underline; }
.faq__a blockquote { margin: 0 var(--space-20) var(--space-20); padding-left: var(--space-14); border-left: 3px solid var(--renk-cizgi); color: var(--renk-metin-soft); font-style: italic; }

/* --- Yardım kategorileri: yatay kayan şerit (taşınca scroll, ~4.5 tab görünür) --- */
.help-cats {
  display: flex;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  /* Şerit sağda container kenarına kadar uzasın (sıfıra sıfır);
     kaydırınca son tab tam kenardan devam eder. */
  margin-right: calc(-1 * var(--container-pad));
  padding-right: var(--container-pad);
}
.help-cats::-webkit-scrollbar { display: none; }
.help-cats.is-dragging { cursor: grabbing; }
.help-cat {
  flex: 0 0 calc((100% - 4 * var(--space-16)) / 4.5);   /* ~4.5 tab görünür */
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-16);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.help-cat:hover { background: var(--renk-beyaz); border-color: var(--renk-nude); }
.help-cat .icon { width: 28px; height: 28px; color: var(--renk-marka); margin-bottom: var(--space-10); }
.help-cat strong { display: block; font-size: var(--fs-15); color: var(--renk-metin); }
/* Aktif kategori tabı */
.help-cat.is-active { background: var(--renk-koyu); border-color: var(--renk-koyu); }
.help-cat.is-active .icon,
.help-cat.is-active strong { color: var(--renk-beyaz); }

/* SSS 2 kolonlu grid — full genişlik (max-width kısıtı yok) */
.faq--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
  align-items: start;
  max-width: 100%;
}
.faq--grid .faq__item { margin-bottom: 0; }
.faq__item[hidden] { display: none; }

/* --- Sipariş takibi: 12 kolon grid — sol form 7, sağ bilgi 5 --- */
.track-layout { align-items: start; }
.track-layout > .card { grid-column: 1 / 8; }   /* sol form: 7 kolon */
.track-layout > .track-side { grid-column: 8 / 13; }  /* sağ bilgi: 5 kolon */
.track-side { display: flex; flex-direction: column; gap: var(--space-16); }
.track-how { display: flex; flex-direction: column; gap: var(--space-18); }
.track-how__item { display: flex; gap: var(--space-14); }
.track-how__num {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-weight: var(--fw-bold); color: var(--renk-marka);
}
.track-how__txt strong { display: block; font-size: var(--fs-15); margin-bottom: 2px; }
.track-how__txt span { font-size: var(--fs-13); color: var(--renk-metin-soft); line-height: 1.5; }
.track-help {
  background: var(--renk-koyu); color: var(--renk-krem);
  border-radius: var(--radius); padding: var(--space-24);
}
.track-help h3 { color: var(--renk-beyaz); font-size: var(--fs-16); margin-bottom: var(--space-8); }
.track-help p { font-size: var(--fs-14); color: var(--renk-krem-70); line-height: 1.6; margin-bottom: var(--space-16); }
.track-help .btn { background: var(--renk-beyaz); color: var(--renk-koyu); }
.track-help .btn:hover { background: var(--renk-nude); }

/* --- Sipariş takibi sonucu --- */
.track-result { margin-top: var(--space-24); }
.track-steps { display: flex; gap: var(--space-8); margin: var(--space-24) 0; }
.track-step { flex: 1; text-align: center; }
.track-step__dot {
  width: 32px; height: 32px; margin: 0 auto var(--space-8);
  border-radius: var(--radius-full);
  background: var(--renk-soft);
  border: 2px solid var(--renk-cizgi);
  display: flex; align-items: center; justify-content: center;
  color: var(--renk-metin-soft);
}
.track-step.is-done .track-step__dot { background: var(--renk-koyu); border-color: var(--renk-koyu); color: var(--renk-beyaz); }
.track-step__label { font-size: var(--fs-12); color: var(--renk-metin-soft); }
.track-step.is-done .track-step__label { color: var(--renk-koyu); font-weight: var(--fw-semibold); }

/* ====================================================
   SEPET SAYFASI (tam sayfa)
   ==================================================== */
/* Sepet: 12 kolon grid — ürünler 7, özet 5 */
.cart-layout { align-items: start; }
.cart-layout > .cart-items { grid-column: 1 / 8; }
.cart-layout > .cart-summary { grid-column: 8 / 13; }

.cart-items { background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); overflow: hidden; }
.cart-items__head { padding: var(--space-18) var(--space-24); border-bottom: 1px solid var(--renk-cizgi); font-weight: var(--fw-bold); }
.cart-row { position: relative; display: flex; gap: var(--space-16); padding: var(--space-20) var(--space-24); border-bottom: 1px solid var(--renk-cizgi); }
.cart-row:last-child { border-bottom: none; }
.cart-row__img { width: 90px; height: 118px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--renk-soft); }
.cart-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-row__name { font-size: var(--fs-15); font-weight: var(--fw-semibold); padding-right: var(--space-24); }
.cart-row__meta { font-size: var(--fs-13); color: var(--renk-metin-soft); margin: 4px 0 auto; }
.cart-row__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-12); }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--renk-cizgi); border-radius: 8px; overflow: hidden; }
.cart-qty button { width: 32px; height: 32px; background: var(--renk-soft); border: none; cursor: pointer; color: var(--renk-koyu); font-size: var(--fs-16); line-height: 1; }
.cart-qty span { width: 36px; text-align: center; font-size: var(--fs-14); }
.cart-row__price { text-align: right; }
.cart-row__price .now { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--renk-marka); }
.cart-row__price .old { display: block; font-size: var(--fs-12); color: var(--renk-metin-soft); text-decoration: line-through; }
.cart-row__remove { position: absolute; top: var(--space-20); right: var(--space-24); background: none; border: none; cursor: pointer; color: var(--renk-metin-soft); padding: 4px; }
.cart-row__remove:hover { color: var(--renk-marka); }
.cart-row__remove .icon { width: 16px; height: 16px; }

/* Özet kutusu */
.cart-summary { background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-24); position: sticky; top: var(--sticky-top); }
.cart-summary h2 { font-size: var(--fs-18); margin-bottom: var(--space-18); }

/* Özet: sepetteki ürünlerin mini listesi */
.summary-list { margin-bottom: var(--space-16); padding-bottom: var(--space-16); border-bottom: 1px solid var(--renk-cizgi); }
.summary-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10);
  font-size: var(--fs-13); margin-bottom: var(--space-10);
}
.summary-list li:last-child { margin-bottom: 0; }
.summary-list__name { color: var(--renk-metin); min-width: 0; }
.summary-list__name b { font-weight: var(--fw-semibold); }
.summary-list__name span { color: var(--renk-metin-soft); }   /* × adet */
.summary-list__price { color: var(--renk-koyu); font-weight: var(--fw-semibold); white-space: nowrap; }

.cart-summary__row { display: flex; justify-content: space-between; font-size: var(--fs-14); margin-bottom: var(--space-12); color: var(--renk-metin-soft); }
.cart-summary__row b { color: var(--renk-metin); font-weight: var(--fw-semibold); }
.cart-summary__row--free b { color: #1c7a46; }
.cart-summary__row--discount b { color: #1c7a46; }
.cart-summary__row--discount small { color: var(--renk-metin-soft); font-weight: var(--fw-normal); }
.cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-16); border-top: 1px solid var(--renk-cizgi); margin-top: var(--space-8); }
.cart-summary__total span { font-size: var(--fs-15); }
.cart-summary__total strong { font-size: var(--fs-24); color: var(--renk-koyu); font-family: var(--font-baslik); }
.cart-summary .btn { margin-top: var(--space-18); }

/* İndirim kodu — input ve buton eşit yükseklik */
.cart-coupon { display: flex; gap: var(--space-8); margin-top: var(--space-16); }
.cart-coupon input {
  flex: 1; min-width: 0;
  height: 46px; padding: 0 var(--space-14);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  font-family: var(--font); outline: none; transition: var(--transition);
}
.cart-coupon input:focus { border-color: var(--renk-marka); background: var(--renk-beyaz); }
.cart-coupon__btn {
  flex-shrink: 0;
  height: 46px; padding: 0 var(--space-18);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--renk-koyu); color: var(--renk-beyaz);
  border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-semibold);
  cursor: pointer; transition: var(--transition);
}
.cart-coupon__btn:hover { background: var(--renk-koyu-2); }
.cart-coupon__btn .icon { width: 16px; height: 16px; }
.cart-coupon__msg { margin-top: var(--space-10); font-size: var(--fs-13); }
.cart-coupon__msg.is-ok { color: #1c7a46; }
.cart-coupon__msg.is-err { color: var(--renk-marka); }

/* Ödemeye Geç — ikonlu */
.cart-checkout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cart-checkout .icon { width: 18px; height: 18px; }
.cart-secure { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: var(--space-16); font-size: var(--fs-12); color: var(--renk-metin-soft); }
.cart-secure .icon { width: 15px; height: 15px; }

/* ====================================================
   YASAL METİN / POLİTİKA SAYFALARI
   ==================================================== */
/* 12 kolon grid: 3 menü / 9 içerik */
.legal-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); align-items: start; }
.legal-nav { grid-column: 1 / 4; }   /* 3 kolon */
.legal-doc { grid-column: 4 / 13; }  /* 9 kolon */

/* Sol: politika listesi (içindekiler) */
.legal-nav {
  background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius); padding: var(--space-8); position: sticky; top: var(--sticky-top);
}
.legal-nav a {
  display: block; padding: var(--space-12) var(--space-14); border-radius: 8px;
  font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--renk-metin); transition: var(--transition);
}
.legal-nav a:hover { background: var(--renk-soft); color: var(--renk-marka); }
.legal-nav a.is-active { background: var(--renk-koyu); color: var(--renk-beyaz); }

/* Sağ: metin */
.legal-doc { background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-32); }
.legal-doc__meta { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-bottom: var(--space-24); padding-bottom: var(--space-16); border-bottom: 1px solid var(--renk-cizgi); }
.legal-doc h2 { font-size: var(--fs-20); margin: var(--space-28) 0 var(--space-12); }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: var(--fs-16); margin: var(--space-18) 0 var(--space-8); }
.legal-doc p { margin-bottom: var(--space-14); line-height: 1.8; color: var(--renk-metin); }
.legal-doc ul { margin: 0 0 var(--space-14) var(--space-20); }
.legal-doc li { list-style: disc; margin-bottom: var(--space-8); line-height: 1.7; color: var(--renk-metin); }
.legal-doc strong { font-weight: var(--fw-semibold); }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 989px) {
  .contact-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav, .legal-doc { grid-column: 1 / -1; }
  /* Politika menüsü: yatay kayan sekme şeridi (hesap menüsü gibi) */
  .legal-nav {
    position: static;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-8);
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
  }
  .legal-nav::-webkit-scrollbar { display: none; }
  .legal-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--space-10) var(--space-14);
    font-size: var(--fs-13);
  }
  .help-cat { flex-basis: 42%; }               /* mobilde ~2.5 tab görünür */
  .help-cat { padding: var(--space-16) var(--space-12); }
  .help-cats { margin-right: calc(-1 * var(--container-pad-mob)); padding-right: var(--container-pad-mob); }
  .faq--grid { grid-template-columns: 1fr; }   /* mobilde SSS tek kolon */
  .form-row--2 { grid-template-columns: 1fr; }
  .card { padding: var(--space-20); }
  .track-steps { flex-wrap: wrap; }
  .cart-layout > .cart-items,
  .cart-layout > .cart-summary { grid-column: 1 / -1; }
  .cart-summary { position: static; }
  /* Sipariş takibi: mobilde alt alta tam genişlik */
  .track-layout > .card,
  .track-layout > .track-side { grid-column: 1 / -1; }

  /* İstatistik: üstte 2, altta 1 (tek kalan) ortalı */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}