/* MD Harita Mühendislik — ana stil
   Yaklaşım: sade, çok boşluklu, tek vurgu rengi, hareket içeriğe hizmet eder.
   Font bilerek sistem fontu; indirilen yazı tipi yok. */

:root {
    --mavi:        #134FCD;   /* logodan örneklendi */
    --mavi-koyu:   #0E3EA6;
    --mavi-acik:   #5B8CF0;
    --mavi-solgun: #F0F4FE;
    --lacivert:    #071633;

    --siyah:       #1A1A1C;
    --gri:         #6E6E73;
    --gri-acik:    #6B6B70;   /* 3.62 -> 5.6 kontrast */
    --cizgi:       #E5E5EA;
    --zemin:       #F5F5F7;
    --beyaz:       #FFFFFF;

    --en: 1120px;
    --dar: 760px;
    --yay: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 94px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--siyah);
    background: var(--beyaz);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
figure { margin: 0; }

a { color: var(--mavi); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    margin: 0 0 .4em;
    color: var(--siyah);
    font-weight: 600;
    letter-spacing: -.022em;
    line-height: 1.08;
}

p { margin: 0 0 1em; }

.kapsa     { width: min(100% - 2.75rem, var(--en));  margin-inline: auto; }
.kapsa-dar { width: min(100% - 2.75rem, var(--dar)); margin-inline: auto; }

.atla {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--mavi);
    color: #fff;
    padding: .8rem 1.2rem;
    z-index: 200;
    border-radius: 0 0 8px 0;
}
.atla:focus { left: 0; }

/* ============================================================ üst menü */

/* Hero tam ekran koyu fotoğraf olduğu için menü en üstte şeffaf duruyor;
   kaydırınca beyaza dönüyor. Logo da buna göre değişiyor. */
.ust {
    /* Hero tam ekran; menü onun ÜZERİNDE duruyor, altında değil.
       Bu yüzden sticky değil fixed: hero en tepeden başlıyor. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.ust.kaydi {
    background: rgba(255, 255, 255, .90);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(0, 0, 0, .08);
}

/* iki logo üst üste değil, sırayla */
.marka .logo-koyu { display: none; }
.ust.kaydi .marka .logo-beyaz { display: none; }
.ust.kaydi .marka .logo-koyu  { display: block; }

/* menü yazıları: şeffafken beyaz, beyaz zeminde koyu */
.ust .menu a { color: #fff; opacity: .88; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.ust .menu a:hover { opacity: 1; }
.ust.kaydi .menu a { color: var(--siyah); opacity: .78; text-shadow: none; }
.ust.kaydi .menu a:hover { opacity: 1; }
.ust .menu a[data-bolum].etkin { color: #fff; }
.ust.kaydi .menu a[data-bolum].etkin { color: var(--mavi); }
.ust .menu a[data-bolum]::after { background: #fff; }
.ust.kaydi .menu a[data-bolum]::after { background: var(--mavi); }
.ust .menu-cizgi { background: #fff; }
.ust.kaydi .menu-cizgi { background: var(--siyah); }

.ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 82px;
}

.marka img { height: 46px; width: auto; transition: transform .25s var(--yay); }
.marka:hover img { transform: scale(1.03); }
.marka:hover { text-decoration: none; }

.menu { display: flex; align-items: center; gap: .1rem; }

.menu a {
    position: relative;
    color: var(--siyah);
    font-size: .875rem;
    padding: .5rem .8rem;
    opacity: .78;
    transition: opacity .2s ease;
}
.menu a:hover { opacity: 1; text-decoration: none; }

/* kaydırma takibi: bulunulan bölümün bağlantısı belirginleşir */
.menu a[data-bolum]::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .18rem;
    height: 1.5px;
    background: var(--mavi);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--yay);
}
.menu a[data-bolum].etkin { opacity: 1; color: var(--mavi); }
.menu a[data-bolum].etkin::after { transform: scaleX(1); }

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mavi);
    color: #fff !important;
    font-size: .9rem;
    font-family: inherit;
    padding: .55rem 1.15rem;
    border-radius: 980px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, transform .2s var(--yay);
}
.dugme:hover { background: var(--mavi-koyu); text-decoration: none; transform: scale(1.03); }
.dugme:active { transform: scale(.98); }
.dugme-buyuk { font-size: 1.02rem; padding: .78rem 1.7rem; }

.dugme-sade {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .55rem .2rem;
    color: var(--mavi);
    font-size: 1.02rem;
}
.dugme-sade:hover { text-decoration: underline; }
.dugme-sade svg { transition: transform .2s var(--yay); }
.dugme-sade:hover svg { transform: translateX(4px); }
.dugme-sade-buyuk { font-size: 1.12rem; }

.menu-dugme {
    display: none;
    background: none;
    border: 0;
    /* Cizgiler 24px genisliginde duruyor ama dokunma hedefi 44x44 olmali;
       fark padding ile veriliyor, gorunum degismiyor. */
    padding: 8px 10px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-content: center;
    justify-items: stretch;
    gap: 6px;
}
.menu-cizgi {
    display: block;
    height: 1.5px;
    background: var(--siyah);
    border-radius: 2px;
    transition: transform .3s var(--yay), opacity .2s ease;
}
.menu-cizgi + .menu-cizgi { margin-top: 6px; }
.menu-dugme[aria-expanded="true"] .menu-cizgi:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] .menu-cizgi:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* ============================================================ HERO

   Tam ekran saha fotoğrafı + koyu gradyan; yazılar üstünde beyaz.
   Hareket, fotoğrafın çok yavaş yakınlaşmasıyla veriliyor.            */

.hero {
    position: relative;
    min-height: clamp(560px, 80vh, 840px);
    display: grid;
    /* minmax(0,1fr): içerik sütunu ekrandan geniş yapamasın */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    background: #071633;
    overflow: hidden;
    isolation: isolate;
}

.hero-fon { position: absolute; inset: 0; z-index: -2; }
.hero-fon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Drone gorselin ust kisminda; kadraj yukari cekildi ki tam gorunsun. */
    object-position: 50% 20%;
    animation: heroYakinlas 26s ease-in-out infinite alternate;
}
@keyframes heroYakinlas {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

/* Yazının okunabilmesi için koyu geçiş. */
.hero-fon::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,12,28,.74) 0%, rgba(4,12,28,.32) 34%,
                                rgba(4,12,28,.60) 74%, rgba(4,12,28,.90) 100%),
        radial-gradient(125% 95% at 50% 44%, transparent 26%, rgba(4,12,28,.55) 100%);
}

.hero-ic { position: relative; text-align: center; padding: 9rem 0 6rem; }

.hero-ustyazi {
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9DC0FF;
    overflow: hidden;
    padding-bottom: .2em;
    margin: 0 0 calc(1.1rem - .2em);
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hero-ustyazi span { display: inline-block; animation: yukariGir .9s var(--yay) .15s both; }

.hero-baslik {
    font-size: clamp(2.5rem, 6.6vw, 4.6rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.04;
    margin: 0 0 1.1rem;
    color: #fff;
    text-shadow: 0 3px 24px rgba(0,0,0,.55);
}
.hero-baslik .kelime {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .18em;
    margin-bottom: -.18em;
}
.hero-baslik .kelime > span { display: inline-block; animation: yukariGir 1s var(--yay) both; }
.hero-baslik .kelime:nth-child(1) > span { animation-delay: .28s; }
.hero-baslik .kelime:nth-child(2) > span { animation-delay: .38s; }
.hero-baslik .kelime:nth-child(3) > span { animation-delay: .48s; }
.hero-baslik .vurgu > span,
.hero-baslik .mavi  > span { color: #7FB2FF; }

@keyframes yukariGir {
    from { transform: translateY(105%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.hero-alt {
    font-size: clamp(1.08rem, 2vw, 1.32rem);
    color: rgba(255,255,255,.86);
    line-height: 1.45;
    max-width: 46ch;
    margin: 0 auto 2rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    animation: solukGir 1s var(--yay) .62s both;
}

.hero-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    justify-content: center;
    align-items: center;
    animation: solukGir 1s var(--yay) .76s both;
}
.hero-eylem .dugme-sade { color: #BBD4FF; }
.hero-eylem .dugme-sade:hover { color: #fff; }


@keyframes solukGir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hero-ok {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: rgba(255,255,255,.7);
    animation: solukGir 1s var(--yay) 1.4s both, okZipla 2.6s ease-in-out 2.4s infinite;
}
.hero-ok:hover { color: #fff; text-decoration: none; }
@keyframes okZipla {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}

/* ---------------------------------------- sayaç şeridi

   Hero'dan alındı (müşteri talebi): hero sade kalsın, sayılar hemen
   altında açık zeminde dursun.                                         */

.sayac-serit {
    background: var(--beyaz);
    border-bottom: 1px solid var(--cizgi);
}

.sayaclar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0 auto;
    padding: 2.2rem 0;
}
.sayac { position: relative; text-align: center; padding: 0 .5rem; }
.sayac + .sayac::before {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 1px;
    background: var(--cizgi);
}
.sayac-sayi {
    display: block;
    min-height: 1.05em;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--mavi);
    font-variant-numeric: tabular-nums;
}
.sayac-sayi[data-bekliyor] { color: var(--cizgi); }
.sayac dd {
    margin: .5rem 0 0;
    font-size: .9rem;
    color: var(--gri);
    line-height: 1.3;
}

@media (max-width: 680px) {
    .sayaclar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem .6rem;
        padding: 1.8rem 0;
    }
    .sayac + .sayac::before { display: none; }
    .sayac:nth-child(even)::before {
        content: "";
        position: absolute;
        left: 0; top: 14%; bottom: 14%;
        width: 1px;
        background: var(--cizgi);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fon img,
    .hero-ustyazi span, .hero-alt, .hero-eylem,
    .hero-ok { animation: none; }
    .hero-baslik .kelime > span { animation: none; transform: none; opacity: 1; }
}

@media (max-width: 680px) {
    .hero { min-height: 78vh; }
    .hero-ic { padding: 4rem 0 4.5rem; }
    .sayaclar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem .6rem;
        margin: 2rem auto 1.8rem;
    }
    .sayac + .sayac::before { display: none; }
    .sayac:nth-child(even)::before {
        content: "";
        position: absolute;
        left: 0; top: 12%; bottom: 12%;
        width: 1px;
        background: rgba(255,255,255,.18);
    }
    .hero-eylem { flex-direction: column; gap: 1.2rem; }
}

/* ============================================================ çip şeridi */

.cip-serit {
    border-block: 1px solid var(--cizgi);
    background: var(--beyaz);
    overflow: hidden;
}
.cip-kapsa {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    padding: 1.1rem 0;
}
.cip-kapsa::-webkit-scrollbar { display: none; }

.cip {
    flex: none;
    font-size: .88rem;
    color: var(--gri);
    padding: .38rem .95rem;
    border: 1px solid var(--cizgi);
    border-radius: 980px;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}
.cip:hover { color: var(--mavi); border-color: var(--mavi-acik); }

/* ============================================================ bölümler */

.bolum { padding: 5.75rem 0; }
.bolum-gri { background: var(--zemin); }
.bolum-sik { padding: 4.5rem 0; }

.bolum-koyu {
    background: var(--lacivert);
    color: rgba(255, 255, 255, .72);
}
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.bolum-koyu .bolum-aciklama { color: rgba(255, 255, 255, .66); }

.bolum-bas { text-align: center; max-width: 44ch; margin: 0 auto 4rem; }
.bolum-bas h2 .mavi { color: var(--mavi); }
.bolum-koyu .bolum-bas h2 .mavi { color: var(--mavi-acik); }
.vizyon h2 .mavi { color: var(--mavi-acik); }

.bolum-bas h2 {
    font-size: clamp(1.95rem, 4.2vw, 2.9rem);
    font-weight: 600;
    margin-bottom: .3em;
}
.bolum-aciklama {
    font-size: 1.14rem;
    color: var(--gri);
    margin: 0;
    line-height: 1.45;
}

.ust-etiket {
    font-size: .92rem;
    color: var(--mavi);
    margin: 0 0 .55rem;
}
.ust-etiket-acik { color: var(--mavi-acik); }

/* ============================================================ hizmetler */

.hizmet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
    padding: 4.5rem 0;
}
.hizmet + .hizmet { border-top: 1px solid var(--cizgi); }
.hizmet:first-of-type { padding-top: 0; }
.hizmet:last-of-type { padding-bottom: 0; }
.hizmet.ters .hizmet-metin { order: 2; }

.hizmet-no {
    display: block;
    font-size: .84rem;
    color: var(--mavi);
    letter-spacing: .1em;
    margin-bottom: .7rem;
}

.hizmet-gorsel {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E3EAF7, #D2DDF1);
}
.hizmet-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--yay);
}
.hizmet-gorsel:hover img { transform: scale(1.04); }

.hizmet h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    margin-bottom: .35em;
    color: var(--mavi);
}
.hizmet p {
    font-size: 1.06rem;
    color: var(--gri);
    line-height: 1.55;
    margin-bottom: 1.6rem;
}

.alt-liste { list-style: none; padding: 0; margin: 0; }
.alt-liste li {
    font-size: 1rem;
    padding: .58rem 0;
    border-bottom: 1px solid var(--cizgi);
}
.alt-liste li:first-child { border-top: 1px solid var(--cizgi); }

/* ============================================================ süreç */

.surec-agi {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.surec {
    padding: 0 1.8rem;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.surec:first-child { padding-left: 0; border-left: 0; }
.surec:last-child { padding-right: 0; }

.surec-no {
    display: block;
    font-size: .84rem;
    color: var(--mavi-acik);
    letter-spacing: .1em;
    margin-bottom: 1.1rem;
}
.surec h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: .45em; color: #A9C4FB; }
.surec p { font-size: .99rem; line-height: 1.5; margin: 0; }

/* ============================================================ değerler */

.deger-agi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

.deger-gorsel {
    aspect-ratio: 5 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #E3EAF7, #D2DDF1);
    margin-top: 1.5rem;
}
.deger-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--yay); }
.deger:hover .deger-gorsel img { transform: scale(1.05); }
.deger h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: .5em; color: var(--mavi); }
.deger p { font-size: 1.02rem; color: var(--gri); line-height: 1.55; margin: 0; }

.deger-cizgi {
    width: 34px;
    height: 3px;
    background: var(--mavi);
    border-radius: 3px;
    margin-bottom: 1.4rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--yay) .1s;
}
.deger.gorundu .deger-cizgi { transform: scaleX(1); }

/* ============================================================ projeler */

.proje-agi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.proje-gorsel {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #E3EAF7, #D2DDF1);
    margin-bottom: 1rem;
}
.proje-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--yay); }
.proje:hover .proje-gorsel img { transform: scale(1.05); }
.proje h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: .1em; }
.proje-yer { font-size: .96rem; color: var(--gri-acik); }

.yer-tutucu {
    text-align: center;
    padding: 4.5rem 1.5rem;
    border: 1px solid var(--cizgi);
    border-radius: 16px;
    background: var(--beyaz);
}
.yer-tutucu strong { display: block; font-size: 1.08rem; font-weight: 600; margin-bottom: .35rem; }
.yer-tutucu span { font-size: 1rem; color: var(--gri); }

/* ============================================================ referanslar */

.referans-agi {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--cizgi);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    overflow: hidden;
}
.referans {
    background: var(--beyaz);
    min-height: 112px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.4rem .9rem;
    font-size: .98rem;
    color: var(--siyah);
    transition: background .25s ease, color .25s ease;
}
.referans:hover { background: var(--mavi-solgun); color: var(--mavi); }

/* ============================================================ S.S.S. */

.sss-liste {
    border-top: 1px solid var(--cizgi);
    background: var(--beyaz);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--cizgi);
}

.sss + .sss { border-top: 1px solid var(--cizgi); }

.sss[open] summary { color: var(--mavi); }

.sss summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.3rem 1.5rem;
    cursor: pointer;
    font-size: 1.06rem;
    list-style: none;
    transition: background .2s ease;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary:hover { background: var(--mavi-solgun); }

.sss summary i {
    flex: none;
    position: relative;
    width: 14px;
    height: 14px;
}
.sss summary i::before,
.sss summary i::after {
    content: "";
    position: absolute;
    background: var(--mavi);
    border-radius: 2px;
    transition: transform .3s var(--yay), opacity .3s ease;
}
.sss summary i::before { inset: 6px 0; height: 2px; }
.sss summary i::after  { inset: 0 6px; width: 2px; }
.sss[open] summary i::after { transform: rotate(90deg); opacity: 0; }

.sss-cevap {
    padding: 0 1.5rem 1.4rem;
    color: var(--gri);
    font-size: 1rem;
    line-height: 1.6;
    animation: sssAc .35s var(--yay);
}
.sss-cevap p { margin: 0; max-width: 62ch; }
@keyframes sssAc {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================ vizyon */

.bolum-vizyon { background: var(--lacivert); padding: 6.5rem 0; }
.vizyon { text-align: center; max-width: 46ch; margin: 0 auto; }
.vizyon h2 { color: #fff; font-size: clamp(1.95rem, 4.2vw, 2.9rem); font-weight: 600; margin-bottom: .35em; }
.vizyon p { font-size: 1.18rem; color: rgba(255, 255, 255, .7); line-height: 1.5; margin: 0; }

/* ============================================================ iletişim */

.iletisim-agi { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; }

.iletisim-satir { padding: 1.15rem 0; border-bottom: 1px solid var(--cizgi); }
.iletisim-satir:first-child { border-top: 1px solid var(--cizgi); }
.iletisim-ad { font-size: .92rem; color: var(--gri-acik); margin-bottom: .1rem; }
.iletisim-deger { font-size: 1.08rem; }
.iletisim-deger a { display: inline-block; padding: .25rem 0; }
.iletisim-deger a { color: var(--siyah); }
.iletisim-deger a:hover { color: var(--mavi); }
.iletisim-deger[data-bekliyor] { color: var(--gri-acik); }

.form { display: grid; gap: 1.3rem; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form label { display: block; font-size: .92rem; color: var(--gri); margin-bottom: .35rem; }
.form input, .form textarea, .form select {
    width: 100%;
    font: inherit;
    font-size: 1.02rem;
    padding: .85rem 1rem;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: var(--beyaz);
    color: var(--siyah);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form input:focus, .form textarea:focus, .form select:focus {
    outline: 0;
    border-color: var(--mavi);
    box-shadow: 0 0 0 4px rgba(19, 79, 205, .1);
}
.form textarea { min-height: 140px; resize: vertical; }

.form-not { font-size: .93rem; color: var(--gri-acik); margin: 0; }
.form-durum {
    font-size: .97rem;
    padding: .85rem 1.05rem;
    border-radius: 12px;
    background: var(--mavi-solgun);
    color: var(--mavi-koyu);
    margin: 0;
}

/* ============================================================ alt bilgi */

.alt {
    background: var(--zemin);
    border-top: 1px solid var(--cizgi);
    padding: 3.5rem 0 2.5rem;
    font-size: .88rem;
    color: var(--gri);
}
.alt-ic { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
.alt img { height: 28px; width: auto; margin-bottom: 1rem; }
.alt p { margin: 0; max-width: 34ch; }
.alt h3 { font-size: .88rem; font-weight: 600; color: var(--siyah); margin: 0 0 .9rem; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.alt ul a { display: inline-block; padding: .6rem 0; min-height: 40px; }  /* 39px idi: parmak hedefi icin 1px eksikti */
.alt a { color: var(--gri); }
.alt a:hover { color: var(--siyah); }

.alt-cizgi {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--cizgi);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem;
    font-size: .82rem;
    color: var(--gri-acik);
}

/* ============================================================ görünürlük */

.gir {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .75s var(--yay), transform .75s var(--yay);
    transition-delay: var(--sira, 0s);
}
.gir.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .gir { opacity: 1; transform: none; transition: none; }
    .kontur { animation: none; stroke-dashoffset: 0; transform: none; translate: 0 0; }
    .nirengi-tarama { animation: none; opacity: 0; }
    .hero-nirengi { opacity: 1; animation: none; }
    .nirengi-halka, .hero-ok, .hero-ustyazi span,
    .hero-baslik .kelime > span, .hero-alt, .hero-eylem { animation: none; }
    .hero-baslik .kelime > span { transform: none; opacity: 1; }
    .deger-cizgi { transform: scaleX(1); transition: none; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================ duyarlı */

@media (max-width: 980px) {
    body { font-size: 16px; }
    .bolum { padding: 4.5rem 0; }
    .bolum-vizyon { padding: 5.5rem 0; }
    .hero { padding-top: .5rem; }
    .hizmet { grid-template-columns: 1fr; gap: 2.2rem; padding: 3.5rem 0; }
    .hizmet.ters .hizmet-metin { order: 0; }
    .hizmet-gorsel { order: -1; }
    .surec-agi { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 0; }
    .surec:nth-child(3) { padding-left: 0; border-left: 0; }
    .deger-agi { grid-template-columns: 1fr; gap: 2.8rem; }
    .proje-agi { grid-template-columns: repeat(2, 1fr); }
    .referans-agi { grid-template-columns: repeat(3, 1fr); }
    .iletisim-agi { grid-template-columns: 1fr; gap: 3rem; }
    .alt-ic { grid-template-columns: 1fr 1fr; }
    .bolum-bas { margin-bottom: 3rem; }
}

@media (max-width: 680px) {
    /* Dar ekranda tek satir halinde kayiyor. Sag kenarda solma birakiyoruz
       ki devaminin oldugu belli olsun; yoksa kesilmis gibi duruyor. */
    .cip-serit {
        -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
                mask-image: linear-gradient(90deg, #000 82%, transparent);
    }
    .cip-kapsa {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-right: 2.5rem;
    }
    .cip-kapsa::-webkit-scrollbar { display: none; }

    .menu {
        display: none;
        position: absolute;
        top: 82px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: stretch;
        padding: .6rem 1.4rem 1.4rem;
        gap: 0;
        border-bottom: 1px solid var(--cizgi);
    }
    .menu.acik { display: flex; }
    .menu a { padding: .9rem .2rem; border-bottom: 1px solid var(--cizgi); font-size: 1rem; opacity: 1; }
    .menu a[data-bolum]::after { display: none; }
    .menu .dugme { margin-top: 1rem; border-bottom: 0; padding: .75rem 1.2rem; }
    .menu-dugme { display: grid; }
    .ust { position: fixed; }
    .ust .menu a { color: var(--siyah); text-shadow: none; }
    .ust .menu-cizgi { background: #fff; }
    .ust.kaydi .menu-cizgi { background: var(--siyah); }
    html { scroll-padding-top: 90px; }

    .surec-agi { grid-template-columns: 1fr; gap: 2.2rem; }
    .surec { padding: 0; border-left: 0; }
    .proje-agi { grid-template-columns: 1fr; }
    .referans-agi { grid-template-columns: repeat(2, 1fr); }
    .form-satir { grid-template-columns: 1fr; }
    .alt-ic { grid-template-columns: 1fr; gap: 2.2rem; }
    .hero-eylem { flex-direction: column; gap: 1.2rem; }
    .hero-ic { padding: 3.5rem 0 5rem; }
    .sss summary { padding: 1.1rem 1.15rem; font-size: 1rem; }
    .sss-cevap { padding: 0 1.15rem 1.2rem; }
}


/* ============================================ örnekli alt başlıklar

   Müşteri: "3B modeli seçtiğimizde model çıksın". Alt başlığa tıklanınca
   yandaki görsel o işin örneğiyle değişiyor.                            */

.alt-liste-ornekli li { padding: 0; }

.alt-liste-ornekli button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--siyah);
    text-align: left;
    background: none;
    border: 0;
    padding: .72rem .2rem;
    cursor: pointer;
    transition: color .2s ease, padding-left .25s var(--yay);
}
.alt-liste-ornekli button span {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cizgi);
    transition: background .25s ease, transform .25s var(--yay);
}
.alt-liste-ornekli button:hover { color: var(--mavi); padding-left: .5rem; }
.alt-liste-ornekli button:hover span { background: var(--mavi-acik); }
.alt-liste-ornekli button.etkin { color: var(--mavi); padding-left: .5rem; }
.alt-liste-ornekli button.etkin span { background: var(--mavi); transform: scale(1.5); }

.ornek-not {
    font-size: .9rem;
    color: var(--gri-acik);
    margin: 1rem 0 0;
}

.hizmet-gorsel img.degisiyor { opacity: 0; transform: scale(1.02); }
.hizmet-gorsel img { transition: opacity .3s ease, transform .5s var(--yay); }

@media (max-width: 680px) {
    .alt-liste-ornekli button { font-size: .97rem; }
}


/* ============================================ Çalışma Alanları bölümü

   Müşteri: "1-2-3 alanlarda arka plan çok beyaz kalmış, mavilik ekleyelim,
   üç işi bağlayan animasyonlu bir çizgi olabilir."                        */

.bolum-alanlar {
    position: relative;
    background:
        radial-gradient(1100px 620px at 12% 8%,  rgba(19, 79, 205, .055), transparent 60%),
        radial-gradient(900px 560px at 92% 55%,  rgba(19, 79, 205, .05),  transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, #F6F9FF 45%, #FFFFFF 100%);
}

.bolum-alanlar .kapsa { position: relative; }

/* Çizgi başlık yazısının içinden geçiyordu; yalnızca hizmetlerin
   bulunduğu bu sarmalın içinde çalışıyor. */
.alanlar-akis { position: relative; }

/* üç hizmeti bağlayan dikey çizgi; kaydırdıkça doluyor */
.alan-cizgi {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--cizgi) 8%, var(--cizgi) 92%, transparent);
    pointer-events: none;
    z-index: 0;
}
.alan-cizgi span {
    position: absolute;
    inset: 0 0 auto 0;
    display: block;
    height: var(--dolum, 0%);
    background: linear-gradient(180deg, var(--mavi-acik), var(--mavi));
    border-radius: 2px;
    transition: height .18s linear;
}
/* çizginin ucundaki ışık */
.alan-cizgi span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mavi);
    transform: translateX(-50%);
    box-shadow: 0 0 0 5px rgba(19, 79, 205, .16), 0 0 18px rgba(19, 79, 205, .5);
}

.bolum-alanlar .hizmet { position: relative; z-index: 1; }

/* numara madalyonu: çizginin üstünde dursun */
.bolum-alanlar .hizmet-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--cizgi);
    color: var(--mavi);
    font-size: .82rem;
    letter-spacing: .04em;
    margin-bottom: 1rem;
    transition: border-color .4s ease, box-shadow .4s ease;
}
.hizmet.gorundu .hizmet-no {
    border-color: var(--mavi);
    box-shadow: 0 0 0 5px rgba(19, 79, 205, .10);
}

@media (max-width: 980px) {
    .alan-cizgi { left: 0; transform: none; }
}
@media (max-width: 680px) {
    .alan-cizgi { display: none; }
}

/* ============================================ yüzen WhatsApp */

.wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
    transition: transform .25s var(--yay), box-shadow .25s ease;
    animation: waGir .5s var(--yay) 1.6s both;
}
.wa:hover {
    transform: scale(1.08);
    text-decoration: none;
    box-shadow: 0 12px 34px rgba(37, 211, 102, .55);
}
.wa:active { transform: scale(.96); }

@keyframes waGir {
    from { opacity: 0; transform: scale(.6) translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* nabız halkası */
.wa::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: waNabiz 2.6s ease-out infinite;
}
@keyframes waNabiz {
    0%   { transform: scale(1);   opacity: .6; }
    70%  { opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}

@media (max-width: 680px) {
    .wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa, .wa::before { animation: none; }
    .alan-cizgi span { transition: none; }
}


/* ============================================ süreç: soldan sağa ilerleyiş

   Müşteri: "iş nasıl ilerliyor kısmına da animasyon eklenebilir sağa doğru".
   Adımlar sırayla açılıyor, aralarındaki yol soldan sağa doluyor.         */

.bolum-surec .kapsa { position: relative; }

.surec-yol {
    position: relative;
    height: 2px;
    margin: 0 0 2.4rem;
    background: rgba(255, 255, 255, .13);
    border-radius: 2px;
    overflow: hidden;
}
.surec-yol span {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: var(--dolum, 0%);
    background: linear-gradient(90deg, var(--mavi), var(--mavi-acik));
    border-radius: 2px;
    transition: width .2s linear;
}

.surec-agi { counter-reset: adim; }

/* her adım sırayla sağa doğru girsin */
.surec {
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .65s var(--yay), transform .65s var(--yay);
}
.surec.gorundu { opacity: 1; transform: none; }
.surec-agi .surec:nth-child(1).gorundu { transition-delay: 0s; }
.surec-agi .surec:nth-child(2).gorundu { transition-delay: .14s; }
.surec-agi .surec:nth-child(3).gorundu { transition-delay: .28s; }
.surec-agi .surec:nth-child(4).gorundu { transition-delay: .42s; }

/* adım numarasının altındaki nokta, yol üzerinde duruyormuş gibi */
.surec-no {
    position: relative;
    padding-top: .2rem;
}
.surec-no::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2.85rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--lacivert);
    border: 2px solid rgba(255, 255, 255, .22);
    transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.surec.gorundu .surec-no::before {
    background: var(--mavi);
    border-color: var(--mavi-acik);
    box-shadow: 0 0 0 5px rgba(19, 79, 205, .22), 0 0 16px rgba(91, 140, 240, .55);
}

@media (max-width: 980px) {
    .surec-yol { display: none; }
    .surec-no::before { display: none; }
    .surec { transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
    .surec { opacity: 1; transform: none; transition: none; }
    .surec-yol span { transition: none; }
}


/* ============================================ otomatik kayan çalışma şeridi

   Müşteri: "tamamlanan projelerde biraz resimler ekleyip o resimler
   otomatik kaysın."                                                       */

.serit {
    position: relative;
    overflow: hidden;
    /* kenarlarda yumuşak kaybolma */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.serit-akis {
    display: flex;
    gap: 1.4rem;
    width: max-content;
    animation: seritKay 46s linear infinite;
}
.serit:hover .serit-akis { animation-play-state: paused; }

@keyframes seritKay {
    from { transform: translateX(0); }
    /* iki kopya var: yarıya gelince başa dönmüş oluyor, dikiş görünmüyor */
    to   { transform: translateX(calc(-50% - .7rem)); }
}

.serit-kart {
    flex: none;
    width: 330px;
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s var(--yay), box-shadow .35s ease;
}
.serit-kart:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(10, 31, 69, .13);
}

.serit-kart img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: linear-gradient(135deg, #E3EAF7, #D2DDF1);
}

.serit-kart figcaption {
    padding: .95rem 1.1rem 1.15rem;
    display: grid;
    gap: .12rem;
}
.serit-kart figcaption strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--siyah);
}
.serit-kart figcaption span {
    font-size: .9rem;
    color: var(--gri-acik);
}

.serit-not {
    text-align: center;
    font-size: .93rem;
    color: var(--gri-acik);
    margin: 2rem auto 0;
    max-width: 52ch;
}

@media (max-width: 680px) {
    .serit-kart { width: 264px; }
    .serit-akis { animation-duration: 34s; }
}

@media (prefers-reduced-motion: reduce) {
    .serit-akis { animation: none; }
    .serit { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}



/* ============================================ proje türü dağılımı */

.tur-agi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 auto 3.2rem;
    padding: 0;
    max-width: 940px;
}

.tur {
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 16px;
    padding: 1.8rem 1.6rem;
    text-align: center;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--yay);
}
.tur:hover {
    border-color: #C3D2F6;
    box-shadow: 0 14px 40px rgba(10, 31, 69, .09);
    transform: translateY(-3px);
}

.tur .sayac-sayi {
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1;
    margin-bottom: .5rem;
}

.tur dd {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--siyah);
}

.tur p {
    margin: 0;
    font-size: .92rem;
    color: var(--gri-acik);
    line-height: 1.45;
}

@media (max-width: 880px) {
    .tur-agi { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.4rem; }
    .tur { padding: 1.5rem 1.4rem; }
}


/* ============================================ hızlı iletişim kartları

   İletişim bölümünün sol sütunu bilgilerin altında boş kalıyordu
   (QA: doluluk %5). Doğrudan iletişim yolları buraya kondu.            */

.hizli-iletisim {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
}

.hizli {
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: 1.05rem 1.2rem;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    background: var(--beyaz);
    color: var(--siyah);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--yay);
}
.hizli:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(10, 31, 69, .10);
}
.hizli span { display: grid; gap: .1rem; line-height: 1.35; }
.hizli strong { font-size: 1.02rem; font-weight: 600; }
.hizli span { font-size: .9rem; color: var(--gri); }
.hizli strong { color: var(--siyah); }

.hizli-wa { color: #128C4A; }
.hizli-wa:hover { border-color: #25D366; }
.hizli-tel { color: var(--mavi); }
.hizli-tel:hover { border-color: var(--mavi-acik); }

/* ---------------------------------------- hizmet bölgeleri */

.bolge { margin-top: 2.2rem; }
.bolge-ad {
    font-size: .92rem;
    color: var(--gri-acik);
    margin: 0 0 .75rem;
}
.bolge-liste { display: flex; flex-wrap: wrap; gap: .45rem; }
.bolge-liste span {
    font-size: .88rem;
    color: var(--gri);
    padding: .34rem .8rem;
    border: 1px solid var(--cizgi);
    border-radius: 980px;
    background: var(--beyaz);
}

@media (max-width: 680px) {
    .hizli { padding: .95rem 1rem; }
    .bolge { margin-top: 1.8rem; }
}


/* ============================================ sahadan notlar

   Referans/yorum olarak sunulmuyor: mesleki uygulama notları.
   Yaklaşımımız bölümünün devamı gibi duruyor.                            */

.notlar {
    margin-top: 4.5rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--cizgi);
}

.notlar-ad {
    font-size: .92rem;
    color: var(--mavi);
    text-align: center;
    margin: 0 0 2.2rem;
}

.not-agi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.not {
    position: relative;
    padding: 1.6rem 1.7rem 1.6rem 2.4rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.not::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 1.9rem;
    bottom: 1.9rem;
    width: 2px;
    background: var(--mavi);
    border-radius: 2px;
    opacity: .55;
}
.not:hover { border-color: #C3D2F6; box-shadow: 0 10px 30px rgba(10, 31, 69, .07); }

.not h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--siyah);
    margin-bottom: .45em;
}
.not p {
    margin: 0;
    font-size: .97rem;
    color: var(--gri);
    line-height: 1.55;
}

@media (max-width: 880px) {
    .not-agi { grid-template-columns: 1fr; }
    .notlar { margin-top: 3.2rem; padding-top: 2.4rem; }
}


/* ============================================ S.S.S. "daha fazla"

   Dar ekranda sayfa 12.000px'i geciyordu. Ilk uc soru acik, kalani
   dugmeyle geliyor. Genis ekranda hepsi zaten gorunuyor.                */

.sss-daha {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin-top: 1rem;
    padding: .95rem 1.2rem;
    font: inherit;
    font-size: .97rem;
    color: var(--mavi);
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease;
}
.sss-daha:hover { border-color: var(--mavi-acik); }
.sss-daha svg { transition: transform .3s var(--yay); }
.sss-daha[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 880px) {
    .sss-daha:not([hidden]) { display: flex; }
    .sss-liste.kisali .sss:nth-child(n+4) { display: none; }
}


/* ============================================ hero WhatsApp çağrısı */

.dugme-wa {
    gap: .55rem;
    background: #1FA855;
    box-shadow: 0 6px 20px rgba(31, 168, 85, .28);
}
.dugme-wa:hover { background: #17944A !important; }


/* ============================================ önce / sonra karşılaştırma

   Aynı arazinin ham ortofotosu ile işlenmiş paftası. Kolu sürükleyince
   üstteki görüntü kırpılıyor.                                            */

.karsilastir {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #DDE3EE;
    box-shadow: 0 18px 50px rgba(10, 31, 69, .14);
    user-select: none;
    touch-action: pan-y;
}

.karsilastir img { width: 100%; height: 100%; object-fit: cover; display: block; }

.karsilastir-alt { position: absolute; inset: 0; }

.karsilastir-ust {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* JS bu değeri günceller */
    clip-path: inset(0 calc(100% - var(--kol, 55%)) 0 0);
}
.karsilastir-ust img { position: absolute; inset: 0; }

.karsilastir-etiket {
    position: absolute;
    top: 14px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(8, 20, 44, .72);
    padding: .38rem .8rem;
    border-radius: 980px;
    pointer-events: none;
    backdrop-filter: blur(6px);
}
.karsilastir-sol { left: 14px; }
.karsilastir-sag { right: 14px; }

.karsilastir-cizgi {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--kol, 55%);
    width: 2px;
    background: rgba(255, 255, 255, .9);
    transform: translateX(-1px);
    pointer-events: none;
    box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}
.karsilastir-cizgi span {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
/* tutamağın içindeki iki ok */
.karsilastir-cizgi span::before,
.karsilastir-cizgi span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-block: 5px solid transparent;
}
.karsilastir-cizgi span::before {
    left: 10px;
    translate: 0 -50%;
    border-right: 7px solid var(--mavi);
}
.karsilastir-cizgi span::after {
    right: 10px;
    translate: 0 -50%;
    border-left: 7px solid var(--mavi);
}

/* görünmez kaydırıcı: erişilebilirlik ve dokunma için */
#karsilastirKol {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
#karsilastirKol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 46px;
    height: 100%;
    cursor: ew-resize;
}
#karsilastirKol::-moz-range-thumb {
    width: 46px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: ew-resize;
}
#karsilastirKol:focus-visible { opacity: 1; outline: 3px solid var(--mavi); }

@media (max-width: 680px) {
    .karsilastir { aspect-ratio: 4 / 3; border-radius: 12px; }
    .karsilastir-etiket { font-size: .74rem; padding: .3rem .65rem; top: 10px; }
    .karsilastir-sol { left: 10px; }
    .karsilastir-sag { right: 10px; }
}

/* ============================================================ form eylem

   Form sunucuya degil, kullanicinin kendi WhatsApp'ina ya da e-posta
   programina gidiyor. Iki kanal esit gorunmesin diye ikincisi sade. */

.form-eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem 1.25rem;
}

.dugme-ikincil {
    background: none;
    border: 0;
    padding: .55rem .2rem;
    font: inherit;
    font-size: .97rem;
    color: var(--mavi);
    cursor: pointer;
    border-radius: 8px;
}
.dugme-ikincil:hover { text-decoration: underline; }
.dugme-ikincil:focus-visible {
    outline: 2px solid var(--mavi);
    outline-offset: 3px;
}

.form-not a { text-decoration: underline; text-underline-offset: 2px; }

.form-durum.form-tamam {
    background: #EAF7EF;
    color: #17643A;
}

/* ============================================================ yasal sayfalar

   Ic sayfalarda hero yok; menu en tepeden itibaren opak olmali, yoksa
   beyaz zemin uzerinde beyaz logo kayboluyor. */

body.ic-sayfa .ust {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: var(--cizgi);
}
body.ic-sayfa .marka .logo-beyaz { display: none; }
body.ic-sayfa .marka .logo-koyu  { display: block; }

.hukuk-bas {
    padding: 9.5rem 0 2.75rem;
    border-bottom: 1px solid var(--cizgi);
    background: var(--mavi-solgun);
}
.hukuk-bas h1 {
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    margin-bottom: .5rem;
}
.hukuk-bas .ust-etiket { margin-bottom: .85rem; }
.hukuk-bas p.hukuk-tarih {
    margin: 0;
    color: var(--gri-acik);
    font-size: .93rem;
}

.hukuk {
    padding: 3.5rem 0 5rem;
    font-size: 1.02rem;
    line-height: 1.72;
}
.hukuk h2 {
    font-size: 1.32rem;
    margin: 2.6rem 0 .8rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--cizgi);
}
.hukuk h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
.hukuk h3 {
    font-size: 1.06rem;
    margin: 1.7rem 0 .55rem;
    color: var(--lacivert);
}
.hukuk p { color: #333336; }

.hukuk-ozet {
    background: var(--zemin);
    border-left: 3px solid var(--mavi);
    border-radius: 0 12px 12px 0;
    padding: 1.15rem 1.35rem;
    margin-bottom: .5rem;
    color: var(--siyah) !important;
}

.hukuk-liste { margin: 0 0 1.15rem; padding-left: 1.15rem; color: #333336; }
.hukuk-liste li { margin-bottom: .45rem; }

.hukuk-tablo-sar { overflow-x: auto; margin: 0 0 1.35rem; }
.hukuk-tablo {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: .95rem;
}
.hukuk-tablo th, .hukuk-tablo td {
    text-align: left;
    vertical-align: top;
    padding: .72rem .9rem;
    border-bottom: 1px solid var(--cizgi);
}
.hukuk-tablo th {
    background: var(--zemin);
    font-weight: 600;
    color: var(--siyah);
}
.hukuk-tablo td { color: #333336; }

.hukuk-geri {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 3rem;
    font-size: 1rem;
}

@media (max-width: 640px) {
    .hukuk-bas { padding: 7.5rem 0 2.25rem; }
    .hukuk { padding: 2.5rem 0 3.5rem; }
    .hukuk h2 { font-size: 1.2rem; margin-top: 2.1rem; }
}

/* Parmak hedefleri: iletisim satirlarindaki ve alt bilgideki baglar
   36px ve 17px yuksekligindeydi; gorunumu bozmadan 40px'e cikariliyor. */
.iletisim-deger a {
    display: inline-block;
    padding-block: 2px;
    min-height: 40px;
    line-height: 36px;
}
.alt-cizgi a {
    display: inline-block;
    padding-block: 11px;
}