/*
 * SİTE V2 — Laravel'de kalan herkese açık sayfalar (blog) için Nuxt sitesiyle aynı dil (2026-10-12).
 *
 * DİKKAT — bu dosya BİLEREK düz CSS: canlı sunucuda Node yok ve public/build elle yükleniyor;
 * bu sayfalara Tailwind sınıfı eklenirse canlıda karşılığı olmaz. Renk ve ölçüler ristivo-web
 * (app/assets/css/main.css) ile aynı tutulur; orada değişirse burada da değişmeli.
 */

:root {
    --sv-zemin: #F5F7FB;
    --sv-zemin-2: #EEF1F6;
    --sv-yuzey: #FFFFFF;
    --sv-metin: #1D2845;
    --sv-metin-2: #3A4A78;
    --sv-soluk: #6B7591;
    --sv-cizgi: #E4E8F0;
    --sv-kirmizi: #BE2634;
    --sv-kirmizi-koyu: #A21F2C;
    --sv-f-baslik: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
    --sv-f-govde: "Rubik", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --sv-yay: cubic-bezier(0.23, 1, 0.32, 1);
    --sv-kenar: clamp(1rem, 0.4rem + 3vw, 2.5rem);
    --sv-golge: 0 2px 6px rgba(29, 40, 69, 0.05), 0 32px 64px -32px rgba(29, 40, 69, 0.32);
}

.sv2, .sv2 *, .sv2 *::before, .sv2 *::after { box-sizing: border-box; }
body.sv2 { margin: 0; background: var(--sv-zemin); color: var(--sv-metin); font-family: var(--sv-f-govde); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.sv2 h1, .sv2 h2, .sv2 h3 { font-family: var(--sv-f-baslik); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
.sv2 p { margin: 0; }
.sv2 a { color: inherit; text-decoration: none; }
.sv2 img { display: block; max-width: 100%; }
.sv2 :focus-visible { outline: 2px solid var(--sv-kirmizi); outline-offset: 3px; border-radius: 8px; }
.sv2-kap { width: 100%; max-width: calc(1200px + 2 * var(--sv-kenar)); margin-inline: auto; padding-inline: var(--sv-kenar); }

/* Düğmeler */
.sv2-d { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 1.25rem; border-radius: 12px; border: 1px solid transparent; font-weight: 500; font-size: 0.97rem; white-space: nowrap; transition: transform 160ms var(--sv-yay), background-color 240ms ease, border-color 240ms ease; }
.sv2-d:active { transform: scale(0.97); }
.sv2-d--birincil { background: var(--sv-kirmizi); color: #fff; }
.sv2-d--ikincil { background: var(--sv-yuzey); border-color: var(--sv-cizgi); color: var(--sv-metin); }
.sv2-d--kucuk { height: 40px; padding: 0 1rem; font-size: 0.92rem; border-radius: 10px; }
.sv2-bag { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sv-kirmizi); font-weight: 500; }

/* Üst çubuk */
.sv2-ust { position: sticky; top: 0; z-index: 50; background: rgba(245, 247, 251, 0.88); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--sv-cizgi); }
.sv2-ust__ic { display: flex; align-items: center; gap: 2rem; height: 68px; }
.sv2-logo img { height: 22px; width: auto; }
.sv2-nav { display: none; gap: 0.25rem; }
.sv2-nav a { padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.94rem; font-weight: 500; color: var(--sv-metin-2); transition: color 240ms ease, background-color 240ms ease; }
.sv2-ust__sag { margin-left: auto; display: flex; gap: 0.5rem; }
.sv2-ust__giris { display: none; }
@media (min-width: 560px) { .sv2-ust__giris { display: inline-flex; } }
/* Dar ekran menüsü */
.sv2-menu { position: static; }
.sv2-menu summary { list-style: none; cursor: pointer; position: relative; width: 44px; height: 40px; margin-right: -10px; }
.sv2-menu summary::-webkit-details-marker { display: none; }
.sv2-menu summary span { position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 2px; background: var(--sv-metin); transition: transform 240ms var(--sv-yay); }
.sv2-menu summary span:first-child { top: 16px; }
.sv2-menu summary span:last-child { top: 23px; }
.sv2-menu[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.sv2-menu[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.sv2-menu nav { position: absolute; left: 0; right: 0; top: 68px; background: var(--sv-zemin); border-bottom: 1px solid var(--sv-cizgi); padding: 0.5rem var(--sv-kenar) 1.5rem; display: grid; }
.sv2-menu nav a { font-family: var(--sv-f-baslik); font-weight: 650; font-size: 1.5rem; letter-spacing: -0.025em; padding-block: 0.8rem; border-bottom: 1px solid var(--sv-cizgi); }
@media (min-width: 1000px) { .sv2-nav { display: flex; } .sv2-menu { display: none; } }

/* Sayfa başı */
.sv2-bas { padding-block: clamp(2rem, 1rem + 3.5vw, 4rem) clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.sv2-bas h1 { font-size: clamp(2.6rem, 1.55rem + 4.4vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.sv2-bas p { margin-top: 1.5rem; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); color: var(--sv-metin-2); max-width: 34em; }
.sv2-iz { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--sv-soluk); font-size: 0.875rem; margin-bottom: 1.5rem; }

/* Blog listesi */
.sv2-bolum { padding-block: 0 clamp(4.5rem, 2.6rem + 6.5vw, 8.5rem); }
.sv2-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 640px) { .sv2-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sv2-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv2-yazi { display: grid; gap: 0.75rem; align-content: start; }
.sv2-yazi__gorsel { aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--sv-zemin-2); }
.sv2-yazi__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sv-yay); }
.sv2-yazi time { color: var(--sv-soluk); font-size: 0.82rem; margin-top: 0.25rem; }
.sv2-yazi h2 { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.sv2-yazi p { color: var(--sv-metin-2); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Yazı sayfası */
.sv2-makale { display: grid; gap: 2rem; justify-items: center; }
.sv2-makale__bas { width: 100%; max-width: 760px; }
.sv2-makale__bas h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; }
.sv2-makale__bas time { display: block; margin-top: 1rem; color: var(--sv-soluk); font-size: 0.9rem; }
.sv2-makale__gorsel { width: 100%; max-width: 1040px; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--sv-zemin-2); }
.sv2-makale__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sv2-govde { width: 100%; max-width: 760px; color: #2B3757; font-size: 1.06rem; line-height: 1.78; overflow-wrap: anywhere; }
.sv2-govde p { margin: 0 0 1.15rem; }
.sv2-govde h2, .sv2-govde h3, .sv2-govde h4 { font-family: var(--sv-f-baslik); color: var(--sv-metin); letter-spacing: -0.015em; line-height: 1.25; margin: 2.2rem 0 0.8rem; }
.sv2-govde h2 { font-size: 1.5rem; }
.sv2-govde h3 { font-size: 1.2rem; }
.sv2-govde strong, .sv2-govde b { color: var(--sv-metin); font-weight: 600; }
.sv2-govde ul, .sv2-govde ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.sv2-govde li { margin-bottom: 0.4rem; }
.sv2-govde a { color: var(--sv-kirmizi); text-decoration: underline; text-underline-offset: 3px; }
.sv2-govde img { height: auto; border-radius: 16px; margin: 1.5rem 0; }
.sv2-govde table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 1rem 0; }
.sv2-govde td, .sv2-govde th { border: 1px solid var(--sv-cizgi); padding: 0.5rem 0.7rem; text-align: left; }

.sv2-kapanis { width: 100%; max-width: 760px; display: grid; gap: 1rem; justify-items: start; background: var(--sv-yuzey); border: 1px solid var(--sv-cizgi); border-radius: 28px; padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); margin-top: 1rem; }
.sv2-kapanis h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.sv2-kapanis p { color: var(--sv-metin-2); }
.sv2-ilgili { border-top: 1px solid var(--sv-cizgi); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.sv2-ilgili > h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: 2rem; }

/* Alt çubuk */
.sv2-alt { border-top: 1px solid var(--sv-cizgi); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) calc(2rem + env(safe-area-inset-bottom, 0px)); }
.sv2-alt__ic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.sv2-alt__kunye { grid-column: 1 / -1; display: grid; gap: 0.9rem; justify-items: start; align-content: start; max-width: 26em; }
.sv2-alt__kunye img { height: 22px; width: auto; }
.sv2-alt__kunye p, .sv2-alt__kunye a { color: var(--sv-soluk); font-size: 0.875rem; }
.sv2-alt nav { display: grid; align-content: start; gap: 0.15rem; }
.sv2-alt h2 { font-family: var(--sv-f-govde); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-soluk); margin-bottom: 0.6rem; }
.sv2-alt nav a { padding-block: 0.3rem; color: var(--sv-metin-2); font-size: 0.93rem; }
.sv2-alt__son { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--sv-cizgi); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; color: var(--sv-soluk); font-size: 0.84rem; }
@media (min-width: 760px) { .sv2-alt__ic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sv2-alt__ic { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } .sv2-alt__kunye { grid-column: auto; } }

@media (hover: hover) and (pointer: fine) {
    .sv2-d--birincil:hover { background: var(--sv-kirmizi-koyu); }
    .sv2-d--ikincil:hover { border-color: #C9D0DD; }
    .sv2-nav a:hover { color: var(--sv-metin); background: var(--sv-zemin-2); }
    .sv2-alt nav a:hover { color: var(--sv-metin); }
    .sv2-yazi:hover .sv2-yazi__gorsel img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .sv2 *, .sv2 *::before, .sv2 *::after { transition-duration: 0.01ms !important; } }