/* ==========================================================================
   ProjectRugs · Web Tasarım Tokenları
   Sürüm 1.0 · 2026 · Marka Kılavuzu v2.1 ile uyumlu
   Tek kaynak: renk, tipografi, boşluk, köşe, gölge, hareket.
   Temada hiçbir yerde ham hex ya da px değeri yazma; bu değişkenleri kullan.
   ========================================================================== */

:root {
  /* --- Renk: marka ------------------------------------------------------ */
  --pr-orman:        #0F4C3A;  /* birincil: logo, başlık, buton */
  --pr-orman-koyu:   #0A3A2C;  /* buton hover / basılı */
  --pr-orman-acik:   #17654D;  /* ince ayrım, ikon */
  --pr-nane:         #DCF5E8;  /* ikincil zemin */
  --pr-murekkep:     #16231E;  /* ana metin */
  --pr-kiremit:      #A94C26;  /* aksan: rozet, odak halkası, link hover */
  --pr-kiremit-koyu: #8E3F1F;  /* kiremit hover */
  --pr-kagit:        #F6F2EA;  /* ana zemin */
  --pr-kum:          #D6C7AC;  /* çizgi, ayraç, kart kenarı */
  --pr-soluk:        #5B6B64;  /* ikincil metin */
  --pr-beyaz:        #FFFFFF;

  /* --- Renk: durum ------------------------------------------------------ */
  --pr-basari-metin: #1A6B45;
  --pr-basari-zemin: #E3F2E8;
  --pr-uyari-metin:  #8A5A00;
  --pr-uyari-zemin:  #FBF0D9;
  --pr-hata-metin:   #B3261E;
  --pr-hata-zemin:   #FBE7E4;

  /* --- Renk: arayüz ----------------------------------------------------- */
  --pr-kenar:        var(--pr-kum);   /* kart ve ayraç kenarı */
  --pr-form-kenar:   #7F7A6D;         /* beyaz üzerinde 4.28:1 */
  --pr-pasif-metin:  #79837D;         /* Kağıt üzerinde 3.5:1 */
  --pr-pasif-zemin:  #EDE7DC;
  --pr-ortu:         rgba(22,35,30,.45); /* fotoğraf üzeri yazı örtüsü */

  /* --- Tipografi -------------------------------------------------------- */
  --pr-font-baslik: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --pr-font-govde:  "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --pr-fs-display:  52px;  --pr-lh-display: 1.05;
  --pr-fs-h1:       34px;  --pr-lh-h1:      1.15;
  --pr-fs-h2:       22px;  --pr-lh-h2:      1.25;
  --pr-fs-govde:    17px;  --pr-lh-govde:   1.6;
  --pr-fs-kucuk:    14px;  --pr-lh-kucuk:   1.5;
  --pr-fs-etiket:   12.5px;
  --pr-fs-buton:    16px;

  --pr-ls-etiket:   0.12em;  /* ETİKET: +%12 harf aralığı */
  --pr-metin-sutun: 680px;   /* gövde metni maksimum genişliği */

  /* --- Izgara ve boşluk (4'ün katları) ---------------------------------- */
  --pr-sp-1:  4px;   --pr-sp-2:  8px;   --pr-sp-3: 12px;  --pr-sp-4: 16px;
  --pr-sp-6: 24px;   --pr-sp-8: 32px;   --pr-sp-12: 48px; --pr-sp-16: 64px;
  --pr-sp-24: 96px;  --pr-sp-32: 128px;

  --pr-kapsayici: 1200px;
  --pr-oluk:      24px;   /* kolon arası */
  --pr-kenar-bosluk: 40px;
  --pr-bolum-arasi:  96px;
  --pr-kart-ic:      24px;

  /* --- Köşe yuvarlaklığı ------------------------------------------------ */
  --pr-r-form:   6px;
  --pr-r-kart:  12px;
  --pr-r-buyuk: 20px;
  --pr-r-tam:   999px;

  /* --- Gölge: yalnızca iki seviye --------------------------------------- */
  --pr-golge-1: 0 2px 8px rgba(22,35,30,.08);
  --pr-golge-2: 0 12px 32px rgba(22,35,30,.16);

  /* --- Hareket ---------------------------------------------------------- */
  --pr-sure-hizli: 150ms;
  --pr-sure-normal: 250ms;
  --pr-egri: cubic-bezier(.2,.6,.3,1);

  /* --- Ölçüler ---------------------------------------------------------- */
  --pr-buton-h:  48px;
  --pr-alan-h:   48px;
  --pr-dokunma:  44px;  /* en küçük dokunma alanı */
  --pr-odak:     2px;   /* odak çerçevesi kalınlığı */
}

/* --- Tablet: 768–1023 px --------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --pr-oluk: 20px;
    --pr-kenar-bosluk: 32px;
  }
}

/* --- Mobil: < 768 px -------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --pr-fs-display: 36px;
    --pr-fs-h1:      28px;
    --pr-fs-h2:      20px;
    --pr-fs-govde:   16px;   /* asla 16px altına inme */
    --pr-fs-kucuk:   14px;
    --pr-fs-etiket:  12px;

    --pr-oluk: 16px;
    --pr-kenar-bosluk: 20px;
    --pr-bolum-arasi: 64px;
    --pr-kart-ic: 16px;
    --pr-buton-h: 52px;
  }
}

/* --- Hareket azaltma tercihi ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Temel katman
   ========================================================================== */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--pr-kagit);
  color: var(--pr-murekkep);
  font-family: var(--pr-font-govde);
  font-size: var(--pr-fs-govde);
  line-height: var(--pr-lh-govde);
  font-weight: 400;
}

h1, h2, h3 { font-family: var(--pr-font-baslik); color: var(--pr-orman); margin: 0 0 var(--pr-sp-3); }
h1 { font-size: var(--pr-fs-h1); line-height: var(--pr-lh-h1); font-weight: 600; }
h2 { font-size: var(--pr-fs-h2); line-height: var(--pr-lh-h2); font-weight: 600; }
.pr-display { font-family: var(--pr-font-baslik); font-weight: 700;
  font-size: var(--pr-fs-display); line-height: var(--pr-lh-display); color: var(--pr-orman); }
.pr-etiket { font-family: var(--pr-font-govde); font-weight: 600;
  font-size: var(--pr-fs-etiket); letter-spacing: var(--pr-ls-etiket);
  text-transform: uppercase; color: var(--pr-soluk); }
.pr-kucuk { font-size: var(--pr-fs-kucuk); line-height: var(--pr-lh-kucuk); }
.pr-soluk { color: var(--pr-soluk); }
p { max-width: var(--pr-metin-sutun); }

/* Odak göstergesi: asla kaldırma */
:focus-visible {
  outline: var(--pr-odak) solid var(--pr-kiremit);
  outline-offset: var(--pr-odak);
  border-radius: var(--pr-r-form);
}

/* --- Kapsayıcı ve ızgara --------------------------------------------- */
.pr-kapsayici {
  max-width: var(--pr-kapsayici);
  margin-inline: auto;
  padding-inline: var(--pr-kenar-bosluk);
}
.pr-izgara { display: grid; gap: var(--pr-oluk); grid-template-columns: repeat(12, 1fr); }
@media (max-width: 1023px) { .pr-izgara { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 767px)  { .pr-izgara { grid-template-columns: repeat(4, 1fr); } }

.pr-galeri { display: grid; gap: var(--pr-oluk); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .pr-galeri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .pr-galeri { grid-template-columns: 1fr; } }

/* ==========================================================================
   Butonlar
   ========================================================================== */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pr-sp-2);
  min-height: var(--pr-buton-h); padding: 0 var(--pr-sp-6);
  font-family: var(--pr-font-govde); font-weight: 600; font-size: var(--pr-fs-buton);
  line-height: 1; border-radius: var(--pr-r-tam); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--pr-sure-hizli) var(--pr-egri),
              color var(--pr-sure-hizli) var(--pr-egri),
              border-color var(--pr-sure-hizli) var(--pr-egri);
}
.pr-btn--birincil { background: var(--pr-orman); color: var(--pr-beyaz); }
.pr-btn--birincil:hover { background: var(--pr-orman-koyu); }
.pr-btn--ikincil { background: transparent; color: var(--pr-orman); border-color: var(--pr-orman); }
.pr-btn--ikincil:hover { background: var(--pr-nane); }
.pr-btn--metin { background: none; border: none; color: var(--pr-orman);
  padding-inline: 0; min-height: var(--pr-dokunma); }
.pr-btn--metin:hover { color: var(--pr-kiremit); text-decoration: underline; }
.pr-btn[disabled], .pr-btn[aria-disabled="true"] {
  background: var(--pr-pasif-zemin); color: var(--pr-pasif-metin);
  border-color: transparent; cursor: not-allowed;
}

/* ==========================================================================
   Link
   ========================================================================== */
.pr-icerik a { color: var(--pr-orman); text-decoration: underline; text-underline-offset: 3px; }
.pr-icerik a:hover { color: var(--pr-kiremit); }
.pr-menu a { text-decoration: none; color: var(--pr-murekkep); }
.pr-menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pr-orman); }

/* ==========================================================================
   Form
   ========================================================================== */
.pr-alan { display: block; margin-bottom: var(--pr-sp-6); }
.pr-alan__etiket { display: block; margin-bottom: var(--pr-sp-2);
  font-weight: 600; font-size: var(--pr-fs-kucuk); color: var(--pr-murekkep); }
.pr-alan__girdi {
  width: 100%; min-height: var(--pr-alan-h); padding: 0 var(--pr-sp-4);
  font-family: var(--pr-font-govde); font-size: 16px; /* mobilde yakınlaştırmayı engeller */
  color: var(--pr-murekkep); background: var(--pr-beyaz);
  border: 1px solid var(--pr-form-kenar); border-radius: var(--pr-r-form);
}
textarea.pr-alan__girdi { min-height: 120px; padding: var(--pr-sp-3) var(--pr-sp-4); line-height: 1.5; }
.pr-alan__yardim { margin-top: var(--pr-sp-2); font-size: var(--pr-fs-kucuk); color: var(--pr-soluk); }
.pr-alan--hata .pr-alan__girdi { border-color: var(--pr-hata-metin); border-width: 2px; }
.pr-alan__hata { margin-top: var(--pr-sp-2); font-size: var(--pr-fs-kucuk);
  color: var(--pr-hata-metin); display: flex; gap: var(--pr-sp-2); }

/* Durum kutuları: renk tek başına anlam taşımaz, ikon + metin zorunlu */
.pr-durum { display: flex; gap: var(--pr-sp-3); padding: var(--pr-sp-4);
  border-radius: var(--pr-r-kart); font-size: var(--pr-fs-kucuk); }
.pr-durum--basari { background: var(--pr-basari-zemin); color: var(--pr-basari-metin); }
.pr-durum--uyari  { background: var(--pr-uyari-zemin);  color: var(--pr-uyari-metin); }
.pr-durum--hata   { background: var(--pr-hata-zemin);   color: var(--pr-hata-metin); }

/* ==========================================================================
   Halı kartı
   ========================================================================== */
.pr-kart {
  background: var(--pr-beyaz); border: 1px solid var(--pr-kum);
  border-radius: var(--pr-r-kart); overflow: hidden;
  transition: box-shadow var(--pr-sure-normal) var(--pr-egri),
              transform var(--pr-sure-normal) var(--pr-egri);
}
.pr-kart:hover { box-shadow: var(--pr-golge-1); transform: translateY(-2px); }
.pr-kart__gorsel { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; display: block; }
.pr-kart__govde { padding: var(--pr-kart-ic); }
.pr-kart__ad { font-family: var(--pr-font-baslik); font-weight: 600;
  font-size: var(--pr-fs-h2); color: var(--pr-orman); margin: 0 0 var(--pr-sp-1); }
.pr-kart__kunye { font-size: var(--pr-fs-kucuk); color: var(--pr-soluk); margin: 0; }

.pr-rozet { display: inline-flex; align-items: center; gap: var(--pr-sp-1);
  padding: var(--pr-sp-1) var(--pr-sp-3); border-radius: var(--pr-r-tam);
  font-size: var(--pr-fs-etiket); font-weight: 600; letter-spacing: var(--pr-ls-etiket);
  text-transform: uppercase; background: var(--pr-kiremit); color: var(--pr-beyaz); }

/* --- Fotoğraf üzeri yazı --------------------------------------------- */
.pr-ortu { position: relative; }
.pr-ortu::after { content: ""; position: absolute; inset: 0; background: var(--pr-ortu); }
.pr-ortu > * { position: relative; z-index: 1; }