.svc-page{background:#030B12;color:#F7FBFD;min-height:100vh;padding-top:96px}.svc-page .container{width:min(1180px,calc(100% - 40px));margin:auto}.svc-hero{position:relative;padding:16px 0 30px;overflow:hidden;background:radial-gradient(circle at 75% 25%,rgba(33,127,182,.23),transparent 32%),radial-gradient(circle at 10% 20%,rgba(14,167,233,.08),transparent 28%)}.svc-breadcrumb{display:flex;gap:10px;align-items:center;color:#53AFD7;font-size:12px;margin-bottom:20px}.svc-breadcrumb a{color:#49BFF2}.svc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center;min-height:330px}.svc-pill,.svc-label{display:inline-block;color:#69CEF9;font-size:11px;font-weight:800;letter-spacing:1.5px}.svc-pill{border:1px solid rgba(93,202,248,.45);border-radius:999px;padding:8px 12px;background:rgba(31,113,161,.16)}.svc-hero h1{font-size:clamp(36px,4.2vw,56px);line-height:1.02;letter-spacing:-1.8px;margin:14px 0;background:linear-gradient(100deg,#fff 0 60%,#6ECFF9 85%);-webkit-background-clip:text;color:transparent}.svc-hero-copy>p{max-width:650px;color:#A3D5EA;font-size:15px;line-height:1.65}.svc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.svc-actions.center{justify-content:center}.svc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:0 14px;border-radius:10px;border:1px solid #268DC9;font-weight:750;font-size:13px}.svc-btn.primary{border:0;background:linear-gradient(135deg,#0284C7,#56C7F8);box-shadow:0 12px 35px rgba(77,197,248,.28)}.svc-btn.ghost{background:rgba(5,16,25,.65)}.svc-visual{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}.svc-visual img{position:relative;z-index:2;max-width:100%;max-height:360px;object-fit:contain;filter:drop-shadow(0 28px 35px rgba(0,0,0,.5))}.svc-glow{position:absolute;width:70%;height:70%;background:#3DBFF7;filter:blur(100px);opacity:.24}.svc-device-placeholder{position:relative;z-index:2;width:85%;aspect-ratio:16/10;border:1px solid #154C6C;border-radius:22px;background:linear-gradient(145deg,#0C2130,#050C12);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 35px 70px #000}.svc-device-placeholder i{font-size:72px;color:#5FCAF8}.svc-device-placeholder strong{font-size:22px;margin-top:18px}.svc-device-placeholder small{color:#3BA4D1;margin-top:7px}.svc-topline{display:flex;align-items:stretch;gap:12px;margin-top:14px}.svc-topline>div{flex:1;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(37,138,197,.22);border-radius:13px;background:rgba(8,22,34,.7)}.svc-topline i{font-size:20px;color:#63CBF8}.svc-topline span{display:flex;flex-direction:column}.svc-topline b{font-size:13px}.svc-topline small{color:#52AFD7;font-size:10px;margin-top:4px}.svc-topline .svc-stat{display:block;text-align:center}.svc-topline .svc-stat b{font-size:20px;display:block}.svc-section{padding:28px 0}.svc-about{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid #143146;border-radius:16px;background:linear-gradient(120deg,#071825,#050F17);overflow:hidden}.svc-about>div,.svc-about>ul{padding:26px}.svc-about>ul{border-left:1px solid #143146;list-style:none;margin:0;display:flex;flex-direction:column;justify-content:center;gap:11px}.svc-about h2,.svc-heading h2{font-size:clamp(24px,2.4vw,32px);margin:8px 0 10px}.svc-about p,.svc-heading p,.svc-cards p,.svc-steps p,.svc-cta p{color:#7DC2E0;line-height:1.65}.svc-about li{display:flex;gap:10px;align-items:center;color:#CFE9F4}.svc-about li i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#54C7F8;font-size:9px}.svc-heading{text-align:center;margin-bottom:20px}.svc-heading p{margin:0}.svc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.svc-cards article{padding:20px 18px;min-height:155px;border:1px solid #16374E;border-radius:15px;background:linear-gradient(145deg,#0A1A27,#050E16);transition:.25s}.svc-cards article:hover{transform:translateY(-4px);border-color:#268DC9}.svc-cards article>i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(79,197,248,.14);color:#6DCFF9;font-size:18px}.svc-cards h3{font-size:16px;margin:13px 0 6px}.svc-cards p{font-size:13px;margin:0}.svc-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}.svc-steps:before{content:"";position:absolute;left:12%;right:12%;top:23px;height:1px;background:linear-gradient(90deg,transparent,#53BBE8,#53BBE8,transparent)}.svc-steps article{text-align:center;position:relative;padding:0 14px}.svc-steps article>span{position:relative;z-index:2;display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#39B8EF);box-shadow:0 0 24px rgba(78,197,248,.35);font-weight:800}.svc-steps h3{font-size:15px;margin:7px 0}.svc-steps p{font-size:12px}.svc-last{padding-bottom:48px}.svc-cta{text-align:center;padding:34px 22px;border:1px solid #154E6F;border-radius:18px;background:radial-gradient(circle at 10% 100%,rgba(29,181,246,.32),transparent 30%),radial-gradient(circle at 90% 100%,rgba(38,184,246,.38),transparent 30%),linear-gradient(135deg,#081C2C,#07111A);overflow:hidden}.svc-cta h2{font-size:clamp(25px,2.7vw,34px);margin:10px 0}.svc-cta p{max-width:680px;margin:0 auto}.svc-cta .svc-actions{margin-top:20px}@media(max-width:900px){.svc-page{padding-top:84px}.svc-hero-grid,.svc-about{grid-template-columns:1fr}.svc-visual{min-height:245px}.svc-about>ul{border-left:0;border-top:1px solid #143146}.svc-cards{grid-template-columns:repeat(2,1fr)}.svc-topline{display:grid;grid-template-columns:repeat(2,1fr)}.svc-steps{grid-template-columns:repeat(2,1fr);gap:24px}.svc-steps:before{display:none}}@media(max-width:580px){.svc-page .container{width:min(100% - 24px,1180px)}.svc-hero{padding-top:12px}.svc-hero-grid{min-height:0;gap:15px}.svc-hero h1{font-size:34px;letter-spacing:-1.2px}.svc-visual{min-height:200px}.svc-topline,.svc-cards,.svc-steps{grid-template-columns:1fr}.svc-topline>div{min-height:72px}.svc-about>div,.svc-about>ul{padding:20px}.svc-section{padding:22px 0}.svc-actions .svc-btn{flex:1}.svc-cta{padding:28px 16px}}
/* V2 compact density refinements */
.svc-hero-copy{max-width:620px}
.svc-hero-copy>p{margin:0}
.svc-heading h2{letter-spacing:-.7px}
.svc-about h2{letter-spacing:-.6px}
.svc-about p{font-size:14px;margin-bottom:0}
.svc-about li{font-size:13px}
.svc-steps{margin-top:4px}
.svc-cta .svc-label{margin-bottom:2px}
@media(min-width:901px){.svc-section+.svc-section{padding-top:24px}.svc-cards article{min-height:150px}.svc-hero-grid{padding-bottom:4px}}
@media(max-width:900px){.svc-hero h1{font-size:clamp(34px,7vw,46px)}.svc-hero-copy>p{font-size:14px}.svc-cards article{min-height:145px}}

/* V3 - %35 daha kompakt dikey ritim */
.svc-hero{padding:8px 0 12px}
.svc-breadcrumb{margin-bottom:10px}
.svc-hero-grid{min-height:245px;gap:26px}
.svc-hero h1{margin:10px 0;font-size:clamp(34px,3.8vw,50px)}
.svc-actions{margin-top:10px}
.svc-visual{min-height:230px}
.svc-visual img{max-height:300px}
.svc-device-placeholder{max-height:250px}
.svc-device-placeholder i{font-size:56px}
.svc-device-placeholder strong{font-size:19px;margin-top:12px}
.svc-topline{margin-top:8px;gap:9px}
.svc-topline>div{padding:9px 11px}
.svc-section{padding:12px 0}
.svc-section+.svc-section{padding-top:12px}
.svc-about>div,.svc-about>ul{padding:19px 21px}
.svc-about>ul{gap:8px}
.svc-about h2,.svc-heading h2{margin:5px 0 7px}
.svc-heading{margin-bottom:11px}
.svc-cards{gap:11px}
.svc-cards article{padding:15px 15px;min-height:132px}
.svc-cards h3{margin:9px 0 4px}
.svc-cards article>i{width:38px;height:38px}
.svc-steps{margin-top:0}
.svc-steps article{padding:0 10px}
.svc-steps article>span{width:38px;height:38px;margin-bottom:7px}
.svc-steps:before{top:19px}
.svc-steps h3{margin:5px 0 3px}
.svc-steps p{margin:0}
.svc-last{padding:12px 0 18px}
.svc-cta{padding:24px 20px;position:relative;background-image:linear-gradient(rgba(5,18,28,.70),rgba(5,15,24,.82)),var(--svc-cta-bg,none),radial-gradient(circle at 10% 100%,rgba(29,181,246,.32),transparent 30%),radial-gradient(circle at 90% 100%,rgba(38,184,246,.38),transparent 30%),linear-gradient(135deg,#081C2C,#07111A);background-size:cover;background-position:center}
.svc-cta h2{margin:6px 0}
.svc-cta .svc-actions{margin-top:13px}
@media(max-width:900px){.svc-hero-grid{min-height:0;gap:18px}.svc-visual{min-height:205px}.svc-section,.svc-section+.svc-section{padding:11px 0}.svc-steps{gap:15px}}
@media(max-width:580px){.svc-page{padding-top:px}.svc-breadcrumb{margin-bottom:8px}.svc-hero{padding:7px 0 10px}.svc-hero h1{font-size:32px;margin:8px 0}.svc-visual{min-height:170px}.svc-topline>div{min-height:58px}.svc-section,.svc-section+.svc-section{padding:9px 0}.svc-about>div,.svc-about>ul{padding:16px}.svc-heading{margin-bottom:9px}.svc-cards article{min-height:0;padding:14px}.svc-cta{padding:20px 14px}}

/* =========================================================
   V5 - HIZMET DETAY SAYFASI ULTRA KOMPAKT
   Ana bölümler arasında 1px boşluk
   ========================================================= */

/* Ana tema section yüksekliklerini tamamen etkisizleştir */
.svc-page section,
.svc-page .svc-section,
.svc-page .svc-hero {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


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

.svc-page .svc-hero {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}


/* Breadcrumb */
.svc-page .svc-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}


/* Hero Grid */
.svc-page .svc-hero-grid {
    min-height: 0 !important;
    height: auto !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    gap: 20px !important;
}


/* Hero başlık */
.svc-page .svc-hero h1 {
    margin-top: 7px !important;
    margin-bottom: 7px !important;
}


/* Hero açıklaması */
.svc-page .svc-hero-copy > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Hero butonları */
.svc-page .svc-actions {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}


/* Sağ görsel */
.svc-page .svc-visual {
    min-height: 200px !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Hero altındaki özellik / istatistik satırı */
.svc-page .svc-topline {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   TÜM ANA BÖLÜMLER
   ========================================================= */

.svc-page .svc-section {
    min-height: 0 !important;
    height: auto !important;

    padding-top: 1px !important;
    padding-bottom: 1px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Arka arkaya gelen section */
.svc-page .svc-section + .svc-section {
    padding-top: 1px !important;

    margin-top: 0 !important;
}


/* =========================================================
   HAKKINDA
   ========================================================= */

.svc-page .svc-about {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Hakkında kartının iç boşluğunu koru */
.svc-page .svc-about > div,
.svc-page .svc-about > ul {
    padding: 18px 20px !important;
}


/* Hakkında başlığı */
.svc-page .svc-about h2 {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}


/* Hakkında açıklaması */
.svc-page .svc-about p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Sağ taraftaki maddeler */
.svc-page .svc-about > ul {
    gap: 7px !important;
}


/* =========================================================
   BÖLÜM BAŞLIKLARI
   ========================================================= */

.svc-page .svc-heading {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}


/* Başlık */
.svc-page .svc-heading h2 {
    margin-top: 3px !important;
    margin-bottom: 4px !important;
}


/* Başlık açıklaması */
.svc-page .svc-heading p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   ÖZELLİK KARTLARI
   ========================================================= */

.svc-page .svc-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    gap: 10px !important;
}


/* Kartların iç boşluğu */
.svc-page .svc-cards article {
    padding: 14px !important;
    min-height: 125px !important;
}


/* Kart ikonları */
.svc-page .svc-cards article > i {
    width: 38px !important;
    height: 38px !important;
}


/* Kart başlığı */
.svc-page .svc-cards h3 {
    margin-top: 8px !important;
    margin-bottom: 3px !important;
}


/* Kart açıklaması */
.svc-page .svc-cards p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   4 ADIM SÜREÇ
   ========================================================= */

.svc-page .svc-steps {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Her adım */
.svc-page .svc-steps article {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Numara */
.svc-page .svc-steps article > span {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}


/* Adım başlığı */
.svc-page .svc-steps h3 {
    margin-top: 3px !important;
    margin-bottom: 2px !important;
}


/* Adım açıklaması */
.svc-page .svc-steps p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   SON BÖLÜM / CTA
   ========================================================= */

.svc-page .svc-last {
    padding-top: 1px !important;
    padding-bottom: 1px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Özel hizmet CTA */
.svc-page .svc-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 22px 20px !important;
}


/* CTA başlık */
.svc-page .svc-cta h2 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}


/* CTA açıklama */
.svc-page .svc-cta p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* CTA butonları */
.svc-page .svc-cta .svc-actions {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   MASAÜSTÜ
   ========================================================= */

@media (min-width: 901px) {

    .svc-page .svc-hero-grid {
        grid-template-columns: 1.02fr .98fr !important;
        gap: 20px !important;
    }

    .svc-page .svc-visual {
        min-height: 200px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .svc-page .svc-section,
    .svc-page .svc-section + .svc-section {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .svc-page .svc-hero-grid {
        gap: 12px !important;
    }

    .svc-page .svc-visual {
        min-height: 180px !important;
    }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 580px) {

    .svc-page .svc-hero {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .svc-page .svc-section,
    .svc-page .svc-section + .svc-section {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .svc-page .svc-last {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .svc-page .svc-hero-grid {
        gap: 8px !important;
    }

    .svc-page .svc-visual {
        min-height: 160px !important;
    }

    .svc-page .svc-heading {
        margin-bottom: 5px !important;
    }

    .svc-page .svc-cards {
        gap: 7px !important;
    }

    .svc-page .svc-cards article {
        min-height: 0 !important;
        padding: 13px !important;
    }

    .svc-page .svc-about > div,
    .svc-page .svc-about > ul {
        padding: 15px !important;
    }

    .svc-page .svc-cta {
        padding: 18px 14px !important;
    }
}
/* ==========================================================
   HIZMET DETAY - BOLUM ARASI BOSLUKLARI KALDIR
   BU KOD CSS DOSYASININ EN SONUNDA OLMALI
   ========================================================== */

/* Sayfanın ana bölümleri */
.svc-page section,
.svc-page .svc-section,
.svc-page .svc-last {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* HERO */
.svc-page .svc-hero {
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.svc-page .svc-hero-grid {
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 20px !important;
}


/* Hero altındaki 3 özellik */
.svc-page .svc-topline {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   HAKKIMDA
   ========================================================== */

.svc-page .svc-about {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   BOLUM BASLIKLARI
   ========================================================== */

.svc-page .svc-heading {
    margin-top: 0 !important;
    margin-bottom: 6px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.svc-page .svc-heading h2 {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.svc-page .svc-heading p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   NEDEN TERCIH ETMELISINIZ KARTLARI
   ========================================================== */

.svc-page .svc-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    gap: 10px !important;
}

.svc-page .svc-cards article {
    margin: 0 !important;
}


/* ==========================================================
   4 ADIMDA WEB SITENIZ HAZIR
   ========================================================== */

.svc-page .svc-steps {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.svc-page .svc-steps article {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ==========================================================
   ARKA ARKAYA GELEN BOLUMLER
   SADECE 1PX ARA
   ========================================================== */

.svc-page .svc-section + .svc-section {
    margin-top: 1px !important;
    padding-top: 0 !important;
}


/* Hakkında -> Özellikler */
.svc-page .svc-about + .svc-section {
    margin-top: 1px !important;
}


/* Kartlar -> sonraki bölüm */
.svc-page .svc-cards + .svc-section {
    margin-top: 1px !important;
}


/* ==========================================================
   CTA
   ========================================================== */

.svc-page .svc-last {
    margin-top: 1px !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.svc-page .svc-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   GLOBAL TEMA BOSLUK EZME
   ========================================================== */

body .svc-page section {
    scroll-margin-top: 0 !important;
}

.svc-page section::before,
.svc-page section::after {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 901px) {

    .svc-page .svc-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    .svc-page .svc-section + .svc-section {
        margin-top: 1px !important;
    }

    .svc-page .svc-visual {
        min-height: 190px !important;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .svc-page .svc-section,
    .svc-page .svc-section + .svc-section {
        padding: 0 !important;
        margin-top: 1px !important;
        margin-bottom: 0 !important;
    }

    .svc-page .svc-hero {
        padding: 0 !important;
    }
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 580px) {

    .svc-page .svc-section,
    .svc-page .svc-section + .svc-section,
    .svc-page .svc-last {
        padding: 0 !important;
        margin-top: 1px !important;
        margin-bottom: 0 !important;
    }

    .svc-page .svc-hero {
        padding: 0 !important;
        margin: 0 !important;
    }

    .svc-page .svc-heading {
        margin: 0 0 5px !important;
    }
}
/* =========================================================
   HIZMET DETAY - PREMIUM HERO CTA BUTONLARI
   ========================================================= */

.svc-page .svc-actions {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

/* İki butonun ortak yapısı */
.svc-page .svc-actions .btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    padding: 0 22px !important;

    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    overflow: hidden !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease !important;
}


<div class="svc-actions">

    <a href="/iletisim/"
       class="btn btn-primary">

        <i class="fas fa-comments"></i>

        <span>İletişime Geç</span>

        <i class="fas fa-arrow-right"></i>
    </a>

    <a href="/hizmetler/"
       class="btn btn-ghost">

        <i class="fas fa-layer-group"></i>

        <span>Hizmetlerimizi İncele</span>

        <i class="fas fa-arrow-right"></i>
    </a>

</div>

/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 580px) {

    .svc-page .svc-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .svc-page .svc-actions .btn {
        width: 100% !important;
        min-height: 46px !important;

        padding: 0 12px !important;

        border-radius: 10px !important;

        font-size: 12px !important;
        white-space: normal !important;
        text-align: center !important;
    }
}
/* =========================================================
   MURAT KARAN
   PREMIUM SERVICE HERO BUTTONS
   ========================================================= */

.svc-page .svc-hero-actions,
.svc-page .svc-cta .svc-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}


/* BUTON ORTAK */

.svc-page .svc-btn {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    min-height: 50px !important;

    padding: 0 18px !important;

    border-radius: 12px !important;

    font-size: 13px !important;
    font-weight: 750 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    isolation: isolate !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease !important;
}


/* =========================================================
   İLETİŞİME GEÇ
   ========================================================= */

.svc-page .svc-btn.primary {

    color: #fff !important;

    border:
        1px solid
        rgba(119,210,249, .70) !important;

    background:
        linear-gradient(
            135deg,
            #44C1F7 0%,
            #59C8F8 48%,
            #4EC5F8 100%
        ) !important;

    box-shadow:
        0 10px 30px rgba(77,197,248, .28),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}


/* Parlak geçiş */

.svc-page .svc-btn.primary::before {

    content: "" !important;

    position: absolute !important;

    top: -80% !important;
    left: -45% !important;

    width: 35px !important;
    height: 260% !important;

    background:
        rgba(255,255,255,.18) !important;

    transform:
        rotate(24deg) !important;

    z-index: -1 !important;

    transition:
        left .5s ease !important;
}


.svc-page .svc-btn.primary:hover {

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 14px 36px rgba(79,197,248, .42),
        0 0 22px rgba(97,203,248, .20),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}


.svc-page .svc-btn.primary:hover::before {

    left: 120% !important;
}


/* =========================================================
   HİZMETLERİMİZİ İNCELE
   ========================================================= */

.svc-page .svc-btn.ghost {

    color: #EFFAFE !important;

    border:
        1px solid
        rgba(98,203,248, .65) !important;

    background:
        linear-gradient(
            135deg,
            rgba(13,31,44,.96),
            rgba(7,18,27,.98)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 25px rgba(0,0,0,.22) !important;
}


.svc-page .svc-btn.ghost:hover {

    color: #fff !important;

    transform:
        translateY(-2px) !important;

    border-color:
        rgba(118,210,249, .95) !important;

    background:
        linear-gradient(
            135deg,
            rgba(35,128,182,.28),
            rgba(10,26,39,.98)
        ) !important;

    box-shadow:
        0 12px 30px rgba(61,165,210,.20),
        0 0 18px rgba(97,203,248,.10),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


/* =========================================================
   SOL İKON
   ========================================================= */

.svc-page .svc-btn-icon {

    display: grid !important;

    place-items: center !important;

    width: 28px !important;
    height: 28px !important;

    flex: 0 0 28px !important;

    border-radius: 8px !important;

    background:
        rgba(255,255,255,.10) !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;
}


.svc-page .svc-btn-icon i {

    margin: 0 !important;

    font-size: 12px !important;
}


/* =========================================================
   BUTON YAZISI
   ========================================================= */

.svc-page .svc-btn-text {

    position: relative !important;

    z-index: 2 !important;
}


/* =========================================================
   SAĞ OK
   ========================================================= */

.svc-page .svc-btn-arrow {

    display: grid !important;

    place-items: center !important;

    margin-left: 2px !important;

    transition:
        transform .25s ease !important;
}


.svc-page .svc-btn-arrow i {

    margin: 0 !important;

    font-size: 11px !important;
}


.svc-page .svc-btn:hover .svc-btn-arrow {

    transform:
        translateX(4px) !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

.svc-page .svc-btn:focus-visible {

    outline:
        2px solid #81D6FA !important;

    outline-offset:
        3px !important;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 580px) {

    .svc-page .svc-hero-actions,
    .svc-page .svc-cta .svc-actions {

        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        gap: 8px !important;

        width: 100% !important;
    }


    .svc-page .svc-btn {

        width: 100% !important;

        min-height: 46px !important;

        padding:
            0 10px !important;

        gap: 6px !important;

        border-radius:
            10px !important;

        font-size:
            11.5px !important;
    }


    .svc-page .svc-btn-icon {

        width: 25px !important;
        height: 25px !important;

        flex-basis:
            25px !important;
    }


    .svc-page .svc-btn-arrow {

        display: none !important;
    }

}


/* Çok küçük telefon */

@media (max-width: 390px) {

    .svc-page .svc-hero-actions,
    .svc-page .svc-cta .svc-actions {

        grid-template-columns:
            1fr !important;
    }


    .svc-page .svc-btn {

        min-height:
            47px !important;

        font-size:
            12px !important;
    }

}
/* ==========================================================
   MURAT KARAN - SERVICE HERO FINAL
   REFERANS TASARIM BUTON + BREADCRUMB
   ========================================================== */


/* ==========================================================
   BREADCRUMB
   Ana Sayfa > Hizmetler > Kurumsal Web Sitesi
   ========================================================== */

.svc-page .svc-breadcrumb {
    width: fit-content !important;
    max-width: 100% !important;

    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 9px !important;

    margin: 0 0 20px 0 !important;
    padding: 9px 13px !important;

    border-radius: 11px !important;

    border: 1px solid rgba(74,171,212, .28) !important;

    background:
        linear-gradient(
            135deg,
            rgba(11,32,47, .92),
            rgba(7,20,31, .94)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 24px rgba(0,0,0,.16) !important;

    font-size: 11px !important;
    line-height: 1 !important;
}


/* Ana Sayfa + Hizmetler */

.svc-page .svc-breadcrumb a {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 6px !important;

    color: #93DBFA !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        color .2s ease,
        text-shadow .2s ease !important;
}


.svc-page .svc-breadcrumb a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 12px rgba(89,200,248,.55) !important;
}


/* Ana Sayfa ikon */

.svc-page .svc-breadcrumb a:first-child::before {
    content: "\f015" !important;

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    color: #81D6FA !important;

    font-size: 10px !important;
}


/* Hizmetler ikon */

.svc-page .svc-breadcrumb a:nth-of-type(2)::before {
    content: "\f5fd" !important;

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    color: #7BD3F9 !important;

    font-size: 10px !important;
}


/* > işaretleri */

.svc-page .svc-breadcrumb > span {
    color: rgba(139,201,228,.45) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    margin: 0 1px !important;
}


/* Son aktif sayfa */

.svc-page .svc-breadcrumb > b {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;

    color: #5BB3D8 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


/* Aktif sayfa noktası */

.svc-page .svc-breadcrumb > b::before {
    content: "" !important;

    width: 6px !important;
    height: 6px !important;

    margin-right: 7px !important;

    border-radius: 50% !important;

    background: #2790CC !important;

    box-shadow:
        0 0 8px rgba(39,144,204,.35) !important;
}



/* ==========================================================
   HERO BUTON ALANI
   ========================================================== */

.svc-page .svc-hero .svc-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

    width: auto !important;

    margin-top: 18px !important;
}



/* ==========================================================
   ORTAK BUTON
   ========================================================== */

.svc-page .svc-hero .svc-actions .svc-btn {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    width: auto !important;

    height: 54px !important;
    min-height: 54px !important;

    padding: 0 15px !important;

    border-radius: 11px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    overflow: hidden !important;

    transform: translateY(0) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease !important;
}



/* ==========================================================
   1 - İLETİŞİME GEÇ
   ========================================================== */

.svc-page .svc-hero .svc-actions .svc-btn.primary {
    min-width: 190px !important;

    color: #fff !important;

    border:
        1px solid
        rgba(109,207,249, .95) !important;

    background:
        linear-gradient(
            115deg,
            #44C1F7 0%,
            #5AC9F8 48%,
            #51C6F8 100%
        ) !important;

    box-shadow:
        0 8px 25px rgba(78,197,248, .30),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}


/* Gradient parlama */

.svc-page .svc-hero .svc-actions .svc-btn.primary::before {
    content: "" !important;

    position: absolute !important;

    top: -50% !important;
    left: -50px !important;

    width: 34px !important;
    height: 200% !important;

    transform: rotate(24deg) !important;

    background:
        rgba(255,255,255,.13) !important;

    transition:
        left .5s ease !important;

    pointer-events: none !important;
}


.svc-page .svc-hero .svc-actions .svc-btn.primary:hover::before {
    left: 120% !important;
}



/* ==========================================================
   2 - HİZMETLERİMİZİ İNCELE
   ========================================================== */

.svc-page .svc-hero .svc-actions .svc-btn.ghost {
    min-width: 222px !important;

    color: #ffffff !important;

    border:
        1px solid
        rgba(97,203,248, .82) !important;

    background:
        linear-gradient(
            120deg,
            rgba(11,25,37,.97),
            rgba(7,17,25,.99)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 8px 22px rgba(0,0,0,.20) !important;
}



/* ==========================================================
   SOL İKON KUTULARI
   ========================================================== */

.svc-page .svc-hero .svc-btn .svc-btn-icon {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    flex: 0 0 34px !important;

    margin: 0 !important;

    border-radius: 8px !important;

    border:
        1px solid
        rgba(255,255,255,.15) !important;

    background:
        rgba(255,255,255,.11) !important;
}


.svc-page .svc-hero .svc-btn.primary .svc-btn-icon {
    background:
        rgba(255,255,255,.13) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}


.svc-page .svc-hero .svc-btn.ghost .svc-btn-icon {
    color: #7BD4FA !important;

    background:
        rgba(76,196,248,.11) !important;

    border-color:
        rgba(106,206,249,.35) !important;
}


.svc-page .svc-hero .svc-btn .svc-btn-icon i {
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1 !important;
}



/* ==========================================================
   BUTON YAZISI
   ========================================================== */

.svc-page .svc-hero .svc-btn .svc-btn-text {
    display: inline-flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: inherit !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
}



/* ==========================================================
   SAĞ OK
   ========================================================== */

.svc-page .svc-hero .svc-btn .svc-btn-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;

    margin-left: auto !important;

    color: inherit !important;

    transition:
        transform .22s ease !important;
}


.svc-page .svc-hero .svc-btn .svc-btn-arrow i {
    margin: 0 !important;

    font-size: 11px !important;
}



/* ==========================================================
   HOVER
   ========================================================== */

.svc-page .svc-hero .svc-btn:hover {
    transform:
        translateY(-2px) !important;
}


.svc-page .svc-hero .svc-btn.primary:hover {
    box-shadow:
        0 12px 34px rgba(78,197,248,.43),
        0 0 20px rgba(93,202,248,.16),
        inset 0 1px 0 rgba(255,255,255,.23) !important;
}


.svc-page .svc-hero .svc-btn.ghost:hover {
    border-color:
        rgba(124,212,250,1) !important;

    background:
        linear-gradient(
            120deg,
            rgba(28,102,144,.32),
            rgba(8,20,30,.99)
        ) !important;

    box-shadow:
        0 10px 28px rgba(61,165,210,.20),
        inset 0 1px 0 rgba(255,255,255,.07) !important;
}


.svc-page .svc-hero .svc-btn:hover .svc-btn-arrow {
    transform:
        translateX(4px) !important;
}



/* ==========================================================
   MOBİL
   ========================================================== */

@media (max-width: 640px) {

    .svc-page .svc-breadcrumb {
        gap: 6px !important;

        margin-bottom: 15px !important;

        padding: 8px 10px !important;

        border-radius: 9px !important;

        font-size: 9px !important;
    }


    .svc-page .svc-breadcrumb a,
    .svc-page .svc-breadcrumb > b {
        font-size: 9px !important;
    }


    .svc-page .svc-hero .svc-actions {
        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        gap: 8px !important;

        width: 100% !important;

        margin-top: 14px !important;
    }


    .svc-page .svc-hero .svc-actions .svc-btn {
        width: 100% !important;

        min-width: 0 !important;

        height: 48px !important;
        min-height: 48px !important;

        padding:
            0 9px !important;

        gap: 6px !important;

        border-radius:
            9px !important;
    }


    .svc-page .svc-hero .svc-btn .svc-btn-icon {
        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;
        flex-basis: 28px !important;

        border-radius:
            7px !important;
    }


    .svc-page .svc-hero .svc-btn .svc-btn-icon i {
        font-size:
            11px !important;
    }


    .svc-page .svc-hero .svc-btn .svc-btn-text {
        font-size:
            10.5px !important;
    }


    .svc-page .svc-hero .svc-btn .svc-btn-arrow {
        width:
            12px !important;
    }


    .svc-page .svc-hero .svc-btn .svc-btn-arrow i {
        font-size:
            9px !important;
    }

}


/* 360px altı */
@media (max-width: 360px) {

    .svc-page .svc-hero .svc-actions {
        grid-template-columns:
            1fr !important;
    }

}