
/* ============================================================
   EDE - CONTENT PAGE COMPONENTS - pr-* v5 - 6 August 2026
   SOL RAYLI IKI SUTUN DUZENI
   v4 blogunun TAMAMINI (BEGIN..END) sil, bunu yapistir.
   Cakisma korumasi korundu: pr-tick / pr-tick-num / pr-intro
   ============================================================ */

:root{
  --pr-ink:#17394B;
  --pr-copper:#B87333;
  --pr-cream:#F4EFE7;
  --pr-line:rgba(23,57,75,.20);
  --pr-mute:rgba(23,57,75,.64);
  --pr-page:1180px;              /* sayfa kabi        */
  --pr-rail:15rem;               /* sol baslik rayi   */
  --pr-gap:3.25rem;              /* ray-metin araligi */
  --pr-body:46rem;               /* metin olcusu ~736px */
}

/* --- 1. SAYFA KABI ------------------------------------------- */
.page-content{
  max-width:var(--pr-page);
  margin:0 auto;
  padding:0 1.5rem;
  box-sizing:border-box;
}

/* --- 2. AÇILIŞ PARAGRAFI ------------------------------------- */
.pr-intro{
  font-size:21px;
  line-height:1.6;
  color:var(--pr-ink);
  border-left:2px solid var(--pr-copper);
  padding-left:1.5rem;
  max-width:52rem;
  margin:0 0 1rem;
}

/* --- 3. BÖLÜM IZGARASI - İMZA DÜZEN --------------------------
   Sol ray: baslik. Sag sutun: metin. Serit bilesenler: tam en.  */
.pr-sec{
  display:grid;
  grid-template-columns:var(--pr-rail) 1fr;
  column-gap:var(--pr-gap);
  border-top:1px solid var(--pr-line);
  padding-top:2.25rem;
  margin-top:3.5rem;
}
.pr-sec > h2{
  grid-column:1;
  align-self:start;
  font-family:'Jost',sans-serif;
  font-weight:300;
  font-size:25px;
  line-height:1.22;
  letter-spacing:.005em;
  color:var(--pr-ink);
  margin:0;padding:0;border:0;
}
.pr-sec > .pr-body{
  grid-column:2;
  max-width:var(--pr-body);
}
.pr-sec > .pr-full{
  grid-column:1 / -1;
  margin-top:2.25rem;
}
.pr-body > *:first-child{margin-top:0;}
.pr-body > *:last-child{margin-bottom:0;}
.pr-body ul,.pr-body ol{padding-left:1.15rem;}

/* --- 4. EYEBROW ----------------------------------------------- */
.pr-eyebrow{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pr-copper);
  margin-bottom:.6rem;
}

/* --- 5. KARGO BÖLGELERİ --------------------------------------- */
.pr-zones{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--pr-line);
  border:1px solid var(--pr-line);
}
.pr-zone{background:var(--pr-cream);padding:1.75rem 1.5rem;}
.pr-zone h3{
  font-family:'Space Mono',monospace;
  font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--pr-copper);
  margin:0 0 .9rem;padding:0;border:0;max-width:none;
}
.pr-zone strong{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:22px;font-weight:300;
  color:var(--pr-ink);
  margin-bottom:.6rem;
}
.pr-zone p{font-size:15.5px;line-height:1.55;color:var(--pr-mute);margin:0;max-width:none;}

/* --- 6. SAAT ŞERİDİ - İMZA BİLEŞEN ---------------------------- */
.pr-clock{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--pr-ink);
  border-bottom:2px solid var(--pr-ink);
}
.pr-tick{padding:2rem 1.75rem;}
.pr-tick + .pr-tick{border-left:1px solid var(--pr-line);}
.pr-tick-num{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:52px;line-height:1;
  color:var(--pr-copper);
}
.pr-unit{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pr-mute);
  margin:.7rem 0 .9rem;
}
.pr-tick p{font-size:15.5px;line-height:1.5;color:var(--pr-ink);margin:0;max-width:none;}

/* --- 7. SPEC SATIRLARI ---------------------------------------- */
.pr-spec{margin:1.75rem 0;border-top:1px solid var(--pr-line);}
.pr-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:2rem;padding:.9rem 0;
  border-bottom:1px solid var(--pr-line);
}
.pr-k{font-size:16.5px;color:var(--pr-ink);}
.pr-v{
  font-family:'Space Mono',monospace;
  font-size:14px;color:var(--pr-copper);
  white-space:nowrap;text-align:right;
}

/* --- 8. SERT KURAL KUTUSU ------------------------------------- */
.pr-hard{
  background:var(--pr-ink);
  display:grid;
  grid-template-columns:var(--pr-rail) 1fr;
  column-gap:var(--pr-gap);
  padding:2.75rem 2.5rem;
}
.pr-hard h3{
  grid-column:1;align-self:start;
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:25px;line-height:1.22;color:#fff;
  margin:0;padding:0;border:0;max-width:none;
}
.pr-hard .pr-hard-body{grid-column:2;max-width:var(--pr-body);}
.pr-hard .pr-eyebrow{grid-column:1;margin-bottom:.5rem;}
.pr-hard p{
  font-size:17px;line-height:1.65;
  color:rgba(255,255,255,.84);
  margin:0 0 1rem;max-width:none;
}
.pr-hard p:last-child{margin-bottom:0;}
.pr-hard em{color:#fff;font-style:italic;}

/* --- 9. RETAIL COPY KARTI ------------------------------------- */
.pr-copy{
  border:1px dashed var(--pr-copper);
  background:var(--pr-cream);
  padding:2rem 2.25rem;
}
.pr-copy blockquote{
  margin:0;padding:0;border:0;max-width:56rem;
  font-size:17.5px;line-height:1.72;
  color:var(--pr-ink);
}

/* --- 10. ARA GENİŞLİK (ray daralır) --------------------------- */
@media (max-width:1120px){
  :root{--pr-rail:11rem;--pr-gap:2.25rem;}
  .pr-sec > h2,.pr-hard h3{font-size:22px;}
}

/* --- 11. MOBİL / TABLET (tek sütun) --------------------------- */
@media (max-width:900px){
  .page-content{padding:0 1rem;}
  .pr-sec,.pr-hard{grid-template-columns:1fr;}
  .pr-sec > h2{margin-bottom:1.1rem;font-size:24px;}
  .pr-sec > .pr-body,.pr-sec > .pr-full,
  .pr-hard h3,.pr-hard .pr-hard-body{grid-column:1;max-width:none;}
  .pr-hard h3{margin-bottom:1rem;}
  .pr-zones,.pr-clock{grid-template-columns:1fr;}
  .pr-tick + .pr-tick{border-left:0;border-top:1px solid var(--pr-line);}
  .pr-tick-num{font-size:40px;}
  .pr-intro{font-size:18px;padding-left:1rem;}
  .pr-hard{padding:1.75rem 1.35rem;}
  .pr-copy{padding:1.4rem;}
  .pr-row{flex-direction:column;gap:.2rem;}
  .pr-v{text-align:left;}
}

