:root {
    /* ANTRASİT: koyu yüzeyler */
    --antrasit: #26292d;
    /* ana koyu zemin */
    --antrasit-koyu: #191b1e;
    /* alt bilgi, daha derin alanlar */
    --antrasit-acik: #3a3f45;
    /* degrade eşi, ikincil koyu */
    /* BORDO: eylem rengi */
    --bordo: #782840;
    /* ana ton logo gövdesi */
    --bordo-koyu: #5a1c30;
    /* üzerine gelince */
    --bordo-acik: #98354f;
    /* koyu zemin üzerinde bordo gerekirse */
    --bordo-derin: #400018;
    /* en koyu - logo iç gövdesi*/
    /* ALTIN: vurgu */
    --altin: #d8a840;
    /* çizgiler, ikon zeminleri, etiketleri */
    --altin-acik: #edcb73;
    /* koyu zeminde metin */
    --altin-koyu: #8a6414;
    /* açık zeminde metin - konstrat için */
    /* NÖTRLER */
    --kirik-beyaz: #f6f4ef;
    /* sayfa zemini */
    --beyaz: #ffffff;
    /* kart yüzeyi */
    --metin: #20242a;
    /* ana metin */
    --metin-acik: #5f6772;
    /* açıklama metni */
    --kenarlik: #e3dfd7;
    /* kart kenarları*/
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.7rem;
    line-height: 1.65;
    color: var(--metin);
    background: var(--kirik-beyaz);
    padding-top: 12rem;
    -webkit-font-smoothing: antialiased;
}

/* Tüm bölümleri aynı hizada tutan samalayıcı */
.container {
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
}

/* ÜST MENÜ - Masaüstü */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: var(--beyaz);
    border-bottom: 0.1rem solid var(--kenarlik);
}

.navbar-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4rem;
    width: min(120rem, 100% - 4.8rem);
    min-height: 12rem;
    margin-inline: auto;
}

/* LOGO */
.brand {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.brand-emblem {
    height: 7.2rem;
    width: auto;
}

.brand-text {
    height: 4.2rem;
    width: auto;
}

/* MENÜ BAĞLANTILARI */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

.nav-links a {
    position: relative;
    padding-block: 0.6rem;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--antrasit);
    transition: color 0.2s ease;
    text-decoration: none;
}

/* Altı çizgi: kapalıyken genişliği sıfır, açılırken soldan büyür. */
.nav-links a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 0.2rem;
    background: var(--altin);
    border-radius: 99.9rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.nav-links a:hover {
    color: var(--bordo);
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

/* Menü içindeki giriş bağlantısı yalnızca mobilde görünür. */
.mobile-login {
    display: none;
    text-decoration: none;
}

/* MÜŞTERİ GİRİŞİ BUTONU */
/* Logodaki bordo dolgu + altın kontur ikilisini yankılıyor. */
.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    padding-inline: 2.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--beyaz);
    background: var(--bordo);
    border: 0.2rem solid var(--altin);
    border-radius: 1rem;
    transition: background 0.2s ease;
    text-decoration: none;
}

.login-button:hover {
    background: var(--bordo-koyu);
}

/* HAMBURGER MENÜ: Masaüstünde gizli */
.menu-toggle {
    display: none;
}

/* HERO -Ana Tanıtım Alanı */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: 8rem;
    color: var(--beyaz);
    background: var(--antrasit);
}

/* Logodaki amblemin köşe kavisini yankılayan arka plan formu.
   Bilgi taşımadığı için ekran okuyucudan gizli*/
.hero::after {
     content: "";
     position: absolute;
     right: -14rem;
     bottom: -20rem;
     z-index: 1;
     width: 58rem;
     height: 58rem;
     border: 9rem solid rgba(216, 168, 64, 0.07);
     border-radius: 50%;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 74rem;
}

/* ÜST ETİKET */
.eyebrow {
    display: inline-block;
    margin-bottom: 2.4rem;
    padding: 0.8rem 1.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--altin-acik);
    border: 0.1rem solid rgba(216, 168, 64, 0.4);
    border-radius: 99.9rem;
}

/* BAŞLIK */
.hero h1 {
    margin-bottom: 2.4rem;
    color: var(--beyaz);
}

.hero h1 span {
    color: var(--altin);
}

.hero-description {
    max-width: 58rem;
    margin-bottom: 4rem;
    font-size: 1.9rem;
    color: rgba(255, 255, 255, 0.76);
}

/* BUTONLAR */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 5.6rem;
    padding-inline: 3rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    border-radius: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Ana Eylem: Logodaki bordo dolgu + altın kontur */
.button-primary {
    color: var(--beyaz);
    background: var(--bordo);
    border: 0.2rem solid var(--altin);
}

.button-primary:hover {
    background: var(--bordo-acik);
}

/* İkincil Eylem: Yalnızca kontur dolgu yok */
.button-secondary {
    color: var(--beyaz);
    border: 0.2rem solid rgba(255, 255, 255, 0.35);
}

.button-secondary:hover {
    border-color: var(--altin);
    color: var(--altin-acik);
}

/* ALT SINIR ÇİZGİ */
.burgundy-line {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 0.5rem;
    background: linear-gradient(90deg, var(--bordo) 0%, var(--altin) 50%, var(--bordo) 100%);
}

/* ÜRÜN KARTLARI */
.products {
    padding-block: 9.6rem;
    background: var(--kirik-beyaz);
}

/* BÖLÜM BAŞLIĞI - Tüm bölümlerde ortak */
.section-heading {
    max-width: 68rem;
    margin-bottom: 5.6rem;
}

.section-label {
    display: block;
    margin-bottom: 1.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--altin-koyu);
}

.section-heading h2 {
    margin-bottom: 1.6rem;
}

.section-heading p {
    font-size: 1.8rem;
    color: var(--metin-acik);
}

/* IZGARA */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 2rem;
}

/* KART */
.product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 3.2rem 2.8rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 1.8rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
    border-color: var(--altin);
    box-shadow: 0 1.4rem 3.4rem rgba(26, 28, 32, 0.10);
}

/* BRANŞ ROZETİ: Logodaki bordo + altın kontur*/
.product-icon {
    display: grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 2.4rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--beyaz);
    background: var(--bordo);
    border: 0.2rem solid var(--altin);
    border-radius: 1.4rem;
}

.product-card h3 {
    margin-bottom: 1rem;
}

.product-card p {
    flex: 1;
    margin-bottom: 2.2rem;
    font-size: 1.6rem;
    color: var(--metin-acik);
}

/* BAĞLANTI */
.product-link {
    align-self: flex-start;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--bordo);
    transition: gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

/* Ok CSS'ten geliyor: yazı akışının parçası değil süs */
.product-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.product-card:hover .product-link::after {
    transform: translateX(0.4rem);
}

/* NEDEN BİZ - Koyu Bölüm */
.why-us {
    padding-block: 9.6rem;
    color: var(--beyaz);
    background: var(--antrasit);
    border-top: 0.4rem solid var(--altin);
}

.why-us-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    align-items: center;
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
}

/* Sol Taraf */
.why-us .section-label {
    display: block;
    margin-bottom: 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--altin-acik);
}

.why-us-text h2 {
    margin-bottom: 2.2rem;
    color: var(--beyaz);
}

.why-us-text p {
    margin-bottom: 3rem;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.74);
}

.why-us-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--altin);
    text-decoration: none;
    padding-bottom: 0.4rem;
    border-bottom: 0.2rem solid transparent;
    transition: border-color 0.2s ease;
}

.why-us-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.why-us-link:hover {
    border-bottom-color: var(--altin);
}

.why-us-link:hover::after {
    transform: translateX(0.4rem);
}

/* Sağ Taraf: Özellik Listesi */
.why-us-features {
    border-top: 0.1rem solid rgba(255, 255, 255, 0.16);
}

.feature-item {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: 2.4rem;
    align-items: start;
    padding-block: 3rem;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.16);
}

/* Altın İşaret */
.feature-number {
    display: block;
    width: 3.2rem;
    height: 0.3rem;
    margin-top: 1.4rem;
    background: var(--altin);
    border-radius: 99.9rem;
}

.feature-item h3 {
    margin-bottom: 0.8rem;
    color: var(--beyaz);
}

.feature-item p {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.66);
}

/* NASIL ÇALIŞIR - Süreç Adımları */
.how-it-works {
    padding-block: 9.6rem;
    background: var(--beyaz);
}

.how-it-works-content {
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
}

.how-it-works-heading {
    max-width: 68rem;
    margin-bottom: 5.6rem;
}

.how-it-works .section-label {
    color: var(--altin-koyu);
}

.how-it-works-heading h2 {
    margin-bottom: 1.6rem;
}

.how-it-works-heading p {
    font-size: 1.8rem;
    color: var(--metin-acik);
}

/* ADIM IZGARASI */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 2rem;
}

.process-card {
    position: relative;
    height: 100%;
    padding: 3.2rem 2.8rem;
    background: var(--kirik-beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 1.8rem;
}

/* Adım Numarası: Sıra bildirdiği için burada anlamlı.
        Logodaki kontur ilişkisi - altın çerçeve bordo rakam. */
.process-number {
    display: grid;
    place-items: center;
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 2.4rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bordo);
    background: var(--beyaz);
    border: 0.2rem solid var(--altin);
    border-radius: 50%;
}

.process-card h3 {
    margin-bottom: 1rem;
}

.process-card p {
    font-size: 1.6rem;
    color: var(--metin-acik);
}

/* Kartlar arasındaki bağlantı çizgisi : Akışı görsel olarak kuruyor */
.process-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 5.6rem;
    right: -2rem;
    width: 2rem;
    height: 0.2rem;
    background: var(--altin);
}

/* ALT EYLEM */
.process-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.4rem;
    margin-top: 4.8rem;
}

.process-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5.6rem;
    padding-inline: 3rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--beyaz);
    background: var(--bordo);
    border: 0.2rem solid var(--altin);
    border-radius: 1rem;
    transition: background 0.2s ease;
    text-decoration: none;
}

.process-button:hover {
    background: var(--bordo-koyu);
}

.process-action span {
    font-size: 1.6rem;
    color: var(--metin-acik);
}

/* TEKLİF ÇAĞRISI - BORDO BÖLÜM */
.quote-cta {
    position: relative;
    overflow: hidden;
    padding-block: 8.8rem;
    color: var(--beyaz);
    background: var(--bordo);
    border-block: 0.4rem solid var(--altin);
}

/* Hero'daki halkanın kardeşi - sayfayı çerçeveliyor */
.quote-cta::after {
    content: "";
    position: absolute;
    right: -10rem;
    bottom: -18rem;
    z-index: 1;
    width: 44rem;
    height: 44rem;
    border: 7rem solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.quote-cta-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7rem;
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
}

.quote-cta .section-label {
    color: var(--altin-acik);
}

.quote-cta h2 {
    max-width: 68rem;
    margin-bottom: 1.8rem;
    color: var(--beyaz);
}

.quote-cta p {
    max-width: 62rem;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* BUTONLAR */
.quote-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 24rem;
}

.quote-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5.6rem;
    padding-inline: 2.8rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 1rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Zemin bordo olduğu için ana buton altın dolgulu */
.quote-cta-button.primary {
    color: var(--bordo-derin);
    background: var(--altin);
    border: 0.2rem solid var(--altin);
    text-decoration: none;
}

.quote-cta-button.primary:hover {
    background: var(--altin-acik);
    border-color: var(--altin-acik);
}

.quote-cta-button.secondary {
    color: var(--beyaz);
    border: 0.2rem solid rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

.quote-cta-button.secondary:hover {
    border-color: var(--beyaz);
    background: rgba(255, 255, 255, 0.08);
}

/* İLETİŞİM */
.contact-section {
    padding-block: 9.6rem;
    background: var(--kirik-beyaz);
}

.contact-content {
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
}

.contact-heading {
    max-width: 68rem;
    margin-bottom: 5.6rem;
}

.contact-section .section-label {
    color: var(--altin-koyu);
}

.contact-heading h2 {
    margin-bottom: 1.6rem;
}

.contact-heading p {
    font-size: 1.8rem;
    color: var(--metin-acik);
}

/* IZGARA */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 2rem;
}

/* KART */
.contact-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 3.2rem 2.8rem;
    color: var(--metin);
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 1.8rem;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
    border-color: var(--altin);
    box-shadow: 0 1.4rem 3.4rem rgba(26, 28, 32, 0.10);
}

/* KART İÇERİĞİ */
.contact-card small {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--altin-koyu);
}

.contact-card strong {
    display: block;
    margin-bottom: 1rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--antrasit);
}

.contact-card p {
    flex: 1;
    font-size: 1.5rem;
    color: var(--metin-acik);
}

/* KANAL İKONU */
.contact-card-number {
    display: grid;
    place-items: center;
    width: 5.2rem;
    height: 5.2rem;
    margin-bottom: 2.4rem;
    color: var(--bordo);
    background: var(--kirik-beyaz);
    border: 0.2rem solid var(--altin);
    border-radius: 1.4rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.contact-card-number svg {
    width: 2.4rem;
    height: 2.4rem;
}

/* Karta gelince kutu bordo doluyor, ikon beyaza dönüyor */
.contact-card:hover .contact-card-number {
    background: var(--bordo);
    color: var(--beyaz);
}

/* ALT BİLGİ */
.site-footer {
    padding-block: 6.4rem 2.8rem;
    color: var(--beyaz);
    background: var(--antrasit-koyu);
    border-top: 0.4rem solid var(--altin);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: 6.4rem;
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
    margin-bottom: 4.8rem;
}

/* MARKA SÜTUNU */
.footer-brand-name {
    display: block;
    margin-bottom: 1.6rem;
    font-family: 'Archivo', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--altin);
}

.footer-brand p {
    max-width: 42rem;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.62);
}

/* BAĞLANTI SÜTUNLARI */
.footer-column {
    padding: 2.8rem 2.4rem;
    background: rgba(255, 255, 255, 0.035);
    border: 0.1rem solid rgba(216, 168, 64, 0.28);
    border-radius: 1.4rem;
}

.footer-column h3 {
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 1.4rem;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--beyaz);
}

.footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.2rem;
    height: 0.2rem;
    background: var(--altin);
    border-radius: 99.9rem;
}

.footer-links {
    display: grid;
    gap: 1.2rem;
    align-content: start;
}

.footer-links a {
    width: fit-content;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.68);
    border-bottom: 0.1rem solid transparent;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-links a:hover {
    color: var(--altin);
    border-bottom-color: var(--altin);
}

.footer-links address {
    font-style: normal;
    font-size: 1.6rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}

/* ALT ŞERİT */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    width: min(120rem, 100% - 4.8rem);
    margin-inline: auto;
    padding-top: 2.8rem;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.46);
    border-top: 0.1rem solid rgba(255, 255, 255, 0.12);
}

/* TEKLİF SAYFASI */

.teklif{
    padding-block: 6.4rem 9.6rem;
    background:var(--kirik-beyaz);
}

.teklif-baslik{
    max-width: 60rem;
    margin-bottom: 4rem;
}

.teklif .section-label{
    color: var(--altin-koyu);
}

.teklif-baslik h1{
    font-size: clamp(3rem, 4vw, 4.4rem);
}

/* Branş Seçme Butonları */

.brans-secim{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.2rem;
    margin-bottom: 4rem;
}

.brans-buton{
    display:flex;
    align-items:center;
    gap:1.4rem;
    padding: 1.6rem 1.8rem;
    background:var(--beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius:1.4rem;
    transition:border-color 0.2s ease, background 0.2s ease;
}

.brans-buton:hover{
    border-color:var(--altin);
}

/* Seçili Branş: logodaki bordo dolgu ilişkisi */

.brans-buton.aktif{
    background:var(--bordo);
    border-color:var(--altin);
}

.brans-kod{
    display:grid;
    place-items:center;
    flex:none;
    width:4rem;
    height:4rem;
    font-family:'Archivo', sans-serif;
    font-size:1.3rem;
    font-weight:800;
    color:var(--beyaz);
    background:var(--bordo);
    border:0.2rem solid var(--altin);
    border-radius:1rem;
}

/* Seçiliyken rozet ters dönüyor */

.brans-buton.aktif .brans-kod{
    color:var(--bordo);
    background:var(--altin);
}

.brans-ad{
    font-family:'Archivo', sans-serif;
    font-size:1.5rem;
    font-weight:700;
    line-height:1.25;
    color:var(--antrasit);
}

.brans-buton.aktif .brans-ad{
    color:var(--beyaz);
}

/* Boş Durum */

.teklif-bos{
    padding: 4.8rem 2.4rem;
    text-align:center;
    color:var(--metin-acik);
    background:var(--beyaz);
    border:0.1rem dashed var(--kenarlik);
    border-radius:1.8rem;
}

/* İki Sütunlu Gövde */
.teklif-govde{
    display:grid;
    grid-template-columns: 34rem 1fr;
    gap:2.4rem;
    align-items:start;
}

/* Sol: Tanıtım */

.teklif-tanitim{
    padding: 3.2rem 2.8rem;
    color:var(--beyaz);
    background:var(--antrasit);
    border-radius: 1.8rem;
    border-top: 0.4rem solid var(--altin);
}

.tanitim-gorsel {
    height: 18rem;
    margin-bottom: 2.4rem;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 1.4rem;
}

/* Resmin üstüne koyu perde: harfin okunması için */

.teklif-tanitim h2{
    margin-bottom:1.2rem;
    font-size:2.4rem;
    color:var(--beyaz);
}

.teklif-tanitim p{
    font-size:1.6rem;
    color:rgba(255, 255, 255, 0.72);
}

/* Sağ Form */

.teklif-form{
    padding: 3.2rem 2.8rem;
    background:var(--beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius:1.8rem;
    min-height:32rem;
}

.teklif-form textarea {
    width: 100%;
    padding: 1.3rem 1.4rem;
    resize: vertical;
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--metin);
    background: var(--beyaz);
    border: 0.15rem solid var(--kenarlik);
    border-radius: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.teklif-form textarea:focus {
    outline: none;
    border-color: var(--bordo);
    box-shadow: 0 0 0 0.3rem rgba(120, 40, 64, 0.14);
}

.form-basarili {
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
    font-size: 1.5rem;
    color: #0f7a52;
    background: #e8f6ef;
    border-radius: 0.9rem;
}

.form-yer-tutucu{
    color:var(--metin-acik);
}

/* Adım Göstergesi */
.adim-ray{
    display:flex;
    gap:0.8rem;
    list-style:none;
    margin-bottom:2.8rem;
    padding:0;
}

.adim{
    display:flex;
    align-items:center;
    gap:0.8rem;
    flex:1;
    padding:0.9rem 1.2rem;
    font-size:1.4rem;
    color:var(--metin-acik);
    background:var(--kirik-beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius:99.9rem;
}

.adim span{
    display:grid;
    place-items:center;
    flex:none;
    width:2.2rem;
    height:2.2rem;
    font-family:'Archivo', sans-serif;
    font-size:1.2rem;
    font-weight:800;
    color:var(--metin-acik);
    background:var(--beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius:50%;
}

.adim.aktif{
    color:var(--antrasit);
    border-color:var(--bordo);
}

.adim.aktif span{
    color:var(--beyaz);
    background:var(--bordo);
    border-color:var(--bordo);
}

.adim.bitti span{
    color:var(--beyaz);
    background:var(--altin-koyu);
    border-color:var(--altin-koyu);
}

/* Form Alanları */

.alan{
    margin-bottom:1.8rem;
}

.alan label{
    display:block;
    margin-bottom:0.7rem;
    font-size:1.4rem;
    font-weight:600;
    color:var(--antrasit);
}

.ipucu{
    font-weight:400;
    color:var(--metin-acik);
}

.teklif-form input[type="text"],
.teklif-form input[type="tel"],
.teklif-form input[type="number"],
.teklif-form input[type="date"],
.teklif-form select {
    width: 100%;
    padding: 1.3rem 1.4rem;
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--metin);
    background: var(--beyaz);
    border: 0.15rem solid var(--kenarlik);
    border-radius: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.teklif-form input:focus,
.teklif-form select:focus{
    outline:none;
    border-color:var(--bordo);
    box-shadow:0 0 0 0.3rem rgba(120, 40, 64, 0.14);
}

/* Sayı kutularındaki artır/azalt okları: alanı daraltıyor ve
   fare tekerleğiyle değeri kazara değiştiriyor. */
.teklif-form input[type="number"] {
    -moz-appearance: textfield;
}

    .teklif-form input[type="number"]::-webkit-outer-spin-button,
    .teklif-form input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Plaka Kutusu */

.plaka-kutu{
    display:flex;
    align-items:stretch;
    overflow:hidden;
    background:var(--beyaz);
    border:0.2rem solid var(--antrasit);
    border-radius:0.8rem;
    transition:box-shadow 0.15s ease;
}

.plaka-kutu:focus-within{
    box-shadow: 0 0 0 0.3rem rgba(120, 40, 64, 0.18);
}

.plaka-serit{
    display:grid;
    place-items:center;
    flex:none;
    padding-inline:1.2rem;
    font-family:'Archivo', sans-serif;
    font-size:1.3rem;
    font-weight:800;
    color:var(--beyaz);
    background:#0057b8;
}

.teklif-form .plaka-kutu input{
    border:none;
    border-radius:0;
    font-family:'Archivo', sans-serif;
    font-size:2.2rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-align:center;
    text-transform:uppercase;
}

.teklif-form .plaka-kutu input:focus{
    box-shadow:none;
}

/* Butonlar */

.form-butonlar{
    display:flex;
    gap:1rem;
}

.form-buton{
    flex:1;
    min-height:5.2rem;
    padding-inline:2.4rem;
    font-family:'Archivo', sans-serif;
    font-size:1.6rem;
    font-weight:700;
    color:var(--beyaz);
    background:var(--bordo);
    border:0.2rem solid var(--altin);
    border-radius:1rem;
    transition:background 0.2s ease;
}

.form-buton:hover:not(:disabled){
    background:var(--bordo-koyu);
}

.form-buton:disabled{
    opacity:0.55;
    cursor:progress;
}

.form-buton.ikincil{
    flex:0 0 auto;
    color:var(--antrasit);
    background:var(--beyaz);
    border-color:var(--kenarlik);
}

.form-buton.ikincil:hover{
    background:var(--kirik-beyaz);
    border-color:var(--metin-acik);
}

/* Hata ve Bilgi */

.form-hata{
    padding:1.1rem 1.4rem;
    margin-bottom:1.6rem;
    font-size:1.4rem;
    color:#9b2525;
    background:#fdecea;
    border-radius:0.9rem;
}

.form-bilgi{
    margin-bottom:2.4rem;
    font-size:1.6rem;
    color:var(--metin-acik);
}

/* Özet Kutusu */

.ozet{
    padding:1.4rem 1.6rem;
    margin-bottom:2rem;
    font-size:1.5rem;
    background:var(--kirik-beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius:1rem;
}

.ozet-satir{
    display:flex;
    justify-content:space-between;
    gap:1.6rem;
    padding-block:0.5rem;
}

.ozet-satir + .ozet-satir{
    border-top:0.1rem solid var(--kenarlik);
}

.ozet-etiket{
    color:var(--metin-acik);
}

.ozet-deger{
    font-weight:600;
    text-align:right;
}

/* Teklif Durumu */

.teklif-durum{
    display:flex;
    align-items:center;
    gap:1.2rem;
    padding:1.4rem 1.6rem;
    margin-bottom:2rem;
    font-size:1.5rem;
    color:var(--metin-acik);
    background:var(--kirik-beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius:1rem;
}

.durum-govde {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.durum-ipucu {
    font-size: 1.3rem;
    color: var(--metin-acik);
}

/* Tamamlanınca uyarı gereksiz */
.teklif-durum.bitti .durum-ipucu {
    display: none;
}

/* ---------- İlerleme çubuğu ---------- */

.ilerleme {
    height: 0.6rem;
    margin-bottom: 2rem;
    overflow: hidden;
    background: var(--kenarlik);
    border-radius: 99.9rem;
}

.ilerleme-dolgu {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--bordo), var(--altin));
    border-radius: 99.9rem;
    transition: width 0.4s ease;
}

/* Akış bitince çubuk kayboluyor */
.ilerleme.bitti {
    opacity: 0;
    transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ilerleme-dolgu {
        transition: none;
    }
}

.teklif-durum.bitti{
    color:var(--altin-koyu);
    border-color:var(--altin);
}

/* Dönen Yükleme Halkası */
.yukleniyor{
    flex:none;
    width:2rem;
    height:2rem;
    border:0.25rem solid var(--kenarlik);
    border-top-color:var(--bordo);
    border-radius:50%;
    animation:donuyor 0.8s linear infinite;
}

.teklif-durum.bitti .yukleniyor{
    display:none;
}

@keyframes donuyor{
    to {transform: rotate(360deg); }
}

/* Fiyat Listesi */

.fiyat-listesi{
    list-style:none;
    margin: 0 0 2rem;
    padding:0;
    display:grid;
    gap:1rem;
}

.fiyat-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem 1.8rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 1.2rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fiyat-satir:hover{
    border-color:var(--altin);
    box-shadow: 0 0.8rem 2.4rem rgba(26, 28, 32, 0.08);
}

/* En Ucuz Teklif Öne Çıkıyor */

.fiyat-satir.en-ucuz{
    border-color:var(--bordo);
    border-width:0.2rem;
}

.fiyat-sirket{
    display:flex;
    flex-direction:column;
    gap:0.3rem;
}

.sirket-ad{
    font-family:'Archivo', sans-serif;
    font-size:1.6rem;
    font-weight:700;
    color:var(--antrasit);
}

.sirket-rozet{
    align-self:flex-start;
    padding:0.2rem 0.8rem;
    font-size:1.1rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--beyaz);
    background:var(--bordo);
    border-radius:99.9rem;
}

.fiyat-tutar{
    font-family:'IBM Plex Mono', monospace;
    font-variant-numeric:tabular-nums;
    font-size:2rem;
    font-weight:500;
    color:var(--antrasit);
    white-space:nowrap;
}

.fiyat-sec{
    padding:1rem 1.8rem;
    font-family:'Archivo', sans-serif;
    font-size:1.4rem;
    font-weight:700;
    color: var(--beyaz);
    background:var(--bordo);
    border:0.15rem solid var(--altin);
    border-radius:0.9rem;
    transition:background 0.2s ease;
}

.fiyat-sec:hover{
    background:var(--bordo-koyu);
}

/* Poliçeleştirilemeyen tekliflerde telefona yönlendirme */
.fiyat-iletisim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.8rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bordo);
    text-decoration: none;
    white-space: nowrap;
    background: var(--beyaz);
    border: 0.15rem solid var(--bordo);
    border-radius: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease;
}

    .fiyat-iletisim:hover {
        color: var(--beyaz);
        background: var(--bordo);
    }

/* Teklif Veremeyen Şirket */

.fiyat-satir.basarisiz{
    opacity:0.5;
}

.fiyat-satir.basarisiz .fiyat-tutar {
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--metin-acik);
    /* Uzun hata mesajları tabloyu genişletmesin */
    white-space: normal;
    max-width: 28rem;
    line-height: 1.4;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* POLİÇE SONUÇ SAYFASI */

.sonuc-kart{
    max-width: 56rem;
    margin-inline: auto;
    padding: 4.8rem 3.2rem;
    text-align:center;
    background:var(--beyaz);
    border:0.1rem solid var(--kenarlik);
    border-radius: 1.8rem;
}

.sonuc-ikon{
    display: grid;
    place-items: center;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 2.4rem;
    border-radius: 50%;
    border: 0.3rem solid;
}

.sonuc-ikon svg{
    width: 4rem;
    height: 4rem;
}

/* Duruma göre renk - üç hal, üç anlam */
.sonuc-basarili .sonuc-ikon{
    color: #0f7a52;
    border-color: #0f7a52;
    background: #e8f6ef;
}

.sonuc-beklemede .sonuc-ikon{
    color: var(--altin-koyu); 
    border-color: var(--altin);
    background: #fdf6e6;
}

.sonuc-basarisiz .sonuc-ikon,
.sonuc-hata .sonuc-ikon{
    color: #9b2525;
    border-color: #9b2525;
    background: #fdecea;
}

.sonuc-kart h1{
    margin-bottom: 1.2rem;
    font-size: 3rem;
}

.sonuc-mesaj{
    margin-bottom: 3.2rem;
    font-size: 1.7rem;
    color: var(--metin-acik);
}

.police-no{
    display: grid;
    gap: 0.6rem;
    padding: 2rem;
    margin-bottom: 3.2rem;
    background: var(--kirik-beyaz);
    border: 0.2rem solid var(--altin);
    border-radius: 1.2rem;
}

.police-no span{
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--altin-koyu);
}

.police-no strong{
    font-size: 2.4rem;
    font-weight: 500;
    color:var(--antrasit);
}

.sonuc-butonlar{
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.sonuc-butonlar .form-buton{
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Yönetim Girişi */

.giris-alani{
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding-block: 6.4rem;
    background: var(--kirik-beyaz);
}

.giris-kart{
    width: min(42rem, 100% - 3.2rem);
    padding: 4rem 3.2rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-top: 0.4rem solid var(--altin);
    border-radius: 1.8rem;
    box-shadow: 0 1.4rem 4rem rgba(26, 28, 32, 0.08);
}

.giris-baslik{
    text-align: center;
    margin-bottom: 3.2rem;
}

.giris-amblem{
    height: 6.4rem;
    width:auto;
    margin: 0 auto 1.6rem;
}

.giris-baslik h1{
    font-size: 2.4rem;
    margin-bottom: 0.6rem;
}

.giris-baslik p{
    font-size: 1.5rem;
    color: var(--metin-acik);
}

.giris-kart input[type="email"],
.giris-kart input[type="password"]{
    width: 100%;
    padding: 1.3rem 1.4rem;
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--metin);
    background: var(--beyaz);
    border: 0.15rem solid var(--kenarlik);
    border-radius: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.giris-kart input:focus{
    outline:none;
    border-color: var(--bordo);
    box-shadow: 0 0 0 0.3rem rgba(120, 40, 64, 0.14);
}

.onay-satiri{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.onay-satiri input{
    width: 1.8rem;
    height: 1.8rem;
    accent-color: var(--bordo);
}

.alan-hata{
    display: block;
    margin-top: 0.5rem;
    font-size: 1.3rem;
    color: #9b2525;
}

.giris-kart .form-buton{
    width: 100%;
}

/* İki alanı yan yana koyan sarmalayıcı */
.alan-ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

/* Bot tuzağı — ekran okuyuculardan ve gözden tamamen gizli.
   display:none kullanmıyoruz; bazı botlar onu atlıyor. */
.tuzak {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ---------- SMS doğrulama ---------- */

.dogrulama-kutu {
    padding: 2rem 1.8rem;
    margin-bottom: 2rem;
    background: var(--kirik-beyaz);
    border: 0.15rem solid var(--altin);
    border-radius: 1.2rem;
}

.dogrulama-bilgi {
    margin-bottom: 1.6rem;
    font-size: 1.5rem;
    color: var(--metin-acik);
}

    .dogrulama-bilgi strong {
        font-family: 'IBM Plex Mono', monospace;
        color: var(--antrasit);
    }

.teklif-form .kod-girisi {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.5em;
    text-align: center;
    padding-inline: 1rem;
}

#btnKodTekrar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- TSS aile listesi ---------- */

.aile-listesi {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.aile-satir {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 1.4rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 0.9rem;
}

.aile-bilgi {
    flex: 1;
    font-size: 1.5rem;
}

    .aile-bilgi small {
        display: block;
        font-size: 1.3rem;
        color: var(--metin-acik);
    }

.aile-sil {
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    color: #9b2525;
    background: transparent;
    border: 0.1rem solid var(--kenarlik);
    border-radius: 0.7rem;
    cursor: pointer;
}

    .aile-sil:hover {
        border-color: #9b2525;
    }

.aile-form {
    padding: 1.6rem;
    background: var(--kirik-beyaz);
    border-radius: 1rem;
}

.giris-alt {
    margin-top: 2.4rem;
    padding-top: 2rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--metin-acik);
    border-top: 0.1rem solid var(--kenarlik);
}

    .giris-alt a {
        color: var(--bordo);
        font-weight: 600;
    }

        .giris-alt a:hover {
            text-decoration: underline;
        }

.giris-kart .form-butonlar {
    display: flex;
    gap: 1rem;
}

/* ============================================
   MÜŞTERİ HESAP SAYFASI
   ============================================ */

.hesap-ust {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3.2rem;
}

    .hesap-ust h1 {
        font-size: clamp(2.6rem, 4vw, 3.6rem);
    }

.hesap-baslik {
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

.yenileme-uyari {
    padding: 1.8rem 2rem;
    margin-bottom: 3.2rem;
    background: #fdf6e6;
    border: 0.1rem solid var(--altin);
    border-left: 0.4rem solid var(--altin);
    border-radius: 1.2rem;
}

    .yenileme-uyari strong {
        display: block;
        margin-bottom: 0.6rem;
        font-family: 'Archivo', sans-serif;
        font-size: 1.6rem;
        color: var(--altin-koyu);
    }

    .yenileme-uyari p {
        font-size: 1.5rem;
        color: var(--metin);
    }

    .yenileme-uyari a {
        color: var(--bordo);
        font-weight: 600;
        text-decoration: underline;
    }

/* ---------- Poliçe kartları ---------- */

.police-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 1.6rem;
}

.police-kart {
    padding: 2.4rem 2.2rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-top: 0.4rem solid var(--bordo);
    border-radius: 1.4rem;
}

    .police-kart.pasif {
        border-top-color: var(--kenarlik);
        opacity: 0.7;
    }

.police-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.police-brans {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--altin-koyu);
}

.police-sirket {
    margin-bottom: 1.8rem;
    font-size: 2rem;
}

.police-detay {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

    .police-detay > div {
        display: flex;
        justify-content: space-between;
        gap: 1.6rem;
        padding-bottom: 0.9rem;
        border-bottom: 0.1rem solid var(--kenarlik);
    }

        .police-detay > div:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .police-detay dt {
        font-size: 1.4rem;
        color: var(--metin-acik);
    }

    .police-detay dd {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        text-align: right;
        color: var(--antrasit);
    }

.plakasiz-baglanti {
    display: block;
    margin: -0.6rem 0 2rem;
    padding: 0;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--bordo);
    background: none;
    border: none;
    border-bottom: 0.1rem solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .plakasiz-baglanti:hover {
        border-bottom-color: var(--bordo);
    }

/* Sıfır araç (plakasız) formu */

.plakasiz-kutu h3 {
    margin: 0 0 .4rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 1.8rem;
    color: var(--antrasit);
}

.plakasiz-aciklama {
    margin: 0 0 1.6rem;
    font-size: 1.5rem;
    color: var(--metin-acik);
}

.plakasiz-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.6rem;
}

    .plakasiz-izgara .alan-genis {
        grid-column: 1 / -1;
    }

    .plakasiz-izgara input:disabled,
    .plakasiz-izgara select:disabled {
        background: var(--kirik-beyaz);
        color: var(--metin-acik);
    }

@media (max-width: 600px) {
    .plakasiz-izgara {
        grid-template-columns: 1fr;
    }
}

.footer-levha {
    margin-top: 1.5rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: #e8c766;
}

    .footer-levha strong {
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 500;
        color: var(--altin);
        letter-spacing: .02em;
    }


/* ============================================
   Hukuki metin sayfaları
   KVKK aydınlatma, çerez politikası, kullanım koşulları
   ============================================ */

.hukuk {
    padding: 6rem 0 8rem;
    background: var(--kirik-beyaz);
}

.hukuk-baslik {
    max-width: 80rem;
    margin: 0 auto 4rem;
}

    .hukuk-baslik h1 {
        font-size: 3.2rem;
        line-height: 1.25;
        color: var(--metin);
        margin: 1.2rem 0 0.8rem;
    }

.hukuk-tarih {
    font-size: 1.4rem;
    color: var(--metin-acik);
    margin: 0;
}

.hukuk-govde {
    max-width: 80rem;
    margin: 0 auto;
    background: var(--beyaz);
    border: 1px solid var(--kenarlik);
    border-radius: 1.2rem;
    padding: 4rem;
    font-size: 1.6rem;
    line-height: 1.75;
    color: var(--metin);
}

    .hukuk-govde h2 {
        font-size: 2.1rem;
        margin: 3.6rem 0 1.2rem;
        padding-bottom: 0.8rem;
        border-bottom: 2px solid var(--altin);
    }

        .hukuk-govde h2:first-child {
            margin-top: 0;
        }

    .hukuk-govde h3 {
        font-size: 1.7rem;
        color: var(--bordo);
        margin: 2.8rem 0 0.8rem;
    }

    .hukuk-govde p {
        margin: 0 0 1.4rem;
    }

    .hukuk-govde ul,
    .hukuk-govde ol {
        margin: 0 0 1.8rem;
        padding-left: 2.2rem;
    }

    .hukuk-govde li {
        margin-bottom: 0.8rem;
    }

    .hukuk-govde a {
        color: var(--bordo);
        text-decoration: underline;
        text-underline-offset: 0.3rem;
    }

        .hukuk-govde a:hover {
            color: var(--bordo-koyu);
        }

/* Gözden kaçmaması gereken paragraflar */
.hukuk-vurgu {
    background: var(--kirik-beyaz);
    border-left: 4px solid var(--altin);
    padding: 1.6rem 2rem;
    border-radius: 0 0.6rem 0.6rem 0;
    margin: 0 0 2rem;
}

.hukuk-tablo {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2.4rem;
    font-size: 1.5rem;
}

    .hukuk-tablo th,
    .hukuk-tablo td {
        border: 1px solid var(--kenarlik);
        padding: 1.1rem 1.4rem;
        text-align: left;
        vertical-align: top;
    }

    .hukuk-tablo thead th {
        background: var(--antrasit);
        color: var(--kirik-beyaz);
        font-weight: 600;
    }

    .hukuk-tablo tbody th {
        background: var(--kirik-beyaz);
        width: 30%;
        font-weight: 600;
    }


/* Alt bilgideki yasal metin bağlantıları */
.footer-yasal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
}

    .footer-yasal a {
        color: inherit;
        text-decoration: none;
        opacity: 0.85;
    }

        .footer-yasal a:hover {
            opacity: 1;
            text-decoration: underline;
        }

/* ---------- Kasko paket içeriği ---------- */

.teminat-liste {
    margin-top: 1.2rem;
    padding: 1.6rem;
    border: 1px solid var(--kenarlik);
    border-radius: 8px;
    background: var(--kirik-beyaz);
    max-height: 40rem;
    overflow-y: auto;
}

    .teminat-liste .ozet {
        margin-bottom: 1.6rem;
    }

        .teminat-liste .ozet:last-child {
            margin-bottom: 0;
        }

.teminat-sirket {
    margin: 1.6rem 0 0.6rem;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bordo);
}

    .teminat-sirket:first-child {
        margin-top: 0;
    }

/* Poliçeleştirilemeyen tekliflerde sebebin kısa karşılığı */

.fiyat-engel {
    display: inline-block;
    align-self: flex-start;
    margin-left: 0.8rem;
    padding: 0.2rem 0.8rem;
    border: 1px solid var(--kenarlik);
    border-radius: 999px;
    font-size: 1.1rem;
    color: var(--metin-acik);
    white-space: nowrap;
    cursor: help;
}

/* ---------- Konut ---------- */

.konut-ileri {
    margin: 1.6rem 0;
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--kenarlik);
    border-radius: 8px;
    background: var(--kirik-beyaz);
}

    .konut-ileri > summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--bordo);
        list-style: none;
    }

        .konut-ileri > summary::after {
            content: " ▾";
            color: var(--metin-acik);
        }

    .konut-ileri[open] > summary::after {
        content: " ▴";
    }

    .konut-ileri > summary::-webkit-details-marker {
        display: none;
    }

/* Şirketin bedeli kendi sınırına çektiği durumlarda fiyatın yanındaki not */

.fiyat-uyari {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--metin-acik);
}

/* Fiyat satırındaki teminat özeti */

.teminat-ozet {
    margin-top: 0.6rem;
}

    .teminat-ozet > summary {
        cursor: pointer;
        font-size: 1.2rem;
        color: var(--bordo);
        list-style: none;
    }

        .teminat-ozet > summary::-webkit-details-marker {
            display: none;
        }

        .teminat-ozet > summary::after {
            content: " ▾";
            color: var(--metin-acik);
        }

    .teminat-ozet[open] > summary::after {
        content: " ▴";
    }

    .teminat-ozet dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.3rem 1.2rem;
        margin: 0.8rem 0 0;
        font-size: 1.2rem;
    }

    .teminat-ozet dt {
        color: var(--metin-acik);
    }

    .teminat-ozet dd {
        margin: 0;
        text-align: right;
        color: var(--metin);
    }

/* ---------- Gömülü ödeme sayfası ---------- */

.odeme-ortu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.4rem 1.6rem;
    background: rgba(26, 26, 26, 0.75);
    overflow-y: auto;
}

    .odeme-ortu[hidden] {
        display: none;
    }

/* Arkadaki sayfa kaymasın */
body.odeme-acik {
    overflow: hidden;
}

.odeme-kutu {
    width: 100%;
    max-width: 68rem;
    background: var(--beyaz);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.35);
}

.odeme-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.6rem 2rem;
    background: var(--antrasit);
    color: var(--kirik-beyaz);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.odeme-kapat {
    padding: 0.6rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: var(--kirik-beyaz);
    font: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}

    .odeme-kapat:hover {
        background: rgba(255, 255, 255, 0.12);
    }

#odemeCerceve {
    display: block;
    width: 100%;
    min-height: 52rem;
    border: 0;
}

/* Özet kutusundaki "bilgileriniz yanlış mı" bağlantısı kendi satırında dursun.
   .plakasiz-baglanti negatif üst boşluk taşıyor, burada onu sıfırlıyoruz. */
.ozet .plakasiz-baglanti {
    width: 100%;
    margin: 0.9rem 0 0;
    padding-top: 0.9rem;
    text-align: left;
    border-top: 0.1rem solid var(--kenarlik);
    border-bottom: none;
}

    .ozet .plakasiz-baglanti:hover {
        color: var(--bordo-koyu);
        text-decoration: underline;
    }

/* Menüdeki iki düğme yan yana dursun */
.giris-butonlari {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Teklif listesi üstündeki hatırlatma onayı: açıklama alt satıra insin,
   kutucuk da metnin ilk satırıyla hizalansın. */
.teklif-form .onay-satiri.hatirlatma-onay {
    align-items: flex-start;
    margin-bottom: 2rem;
    line-height: 1.5;
}

    .teklif-form .onay-satiri.hatirlatma-onay input {
        margin-top: 0.3rem;
    }

    .teklif-form .onay-satiri.hatirlatma-onay .ipucu {
        display: block;
        margin-top: 0.3rem;
    }

/* ---------- Hesap sayfası: hatırlatma ve takip ---------- */

.hesap-bolum {
    margin-top: 4.8rem;
}

.hatirlatma-kutu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2.4rem 2.2rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-left: 0.4rem solid var(--kenarlik);
    border-radius: 1.4rem;
}

    /* Açıkken sol kenar altın: durum tek bakışta anlaşılsın */
    .hatirlatma-kutu.acik {
        border-left-color: var(--altin);
    }

.hatirlatma-metin {
    flex: 1 1 32rem;
}

    .hatirlatma-metin strong {
        display: block;
        margin-bottom: 0.6rem;
        font-family: 'Archivo', sans-serif;
        font-size: 1.7rem;
        color: var(--antrasit);
    }

    .hatirlatma-metin p {
        font-size: 1.5rem;
        line-height: 1.55;
        color: var(--metin-acik);
    }

.hatirlatma-kutu .form-buton {
    flex: 0 0 auto;
    min-height: 4.6rem;
    padding-inline: 3.2rem;
}

/* Takip listesi */

.takip-listesi {
    list-style: none;
    margin: 0 0 2.4rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.takip-satir {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.4rem 1.8rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 1.2rem;
}

.takip-bilgi {
    flex: 1;
    min-width: 0;
}

    .takip-bilgi strong {
        display: block;
        font-family: 'Archivo', sans-serif;
        font-size: 1.6rem;
        color: var(--antrasit);
    }

    .takip-bilgi span {
        font-size: 1.4rem;
        color: var(--metin-acik);
    }

.takip-kalan {
    flex: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.4rem;
    color: var(--altin-koyu);
    white-space: nowrap;
}

.takip-satir .satir-buton {
    flex: none;
    padding: 0.6rem 1.4rem;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--metin-acik);
    background: transparent;
    border: 0.1rem solid var(--kenarlik);
    border-radius: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .takip-satir .satir-buton:hover {
        color: #9b2525;
        border-color: #9b2525;
    }

/* Takip ekleme formu */

.takip-form {
    padding: 2.4rem 2.2rem;
    background: var(--beyaz);
    border: 0.1rem solid var(--kenarlik);
    border-radius: 1.4rem;
}

    .takip-form input,
    .takip-form select {
        width: 100%;
        padding: 1.3rem 1.4rem;
        font-family: inherit;
        font-size: 1.6rem;
        color: var(--metin);
        background: var(--beyaz);
        border: 0.15rem solid var(--kenarlik);
        border-radius: 1rem;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .takip-form input:focus,
        .takip-form select:focus {
            outline: none;
            border-color: var(--bordo);
            box-shadow: 0 0 0 0.3rem rgba(120, 40, 64, 0.14);
        }

    .takip-form .form-buton {
        width: 100%;
        margin-top: 0.8rem;
    }


/* ---------- Branş sekmeleri: alt çizgi ---------- */

/* Çizgi tarayıcının varsayılanıydı: siyah, ince ve kod rozetinin
   altına da düşüyordu. Rozetten kaldırıp yalnızca yazıya veriyoruz. */
.brans-buton {
    text-decoration: none;
}

    .brans-buton .brans-ad {
        text-decoration: underline;
        text-decoration-color: var(--bordo);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .brans-buton:hover .brans-ad {
        text-decoration-color: var(--bordo-koyu);
    }

    /* Seçili sekmenin zemini bordo; çizgi altın olunca okunuyor */
    .brans-buton.aktif .brans-ad {
        text-decoration-color: var(--altin);
    }


/* ÜST MENÜ - TABLET => 1024px ve altı*/
@media(max-width: 1024px) {
    body {
        padding-top: 9.6rem;
    }

    .navbar-content {
        grid-template-columns: auto 1fr;
        /* logo + hamburger */
        gap: 2rem;
        min-height: 9.6rem;
    }

    .brand-emblem {
        height: 5.6rem;
    }

    .brand-text {
        height: 2.8rem;
    }
    /* Masaüstü menüsü ve butonu gizleniyor */
    .login-button {
        display: none;
    }
    /* Hamburger görünür oluyor */
    .menu-toggle {
        display: grid;
        gap: 0.6rem;
        justify-self: end;
        padding: 1.2rem;
    }

        .menu-toggle span {
            display: block;
            width: 2.8rem;
            height: 0.3rem;
            background: var(--antrasit);
            border-radius: 99.9rem;
            transition: transform 0.25s ease, opacity 0.2s ease;
        }
        /* Açıkken çarpıya dönüşür */
        .menu-toggle[aria-expanded="true"] span:nth-child(1) {
            transform: translateY(0.9rem) rotate(45deg);
        }

        .menu-toggle[aria-expanded="true"] span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle[aria-expanded="true"] span:nth-child(3) {
            transform: translateY(-0.9rem) rotate(-45deg);
        }
    /* Açılır menü panosu */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: grid;
        justify-content: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        background: var(--beyaz);
        border-bottom: 0.1rem solid var(--kenarlik);
        transition: max-height 0.3s ease;
    }

        .nav-links.acik {
            max-height: 32rem;
        }

        .nav-links a {
            padding: 1.8rem 2.4rem;
            border-top: 0.1rem solid var(--kenarlik);
            font-size: 1.8rem;
        }
            /* Açılır menüde alt çizgi animasyonu kaldır */
            .nav-links a::after {
                display: none;
            }
            /* Giriş bağlantısı menü içine alma */
            /* Tablet media query içinde, .mobile-login kuralını değiştir */
            .nav-links a.mobile-login {
                display: block;
                margin: 1.6rem 2.4rem 2.4rem;
                padding: 1.4rem 2.4rem;
                color: var(--beyaz);
                /* artık ezilmiyor */
                text-align: center;
                font-weight: 700;
                background: var(--bordo);
                border: 0.2rem solid var(--altin);
                border-top: 0.2rem solid var(--altin);
                border-radius: 1rem;
            }

    .hero {
        padding-block: 6.4rem;
    }

        .hero::after {
            right: -18rem;
            bottom: -24rem;
            width: 44rem;
            height: 44rem;
        }

    .products {
        padding-block: 7.2rem;
    }

    .section-heading {
        margin-bottom: 4rem;
    }

    .why-us {
        padding-block: 7.2rem;
    }

    .why-us-content {
        grid-template-columns: 1fr;
        gap: 4.8rem;
    }

    .how-it-works {
        padding-block: 7.2rem;
    }

    .how-it-works-heading {
        margin-bottom: 4rem;
    }
    /* İkişerli düzende bağlantı çizgisi yanlış yere düşüyor */
    .process-card::after {
        display: none;
    }

    .quote-cta {
        padding-block: 7.2rem;
    }

    .quote-cta-content {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .quote-cta-actions {
        flex-direction: row;
        min-width: 0;
    }

    .quote-cta-button {
        flex: 1;
    }

    .contact-section {
        padding-block: 7.2rem;
    }

    .contact-heading {
        margin-bottom: 4rem;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 4.8rem;
    }
    /* Marka sütunu tam genişlik alsın*/
    .footer-brand {
        grid-column: 1 / -1;
    }

    .teklif {
        padding-block: 4.8rem 7.2rem;
    }

    .teklif-govde {
        grid-template-columns: 1fr;
    }

    .tanitim-gorsel {
        height: 10rem;
    }
}

/* ÜST MENÜ - TELEFON => 600px ve altı */
@media(max-width: 600px) {
    body {
        padding-top: 8rem;
    }

    .container {
        width: min(120rem, 100% - 3.2rem);
    }

    .navbar-content {
        width: min(120rem, 100% - 3.2rem);
        min-height: 8rem;
    }

    .brand-emblem {
        height: 4.4rem;
    }

    .brand-text {
        height: 2.2rem;
    }

    .brand {
        gap: 1rem;
    }

    .hero {
        padding-block: 4.8rem;
    }

    .hero-description {
        font-size: 1.7rem;
        margin-bottom: 3.2rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    /* Butonlar tam genişlikte, parmakla kolay hedeflenir */
    .button {
        width: 100%;
    }

    /* Dekoratif halka dar ekranda dikkat dağıtıyor. */
    .hero::after {
        display: none;
    }

    .products {
        padding-block: 5.6rem;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-card {
        padding: 2.8rem 2.4rem;
    }

    .why-us {
        padding-block: 5.6rem;
    }

    .why-us-content {
        width: min(120rem, 100% - 3.2rem);
    }

    .feature-item {
        grid-template-columns: 2.4rem 1fr;
        gap: 1.6rem;
        padding-block: 2.4rem;
    }

    .how-it-works {
        padding-block: 5.6rem;
    }

    .how-it-works-content {
        width: min(120rem, 100% - 3.2rem);
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-card {
        padding: 2.8rem 2.4rem;
    }

    .process-action {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .process-button {
        width: 100%;
    }

    .quote-cta {
        padding-block: 5.6rem;
    }

    .quote-cta-content {
        width: min(120rem, 100% - 3.2rem);
    }

    .quote-cta-actions {
        flex-direction: column;
    }

    .quote-cta::after {
        display: none;
    }

    .contact-section {
        padding-block: 5.6rem;
    }

    .contact-content {
        width: min(120rem, 100% - 3.2rem);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 2.8rem 2.4rem;
    }

    .site-footer {
        padding-block: 4.8rem 2.4rem;
    }

    .footer-content,
    .footer-bottom {
        width: min(120rem, 100% - 3.2rem);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 3.6rem;
        margin-bottom: 3.6rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .teklif{
        padding-block:3.2rem 5.6rem;
    }

    .brans-secim{
        grid-template-columns:1fr;
        gap:0.8rem;
    }

    .teklif-tanitim,
    .teklif-form{
        padding:2.4rem 2rem;
    }

    .fiyat-satir{
        grid-template-columns:1fr auto;
        gap:1rem;
    }

    .fiyat-sec{
        grid-column:1 / -1;
    }

    .sonuc-kart{
        padding: 3.2rem 2rem;
    }

    .sonuc-butonlar{
        flex-direction:column;
    }

    .alan-ikili {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fiyat-iletisim {
        grid-column: 1 / -1;
    }

    .hesap-ust {
        flex-direction: column;
        align-items: stretch;
    }

    .hukuk {
        padding: 4rem 0 5rem;
    }

    .hukuk-baslik h1 {
        font-size: 2.4rem;
    }

    .hukuk-govde {
        padding: 2.4rem 2rem;
        font-size: 1.5rem;
    }

    .hukuk-tablo {
        font-size: 1.4rem;
    }

        .hukuk-tablo th,
        .hukuk-tablo td {
            padding: 0.9rem 1rem;
        }

        .hukuk-tablo tbody th {
            width: auto;
        }

    .odeme-ortu {
        padding: 0;
    }

    .odeme-kutu {
        max-width: none;
        min-height: 100%;
        border-radius: 0;
    }
}