/* ==========================================================================
   Dosya: projectrugs/assets/css/main.css
   Temel katman: tema içinden fontlar, tokens.css'in tamamlamadığı temel kurallar,
   header, mobil menü, footer, ana sayfa bölümleri, halılar sayfası, halı sayfası ve iç sayfalar (SSS, ölçü rehberi, yorumlar, iletişim, editör içeriği). tokens.css'ten SONRA yüklenir (functions.php).
   Yalnız tokens.css değişkenleri kullanılır. Kırılım değerleri (767/1023) tokens.css
   ile aynıdır; CSS değişkenleri @media içinde çalışmadığı için sayı olarak yazılır.
   ========================================================================== */


/* ==========================================================================
   1 · Fontlar — kılavuz 05
   Her ağırlık için önce latin-ext (unicode-range ile sınırlı), sonra latin (aralıksız).
   8 dosya: Bricolage 600/700 + Hanken 400/600, her biri latin + latin-ext.
   ========================================================================== */

/* Bricolage Grotesque 600 */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Bricolage Grotesque 700 */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Hanken Grotesk 400 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Hanken Grotesk 600 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}


/* ==========================================================================
   2 · Temel — tokens.css body, h1, h2, p, odak, kapsayıcı ve ızgarayı zaten tanımlar.
   Burada yalnız eksik kalanlar var.
   ========================================================================== */

/* Sabit header, #soru-iade gibi çapa bağlantılarını örtmesin.
   Header yüksekliği 72 px = sp-16 + sp-2 (token önerisi: --pr-header-h) */
html {
  scroll-padding-top: calc(var(--pr-sp-16) + var(--pr-sp-2) + var(--pr-sp-4));
}
html.pr-menu-acik { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; }

/* Varsayılan link rengi; özgüllüğü sıfır, bileşen sınıfları her zaman üstün gelir */
:where(a) { color: var(--pr-orman); }

/* Yalnız ekran okuyucu — WordPress'in standart sınıfı */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* İçeriğe geç: odaklanınca görünür */
.pr-atla {
  position: absolute; z-index: 1000;
  left: var(--pr-sp-4); top: var(--pr-sp-4);
  padding: var(--pr-sp-3) var(--pr-sp-4);
  background: var(--pr-orman); color: var(--pr-beyaz);
  font-weight: 600; text-decoration: none;
  border-radius: var(--pr-r-form);
  transform: translateY(calc(-100% - var(--pr-sp-8)));
}
.pr-atla:focus { transform: none; }

/* Sayfa ve bölüm boşlukları — kılavuz 06: bölümler arası 96 / mobil 64 (token ile) */
.pr-sayfa { padding-block: var(--pr-sp-12) var(--pr-bolum-arasi); }
.pr-bolum { padding-block: var(--pr-bolum-arasi); }


/* ==========================================================================
   3 · Buton ve link tamamlamaları — kılavuz 08
   ========================================================================== */

/* İkincil buton pasifken: kenar Kum, yazı pasif, zemin şeffaf */
.pr-btn--ikincil[disabled],
.pr-btn--ikincil[aria-disabled="true"] {
  background: transparent;
  border-color: var(--pr-kum);
  color: var(--pr-pasif-metin);
}

/* Menü linki hover'ı (link hover rengi Kiremit) */
.pr-menu a { transition: color var(--pr-sure-hizli) var(--pr-egri); }
.pr-menu a:hover { color: var(--pr-kiremit); }


/* ==========================================================================
   4 · Header — kılavuz 08: 72 px (mobil 60), sabit, kaydırınca altında 1 px Kum çizgi
   ========================================================================== */
.pr-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0);
  z-index: 100;
  background: var(--pr-kagit);
  border-bottom: thin solid transparent;
  transition: border-color var(--pr-sure-hizli) var(--pr-egri);
}
.pr-header[data-kaydirildi] { border-bottom-color: var(--pr-kum); }

.pr-header__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-sp-6);
  min-height: calc(var(--pr-sp-16) + var(--pr-sp-2));
}

/* Logo: SVG varsa görsel, yoksa site adı yazıyla */
.pr-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--pr-dokunma);
  text-decoration: none;
}
.pr-logo__gorsel { display: block; height: var(--pr-sp-8); width: auto; }
.pr-logo__metin {
  font-family: var(--pr-font-baslik);
  font-weight: 700;
  font-size: var(--pr-fs-h2);
  line-height: var(--pr-lh-h2);
  color: var(--pr-orman);
}

/* Üst menü */
.pr-header__nav .pr-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pr-sp-1) var(--pr-sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-header__nav .pr-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pr-dokunma);
}

/* Hamburger düğmesi: masaüstünde gizli */
.pr-menu-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--pr-dokunma);
  height: var(--pr-dokunma);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pr-orman);
  cursor: pointer;
  border-radius: var(--pr-r-form);
}
.pr-ikon { display: block; flex-shrink: 0; }
.pr-menu-dugme .pr-ikon--kapat { display: none; }
.pr-menu-dugme[aria-expanded="true"] .pr-ikon--menu { display: none; }
.pr-menu-dugme[aria-expanded="true"] .pr-ikon--kapat { display: block; }


/* ==========================================================================
   5 · Mobil menü — < 768 px
   JS varken: hamburger görünür, menü tam ekran Kağıt zeminde açılır, linkler Başlık 2 boyutunda.
   JS yokken: menü header'ın altında açık durur (erişim kaybolmasın).
   ========================================================================== */
@media (max-width: 767px) {
  /* 60 px = sp-12 + sp-3 (token önerisi: --pr-header-h mobil) */
  html { scroll-padding-top: calc(var(--pr-sp-12) + var(--pr-sp-3) + var(--pr-sp-4)); }

  .pr-header__ic { min-height: calc(var(--pr-sp-12) + var(--pr-sp-3)); }

  .no-js .pr-header__ic { flex-wrap: wrap; padding-block: var(--pr-sp-2); }

  .js .pr-menu-dugme { display: inline-flex; }
  .js .pr-header__nav { display: none; }

  .js .pr-header[data-menu-acik] .pr-header__nav {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--wp-admin--admin-bar--height, 0);
    z-index: -1; /* header içinde kalır: logo ve kapat düğmesi menünün üstünde görünür */
    padding: calc(var(--pr-sp-12) + var(--pr-sp-3) + var(--pr-sp-6)) var(--pr-kenar-bosluk) var(--pr-sp-12);
    background: var(--pr-kagit);
    overflow-y: auto;
  }
  .js .pr-header[data-menu-acik] .pr-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pr-sp-2);
  }
  .js .pr-header[data-menu-acik] .pr-menu a {
    font-family: var(--pr-font-baslik);
    font-size: var(--pr-fs-h2);
    line-height: var(--pr-lh-h2);
    font-weight: 600;
  }
}


/* ==========================================================================
   6 · Footer — kılavuz 08: Orman zemin, Nane ve beyaz yazı, dört sütun
   ========================================================================== */
.pr-footer {
  background: var(--pr-orman);
  color: var(--pr-beyaz);
  padding-block: var(--pr-sp-16) var(--pr-sp-8);
}

/* Kiremit odak halkası Orman üzerinde ~1.8:1 kalıyor (en az 3:1 gerekir).
   Footer'da halka Nane (~8.7:1). KARAR BEKLİYOR — bkz. yanıt notu. */
.pr-footer :focus-visible { outline-color: var(--pr-nane); }

.pr-footer__izgara { row-gap: var(--pr-sp-8); }
.pr-footer__sutun { grid-column: span 3; }
@media (max-width: 1023px) { .pr-footer__sutun { grid-column: span 4; } }
@media (max-width: 767px)  { .pr-footer__sutun { grid-column: 1 / -1; } }

.pr-logo--footer .pr-logo__gorsel { height: var(--pr-sp-16); }
.pr-logo--footer .pr-logo__metin { color: var(--pr-beyaz); }

.pr-footer__slogan {
  margin: var(--pr-sp-3) 0 0;
  color: var(--pr-nane);
}

.pr-footer .pr-footer__baslik {
  margin: 0 0 var(--pr-sp-2);
  color: var(--pr-nane);
}

.pr-footer__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-footer__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pr-dokunma);
  color: var(--pr-beyaz);
  text-decoration: none;
  transition: color var(--pr-sure-hizli) var(--pr-egri);
}
.pr-footer__liste a:hover {
  color: var(--pr-nane);
  text-decoration: underline;
}
.pr-footer__liste a[aria-current="page"] { color: var(--pr-nane); }

.pr-footer__adres {
  margin-top: var(--pr-sp-3);
  font-style: normal;
  font-size: var(--pr-fs-kucuk);
  line-height: var(--pr-lh-kucuk);
  color: var(--pr-nane);
}

.pr-footer__alt {
  max-width: none;
  margin: var(--pr-sp-12) 0 0;
  font-size: var(--pr-fs-kucuk);
  line-height: var(--pr-lh-kucuk);
  color: var(--pr-nane);
}


/* ==========================================================================
   7 · Liste (index.php) ve boş durum (404.php)
   ========================================================================== */
.pr-liste {
  display: grid;
  gap: var(--pr-sp-8);
  list-style: none;
  margin: var(--pr-sp-8) 0 0;
  padding: 0;
}
.pr-liste h2 a { color: inherit; text-decoration: none; }
.pr-liste h2 a:hover { color: var(--pr-kiremit); }

.pr-bos-durum__eylem { margin-top: var(--pr-sp-6); }


/* ==========================================================================
   8 · Ana sayfa bölüm ritmi — kılavuz 03
   Bölümler arası 96 / mobil 64 (--pr-bolum-arasi). Kağıt bölümlerde yalnız alt boşluk var,
   iki bölüm arasında boşluk ikiye katlanmasın. Nane bölüm iki yanından boşluk alır;
   ondan sonra gelen bölüm üst boşluğunu geri alır.
   ========================================================================== */
.pr-anasayfa .pr-bolum { padding-block: 0 var(--pr-bolum-arasi); }
.pr-anasayfa .pr-bolum--nane {
  padding-block: var(--pr-bolum-arasi);
  background: var(--pr-nane);
}
.pr-anasayfa .pr-bolum--nane + .pr-bolum { padding-top: var(--pr-bolum-arasi); }

/* Bölüm başlığı: H2 etiketi, Başlık 1 boyutu */
.pr-bolum__baslik {
  margin-bottom: var(--pr-sp-8);
  font-size: var(--pr-fs-h1);
  line-height: var(--pr-lh-h1);
}
.pr-bolum__baslik--metin { margin-bottom: var(--pr-sp-3); }
.pr-bolum__alt { margin: var(--pr-sp-8) 0 0; }


/* ==========================================================================
   9 · Fotoğraf yer tutucusu — fotoğraflar gelene kadar; oran ve boyut etiketi üstünde yazar
   ========================================================================== */
.pr-yer-tutucu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pr-sp-4);
  background: var(--pr-kagit);
  color: var(--pr-soluk);
  font-size: var(--pr-fs-kucuk);
  line-height: var(--pr-lh-kucuk);
  text-align: center;
}


/* ==========================================================================
   10 · Hero — kılavuz 03: 16:9 masaüstü, 4:5 mobil, Mürekkep %45 örtü (.pr-ortu, tokens.css)
   ========================================================================== */
.pr-hero { padding-block: var(--pr-sp-4) var(--pr-bolum-arasi); }

.pr-hero__kutu {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: var(--pr-sp-12);
  overflow: hidden;
  border-radius: var(--pr-r-buyuk);
  background: var(--pr-soluk);
}

/* .pr-ortu > * kuralını (relative, z-index 1) geçmek için iki sınıflı: görsel örtünün altında kalır */
.pr-hero .pr-hero__gorsel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.pr-hero picture.pr-hero__gorsel { display: block; }
.pr-hero__gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr-hero .pr-yer-tutucu {
  align-items: flex-start;
  justify-content: flex-end;
  background: var(--pr-soluk);
  color: var(--pr-beyaz);
}

.pr-hero__icerik { max-width: var(--pr-metin-sutun); }
.pr-hero .pr-display { color: var(--pr-beyaz); }
.pr-hero__destek {
  margin: 0;
  color: var(--pr-beyaz);
}
.pr-hero__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-sp-3);
  margin-top: var(--pr-sp-6);
}

/* Fotoğraf üstünde Orman kenarlı ikincil buton ve Kiremit halka görünmez kalır.
   Hero'da düğmeler beyaz kenarlı, odak halkası Nane (footer'daki karar gibi). KARAR BEKLİYOR — bkz. yanıt notu. */
.pr-hero .pr-btn--birincil { border-color: var(--pr-beyaz); }
.pr-hero .pr-btn--ikincil {
  color: var(--pr-beyaz);
  border-color: var(--pr-beyaz);
}
.pr-hero .pr-btn--ikincil:hover {
  background: var(--pr-beyaz);
  color: var(--pr-orman);
}
.pr-hero :focus-visible { outline-color: var(--pr-nane); }

@media (max-width: 767px) {
  .pr-hero__kutu {
    aspect-ratio: 4 / 5;
    padding: var(--pr-sp-6);
  }
  .pr-hero__eylemler { flex-direction: column; align-items: stretch; }
}


/* ==========================================================================
   11 · Halı kartı tamamlaması ve galeri — kılavuz 09
   Kartın kendisi bağlantıdır; odak halkası kartın dışına çizilir (overflow'dan etkilenmez).
   ========================================================================== */
.pr-galeri {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-kart {
  display: block;
  color: var(--pr-murekkep);
  text-decoration: none;
}
.pr-kart .pr-yer-tutucu { border-bottom: thin solid var(--pr-kum); }


/* ==========================================================================
   12 · Sipariş adımları — kılavuz 09
   Küçük ekran ve tablet: dikey liste, daireleri Kum çizgi bağlar. ≥ 1024 px: beş sütunluk yatay şerit.
   ========================================================================== */
.pr-adimlar {
  display: grid;
  gap: var(--pr-sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-adim {
  position: relative;
  display: grid;
  grid-template-columns: var(--pr-sp-12) 1fr;
  column-gap: var(--pr-sp-4);
}
.pr-adim:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--pr-sp-12) + var(--pr-sp-2));
  bottom: calc(var(--pr-sp-8) * -1 + var(--pr-sp-2));
  left: calc(var(--pr-sp-12) / 2);
  border-left: thin solid var(--pr-kum);
}
.pr-adim__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pr-sp-12);
  height: var(--pr-sp-12);
  border: thin solid var(--pr-kum);
  border-radius: var(--pr-r-tam);
  background: var(--pr-beyaz);
  font-family: var(--pr-font-baslik);
  font-weight: 600;
  font-size: var(--pr-fs-h2);
  color: var(--pr-orman);
}
.pr-adim__baslik {
  margin: var(--pr-sp-2) 0 var(--pr-sp-1);
  font-size: var(--pr-fs-h2);
  line-height: var(--pr-lh-h2);
  font-weight: 600;
}
.pr-adim__metin {
  margin: 0;
  color: var(--pr-soluk);
}

@media (min-width: 1024px) {
  .pr-adimlar {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--pr-oluk);
  }
  .pr-adim {
    grid-template-columns: 1fr;
    row-gap: var(--pr-sp-4);
  }
  .pr-adim:not(:last-child)::before {
    top: calc(var(--pr-sp-12) / 2);
    bottom: auto;
    left: calc(var(--pr-sp-12) + var(--pr-sp-2));
    right: calc(var(--pr-oluk) * -1 + var(--pr-sp-2));
    border-left: 0;
    border-top: thin solid var(--pr-kum);
  }
  .pr-adim__baslik { margin-top: 0; }
}


/* ==========================================================================
   13 · Eray'ın hikâyesi — kılavuz 03: solda 4:5 portre, sağda metin, Nane zemin
   ========================================================================== */
.pr-hikaye__izgara {
  align-items: center;
  row-gap: var(--pr-sp-8);
}
.pr-hikaye__portre { grid-column: span 5; }
.pr-hikaye__metin  { grid-column: 7 / -1; }

.pr-portre {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--pr-r-buyuk);
}
.pr-portre.pr-yer-tutucu { border: thin solid var(--pr-kum); }

@media (max-width: 1023px) {
  .pr-hikaye__portre { grid-column: span 3; }
  .pr-hikaye__metin  { grid-column: span 5; }
}
@media (max-width: 767px) {
  .pr-hikaye__portre,
  .pr-hikaye__metin { grid-column: 1 / -1; }
}


/* ==========================================================================
   14 · SSS akordeonu — kılavuz 09: Başlık 2 soru satırı, Kum ayraç, açılır ok
   ========================================================================== */
.pr-sss {
  max-width: var(--pr-metin-sutun);
  border-top: thin solid var(--pr-kum);
}
.pr-sss__oge { border-bottom: thin solid var(--pr-kum); }
.pr-sss__ozet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-sp-4);
  min-height: var(--pr-dokunma);
  padding-block: var(--pr-sp-4);
  list-style: none;
  cursor: pointer;
}
.pr-sss__ozet::-webkit-details-marker { display: none; }
.pr-sss__soru {
  margin: 0;
  font-size: var(--pr-fs-h2);
  line-height: var(--pr-lh-h2);
  font-weight: 600;
}
.pr-sss__ok {
  flex-shrink: 0;
  color: var(--pr-orman);
  transition: transform var(--pr-sure-normal) var(--pr-egri);
}
.pr-sss__oge[open] .pr-sss__ok { transform: rotate(180deg); }

.pr-sss__cevap { padding-bottom: var(--pr-sp-6); }
.pr-sss__cevap p { margin: 0 0 var(--pr-sp-3); }
.pr-sss__cevap p:last-child { margin-bottom: 0; }
.pr-sss__cevap a {
  color: var(--pr-orman);
  text-decoration: underline;
  text-underline-offset: var(--pr-sp-1);
}
.pr-sss__cevap a:hover { color: var(--pr-kiremit); }


/* ==========================================================================
   15 · Kapanış çağrısı — kılavuz 03: Kağıt zemin, ortalanmış
   ========================================================================== */
.pr-cta { text-align: center; }
.pr-cta__baslik {
  max-width: var(--pr-metin-sutun);
  margin-inline: auto;
  font-size: var(--pr-fs-h1);
  line-height: var(--pr-lh-h1);
}
.pr-cta__eylem {
  margin: var(--pr-sp-6) 0 0;
  max-width: none;
}


/* ==========================================================================
   16 · Halılar sayfası — kılavuz 02, 06, 09
   Galeri ızgarası (.pr-galeri) tokens.css'te: masaüstü 3, tablet 2, mobil 1 sütun.
   Burada yalnız başlık, tür çipleri, boş durum ve sayfa numaraları var.
   Çip = tam yuvarlak (kılavuz 06). Etkin çip dolu Orman + onay ikonu: durum renkle tek başına anlatılmaz.
   ========================================================================== */
.pr-halilar__baslik { margin-bottom: var(--pr-sp-6); }

.pr-filtre { margin-bottom: var(--pr-sp-6); }
.pr-filtre__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-cip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-sp-2);
  min-height: var(--pr-dokunma);
  padding: 0 var(--pr-sp-4);
  border: thin solid var(--pr-orman);
  border-radius: var(--pr-r-tam);
  background: transparent;
  color: var(--pr-orman);
  font-family: var(--pr-font-govde);
  font-weight: 600;
  font-size: var(--pr-fs-buton);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--pr-sure-hizli) var(--pr-egri),
              color var(--pr-sure-hizli) var(--pr-egri);
}
.pr-cip:hover { background: var(--pr-nane); }
.pr-cip[aria-current="true"] {
  background: var(--pr-orman);
  color: var(--pr-beyaz);
}
.pr-cip[aria-current="true"]:hover { background: var(--pr-orman-koyu); }
/* tokens.css odak köşesini 6 px yapar; çip yuvarlak kalsın */
.pr-cip:focus-visible { border-radius: var(--pr-r-tam); }

.pr-cip__isaret {
  display: none;
  flex-shrink: 0;
  width: var(--pr-sp-4);
  height: var(--pr-sp-4);
}
.pr-cip[aria-current="true"] .pr-cip__isaret { display: block; }

.pr-halilar__ozet { margin: 0 0 var(--pr-sp-6); }

/* Boş filtre — kılavuz 09 */
.pr-halilar__bos { padding-block: var(--pr-sp-12); }
.pr-halilar__bos p { margin: 0; }
.pr-halilar__bos .pr-halilar__bos-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pr-sp-3) var(--pr-sp-6);
  margin-top: var(--pr-sp-6);
  max-width: none;
}
@media (max-width: 767px) {
  .pr-halilar__bos .pr-halilar__bos-eylem { flex-direction: column; align-items: stretch; }
}

/* Sayfa numaraları (paginate_links çıktısı) */
.pr-sayfalar { margin-top: var(--pr-sp-12); }
.pr-sayfalar__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pr-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-sayfalar .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pr-dokunma);
  min-height: var(--pr-dokunma);
  padding-inline: var(--pr-sp-3);
  border-radius: var(--pr-r-tam);
  color: var(--pr-orman);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--pr-sure-hizli) var(--pr-egri),
              color var(--pr-sure-hizli) var(--pr-egri);
}
.pr-sayfalar a.page-numbers:hover { background: var(--pr-nane); }
.pr-sayfalar a.page-numbers:focus-visible { border-radius: var(--pr-r-tam); }
.pr-sayfalar .page-numbers.current {
  background: var(--pr-orman);
  color: var(--pr-beyaz);
}
.pr-sayfalar .page-numbers.dots { min-width: 0; }


/* ==========================================================================
   17 · Halı sayfası — kılavuz 09, 12 (single-hali.php)
   ≥ 1024 px: solda galeri (7 kolon), sağda bilgi (5 kolon). Altında tek sütun.
   Galeri: büyük kare fotoğraf + dikey küçük önizlemeler; mobilde önizlemeler fotoğrafın altında yatay sıra.
   JS yoksa (.no-js) önizleme gizlenir, fotoğraflar alt alta görünür; JS varsa (.js) yalnız seçili fotoğraf görünür.
   ========================================================================== */
.pr-hali__izgara { align-items: start; row-gap: var(--pr-sp-8); }
.pr-hali__galeri,
.pr-hali__bilgi { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .pr-hali__galeri { grid-column: span 7; }
  .pr-hali__bilgi  { grid-column: span 5; }
}

/* --- Galeri ------------------------------------------------------------ */
.pr-hali-galeri {
  display: flex;
  flex-direction: row-reverse; /* DOM'da fotoğraf önce gelir; önizlemeler görsel olarak solda durur */
  align-items: flex-start;
  gap: var(--pr-sp-3);
}
.pr-hali-galeri__ana {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  gap: var(--pr-sp-4);
}
.pr-hali-galeri__figur { margin: 0; }
.js .pr-hali-galeri__figur { display: none; }
.js .pr-hali-galeri__figur[data-pr-aktif] { display: block; }

.pr-hali-galeri__gorsel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: thin solid var(--pr-kum);
  border-radius: var(--pr-r-buyuk);
}
.pr-hali-galeri__ana .pr-yer-tutucu {
  aspect-ratio: 1 / 1;
  border: thin solid var(--pr-kum);
  border-radius: var(--pr-r-buyuk);
}

.pr-hali-galeri__onizleme {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--pr-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.js .pr-hali-galeri__onizleme { display: flex; }
.pr-hali-galeri__onizleme > li { width: calc(var(--pr-sp-16) + var(--pr-sp-4)); }

.pr-hali-galeri__dugme {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: thin solid var(--pr-kum);
  border-radius: var(--pr-r-form);
  background: var(--pr-beyaz);
  cursor: pointer;
}
/* Seçili önizleme: renk + kalın kenar; durum yalnız renkle anlatılmaz */
.pr-hali-galeri__dugme[aria-pressed="true"] {
  border: medium solid var(--pr-orman);
}
.pr-hali-galeri__kucuk {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .pr-hali-galeri { flex-direction: column; }
  .pr-hali-galeri__ana { width: 100%; flex: 0 0 auto; }
  .pr-hali-galeri__onizleme { flex-direction: row; flex-wrap: wrap; }
}

/* --- Bilgi sütunu ------------------------------------------------------ */
.pr-hali__bilgi {
  display: flex;
  flex-direction: column;
  gap: var(--pr-sp-6);
}
.pr-hali__bilgi > * { margin: 0; }
.pr-hali__baslik { margin-bottom: var(--pr-sp-3); }
.pr-hali__aciklama { margin: 0; }

/* Künye: etiket + değer satırları, Kum ayraç */
.pr-kunye { border-top: thin solid var(--pr-kum); }
.pr-kunye__satir {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--pr-sp-4);
  align-items: baseline;
  padding-block: var(--pr-sp-3);
  border-bottom: thin solid var(--pr-kum);
}
.pr-kunye__satir dt,
.pr-kunye__satir dd { margin: 0; }

/* Fiyat satırı — kılavuz 12: "Bu ölçüde ____ ₺'den başlar" + "Kargo dahil." */
.pr-hali-fiyat__satir {
  margin: 0;
  font-family: var(--pr-font-baslik);
  font-weight: 600;
  font-size: var(--pr-fs-h2);
  line-height: var(--pr-lh-h2);
  color: var(--pr-murekkep);
}
.pr-hali-fiyat__tutar { color: var(--pr-orman); }
.pr-hali-fiyat__not { margin: var(--pr-sp-1) 0 var(--pr-sp-2); }

/* Üretim süresi */
.pr-hali-sure {
  display: flex;
  align-items: center;
  gap: var(--pr-sp-3);
}
.pr-hali-sure .pr-ikon { color: var(--pr-orman); }

/* Birincil düğme: mobilde tam genişlik (hero'daki gibi) */
@media (max-width: 767px) {
  .pr-hali__eylem .pr-btn { width: 100%; }
}

/* Bakım bilgisi — katlanır */
.pr-hali-bakim {
  border-top: thin solid var(--pr-kum);
  border-bottom: thin solid var(--pr-kum);
}
.pr-hali-bakim__ozet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-sp-4);
  min-height: var(--pr-dokunma);
  padding-block: var(--pr-sp-3);
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--pr-orman);
}
.pr-hali-bakim__ozet::-webkit-details-marker { display: none; }
.pr-hali-bakim__ok {
  flex-shrink: 0;
  transition: transform var(--pr-sure-normal) var(--pr-egri);
}
.pr-hali-bakim[open] .pr-hali-bakim__ok { transform: rotate(180deg); }
.pr-hali-bakim__icerik { padding-bottom: var(--pr-sp-4); }
.pr-hali-bakim__icerik p { margin: 0 0 var(--pr-sp-3); }

/* Başka halılar */
.pr-hali-digerleri { margin-top: var(--pr-bolum-arasi); }


/* ==========================================================================
   18 · Editör içeriği (.pr-icerik) — page.php: yasal sayfalar, bakım rehberi ve panelden girilen her metin
   Başlık ölçeğinde H3 yok; H3 gövde boyutunda, 600 ağırlıkta gösterilir (yeni token gerekmedi).
   ========================================================================== */
.pr-sayfa__baslik { margin-bottom: var(--pr-sp-6); }

.pr-icerik h2 { margin: var(--pr-sp-8) 0 var(--pr-sp-3); }
.pr-icerik h3 {
  margin: var(--pr-sp-6) 0 var(--pr-sp-2);
  font-size: var(--pr-fs-govde);
  line-height: var(--pr-lh-govde);
  font-weight: 600;
}
.pr-icerik p,
.pr-icerik ul,
.pr-icerik ol { margin: 0 0 var(--pr-sp-4); }
.pr-icerik ul,
.pr-icerik ol {
  max-width: var(--pr-metin-sutun);
  padding-left: var(--pr-sp-6);
}
.pr-icerik li + li { margin-top: var(--pr-sp-2); }
.pr-icerik hr {
  margin: var(--pr-sp-8) 0;
  border: 0;
  border-top: thin solid var(--pr-kum);
}
.pr-icerik img { border-radius: var(--pr-r-kart); }
.pr-icerik .wp-block-table {
  margin: 0 0 var(--pr-sp-4);
  overflow-x: auto;
}
/* İlk ve son çocuk: özgüllük yukarıdaki kurallardan yüksek, kapsayıcıda fazladan boşluk kalmaz */
.pr-icerik > :first-child { margin-top: 0; }
.pr-icerik > :last-child { margin-bottom: 0; }


/* ==========================================================================
   19 · Tablo — ölçü rehberi (.pr-tablo) ve editörden gelen tablolar
   Sade: Kum çizgi, zemin yok. Satır başlığı Başlık fontunda Orman; sütun başlığı ETİKET stilinde.
   ========================================================================== */
.pr-tablo,
.pr-icerik table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.pr-tablo th,
.pr-tablo td,
.pr-icerik th,
.pr-icerik td {
  padding: var(--pr-sp-3) var(--pr-sp-4) var(--pr-sp-3) 0;
  border-bottom: thin solid var(--pr-kum);
  text-align: left;
  vertical-align: top;
}
.pr-tablo thead th,
.pr-icerik thead th {
  font-weight: 600;
  font-size: var(--pr-fs-etiket);
  letter-spacing: var(--pr-ls-etiket);
  text-transform: uppercase;
  color: var(--pr-soluk);
}
.pr-tablo tbody th {
  font-family: var(--pr-font-baslik);
  font-weight: 600;
  color: var(--pr-orman);
  white-space: nowrap;
}
.pr-tablo td:nth-child(2) { white-space: nowrap; }

.pr-olcu__giris { margin: 0 0 var(--pr-sp-6); }
.pr-olcu__not { margin: var(--pr-sp-3) 0 0; }


/* ==========================================================================
   20 · SSS akordeonu — düğme tabanlı (template-parts/faq.php)
   Soru satırı <h2|h3> içindeki <button>; panel aria-controls ile bağlı, hidden ile kapalı.
   Açık/kapalı durumu için ok ikonu döner (renk tek başına anlam taşımaz). Aynı anda birden fazla açık kalabilir.
   JS yokken (.no-js) tüm cevaplar açık görünür, ok gizlenir. Kenar ve ayraç kuralları bölüm 14'ten (.pr-sss, .pr-sss__oge).
   ========================================================================== */
.pr-sss__dugme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-sp-4);
  width: 100%;
  min-height: var(--pr-dokunma);
  padding: var(--pr-sp-4) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pr-sss__dugme[aria-expanded="true"] .pr-sss__ok { transform: rotate(180deg); }

.pr-sss__cevap .pr-sss__baglanti { margin: 0; }
.pr-sss__cevap .pr-sss__baglanti a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pr-dokunma);
}

.no-js .pr-sss__cevap[hidden] { display: block; }
.no-js .pr-sss__ok { display: none; }
.no-js .pr-sss__dugme { cursor: default; }


/* ==========================================================================
   21 · İç sayfa çağrısı — SSS, ölçü rehberi, yorumlar, iletişim
   Sayfada tek birincil buton (kılavuz 08). Mobilde tam genişlik (halı sayfasındaki gibi).
   ========================================================================== */
.pr-sayfa__eylem { margin-top: var(--pr-sp-8); }
.pr-sayfa__eylem p { margin: 0 0 var(--pr-sp-3); }
@media (max-width: 767px) {
  .pr-sayfa__eylem .pr-btn { width: 100%; }
}


/* ==========================================================================
   22 · Yorumlar — kılavuz 09: beş yıldız, kısa metin, ad ve şehir, izinliyse halı fotoğrafı
   Izgara .pr-galeri (tokens.css): masaüstü 3, tablet 2, mobil 1 sütun. Kart hover'da kımıldamaz (tıklanmaz).
   ========================================================================== */
.pr-yorumlar { margin-top: var(--pr-sp-8); }

.pr-yorum {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--pr-beyaz);
  border: thin solid var(--pr-kum);
  border-radius: var(--pr-r-kart);
}
.pr-yorum__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pr-yorum__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pr-sp-3);
  padding: var(--pr-kart-ic);
}
.pr-yorum__puan {
  display: flex;
  gap: var(--pr-sp-1);
  margin: 0;
  color: var(--pr-orman);
}
.pr-yorum__yildiz {
  width: var(--pr-sp-6);
  height: var(--pr-sp-6);
}
.pr-yorum__metin { margin: 0; }
.pr-yorum__metin p { margin: 0; }
.pr-yorum__kim { margin: auto 0 0; }

.pr-yorumlar__bos { padding-block: var(--pr-sp-12); }
.pr-yorumlar__bos p { margin: 0; }


/* ==========================================================================
   23 · İletişim — künye bileşeni (.pr-kunye, bölüm 17) yeniden kullanılır
   Bağlantılar 44 px dokunma alanında; hover Kiremit (bağlantı hover kuralı).
   ========================================================================== */
.pr-iletisim .pr-kunye {
  max-width: var(--pr-metin-sutun);
  margin: var(--pr-sp-8) 0 0;
}
.pr-iletisim .pr-iletisim__baslik { margin: var(--pr-sp-12) 0 0; }
.pr-iletisim .pr-iletisim__baslik + .pr-kunye { margin-top: var(--pr-sp-3); }
.pr-iletisim .pr-kunye a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pr-dokunma);
  text-underline-offset: var(--pr-sp-1);
  transition: color var(--pr-sure-hizli) var(--pr-egri);
}
.pr-iletisim .pr-kunye a:hover { color: var(--pr-kiremit); }
.pr-iletisim__adres { font-style: normal; }