/* Public site pieces on top of the Paces template (layouts/frontend.php).
   Only the template's own color variables are used, so the site follows the
   theme's default palette (and its dark mode). */

.site-body {
    background-color: var(--theme-body-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

/* Header links to the home sections (Özellikler, Planlar, SSS): glide there. (The header isn't sticky: it scrolls
   away with the page, so only a little room is left above the section.) */
html:has(.site-body) {
    scroll-behavior: smooth;
}

.site-main [id] {
    scroll-margin-top: 16px;
}

/* Site theme color: #ff9800 (public site only — the panels keep the template color).
   The template's buttons carry fixed colors, so they are restated here. */
.site-body {
    --theme-primary: #ff9800;
    --theme-primary-rgb: 255, 152, 0;
    --theme-primary-text-emphasis: #c77700;
    --theme-primary-bg-subtle: #fff3e0;
    --theme-primary-border-subtle: #ffd699;
    --theme-link-color: #e68900;
    --theme-link-color-rgb: 230, 137, 0;
    --theme-link-hover-color: #c77700;
    --theme-link-hover-color-rgb: 199, 119, 0;
}

.site-body .btn-primary {
    --theme-btn-color: #fff;
    --theme-btn-bg: #ff9800;
    --theme-btn-border-color: #ff9800;
    --theme-btn-hover-color: #fff;
    --theme-btn-hover-bg: #f08c00;
    --theme-btn-hover-border-color: #f08c00;
    --theme-btn-focus-shadow-rgb: 255, 167, 38;
    --theme-btn-active-color: #fff;
    --theme-btn-active-bg: #e68900;
    --theme-btn-active-border-color: #e68900;
    --theme-btn-disabled-color: #fff;
    --theme-btn-disabled-bg: #ff9800;
    --theme-btn-disabled-border-color: #ff9800;
}

.site-body .btn-outline-primary {
    --theme-btn-color: #e68900;
    --theme-btn-border-color: #ff9800;
    --theme-btn-hover-color: #fff;
    --theme-btn-hover-bg: #ff9800;
    --theme-btn-hover-border-color: #ff9800;
    --theme-btn-focus-shadow-rgb: 255, 152, 0;
    --theme-btn-active-color: #fff;
    --theme-btn-active-bg: #ff9800;
    --theme-btn-active-border-color: #ff9800;
    --theme-btn-disabled-color: #ff9800;
    --theme-btn-disabled-border-color: #ff9800;
}

.site-body .form-control:focus,
.site-body .form-select:focus {
    border-color: rgba(255, 152, 0, .55);
    box-shadow: 0 0 0 .2rem rgba(255, 152, 0, .15);
}

.site-body .form-check-input:checked {
    background-color: #ff9800;
    border-color: #ff9800;
}

/* Header: dark, one piece with the hero below it (#1e1f27). */
.site-header {
    background-color: #1e1f27;
}

.site-header .navbar-toggler {
    color: #fff;
}

.site-header .navbar-collapse {
    color: #e5e7eb;
}

.site-brand img {
    max-height: 40px;
    max-width: 200px;
    object-fit: contain;
}

.site-nav-link {
    font-weight: 600;
    color: #e5e7eb;
    border-radius: 50rem;
    padding: .45rem 1rem !important;
    transition: color .3s ease; /* soft, like the hero buttons (.site-hero-btn) */
}

/* (.site-header .navbar-nav …: stronger than the template's navbar active color, which made it faint)
   Only the text turns orange, no background behind it. */
.site-header .navbar-nav .site-nav-link:hover,
.site-header .navbar-nav .site-nav-link:focus,
.site-header .navbar-nav .site-nav-link.active {
    color: var(--theme-primary);
    background-color: transparent;
}

/* Hero: on the header's dark background; its bottom edge is slanted like "Hangi işletmeler kullanabilir?"
   (.site-bizband-body): higher on the right, lowest on the left. */
.site-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 8rem; /* room under the content, so the slant doesn't cut into it */
    margin-top: -1px; /* tuck under the header (same color): the clipped top edge left a thin light line between them */
    background: #1e1f27;
    color: #e5e7eb;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}

.site-hero > .container {
    position: relative;
    z-index: 1;
}

.site-hero-title {
    color: #fff;
    font-size: clamp(1.9rem, 2.9vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.035em;
}

/* Optional line above the hero title (Site Ayarları → Anasayfa → Üst Başlık): smaller, theme color. */
.site-hero-pretitle {
    display: block;
    margin-bottom: .35rem;
    color: var(--theme-primary);
    font-size: .62em;
    letter-spacing: -.02em;
}

/* The title's last two words on their own line, same color as the rest of the title. */
.site-hero-accent {
    display: block;
}

.site-hero-lead {
    color: #c7cbd6;
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 36rem;
}

/* Every button on the public site has the hero buttons' corners (also over the pill utility). */
.site-hero-btn,
.site-body .btn,
.site-body .btn.rounded-pill {
    border-radius: .6rem !important;
}

/* Header and hero buttons (Giriş Yap, Kayıt Ol, the language button …): square corners, like the plans' buttons. */
.site-header .btn,
.site-header .btn.rounded-pill,
.site-body .site-hero-btn {
    border-radius: 0 !important;
}

/* …and hollow: only a border. The light ones (Giriş Yap, language …) white, turning orange on hover like the
   hero's second button; the orange one (Kayıt Ol / Çıkış Yap, also the hero's) orange, filling orange on hover. */
.site-header .btn-light {
    --theme-btn-color: #fff;
    --theme-btn-bg: transparent;
    --theme-btn-border-color: rgba(255, 255, 255, .35);
    --theme-btn-hover-color: var(--theme-primary);
    --theme-btn-hover-bg: transparent;
    --theme-btn-hover-border-color: var(--theme-primary);
    --theme-btn-active-color: var(--theme-primary);
    --theme-btn-active-bg: transparent;
    --theme-btn-active-border-color: var(--theme-primary);
    box-shadow: none;
    outline: 0 !important; /* the template's dashed outline on light buttons */
}

.site-header .btn-primary,
.btn-primary.site-hero-btn {
    --theme-btn-color: var(--theme-primary);
    --theme-btn-bg: transparent;
    --theme-btn-border-color: var(--theme-primary);
    --theme-btn-hover-color: #fff;
    --theme-btn-hover-bg: var(--theme-primary);
    --theme-btn-hover-border-color: var(--theme-primary);
    --theme-btn-active-color: #fff;
    --theme-btn-active-bg: var(--theme-primary);
    --theme-btn-active-border-color: var(--theme-primary);
}

/* Hero and header buttons change color softly on hover (like the "Nasıl çalışır?" sign-up link). */
.site-hero-btn,
.site-header .btn {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.site-hero-btn-ghost {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.site-hero-btn-ghost:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.site-hero-checks li {
    color: #c7cbd6;
    font-size: .9rem;
}

.site-hero-checks i {
    margin-right: .4rem;
    color: var(--theme-primary);
}

.site-hero-visual {
    position: relative;
    max-width: 580px;
    margin-left: auto;
}

/* Inner pages (İletişim, Hakkımızda, KVKK …: frontend/_page_hero.php): the title band on the hero's dark
   background with the same slanted bottom edge (higher on the right, lowest on the left). */
.site-page-hero {
    position: relative;
    margin-top: -1px; /* tuck under the header (same color) */
    padding: 3.5rem 0 6rem;
    background: #1e1f27;
    color: #c7cbd6;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
}

.site-page-hero-title {
    margin: 0 0 .6rem;
    color: #fff;
    font-size: clamp(1.75rem, 2.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.site-page-hero .breadcrumb-item,
.site-page-hero .breadcrumb-item a,
.site-page-hero .breadcrumb-item + .breadcrumb-item::before {
    color: #c7cbd6;
}

.site-page-hero .breadcrumb-item a:hover {
    color: var(--theme-primary);
}

.site-page-hero .breadcrumb-item.active {
    color: var(--theme-primary);
}

.site-page-hero-subtitle {
    max-width: 640px;
    margin: 1rem auto 0;
    font-size: 1.05rem;
}

.site-page-body {
    padding-top: 2.5rem;
}

@media (max-width: 575.98px) {
    .site-page-hero {
        padding: 2.5rem 0 4.5rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
    }
}

/* The panel's Masalar cards (home.php; their look is admin-custom.css .cafe-card), stacked over each other: one on
   the left and one on the right, turned a little and set back, one in front. The site's rounder buttons (.site-body .btn) are undone so they look as in the panel. */
.site-cards {
    --card-w: 230px;
    position: relative;
    height: 400px;
    color: var(--theme-body-color);
    text-align: left;
}

.site-cards-item {
    position: absolute;
    top: 40px;
    width: var(--card-w);
}

/* Dark (the panel's dark mode, data-bs-theme on .site-cards), a shade lighter than the hero so they stand out. */
.site-cards-item .cafe-card {
    --theme-card-bg: #2a2b36;
    --theme-card-cap-bg: #2a2b36;
    background-color: #2a2b36;
    margin: 0;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .4);
}

.site-cards-item.is-left {
    left: 0;
    z-index: 1;
    transform: rotate(-7deg);
}

.site-cards-item.is-right {
    right: 0;
    z-index: 1;
    transform: rotate(7deg);
}

.site-cards-item.is-front {
    top: 0;
    left: 50%;
    z-index: 2;
    margin-left: calc(var(--card-w) / -2);
}

/* The cards behind always a little dimmed, so the front one stands out. */
.site-cards-item.is-left,
.site-cards-item.is-right {
    filter: brightness(.65);
}

.site-body .site-cards .btn {
    border-radius: var(--theme-btn-border-radius) !important;
}

.site-body .site-cards .btn.rounded-pill,
.site-body .site-cards .btn.rounded-circle,
.site-body .site-cards .cafe-free-pill {
    border-radius: 50% !important;
}

/* Phones: the cards smaller (from their top edge), so all three still fit side by side. */
@media (max-width: 575.98px) {
    .site-cards { height: 320px; }
    .site-cards-item.is-left { transform-origin: top left; transform: rotate(-7deg) scale(.78); }
    .site-cards-item.is-right { transform-origin: top right; transform: rotate(7deg) scale(.78); }
    .site-cards-item.is-front { transform-origin: top center; transform: scale(.78); }
}

/* "Müşteri Yorumları" + "Sıkça Sorulan Sorular" (side by side): small line above, title below. */
.site-side-pretitle {
    display: block;
    color: var(--theme-secondary-color, #6b7280);
    font-size: 1.05rem;
}

.site-side-title {
    margin: 0;
    color: #111827;
    font-size: 1.85rem;
    font-weight: 700;
}

/* Testimonial card: dark, slanted top edge, the photo sitting on the high corner. */
.site-testimonials {
    position: relative;
    margin-top: 3rem;
    padding: 5rem 2rem 2rem;
    color: #111827;
}

.site-testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    background: transparent;
    clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
}

/* All comments share one grid cell; the ones not shown are only invisible (not removed), so the card is always
   as tall as the longest comment and nothing below it moves when they change (home-testimonials.js). */
.site-testimonials {
    display: grid;
}

.site-testimonial {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
}

.site-testimonial[hidden] {
    display: flex !important; /* Bootstrap's reboot: [hidden] { display: none !important } */
    visibility: hidden;
}

/* Changing comments cross-fade in place (the photo and the name don't move): the old one fades out while the new
   one fades in. (visibility switches at the end of the fade-out, so the leaving one stays visible while it fades.) */
.site-testimonial {
    opacity: 1;
    transition: opacity .6s ease, visibility .6s;
}

.site-testimonial[hidden] {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .site-testimonial {
        transition: none;
    }
}

/* The name stays at the bottom of the card whatever the comment's length. */
.site-testimonial .site-testimonial-name {
    margin-top: auto;
    padding-top: 2rem;
}

.site-testimonial-photo {
    position: absolute;
    top: -8.25rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 6rem;
    height: 6rem;
    border: 5px solid var(--theme-body-bg);
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(var(--theme-primary-rgb)), rgba(var(--theme-primary-rgb), .7));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    font-size: 1.75rem;
    font-weight: 800;
}

.site-section-alt .site-testimonial-photo {
    border-color: var(--theme-secondary-bg);
}

.site-testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-testimonial-text {
    min-height: 6rem;
    padding: 0 1rem;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.55;
    text-align: center;
}

.site-testimonial-name {
    margin-top: 2rem;
    min-height: 3.25rem;
    text-align: right;
}

.site-testimonial-name strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
}

.site-testimonial-name span {
    color: var(--theme-primary);
    font-size: 1.05rem;
}

.site-testimonial-thumbs {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    display: flex;
    gap: .35rem;
}

.site-testimonial-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(var(--theme-primary-rgb)), rgba(var(--theme-primary-rgb), .7));
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    opacity: .6;
    cursor: pointer;
    transition: border-color .3s ease, opacity .3s ease; /* soft, like the hero buttons (.site-hero-btn) */
}

.site-testimonial-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-testimonial-thumb.is-active,
.site-testimonial-thumb:hover,
.site-testimonial-thumb:focus-visible {
    border-color: var(--theme-primary);
    opacity: 1;
}

@media (max-width: 575.98px) {
    .site-testimonial-thumbs {
        /* relative + z-index: above the card's background layer (::before); static, the active (fully opaque)
           thumb was drawn under it and disappeared — the others only showed because their opacity lifts them. */
        position: relative;
        inset: auto; /* the desktop's bottom/left (absolute) would shift it here */
        z-index: 1;
        grid-area: 2 / 1; /* under the comments' shared cell */
        justify-content: center;
        margin-top: 1rem;
    }

    .site-testimonial-name {
        text-align: center;
    }
}

/* FAQ: native <details> accordion; the open question turns dark like the testimonial card. */
.site-faq {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.site-faq-item {
    overflow: hidden;
    border-radius: .85rem;
    background-color: var(--theme-secondary-bg);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.site-section-alt .site-faq-item {
    background-color: var(--theme-body-bg);
    box-shadow: none;
}

.site-faq-item summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.1rem 1.25rem;
    color: #111827;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.site-faq-item summary::-webkit-details-marker {
    display: none;
}

.site-faq-item summary span {
    flex: 1;
}

.site-faq-icon {
    color: var(--theme-primary);
    font-size: 1.25rem;
}

.site-faq-toggle {
    color: var(--theme-secondary-color, #9ca3af);
    font-size: 1.1rem;
    transition: transform .2s ease;
}

/* Open: orange. The colors fade (home-faq.js animates the height); .is-closing = on its way shut. */
.site-faq-item,
.site-faq-item summary,
.site-faq-icon {
    transition: background-color .32s ease, color .32s ease;
}

.site-faq-item[open]:not(.is-closing) {
    background-color: rgb(var(--theme-primary-rgb));
}

.site-faq-item[open]:not(.is-closing) summary,
.site-faq-item[open]:not(.is-closing) .site-faq-icon {
    color: #fff;
}

.site-faq-item[open]:not(.is-closing) .site-faq-toggle {
    color: #fff;
    transform: rotate(45deg);
}

.site-faq-toggle {
    transition: transform .32s ease, color .32s ease;
}

.site-faq-answer {
    padding: 0 1.25rem 1.25rem 3.15rem;
    color: rgba(255, 255, 255, .92);
    line-height: 1.6;
}

/* Scroll reveal ("Nasıl çalışır?" rows, Yorumlar + SSS; home-reveal.js): hidden only once the script is running. */
.site-reveal-ready .site-reveal {
    opacity: 0;
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}

.site-reveal-ready .site-reveal-left {
    transform: translateX(-80px);
}

.site-reveal-ready .site-reveal-right {
    transform: translateX(80px);
}

.site-reveal-ready .site-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* The text follows the picture a moment later. */
.site-reveal-ready .site-reveal + .site-reveal {
    transition-delay: .15s;
}

/* No sideways scrollbar while the columns start off to the side. */
#nasil-calisir,
.site-social {
    overflow-x: hidden;
}

/* Yorumlar + SSS on the plans' dark background: a band with a slanted top edge (like .site-plans::before);
   the headings and the comment turn light, the questions stay white cards. */
.site-social {
    position: relative;
    padding-top: 7.5rem !important;
    padding-bottom: 5rem !important;
}

.site-social::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #1e1f27;
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
}

.site-social > .container {
    position: relative;
}

.site-social .site-side-pretitle {
    color: var(--theme-primary, #ff9800);
}

.site-social .site-side-title,
.site-social .site-testimonials {
    color: #fff;
}

.site-social .site-testimonial-text {
    color: #e5e7eb;
}

/* The comment in its own card (slanted top edge, a shade lighter than the band); the photo sits on the card's
   high corner, ringed in the band's color so it reads as cut into the card's edge. */
.site-social .site-testimonials {
    margin-top: 0; /* close to the heading (was 3rem); the photo sits to the right of the title */
}

/* The comments' heading: less space under it (the card's slanted edge already starts lower on the left). */
.site-social .site-side-head:has(+ .site-testimonials) {
    margin-bottom: .25rem !important;
}

/* Phones: the heading takes the whole width, so the photo (top right of the card) would sit on the title. */
@media (max-width: 575.98px) {
    .site-social .site-testimonials {
        margin-top: 3.5rem;
    }
}

/* The card dark, a shade lighter than the band, with an orange line on top; light text, orange accents. */
.site-social .site-testimonials::before {
    border-radius: 0;
    background: linear-gradient(160deg, #2b2c36, #24252e); /* a shade lighter than the band (#1e1f27) */
}

.site-social .site-testimonial-text {
    color: #e5e7eb;
}

.site-social .site-testimonial-name span {
    color: var(--theme-primary, #ff9800);
}

.site-social .site-testimonial-photo {
    right: .5rem;
    border: 0; /* the picture fills the whole circle, an orange line around it */
    box-shadow: 0 0 0 5px rgb(var(--theme-primary-rgb)), 0 12px 28px rgba(0, 0, 0, .35);
}

.site-social .site-faq-item {
    background-color: #fff;
    box-shadow: none;
}

.site-social .site-faq-item[open]:not(.is-closing) {
    background-color: rgb(var(--theme-primary-rgb));
}

@media (max-width: 991.98px) {
    .site-social { padding-top: 5.5rem !important; }
    .site-social::before { clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
}

/* Row pictures ("Nasıl çalışır?", "Panelden görüntüler"): plain, no frame, shadow or rounded corners.
   The row's color (icon, number, list) comes from a .site-biz-{color} class (--biz-rgb). */
.site-shot-wrap {
    position: relative;
}

.site-shot {
    position: relative;
}

.site-shot-phone {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}


.site-screen-num {
    color: rgba(var(--biz-rgb), .4);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
}

.site-screen-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    margin-bottom: .5rem;
    border-radius: .75rem;
    background-color: rgba(var(--biz-rgb), .07);
    font-weight: 500;
}

.site-screen-list li i {
    flex-shrink: 0;
    color: rgb(var(--biz-rgb));
    font-size: 1.15rem;
}

/* Sections */
.site-section-alt {
    background-color: var(--theme-secondary-bg);
}

.site-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background-color: rgba(var(--theme-primary-rgb), .1);
    color: var(--theme-primary);
    font-size: 1.5rem;
}

/* "Hangi işletmeler için?" cards: one accent color per business type (--biz-rgb). */
.site-biz {
    --biz-rgb: 59, 130, 246;
    position: relative;
    overflow: hidden;
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
    background-color: var(--theme-secondary-bg);
    border: 0;
    box-shadow: 0 6px 18px rgba(var(--biz-rgb), .08);
    transition: box-shadow .2s ease;
}

.site-biz::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--biz-rgb), .14), rgba(var(--biz-rgb), 0) 70%);
    pointer-events: none;
}

.site-biz:hover {
    box-shadow: 0 18px 40px rgba(var(--biz-rgb), .16);
}

/* Card colors (Anasayfa İçeriği → Renk; App\Services\HomeContent::COLORS / COLOR_RGB) */
.site-biz-orange { --biz-rgb: 255, 152, 0; }
.site-biz-blue { --biz-rgb: 59, 130, 246; }
.site-biz-indigo { --biz-rgb: 99, 102, 241; }
.site-biz-purple { --biz-rgb: 139, 92, 246; }
.site-biz-amber { --biz-rgb: 245, 158, 11; }
.site-biz-cyan { --biz-rgb: 6, 182, 212; }
.site-biz-green { --biz-rgb: 16, 185, 129; }
.site-biz-rose { --biz-rgb: 244, 63, 94; }
.site-biz-teal { --biz-rgb: 20, 184, 166; }

/* On a white (alt) section the cards take the page's gray so they still stand out */
.site-section-alt .site-biz {
    background-color: var(--theme-body-bg);
}

.site-biz-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgb(var(--biz-rgb)), rgba(var(--biz-rgb), .7));
    box-shadow: 0 10px 24px rgba(var(--biz-rgb), .35);
    color: #fff;
    font-size: 2rem;
}

/* "Nasıl çalışır?" rows: "ADIM 1" above the title, in the row's color. */
.site-step-label {
    display: block;
    color: rgb(var(--biz-rgb));
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Numbers band above the footer (values: Site Ayarları → Anasayfa, else real counts). */
/* Light, like the rest of the site: gray cards on white, theme-colored icon tiles and a soft glow. */
.site-stats {
    background-color: var(--theme-body-bg);
}

/* When the band falls on a white turn (sections alternate), the cards go gray instead. */
.site-stats.site-section-alt {
    background-color: var(--theme-secondary-bg);
}

/* Number cards like the business tiles / the comment card: dark, a plain orange icon, white figures. */
.site-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    overflow: hidden;
    padding: 1.25rem 1.5rem;
    border-radius: .2rem;
    background: linear-gradient(160deg, #2b2c36, #24252e);
}

.site-stat-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary, #ff9800);
    font-size: 2.4rem;
}

.site-stat-value {
    color: var(--theme-primary, #ff9800);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
}

.site-stat-label {
    color: #fff;
    font-size: .95rem;
}

/* Pricing: the highlighted card uses the theme color. */
/* The plans sit on a white section: plain cards get a light frame and shadow. */
#fiyatlar .card:not(.site-price-featured) {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.site-price-featured {
    border: 2px solid var(--theme-primary) !important;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(var(--theme-primary-rgb), .15);
}

.contact-map {
    display: block;
    width: 100%;
    height: 300px;
}

.site-page-card .page-content img {
    max-width: 100%;
    height: auto;
}

/* Footer: same dark tone as the panel's sidebar. */
.site-footer {
    background-color: #1e1f27;
    color: #fff;
}

.site-footer-logo {
    max-height: 40px;
    max-width: 200px;
    object-fit: contain;
}

.site-footer-muted {
    color: rgba(255, 255, 255, .6);
}

.site-footer-link {
    color: rgba(255, 255, 255, .7);
    transition: color .3s ease; /* soft, like the hero buttons (.site-hero-btn) */
}

.site-footer-link:hover {
    color: #fff;
}

.site-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Cookie notice (partials/cookie-notice.php): a bar fixed at the bottom until accepted. */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: #1c212b;
    color: #e8eaee;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .25);
}

.cookie-notice-text {
    margin: 0;
    max-width: 52rem;
    font-size: .9rem;
    line-height: 1.5;
}

.cookie-notice-link {
    color: var(--theme-primary);
    text-decoration: underline;
    white-space: nowrap;
}

.cookie-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

.cookie-notice-button {
    flex-shrink: 0;
}

/* Reject / Preferences / Accept look identical (KVKK çerez rehberi: eşit renk, büyüklük, punto). */
.cookie-notice-button.btn-outline-light {
    min-width: 9.5rem;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
    background: transparent;
    opacity: 1;
}

.cookie-notice-button.btn-outline-light:hover,
.cookie-notice-button.btn-outline-light:focus {
    color: #1c212b;
    background: #fff;
    border-color: #fff;
}

/* Preferences panel */
.cookie-prefs[hidden] {
    display: none !important;
}

.cookie-prefs {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cookie-prefs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.cookie-prefs-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 46rem;
    max-height: 100%;
    background: #1c212b;
    color: #e8eaee;
    border-radius: .75rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
    outline: 0;
}

.cookie-prefs-head,
.cookie-prefs-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
}

.cookie-prefs-head {
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.cookie-prefs-foot {
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cookie-prefs-title {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
}

.cookie-prefs-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
}

.cookie-prefs-body {
    overflow-y: auto;
    padding: 1.25rem;
    font-size: .9rem;
    line-height: 1.5;
}

.cookie-prefs-intro {
    margin-top: 0;
}

.cookie-prefs-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cookie-prefs-section p {
    margin: .25rem 0 .75rem;
}

.cookie-prefs-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-prefs-section-head h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}

.cookie-prefs-label {
    margin: 0;
    cursor: pointer;
}

.cookie-prefs-always {
    font-size: .8rem;
    font-weight: 600;
    color: #7ee0a3;
    white-space: nowrap;
}

.cookie-prefs-table {
    width: 100%;
    font-size: .8rem;
    border-collapse: collapse;
}

.cookie-prefs-table th,
.cookie-prefs-table td {
    padding: .4rem .5rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cookie-prefs-table th {
    color: #fff;
    white-space: nowrap;
}

.cookie-prefs-table code {
    color: #ffd479;
    word-break: break-all;
}

body.cookie-prefs-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .cookie-notice {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cookie-notice-actions {
        flex-direction: column;
    }

    .cookie-prefs-foot {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 991.98px) {
    .site-hero {
        /* Stacked (text, then the picture): the hero is tall, so a fixed-height slant (not 16% of it) under the picture. */
        padding: 64px 0 5rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
    }

    .site-hero-visual {
        margin-right: auto;
    }

    .site-hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Phones: the template's containers have 10 px side padding (--theme-gutter-x 1.25rem) but the site's rows use
   wider gutters (g-4, g-5 = 3.75rem), and the slide-in sections (site-reveal) start off to the side, so the page
   was wider than the screen and wobbled sideways. On phones the rows use the containers' gutter; the sections clip
   what slides in. (The template's Bootstrap variables are prefixed --theme-, not --bs-.) */
.site-main,
.site-footer {
    overflow-x: clip;
}

@media (max-width: 575.98px) {
    .site-body .row.g-4,
    .site-body .row.g-5 {
        --theme-gutter-x: 1.25rem;
    }
}

/* Plans (home.php): a dark band with a slanted top edge behind the heading and the cards' upper part; white
   cards with an italic uppercase name, arrow features, a big italic price and a dark button with a slanted
   lighter end; the "En Popüler" plan dark, taller, orange. */
.site-plans {
    position: relative;
    padding: 0 0 5rem;
}

.site-plans::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 640px;
    background-color: #1e1f27;
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
}

.site-plans-head {
    padding: 8rem 0 3.5rem;
    text-align: center;
}

.site-plans-title {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    color: var(--theme-primary, #ff9800);
    font-size: 2.6rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -.01em;
    /* The same slope as the band's top edge (it rises 70px — 40px on tablets/phones — across the width):
       atan2 gives that exact angle at any screen width; the fixed angle is for browsers without it. */
    --plans-rise: 70px;
    transform: rotate(-2.8deg);
    transform: rotate(calc(-1 * atan2(var(--plans-rise), 100vw)));
    position: relative;
}

.site-plans-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 4px;
    margin-left: -40px;
    border-radius: 2px;
    background-color: var(--theme-primary, #ff9800);
    /* Straight: turned back by the title's tilt (only the text follows the band's edge). */
    transform: rotate(2.8deg);
    transform: rotate(atan2(var(--plans-rise), 100vw));
}

.site-plans-subtitle {
    max-width: 600px;
    margin: 0 auto;
    color: #e5e7eb;
    font-size: 1rem;
    line-height: 1.6;
}

.site-plans-row {
    position: relative;
    max-width: 1140px;
    margin-inline: auto;
}

/* All cards as tall as the tallest; the price and the button sit at the bottom. */
.site-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.5rem 2rem;
    background-color: #fff;
    color: #6b7280;
    box-shadow: 0 18px 40px rgba(17, 24, 39, .08);
}

.site-plan-price {
    margin-top: auto;
}

/* Desktop: the popular plan is taller than the others at the top and at the bottom. */
@media (min-width: 992px) {
    .site-plan.is-featured {
        height: calc(100% + 3.5rem);
        margin-top: -1.75rem;
        padding-top: 3.5rem;
        padding-bottom: 4.25rem; /* 2.5rem like the others + the 1.75rem it reaches lower: the buttons stay level */
    }
}

.site-plan.is-featured {
    z-index: 1;
    border-top: 3px solid var(--theme-primary, #ff9800);
    background-color: #1e1f27;
    color: #c7cbd6;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .3);
}

.site-plan-name {
    position: relative;
    margin: 0 0 1rem;
    padding-bottom: .65rem;
    color: #1f2433;
    font-size: 1.85rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}

.site-plan-name::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background-color: #1f2433;
}

.site-plan.is-featured .site-plan-name {
    color: var(--theme-primary, #ff9800);
}

.site-plan.is-featured .site-plan-name::after {
    background-color: var(--theme-primary, #ff9800);
}

.site-plan-desc {
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(107, 114, 128, .18);
    font-size: .92rem;
}

.site-plan.is-featured .site-plan-desc {
    border-bottom-color: rgba(255, 255, 255, .1);
}

.site-plan-features {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.site-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: .55rem;
    font-size: 1rem;
}

.site-plan-features i {
    flex-shrink: 0;
    margin-top: .1rem;
    color: var(--theme-success, #10b981);
    font-size: 1.25rem;
}

.site-plan.is-featured .site-plan-features li {
    color: #fff;
}

.site-plan.is-featured .site-plan-features i {
    color: var(--theme-primary, #ff9800);
}

.site-plan-price {
    margin-bottom: 1.25rem;
}

.site-plan-amount {
    display: block;
    color: #1f2433;
    font-size: 2.4rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.1;
    white-space: nowrap;
}

.site-plan.is-featured .site-plan-amount {
    color: var(--theme-primary, #ff9800);
}

.site-plan-period {
    font-size: .9rem;
}

.site-plan-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1rem;
    background-color: #1e1f27;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
}

.site-plan-btn span {
    position: relative;
    z-index: 1;
}

/* Hover: the dark buttons turn orange, the orange one (popular plan) a deeper orange — softly, like the hero
   buttons (.site-hero-btn); the button stays in place. */
.site-plan-btn {
    transition: color .3s ease, background-color .3s ease, filter .3s ease;
}

.site-plan-btn:hover,
.site-plan-btn:focus-visible {
    color: #fff;
    background-color: var(--theme-primary, #ff9800);
}

.site-plan.is-featured .site-plan-btn {
    background-color: var(--theme-primary, #ff9800);
}

.site-plan.is-featured .site-plan-btn:hover,
.site-plan.is-featured .site-plan-btn:focus-visible {
    filter: brightness(.9);
}

/* The free plan: never bought — passive, as in the member's plan picker (admin-custom.css .member-plan.is-passive):
   a solid light grey card (not see-through: the dark band runs behind it) with its contents dimmed and grey, an
   outlined mark ("Kullanımda" / "Kullanıldı") in place of the button. */
.site-plan.is-passive {
    background-color: #eceef1;
    filter: grayscale(1);
    cursor: not-allowed;
}

.site-plan.is-passive > * {
    opacity: .55;
}

.site-plan-btn.is-passive,
.site-plan-btn.is-passive:hover {
    border: 2px solid rgba(31, 36, 51, .25);
    background-color: transparent;
    color: #6b7280;
    cursor: not-allowed;
}

@media (max-width: 991.98px) {
    .site-plans::before { height: 520px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
    .site-plans-title { --plans-rise: 40px; }
    .site-plans-head { padding: 6rem 0 2.5rem; }
    .site-plans-row { row-gap: 1.25rem !important; }
}

@media (max-width: 575.98px) {
    .site-plans-title { font-size: 1.9rem; }
    .site-plan { padding: 2rem 1.5rem; }
    .site-plan-amount { font-size: 2rem; }
}

/* "Nasıl çalışır?" (home.php): heading on the left, one card per step
   (the first one dark, with a sign-up link). */
.site-steps-pretitle {
    display: block;
    color: var(--theme-secondary-color, #6b7280);
    font-size: 1rem;
}

.site-steps-title {
    margin: 0;
    color: #3d4458;
    font-size: 1.6rem;
    font-weight: 700;
}

.site-step {
    padding: 2rem 1.9rem;
    border-radius: .25rem;
    background-color: var(--theme-secondary-bg, #fff);
    color: #6b7280;
}

.site-section-alt .site-step {
    background-color: var(--theme-body-bg, #f5f6fa);
}

.site-step-icon {
    display: block;
    margin-bottom: 1.1rem;
    color: #525a73;
    font-size: 3rem;
    line-height: 1;
}

.site-step-title {
    margin-bottom: .4rem;
    color: #3d4458;
    font-size: 1.25rem;
    font-weight: 700;
}

.site-step-text {
    font-size: .95rem;
    line-height: 1.55;
}

.site-step.is-first {
    background-color: #1e1f27;
    color: #c7cbd6;
}

.site-step.is-first .site-step-icon,
.site-step.is-first .site-step-title {
    color: #fff;
}

.site-step-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    width: 100%;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: color .3s ease;
}

.site-step-link:hover,
.site-step-link:focus-visible {
    color: var(--theme-primary, #ff9800);
}

@media (max-width: 575.98px) {
    .site-steps-title { font-size: 1.35rem; }
    .site-step { padding: 1.6rem 1.4rem; }
    .site-step-icon { font-size: 2.5rem; }
}

/* "Hangi işletmeler kullanabilir?" (home.php): a dark band with a slanted bottom edge, round icons floating over
   its top edge, the heading on the left and one colored tile per business type (color: .site-biz-{color}). */
.site-bizband {
    --bizband-bg: #1e1f27;
    position: relative;
}

.site-bizband-body {
    position: relative;
    padding: 8rem 0; /* the top: room under the slanted top edge */
    background-color: var(--bizband-bg);
    color: #fff;
    /* Top edge slanted like the plans' band (.site-plans::before: rises 70px to the right), bottom edge slanted too. */
    clip-path: polygon(0 70px, 100% 0, 100% 84%, 0 100%);
}

.site-bizband-head {
    position: relative;
    margin-bottom: 2rem;
}

.site-bizband-pretitle {
    display: block;
    margin-bottom: .35rem;
    color: var(--theme-primary, #ff9800);
    font-size: 1.4rem;
}

.site-bizband-title {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
}

.site-biztile {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    min-height: 4.25rem;
    padding: .9rem 1.5rem;
    border-radius: .2rem;
    background: linear-gradient(160deg, #2b2c36, #24252e); /* like the comment card: a shade lighter than the band */
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
}

.site-biztile i,
.site-biztile span {
    position: relative;
}

/* "Özellikler": the band's layout without the dark band (page background, no slanted edge, dark big line). */
.site-bizband.is-plain .site-bizband-body {
    padding: 5rem 0;
    background: transparent;
    color: inherit;
    clip-path: none;
}

.site-bizband.is-plain .site-bizband-title {
    color: #3d4458;
}

/* "Özellikler" cards: dark like the business tiles, the feature's colored icon, title and text. */
.site-featuretile {
    height: 100%;
    padding: 1.6rem 1.5rem;
    border-radius: .2rem;
    background: linear-gradient(160deg, #2b2c36, #24252e);
    color: #c7cbd6;
}

.site-featuretile i {
    display: block;
    margin-bottom: 1rem;
    color: rgb(var(--biz-rgb));
    font-size: 2.2rem;
    line-height: 1;
}

.site-featuretile-title {
    margin: 0 0 .45rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.site-featuretile-text {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
}

/* The type's own color stays on its icon (Anasayfa İçeriği → Renk). */
.site-biztile i {
    flex-shrink: 0;
    color: rgb(var(--biz-rgb));
    font-size: 1.8rem;
}

@media (max-width: 991.98px) {
    .site-bizband-body { padding: 6rem 0 6.5rem; clip-path: polygon(0 40px, 100% 0, 100% 84%, 0 100%); }
}

@media (max-width: 575.98px) {
    .site-bizband-body { padding: 5rem 0; clip-path: polygon(0 40px, 100% 0, 100% 92%, 0 100%); }
    .site-bizband-pretitle { font-size: 1.1rem; }
    .site-bizband-title { font-size: 1.3rem; }
    .site-biztile { padding: .75rem 1rem; font-size: .95rem; gap: .5rem; min-height: 3.5rem; }
    .site-biztile i { font-size: 1.4rem; }
}