/* =====================================================================
   Talamus — Theme Refinement Layer
   Loaded AFTER style.css. Preserves the existing blue corporate identity
   (#36d1dc → #5b86e5 gradient, coral #fc6c54 accent) and refines
   typography, spacing rhythm, depth, interaction states and a11y.
   Only compositor-friendly properties (transform/opacity) are animated.
   ===================================================================== */

:root {
    /* Brand palette (extracted from existing style.css) */
    --t-blue: #5b86e5;
    --t-blue-deep: #3a63c0;
    --t-cyan: #36d1dc;
    --t-accent: #fc6c54;
    --t-accent-deep: #e9512f;
    --t-gradient: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);

    /* Neutrals */
    --t-ink: #1d2330;
    --t-body: #4a5366;
    --t-muted: #7d818f;
    --t-line: #e6eaf2;
    --t-surface: #ffffff;
    --t-surface-alt: #f6f9fe;

    /* Typography rhythm */
    --t-lh-body: 1.7;
    --t-lh-tight: 1.18;
    --t-track-eyebrow: 0.14em;

    /* Spacing scale */
    --t-space-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);

    /* Radius */
    --t-radius-sm: 8px;
    --t-radius: 14px;
    --t-radius-lg: 22px;
    --t-radius-pill: 999px;

    /* Elevation */
    --t-shadow-sm: 0 2px 8px rgba(29, 35, 48, 0.06);
    --t-shadow: 0 12px 30px -12px rgba(58, 99, 192, 0.28);
    --t-shadow-lg: 0 24px 50px -18px rgba(58, 99, 192, 0.38);

    /* Motion */
    --t-fast: 160ms;
    --t-normal: 300ms;
    --t-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   Base typography — better readability + clear hierarchy
   --------------------------------------------------------------------- */
body {
    line-height: var(--t-lh-body);
    color: var(--t-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--t-ink);
    line-height: var(--t-lh-tight);
    letter-spacing: -0.01em;
}

p {
    color: var(--t-body);
}

/* Section eyebrow/subtitle accents (the small label above headings) */
.ss_title span,
.ss_heading span {
    letter-spacing: var(--t-track-eyebrow);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--t-blue);
}

/* ---------------------------------------------------------------------
   Section rhythm — consistent vertical spacing
   --------------------------------------------------------------------- */
.spacer_top { padding-top: var(--t-space-section); }
.spacer_bottom { padding-bottom: var(--t-space-section); }

/* ---------------------------------------------------------------------
   Buttons — designed hover / focus / active states
   --------------------------------------------------------------------- */
.white_btn,
.ss_btn,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--t-radius-pill);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform var(--t-fast) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease),
                background-color var(--t-fast) var(--t-ease),
                color var(--t-fast) var(--t-ease);
    will-change: transform;
    cursor: pointer;
}

.white_btn:hover,
.ss_btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-shadow);
}

.white_btn:active,
.ss_btn:active,
button[type="submit"]:active,
input[type="submit"]:active {
    transform: translateY(-1px);
}

/* White CTA pill ("Teklif Al", slider button) — keep readable brand-blue
   text on its white background in EVERY context, including the mobile
   nav drawer where it would otherwise inherit white link colour. */
.white_btn,
.ss_header .ss_menu .white_btn,
.ss_menu li a.white_btn {
    background-color: #fff;
    color: var(--t-blue);
}

.white_btn:hover,
.ss_header .ss_menu .white_btn:hover,
.ss_menu li a.white_btn:hover {
    color: var(--t-blue-deep);
}

/* Primary section button keeps brand gradient with stronger presence */
.ss_btn {
    background-image: var(--t-gradient);
    color: #fff;
    border: none;
    padding: 0.85rem 2rem;
}

.ss_btn:hover {
    color: #fff;
    box-shadow: var(--t-shadow-lg);
}

/* ---------------------------------------------------------------------
   Navbar — refined links with animated underline + clear states
   --------------------------------------------------------------------- */
.ss_menu ul li a {
    position: relative;
    transition: color var(--t-fast) var(--t-ease);
    padding-bottom: 4px;
}

.ss_menu ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-normal) var(--t-ease);
}

.ss_menu ul li a:hover::after {
    transform: scaleX(1);
}

/* Template dims the hovered link to a low-contrast grey-blue (#5b769e) which
   reads badly on the blue header — keep hovered links crisp white. */
.ss_header .ss_menu li a:hover,
.ss_menu ul li a:hover { color: #fff !important; }

/* …but the white "Teklif Al" pill must keep brand-blue text on hover
   (white-on-white would be invisible). */
.ss_header .ss_menu li a.white_btn:hover,
.ss_menu ul li a.white_btn:hover { color: var(--t-blue-deep) !important; }

/* No underline/border under the logo on hover */
.ss_logo a,
.ss_logo a:hover {
    border-bottom: 0 !important;
    text-decoration: none !important;
}
.ss_logo a::after { display: none !important; }

/* The "Teklif Al" pill in the nav (white_btn) shouldn't get the underline */
.ss_menu .white_btn::after { display: none; }

/* ---------------------------------------------------------------------
   Hero — stronger text contrast + breathing room
   --------------------------------------------------------------------- */
.ss_banner_left h1 {
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 12px rgba(29, 35, 48, 0.12);
}

.ss_banner_left p {
    margin-bottom: 1.5rem;
}

.ss_banner_left p .text-dark {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Slider controls — on-brand arrows + pagination
   --------------------------------------------------------------------- */
.swiper-button-next,
.swiper-button-prev {
    width: 46px !important;
    height: 46px !important;
    margin-top: -23px;
    border-radius: 50%;
    /* Swiper 4 ships the arrow as a background-image SVG; drop it and draw our
       own FontAwesome chevron so the button isn't a blank white circle. */
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: var(--t-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease),
                background-color var(--t-fast) var(--t-ease);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.09);
    background-color: #fff;
    box-shadow: var(--t-shadow);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    color: var(--t-blue);
}

.swiper-button-prev::after { content: "\f053"; }  /* chevron-left */
.swiper-button-next::after { content: "\f054"; }  /* chevron-right */

.swiper-pagination-bullet {
    background: var(--t-blue);
    opacity: 0.35;
    transition: opacity var(--t-fast) var(--t-ease),
                transform var(--t-fast) var(--t-ease);
}

.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.25);
    background: var(--t-blue);
}

/* ---------------------------------------------------------------------
   Cards — consistent radius, depth and hover lift
   --------------------------------------------------------------------- */
.ss_box_bg {
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    transition: transform var(--t-normal) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease);
    will-change: transform;
}

.ss_box_bg:hover {
    transform: translateY(-6px);
    box-shadow: var(--t-shadow);
}

/* Partner logos — graceful resting state, full color + lift on hover */
.ss_section_eight .ss_two_sec {
    border-radius: var(--t-radius);
    transition: transform var(--t-normal) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease);
    padding: 0.5rem 1rem;
}

.ss_section_eight .ss_two_sec img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--t-normal) var(--t-ease),
                opacity var(--t-normal) var(--t-ease),
                transform var(--t-fast) var(--t-ease);
}

.ss_section_eight .ss_two_sec:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.04);
}

/* ---------------------------------------------------------------------
   Forms — newsletter + contact inputs
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {
    transition: border-color var(--t-fast) var(--t-ease),
                box-shadow var(--t-fast) var(--t-ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--t-blue);
    box-shadow: 0 0 0 3px rgba(91, 134, 229, 0.18);
    outline: none;
}

/* Collapsible FAQ rows (Neden Biz?) — clearer interactive affordance */
.collapsible {
    cursor: pointer;
    transition: color var(--t-fast) var(--t-ease);
}

.collapsible:hover {
    color: var(--t-blue);
}

.content {
    transition: max-height var(--t-normal) var(--t-ease);
}

/* =====================================================================
   PROFESSIONAL SECTION POLISH (homepage + inner pages)
   Elevates layout, hierarchy and depth while keeping the existing
   vector illustrations and blue identity untouched.
   ===================================================================== */

/* --- Centered section titles ("Hizmetlerimiz", "Projelerimiz", …) --- */
h3.ss_h3_center {
    font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--t-ink);
    margin-bottom: 2.75rem;
}
h3.ss_h3_center::before,
h3.ss_h3_center::after {
    background: var(--t-gradient) !important;
    height: 3px !important;
    width: 34px !important;
    border-radius: 3px;
    opacity: 0.9;
}

/* Eyebrow + big title pairing (rewards / ongoing projects) */
.happy_clients h3,
.ss_section_eight h3.ss_h3_center {
    text-transform: uppercase;
    letter-spacing: 0.16em !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 0.75rem !important;
}
.happy_clients h1,
.ss_section_eight h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
}

/* --- Left-aligned section headings (company profile, projects) --- */
.ss_three_right h3,
.ss_five_right h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--t-ink);
    margin-bottom: 0.75rem;
    padding-bottom: 0.9rem;
    position: relative;
}
.ss_three_right h3::after,
.ss_five_right h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--t-gradient);
}
.ss_five_right h4 {
    color: var(--t-blue);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
}
.ss_five_right h5,
.ss_pv_left h5.collapsible {
    font-weight: 700;
    color: var(--t-ink);
}

/* --- Stats / credibility band (counters) --- */
.counter_div {
    padding: 2.5rem 1.25rem !important;
    border-radius: var(--t-radius-lg) !important;
    border: 1px solid var(--t-line) !important;
    box-shadow: var(--t-shadow) !important;
    transition: transform var(--t-normal) var(--t-ease), box-shadow var(--t-normal) var(--t-ease) !important;
}
.counter_div:hover {
    transform: translateY(-6px);
    box-shadow: var(--t-shadow-lg) !important;
}
.ss_about_counter .ss_count {
    font-size: clamp(2.6rem, 2rem + 2.2vw, 3.6rem) !important;
    font-weight: 800 !important;
    background-image: var(--t-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-top: 1rem !important;
}
.counter_div h2 {
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--t-muted);
    letter-spacing: 0.02em;
    margin-top: 0.35rem;
}

/* --- Service cards — elevated, consistent, designed --- */
.ss_four_left .ss_box_bg {
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    padding: 1.15rem 1.25rem !important;
}
.ss_four_left .ss_box_bg:hover {
    border-color: var(--t-blue) !important;
    transform: translateY(-5px);
    box-shadow: var(--t-shadow) !important;
}
.ss_four_one img,
.ss_four_one svg {
    transition: transform var(--t-normal) var(--t-ease);
}
.ss_box_bg:hover .ss_four_one img {
    transform: scale(1.08);
}
.ss_four_two h5 {
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.02rem;
    margin-bottom: 0.35rem;
}
.ss_four_two p {
    font-size: 0.9rem;
    color: var(--t-body);
    line-height: 1.55;
    margin-bottom: 0;
}
.ss_four_two p small a,
.ss_four_two a {
    color: var(--t-blue);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Project / service bullet links --- */
.ss_five_right p a[href="/hizmetlerimiz"] {
    display: inline-block;
    color: var(--t-body);
    font-weight: 500;
    padding: 0.2rem 0;
    transition: color var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
}
.ss_five_right p a[href="/hizmetlerimiz"]:hover {
    color: var(--t-blue);
    transform: translateX(4px);
}

/* --- Partner logos: framed surface for a tidier strip --- */
.ss_section_eight .ss_two_sec {
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    box-shadow: var(--t-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}

/* --- Ongoing-project cards — cleaner surface --- */
.ss_eight .ss_product_content {
    border-radius: var(--t-radius);
}

/* --- Newsletter band — premium gradient surface --- */
.ss_newsletter .ss_footer_news,
.ss_foot_news_one {
    border-radius: var(--t-radius-lg);
}

/* =====================================================================
   PROFESSIONAL POLISH — ROUND 2 (readability, cards, accordion, hero nav)
   ===================================================================== */

/* --- Kill justified text everywhere; left-align reads far cleaner --- */
.text-justify,
.ss_banner_left p,
.ss_three_right p,
.ss_five_right p,
.ss_pv_left p,
.ss_pv_left .content p,
.ss_about_main p {
    text-align: left !important;
}

/* --- Body copy rhythm --- */
.ss_three_right p,
.ss_five_right p,
.ss_pv_left p {
    color: var(--t-body);
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* --- "Hakkımızda" rich content: custom gradient check-bullets ---
   NB: the CMS content ships bare <li> (no <ul>), so target <li> directly. */
.ss_three_right ul,
.ss_five_right ul,
.ss_ab_right ul {
    list-style: none;
    margin: 1.1rem 0 1.6rem;
    padding-left: 0;
}
.ss_three_right li,
.ss_five_right li,
.ss_ab_right li {
    list-style: none;
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 0.85rem;
    line-height: 1.5;
    color: var(--t-ink);
    font-weight: 500;
}
.ss_three_right li::before,
.ss_five_right li::before,
.ss_ab_right li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.62rem;
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image: var(--t-gradient);
    border-radius: 50%;
    box-shadow: 0 3px 8px -2px rgba(58, 99, 192, 0.45);
}
.ss_three_right h4,
.ss_three_right h5,
.ss_three_right h6 {
    margin: 1.4rem 0 0.6rem;
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.1rem;
}

/* --- Service card "Hizmet Detayı" link — clean, on its own line --- */
.ss_service_link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--t-blue);
    transition: gap var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease);
}
.ss_service_link i { font-size: 0.78rem; transition: transform var(--t-fast) var(--t-ease); }
.ss_service_link:hover { color: var(--t-blue-deep); gap: 0.65rem; }
.ss_service_link:hover i { transform: translateX(3px); }
.ss_four_two { display: flex; flex-direction: column; }

/* --- "Neden Biz?" accordion — designed collapsible rows --- */
.ss_pv_left h5.collapsible {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    padding: 0.95rem 1.15rem;
    margin-top: 0.65rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-ink);
    background: var(--t-surface);
    transition: border-color var(--t-fast) var(--t-ease),
                color var(--t-fast) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease);
}
.ss_pv_left h5.collapsible:hover,
.ss_pv_left h5.collapsible.active {
    border-color: var(--t-blue);
    color: var(--t-blue);
    box-shadow: var(--t-shadow-sm);
}
.ss_pv_left .content {
    padding: 0 1.15rem !important;
}
.ss_pv_left .content p {
    padding: 0.85rem 0 0.5rem;
    color: var(--t-body);
    line-height: 1.7;
    margin: 0;
}

/* --- Ongoing-project cards — single clean vertical card (no floating) --- */
.ss_eight.ss_box_wbg {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-sm) !important;
    overflow: hidden;
    transition: transform var(--t-normal) var(--t-ease), box-shadow var(--t-normal) var(--t-ease);
    margin-bottom: 24px;
}
.ss_eight.ss_box_wbg:hover {
    transform: translateY(-5px);
    box-shadow: var(--t-shadow) !important;
}
.ss_eight > a {
    display: block;
}
.ss_eight img {
    width: 100% !important;
    height: 210px !important;
    object-fit: contain !important;
    /* Logos normalised to transparent background → clean white logo panel */
    background: #fff !important;
    padding: 1rem 1.75rem !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--t-line);
}
.ss_eight p { padding-top: 0 !important; }
/* De-float the content panel so it sits cleanly below the logo */
.ss_eight .ss_product_content {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1.25rem 1.45rem 1.5rem !important;
    background: #fff !important;
}
.ss_eight .ss_product_content h5 {
    margin-bottom: 0.75rem;
}
.ss_eight .ss_product_content h5 a {
    color: var(--t-ink);
    font-weight: 700;
    font-size: 1.05rem;
}
.ss_eight .ss_product_content p {
    color: var(--t-body);
    line-height: 1.7;
    margin: 0;
}
.ss_eight .ss_product_content p strong { color: var(--t-ink); }

/* --- Hero slider arrows: move to bottom-right so they never cover copy --- */
.ss_banner_main .swiper-button-prev,
.ss_banner_main .swiper-button-next {
    top: auto !important;
    bottom: 150px;
    margin-top: 0 !important;
}
.ss_banner_main .swiper-button-next { left: auto !important; right: 26px !important; }
.ss_banner_main .swiper-button-prev { left: auto !important; right: 84px !important; }

/* =====================================================================
   INNER PAGE — hero header (shared by all inner pages)
   ===================================================================== */
.s_header {
    background: linear-gradient(120deg, #29408f 0%, #3a63c0 48%, #36d1dc 130%) !important;
    position: relative;
    overflow: hidden;
}
.s_header::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -140px;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
    pointer-events: none;
}
.s_header_main .ss_breadcrumb {
    padding: 2.5rem 0 2.75rem !important;
    position: relative;
    z-index: 1;
}
.ss_page_title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 2px 18px rgba(20, 30, 60, 0.18);
}
/* Breadcrumb as a refined glass pill */
.ss_crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1.05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 0.85rem;
    line-height: 1;
}
.ss_crumb a {
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity var(--t-fast) var(--t-ease);
}
.ss_crumb a::after { display: none; }
.ss_crumb a:hover { opacity: 0.82; }
.ss_crumb .ss_crumb_sep {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.6);
}
.ss_crumb span {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* =====================================================================
   INNER PAGE — Firma Profili
   ===================================================================== */
.ss_ab_right h3,
.ss_pv_left h3 {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--t-ink);
    position: relative;
    padding-bottom: 0.9rem;
    margin-bottom: 1.15rem;
}
.ss_ab_right h3::after,
.ss_pv_left h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--t-gradient);
}
/* Section head (eyebrow + title + accent) */
.ss_exec .ss_sec_head { margin-bottom: 2rem; }
.ss_exec .ss_sec_head--mt { margin-top: 4rem; }
.ss_sec_head .ss_eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--t-blue);
    margin-bottom: 0.5rem;
}
.ss_sec_head h2 {
    font-weight: 800;
    color: var(--t-ink);
    letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    margin: 0;
    position: relative;
    padding-bottom: 0.9rem;
}
.ss_sec_head h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--t-gradient);
}

/* Executive (chairman) message card — balanced, photo contained */
.ss_exec_card {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 2.75rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    padding: 2.75rem 3rem;
    box-shadow: var(--t-shadow);
}
.ss_exec_media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    display: block;
}
.ss_exec_body { position: relative; }
.ss_exec_body .ss_quote {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--t-cyan);
    opacity: 0.32;
    margin-bottom: 0.4rem;
}
.ss_exec_body h2,
.ss_exec_body h3,
.ss_exec_body h4,
.ss_exec_body h5 {
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.25rem;
    margin: 0 0 1rem;
}
.ss_exec_body h2::before, .ss_exec_body h2::after,
.ss_exec_body h3::before, .ss_exec_body h3::after,
.ss_exec_body h4::before, .ss_exec_body h4::after,
.ss_exec_body h5::before, .ss_exec_body h5::after { display: none !important; }
.ss_exec_body p {
    color: var(--t-body);
    line-height: 1.85;
    text-align: left;
    margin: 0 0 1rem;
}
.ss_exec_body p:last-child {
    margin: 1.4rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--t-line);
    font-weight: 700;
    color: var(--t-ink);
}
/* kill template h3::before/::after decoration leaking onto value cards */
.ss_mv_card h3::before,
.ss_mv_card h3::after { display: none !important; }

/* Mission / Vision value cards */
.ss_mv_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.ss_mv_card {
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    padding: 2.4rem;
    box-shadow: var(--t-shadow-sm);
    transition: transform var(--t-normal) var(--t-ease), box-shadow var(--t-normal) var(--t-ease);
}
.ss_mv_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--t-shadow);
}
.ss_mv_icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background-image: var(--t-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    box-shadow: var(--t-shadow-sm);
}
.ss_mv_icon i { color: #fff; font-size: 1.5rem; }
.ss_mv_card h3 {
    font-weight: 800;
    color: var(--t-ink);
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}
.ss_mv_card p {
    color: var(--t-body);
    line-height: 1.85;
    margin: 0;
    text-align: left;
}

@media (max-width: 860px) {
    .ss_exec_card { grid-template-columns: 1fr; }
    .ss_exec_media { min-height: 240px; }
    .ss_mv_grid { grid-template-columns: 1fr; }
}
.ss_wchoose_one h2,
.ss_pv_l_content h2 {
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.2rem;
    margin-bottom: 0.55rem;
}
.ss_wchoose_one h2 { margin-top: 1.1rem; }
.ss_wchoose_one h2:first-child { margin-top: 0; }

/* Hakkımızda content sub-headings (h2 subtitle, h4 "Faaliyet alanlarımız;") */
.ss_ab_right h2 {
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.25rem;
    margin: 0 0 1rem;
}
.ss_ab_right h4 {
    margin: 1.6rem 0 0.6rem;
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.15rem;
}

/* Large content panels (Yönetim, Misyon/Vizyon) — calm, no hover jump */
.ss_wchoose_us .ss_box_bg {
    padding: 1.85rem !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
}
.ss_wchoose_us .ss_box_bg:hover {
    transform: none;
    box-shadow: var(--t-shadow-sm) !important;
    border-color: var(--t-line) !important;
}

/* Projelerimiz mini cards — keep subtle lift, tidy content */
.ss_pv_l_content { padding: 0.25rem 0 0.25rem 0.25rem; }
.ss_pv_left .ss_box_bg { border: 1px solid var(--t-line) !important; }

/* =====================================================================
   INNER PAGE — Hizmetlerimiz (services grid)
   ===================================================================== */
.ss_sec_head--center { text-align: center; margin-bottom: 2.85rem; }
.ss_sec_head--center h2 { display: inline-block; }
.ss_sec_head--center h2::after { left: 50%; transform: translateX(-50%); }

.ss_services_list .row > [class*="col-"] { display: flex; }
.ss_services_list .ss_pv_left { width: 100%; margin-bottom: 1.6rem; display: flex; }
.ss_svc_card {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    width: 100%;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--t-shadow-sm);
    transition: transform var(--t-normal) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease),
                border-color var(--t-normal) var(--t-ease);
}
.ss_svc_card:hover {
    transform: translateY(-5px);
    border-color: var(--t-blue);
    box-shadow: var(--t-shadow);
}
.ss_svc_icon {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--t-radius);
    background: var(--t-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem;
    transition: transform var(--t-normal) var(--t-ease);
}
.ss_svc_card:hover .ss_svc_icon { transform: scale(1.05); }
.ss_svc_icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ss_svc_body { min-width: 0; }
.ss_svc_body h3 {
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.12rem;
    margin: 0 0 0.5rem;
}
.ss_svc_body p {
    color: var(--t-body);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 0.7rem;
    text-align: left;
}

@media (max-width: 575px) {
    .ss_svc_card { flex-direction: column; }
    .ss_svc_icon { width: 80px; height: 80px; }
}

/* =====================================================================
   INNER PAGE — Projelerimiz intro visual (hands image flush to right edge)
   ===================================================================== */
.ss_proj_intro { position: relative; overflow: hidden; }
@media (min-width: 992px) {
    .ss_proj_intro .ss_intro_visual {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 55%;
        max-width: none;
        padding: 1.5rem 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .ss_proj_intro .ss_intro_visual .ss_pv_right {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin: 0;
    }
    .ss_proj_intro .ss_intro_visual img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: block;
    }
}
@media (max-width: 991px) {
    .ss_intro_visual { padding-right: 0 !important; }
    .ss_intro_visual img { width: 100%; display: block; margin-left: auto; }
}

/* =====================================================================
   INNER PAGE — Projelerimiz (project cards)
   ===================================================================== */
.ss_projects .row > [class*="col-"] { display: flex; }
.ss_proj_card {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1.6rem;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    box-shadow: var(--t-shadow-sm);
    transition: transform var(--t-normal) var(--t-ease),
                box-shadow var(--t-normal) var(--t-ease),
                border-color var(--t-normal) var(--t-ease);
}
.ss_proj_card:hover {
    transform: translateY(-5px);
    border-color: var(--t-blue);
    box-shadow: var(--t-shadow);
}
.ss_proj_media {
    flex-shrink: 0;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--t-line);
}
.ss_proj_body {
    padding: 1.5rem 1.6rem;
    min-width: 0;
    align-self: center;
}
.ss_proj_body h3 {
    font-weight: 700;
    color: var(--t-ink);
    font-size: 1.1rem;
    margin: 0 0 0.55rem;
}
.ss_proj_body h3::before,
.ss_proj_body h3::after { display: none !important; }
.ss_proj_loc {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--t-muted);
    font-size: 0.85rem;
    margin-bottom: 0.65rem;
}
.ss_proj_loc i { color: var(--t-blue); }
.ss_proj_detail,
.ss_proj_detail p {
    color: var(--t-body);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
    text-align: left;
}
.ss_proj_detail strong { color: var(--t-ink); }

/* Logo variant — contained on a soft panel */
.ss_proj_card--logo .ss_proj_media { background: #fff; padding: 1.25rem; }
.ss_proj_card--logo .ss_proj_media img { max-width: 100%; max-height: 110px; object-fit: contain; }

/* Photo variant — fill the media panel */
.ss_proj_card--photo .ss_proj_media { background: var(--t-surface-alt); padding: 0; align-self: stretch; }
.ss_proj_card--photo .ss_proj_media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }

@media (max-width: 575px) {
    .ss_proj_card { flex-direction: column; }
    .ss_proj_media { width: 100%; border-right: none; border-bottom: 1px solid var(--t-line); }
    .ss_proj_card--photo .ss_proj_media img { height: 180px; }
}

/* =====================================================================
   INNER PAGE — Şubelerimiz (branch cards)
   ===================================================================== */
.ss_branch_card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    box-shadow: var(--t-shadow-sm);
    margin-bottom: 2rem;
    transition: box-shadow var(--t-normal) var(--t-ease), transform var(--t-normal) var(--t-ease);
}
.ss_branch_card:hover {
    box-shadow: var(--t-shadow);
    transform: translateY(-4px);
}
.ss_branch_photo { position: relative; }
.ss_branch_photo img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.ss_branch_badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-image: var(--t-gradient);
    color: #fff;
    padding: 0.32rem 0.95rem;
    border-radius: var(--t-radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: var(--t-shadow-sm);
}
.ss_branch_meta { padding: 1.85rem; }
.ss_branch_meta h3 {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--t-ink);
    letter-spacing: -0.02em;
    margin: 0 0 1.4rem;
}
.ss_branch_contacts { list-style: none; margin: 0; padding: 0; }
.ss_branch_contacts li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
}
.ss_branch_contacts li:last-child { margin-bottom: 0; }
.ss_c_ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--t-surface-alt);
    color: var(--t-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.ss_branch_contacts strong {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-muted);
    margin-bottom: 0.15rem;
}
.ss_branch_contacts p { margin: 0; color: var(--t-ink); font-weight: 500; line-height: 1.45; }
.ss_branch_contacts a { color: var(--t-ink); transition: color var(--t-fast) var(--t-ease); }
.ss_branch_contacts a:hover { color: var(--t-blue); }
.ss_branch_map { position: relative; min-height: 100%; background: var(--t-surface-alt); }
.ss_branch_map iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px;
    border: 0 !important;
    display: block;
}

@media (max-width: 860px) {
    .ss_branch_card { grid-template-columns: 1fr; }
    .ss_branch_map iframe { min-height: 300px; }
}

/* =====================================================================
   INNER PAGE — Duyurular (announcement cards)
   ===================================================================== */
.ss_news_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.ss_news_card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    box-shadow: var(--t-shadow-sm);
    transition: transform var(--t-normal) var(--t-ease), box-shadow var(--t-normal) var(--t-ease);
}
.ss_news_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--t-shadow);
}
.ss_news_media {
    height: 200px;
    background: var(--t-surface-alt);
    overflow: hidden;
}
.ss_news_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s var(--t-ease);
}
.ss_news_card:hover .ss_news_media img { transform: scale(1.05); }
.ss_news_ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--t-gradient);
}
.ss_news_ph i { font-size: 2.5rem; color: #fff; opacity: 0.9; }
.ss_news_body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ss_news_date {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--t-blue);
    font-weight: 600;
    margin-bottom: 0.65rem;
}
.ss_news_body h3 {
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--t-ink);
    margin: 0 0 0.6rem;
    line-height: 1.35;
}
.ss_news_body h3::before,
.ss_news_body h3::after { display: none !important; }
.ss_news_body p {
    color: var(--t-body);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 991px) { .ss_news_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ss_news_grid { grid-template-columns: 1fr; } }

/* =====================================================================
   INNER PAGE — Teklif Al (quote request form)
   ===================================================================== */
.ss_section_one .ss_box_wbg {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    box-shadow: var(--t-shadow);
}
.ss_section_one .ss_contact_right { padding: 2.5rem 2.75rem; }
.ss_section_one .ss_contact_right h3 {
    font-weight: 800 !important;
    color: var(--t-ink);
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
}
.ss_section_one .ss_contact_right h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--t-gradient);
}
.ss_section_one .ss_contact_right h6 {
    color: var(--t-body);
    line-height: 1.7;
    font-size: 0.95rem;
    font-weight: 400;
}
.ss_section_one .ss_contact_right hr {
    border: 0;
    border-top: 1px solid var(--t-line);
    margin: 1.4rem 0 1.75rem;
}
.ss_section_one .form-group { margin-bottom: 1.15rem; }
.ss_section_one label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--t-ink) !important;
    margin-bottom: 0.4rem;
    display: inline-block;
}
.ss_section_one .form-control {
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius-sm) !important;
    padding: 0.7rem 0.9rem !important;
    height: auto !important;
    font-size: 0.95rem;
    color: var(--t-ink);
    background: #fff;
    transition: border-color var(--t-fast) var(--t-ease), box-shadow var(--t-fast) var(--t-ease);
}
.ss_section_one .form-control:focus {
    border-color: var(--t-blue) !important;
    box-shadow: 0 0 0 3px rgba(91, 134, 229, 0.16) !important;
    outline: none;
}
.ss_section_one textarea.form-control { min-height: 120px; resize: vertical; }
.ss_section_one .submitForm { margin-top: 0.5rem; }

/* Right contact panel */
.ss_section_one .ss_contact_left { border-radius: var(--t-radius-lg); overflow: hidden; height: 100%; }

/* Form success message (contact + quote) */
.ss_form_success {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(54, 209, 220, 0.12);
    border: 1px solid rgba(54, 209, 220, 0.4);
    color: #128391;
    font-weight: 600;
    padding: 0.9rem 1.15rem;
    border-radius: var(--t-radius-sm);
    margin-bottom: 1.4rem;
}
.ss_form_success i { color: var(--t-cyan); }

@media (max-width: 991px) {
    .ss_section_one .ss_contact_right { padding: 1.75rem; }
}

/* ---------------------------------------------------------------------
   Empty state (e.g. Duyurular when no records exist)
   --------------------------------------------------------------------- */
.ss_empty_state .ss_empty_inner {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.5rem;
}

.ss_empty_icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-image: var(--t-gradient);
    box-shadow: var(--t-shadow);
}

.ss_empty_icon i {
    font-size: 38px;
    color: #fff;
}

.ss_empty_state h3 {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.ss_empty_state p {
    color: var(--t-muted);
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------------
   Accessibility — keyboard focus + reduced motion
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.white_btn:focus-visible,
.ss_btn:focus-visible {
    outline: 3px solid var(--t-accent);
    outline-offset: 3px;
    border-radius: var(--t-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Ensure WOW.js (animate.css) elements never stay invisible */
    .wow {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =====================================================================
   FOOTER MAP — adres altına gömülü harita (iletişimdeki ile aynı kaynak)
   ===================================================================== */
.ss_foot_map {
    margin-top: 1.25rem;
    border-radius: var(--t-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    line-height: 0;
}

.ss_foot_map iframe,
.ss_foot_map > * {
    display: block;
    width: 100% !important;
    height: 220px !important;
    border: 0 !important;
    filter: grayscale(0.15);
}