/* =========================================================
   bariscoarts — alt sayfa ortak stilleri (blog & rehberler)
   ========================================================= */
:root{ --crimson:#E11D2A; --gold:#C9A24B; }
html{ scroll-behavior:smooth; }
html,body{ background:#0A0A0B; }
body{ font-family:'Manrope',sans-serif; color:#F4EFE6; margin:0; overflow-x:hidden; }
::selection{ background:var(--crimson); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0A0A0B; }
::-webkit-scrollbar-thumb{ background:#2E2E34; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--crimson); }

/* film grain */
.grain::after{
  content:""; position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,1%)}}

/* links */
.ulink{ position:relative; }
.ulink::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:currentColor; transition:width .35s ease; }
.ulink:hover::after{ width:100%; }

.text-gradient{ background:linear-gradient(120deg,#F4EFE6 0%,#B8B5AE 55%,#E11D2A 115%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(48px); transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-clip]{ clip-path:inset(0 0 100% 0); -webkit-clip-path:inset(0 0 100% 0); transition:clip-path 1.25s cubic-bezier(.16,1,.3,1),-webkit-clip-path 1.25s cubic-bezier(.16,1,.3,1); }
[data-clip].in{ clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); }
[data-clip] img{ transform:scale(1.18); transition:transform 1.6s cubic-bezier(.16,1,.3,1); }
[data-clip].in img{ transform:scale(1); }

/* header */
.site-head{ position:fixed; top:0; inset-inline:0; z-index:50; transition:background .4s, border-color .4s; border-bottom:1px solid transparent; }
.site-head.scrolled{ background:rgba(10,10,11,.85); backdrop-filter:blur(10px); border-color:#2E2E34; }

/* WhatsApp yüzen buton */
.wa-fab{ position:fixed; right:20px; bottom:20px; z-index:85; width:56px; height:56px; border-radius:50%; background:#25D366; color:#06281a; display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.45); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.wa-fab:hover{ transform:scale(1.08); box-shadow:0 16px 42px rgba(37,211,102,.4); }
.wa-fab svg{ width:30px; height:30px; }
.wa-fab::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.45; z-index:-1; animation:waPulse 2.6s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.45 } 70%{ transform:scale(1.7); opacity:0 } 100%{ opacity:0 } }
@media (max-width:640px){ .wa-fab{ width:52px; height:52px; right:16px; bottom:16px; } }

/* buttons */
.btn-fill{ position:relative; overflow:hidden; isolation:isolate; }
.btn-fill::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--crimson); transform:translateY(101%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
.btn-fill:hover::before{ transform:translateY(0); }

/* ───────── makale içeriği (premium okuma) ───────── */
.prose{ color:#b8b2a8; font-size:1.07rem; line-height:1.85; }
.prose > * + *{ margin-top:1.5rem; }
.prose h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:2.5rem; letter-spacing:.03em; line-height:1; color:#F4EFE6; margin-top:3.2rem; }
.prose h3{ font-weight:600; font-size:1.3rem; color:#F4EFE6; margin-top:2.2rem; }
.prose p{ color:#b8b2a8; }
.prose strong{ color:#F4EFE6; font-weight:600; }
.prose em{ font-family:'Cormorant',serif; font-style:italic; font-size:1.15em; color:#d8d2c8; }
.prose a{ color:#E11D2A; text-decoration:underline; text-underline-offset:3px; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.6rem; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:7px; background:var(--crimson); }
.prose ul li + li{ margin-top:.7rem; }
.prose ol{ counter-reset:n; list-style:none; padding-left:0; }
.prose ol li{ position:relative; padding-left:2.6rem; min-height:1.6rem; }
.prose ol li::before{ counter-increment:n; content:counter(n,decimal-leading-zero); position:absolute; left:0; top:-.1em; font-family:'Bebas Neue',sans-serif; color:var(--crimson); font-size:1.25rem; letter-spacing:.05em; }
.prose ol li + li{ margin-top:1rem; }
.prose blockquote{ border-left:2px solid var(--crimson); padding:.2rem 0 .2rem 1.6rem; font-family:'Cormorant',serif; font-style:italic; font-size:1.6rem; line-height:1.4; color:#F4EFE6; }
.prose figure{ margin-top:2.5rem; }
.prose figure img{ width:100%; display:block; }
.prose figcaption{ margin-top:.7rem; font-size:.8rem; letter-spacing:.04em; color:#6b6760; text-align:center; }
.prose hr{ border:none; border-top:1px solid #2E2E34; margin:3.5rem 0; }
/* öne çıkan kutu (ipucu/uyarı) */
.callout{ border:1px solid #2E2E34; background:#121214; padding:1.4rem 1.5rem; }
.callout.warn{ border-color:rgba(225,29,42,.4); }
.callout-title{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--crimson); margin-bottom:.6rem; }

/* ═══════════ MOBİL ODAKLI (≤ 640px) ═══════════ */
@media (max-width:639px){
  .pt-36{ padding-top:7rem !important; }       /* makale üst boşluğunu sıkılaştır */
  .prose{ font-size:1rem; line-height:1.78; }
  .prose h2{ font-size:2.1rem; margin-top:2.5rem; }
  .prose blockquote{ font-size:1.35rem; padding-left:1.1rem; }
  .prose ol li, .prose ul li{ padding-left:1.5rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-clip]{ clip-path:none !important; -webkit-clip-path:none !important; }
  [data-clip] img{ transform:none !important; }
  .grain::after{ display:none; }
}