/**
 * Project overrides.
 *
 * Loaded after style.css and responsive.css. No theme stylesheet is edited, so the
 * mirrored files stay byte-identical to the demo and every difference from it is
 * visible in this one place.
 *
 * Selectors are as specific as the rules they override, never more, and !important
 * is used only where a plugin writes an inline style.
 */

:root {
    /**
     * Brand orange, sampled from the approved design comp (logo mark and the active
     * menu item). The theme's own --hover-color (#c2976b) is deliberately left
     * alone: the comp keeps it on the slider progress bar and the subtitle rule.
     */
    --brand-color: #f15a2a;
}

/* ------------------------------------------------ 0. Horizontal overflow
 *
 * The banner wraps its row in .container-fluid.p-0. Bootstrap gives .row a -15px
 * margin on each side, which a container normally absorbs with its own 15px
 * padding — but p-0 removes exactly that padding, so the row ends up 30px wider
 * than the viewport and the whole page can be dragged sideways.
 *
 * The demo has the identical 30px overflow from the identical markup, so this is
 * the theme's flaw rather than something introduced here.
 *
 * Zeroing the row margin AND the column padding together is visually a no-op: the
 * -15px margin and the +15px padding cancel each other out today, so removing both
 * leaves the content on exactly the same pixels and only the overflow box shrinks.
 * Scoped to the banner so no other .container-fluid is affected.
 */

.showcase-two > .container-fluid.p-0 > .row {
    margin-left: 0;
    margin-right: 0;
}

.showcase-two > .container-fluid.p-0 > .row > [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------- 1. Header
 *
 * The one intentional deviation from the theme.
 *
 * The demo logo is 140x35 in a 120px bar. The Kreatif mark is stacked (wordmark
 * over a script "Reklam") and measures ~235x92 in the comp, which needs a taller
 * bar: 162px, as measured off the comp. The banner height below is adjusted by the
 * same amount so the slider still ends where the theme intended.
 */

.navbar-area.nav-style-01 {
    height: 162px;
}

.navbar-area.nav-style-01 .logo-wrapper .logo img {
    max-height: 92px;
    width: auto;
}

/* Compensates the taller header: the theme pairs a 120px bar with 100vh - 100px. */
.showcase-two .showcase-slider-content .slider-content .showcase-slider-section-two .showcase-inner {
    height: calc(100vh - 142px);
}

/* The active item is the brand colour in the comp, not the theme's bronze. */
.navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.current-menu-item > a {
    color: var(--brand-color);
}

/* ------------------------------------------------- 2. Header phone number
 *
 * The phone sits in the theme's own .nav-right-content slot, where the demo kept
 * Log In / Sign Up / search. Those are dropped; the side-nav toggle next to it is
 * not, because script.js binds to it without a null check.
 *
 * A second rendering lives in .mobile-toggler, the slot the theme already positions
 * for small screens.
 */

.navbar-area.nav-style-01 .nav-container .nav-right-content ul li.header-phone a {
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--heading-color);
    white-space: nowrap;
    transition: color 0.3s ease-in;
}

.navbar-area.nav-style-01 .nav-container .nav-right-content ul li.header-phone a:hover {
    color: var(--brand-color);
}

/* The theme hides .mobile-toggler on desktop; the phone follows the same rule. */
.navbar-area.nav-style-01 .responsive-mobile-menu .mobile-toggler .header-phone a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--heading-color);
}

.navbar-area.nav-style-01 .responsive-mobile-menu .mobile-toggler .header-phone i {
    color: var(--brand-color);
}

/* --------------------------------------------- 2b. Slide category rule
 *
 * The theme draws a short white rule before the category label on a banner slide,
 * anchored with right: 75px on a position:relative subtitle. That only lands left
 * of the text at the demo copy width: "Creative" clears it, "Kurumsal Firmalar"
 * does not, and the rule strikes through the word.
 *
 * Anchored to the left instead, at exactly the 37px margin the theme already gives
 * the subtitle, so it reads as the demo intends at any label length.
 */

.showcase-two .showcase-slider-content .slider-content .showcase-slider-section-two .showcase-inner .showcase-img .project-content .project-text .subtitle::before {
    right: auto;
    left: -37px;
}

/* ------------------------------------------------------- 3. Buttons as buttons
 *
 * Several theme "buttons" are anchors with href="#", which cannot submit a form.
 * They are real <button> elements here; these rules make a button inherit exactly
 * what the anchor had, so nothing moves visually.
 */

button.submit-btn,
button.btn-showcase,
button.login-btn {
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

button.is-submitting {
    opacity: 0.6;
    cursor: progress;
}

/* --------------------------------------------------------- 4. Form feedback */

.form-feedback {
    margin-bottom: 20px;
    padding: 14px 18px;
    font-size: 15px;
    border-left: 3px solid;
}

.form-feedback--ok {
    color: #2f6f4f;
    background: #eef7f1;
    border-left-color: #2f6f4f;
}

.form-feedback--error {
    color: #8a3126;
    background: #fbeeec;
    border-left-color: var(--brand-color);
}

/* ----------------------------------------------------------- 5. Counters
 *
 * counterUp rewrites the contents of .count-num while it animates, so a suffix
 * cannot live inside it. It is a sibling instead, pulled back against the number.
 */

.counterup-area .single-counter-item .content .count-suffix {
    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--heading-color);
    margin-left: 2px;
}

.counterup-area .single-counter-item .content .count-num {
    display: inline-block;
    margin-bottom: 0;
}

/* ------------------------------------------------------- 6. Projects filter
 *
 * The isotope filter bar. The theme styles a shop filter (.shop-menu) but the
 * projects listing has none, so this is new rather than an override.
 */

.project-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 34px;
    list-style: none;
    margin: 0 0 55px;
    padding: 0;
}

.project-filter-nav li {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--main-color-one);
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease-in;
}

.project-filter-nav li:hover,
.project-filter-nav li.active {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
}

/* ------------------------------------------------------- 7. Kurumsal page
 *
 * The process chain from the strategy section. Built with the theme's own type
 * scale so it reads as part of the design rather than as an addition.
 */

/*
 * A grid rather than wrapping flex: with flex: 1 1 180px the six steps packed five
 * onto the first row and stretched the sixth across the whole second one. An
 * explicit column count keeps the rows even at every breakpoint.
 */
.process-chain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * The theme numbers list items with li::before { content: counter(counter) }, not
 * with a list marker — list-style: none does not touch a pseudo-element, so the
 * theme counter kept printing a bare "1" above the styled "01". Suppress it and
 * keep the ol, which is the correct element for an ordered process.
 */
.process-chain li::before {
    content: none;
}

.process-chain li {
    position: relative;
    list-style: none;
    padding: 22px 18px;
    background: var(--bg-color-two);
    border: 1px solid #ececec;
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--heading-color);
}

@media only screen and (max-width: 991px) {
    .process-chain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 599px) {
    .process-chain {
        grid-template-columns: 1fr;
    }
}

.process-chain li .step {
    display: block;
    margin-bottom: 6px;
    font-family: var(--tasti-font);
    font-size: 26px;
    line-height: 1;
    color: var(--hover-color);
}

/* --------------------------------------------------------- 8. Empty states */

.empty-state {
    padding: 80px 0;
    text-align: center;
    color: var(--main-color-one);
}

/* ------------------------------------------------------------ 9. Pagination */

.page-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

.page-nav a,
.page-nav span {
    display: inline-block;
    min-width: 42px;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid #ececec;
    color: var(--main-color-one);
    transition: all 0.3s ease-in;
}

.page-nav a:hover,
.page-nav .is-current {
    color: #fff;
    background: var(--hover-color);
    border-color: var(--hover-color);
}

/* ------------------------------------------------ 10. Small-screen header
 *
 * Below the theme's 991px breakpoint the bar returns to a compact height, since
 * the stacked logo is scaled down there anyway.
 */

@media only screen and (max-width: 991px) {
    .navbar-area.nav-style-01 {
        height: 110px;
    }

    .navbar-area.nav-style-01 .logo-wrapper .logo img {
        max-height: 62px;
    }

    .showcase-two .showcase-slider-content .slider-content .showcase-slider-section-two .showcase-inner {
        height: auto;
    }

    .navbar-area.nav-style-01 .nav-container .nav-right-content ul li.header-phone {
        display: none;
    }
}

/* ------------------------------------------------ 11. Service group listings
 *
 * The homepage service card now represents a group rather than a single service,
 * so it carries a short list of its children. The theme has no equivalent, but the
 * type scale and the bronze accent are its own.
 */

.service-single-item .service-content .service-child-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.service-single-item .service-content .service-child-list li {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    line-height: 28px;
}

.service-single-item .service-content .service-child-list li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--hover-color);
}

.service-single-item .service-content .service-child-list li a {
    color: var(--main-color-one);
    transition: color 0.3s ease-in;
}

.service-single-item .service-content .service-child-list li a:hover {
    color: var(--hover-color);
}

.service-single-item .service-content .service-child-list li.more a {
    color: var(--brand-color);
}

/* The compact service link used on the services index. */
.service-mini {
    padding: 16px 20px;
    background: var(--bg-color-two);
    border: 1px solid #ececec;
    transition: all 0.3s ease-in;
}

.service-mini:hover {
    border-color: var(--hover-color);
}

.service-mini .title {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--heading-color);
}

.service-mini:hover .title {
    color: var(--hover-color);
}

/* ------------------------------------------------ 12. Seven-item main menu
 *
 * The theme's navigation was laid out for five short English labels: inline-block
 * items with a 40px gap at 16px, right-aligned, wrapping when they run out of room.
 * The approved menu has seven items with labels as long as "Organizasyon - Konser",
 * which pushed the last two onto a second line.
 *
 * A single flex row that refuses to wrap, with the gap and type size stepped down
 * by breakpoint. The theme's colours, weight and hover behaviour are untouched —
 * only the spacing changes.
 */

@media only screen and (min-width: 992px) {
    .navbar-area.nav-style-01 .nav-container .navbar-collapse {
        flex-grow: 1;
    }

    .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }

    .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav > li {
        margin-left: 26px;
        white-space: nowrap;
    }

    .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav > li > a {
        font-size: 15px;
    }

    /* The dropdown is absolutely positioned, so it must not inherit nowrap. */
    .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav > li .sub-menu li {
        white-space: normal;
    }
}

/* Between 992 and 1440 the row is tightest: trim the gap and the type a little more. */
@media only screen and (min-width: 992px) and (max-width: 1440px) {
    .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav > li {
        margin-left: 17px;
    }

    .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav > li > a {
        font-size: 14px;
    }

    .navbar-area.nav-style-01 .nav-container .nav-right-content ul li.header-phone a {
        font-size: 16px;
    }
}

/* Keep the phone and the side-nav toggle on one line beside the menu. */
@media only screen and (min-width: 992px) {
    .navbar-area.nav-style-01 .nav-container .nav-right-content ul {
        display: flex;
        align-items: center;
        white-space: nowrap;
        margin-left: 24px;
    }

    .navbar-area.nav-style-01 .nav-container .nav-right-content ul li {
        margin-left: 18px;
    }
}

/* ------------------------------------------- 13. References without artwork
 *
 * A reference with no logo file renders as its name. The theme sizes .single-brand
 * around a 100px image, so the text needs its own vertical centring to sit on the
 * same line as any logos beside it.
 */

.client-section .single-brand .brand-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 0 10px;
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: var(--main-color-one);
    transition: color 0.3s ease-in;
}

.client-section .single-brand:hover .brand-name {
    color: var(--hover-color);
}

/* --------------------------------------------- 14. Popup panel photography
 *
 * The floating info and message overlays are painted from style.css with the
 * theme's stock interior photograph. They are hidden until clicked, which is why
 * they survived the content audit — but anyone who opens "Çalışma Saatleri" sees
 * a designer sofa rather than the company's own work.
 *
 * Overridden with imported project photography. Kept in CSS because that is where
 * the theme sets them; the markup is untouched.
 */

.info-popup-content__img--one,
.info-popup-content__img--two,
.info-popup-content__img--three {
    background-image: url(../../uploads/projects/tavaci-lutfu-usta-cephe-ve-kutu-harf-uygulamasi-2.jpg);
}

.message-popup-content__img--one,
.message-popup-content__img--two,
.message-popup-content__img--three {
    background-image: url(../../uploads/projects/autoart-servis-cephe-tabelasi.jpg);
}

/* -------------------------------------------- 15. Capability section backdrop
 *
 * The theme paints this from .pg-bar-area::before with a 666 KB PNG — the single
 * heaviest asset on the homepage. The section takes its image from a custom
 * property instead, set inline from the admin setting, so only one file loads and
 * it is still editable.
 *
 * The theme file stays as the fallback for when no image is configured.
 */

.pg-bar-area::before {
    background-image: var(--pg-bar-image, url(../img/pg-bar/01.png));
}