/* ==========================================================================
   ATASEVER MEDIA  —  components.css
   Tekrar kullanilabilir bilesenler: hero, kartlar, surec, istatistik, form,
   akordiyon, slider, rozet, toast, yuzen butonlar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROZETLER
   -------------------------------------------------------------------------- */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.badge-soft .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.badge-line {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.badge-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
}

.badge-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   2. HERO — tam kaplayan gorselli kart + slayt gecisi
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    padding: 28px 0 34px;
}

.hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--dark);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

/* Slaytlarin sahnesi. Kontroller ve rakam seridi bunun disinda kaldigi icin
   metin, slayt degisse de ayni dikey hizada kalir. */
.hero-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
}

/* Slaytlar ust uste yiginlanir; yalnizca etkin olan gorunur.
   Ilk slayt akista kalarak kartin yuksekligini belirler. */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s var(--ease), visibility .55s;
}

/* Ilk slayt akista kalir ve sahnenin yuksekligini belirler */
.hero-slide:first-child { position: relative; flex: 1 1 auto; }

.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide-media { position: absolute; inset: 0; z-index: 0; }

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

/* Metnin okunabilirligi icin soldan gelen koyu gecis.
   Sag taraf acik birakilir ki fotograf gorunur kalsin. */
.hero-slide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg,
            rgba(18, 20, 24, .94) 0%,
            rgba(18, 20, 24, .88) 26%,
            rgba(18, 20, 24, .55) 48%,
            rgba(18, 20, 24, .12) 68%,
            rgba(18, 20, 24, 0) 84%),
        /* Header kartin uzerinde durdugu icin ust serit ayrica koyulastirilir;
           menu baglantilari fotografin aydinlik kisminda da okunur kalir. */
        linear-gradient(180deg,
            rgba(18, 20, 24, .62) 0%,
            rgba(18, 20, 24, .34) 11%,
            rgba(18, 20, 24, .08) 20%,
            rgba(18, 20, 24, 0) 30%);
}

.hero-slide-body {
    position: relative;
    z-index: 1;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 66px 56px 78px;
}

/* Kartin sol ust kosesindeki cikintili rozet */
.hero-badge {
display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 9px 18px 9px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--dark);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: 20px;
}

.hero-badge-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
}

.hero-title {
    margin: 0 0 20px;
    max-width: 15ch;
    color: #fff;
    font-size: clamp(30px, 1.2rem + 2.1vw, 46px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.035em;
    text-wrap: balance;
}

/* Vurgu, koyu zeminde renk yerine ince alt cizgiyle verilir;
   ana renk fotograf uzerinde okunakli kalmiyor. */
.hero-title .hero-accent {
    color: #fff;
    box-shadow: inset 0 -.09em 0 rgba(255, 255, 255, .45);
    padding-bottom: .02em;
}

.hero-text {
    margin: 0 0 32px;
    max-width: 520px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Koyu zemin uzerinde ikincil buton */
.btn-glass {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

/* Kartin alt seridindeki guven rakamlari.
   Duz bir cubuk fotografin uzerine yapistirilmis gibi duruyordu; serit
   yukariya dogru saydamlasan bir gecisle fotografin icinden cikar. */
.hero-stats {
    /* Serit fotografin UZERINE biner. Akista birakilirsa arkasinda fotograf
       degil kartin duz koyu zemini kalir; gecis seffaflastikca siyah cikar
       ve serit fotografa yapistirilmis bir cubuk gibi gorunur. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 44px;
    margin: 0;
    padding: 96px 56px 28px;
    list-style: none;
    background: linear-gradient(180deg,
        rgba(18, 20, 24, 0) 0%,
        rgba(18, 20, 24, .45) 34%,
        rgba(18, 20, 24, .82) 70%,
        rgba(18, 20, 24, .94) 100%);
}

/* Panelden secilebilen duz zemin varyanti */
.hero-stats.is-solid {
    padding-top: 22px;
    background: rgba(18, 20, 24, .72);
    border-top: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-stats li { list-style: none; }

.hero-stats .num {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.25;
}

.hero-stats .lbl {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .66);
}

/* Slayt kontrolleri */
.hero-nav {
    position: absolute;
    right: 26px;
    bottom: 60px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--radius-pill);
    background: rgba(21, 23, 26, .5);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .18s var(--ease);
}

.hero-arrow:hover { background: rgba(255, 255, 255, .16); }

.hero-dots { display: flex; align-items: center; gap: 7px; padding: 0 6px; }

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width .28s var(--ease), background-color .28s var(--ease);
}

.hero-dot:hover { background: rgba(255, 255, 255, .6); }
.hero-dot.is-active { width: 22px; background: #fff; }

/* Hareket azaltma tercihi: slaytlar aninda degisir */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}


/* --------------------------------------------------------------------------
   3. MUSTERI LOGOLARI
   -------------------------------------------------------------------------- */
/* Kayan marka seridi ------------------------------------------------------
   Logo sayisi panelden degistigi icin sabit sutunlu bir izgara her sayida
   dengeli durmuyordu (8 logo "7 + 1" gibi kiriliyordu). Serit surekli aktigi
   icin sayidan bagimsiz olarak duzgun gorunur. */
.clients-marquee {
    position: relative;
    overflow: hidden;
    padding-top: 32px;
    /* Kenarlarda logolar birden belirmesin diye yumusak gecis */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.clients-track {
    display: flex;
    align-items: center;
    gap: 56px;
}

/* Duzen sinifi: JS olcum yapmadan once verilir ki serit tek satira acilsin.
   Olcum sarmali yedek duzende yapilirsa genislik kapsayici kadar gorunur ve
   cogaltma dongusu gereksiz yere donerdi. */
.clients-track.is-marquee {
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

/* Animasyon sinifi: kopyalar eklendikten sonra verilir */
.clients-track.is-running {
    animation: clients-scroll var(--marquee-duration, 40s) linear infinite;
}

.clients-marquee:hover .clients-track.is-running,
.clients-marquee:focus-within .clients-track.is-running { animation-play-state: paused; }

@keyframes clients-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* JS yoksa ya da hareket azaltma tercihi varsa: sarmali duz satir */
.clients-track:not(.is-marquee) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 48px;
}

@media (prefers-reduced-motion: reduce) {
    .clients-track.is-running { animation: none; }
}

.client-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #A2A8B0;
    opacity: .9;
    transition: color .25s var(--ease), opacity .25s var(--ease);
    /* Dar sutunda uzun marka adi hucreden tasmasin, sarsin */
    text-align: center;
    line-height: 1.25;
}

.client-logo i { font-size: 19px; }

.client-logo:hover { color: var(--dark); opacity: 1; }

.clients-label {
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    /* Bosluk banda dolgu olarak verilir; buradaki alt bosluk kapsayicidan
       disari cikip margin daralmasiyla yutuluyordu. */
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. HIZMET KARTI
   -------------------------------------------------------------------------- */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 30px 30px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.service-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.service-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 24px;
    transition: background-color .25s var(--ease), color .25s var(--ease),
                transform .25s var(--ease);
}

.service-card:hover .service-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.06);
}

.service-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 22px;
}

.service-card .link-arrow { margin-top: auto; }

.service-card-num {
    position: absolute;
    top: 26px;
    right: 26px;
    font-size: 13px;
    font-weight: 700;
    color: var(--border-strong);
    letter-spacing: .02em;
}

/* Sade liste tipi hizmet gosterimi */
.service-list { list-style: none; display: grid; gap: 0; }

.service-list li { border-bottom: 1px solid var(--border); }

.service-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px;
    color: var(--dark);
    font-size: 17px;
    font-weight: 600;
}

.service-list a:hover { color: var(--primary); }
.service-list a i { color: var(--muted); font-size: 15px; transition: transform .2s var(--ease); }
.service-list a:hover i { color: var(--primary); transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. PROJE KARTI
   -------------------------------------------------------------------------- */
/* Proje karti — fotograf, koyu gecis ve metin tek cercevede.
   Onceki duzende dev bir gorselin altinda bosta duran yazi vardi; kart iki
   ayri parca gibi okunuyor ve bolumu gereksiz yere uzatiyordu. */
.project-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--dark);
    color: #fff;
    isolation: isolate;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.project-card:hover {
    color: #fff;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.project-media { position: absolute; inset: 0; z-index: -1; }

.project-media img,
.project-media .thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.project-card:hover .project-media img { transform: scale(1.05); }

/* Metnin okunabilirligi icin alttan gelen gecis */
.project-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(18, 20, 24, .10) 0%,
        rgba(18, 20, 24, .30) 42%,
        rgba(18, 20, 24, .84) 78%,
        rgba(18, 20, 24, .95) 100%);
    transition: opacity .3s var(--ease);
}

.project-card:hover .project-media::after { opacity: .92; }

.project-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 30px 28px 26px;
}

.project-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.project-meta .badge-cat { color: #A9ADFF; }
.project-meta .sep { color: rgba(255, 255, 255, .4); font-size: 11px; }

.project-client {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

.project-card h2,
.project-card h3 {
    font-size: 23px;
    margin-bottom: 8px;
    color: #fff;
    letter-spacing: -.028em;
}

.project-card p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .76);
    margin-bottom: 16px;
    max-width: 44ch;
}

/* Sag ust kosedeki gidis isareti */
.project-go {
    position: absolute;
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.project-card:hover .project-go {
    background: var(--primary);
    border-color: var(--primary);
    transform: translate(2px, -2px);
}

.project-services {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-services li {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

/* Filtre */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 44px;
}

.filter-btn {
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    transition: all .2s var(--ease);
}

.filter-btn:hover { border-color: var(--dark); }

.filter-btn.active {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.project-item.is-hidden { display: none; }

.filter-empty {
    display: none;
    padding: 50px 0;
    text-align: center;
    color: var(--muted);
}

.filter-empty.show { display: block; }

/* --------------------------------------------------------------------------
   6. NEDEN BIZ
   -------------------------------------------------------------------------- */
/* Kenar cubugundaki numarali adim listesi (teklif sayfasi).
   Onceden "Neden Biz" bolumunun siniflarini paylasiyordu; o bolum yeniden
   tasarlaninca burasi stilsiz kaldi. Artik kendi sinifi var. */
.step-list {
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
}

.step-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
}

.step-item:first-child { border-top: 0; padding-top: 0; }
.step-item:last-child { padding-bottom: 0; }

.step-num {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.step-item h3 {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.35;
}

.step-item p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   NEDEN BIZ
   Solda tanitim + dikey fotograf, sagda 2x2 ozellik izgarasi.
   -------------------------------------------------------------------------- */
.why-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 60px;
    /* Iki kolon ayni yerde biter: fotograf kalan yuksekligi doldurur */
    align-items: stretch;
}

.why-intro { display: flex; flex-direction: column; }

.why-intro h2 { margin-bottom: 14px; }
.why-intro .lead { margin-bottom: 0; }

/* Fotograf kolonun kalan yuksekligini doldurur; sabit bir orana baglanirsa
   kart izgarasindan cok daha uzun kalip sagda bosluk birakiyordu. */
.why-photo {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
    margin-top: 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

/* Fotografin altindan gelen gecis, notu zemine baglar */
.why-photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(18, 20, 24, 0) 0%, rgba(18, 20, 24, .55) 100%);
    pointer-events: none;
}

.why-note {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 34px -16px rgba(21, 23, 26, .5);
}

.why-note i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 17px;
}

.why-note span { display: flex; flex-direction: column; min-width: 0; }

.why-note strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
}

.why-note small { font-size: 13px; color: var(--muted); }

/* 2x2 ozellik izgarasi */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.why-card {
    position: relative;
    overflow: hidden;
    /* Kartlar kolon yuksekligine gerildigi icin icerik dikeyde ortalanir;
       aksi halde metin tepeye yapisip altta bosluk kaliyordu. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow-xs);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
                border-color .25s var(--ease);
}

.why-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* Rakam filigran gibi kosede durur; hizmet kartlarindaki ikon kutusuyla
   karismasin diye bilincli olarak farkli bir dil secildi. */
.why-card-num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--primary-soft);
    font-variant-numeric: tabular-nums;
    transition: color .25s var(--ease);
}

.why-card:hover .why-card-num { color: var(--primary); opacity: .22; }

.why-card h3 {
    position: relative;
    font-size: 18.5px;
    margin-bottom: 9px;
    padding-right: 44px;
}

.why-card p {
    position: relative;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}

/* Gorsel + kucuk bilgi kutusu */
.media-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.media-frame img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Tam genislikteki makale / proje kapaklari. 4:3 burada 950px'i asan bir
   blok uretip icerigi ekranin cok asagisina itiyordu; genis oran hem
   fotografi dogal ceviriminde birakiyor hem giris metnini yukari aliyor. */
.media-frame.is-cover {
    border-radius: var(--radius-lg);
}

.media-frame.is-cover img { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   7. ISTATISTIKLER
   -------------------------------------------------------------------------- */
/* Rakam seridi.
   Once koyu bir panel denendi; sayfada zaten koyu hero, koyu CTA ve koyu
   footer oldugu icin ucuncu koyu blok agir kaciyordu ve kose parlamasi tek
   hucreye hapsolup hata gibi gorunuyordu. Zemin ritmi zaten otomatik
   oldugundan bu blogun kontrast gorevi de kalmadi: cerceve ve zemin
   kaldirildi, rakamlar bulundugu bolumun zemini uzerinde durur. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.stat-item {
    padding: 34px 28px;
    border-right: 1px solid var(--border);
}

.stat-item:last-child { border-right: 0; }

.stat-value {
    font-size: 44px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-bottom: 6px;
}


.stat-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}

.stat-value .suffix { color: var(--primary); }

/* Koyu bir bolum icinde kullanilirsa renkler cevrilir */
.section-dark .stat-value { color: #fff; }
.section-dark .stat-label { color: #9BA1A9; }
.section-dark .stat-value .suffix { color: #9EA3FF; }
.section-dark .stat-item + .stat-item::before { background: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   8. YAKLASIM / SUREC
   -------------------------------------------------------------------------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.process-step { position: relative; padding: 0 28px 0 0; }

.process-step::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 62px;
    right: 6px;
    height: 1px;
    background: var(--border);
}

.process-step:last-child::after { display: none; }

.process-num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}

.process-step.is-active .process-num,
.process-step:hover .process-num {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.process-step h3 { font-size: 19px; margin-bottom: 8px; }

.process-step p {
    font-size: 15px;
    color: var(--muted);
    margin: 0;
    padding-right: 12px;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   9. PAKET / COZUM KARTLARI
   -------------------------------------------------------------------------- */
.package-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 30px 28px;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.package-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}


.package-card.is-featured {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.package-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.package-card h3 { font-size: 20px; margin: 0; }

.package-card > p {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 22px;
}

.package-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.package-price strong {
    display: block;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.package-price span { font-size: 13.5px; font-weight: 500; color: var(--muted); }

.package-features {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 28px;
}

.package-features li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    color: var(--text);
    line-height: 1.55;
}

.package-features i {
    color: var(--primary);
    font-size: 15px;
    margin-top: 4px;
    flex-shrink: 0;
}

.package-card .btn { margin-top: auto; width: 100%; }

/* --------------------------------------------------------------------------
   10. MUSTERI YORUMLARI
   -------------------------------------------------------------------------- */
/* Kart ailesi: hizmet, yorum ve paket kartlari ayni yaricap, ayni durgun
   golge ve ayni kalkma davranisini paylasir. */
.testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 30px 28px;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.testimonial-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.testimonial-quote {
    font-size: 20px;
    color: var(--border-strong);
    line-height: 1;
    margin-bottom: 16px;
}

.testimonial-card blockquote {
    margin: 0 0 26px;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--text);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.testimonial-author .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-author .name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
}

.testimonial-author .role { font-size: 13.5px; color: var(--muted); }

.testimonial-service {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Slider (mobil) */
.slider-controls {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    justify-content: center;
}

.slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--dark);
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s var(--ease);
}

.slider-btn:hover { border-color: var(--dark); background: var(--dark); color: #fff; }
.slider-btn:disabled { opacity: .35; cursor: not-allowed; }
.slider-btn:disabled:hover { background: #fff; color: var(--dark); border-color: var(--border); }

.slider-track {
    display: flex;
    gap: 24px;
    transition: transform .45s var(--ease);
}

.slider-viewport { overflow: hidden; }

.slider-item { display: flex; }
.slider-item > * { width: 100%; }

/* --------------------------------------------------------------------------
   11. BLOG KARTI
   -------------------------------------------------------------------------- */
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.blog-card:hover { color: inherit; }

.blog-thumb {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    background: var(--bg-soft-2);
}

.blog-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .55s var(--ease);
}

.blog-card:hover .blog-thumb img { transform: scale(1.04); }

.blog-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    font-size: 13px;
    color: var(--muted);
}

.blog-info .sep { color: var(--border-strong); }

.blog-card h3 {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 10px;
    transition: color .2s var(--ease);
}

.blog-card:hover h3 { color: var(--primary); }

.blog-card p {
    font-size: 15.5px;
    color: var(--muted);
    margin-bottom: 16px;
}

.blog-card .link-arrow { margin-top: auto; }

/* Blog detay icerigi */
.article-body { font-size: 17.5px; line-height: 1.85; }

.article-body h2 { font-size: 28px; margin: 44px 0 16px; }
.article-body h3 { font-size: 22px; margin: 34px 0 12px; }
.article-body p { margin-bottom: 22px; }

.article-body ul,
.article-body ol {
    margin: 0 0 24px 20px;
    padding-left: 8px;
    display: grid;
    gap: 10px;
}

.article-body li { padding-left: 4px; }

.article-body img { border-radius: var(--radius-md); margin: 12px 0 28px; }

.article-body blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--primary);
    background: var(--bg-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--dark);
    font-weight: 500;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 22px;
}

.article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.article-share span { font-size: 14.5px; font-weight: 600; color: var(--dark); }

.article-share a {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 15px;
}

.article-share a:hover { border-color: var(--primary); color: var(--primary); }

/* Yan sutun */
.sidebar-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 22px;
    margin-bottom: 24px;
    background: #fff;
}

.sidebar-box h3,
.sidebar-box h4 { font-size: 16px; margin-bottom: 18px; line-height: 1.4; }

.sidebar-list { list-style: none; display: grid; gap: 14px; }

.sidebar-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.sidebar-list a:hover { color: var(--primary); }
.sidebar-list .count { color: var(--muted); font-size: 14px; }

.sidebar-list li > span {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

/* Koyu footer icin yazilmis iletisim listesi yan sutunda acik zeminde kullanilir */
.sidebar-box .footer-contact a { color: var(--dark); font-weight: 500; }
.sidebar-box .footer-contact a:hover { color: var(--primary); }
.sidebar-box .footer-contact li { font-size: 15px; }

.sidebar-box blockquote {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

.sidebar-box .case-check li { font-size: 15px; }
.sidebar-box .package-price { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   12. EKIP KARTI
   -------------------------------------------------------------------------- */
.team-card { text-align: left; }

.team-photo {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--bg-soft-2);
}

.team-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter .45s var(--ease), transform .55s var(--ease);
}

.team-card:hover .team-photo img { filter: grayscale(0); transform: scale(1.03); }

.team-card h3 { font-size: 18px; margin-bottom: 4px; }

.team-role { font-size: 14.5px; color: var(--muted); margin-bottom: 12px; }

.team-social { display: flex; gap: 8px; list-style: none; }

.team-social a {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 14px;
}

.team-social a:hover { border-color: var(--primary); color: var(--primary); }

/* --------------------------------------------------------------------------
   13. AKORDIYON (SSS)
   -------------------------------------------------------------------------- */
.faq-accordion .accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    padding: 22px 24px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    color: var(--dark);
    background: #fff;
    box-shadow: none;
    line-height: 1.45;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--primary);
    background: #fff;
    box-shadow: none;
    padding-bottom: 12px;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-accordion .accordion-button::after {
    width: 16px;
    height: 16px;
    background-size: 16px;
    flex-shrink: 0;
    margin-left: 18px;
}

.faq-accordion .accordion-body {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 900px;
}

/* --------------------------------------------------------------------------
   14. FORMLAR
   -------------------------------------------------------------------------- */
.form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 34px 32px;
    box-shadow: var(--shadow-sm);
}

.form-label {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.form-label .req { color: var(--accent); }

.form-control,
.form-select {
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: #fff;
    font-family: var(--font-body);
    font-size: 15.5px;
    color: var(--text);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

textarea.form-control { min-height: 132px; resize: vertical; }

.form-control::placeholder { color: #A2A8B0; }

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 95, 239, .12);
    outline: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #DC4C4C;
    background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 76, 76, .12);
}

.form-error {
    display: none;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: #DC4C4C;
}

.form-error.show { display: block; }

.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: .22em;
    border-color: var(--border-strong);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus { box-shadow: 0 0 0 3px rgba(91, 95, 239, .12); }

.form-check-label { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.form-note { font-size: 13.5px; color: var(--muted); }

/* Iletisim bilgi kartlari */
.contact-info { list-style: none; display: grid; gap: 4px; }

.contact-info li {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.contact-info li:last-child { border-bottom: 0; }

.contact-info .ci-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-info .ci-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.contact-info .ci-value {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

.contact-info a.ci-value:hover { color: var(--primary); }

.map-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-soft-2);
    aspect-ratio: 21 / 9;
}

.map-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   15. CTA BOLUMU
   -------------------------------------------------------------------------- */
.cta-band {
    color: #9BA1A9;
    padding: 0 0 var(--section-y);
    position: relative;
}

/* Koyu panel: hero kartiyla ayni yaricap ve golge ailesi.
   Sayfa boylece ayni bicim diliyle acilip kapanir. */
.cta-band .cta-inner {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--dark);
    box-shadow: var(--shadow-lg);
    padding: 64px 56px;
    margin: 0;
    /* Yigin baglami olmadan asagidaki parilti panel zemininin arkasina duser */
    isolation: isolate;
}

.cta-band .cta-inner::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 480px;
    height: 480px;
    z-index: -1;
    background: radial-gradient(circle, rgba(91, 95, 239, .30) 0%, rgba(91, 95, 239, 0) 65%);
    pointer-events: none;
}


.cta-band h2 {
    color: #fff;
    font-size: clamp(30px, 3.4vw, 44px);
    margin-bottom: 16px;
}

.cta-band p {
    color: #9BA1A9;
    font-size: 17.5px;
    max-width: 520px;
    margin-bottom: 0;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Ince CTA satiri */
.cta-inline {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    padding: 34px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
}

.cta-inline h3 { margin-bottom: 6px; }
.cta-inline p { color: var(--muted); margin: 0; font-size: 16px; }

/* --------------------------------------------------------------------------
   16. YUZEN OGELER
   -------------------------------------------------------------------------- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1FA855;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 10px 26px rgba(31, 168, 85, .32);
    transition: transform .2s var(--ease), background-color .2s var(--ease);
}

.wa-float:hover { background: #178443; color: #fff; transform: translateY(-2px); }

.mobile-cta-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    box-shadow: 0 -4px 20px rgba(21, 23, 26, .06);
}

.mobile-cta-bar .btn { flex: 1; min-height: 48px; font-size: 15px; }

.to-top {
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 1039;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--dark);
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .25s var(--ease);
    box-shadow: var(--shadow-sm);
}

.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

/* --------------------------------------------------------------------------
   17. TOAST BILDIRIMI
   -------------------------------------------------------------------------- */
.toast-stack {
    position: fixed;
    right: 22px;
    top: 96px;
    z-index: 1080;
    display: grid;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 44px);
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 15px 17px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.toast-item.show { opacity: 1; transform: none; }
.toast-item.success { border-left-color: #1FA855; }
.toast-item.error { border-left-color: #DC4C4C; }

.toast-item i { font-size: 18px; margin-top: 1px; }
.toast-item.success i { color: #1FA855; }
.toast-item.error i { color: #DC4C4C; }

.toast-item strong {
    display: block;
    font-size: 15px;
    color: var(--dark);
    margin-bottom: 2px;
}

.toast-item p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }

/* --------------------------------------------------------------------------
   18. VAKA CALISMASI (proje detay)
   -------------------------------------------------------------------------- */
.case-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.case-fact { padding: 24px 26px; border-right: 1px solid var(--border); }
.case-fact:last-child { border-right: 0; }
.case-fact:first-child { padding-left: 0; }

.case-fact .cf-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.case-fact .cf-value { font-size: 17px; font-weight: 600; color: var(--dark); }

.case-block { margin-bottom: 56px; }
.case-block h2 { font-size: 30px; margin-bottom: 16px; }
.case-block p { font-size: 17px; line-height: 1.8; color: var(--muted); }

.case-check { list-style: none; display: grid; gap: 12px; margin-top: 20px; }

.case-check li {
    display: flex;
    gap: 12px;
    font-size: 16.5px;
    color: var(--text);
    line-height: 1.6;
}

.case-check i { color: var(--primary); font-size: 16px; margin-top: 5px; flex-shrink: 0; }

.result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.result-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    background: #fff;
}

.result-item .rv {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.04em;
    line-height: 1.15;
    margin-bottom: 5px;
}

.result-item .rl { font-size: 15px; color: var(--muted); }

/* --------------------------------------------------------------------------
   19. KARIYER
   -------------------------------------------------------------------------- */
.job-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    margin-bottom: 14px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.job-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

.job-item h3 { font-size: 20px; margin-bottom: 8px; }

.job-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

.job-tags li {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 5px 11px;
}

/* --------------------------------------------------------------------------
   20. 404
   -------------------------------------------------------------------------- */
.error-page {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
}

.error-code {
    font-size: clamp(88px, 14vw, 148px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--dark);
    margin-bottom: 18px;
}

.error-code span { color: var(--primary); }

/* --------------------------------------------------------------------------
   21. SAYFALAMA
   -------------------------------------------------------------------------- */
.pagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 56px;
}

.page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s var(--ease);
}

.page-btn:hover { border-color: var(--dark); color: var(--dark); }

.page-btn.active {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   22. DINAMIK ICERIK YARDIMCILARI
   (backend entegrasyonu ile eklenen durumlar)
   -------------------------------------------------------------------------- */

/* Oturum bildirimleri */
.flash-region { padding: 20px 0 0; }

.flash-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 15px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
}

.flash-message i { font-size: 18px; margin-top: 1px; }
.flash-success { border-left-color: #1FA855; }
.flash-success i { color: #1FA855; }
.flash-error { border-left-color: #DC4C4C; }
.flash-error i { color: #DC4C4C; }
.flash-warning { border-left-color: #C98A18; }
.flash-warning i { color: #C98A18; }
.flash-info i { color: var(--primary); }

/* Gorsel yerine gecen kutu (icerik bos oldugunda) */
.thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg-soft-2);
    color: var(--border-strong);
    font-size: 32px;
    border-radius: var(--radius-md);
}

.thumb-placeholder.ratio-4x3 { aspect-ratio: 4 / 3; }
.thumb-placeholder.ratio-3x4 { aspect-ratio: 3 / 4; }

/* Bos liste durumu */
.empty-state {
    padding: 56px 24px;
    text-align: center;
    color: var(--muted);
    background: var(--bg-soft);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    font-size: 16px;
    margin: 0;
}

/* Satir ici arama formu */
.search-inline { display: flex; gap: 8px; }
.search-inline .form-control { flex: 1; }
.search-inline .btn { flex-shrink: 0; padding-left: 18px; padding-right: 18px; }
.search-page { max-width: 620px; }

/* Bot korumasi alani (ekranda gorunmez, ekran okuyucudan gizli) */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Fotografsiz yorumlarda bas harf */
.avatar-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Panelden yuklenen logo */
.brand-logo { height: 34px; width: auto; display: block; }
.site-footer .brand-logo { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   Header logosu — saydam ve beyaz zemin icin iki ayri gorsel
   Hero'nun uzerinde header saydamdir ve arkasinda koyu bir fotograf durur;
   orada renkli logo okunmaz. Bu yuzden saydam durumda koyu zemin (beyaz)
   logosu, sayfa kaydirilip header beyaza donunce renkli logo gosterilir.
   -------------------------------------------------------------------------- */
.site-header .brand-logo {
    transition: opacity .25s var(--ease, ease);
}

/* Varsayilan (beyaz header): renkli logo gorunur, beyaz logo gizli */
.site-header .brand-logo--over { display: none; }

/* Hero uzeri saydam durum: beyaz logo gorunur, renkli logo gizli */
.site-header--over:not(.is-scrolled) .brand-logo--solid { display: none; }
.site-header--over:not(.is-scrolled) .brand-logo--over  { display: block; }

/* Panelde ayri bir beyaz logo yuklenmemisse renkli logo beyaza cevrilir */
.site-header .brand-logo--over.is-inverted { filter: brightness(0) invert(1); }

/* Gorsel logolu musteri satiri */
.client-logo.has-image { opacity: .65; filter: grayscale(100%); }
.client-logo.has-image:hover { opacity: 1; filter: grayscale(0); }
.client-logo.has-image img { max-height: 34px; width: auto; }

/* Sayfalama araligi */
.page-gap { color: var(--muted); padding: 0 4px; }

/* Hakkimizda sayfasindaki yapisan gorsel */
@media (min-width: 992px) {
    .sticky-media { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Harita gomulusu */
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Yan sutunda duz metin ogeleri */
.sidebar-list li > span strong { color: var(--dark); }

/* Kart basliklari sayfa baglamına gore h2 veya h3 olabilir; gorunum ayni kalir */
.service-card h2 { font-size: 20px; margin-bottom: 10px; }
.project-card h2 { font-size: 22px; margin-bottom: 8px; transition: color .2s var(--ease); }
.project-card:hover h2 { color: var(--primary); }
.blog-card h2 { font-size: 20px; line-height: 1.35; margin-bottom: 10px; transition: color .2s var(--ease); }
.blog-card:hover h2 { color: var(--primary); }
.team-card h2 { font-size: 18px; margin-bottom: 4px; }