/* ============================================================================
 *  pr-premium.css — PillarRise premium geçiş katmanı            v1.0 · 2026-08
 * ----------------------------------------------------------------------------
 *  NE YAPAR
 *   Ana sayfanın YAPISINA, bölüm sırasına, metnine hiç dokunmadan; tipografiyi,
 *   boşluk ritmini, gölge/köşe ölçeğini, hover ve odak davranışını tek bir
 *   ölçeğe oturtur.
 *
 *  NASIL GERİ ALINIR
 *   inc/head.php içindeki iki satırı (font + bu dosya) silin. Site saniyesinde
 *   eski hâline döner. Başka hiçbir dosya değişmedi.
 *
 *  ⚠ KAPSAM
 *   Yazı tipi ve tarayıcı yüzeyleri SİTE GENELİNE uygulanır (güvenli: yalnız
 *   render değişir). Tipografi ölçeği ve boşluk ritmi YALNIZ ANA SAYFA
 *   bölümlerine uygulanır — sepet, ödeme, rapor gibi ekranların düzeni
 *   kazara kaymasın diye.
 *
 *  ⚠ ÖZGÜLLÜK NOTU
 *   Bölüm stilleri sayfanın GÖVDESİNDE, bu dosya ise BAŞLIKTA yüklenir; yani
 *   eşit özgüllükte onlar kazanır. Bu yüzden kurallar `body ` önekiyle yazılır
 *   (0,1,1 > 0,1,0). Önek süs değildir — silinirse katman etkisiz kalır.
 * ==========================================================================*/

:root{
  /* Hareket — tek eğri, tek dil */
  --pr-ease: cubic-bezier(.16,1,.3,1);
  --pr-t-fast: .14s;    /* dokunma geri bildirimi */
  --pr-t: .22s;         /* durum değişimi */

  /* Derinlik — tek ölçek. Gölgenin hem kaçıklığı hem bulanıklığı vardır;
     sıfır kaçıklıklı renkli hale derinlik değil süstür. */
  --pr-shadow-1: 0 1px 2px rgba(16,32,56,.05), 0 10px 24px -12px rgba(16,32,56,.14);
  --pr-shadow-2: 0 2px 6px rgba(16,32,56,.07), 0 22px 48px -16px rgba(16,32,56,.22);
  --pr-shadow-dark: 0 2px 8px rgba(4,12,24,.30), 0 30px 60px -20px rgba(4,12,24,.55);

  /* Köşe — üç adım, arası yok */
  --pr-r-sm: 10px;
  --pr-r-md: 16px;
  --pr-r-lg: 24px;

  /* Renk rolleri (mevcut marka renkleri korunur) */
  --pr-ink: #16202c;        /* başlık */
  --pr-body: #4e5a68;       /* gövde — beyaz üstünde 7:1 */
  --pr-muted: #6b7684;      /* ikincil — 4.6:1, sınırın üstünde */
  --pr-line: #e4eaf2;
  --pr-brand: #14508c;
  --pr-brand-bright: #1f6feb;
}

/* ═══════════ 1 · YAZI TİPİ ═══════════
   main.css 'Poppins' istiyordu ama font hiç yüklenmiyordu; sayfa sistem
   fontuyla çiziliyordu. "En yakın kurulu font" bir kimlik değildir.
   Manrope, /s/ modül sayfalarıyla aynı ailedir — site tek dil konuşur. */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body .btn, body button, body input, body select, body textarea,
body #pr-intro-skip,
body .pr-about, body .pr-whyus, body .pr-method,
body .home-hizmet-section, body .pip-section, body .home-urun-section,
body .pr-cta, body .home-blog-section2, body .reference-logos-section,
body .contact-orbit-section, body .pr-fab{
  font-family:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
/* Font Awesome kendi ailesini !important ile korur; ikonlar etkilenmez. */

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}

/* ═══════════ 2 · TARAYICI YÜZEYLERİ ═══════════
   Sayfanın "kurulmuş" değil "yapılmış" olduğunu en ucuza belli eden yer. */
html{ color-scheme:light; }
body{ accent-color:var(--pr-brand-bright); caret-color:var(--pr-brand); }
::selection{ background:#14508c; color:#fff; }
::-moz-selection{ background:#14508c; color:#fff; }
body a{ text-underline-offset:.18em; text-decoration-thickness:.07em; }
body :focus-visible{
  outline:2px solid var(--pr-brand-bright);
  outline-offset:3px;
  border-radius:6px;
}
body :focus:not(:focus-visible){ outline:none; }

/* ═══════════ 3 · BÖLÜM RİTMİ ═══════════
   Tek bir aralığın her yerde tekrarı ritim değil monotonluktur; bölümler
   bilerek farklı nefes alır. Başlığın ÜSTÜNDE altından fazla boşluk olur. */
body .pr-about{ padding-block:88px 76px; }
body .pr-whyus{ padding-block:76px 80px; }
body .pr-method{ padding-block:96px 100px; }
body .home-hizmet-section{ padding-block:84px 40px; }
body .pip-section{ padding-block:72px 76px; }
body .home-urun-section{ padding-block:40px 72px; }
body .pr-cta{ padding-block:56px 88px; }
body .home-blog-section2{ padding-block:40px 68px; }
body .reference-logos-section{ padding-block:48px 72px; }

body .hh-head{ margin-bottom:44px; }
body .hh-wrap{ padding-inline:24px; }

@media (max-width:767px){
  body .pr-about{ padding-block:56px 48px; }
  body .pr-whyus{ padding-block:48px 52px; }
  body .pr-method{ padding-block:60px 64px; }
  body .home-hizmet-section{ padding-block:56px 28px; }
  body .pip-section{ padding-block:48px 52px; }
  body .home-urun-section{ padding-block:28px 48px; }
  body .pr-cta{ padding-block:36px 56px; }
  body .home-blog-section2{ padding-block:28px 48px; }
  body .reference-logos-section{ padding-block:32px 48px; }
  body .hh-head{ margin-bottom:32px; }
  body .hh-wrap{ padding-inline:20px; }
}

/* ═══════════ 4 · BAŞLIK VE GÖVDE ═══════════ */
body .hh-title{
  font-size:clamp(1.75rem,1.15rem + 2.1vw,2.6rem);
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.14;
  color:var(--pr-ink);
  text-wrap:balance;
  margin-bottom:14px;
}
body .hh-sub{
  font-size:1.06rem;
  font-weight:400;
  line-height:1.66;
  color:var(--pr-body);
  max-width:60ch;
  margin-inline:auto;
  text-wrap:pretty;
}

/* Etiket: hap rozet yerine kısa bir çizgi + aralıklı küçük harf.
   Boyut değil; ağırlık, aralık ve ton hiyerarşiyi kurar. */
body .hh-kicker{
  background:none;
  border:0;
  padding:0;
  border-radius:0;
  color:var(--pr-brand);
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  gap:11px;
  margin-bottom:16px;
}
body .hh-kicker::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:0 0 auto;
}

/* ═══════════ 5 · KOYU ZEMİNDE OKUNURLUK ═══════════
   Beyazda doğru olan metin, ters çevrildiğinde hem ince hem sıkışık kalır:
   satır yüksekliği, harf aralığı ve ağırlık — üçü birden telafi edilir. */
body .pr-method .hh-title,
body .pr-cta__title{ letter-spacing:-.015em; }
body .pr-method .hh-sub,
body .pr-cta__desc{
  font-weight:500;
  letter-spacing:.004em;
  line-height:1.72;
}
body .pr-method .hh-kicker,
body .pr-cta__pill{
  color:#9ccbf7;
  background:none;
  border:0;
  padding:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  letter-spacing:.15em;
}
body .pr-cta__pill i{ display:none; }
body .pr-cta__card{
  border-radius:var(--pr-r-lg);
  box-shadow:var(--pr-shadow-dark);
}

/* ═══════════ 6 · KARTLAR ═══════════
   İki karar:
   (a) Bir öğe ya saç teli çerçeve ya dağınık gölge taşır — ikisi birden
       değil. Kartlar durağan hâlde düz, üstüne gelince kalkıyor.
   (b) Kartın bir kenarındaki renkli şerit, üretilmiş tasarımın en tanıdık
       işaretidir. Kaldırıldı; vurgu artık çerçeve rengi ve yükselme. */
body .hh-card,
body .hp-card,
body .pip-card{
  border-radius:var(--pr-r-md);
  border:1px solid var(--pr-line);
  box-shadow:none;
  transition:transform var(--pr-t) var(--pr-ease),
             box-shadow var(--pr-t) var(--pr-ease),
             border-color var(--pr-t) var(--pr-ease);
}
body .hp-card::before,
body .pip-card::after{ display:none; }

body .hp-img{ border-radius:0; }
body .hp-body h3,
body .pip-card h4,
body .hh-card h3{
  font-weight:700;
  letter-spacing:-.012em;
  color:var(--pr-ink);
  line-height:1.3;
}
body .hp-body p,
body .pip-card p,
body .hh-card p{
  color:var(--pr-body);
  line-height:1.58;
}
body .hp-badge{
  border-radius:var(--pr-r-sm);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  background:rgba(11,31,56,.9);
}

/* Hover yalnız gerçek imleçte; dokunmatikte "yapışık hover" olmaz. */
@media (hover:hover) and (pointer:fine){
  body .hh-card:hover,
  body .hp-card:hover,
  body .pip-card:hover{
    transform:translateY(-3px);
    border-color:#c9dcf5;
    box-shadow:var(--pr-shadow-2);
  }
}

/* ═══════════ 7 · DÜĞMELER ═══════════ */
body .pip-btn,
body .pr-cta__btn{
  border-radius:999px;
  font-weight:700;
  letter-spacing:-.006em;
  min-height:48px;                 /* 44px dokunma tabanının üstünde */
  transition:transform var(--pr-t-fast) var(--pr-ease),
             box-shadow var(--pr-t) var(--pr-ease),
             background-color var(--pr-t) var(--pr-ease);
}
body .pr-cta__btn{ border-radius:var(--pr-r-sm); }
@media (hover:hover) and (pointer:fine){
  body .pip-btn:hover,
  body .pr-cta__btn:hover{ transform:translateY(-2px); }
}
body .pip-btn:active,
body .pr-cta__btn:active{ transform:translateY(0); }

/* ═══════════ 8 · İŞ PLATFORMU BLOĞU ═══════════ */
body .pip-lead{
  border-radius:var(--pr-r-lg);
  box-shadow:var(--pr-shadow-dark);
}
body .pip-lead-txt h3{
  font-weight:800;
  letter-spacing:-.018em;
  line-height:1.22;
}
body .pip-lead-txt p{
  font-weight:500;
  line-height:1.68;
  letter-spacing:.004em;
  max-width:56ch;
}
body .pip-ust{ letter-spacing:-.004em; }
body .pip-note{ color:var(--pr-muted); }

/* ═══════════ 9 · KÜÇÜK METİNLER ═══════════
   Beyaz üstünde açık gri, 12px'te okunmuyor. Hepsi eşiğin üstüne çekildi. */
body .pip-note,
body .hh-more,
body .hp-more,
body .pip-more{ font-weight:600; letter-spacing:-.004em; }

/* ═══════════ 10 · HAREKET AZALTMA ═══════════
   Kapatmak değil yumuşatmak: renk ve opaklık kalır, yer değiştirme gider. */
@media (prefers-reduced-motion:reduce){
  body *,
  body *::before,
  body *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  body .hh-card:hover,
  body .hp-card:hover,
  body .pip-card:hover,
  body .pip-btn:hover,
  body .pr-cta__btn:hover{ transform:none; }
}