/* ==========================================================================
   AYDUKE · css/rehber.css   —   Şehir ve sektör tanıtım sayfaları

   Yükleyen: rehber.php · hizmet-bolgeleri.php · kullanim-alanlari.php
   (kurumsal.css'ten SONRA). Bölüm iskeleti (.sec, .krm-bas, .faq,
   .abt__ico) mevcut dosyalardan; burada yalnızca rehber parçaları var.
   Yön bağımsız (margin-inline, inset-inline): RTL sayfada aynalanıyor.

     1  Başlık alanı (.rhb-bas) + düğmeler + demo notu
     2  İçindekiler (.rhb-toc)
     3  Blok başlığı, düz yazı, dar kap
     4  Maddeler, kartlar, adımlar
     5  Tablo, akış (senaryo), sohbet örneği
     6  Vurgu, ara çağrı, iki sütun
     7  Dizin kartları + sayfalama + bağlantılı çipler
   ========================================================================== */

/* 1 · Başlık alanı ---------------------------------------------------------- */
.rhb-bas__baslik { max-width: 26ch; }
.rhb-bas__maddeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    max-width: 60rem;
    margin: 1.5rem auto 0;
    padding: 0;
    list-style: none;
}
.rhb-bas__maddeler li {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    text-align: start;
    line-height: 1.5;
    color: var(--ink-soft);
}
.rhb-bas__maddeler .ay-ico { margin-top: .2em; font-size: 14px; color: var(--brand-accent); }

.rhb-dugmeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}
.rhb-cagri .rhb-dugmeler { justify-content: flex-start; margin-top: 1.25rem; }
.rhb-demo-not {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin: .875rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}
.rhb-demo-not .ay-ico { font-size: 13px; color: var(--brand-accent); }
.rhb-tarih { margin: 1rem 0 0; font-size: .8125rem; color: var(--ink-mute); }
.rhb-sayfa-no { font-weight: 500; color: var(--ink-mute); }

/* 2 · İçindekiler ----------------------------------------------------------- */
.rhb-toc {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
}
.rhb-toc__baslik {
    margin: 0 0 .625rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.rhb-toc__liste {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rhbtoc;
}
.rhb-toc__liste a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: .3rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    text-decoration: none;
}
.rhb-toc__liste a:hover,
.rhb-toc__liste a:focus-visible { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }

/* 3 · Blok başlığı, yazı ---------------------------------------------------- */
.rhb-dar { max-width: 52rem; }
.rhb-bolum h2[id], .rhb-bolum [id] { scroll-margin-top: calc(var(--h, 82px) + 1rem); }
.rhb-blok__baslik {
    margin: 0 0 1rem;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.rhb-blok__giris p,
.rhb-yazi p {
    margin: 0 0 1rem;
    font-size: var(--fs-lg);
    line-height: 1.75;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.rhb-yazi p:last-child,
.rhb-blok__giris p:last-child { margin-bottom: 0; }
.rhb-blok__giris { margin-bottom: 1.5rem; max-width: 52rem; }
.rhb-blok__sonuc { margin-top: 1.5rem; }
.rhb-yazi strong, .rhb-blok__giris strong { color: var(--ink); font-weight: 600; }
.rhb a:not(.ay-btn) { color: var(--brand-accent); text-underline-offset: .15em; }
.rhb-not { margin: .875rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-mute); }

/* 4 · Maddeler, kartlar, adımlar ------------------------------------------- */
.rhb-maddeler {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rhb-maddeler li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    line-height: 1.65;
    color: var(--ink-soft);
}
.rhb-maddeler .ay-ico { flex: 0 0 auto; margin-top: .35em; font-size: 14px; color: var(--brand-accent); }
.rhb-maddeler strong { color: var(--ink); }
.rhb-maddeler--sik { gap: .5rem; margin-top: .75rem; }

.rhb-kartlar {
    display: grid;
    gap: clamp(.875rem, 1.8vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) { .rhb-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rhb-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rhb-kart { --card-pad: clamp(1.125rem, 2.2vw, 1.5rem); }
.rhb-kart .abt__ico { margin-bottom: .875rem; }
.rhb-kart__baslik { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.rhb-kart__metin p { margin: 0 0 .5rem; line-height: 1.65; color: var(--ink-soft); }
.rhb-kart__metin p:last-child { margin-bottom: 0; }

.rhb-adimlar {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 992px) { .rhb-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; } }
.rhb-adim { display: flex; gap: 1rem; align-items: flex-start; }
.rhb-adim__no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand, #fff);
    font-weight: 700;
    font-size: .9375rem;
}
.rhb-adim__baslik { margin: .25rem 0 .375rem; font-size: 1.0625rem; font-weight: 600; }
.rhb-adim p { margin: 0; line-height: 1.65; color: var(--ink-soft); }

/* 5 · Tablo, akış, sohbet --------------------------------------------------- */
.rhb-tablo-kap {
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.rhb-tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rhb-tablo th, .rhb-tablo td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--hairline);
    text-align: start;
    vertical-align: top;
    line-height: 1.55;
}
.rhb-tablo thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-mute);
    background: var(--surface-2, #f7f8fb);
}
.rhb-tablo tbody th { font-weight: 600; color: var(--ink); min-width: 10rem; }
.rhb-tablo td { color: var(--ink-soft); min-width: 12rem; }
.rhb-tablo tr:last-child th, .rhb-tablo tr:last-child td { border-bottom: 0; }

.rhb-akis {
    position: relative;
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0 0 0 0;
    padding-inline-start: 1.25rem;
    list-style: none;
    border-inline-start: 2px solid var(--brand-line);
}
.rhb-akis li { position: relative; display: grid; gap: .125rem; }
.rhb-akis li::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1.25rem - 6px);
    top: .45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-accent);
}
.rhb-akis__zaman { font-size: var(--fs-sm); font-weight: 700; color: var(--brand); }
.rhb-akis__metin { line-height: 1.65; color: var(--ink-soft); }

.rhb-sohbet { margin: 0 0 1.5rem; }
.rhb-sohbet__pencere {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-width: 34rem;
    padding: 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--r-lg) + 4px);
    background: var(--surface-2, #f7f8fb);
}
.rhb-balon {
    max-width: 85%;
    padding: .625rem .875rem;
    border-radius: 16px;
    line-height: 1.55;
    font-size: var(--fs-sm);
}
.rhb-balon--musteri {
    align-self: flex-end;
    background: var(--brand);
    color: var(--on-brand, #fff);
    border-end-end-radius: 4px;
}
.rhb-balon--asistan {
    align-self: flex-start;
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--hairline);
    border-end-start-radius: 4px;
}

/* 6 · Vurgu, ara çağrı, iki sütun ------------------------------------------ */
.rhb-vurgu {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: clamp(1.125rem, 2.4vw, 1.5rem);
    border-inline-start: 4px solid var(--brand-accent);
    border-radius: var(--r-lg);
    background: var(--brand-soft);
}
.rhb-vurgu > .ay-ico { flex: 0 0 auto; margin-top: .3em; font-size: 18px; color: var(--brand); }
.rhb-vurgu p { margin: 0 0 .5rem; line-height: 1.7; color: var(--ink); }
.rhb-vurgu p:last-child { margin-bottom: 0; }

.rhb-cagri {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--brand-line);
    border-radius: calc(var(--r-lg) + 4px);
    background: var(--surface);
    box-shadow: 0 18px 40px -30px rgba(1, 30, 90, .45);
}

.rhb-iki { display: grid; gap: clamp(.875rem, 2vw, 1.25rem); }
@media (min-width: 768px) { .rhb-iki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rhb-iki__kutu { --card-pad: clamp(1.125rem, 2.4vw, 1.5rem); }
.rhb-iki__kutu p { margin: 0 0 .5rem; line-height: 1.65; color: var(--ink-soft); }
.rhb-iki__kutu--sag { box-shadow: inset 0 0 0 2px var(--brand-line); }
.rhb-iki__kutu--sol .rhb-maddeler .ay-ico { color: var(--ink-mute); }

/* 7 · Dizin kartları, sayfalama, bağlantılı çipler ------------------------- */
.rhb-liste {
    display: grid;
    gap: clamp(.875rem, 1.8vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) { .rhb-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rhb-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rhb-liste__kart {
    --card-pad: clamp(1.125rem, 2.2vw, 1.5rem);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    transition: box-shadow var(--t-base, .2s) ease, transform var(--t-base, .2s) ease;
}
.rhb-liste__kart:hover,
.rhb-liste__kart:focus-within { transform: translateY(-2px); box-shadow: 0 16px 36px -26px rgba(1, 30, 90, .5); }
.rhb-liste__grup { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-mute); }
.rhb-liste__baslik { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.rhb-liste__baslik a { color: var(--ink); text-decoration: none; }
/* Kartın tamamı tıklanır (bağlantı tek, ekran okuyucuda tek duyuru) */
.rhb-liste__baslik a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rhb-liste__baslik a:focus-visible { outline: none; }
.rhb-liste__kart:focus-within { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.rhb-liste__ozet { margin: 0; line-height: 1.6; color: var(--ink-soft); font-size: var(--fs-sm); }
.rhb-liste__git { margin-top: auto; padding-top: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-accent); }
.rhb-liste__git .ay-ico { font-size: 11px; }

.rhb-sayfalama { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.rhb-sayfalama ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rhb-sayfalama a,
.rhb-sayfalama span[aria-current] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .875rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    background: var(--surface);
}
.rhb-sayfalama a:hover,
.rhb-sayfalama a:focus-visible { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.rhb-sayfalama span[aria-current] { border-color: var(--brand); background: var(--brand); color: var(--on-brand, #fff); }
.rhb-sayfalama__bos { padding: 0 .25rem; color: var(--ink-mute); }
.rhb-sayfalama .ay-ico { font-size: 12px; }
[dir="rtl"] .rhb-sayfalama .ay-ico,
[dir="rtl"] .rhb-liste__git .ay-ico,
[dir="rtl"] .rhb-cipler__tumu .ay-ico { transform: scaleX(-1); }

.rhb-cipler li.krm-cip--bag,
.rhb-cipler li.rhb-cipler__tumu { padding: 0; border-color: var(--brand-line); background: var(--brand-soft); }
.rhb-cipler li.krm-cip--bag a,
.rhb-cipler li.rhb-cipler__tumu a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: inherit;
    padding: .3rem .8rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.rhb-cipler li.krm-cip--bag a:hover,
.rhb-cipler li.krm-cip--bag a:focus-visible,
.rhb-cipler li.rhb-cipler__tumu a:hover { text-decoration: underline; }
.rhb-cipler__tumu .ay-ico { font-size: 11px; }