/* EkipmanTakip Rehber — siteye özgü (bespoke) tasarım. Ana site (index.html) dil sistemi + karakterli makale düzeni. */
:root{
  --bg:#fafaf9;--bg-alt:#f5f4f0;--fg:#1a1a1a;--fg-soft:#6b6b6b;--fg-muted:#9a9a9a;--muted:#9a9a9a;
  --accent:#e85d04;--accent-2:#f59e0b;--accent-soft:#fde8d8;--accent-dark:#c44b03;
  --dark:#0a0f1a;--dark-soft:#1c2333;--border:#e5e3df;--card:#fff;
  --green:#16a34a;--green-bg:#dcfce7;--yellow:#ca8a04;--yellow-bg:#fef9c3;
  --radius:14px;--maxw:800px;
  --mono:'JetBrains Mono',ui-monospace,monospace;--sans:'DM Sans',system-ui,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);line-height:1.7;font-size:16px}
img{max-width:100%;height:auto}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Okuma ilerleme çubuğu (JS ile) ── */
.r-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:60;transition:width .12s ease-out;box-shadow:0 0 8px rgba(232,93,4,.4)}

/* ── Navbar (ana site .nav: yarı-saydam + blur) ── */
.r-top{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.85);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--border)}
.r-top-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:0 24px;height:64px}
.r-logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--fg);letter-spacing:-.3px}
.r-logo img{height:44px;width:auto}
.r-logo span{font-size:17px}
.r-top .spacer{flex:1}
.r-nav-link{color:var(--fg-soft);font-weight:600;font-size:14px;padding:8px 14px;border-radius:8px}
.r-nav-link:hover{color:var(--fg);background:var(--bg-alt);text-decoration:none}
.r-cta-sm{background:var(--dark);color:#fff !important;padding:10px 18px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;border:1.5px solid var(--dark);transition:all .2s}
.r-cta-sm:hover{background:var(--dark-soft);transform:translateY(-1px);box-shadow:0 6px 20px rgba(10,15,26,.2);text-decoration:none}

/* ── Kap ── */
.r-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ── Breadcrumb ── */
.r-bc{font-family:var(--mono);font-size:12px;color:var(--fg-muted);padding:22px 0 16px;letter-spacing:-.2px}
.r-bc a{color:var(--fg-soft)}

/* ── Makale başlığı — koyu, markalı "hero" panel (bespoke) ── */
.r-head{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:22px;padding:36px 34px 32px;margin-bottom:34px;box-shadow:0 24px 60px -20px rgba(10,15,26,.4)}
.r-head::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 460px 300px at 12% 8%,rgba(232,93,4,.22),transparent),
  radial-gradient(ellipse 420px 340px at 92% 100%,rgba(245,158,11,.10),transparent);pointer-events:none}
.r-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent)}
.r-head>*{position:relative}
.r-kicker{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:700;color:#fdba74;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;padding:5px 14px;background:rgba(232,93,4,.16);border:1px solid rgba(232,93,4,.25);border-radius:6px}
.r-head h1{font-size:clamp(26px,4.4vw,40px);font-weight:800;line-height:1.13;letter-spacing:-1.2px;color:#fff}
.r-meta{color:rgba(255,255,255,.55);font-size:12.5px;margin-top:18px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);letter-spacing:-.2px}

/* ── İçindekiler ── */
.r-toc{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 22px 18px 24px;margin:0 0 34px;box-shadow:0 1px 3px rgba(0,0,0,.04);position:relative}
.r-toc::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent)}
.r-toc b{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:10px}
.r-toc ol{margin:0;padding-left:20px;counter-reset:toc}
.r-toc li{margin:7px 0;font-size:15px}
.r-toc a{color:var(--fg-soft);transition:color .15s}
.r-toc a:hover{color:var(--accent-dark)}
.r-toc a.active{color:var(--accent-dark);font-weight:700}

/* ── Makale gövdesi ── */
.r-body{font-size:17px;color:#2a2a2a}
.r-body>p:first-of-type{font-size:19px;line-height:1.65;color:#3a3a3a}   /* lead paragraf */
.r-body h2{position:relative;font-size:clamp(22px,3vw,29px);font-weight:800;letter-spacing:-.8px;color:var(--fg);margin:42px 0 15px;padding-left:18px;scroll-margin-top:84px}
.r-body h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:4px;background:linear-gradient(var(--accent),var(--accent-2))}
.r-body h3{font-size:19px;font-weight:700;margin:28px 0 8px;color:var(--fg);letter-spacing:-.3px}
.r-body p{margin:0 0 16px}
.r-body ul,.r-body ol{margin:0 0 16px;padding-left:6px;list-style:none}
.r-body ul li,.r-body ol li{position:relative;margin:9px 0;padding-left:26px}
.r-body ul li::before{content:'';position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.r-body ol{counter-reset:li}
.r-body ol li{counter-increment:li}
.r-body ol li::before{content:counter(li);position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:6px;background:var(--accent-soft);color:var(--accent-dark);font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.r-body strong{color:var(--fg);font-weight:700}
.r-body a{font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ── Tablolar ── */
.r-table-wrap{overflow-x:auto;margin:22px 0;border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 18px -8px rgba(0,0,0,.12)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
th,td{border-bottom:1px solid var(--border);padding:13px 16px;text-align:left;vertical-align:top}
th{background:var(--dark);color:#fff;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;font-family:var(--mono)}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:var(--bg-alt)}
td:first-child{font-weight:600;color:var(--fg)}

/* ── Kutular ── */
.r-callout{position:relative;border-radius:var(--radius);padding:16px 20px 16px 22px;margin:24px 0;font-size:15.5px;overflow:hidden}
.r-callout::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px}
.r-callout.info{background:var(--bg-alt);border:1.5px solid var(--border)}
.r-callout.info::before{background:var(--fg-muted)}
.r-callout.warn{background:var(--yellow-bg);border:1.5px solid #fde68a;color:#854d0e}
.r-callout.warn::before{background:var(--yellow)}
.r-callout b{display:block;margin-bottom:4px}

/* Özet / önemli çıkarımlar kutusu */
.r-key{background:linear-gradient(180deg,#fff,var(--bg-alt));border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin:26px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.r-key b{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:12px}
.r-key ul{margin:0 !important;padding-left:6px !important}

/* Resmî kaynak kutusu */
.r-source{background:var(--accent-soft);border:1px solid rgba(232,93,4,.22);border-radius:var(--radius);padding:16px 20px;margin:28px 0;font-size:14px;color:#7c3a08;line-height:1.7}
.r-source b{color:var(--accent-dark)}
.r-source a{color:var(--accent-dark);font-weight:700}

/* ── SSS ── */
.r-faq{margin:28px 0}
.r-faq details{background:var(--card);border:1.5px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.r-faq details[open]{border-color:#d8d5cf;box-shadow:0 4px 14px -6px rgba(0,0,0,.1)}
.r-faq summary{padding:16px 20px;font-weight:700;cursor:pointer;list-style:none;font-size:15.5px;display:flex;justify-content:space-between;gap:12px;letter-spacing:-.2px}
.r-faq summary::-webkit-details-marker{display:none}
.r-faq summary::after{content:'+';color:var(--accent);font-weight:700;font-size:22px;line-height:1;font-family:var(--mono)}
.r-faq details[open] summary::after{content:'–'}
.r-faq details[open] summary{border-bottom:1px solid var(--border)}
.r-faq .r-faq-a{padding:15px 20px;color:var(--fg-soft);font-size:15px}

/* ── CTA (koyu bölüm + turuncu buton, homepage vibe) ── */
.r-cta{background:var(--dark);color:#fff;border-radius:22px;padding:38px 32px;margin:40px 0;text-align:center;position:relative;overflow:hidden}
.r-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 420px 320px at 22% 25%,rgba(232,93,4,.2),transparent),radial-gradient(ellipse 380px 300px at 82% 90%,rgba(245,158,11,.1),transparent);pointer-events:none}
.r-cta h3{color:#fff;font-size:24px;font-weight:800;letter-spacing:-.6px;margin-bottom:10px;position:relative}
.r-cta p{color:rgba(255,255,255,.62);font-size:15.5px;max-width:520px;margin:0 auto 22px;position:relative}
.r-cta a{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff !important;padding:15px 32px;border-radius:12px;font-weight:700;font-size:15.5px;box-shadow:0 6px 20px rgba(232,93,4,.35);transition:all .22s}
.r-cta a:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,93,4,.45);text-decoration:none}

/* ── İlgili yazılar / kartlar (ana site .cat-card hissi) ── */
.r-related{margin:44px 0 10px}
.r-related h2{font-size:22px;font-weight:800;letter-spacing:-.6px;color:var(--fg);margin-bottom:16px}
.r-related-grid,.r-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.r-related-grid a,.r-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 20px;color:var(--fg);display:block;position:relative;overflow:hidden;transition:all .22s}
.r-related-grid a::before,.r-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.r-related-grid a:hover,.r-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px -12px rgba(0,0,0,.16);border-color:#ccc;text-decoration:none}
.r-related-grid a:hover::before,.r-card:hover::before{transform:scaleX(1)}
.r-related-grid a{font-weight:700;font-size:15px;letter-spacing:-.2px}
.r-related-grid a span{display:block;color:var(--fg-muted);font-weight:500;font-size:12.5px;margin-top:4px;font-family:var(--mono)}

/* ── Footer (ana site .foot) ── */
.r-foot{background:var(--dark);color:rgba(255,255,255,.4);margin-top:56px;border-top:3px solid var(--accent)}
.r-foot-in{max-width:var(--maxw);margin:0 auto;padding:34px 24px;font-size:13.5px;text-align:center;line-height:1.9}
.r-foot a{color:rgba(255,255,255,.55)}
.r-foot a:hover{color:var(--accent)}
.r-foot .r-foot-links{margin-bottom:12px;display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}

/* ── Rehber index (hub) ── */
.r-hero{background:var(--dark);color:#fff;text-align:center;padding:60px 20px 52px;position:relative;overflow:hidden;border-bottom:3px solid var(--accent)}
.r-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 620px 380px at 28% 18%,rgba(232,93,4,.16),transparent),radial-gradient(ellipse 520px 420px at 86% 82%,rgba(245,158,11,.09),transparent);pointer-events:none}
.r-hero h1{font-size:clamp(28px,5vw,46px);font-weight:800;letter-spacing:-1.4px;position:relative}
.r-hero p{color:rgba(255,255,255,.62);margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto;font-size:16.5px;position:relative}
.r-cards{padding:28px 0}
.r-card .r-card-cat{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.r-card h3{font-size:17px;font-weight:700;margin:7px 0 5px;line-height:1.35;letter-spacing:-.3px}
.r-card p{color:var(--fg-soft);font-size:13.5px}
.r-sec-title{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);font-weight:700;margin:28px 0 2px}

@media(max-width:680px){
  body{font-size:15.5px}
  .r-body{font-size:16px}
  .r-body>p:first-of-type{font-size:17.5px}
  .r-head{padding:26px 22px 24px;border-radius:18px}
  .r-cards,.r-related-grid{grid-template-columns:1fr}
  .r-nav-link{display:none}
  .r-top-in{padding:0 16px;height:58px}
  .r-logo img{height:38px}
  .r-wrap{padding:0 18px}
}
