/* REHBER-SABLON v1 - rehber makalesi, sektor sayfasi ve rehberler ana sayfasi
   (smart360.com.tr, smartmail.com.tr, smartfiles.com.tr). TEK KAYNAK:
   Smart360/web/rehberler/rehber.css ; statik sitelere `node Smart360/scripts/
   rehber-uret.mjs` KOPYALAR (kopyayi duzenlemeyin; ayni-olmali birebir).
   Kullanim ve isaretleme: Smart360/docs/rehberler/SABLON.md
   Renkler sitelerin ortak jeton adlarindan (--text, --dim, --faint, --brand,
   --deep, --line, --line2, --surface, --surface2, --bg, --tint, --tintStrong,
   --grad, --grad-dugme, --brandBand, --shadow). Yalniz acik tema. JS gerekmez. */

.rehber{display:block}
.rehber-gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- baslik bandi ---------- */
.rehber-bas{background:radial-gradient(60% 90% at 100% 0%,var(--tint),transparent 70%), var(--bg); border-bottom:1px solid var(--line2)}
.rehber-bas-ic{max-width:1180px; margin:0 auto; padding:clamp(28px,4vw,48px) 24px clamp(32px,4.5vw,56px);
  display:grid; gap:28px; align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .rehber-bas-ic:has(> .ill){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px} }
.rehber-bas .ill{max-width:360px; margin-inline:auto}
.rehber-kirinti ol{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:4px 6px; font-size:13px; color:var(--faint)}
.rehber-kirinti li + li::before{content:"/"; margin-right:6px; opacity:.5}
.rehber-kirinti a{color:var(--faint); border:0; text-decoration:none}
.rehber-kirinti a:hover{color:var(--deep)}
.rehber-kategori{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--deep);
  background:var(--tint); border-radius:999px; padding:5px 12px}
.rehber-bas h1{margin:14px 0 0; font-size:clamp(30px,4vw,48px); line-height:1.1; letter-spacing:-0.025em; color:var(--text); max-width:22ch}
.rehber-ozet{margin:18px 0 0; font-size:clamp(17px,1.6vw,19.5px); line-height:1.6; color:var(--dim); max-width:40em}
.rehber-meta{margin:18px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px; color:var(--faint)}
.rehber-meta span{display:inline-flex; align-items:center; gap:6px}
.rehber-meta span + span::before{content:""; width:4px; height:4px; border-radius:999px; background:currentColor; opacity:.5; margin-right:10px}

/* ---------- duzen: icindekiler + yazi ---------- */
.rehber-duzen{max-width:1180px; margin:0 auto; padding:clamp(32px,4vw,56px) 24px clamp(48px,6vw,80px);
  display:grid; gap:48px; grid-template-columns:minmax(0,1fr); justify-content:center}
@media (min-width:1100px){ .rehber-duzen{grid-template-columns:230px minmax(0,740px)} }
.rehber-toc{font-size:14px}
.rehber-toc b{display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.rehber-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; border-left:1px solid var(--line)}
.rehber-toc li{counter-increment:toc}
.rehber-toc a{display:flex; gap:8px; padding:6px 12px; margin-left:-1px; border:0; border-left:2px solid transparent; color:var(--dim); line-height:1.45; text-decoration:none}
.rehber-toc a::before{content:counter(toc,decimal-leading-zero); font-size:11.5px; font-weight:700; color:var(--faint); padding-top:2px}
.rehber-toc a:hover{color:var(--deep); border-left-color:var(--brand)}
@media (min-width:1100px){ .rehber-toc{position:sticky; top:calc(var(--ust-bar, 0px) + 24px); align-self:start} }
@media (max-width:1099px){ .rehber-toc{padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface)} }

/* ---------- yazi tipografisi (govde) ---------- */
.rehber-yazi{display:block}
.rehber-govde{min-width:0; font-size:17px; line-height:1.78; color:var(--dim)}
.rehber-govde > :first-child{margin-top:0}
.rehber-govde h2{margin:52px 0 0; font-size:clamp(23px,2.4vw,28px); line-height:1.22; letter-spacing:-0.015em; color:var(--text); scroll-margin-top:calc(var(--ust-bar, 0px) + 20px)}
.rehber-govde h3{margin:32px 0 0; font-size:19.5px; line-height:1.3; color:var(--text); scroll-margin-top:calc(var(--ust-bar, 0px) + 20px)}
.rehber-govde p{margin:16px 0 0}
.rehber-govde strong{color:var(--text)}
.rehber-govde ul,.rehber-govde ol{margin:16px 0 0; padding-left:1.3em}
.rehber-govde li{margin:8px 0}
.rehber-govde li::marker{color:var(--brand); font-weight:700}
.rehber-govde a{color:var(--deep); border-bottom:1px solid var(--tintStrong); text-decoration:none}
.rehber-govde a:hover{border-bottom-color:var(--brand)}
.rehber-govde blockquote{margin:24px 0 0; padding:4px 0 4px 20px; border-left:3px solid var(--brand); color:var(--text); font-size:18.5px; line-height:1.6}
.rehber-govde figure{margin:28px 0 0}
.rehber-govde figcaption{margin-top:10px; font-size:13.5px; color:var(--faint)}
.rehber-govde code{font-size:.88em}
.rehber-govde table{width:100%; border-collapse:collapse; margin-top:20px; font-size:15px}
.rehber-govde th,.rehber-govde td{padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.rehber-govde th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); background:var(--surface2)}
.rehber-tablo{overflow-x:auto; position:relative; margin-top:20px}
.rehber-tablo table{margin-top:0; min-width:520px}

/* adimlar: numarali, kalin */
ol.rehber-adimlar{list-style:none; counter-reset:radim; padding:0; margin-top:20px}
ol.rehber-adimlar > li{counter-increment:radim; position:relative; padding-left:48px; margin:18px 0}
ol.rehber-adimlar > li::before{content:counter(radim); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center; background:var(--grad-dugme, var(--grad)); color:#fff; font-weight:700; font-size:14.5px}
/* kontrol listesi */
ul.rehber-kontrol{list-style:none; padding:0}
ul.rehber-kontrol > li{position:relative; padding-left:34px}
ul.rehber-kontrol > li::before{content:""; position:absolute; left:0; top:4px; width:22px; height:22px; border-radius:7px; background:var(--tint);
  box-shadow:inset 0 0 0 1.5px var(--tintStrong)}
ul.rehber-kontrol > li::after{content:""; position:absolute; left:7px; top:9px; width:8px; height:5px; border-left:2px solid var(--deep); border-bottom:2px solid var(--deep); transform:rotate(-45deg)}

/* kutular */
.rehber-kutu{margin:26px 0 0; padding:18px 20px; border-radius:14px; background:var(--surface2); border:1px solid var(--line); font-size:16px; line-height:1.65}
.rehber-kutu > b:first-child{display:block; color:var(--text); margin-bottom:4px}
.rehber-kutu.dikkat{background:rgba(245,184,61,.10); border-color:rgba(245,184,61,.45)}
.rehber-kutu.ipucu{background:rgba(130,89,210,.06); border-color:rgba(130,89,210,.22)}
.rehber-kutu p:first-child{margin-top:0}

/* "SmartX bunu nasil cozer" */
.rehber-cozum{margin:48px 0 0; padding:clamp(22px,3vw,32px); border-radius:18px; background:var(--brandBand); border:1px solid var(--tintStrong)}
.rehber-cozum > h2{margin-top:0}
.rehber-cozum-bas{display:flex; align-items:center; gap:12px}
.rehber-cozum-bas img,.rehber-cozum-bas svg{width:40px; height:40px; flex:0 0 40px}
.rehber-cozum-bas h2{margin:0}
.rehber-cozum ul{list-style:none; padding:0; margin-top:18px; display:grid; gap:12px}
.rehber-cozum li{position:relative; margin:0; padding:14px 16px 14px 48px; background:var(--surface); border-radius:12px; border:1px solid var(--line); font-size:16px; line-height:1.6}
.rehber-cozum li::before{content:""; position:absolute; left:16px; top:16px; width:20px; height:20px; border-radius:999px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat, var(--grad-dugme, var(--grad))}
.rehber-cozum li b{color:var(--text)}
.rehber-cozum .rehber-baglar{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 18px; font-size:15px; font-weight:600}

/* SSS */
.rehber-sss{margin-top:52px}
.rehber-sss details{margin:10px 0 0; padding:0 18px; background:var(--surface); border:1px solid var(--line); border-radius:13px; font-size:16px; line-height:1.65}
.rehber-sss details[open]{padding-bottom:16px}
.rehber-sss summary{list-style:none; cursor:pointer; position:relative; margin:0 -18px; padding:16px 48px 16px 18px; font-size:16.5px; font-weight:700; color:var(--text); line-height:1.4}
.rehber-sss summary::-webkit-details-marker{display:none}
.rehber-sss summary::after,.rehber-sss details[open] > summary::after{content:""; position:absolute; right:20px; top:22px; width:8px; height:8px;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); transition:transform .15s}
.rehber-sss details[open] > summary::after{transform:rotate(-135deg); top:26px}
.rehber-sss details > p{margin:0}
.rehber-sss details > p + p{margin-top:10px}

/* ilgili baglantilar */
.rehber-ilgili{margin-top:40px}
.rehber-ilgili ul{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); align-items:start}
.rehber-ilgili li{margin:0}
.rehber-ilgili a{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font-weight:600; font-size:15px; line-height:1.4}
.rehber-ilgili a:hover{border-color:var(--brand); color:var(--deep)}
.rehber-ilgili a small{display:block; margin-top:4px; font-size:12.5px; font-weight:500; color:var(--faint)}

/* son cagri - tek */
.rehber-cagri{margin:52px 0 0; padding:clamp(24px,3.5vw,36px); border-radius:20px; background:var(--grad-dugme, var(--grad)); color:#fff;
  display:grid; gap:18px; align-items:center; box-shadow:var(--shadow)}
@media (min-width:700px){ .rehber-cagri{grid-template-columns:minmax(0,1fr) auto} }
.rehber-cagri h2{margin:0; color:#fff; font-size:clamp(21px,2.2vw,25px)}
.rehber-cagri p{margin:8px 0 0; color:rgba(255,255,255,.9); font-size:16px}
.rehber-cagri-dugmeler{display:flex; flex-wrap:wrap; gap:10px}
.rehber-cagri-dugmeler a{display:inline-flex; align-items:center; border-radius:999px; padding:11px 20px; font-weight:700; font-size:15px; text-decoration:none; border:0; white-space:nowrap}
.rehber-cagri-dugmeler a.birincil,.rehber-cagri-dugmeler a.birincil:hover{background:#fff; color:#4b2a86}
.rehber-cagri-dugmeler a.ikincil,.rehber-cagri-dugmeler a.ikincil:hover{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.rehber-cagri-dugmeler a:hover{filter:brightness(1.04)}

/* ---------- sektor sayfasi ---------- */
.sektor-sorunlar{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:start; counter-reset:sorun}
.sektor-sorunlar > li{counter-increment:sorun; margin:0; padding:20px 20px 20px 64px; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; font-size:15.5px; line-height:1.6}
.sektor-sorunlar > li::before{content:counter(sorun,decimal-leading-zero); position:absolute; left:18px; top:18px; font-size:22px; font-weight:800; color:var(--brand); letter-spacing:-.02em}
.sektor-sorunlar > li b{display:block; color:var(--text); font-size:16.5px; margin-bottom:4px}

/* ---------- kart listesi (ana sayfa + "diger rehberler") ---------- */
.rehber-liste{max-width:1180px; margin:0 auto; padding:clamp(32px,4vw,56px) 24px}
.rehber-liste > h2{margin:0; font-size:clamp(23px,2.4vw,28px); color:var(--text)}
.rehber-liste > p{margin:10px 0 0; color:var(--faint); max-width:44em}
.rehber-kartlar{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); align-items:start}
.rehber-kartlar > li{margin:0}
.rehber-kart{display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  color:var(--dim); text-decoration:none; transition:border-color .2s, transform .2s, box-shadow .2s}
a.rehber-kart{border-bottom:1px solid var(--line)}
.rehber-kart:hover{border-color:var(--tintStrong); transform:translateY(-2px); box-shadow:var(--shadow); color:var(--dim)}
.rehber-kart .rehber-kategori{align-self:flex-start; font-size:11px; padding:4px 10px}
.rehber-kart :is(h2,h3){margin:2px 0 0; font-size:18.5px; line-height:1.3; color:var(--text)}
.rehber-kart:hover :is(h2,h3){color:var(--deep)}
.rehber-kart p{margin:0; font-size:15px; line-height:1.6}
.rehber-kart small{font-size:12.5px; color:var(--faint)}
.rehber-diger{background:var(--bg); border-top:1px solid var(--line2)}
@media (prefers-reduced-motion:reduce){ .rehber-kart:hover{transform:none} }
@media print{ .rehber-toc,.rehber-cagri,.rehber-diger{display:none} .rehber-duzen{display:block} }
/* "Diger rehberler" bandi tam genislik; icerik yine 1180px hizasinda */
.rehber-liste.rehber-diger{max-width:none; padding-inline:max(24px, calc((100% - 1180px) / 2 + 24px))}
@media (max-width:899px){ .rehber-bas .ill{max-width:220px} }