/* Shared site chrome: search, top bar, header, footer and WhatsApp. */

.container {
        position: relative;
        margin-right: auto;
        margin-left: auto;
        padding-left:15px;
        padding-right:15px;
        z-index: 3;
}


body.header-open,
body.menu-open {
        overflow: hidden;
}



.top {
        background: var(--trapez-ink);
        color: rgba(255, 255, 255, 0.86);
        font-size: 14px;
        line-height: 14px;
}

.top .container {
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
}

.top-left {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
}

.top-left:before {
        content:'';
        display: block;
        width: 7px;
        height: 7px;
        line-height: 7px;
        border-radius: 50%;
        background: #8fc7df;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.top-right {
        display: flex;
        align-items: center;
        gap: 15px;
}

.top-right a + a {
        border-left:1px solid rgba(255, 255, 255, 0.2);
        padding-left:15px;
}



.header {
    position: relative;
    background: var(--trapez-white);
    padding:20px 0px;
    z-index: 99;
}
.header > .container {
    display: grid;
    grid-template-columns: 190px minmax(340px, 1fr) auto auto auto;
    align-items: center;
    gap: 40px;
}
.header .logo { display: inline-flex; align-items: center; width: 175px; }
.header .logo img { display: block; width: 100%; height: auto; }
.header-center {
    position: relative;
    max-width: 650px;
    width: 100%;
    justify-self: center;
}

body.header-open .header-result {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-form { position:relative; }
.header-form .fa-search { position: absolute; left:15px; top: 50%; transform: translateY(-50%); color:var(--trapez-blue); }
.header-form .form-control {  padding:15px 100px 15px 40px;background:#FFF; }

.header-form .btn-primary { position:absolute;top:10px;right:10px;bottom:10px;line-height:1; 
        color: var(--trapez-blue);
        background: var(--trapez-blue-soft);}


.header-result {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 2;
    border: 1px solid var(--trapez-line);
    background: var(--trapez-white);
    box-shadow: var(--trapez-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}


.header-title {
        padding:15px;
    background: var(--trapez-blue-soft);
    color: var(--trapez-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.header-result .header-item {
    display: grid;
    grid-template-columns: 45px 1fr auto;
    align-items: center;
    gap: 15px;
    padding:15px;
    transition: var(--trapez-transition);
}
.header-result .header-item strong, .header-item small { display: block; }
.header-result .header-item small { color: var(--trapez-muted);  }
.header-result .header-item b, .header-result .header-item em { color: var(--trapez-blue); font-weight: bold;}

.header-result .header-item:hover em { padding-right:10px;transition:var(--trapez-transition); }
.header-result .header-item:hover strong { color:var(--trapez-blue); }

.header-result .header-item + .header-item { border-top:1px solid var(--trapez-line); }

.header-call { display: flex; align-items: center; gap: 10px;}
.header-call i {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
                    background: var(--trapez-blue-soft);
                    color: var(--trapez-blue);
}
.header-call small, .header-call strong { display: block; line-height: 1.2; }
.header-call small { color: var(--trapez-muted); }
.header-call strong { margin-top: 3px;}

.header-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 45px;
    padding: 0 15px;
    color: var(--trapez-white);
    background: var(--trapez-red);
    font-weight: bold;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease;
}
.header-quote:hover { background: #c51e23; transform: translateY(-1px); }


.header-button {
        display: none;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border:0;
        background: var(--trapez-blue);
        color: var(--trapez-white);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
}


.menu {  position: relative;background:var(--trapez-white);box-shadow: 0 14px 34px rgba(7, 30, 44, 0.07);border-top: 1px solid var(--trapez-line);border-bottom:1px solid var(--trapez-line);
display:flex;align-items:center;justify-content: center; gap:30px;z-index: 10; }

.menu  a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding:15px 0px;
    position: relative;
    font-weight: bold;
    transition: var(--trapez-transition);
}
.menu  a::before {
        content: "";
        display: inline-block;
        width:4px;
        height: 4px;
        margin-right:34px;  
        background: var(--trapez-blue);
        transition: var(--trapez-transition);
}
.menu  a:hover { color: var(--trapez-blue); }



.overlay {
        position: fixed;
        top: 0;
        left: 0;
        background: var(--trapez-overlay-backdrop);
        width: 100%;
        height: 100%;
        z-index: 5;
}

.alertify {
        --alertify-color: var(--trapez-blue);
        position: fixed;
        top: 24px;
        right: 24px;
        left: auto;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        width: min(380px, calc(100vw - 32px));
        min-height: 62px;
        padding: 12px 16px 12px 12px;
        overflow: hidden;
        border: 1px solid var(--trapez-line);
        border-left: 4px solid var(--alertify-color);
        border-radius: 4px;
        background: var(--trapez-white);
        box-shadow: 0 16px 36px rgba(7, 29, 49, 0.16);
        color: var(--trapez-heading);
        font-weight: 600;
        line-height: 1.4;
        animation: alertifyIn 0.22s ease both;
        z-index: 999999999999;
}

.alertify::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: var(--alertify-color);
        transform-origin: left center;
        animation: alertifyProgress 3.2s linear forwards;
}

.alertify .fa {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        margin: 0;
        border-radius: 50%;
        background: var(--trapez-blue-soft);
        color: var(--alertify-color);
        line-height: 1;
}

.alertify.success {
        --alertify-color: var(--trapez-status-success);
}

.alertify.success .fa {
        background: #eaf7ef;
        color: var(--trapez-status-success);
}

.alertify.error {
        --alertify-color: var(--trapez-status-danger);
}

.alertify.error .fa {
        background: #fdecec;
        color: var(--trapez-status-danger);
}

.alertify.warning {
        --alertify-color: var(--trapez-status-warning);
}

.alertify.warning .fa {
        background: #fff6e5;
        color: var(--trapez-status-warning);
}

.alertify.waiting {
        --alertify-color: var(--trapez-blue);
}

.alertify.waiting .fa {
        background: var(--trapez-blue-soft);
        color: var(--trapez-blue);
}

.alertify.is-leaving {
        animation: alertifyOut 0.18s ease forwards;
}

@keyframes alertifyIn {
        from {
                opacity: 0;
                transform: translateY(10px) scale(0.98);
        }
        to {
                opacity: 1;
                transform: translateY(0) scale(1);
        }
}

@keyframes alertifyOut {
        from {
                opacity: 1;
                transform: translateY(0) scale(1);
        }
        to {
                opacity: 0;
                transform: translateY(-8px) scale(0.98);
        }
}

@keyframes alertifyProgress {
        from {
                transform: scaleX(1);
        }
        to {
                transform: scaleX(0);
        }
}

@media (prefers-reduced-motion: reduce) {
        .alertify,
        .alertify::after {
                animation: none;
        }
}

.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    width: 100%;
    margin: 0 0 10px;
    padding: 0;

    overflow: hidden;
    list-style: none;
    white-space: nowrap;

    color: var(--trapez-muted);
    font-size: 12px;
    font-weight: bold;
}

.breadcrumb li {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
}

/* Son eleman büyümez; yer yetmezse üç noktayla kesilir */
.breadcrumb li:last-child {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 10px;
    color: #9aa5ac;
}

.breadcrumb li a {
    color: var(--trapez-blue);
    font-weight: bold;
    text-decoration: none;
}
.hero {
        position: relative;
        padding: 50px 0px 100px 0px;
        background: linear-gradient(90deg, #ffffff09 1px, #0000 1px) 0 0 / 72px 72px, linear-gradient(#ffffff06 1px, #0000 1px) 0 0 / 72px 72px, linear-gradient(118deg, #071d31 0%, #103c64 58%, #0d548b 100%);
        overflow: hidden;
        color: var(--trapez-white);
        margin-bottom:-50px;
}
.hero:after {
        content: "";
        background: linear-gradient(90deg, var(--red) 0 36%, var(--sky) 36% 62%, #ffffff29 62%);
        height: 4px;
        position: absolute;
        inset: auto 0 0;
}

.hero .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 50px;
        align-items: center;
}

.hero .breadcrumb li,
.hero .breadcrumb li a { 
        color:#8fc7df; 
}

.hero h1 {
        max-width: 850px;
        color: var(--trapez-white);
        font-family: var(--trapez-display);
        font-size: 40px;
        margin-bottom: 10px;
}

.hero p {
        max-width: 650px;
        color: var(--trapez-white-alpha);
}

.hero ul {
        display: flex;
        gap: 15px;
        max-width: 680px;
        margin-top: 15px;
}

.hero ul li {
        display: flex;
        align-items: center;
        gap:5px;
        position: relative;
        font-size:14px;
}


.hero ul li strong { color: var(--trapez-white); }

.hero ul li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height:4px;
    background:#8fc7df;
}




.hero aside {
         background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));
        color: var(--trapez-ink);
        padding: 28px;
        box-shadow: var(--trapez-shadow);
        backdrop-filter: blur(14px);
}

.hero aside:before {
        content: "İçindekiler";
        display: flex;
        justify-content: space-between;
        color: var(--trapez-blue);
        font-size: 12px;
        font-weight: bold;
}

.hero aside nav {
        display: grid;
        gap: 10px;
        margin-top: 10px;
}

.hero aside nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 12px;
        border: 1px solid var(--trapez-line);
        color: var(--trapez-ink);
        background: var(--trapez-white);
        font-weight: bold;
        font-size:14px;
}

.hero aside nav a::after {
        content: "\2193";
        color: var(--trapez-blue);
        font-weight: bold;
}

.hero aside nav a:hover {
        color: var(--trapez-blue);
        background: var(--trapez-blue-soft);
}



.filter {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.filter .form-group {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

.filter > button:last-child {
  flex: 0 0 auto;
  width: auto;
}

.footer {
        position: relative;
        margin-top: 50px;
        padding: 50px 0px;
        overflow: hidden;
        border-top:4px solid var(--trapez-blue);
        background:
                radial-gradient(circle at 8% 12%, rgba(20, 81, 151, 0.3), transparent 31%),
                radial-gradient(circle at 94% 88%, rgba(219, 35, 40, 0.13), transparent 27%),
                linear-gradient(145deg, #303a42 0%, #17232b 72%);
        color: rgba(255, 255, 255, 0.76);
        text-align: left;
}



.footer > .container:first-child {
        display: grid;
        grid-template-columns: 1fr 1.15fr 0.85fr 1.25fr;
        gap: 50px;
        align-items: start;
}

.footer-widget {
        min-width: 0;
        display: grid;
        align-content: start;
        gap: 10px;
}

.footer-toggle {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border: 0;
        background: transparent;
        color: var(--trapez-white);
        font-size:20px;
        font-family:var(--trapez-display);
        font-weight: bold;
        line-height: 1.3;
        text-align: left;
}

.footer-toggle::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 36px;
        height: 2px;
        content: "";
        background: #8fc7df;
}

.footer-toggle::after {
        display: none;
}

.footer-widget > a {
        display: block;
        transition: color 0.2s ease, transform 0.2s ease;
}

.footer-widget > a::before {
        color: #6fa2d2;
        content: "›";
        font-size: 18px;
        line-height: 1;
        margin-right:10px;
}

.footer-widget > a:hover {
        color: var(--trapez-white);
        transform: translateX(3px);
}



.footer-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 5px;
}

.footer-socials a {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid var(--trapez-line);
        background: rgba(255, 255, 255, 0.04);
        color: var(--trapez-white);
        transition: background 0.2s ease, transform 0.2s ease;
}

.footer-socials a:hover {
        background: var(--trapez-blue);
        transform: translateY(-2px);
}

.copyright {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding:15px 0px;
        color:var(--trapez-muted);
        font-weight: bold;
        font-size:14px;
        line-height: 1.2;
}

.copyright > span + span { border-left:1px solid var(--trapez-line);padding-left:15px; }

  .google {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: transform 0.25s, box-shadow 0.25s;
    }


   .google .heart {
      color: #ea4335;
      display: inline-block;
      animation: heartbeat 1.2s infinite;
    }

   .google .blue   { color: #4285f4; }
   .google .red    { color: #ea4335; }
   .google .yellow { color: #fbbc05; }
   .google .green  { color: #34a853; }

    @keyframes heartbeat {
      0%, 100% { transform: scale(1); }
      15%      { transform: scale(1.2); }
      30%      { transform: scale(1); }
      45%      { transform: scale(1.15); }
      60%      { transform: scale(1); }
    }




@media (min-width: 1200px) {
        .container {
                width: 1270px;
        }
}

@media (min-width: 1000px) {

        .menu a:first-child::before {display: none;}

}
@media (max-width: 1000px) {

        .alertify {
                top: auto;
                right: 12px;
                bottom: max(12px, env(safe-area-inset-bottom));
                left: 12px;
                width: auto;
        }

         .top {
                text-align: center;
        }

        .top .container {
                justify-content: center;
        }

        .top-right {
                display: none;
        }

        

        .header > .container {
                position: relative;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto auto auto;
                column-gap: 10px;
                row-gap: 15px;
        }

        .header .logo {
                grid-column: 1;
                grid-row: 1;
                width: 130px;
        }


        .header-center {
                grid-column: 1 / -1;
                grid-row: 2;
                max-width: none;
        }

        .header .form-control {

                padding:10px 10px 10px 40px;
        }

        .header-result{  position:fixed;   top: var(--mobile-menu-offset);  left:0;right:0;bottom:0;padding:0;border:none; }

        .header-result .header-item {   grid-template-columns: 45px 1fr; }
        .header-result .header-item em { display:none; }
        .header .btn-primary { display: none; }

      

        .header-call > span { display: none; }

        .header-call i { width:40px; height: 40px; }

        .header-quote {
                grid-column: 3;
                grid-row: 1;
                width:40px;
                height: 40px;
                min-height: 40px;
        }

        .header-quote span { display: none; }

        .header-button {
                display: inline-flex;
                grid-column: 4;
                grid-row: 1;
        }


        .menu {
                position: fixed;
                top: var(--mobile-menu-offset, 0px);
                right: 0;
                bottom: 0;
                left: 0;
                gap:0;
                display: flex;
                align-items: stretch;
                flex-direction: column;
                justify-content: flex-start;
                overflow-y: auto;
                border: 0;
                background:var(--trapez-white);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition:var(--trapez-transition);
                border-top:1px solid var(--trapez-line);
                z-index: 19;
        }

        body.menu-open .menu {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
        }

        .menu a {
                padding: 15px;
                justify-content: flex-start;
                text-align: left;
        }
        .menu a::before {margin-right: 15px;}

        .menu a + a { border-top:1px solid var(--trapez-line); }

        .hero {
                min-height: auto;
                padding: 50px 0px 80px 0px;
                text-align: center;
        }

        .hero .breadcrumb { 
                justify-content:center; 
        }

        .hero > .container {
                display: block;
        }

        .hero aside {
                margin-top: 30px;
                padding: 15px;
        }

        .hero h1 {
                font-size: 30px;
        }

        .hero ul { display:flex;flex-direction:column;gap:5px;}
        .hero ul li{ justify-content: center; }

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

        .filter > .btn-block {
            width: 100%;
        }

        .footer > .container:first-child {
                grid-template-columns: 1fr;
                gap:0;
        }

        .footer {
                padding:25px 0px;
        }

        .footer-widget {
                gap:0;
                border-bottom:1px solid rgba(255, 255, 255, 0.12);
        }


        .footer-toggle {
                display:flex;
                align-items:center;
                justify-content:space-between;
                margin:0;
                padding:15px 0px;
                cursor:pointer;
        }

        .footer-toggle::before {
                display:none;
        }

        .footer-toggle::after {
                display:block;
                content:"+";
                color:#8fc7df;
                font-family:var(--trapez-body);
                font-size:24px;
                font-weight:400;
                line-height:1;
        }

        .footer-widget:first-child .footer-toggle{
                padding-top:0;
        }
        .footer-widget:last-child .footer-toggle{
                padding-bottom:0;
        }
        .footer-widget:last-child {
                border-bottom:0;
        }

        .footer-widget.is-open > .footer-toggle::after {
                content:"−";
        }

        .footer-widget > a,
        .footer-widget > .footer-socials {
                display:none;
        }

        .footer-widget.is-open { padding-bottom:15px; }
        .footer-widget.is-open > a {   display:block; }
        .footer-widget.is-open > a + a {
                padding-top:10px;
        }
        .footer-widget.is-open:last-child .footer-toggle{
                padding-bottom: 15px;

        }

        .footer-widget.is-open > .footer-socials {
                display:flex;
                margin:0;
                padding:8px 0px 16px;
        }


        .copyright {padding:15px 0px;flex-direction: column;gap:10px !important;}

        .copyright > span + span { padding-left:0px;border-left:0px; }
}