/* Ana sayfa. Yalnızca Views/Home/Index.cshtml yükler (@section Head).
   Renk ve yazı ölçüleri sections.css'teki .ps-block değişkenlerinden gelir. */

/* ---- Ortak yazı ---- */

.ps-block h2.home-h2,
.home-strip h2.home-strip__title {
    font-family: var(--primary-font);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--ps-ink);
    margin: 0 0 .6rem;
    padding: 0;
}

@media (min-width: 992px) {
    .ps-block h2.home-h2 { font-size: 2rem; }
}

.ps-block .home-text {
    font-size: var(--ps-text-md);
    line-height: 1.65;
    color: var(--ps-muted);
    margin: 0;
    max-width: 68ch;
}

.home-head { margin-bottom: 1.75rem; }

.home-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* main.css'teki "a:link:not(.btn)" kuralı marka turuncusunu (beyazda 3.15:1) ve
   400 kalınlığı dayatıyor; daha koyu tona burada çekilir. */
.ps-block a.home-link:link,
.ps-block a.home-link:visited,
.ps-block .home-links a:link,
.ps-block .home-links a:visited {
    font-size: inherit;
    font-weight: 500;
    color: var(--ps-accent-text);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.ps-block a.home-link:hover,
.ps-block .home-links a:hover { color: var(--ps-ink); }

.ps-block a.home-link:focus-visible,
.ps-block .home-links a:focus-visible {
    outline: 2px solid var(--ps-accent-text);
    outline-offset: 2px;
}

/* Bölümler arası ince çizgi; zemin yalnızca referans şeridinde ve son formda gri. */
.home-split,
.home-defs-section,
.home-table-section,
.home-steps-section { border-top: 1px solid var(--ps-line); }

/* ---- Hero ---- */

.home-hero {
    /* Üst boşluk sabit menünün yüksekliğini içerir. */
    padding-top: clamp(7rem, 5.5rem + 5vw, 9.5rem);
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* Koyu zemin üzerinde bağlantı çizgileri (home-hero-bg.svg). Görsel yüklenmese
   de zemin rengi aynı kalır, yazı okunur. sections.css zemini important ile
   verdiği için burada da important gerekir. */
section.ps-block.home-hero {
    background-color: #14171d !important;
    /* Soldaki geçiş, çizgilerin başlık ve açıklamanın arkasından geçmesini bastırır. */
    background-image:
        linear-gradient(90deg, rgba(20, 23, 29, .94) 0%, rgba(20, 23, 29, .78) 38%, rgba(20, 23, 29, 0) 68%),
        url("/assets/images/home-hero-bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-hero__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(1.1rem, .5rem + 2vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 1.2rem + 3vw, 4rem);
    align-items: start;
}

@media (min-width: 992px) {
    .home-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
}

.home-hero h1.home-hero__title {
    font-family: var(--primary-font);
    font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
    text-wrap: balance;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 1.125rem;
    padding: 0;
    max-width: 16ch;
}

#slider .home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.125rem;
    padding: .375rem .75rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: var(--ps-text-xs);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, .86);
}

.home-hero__eyebrow::before {
    content: "";
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: #f7a15b;
    flex: none;
}

/* default.css'teki "#slider p" kuralını aynı özgüllükle geri alır. */
#slider .home-hero__lede {
    font-size: var(--ps-text-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-width: 44ch;
}

.home-hero .home-card {
    border-color: transparent;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .65);
}

@media (max-width: 575px) {
    .home-hero { padding-top: 6.25rem; }
}

/* ---- Form kartı (hero ve sayfa sonu) ---- */

.home-card {
    background: #fff;
    border: 1px solid #d5d9e0;
    border-radius: 6px;
    padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    /* Çağrıya tıklanınca kart sabit menünün altında kalmasın. */
    scroll-margin-top: 104px;
}

.home-card h2.home-card__title {
    font-family: var(--primary-font);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--ps-ink);
    margin: 0 0 .35rem;
    padding: 0;
}

.home-card .home-card__sub,
#slider .home-card__sub {
    font-size: var(--ps-text-sm);
    line-height: 1.55;
    color: var(--ps-muted);
    margin: 0 0 1.25rem;
}

/* Zemin ve çerçeve karttan gelir; .oa-form'un kendi kart görünümü kapatılır. */
.home-form.oa-form {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    margin: 0;
}

@media (min-width: 576px) {
    .home-form .oa-grid { grid-template-columns: 1fr 1fr; }
}

.home-form .oa-field { margin-bottom: .9rem; }

/* 16px altı yazı iOS'ta alana odaklanınca sayfayı yakınlaştırır.
   Kenarlık beyazda 3:1'i geçer (WCAG 1.4.11). */
.home-form .form-control {
    font-size: 1rem;
    border: 1px solid #8b93a1;
    border-radius: 4px;
    padding: .6rem .8rem;
    color: var(--ps-ink);
    background: #fff;
}

.home-form .form-control::placeholder { color: #6b7280; opacity: 1; }

/* Hatalı alanda renk tek işaret olmasın diye kenarlık da kalınlaşır. */
.home-form .form-control[aria-invalid="true"] {
    border-color: #c0271a;
    border-width: 2px;
    background: #fff8f7;
}

.home-form input[type="checkbox"][aria-invalid="true"] {
    outline: 2px solid #c0271a;
    outline-offset: 2px;
}

.home-form .form-control:focus {
    border-color: var(--ps-accent-text);
    outline: 2px solid var(--ps-accent-text);
    outline-offset: 1px;
    box-shadow: none;
}

/* Beyaz yazı marka turuncusunda 3.15:1 verir; bu oran yalnızca büyük kalın
   metinde (≥18.66px, 700) yeterlidir, bu yüzden etiket 19px. */
.home-form .oa-submit,
.home-strip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 1.75rem;
    font-size: 1.1875rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
}

/* Temadaki .btn kuralı düğmeyi 300px ile sınırlar. */
.home-form .oa-submit { margin-top: .25rem; width: 100%; max-width: none; }

/* Onay metinleri alan etiketlerinden geri planda dursun. */
.home-form .lf-consent { gap: .5rem; }
.home-form .lf-check label {
    font-size: .8125rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--ps-muted);
}

.home-form .lf-consent a:link,
.home-form .lf-consent a:visited {
    font-size: inherit;
    line-height: inherit;
    color: var(--ps-accent-text);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.home-form .oa-status { margin-top: .9rem; }
.home-form .oa-status:focus { outline: 2px solid #11633a; outline-offset: 2px; }

/* ---- Referans logoları ---- */

.home-trust {
    padding-top: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
}

.home-trust__head { margin-bottom: 1.5rem; }

.home-trust__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.home-trust__logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ps-line);
    padding: .5rem;
}

.home-trust__logos img {
    display: block;
    width: 100%;
    height: clamp(52px, 40px + 3vw, 76px);
    object-fit: contain;
}

/* Telefonda altı logo yeter. */
@media (max-width: 575px) {
    .home-trust__logos li:nth-child(n+7) { display: none; }
}

@media (min-width: 576px) {
    .home-trust__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .home-trust__logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---- Sorun bölümü: solda başlık, sağda maddeler ---- */

.home-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

@media (min-width: 992px) {
    .home-split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; }
}

.home-rows,
.home-defs,
.home-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-rows li,
.home-defs li {
    padding: 1.1rem 0;
    border-top: 1px solid var(--ps-line);
}

.home-rows li:first-child { padding-top: 0; border-top: 0; }
.home-defs li:last-child { border-bottom: 1px solid var(--ps-line); }

.ps-block .home-rows h3,
.ps-block .home-defs h3,
.ps-block .home-steps h3,
.ps-block h3.home-links__title {
    font-family: var(--primary-font);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--ps-ink);
    margin: 0 0 .35rem;
    padding: 0;
}

.ps-block .home-rows p,
.ps-block .home-defs p,
.ps-block .home-steps p {
    font-size: var(--ps-text-md);
    line-height: 1.65;
    color: var(--ps-muted);
    margin: 0;
}

/* ---- Yaptığımız işler: solda ad, sağda açıklama ---- */

@media (min-width: 768px) {
    .home-defs li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 2rem;
    }
    .ps-block .home-defs h3 { margin: 0; }
}

/* ---- Çağrı satırları (önceki bölümün devamı) ---- */

.home-strip { padding-top: 0; }

.home-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}

.home-strip__copy { flex: 1 1 26rem; min-width: 0; }

.home-strip h2.home-strip__title { font-size: 1.25rem; margin-bottom: .3rem; }

.home-strip__btn { flex: 0 0 auto; }

@media (max-width: 575px) {
    .home-strip__btn { width: 100%; }
}

.home-links { margin-top: 2.25rem; }

.home-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 2rem;
}

@media (min-width: 576px) { .home-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .home-links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ps-block .home-links a:link,
.ps-block .home-links a:visited {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--ps-text-md);
    font-weight: 400;
}

/* ---- Önce / sonra tablosu ---- */

.home-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ps-text-md);
    line-height: 1.6;
}

.home-table th,
.home-table td {
    padding: 1rem 1.25rem 1rem 0;
    border-bottom: 1px solid var(--ps-line);
    text-align: left;
    vertical-align: top;
}

.home-table thead th {
    padding-top: 0;
    font-size: var(--ps-text-sm);
    font-weight: 600;
    color: var(--ps-muted);
    border-bottom-color: var(--ps-ink);
}

.home-table tbody th {
    width: 18%;
    font-weight: 600;
    color: var(--ps-ink);
}

.home-table td { width: 41%; color: var(--ps-muted); }
.home-table td:last-child { color: var(--ps-ink); padding-right: 0; }

/* Dar ekranda her satır bir blok; sütun adı hücrenin üstüne yazılır. */
@media (max-width: 767px) {
    .home-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .home-table,
    .home-table tbody,
    .home-table tr,
    .home-table th,
    .home-table td { display: block; width: auto; }
    .home-table tr { padding: 1rem 0; border-top: 1px solid var(--ps-line); }
    .home-table th,
    .home-table td { padding: 0 0 .6rem; border: 0; }
    .home-table td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--ps-text-sm);
        font-weight: 600;
        color: var(--ps-ink);
    }
}

/* ---- Çalışma biçimi ---- */

.home-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem 3rem;
}

@media (min-width: 768px) {
    .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-steps li { padding-top: 1rem; border-top: 1px solid var(--ps-ink); }

/* ---- Son form bölümü ---- */

#teklif-formu { scroll-margin-top: 80px; }

.home-final__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 1.2rem + 3vw, 4rem);
    align-items: start;
}

@media (min-width: 992px) {
    .home-final__inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

/* ---- Mobil sabit buton ve gönderim sonrası durum ---- */

/* Form ekrandayken sabit buton formun üstüne biner; home.js bu sınıfı yönetir.
   default.css mobilde display'i !important ile açtığı için burada da gerekli. */
.teklifAl.is-hidden,
[data-lead-done] .teklifAl {
    display: none !important;
}

[data-lead-done] .home-strip__btn { display: none; }

/* ---- Tasarım denetimi düzeltmeleri ---- */

/* Dar ekranda satır başlığı %18 genişlikte kalıp iki satıra kırılıyordu. */
@media (max-width: 767px) {
    .home-table tbody th { width: auto; font-size: var(--ps-text-lg); }
}

/* Hizmet bağlantıları: altı çizili metin yerine oklu satırlar. */
.ps-block .home-links a:link,
.ps-block .home-links a:visited {
    justify-content: space-between;
    gap: .75rem;
    min-height: 48px;
    font-weight: 500;
    color: var(--ps-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ps-line);
}

.ps-block .home-links a::after {
    content: "\2192";
    color: var(--ps-accent-text);
    transition: transform .2s ease;
}

.ps-block .home-links a:hover { color: var(--ps-accent-text); }
.ps-block .home-links a:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .ps-block .home-links a::after { transition: none; }
}

/* SSS, blog ve alt metin bölümleri eski temadan geliyor; başlık ölçüsü ve
   hizası sayfanın geri kalanıyla eşitlenir. Yalnızca ana sayfada yüklenir. */
.faq .section-title h2,
#blog .intro h2,
#seo-text .intro h2.title {
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem) !important;
    font-weight: 600;
    line-height: 1.25;
    color: #1d2026;
    text-align: left;
}

.faq { padding: 5rem 0 3.5rem; }
.faq .section-title { margin-bottom: 2rem; text-align: left; }
.faq .row.justify-content-center { justify-content: flex-start !important; }
.faq .accordion .card { margin-bottom: 1rem; }

.faq .accordion .card .card-header :is(h3, h4, h5) button {
    color: #1d2026;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    border: 1px solid #e3e6ec;
    /* default.css sabit 80px veriyor; iki-üç satıra sığan sorular kartın dışına
       taşıyordu. Yükseklik içeriğe göre açılır, tek satırlık soru yine ortalı durur. */
    height: auto;
    min-height: 72px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    line-height: 1.4;
}

@media (max-width: 575px) {
    .faq .accordion .card .card-header :is(h3, h4, h5) button {
        padding-left: 60px;
        padding-right: 16px;
    }
    .faq .accordion .card .card-header :is(h3, h4, h5) button::after { left: 18px; }
}

.faq .accordion .card .card-header :is(h3, h4, h5) button.collapsed {
    border: 1px solid #e3e6ec;
    border-radius: 8px;
}

.faq .accordion .card .card-header :is(h3, h4, h5) button::after {
    background-color: #fdf0e8;
    color: #b44e17;
}

.faq .accordion .card .card-header :is(h3, h4, h5) button[aria-expanded="true"]::after {
    background-color: #EC6A2B;
    color: #fff;
}

#blog.carousel { padding: 5rem 0 !important; }
#blog .intro > div,
#seo-text .intro > div { text-align: left !important; }
#blog .intro p { color: #5f6672; }

/* Blog kartları: 2px turuncu çerçeve ve 20px köşe yerine referans kartlarıyla
   aynı ince çerçeve. */
#blog .blog-card {
    border: 1px solid #e3e6ec;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#blog .blog-card:hover {
    border-color: #cfd4dc;
    box-shadow: 0 8px 24px rgba(20, 23, 29, .08);
}

#blog .blog-card .card-title { color: #1d2026 !important; font-weight: 600 !important; line-height: 1.35; }
#blog .blog-card .card-text { margin-top: .5rem; color: #5f6672 !important; font-size: .9375rem; }
#blog .blog-card .read-more-link { color: #b44e17; font-weight: 500; }
#blog .blog-card .icon-clock + *, #blog .blog-card .d-lg-flex > a { color: #5f6672 !important; font-size: .875rem; }
#blog .mt-5 { text-align: left; }
#blog .mt-5 .btn.primary-button { margin-left: 0 !important; border-radius: 8px; box-shadow: none; }

/* Sorun bölümü: sağdaki liste uzunken sol başlık kaydırmada yerinde kalır. */
@media (min-width: 992px) {
    .home-split__inner > :first-child { position: sticky; top: 7rem; align-self: start; }
}

/* ---- İkonlar (ikon seti: Views/Shared/_HomeIcons.cshtml) ---- */

.home-ico {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.home-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ps-accent-soft);
    border: 1px solid var(--ps-accent-line);
    color: var(--ps-accent-text);
}

/* Sorun satırları: solda ikon, sağda başlık ve metin. */
.home-rows--ico li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 1rem;
}
.home-rows--ico .home-chip { grid-row: span 2; }
.home-rows--ico h3,
.home-rows--ico p { grid-column: 2; }
.ps-block .home-rows--ico h3 { margin-top: .55rem; }

/* Yaptığımız işler: çizgili liste yerine ikonlu kart ızgarası. İlk kart
   (analiz) başlangıç noktası olduğu için tam genişlik. */
.home-defs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.home-defs li,
.home-defs li:last-child {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--ps-line);
    border-radius: 14px;
    background: var(--ps-surface);
}
.ps-block .home-defs h3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin: 0 0 .5rem;
}
@media (min-width: 768px) {
    .home-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .home-defs li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .home-defs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-defs li:first-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 2rem;
        align-items: start;
        background: var(--ps-tint);
    }
    .ps-block .home-defs li:first-child h3 { margin: 0; }
}

/* Önce / sonra: satır başında konu ikonu, hücrelerde durum işareti. */
.home-table tbody th .home-chip {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-bottom: .6rem;
}
.home-table tbody th .home-chip .home-ico { width: 18px; height: 18px; }

.home-cell > span { display: block; }
@media (min-width: 768px) {
    .home-table td.home-cell { position: relative; padding-left: 1.85rem; }
    .home-mark { position: absolute; left: 0; top: 1.1rem; }
}
.home-mark {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.home-cell--before .home-mark { color: #6b7280; }
.home-cell--after .home-mark { color: #1f8a4c; }

@media (max-width: 767px) {
    .home-table tbody th { display: flex; align-items: center; gap: .75rem; }
    .home-table tbody th .home-chip { margin-bottom: 0; }
    .home-table td.home-cell { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: .6rem; }
    .home-cell::before { grid-column: 1 / -1; margin-bottom: .25rem; }
    .home-mark { margin-top: .2rem; }
}

/* Çalışma biçimi: numaralı, ikonlu kartlar. */
.home-steps li {
    padding: 1.5rem;
    border: 1px solid var(--ps-line);
    border-top: 3px solid var(--ps-accent);
    border-radius: 14px;
    background: var(--ps-surface);
}
.home-step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.home-step__no {
    font-family: var(--primary-font);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #9aa3b2;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 1100px) {
    .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}