/* ==========================================================================
   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ı ve halı sayfası. 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); }