/*
 * Anadolu Çevre v2 — brand + layout overrides on top of the "Mistri" HTML
 * template's own style.css. Loaded LAST from partials/head.blade.php so every
 * rule here beats the vendor bundle without editing it (keeps upstream diffs
 * trivially rebasable).
 */

/* --------------------------------------------------------------------------
 * Brand color remap. head.blade.php already pushes --primary-color to navy,
 * but style.css has hard-coded rgba(238,51,43,...) copies of the template's
 * red in several spots that ignore the variable — replace those inline.
 * -------------------------------------------------------------------------- */
:root {
    --shadow: 0px 4px 30px 0px rgba(37, 40, 106, 0.15);
    --ac-navy: var(--primary-color);
    --ac-green: var(--ac2-accent, #6BA539);
}

/* The four places style.css hard-codes its red instead of reading
   --primary-color, so the brand remap in head.blade.php can't reach them.
   Found by grepping `#ee332b` / `rgba(238,51,43,…)` in the vendor sheet. */

/* 1) Portfolio/team card hover veil (`.team-one` is the base class the
      portfolio index cards use) — this is the red wash over project photos. */
.team-one .item .image::before {
    background: linear-gradient(180deg, rgba(37, 40, 106, 0) 0%, var(--ac-navy) 100%);
}
/* 2) Blog split-image veil. */
.blog-two .item-right .image::before {
    background-color: rgba(37, 40, 106, 0.5);
}
/* 3) Footer social hover. */
.footer-one .social-icon a:hover {
    background: linear-gradient(180deg, var(--ac-green) 0%, var(--ac-navy) 100%);
}
/* 4) Hero left panel veil — the vendor rule mixes var(--primary-color) with a
      hard-coded red stop, so the bottom half stayed red. hero.blade.php sets
      the real photo inline; this fixes the gradient it layers over. */
.banner-two .bg-image {
    background: linear-gradient(180deg, var(--ac-navy) 0%, rgba(27, 31, 92, 0.92) 100%);
}

/* --------------------------------------------------------------------------
 * Header — logo sizing only. The template's own header behaviour is KEPT as
 * purchased: home uses `.header-two` (fixed, transparent, floating over the
 * hero's coloured left panel, white logo → dark logo once `.menu-fixed`
 * sticks); inner pages use plain `.header-section` (in-flow, solid white, dark
 * logo). partials/header.blade.php picks the class per page type.
 *
 * `.logo-menu .logo img` ships with no max size, so a tall brand SVG blows the
 * header out to ~150px on desktop — that IS a real bug, capped here.
 * -------------------------------------------------------------------------- */
.header .logo-menu .logo img {
    max-height: 60px;
    width: auto;
    display: block;
}
/* On the home hero the white logo sits on the navy panel; keep the whole
   header row comfortably clear of the panel edge. */
.header-two .header-wrapper {
    min-height: 96px;
}

/* Text-wordmark fallback for header/footer when no brand logo Setting is
   configured yet (partials/header.blade.php, partials/footer.blade.php) —
   replaces what used to silently fall back to the purchased "Mistri"
   template's own demo logo files. `--light` is the variant used on the
   home hero's coloured panel / the dark footer; the plain class is for the
   solid-white inner-page header. */
.ac2-text-logo {
    display: inline-block;
    font-family: var(--heading-font, inherit);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading-color);
    white-space: nowrap;
}
.ac2-text-logo--light {
    color: var(--white);
}

/* --------------------------------------------------------------------------
 * Hero (banner-two) — the PURCHASED layout is preserved: full-height coloured
 * left panel, 3-up offset slider, vertical outline word, red→brand recolour
 * only. What changes here is strictly (a) brand colour and (b) swapping the
 * package's unusable grey size-placeholder art for real imagery/type.
 *
 * `banner/a-left.jpg` (645×971, 3.8 KB) is a "645X97" placeholder, not a photo —
 * hero.blade.php supplies a real tenant project photo inline instead, so the
 * base rule here is just the brand gradient it layers over.
 * -------------------------------------------------------------------------- */
.banner-two .bg-image {
    background: linear-gradient(180deg, var(--ac-navy) 0%, #1B1F5C 100%);
    background-size: cover;
    background-position: center;
}

/* Vertical outline word (template ships this as a baked "MISTRI" PNG; we render
   live text so it carries this brand). */
.banner-two .stroke-text {
    top: 40px;
    left: 48px;
    width: 33%;
    pointer-events: none;
    overflow: hidden;
    height: calc(100% - 80px);
}
.banner-two .stroke-text span {
    display: block;
    writing-mode: vertical-rl;
    font-size: clamp(80px, 9vw, 150px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 4px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}

/* Slide content pill — template red → brand navy. */
.banner-two .item .image .content {
    background-color: var(--ac-navy);
}
.banner-two .item .image .content h3,
.banner-two .item .image .content h3 a {
    color: #fff;
    line-height: 1.3;
}

/* Slide images: DB photos vary wildly in aspect ratio; normalise so the 3-up
   row stays even instead of stair-stepping. */
.banner-two .item .image img {
    width: 100%;
    height: clamp(420px, 62vh, 700px);
    object-fit: cover;
    display: block;
}

/* Nav arrows sit on white below the slider — template styles the inactive one
   for a red theme. */
.banner-two .banner_two_brand .arry-btn button {
    background: #f3f3f3;
    color: var(--ac-navy);
    border: 1px solid var(--border, #d9d9d9);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* The vendor sheet colours the arrow GLYPH white for its dark-hero design, and
   that rule sits on the `<i>` — so setting `color` on the button alone left a
   white arrow on the light inactive button, i.e. invisible. Colour the icon
   itself. */
.banner-two .banner_two_brand .arry-btn button i {
    color: var(--ac-navy);
}
.banner-two .banner_two_brand .arry-btn button.active,
.banner-two .banner_two_brand .arry-btn button:hover {
    background: var(--ac-navy);
    color: #fff;
    border-color: var(--ac-navy);
}
.banner-two .banner_two_brand .arry-btn button.active i,
.banner-two .banner_two_brand .arry-btn button:hover i {
    color: #fff;
}

/* Eyebrow + description row under the slider sits on white page background. */
.banner-two .container.position-relative .col-lg-8 span {
    color: var(--ac-navy);
    letter-spacing: 1.5px;
}
.banner-two .container.position-relative .col-lg-8 p {
    color: var(--paragraph, #303030);
}

/* --------------------------------------------------------------------------
 * Template placeholder artwork. The vendor CSS points several backgrounds at
 * demo files that are literal grey "1920X336" / "580X600" size-placeholder
 * images. Replace with brand gradients so no page ships a dimension label as
 * its hero. (page-heading.blade.php still lets a real $cover image override
 * `.page-banner` via an inline style, which wins over this rule.)
 * -------------------------------------------------------------------------- */
/* No !important here: this file loads AFTER the vendor bundle, so equal
   specificity already wins — and that in turn lets page-heading.blade.php's
   INLINE $cover background override it when a page supplies a real image. */
.page-banner {
    background-image: linear-gradient(120deg, var(--ac-navy) 0%, #1B1F5C 60%, #12153f 100%);
    background-size: cover;
    background-position: center;
}
/* The template's `.section-padding` (130px top AND bottom) is tuned for a
   banner carrying a full photo. Ours is a flat gradient holding just a title +
   breadcrumb, so that much padding reads as dead space — and the following
   section's own 130px top padding then stacks a second empty band under it.
   Tighten both, inner pages only. */
.page-banner.section-padding {
    padding-top: 70px;
    padding-bottom: 70px;
}
.page-banner + section.section-padding,
.page-banner + div > section.section-padding {
    padding-top: 80px;
}
.contact .content {
    background-image: linear-gradient(150deg, var(--ac-navy) 0%, #1B1F5C 100%);
}
/* Decorative arrow doodle inside the contact card is a demo flourish. */
.contact .content .arry {
    display: none;
}

/* Every OTHER vendor background that points at a shipped placeholder. Detected
   by bytes-per-pixel (< 0.05 B/px = a flat grey "WxH" label, not a photo):
   banner/a-left.jpg, banner/page-banner.jpg, contact/01.jpg, portfolio/bg.jpg,
   service/single5.jpg, trust/bg.jpg, video/01.jpg, video/02.jpg. Each gets a
   brand gradient so no dimension label can surface anywhere in the theme. */
.portfolio.bg-image,
.portfolio .bg-image {
    background-image: linear-gradient(160deg, var(--ac-navy) 0%, #1B1F5C 100%);
}
.service-single .right-item .item-two {
    background-image: linear-gradient(150deg, var(--ac-navy) 0%, #12153f 100%);
}
.trust.bg-image,
.trust .bg-image {
    background-image: linear-gradient(90deg, var(--ac-navy) 0%, #1B1F5C 100%);
}
.video-area.bg-image,
.video-area .bg-image {
    background-image: linear-gradient(120deg, var(--ac-navy) 0%, #1B1F5C 55%, #12153f 100%);
}

/* --------------------------------------------------------------------------
 * Services accordion — the template sets `.accordion-header { line-height: 0 }`
 * (a trick that only works because its own demo titles are all short enough to
 * stay on ONE line). Real Turkish service names wrap to two lines, and with a
 * zero line-height those lines render stacked on top of each other. Restore a
 * real line-height and let the button lay out as a normal flex row so the icon
 * stays put next to a multi-line title.
 * -------------------------------------------------------------------------- */
.service-two .left-item .accordion-item .accordion-header {
    line-height: 1.3;
}
.service-two .left-item .accordion-item .accordion-header button {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    line-height: 1.3;
}
.service-two .left-item .accordion-item .accordion-header button i {
    margin-right: 0;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
 * Footer. Markup uses the template's own `.item` / `.title` / `.copyright`
 * classes (NOT `.footer-widget`), so target those. Two real problems: the brand
 * logo ships unconstrained (same bug as the header), and the template's body
 * copy colour is a dark grey meant for light backgrounds — unreadable on this
 * footer's navy `.secondary-bg`.
 * -------------------------------------------------------------------------- */
footer .logo img {
    max-height: 64px;
    width: auto;
}
/* Sütun metni logo genişliğinde hizalanır: logo sabit bir genişlik kaplarken
   altındaki slogan sütunun tamamına yayılıyordu, iki blok birbirine hizasız
   duruyordu. Aynı ölçü adres satırına da veriliyor; adres (Çalı Sanayi Bölgesi
   … Nilüfer/Bursa) bu genişlikte doğal olarak üç satıra bölünür. */
footer .item .logo,
footer .item > p {
    max-width: 281px; /* 720x164 logo @ max-height:64px => 281px render genişliği */
}
footer .item li span,
footer .item li a {
    max-width: 245px; /* 281px sütun - ikon (16px) - boşluk (8px) - pay */
}
footer .item li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
footer .item li i.fa-solid,
footer .item li i.fa-regular {
    flex: 0 0 auto;
    margin-top: 6px;
}
footer .item p,
footer .item li,
footer .item li a,
footer .item li span,
footer .copyright,
footer .copyright p,
footer .copyright a {
    color: rgba(255, 255, 255, 0.78);
}
footer .item li a:hover,
footer .copyright a:hover {
    color: #fff;
}
footer .item .title h4,
footer .item .title h3 {
    color: #fff;
}
/* Contact icons: brand green reads better than plain white on navy. Overrides
   the inline `text-white` utility the markup carries on some of them. */
footer .item li i.fa-solid,
footer .item li i.fa-regular {
    color: var(--ac-green) !important;
}
footer .social-icon a {
    color: rgba(255, 255, 255, 0.85);
}
footer .social-icon a:hover {
    color: var(--ac-green);
}

/* --------------------------------------------------------------------------
 * Buttons / accents that in the template use hard-coded red.
 * -------------------------------------------------------------------------- */
.btn-one,
.theme-btn,
.btn-two,
button.btn-one {
    background: var(--ac-navy);
    border-color: var(--ac-navy);
}
.btn-one:hover,
.theme-btn:hover,
.btn-two:hover {
    background: var(--ac-green);
    border-color: var(--ac-green);
}

/* --------------------------------------------------------------------------
 * Header active/hover menu pill.
 *
 * The template gives every nav link `padding: 35px 0` (a full-header-height hit
 * area). Painting a background straight onto the anchor therefore produced a
 * 98px-tall navy block running far below the letters. Paint a pseudo-element
 * pill instead: vertically centred on the text, sized to the text, so the hit
 * area stays full-height while the visible pill hugs the label.
 * -------------------------------------------------------------------------- */
.main-menu > li.active > a,
.main-menu > li > a.active {
    background: transparent;
    color: #fff;
    position: relative;
    z-index: 1;
}
.main-menu > li.active > a::before,
.main-menu > li > a.active::before {
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    background: var(--ac-navy);
    border-radius: 999px;
    z-index: -1;
}
/* Hover on non-active items: brand colour text, no block. */
.main-menu > li:not(.active) > a:hover {
    color: var(--ac-navy);
    background: transparent;
}
/* AKTİF öğenin hover'ı: yazı BEYAZ kalmalı.
   Şablonun `.header-wrapper .main-menu li a:hover { color: var(--primary-color) }`
   kuralı (0,3,2) özgüllüğünde; yukarıdaki aktif kuralımız (0,2,2) olduğu için
   fareyle üzerine gelindiğinde yazı lacivert oluyor ve lacivert hapın üstünde
   TAMAMEN GÖRÜNMEZ kalıyordu. Aynı `.header-wrapper` önekiyle yazıp (0,4,2)
   özgüllüğe çıkarıyoruz ki şablonun hover'ını yenelim. */
.header-wrapper .main-menu > li.active > a,
.header-wrapper .main-menu > li.active > a:hover,
.header-wrapper .main-menu > li.active > a:focus,
.header-wrapper .main-menu > li > a.active,
.header-wrapper .main-menu > li > a.active:hover {
    color: #fff;
}
/* Hap, hover'da marka yeşiline döner — beyaz yazı okunur kalır ve öğenin
   tıklanabilir olduğu belli olur. */
.header-wrapper .main-menu > li.active > a:hover::before,
.header-wrapper .main-menu > li > a.active:hover::before {
    background: var(--ac-green);
}
/* NOTE: no light-pill variant for the transparent home header. The hero's navy
   left panel is only ~33% wide and the nav sits to the RIGHT of it, i.e. over
   the white part of the page — a white pill with white label there rendered
   invisible. The navy pill + white label is correct in every header state; only
   the LOGO overlaps the coloured panel. */

/* --------------------------------------------------------------------------
 * home_stats — `.experience-two` counter grid (sections/home_stats.blade.php)
 * repurposed from the template's stacked two-stat sidebar into a standalone
 * full-width 4-up band. `.item` ships with `border-bottom: none` (meant to
 * butt up against a sibling video block below it) — close the box and
 * center the stacked number/label for a freestanding grid.
 * -------------------------------------------------------------------------- */
/* Rakamlar bandı: kartlar sitenin `.btn-one` butonuyla (örn. "Hakkımızda")
   AYNI görsel dili kullanır — dolu lacivert zemin, beyaz yazı, hafif yuvarlak
   köşe. Önceki beyaz hap görünümü açık gri `sub-bg` zemininde silik kalıyordu.
   `.btn-one`'ın clip-path'i burada kullanılmaz; rakam kartı tıklanabilir bir
   şey değil, sadece aynı biçim dilini paylaşır. */
.experience-two.ac2-stats .item {
    text-align: center;
    background: var(--primary-color);
    border: none;
    border-radius: 10px;
    padding: 26px 18px 22px;
    box-shadow: 0 14px 30px -18px rgba(16, 20, 60, 0.65);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.experience-two.ac2-stats .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px -18px rgba(16, 20, 60, 0.7);
}
/* Rakam. Şablon `.experience-two .item h2`ye font-weight:300, iç `span`e ise 600
   veriyor; kalınlık yalnızca `<span class="count">` üzerinden geliyordu. "7/24"
   gibi sayaçla canlandırılamayan değerler span'siz basıldığı için (bkz.
   sections/home_stats.blade.php) İNCE kalıyor, komşularının yanında silik
   görünüyordu. Kalınlığı h2'nin KENDİSİNE veriyoruz; böylece iki durum da aynı. */
.experience-two.ac2-stats .item h2,
.experience-two.ac2-stats .item h2 span {
    color: #fff;
    font-weight: 700;
    margin-bottom: 2px;
    padding-bottom: 0;
    line-height: 1.1;
}
.experience-two.ac2-stats .item .content > span {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}
/* Panelden yönetilen opsiyonel yan görsel (home_stats.image). */
.ac2-stats-media {
    max-width: 900px;
    margin: 0 auto 40px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.ac2-stats-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
 * contact_cta — `.video-area` full-bleed CTA band (sections/contact_cta.blade.php).
 * The template's own `.video-area a` rule turns EVERY anchor inside the
 * section into a 90px bordered circle (its video play button) — reset that
 * for our real CTA button + phone link, which the template has no slot for.
 * -------------------------------------------------------------------------- */
.video-area.ac2-cta p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 20px auto 30px;
    font-size: 16px;
}
.video-area.ac2-cta .cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.video-area.ac2-cta .cta-actions a {
    width: auto;
    height: auto;
    line-height: normal;
    border-radius: 0;
    border: none;
    font-size: inherit;
}
.video-area.ac2-cta .cta-actions .btn-one {
    display: inline-flex;
    align-items: center;
}
.video-area.ac2-cta .cta-actions .cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}
.video-area.ac2-cta .cta-actions .cta-phone i {
    color: var(--ac-green);
    font-size: 22px;
}

/* --------------------------------------------------------------------------
 * values — `.choose` "why choose us" grid (sections/values.blade.php). The
 * template's item is an image-icon + title only; add a glyph badge (so the
 * real `icon` field renders) and a description paragraph style, since the
 * vendor CSS has no slot for either.
 * -------------------------------------------------------------------------- */
.choose.ac2-values .item .ic {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ac-green);
    font-size: 26px;
}
.choose.ac2-values .item p {
    color: rgba(255, 255, 255, 0.75);
    margin-top: 10px;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
 * services/show — `.item-three` sidebar widget (modules/services/show.blade.php).
 * The template ships this box as a single "Download Brochures" pill button
 * (no real brochure file for this tenant) — repurposed as a real
 * "Diğer Hizmetlerimiz" link list to every other service. Vendor CSS only
 * styles `.content` (h3+p) and one `<a>` pill, so the list itself needs
 * its own rules.
 * -------------------------------------------------------------------------- */
.service-single .right-item .item-three {
    padding: 30px;
}
.service-single .right-item .item-three .content {
    padding: 0 0 12px;
}
.service-single .right-item .item-three .other-services {
    list-style: none;
    margin: 0;
    padding: 0;
    /* The vendor sheet flexes `.right-item ul` (it's a horizontal meta row in
       the template). As a vertical link list that squeezed every <li> down to
       ~36px and wrapped each title into a sliver. Force a normal block list. */
    display: block;
}
.service-single .right-item .item-three .other-services li {
    display: block;
    width: 100%;
}
.service-single .right-item .item-three .other-services li {
    border-top: 1px solid var(--border);
}
.service-single .right-item .item-three .other-services li:first-child {
    border-top: none;
}
/* The template's `.item-three a` is styled as a single "Download brochure"
   BUTTON — solid navy background, 12/22 padding, 30px bottom margin, rounded
   right corners — and its `a i` as a white padded badge. Reusing that element
   as a plain link list inherited all of it: navy blocks with white arrow
   badges sitting on top of the titles. Reset every one of those properties. */
.service-single .right-item .item-three .other-services a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 2px;
    margin-bottom: 0;
    background-color: transparent;
    border-radius: 0;
    color: var(--heading-color);
    font-weight: 600;
    line-height: 1.4;
}
.service-single .right-item .item-three .other-services a:hover {
    color: var(--ac-navy);
    background-color: transparent;
}
/* The vendor sheet styles `.service-single ul li span` as a 6×6 ROUND BULLET
   DOT (fixed width/height + border-radius + navy background — it marks list
   items in the template's own meta list). Our cross-link markup puts the
   service TITLE inside that same `<span>`, so every title was crushed into a
   6px dot and its text spilled out and overlapped the neighbouring rows.
   Restore the span to ordinary flowing text. */
.service-single .right-item .item-three .other-services a span {
    width: auto;
    height: auto;
    background-color: transparent;
    border-radius: 0;
    margin-right: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.service-single .right-item .item-three .other-services a i {
    padding: 0;
    margin-right: 0;
    background-color: transparent;
    border-radius: 0;
    color: var(--ac-green);
    font-size: 13px;
    flex-shrink: 0;
}
/* `.content` (which holds the heading) is padded 30px by the template, but the
   list sits OUTSIDE it — pad it to match so the widget lines up. */
.service-single .right-item .item-three .other-services {
    padding: 0 30px 20px;
}
.service-single .right-item .item-three .content {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
 * portfolio/show — `.portfoloi_single_items` project-info grid
 * (modules/portfolio/show.blade.php). Swapped the template's demo PNG icons
 * (assets/images/icon/psN.png) for real Font Awesome glyphs so the facts
 * parsed from the tenant's own PortfolioItem::description ("İdare / Müşteri",
 * "Yüklenici", "Tesis Tipi", "Debi") don't depend on stock icon art — the
 * vendor `.icon` box has a solid brand-color background but never styled an
 * icon FONT color (only an <img>), so it's invisible without this rule.
 * -------------------------------------------------------------------------- */
.portfolio-single .portfoloi_single_items .item .icon i {
    color: var(--white);
    font-size: 26px;
}

/* --------------------------------------------------------------------------
 * portfolio/show — "İlgili Projeler" related-items grid (same category,
 * excludes the current item). Not present in the template's
 * portfolio-single.html; reuses the `.page-portfolio .item` card markup from
 * the portfolio index (tmp/tema/portfolio-2.html) 1:1, so no new card rules
 * are needed — only the section spacing below the info table/gallery.
 * -------------------------------------------------------------------------- */
.portfolio-single .ac2-related {
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
 * home_services — `.ac2-services` synced showcase (sections/home_services.
 * blade.php). Replaces the template's `.service-two` accordion (whose
 * `.accordion-header { line-height: 0 }` stacks multi-line titles on top of
 * each other) with a plain selectable title list on the left and a fading
 * image/title/description preview panel on the right, auto-rotated by the
 * section's own JS (@push('theme-scripts')). New `ac2-` prefixed classes
 * only — nothing here inherits from `.service-two`.
 * -------------------------------------------------------------------------- */
.ac2-services .ac2-svc-heading {
    margin-bottom: 40px;
}
.ac2-svc-list {
    display: flex;
    flex-direction: column;
}
.ac2-svc-list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 3px solid var(--border);
    padding: 18px 22px;
    font-size: 18px;
    font-weight: 500;
    color: var(--heading-color);
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition);
}
.ac2-svc-list-item:hover {
    color: var(--ac-navy);
}
.ac2-svc-list-item.is-active {
    color: var(--ac-navy);
    font-weight: 700;
    border-left-color: var(--ac-navy);
    background: rgba(37, 40, 106, 0.05);
}
.ac2-svc-cta {
    margin-top: 30px;
}
/* Sol liste anasayfada 4 hizmetle sınırlandığı için (sections/home_services.blade.php)
   sağdaki önizleme kartı da küçültüldü; eski 360px + 16/9 görsel, kısalan sol
   sütunun yanında orantısız duruyordu. */
.ac2-svc-panels {
    position: relative;
    height: 100%;
    min-height: 300px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
}
.ac2-svc-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.ac2-svc-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}
.ac2-svc-panel-img {
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.ac2-svc-panel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ac2-svc-panel-body {
    padding: 22px 26px;
}
.ac2-svc-panel-body h3 {
    color: var(--heading-color);
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
}
.ac2-svc-panel-body p {
    color: var(--span);
    margin: 0;
}
@media (max-width: 991px) {
    .ac2-svc-list-item {
        padding: 14px 18px;
        font-size: 16px;
    }
    .ac2-svc-panels {
        min-height: 0;
        margin-top: 10px;
    }
}

/* --------------------------------------------------------------------------
 * portfolio/index + portfolio/show "İlgili Projeler" — `.ac2-portfolio-grid`
 * card grid (modules/portfolio/index.blade.php, modules/portfolio/show.
 * blade.php). Defects here:
 *
 * 1) The category filter pills (`.portfolio-list`) were removed from the
 *    markup, which also means the grid container no longer carries the
 *    `.portfolio-items` class — that class is what script.js's
 *    `$(".portfolio-items").isotope({})` selector hooks, so dropping it
 *    stops isotope's masonry (absolute-positioned) packing from touching
 *    this grid at all. That alone fixes most of the "ragged rows" — the
 *    remaining cause is that `.image img` only carries the vendor's blanket
 *    `width: 100%` (no height/aspect-ratio), so cards vary in height with
 *    each photo's native aspect ratio. Fix both: force a uniform image
 *    aspect-ratio + object-fit crop, and stretch the card to its full grid
 *    cell so bordered/rounded card edges (if any) line up row to row.
 * 2) `.team-one .item .content` (category + title) is the vendor's
 *    HOVER-ONLY caption overlay for "team member" cards
 *    (`position:absolute; opacity:0; visibility:hidden`, only shown via
 *    `.team-one .item:hover .content`) — modules/portfolio/index.blade.php
 *    reuses `.team-one` purely for the card look, so on `/portfolyo` every
 *    project's title + category is INVISIBLE by default and stays that way
 *    forever on touch devices (no `:hover`). Confirmed live: opacity 0 on
 *    load; the identical `.item .content` markup in portfolio/show's
 *    "İlgili Projeler" grid (no `.team-one` ancestor there) renders the same
 *    content fine, proving this is the class collision, not intentional
 *    hide-until-hover UX. Force the caption to the same always-visible,
 *    static-flow presentation the related-projects grid already uses; the
 *    vendor's on-hover image colour wash (`.image::before`, remapped to navy
 *    above) is untouched — that part is a harmless decorative extra.
 * -------------------------------------------------------------------------- */
.ac2-portfolio-grid .item {
    height: 100%;
}
.ac2-portfolio-grid .item .image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
}
.ac2-portfolio-grid .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-one .item .content {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 14px 2px 0;
}
.team-one .item .content h3 a {
    color: var(--heading-color);
}
.team-one .item .content span {
    color: var(--paragraph);
}

/* --------------------------------------------------------------------------
 * portfolio/show — `.portfoloi_single_items` project-info grid. Three
 * defects reported against this grid:
 *
 * 1) Cards had wildly different heights — the vendor `.item` never stretched
 *    to fill its Bootstrap column, so a 3-line wrapped value (long facility/
 *    owner names) made just ONE card in the row visibly taller than its
 *    neighbours even though `.row` already equal-heights the *columns*.
 *    `.item.h-100` (added in the markup) + `height: 100%` here makes the
 *    bordered card box itself fill that stretched column.
 * 2) The vendor rule sets `.item { align-items: center }` — fine for a
 *    short one-line value, but on a wrapped 3-line value it verticaly
 *    centers the fixed 73px icon badge against the whole card height,
 *    so the icon visually drifts down next to the MIDDLE text line instead
 *    of sitting beside the label like on every other (short) card. Pin it
 *    to the top instead, and give content/icon a real gap so they're never
 *    flush against each other.
 * 3) 5 facts under the old `col-md-6 col-xl-3` (4-up at xl) split 4 + 1,
 *    stranding the last card alone on its own row. Markup now uses
 *    `col-md-6 col-xl-4` (3-up at xl) — a 3 + 2 split, no orphan card.
 * -------------------------------------------------------------------------- */
.portfolio-single .portfoloi_single_items .item {
    align-items: flex-start;
    gap: 20px;
    height: 100%;
}
.portfolio-single .portfoloi_single_items .item .content {
    flex: 1 1 auto;
    min-width: 0;
}
.portfolio-single .portfoloi_single_items .item .content span {
    display: block;
    color: var(--span);
    line-height: 1.5;
    word-break: break-word;
}
.portfolio-single .portfoloi_single_items .item .icon {
    flex: 0 0 auto;
    background-color: var(--ac-navy);
}

/* --------------------------------------------------------------------------
 * portfolio/show — closing CTA row ("Benzer Proje İçin Teklif Alın" +
 * phone). Three defects, both scoped to `.portfolio-single` only — `.btn-one`
 * / `.btn-two` are shared vendor classes used all over the theme (hero,
 * home sections, cta-inline partial), so an unscoped fix here would reshape
 * buttons this task doesn't own.
 *
 * 1) Vendor `.btn-one` ships `clip-path: polygon(7% 0, 100% 0%, 93% 100%,
 *    0% 100%)` — a trapezoid "skewed parallelogram" cut. Reset to a plain
 *    rounded rect for this button only.
 * 2) An earlier brand-colour pass (`.btn-one, .btn-two { background:
 *    var(--ac-navy) }` above) was written for `.btn-one`'s SOLID look but
 *    swept `.btn-two` up too — `.btn-two` is meant to stay the vendor's
 *    OUTLINE variant (transparent bg, filled only on hover), and the
 *    vendor's own text colour for it is already navy
 *    (`color: var(--secondary-color)`), so navy-on-navy made the phone
 *    button unreadable. Restore the outline (transparent bg, navy border)
 *    default state here; vendor `.btn-two:hover` already turns the label
 *    white against the fill, so no extra hover rule is needed.
 * 3) The two buttons sat as bare inline `<a>`s (`ms-2` for spacing) — the
 *    clipped trapezoid button made that inline flow look like it collided
 *    with its neighbour. Markup now wraps both in a flex row with a real
 *    gap (`d-flex flex-wrap align-items-center gap-3`) that wraps cleanly
 *    on mobile.
 * -------------------------------------------------------------------------- */
.portfolio-single .btn-one {
    clip-path: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.portfolio-single .btn-two {
    background: transparent;
    border-color: var(--ac-navy);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.portfolio-single .btn-two:hover {
    background: var(--ac-navy);
    border-color: var(--ac-navy);
}

/* --------------------------------------------------------------------------
 * services/show — main column body (modules/services/show.blade.php). The
 * vendor sheet has ZERO rules for `.service-single .left-item` beyond the
 * generic `.image img { width:100% }` and global `h3`/`p` tags, so:
 *   1) the hero image ships flush square — every other image on this theme
 *      (cards, portfolio, about) gets a radius/shadow treatment, this one
 *      didn't;
 *   2) the excerpt swapped from a `<h3 class="text-capitalize">` to a plain
 *      lead `<p>` (see blade comment) needs its own typography since it's no
 *      longer riding the generic `h3` rule;
 *   3) the body copy is now real `<p>` tags (was one nl2br()'d blob) and
 *      needs spacing between them.
 * -------------------------------------------------------------------------- */
.service-single .left-item .image img {
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.service-single .left-item .ac2-service-lead {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--heading-color);
}
.service-single .left-item .ac2-service-body p {
    margin-bottom: 20px;
    color: var(--paragraph);
}
.service-single .left-item .ac2-service-body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * services/show — sidebar "Have any questions? call us today!" widget
 * (`.item-two`, modules/services/show.blade.php). Its background was already
 * remapped off the grey `service/single5.jpg` placeholder to a navy gradient
 * above — but the phone icon and the little divider line under the heading
 * both read `color`/`background-color: var(--primary-color)`, which this
 * tenant's brand panel maps to the SAME navy as the card background. Icon and
 * divider were rendering navy-on-navy, i.e. invisible. Give them a colour
 * that actually contrasts with the card.
 * -------------------------------------------------------------------------- */
.service-single .right-item .item-two i {
    color: var(--ac-green);
}
.service-single .right-item .item-two .line .sm_line,
.service-single .right-item .item-two .line .big_line {
    background-color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
 * services/portfolio index+show closing CTA band — `partials/cta-inline.
 * blade.php`'s `.video-area` section (no `.ac2-cta` modifier, unlike
 * sections/contact_cta.blade.php which already has its own fix above). Same
 * vendor bug: `.video-area a { width:90px; height:90px; border-radius:50%;
 * border:3px solid }` was designed for a single circular video-play button
 * and turns cta-inline's real "Teklif Alın" / phone anchors into 90px
 * circles that clip their own label. Reset the same six properties the
 * ac2-cta fix resets, scoped to the two real button classes cta-inline
 * actually emits (`.btn-one` / `.btn-two`) so a genuine circular video-play
 * link elsewhere would be unaffected.
 * -------------------------------------------------------------------------- */
.video-area .btn-one,
.video-area .btn-two {
    width: auto;
    height: auto;
    line-height: normal;
    border-radius: 0;
    border: none;
    font-size: inherit;
}

/* --------------------------------------------------------------------------
 * Un-skew `.btn-one` theme-wide.
 *
 * The vendor sheet clips every primary button into a parallelogram
 * (`clip-path: polygon(7% 0, 100% 0%, 93% 100%, 0% 100%)`). The user flagged
 * this as broken on the portfolio CTA, and it was fixed there — but scoping it
 * to `.portfolio-single` left the SAME button skewed on the services pages and
 * anywhere else `partials/cta-inline.blade.php` renders, so identical CTAs
 * looked different page to page. Apply it everywhere for one consistent button
 * shape. (The template itself already does exactly this for `.header-one
 * .btn-one { clip-path: none }`, so an un-clipped variant is a shape the design
 * system already contains.)
 * -------------------------------------------------------------------------- */
.btn-one {
    clip-path: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* --------------------------------------------------------------------------
 * home_about — başlık üstü marka işareti (sections/home_about.blade.php).
 * Logo, üst etiket ("KURUMSAL") ile başlığın üzerinde sola hizalı durur;
 * `brand.logo` boşsa blok hiç basılmaz, dolayısıyla boş kutu oluşmaz.
 * -------------------------------------------------------------------------- */
.ac2-about-brandmark {
    margin-bottom: 18px;
}
.ac2-about-brandmark img {
    max-width: 210px;
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 575px) {
    .ac2-about-brandmark img { max-width: 170px; }
}

/* --------------------------------------------------------------------------
 * Hizmetler listesi (modules/services/index.blade.php) — EŞİT KART BOYU.
 * Şablonun `.page-service .item` kartı normal blok akışında; başlık uzunluğu,
 * özet uzunluğu ve görselin en-boy oranı karta göre değiştiği için ızgaradaki
 * kartlar farklı boylarda kalıyor ve satırlar tırtıklı görünüyordu. Kartı flex
 * sütuna çevirip "Detaylı Bilgi" bağlantısını `margin-top:auto` ile en alta
 * sabitliyoruz; görsel de sabit orana oturtuluyor, böylece tüm kartlar
 * hizalanıyor. Ayrıca `h-100` (blade) kartı sütun yüksekliğine yayıyor.
 * -------------------------------------------------------------------------- */
.page-service .row > [class*="col-"] {
    display: flex;
}
.page-service .item {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.page-service .item .image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
}
.page-service .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Özet, başlıklar farklı satır sayısında olsa bile butonu aşağı iter. */
.page-service .item p {
    flex: 1 1 auto;
}
.page-service .item .btn-three {
    margin-top: auto;
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
 * Sayfalama (modules/portfolio/index.blade.php) — v1 temasındaki
 * `.ac-pagination` ile aynı görsel dil, marka renklerine bağlı.
 * -------------------------------------------------------------------------- */
.ac2-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 50px;
    padding-bottom: 65px;
}
.ac2-pagination a,
.ac2-pagination span {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border, #d9d9d9);
    background: var(--white, #fff);
    color: var(--heading-color);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ac2-pagination a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.ac2-pagination .is-current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.ac2-pagination .is-disabled {
    opacity: 0.4;
    cursor: default;
}

/* --------------------------------------------------------------------------
 * Kurumsal (sections/about.blade.php) — bölüme görsel girilmediğinde metin
 * `col-12` ile tam genişliğe alınır. 1400px konteynerde tek satır çok uzayıp
 * okunmaz hâle geldiği için satır uzunluğu sınırlanıyor; blok ortalanmak
 * yerine sola hizalı kalır ki başlık/logo hizası bozulmasın.
 * -------------------------------------------------------------------------- */
.page-about .col-12 > .right-item {
    max-width: 78ch;
}

/* --------------------------------------------------------------------------
 * Panelden girilen zengin metin (sections/about.blade.php → .right-item .content,
 * sections/block_text.blade.php vb.). Şablonun style.css'i GLOBAL olarak
 * `li { list-style: none }` ve `ul { padding: 0 }` uyguluyor (menü/footer
 * listeleri için). Bu yüzden editörde madde işaretli liste yazıldığında sayfada
 * işaretsiz, girintisiz düz satırlar çıkıyordu. Zengin metin bloklarında listeyi
 * normal davranışına döndürüyoruz — menülere dokunmadan, yalnız bu kapsamda.
 * -------------------------------------------------------------------------- */
.page-about .right-item .content ul,
.page-about .right-item .content ol {
    list-style: revert;
    padding-left: 1.3em;
    margin: 0 0 1.15em;
}
.page-about .right-item .content ul li,
.page-about .right-item .content ol li {
    list-style: revert;
    margin-bottom: 0.5em;
    color: var(--paragraph, #303030);
}
.page-about .right-item .content h3 {
    color: var(--heading-color);
    font-size: 22px;
    font-weight: 700;
    margin: 1.5em 0 0.6em;
}
.page-about .right-item .content p {
    margin-bottom: 1.15em;
}

/* --------------------------------------------------------------------------
 * home_about sağ sütun görseli (sections/home_about.blade.php).
 * Bu bölümün görseli fotoğraf değil, markanın LOGOSU (yatay, ~4.4:1 oranında).
 * Sütun genişliğine yayıldığında devasa duruyordu; okunur bir logo boyutuna
 * sabitleyip sütunda ortalıyoruz. Fotoğraf konulursa da makul kalır.
 * -------------------------------------------------------------------------- */
.about-two .image img {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
@media (max-width: 991px) {
    .about-two .image img { max-width: 340px; }
}

/* --------------------------------------------------------------------------
 * Revize 2026-10-14 — anasayfa header'ı.
 * Header'ın beyaz zemini artık sol taraftaki lacivert panelin üstüne de
 * uzanıyor (tam genişlik beyaz bar); logo her zaman primary renkli sürüm
 * (Setting brand.logo). Lacivert panel header'ın altından başlıyormuş gibi
 * görünür; panelin içindeki dikey yazıyı header'ın altına indiriyoruz.
 * -------------------------------------------------------------------------- */
.header-two {
    background-color: var(--white);
    box-shadow: 0 1px 0 rgba(37, 40, 106, 0.08);
}
.header-two .light_logo {
    display: none;
}
.header-two .black_logo {
    display: block;
}
.banner-two .stroke-text {
    top: 130px;
    height: calc(100% - 170px);
}

/* --------------------------------------------------------------------------
 * Revize 2026-10-14 — hero slider yazı kutusu.
 * Önceden aktif slaytta kendiliğinden beliriyordu; artık yalnızca fare
 * slaytın üzerine gelince aşağıdan kayarak çıkıyor. Zemin yarı saydam lacivert.
 * Dokunmatik cihazlarda hover olmadığı için eski davranış (aktif slaytta
 * görünür) korunuyor.
 * -------------------------------------------------------------------------- */
.banner-two .item .image .content {
    background-color: rgba(42, 61, 120, 0.78);
    background-color: color-mix(in srgb, var(--primary-color) 78%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
@media (hover: hover) {
    .banner-two .swiper-slide.swiper-slide-active .item .content {
        bottom: -200px;
        opacity: 0;
    }
    .banner-two .swiper-slide .item:hover .content,
    .banner-two .swiper-slide .item:focus-within .content,
    .banner-two .swiper-slide.swiper-slide-active .item:hover .content,
    .banner-two .swiper-slide.swiper-slide-active .item:focus-within .content {
        bottom: 0;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
 * Revize 2026-10-14 (2) — hero slider resimleri menü hesaba katılarak dikeyde
 * ortalı. Hero ekran yüksekliğini kaplar; menünün (fixed header, ~98px)
 * altında kalan alanda resim satırının üstünde ve altında eşit boşluk kalır.
 * Ok butonları alttaki boşluğun ortasına alınır. Yalnızca masaüstü
 * (≥1200px): daha küçük ekranlarda şablonun kendi düzeni geçerli.
 * -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .banner-two {
        --ac-hdr: 98px;
        --ac-gap: clamp(64px, 9vh, 110px);
        min-height: 100vh;
        min-height: 100svh;
        padding-top: calc(var(--ac-hdr) + var(--ac-gap));
        padding-bottom: var(--ac-gap);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .banner-two .item .image img {
        height: clamp(380px, calc(100svh - var(--ac-hdr) - 2 * var(--ac-gap)), 700px);
    }
    .banner-two .banner_two_brand {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--ac-gap);
        padding: 0;
        display: flex;
        align-items: center;
        z-index: 2;
    }
}
/* <1200px: fixed header burada ~116px ve resmin üstünü örtüyordu (şablon
   105px boşluk bırakıyor). Resmi header'ın altından başlat, oklar alanını
   da dengeli boşluğa indir. */
@media (max-width: 1199.98px) {
    .banner-two {
        padding-top: calc(116px + 24px);
    }
    .banner-two .banner_two_brand {
        padding: 24px 0 32px;
    }
}

/* --------------------------------------------------------------------------
 * Revize 2026-10-14 (3) — sol paneldeki dikey "ANADOLU ÇEVRE" yazısı panele
 * sığsın. Yazı boyu ≈ 8.6 × font-size + ~50px harf aralığı; font-size'ı kutunun yüksekliğinden
 * türetiyoruz (container query), desteklemeyen tarayıcıda vh formülü.
 * -------------------------------------------------------------------------- */
.banner-two .stroke-text {
    container-type: size;
}
.banner-two .stroke-text span {
    font-size: min(150px, 9vw, calc((100vh - 250px) / 8.8));
    font-size: min(150px, 9vw, calc((100cqh - 60px) / 8.8));
}