/* ==========================================================================
   Arama, yukari cik ve mobil alt cubuk.

   Bu dosya elle yazilir, Tailwind derlemesine girmez. Sebep: sunucuda node
   yok, `npm run build` calistirilamiyor; derlemeye giren yeni bir utility
   sinifi yazilsa app.css icinde karsiligi olusmaz ve stilsiz kalir.
   Renk, yaricap ve golge degerleri app.css'in @theme blogundan gelen CSS
   degiskenleridir — tasarim sistemi tek kaynaktan yonetilmeye devam eder.
   ========================================================================== */

/* --------------------------------------------------------------- Arama */

.search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
    max-width: 40rem;
    position: relative;
}

.search-form-icon {
    position: absolute;
    left: 0.875rem;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-stone-400);
    pointer-events: none;
}

.search-form-input {
    padding-left: 2.5rem;
    min-width: 0;
}

.search-form-input::-webkit-search-cancel-button {
    cursor: pointer;
}

.search-form-button {
    white-space: nowrap;
    /* Dokunma hedefi: 43px idi, parmakla kullanim icin 44px tabana cekildi. */
    min-height: 2.75rem;
}

.search-results {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-stone-200);
    max-width: 48rem;
}

.search-result {
    display: grid;
    gap: 0.25rem;
    padding: 1.125rem 0.25rem;
    border-bottom: 1px solid var(--color-stone-200);
    transition: background-color 0.15s var(--ease-out-quint);
}

.search-result:hover {
    background-color: var(--color-stone-100);
}

.search-result-type {
    font-size: var(--text-2xs, 0.6875rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* stone-400 beyaz uzerinde 2.32:1 kaliyordu. */
    color: var(--color-stone-600);
}

.search-result-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-stone-950);
}

.search-result:hover .search-result-title {
    color: var(--color-bronze-700);
}

.search-result-summary {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-stone-600);
}

.search-result-url {
    font-size: 0.75rem;
    /* stone-400 beyaz uzerinde 2.32:1 kaliyordu. */
    color: var(--color-stone-600);
}

/* Baslikta duran arama kutusu. Yalnizca masaustunde gorunur; duyarli
   gorunurluk burada tanimlanir cunku Tailwind derlemesi sunucuda
   calistirilamiyor ve lg:inline-flex app.css icinde yok. */
.search-trigger {
    display: none;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-stone-200);
    border-radius: var(--radius-sm);
    background: #fff;
    /* stone-500 beyaz uzerinde 4.06:1 kaliyordu. */
    color: var(--color-stone-600);
    font-size: 0.8125rem;
    transition: border-color 0.15s, color 0.15s;
}

.search-trigger:hover {
    border-color: var(--color-stone-400);
    color: var(--color-stone-800);
}

.search-trigger svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* --------------------------------------------------- Yukari cik butonu */

.to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-stone-200);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(4px);
    color: var(--color-stone-700);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.2s var(--ease-out-quint), transform 0.2s var(--ease-out-quint), visibility 0.2s;
}

.to-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    border-color: var(--color-stone-400);
    color: var(--color-stone-950);
}

.to-top svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Mobilde alt cubugun ustunde durur, uzerine binmez. */
@media (max-width: 1023px) {
    .to-top {
        bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .to-top {
        transition: opacity 0.01ms, visibility 0.01ms;
        transform: none;
    }
}

/* ------------------------------------------------- Mobil alt aksiyon cubugu */

/*
   Cubuk eskiden `position: sticky; bottom: 0` idi. Belgenin sonunda
   durdugu icin kaydirma sirasinda sayfa icerigin USTUNE biniyordu:
   412x823 viewport'ta arama seridinin girdisi ve "Ara" butonu cubuk
   ogeleriyle 62x46 ve 82x46 gibi alanlarda cakisiyordu. Ust uste binen
   dokunma hedefleri hem Lighthouse hatasi hem gercek bir kullanim sorunu:
   parmak hangisine bastigini bilemiyor.

   Cozum: cubuk `fixed` yapildi ve govdeye cubuk yuksekligi kadar alt
   bosluk verildi. Boylece hicbir icerik cubugun altina girmiyor.
*/
.mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    border-top: 1px solid var(--color-stone-200);
    background: rgb(255 255 255 / 0.97);
    backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 1024px) {
    .mobile-bar { display: none; }
}

.mobile-bar-grid {
    display: grid;
    grid-auto-flow: column;
    /* 1fr = minmax(auto, 1fr): izler bolunemeyen etiketin altina inemez
       ve 360px gibi dar telefonlarda cubuk tasar. */
    grid-auto-columns: minmax(0, 1fr);
}

.mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-stone-600);
    text-align: center;
    position: relative;
    min-height: 3.5rem;
    transition: color 0.15s, background-color 0.15s;
}

.mobile-bar-item + .mobile-bar-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 1px;
    background: var(--color-stone-200);
}

.mobile-bar-item:active {
    background: var(--color-stone-100);
}

.mobile-bar-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-stone-400);
    flex: none;
}

.mobile-bar-item[data-highlight="1"] {
    color: var(--color-bronze-700);
    font-weight: 600;
}

.mobile-bar-item[data-highlight="1"] svg {
    color: var(--color-bronze-600);
}

/* Vurgulu oge tek basina bir dugme gibi dursun. */
.mobile-bar-item[data-highlight="1"]::after {
    content: "";
    position: absolute;
    inset: 0.375rem 0.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-bronze-50);
    z-index: -1;
}

@media (min-width: 1024px) {
    .search-trigger { display: inline-flex; }
}

/* ------------------------------- Ana sayfa: arama + secim robotu seridi */

.home-search {
    border-bottom: 1px solid var(--color-stone-200);
    background: var(--color-stone-100);
    padding: 1.25rem 0;
}

.home-search-inner {
    display: grid;
    gap: 1rem;
}

/*
   Izgara ogeleri varsayilan olarak min-width:auto tasir ve kendi
   min-content genisliklerinin altina inmez. Icerideki yatay kayan cip
   seridi flex-wrap:nowrap oldugu icin 845px min-content dayatiyordu;
   oge kucultulemiyor, satir 375px viewport icinde tasip tum sayfayi
   yatay kaydiriyordu. Acikca sifirlanmali.
*/
.home-search-main,
.home-advisor {
    min-width: 0;
}

/* Genis ekranda arama solda, robot karti sagda; iki farkli niyet yan yana
   durur ve hicbiri digerini asagi itmez. */
@media (min-width: 1024px) {
    .home-search {
        padding: 1.5rem 0;
    }

    .home-search-inner {
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: 2rem;
        align-items: center;
    }
}

.home-search-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
}

.home-search-label {
    white-space: nowrap;
    flex: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* stone-400 acik zeminde 2.18:1 veriyordu, WCAG AA 4.5 istiyor. */
    color: var(--color-stone-600);
    margin-right: 0.25rem;
}

/* Dar ekranda sik listesi alt alta yigilip arama kutusunu asagi itmesin. */
@media (max-width: 639px) {
    .home-search-links {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-bottom: 0.125rem;
    }

    .home-search-links::-webkit-scrollbar {
        display: none;
    }

    .home-search-links .chip {
        white-space: nowrap;
    }

    .home-search-label {
        display: none;
    }
}

/* --- Secim robotu karti --- */

.home-advisor {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-stone-200);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color 0.15s var(--ease-out-quint), background-color 0.15s var(--ease-out-quint);
}

.home-advisor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--color-bronze-50);
    color: var(--color-bronze-600);
}

.home-advisor-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.home-advisor-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.home-advisor-title {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-stone-950);
}

.home-advisor-note {
    font-size: 0.8125rem;
    line-height: 1.35;
    /* stone-500 beyaz uzerinde 4.06:1 — esigin altinda. */
    color: var(--color-stone-600);
}

.home-advisor-arrow {
    display: inline-flex;
    flex: none;
    color: var(--color-stone-400);
    transition: transform 0.2s var(--ease-out-quint), color 0.15s;
}

.home-advisor-arrow svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Dokunmatik cihazda :hover kilitli kalabiliyor; yalnizca gercek imlecte. */
@media (hover: hover) {
    .home-advisor:hover {
        border-color: var(--color-bronze-300);
        background: var(--color-bronze-50);
    }

    .home-advisor:hover .home-advisor-arrow {
        color: var(--color-bronze-600);
        transform: translateX(0.1875rem);
    }
}

.home-advisor:focus-visible {
    outline: 2px solid var(--color-bronze-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .home-advisor,
    .home-advisor-arrow {
        transition: none;
    }

    .home-advisor:hover .home-advisor-arrow {
        transform: none;
    }
}

/* ------------------------------------------------- Site haritasi izi */

/*
   Iz, sablonda <main>'in ilk ogesi olarak basiliyor ve iki farkli komsuyla
   karsilasiyor: hizmet/yazi sayfalarinda hemen altinda tam genislikte koyu
   bir manset, metin sayfalarinda ise kendi ust bosluguna sahip bir bolum.
   Bu yuzden alt bosluk olculu tutuldu: mansetin ustunde nefes payi acacak
   kadar buyuk, metin sayfalarinda ust uste binip bosluk sismesine yol
   acmayacak kadar kucuk.
*/
.breadcrumbs {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    line-height: 1.5;
    /* stone-500 acik zeminde 3.86:1 kaliyordu. */
    color: var(--color-stone-600);
}

.breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumbs-link {
    color: inherit;
    transition: color 0.15s var(--ease-out-quint);
}

/* Dokunmatikte :hover kilitli kalabiliyor. */
@media (hover: hover) {
    .breadcrumbs-link:hover {
        color: var(--color-stone-900);
    }
}

.breadcrumbs-link:focus-visible {
    outline: 2px solid var(--color-bronze-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Bulunulan sayfa: rengin yaninda agirlikla da ayrisir. */
.breadcrumbs-current {
    color: var(--color-stone-700);
    font-weight: 500;
}

.breadcrumbs-sep {
    color: var(--color-stone-300);
    user-select: none;
}

@media (min-width: 640px) {
    .breadcrumbs {
        padding-top: 1.125rem;
        padding-bottom: 1.375rem;
    }

    .breadcrumbs-list {
        font-size: 0.8125rem;
    }
}

/* --------------------------------------------------- Yonetici cubugu */

/*
   Yalnizca oturum acmis kullaniciya basilir. Yapisik baslik (top-0) ile
   cakismamasi icin cubuk da yapisik ve bir ust katmanda duruyor; baslik
   ise --admin-bar-h kadar asagi kayiyor. Yukseklik tek yerde tanimli ki
   iki deger birbirinden ayrilmasin.
*/
:root {
    --admin-bar-h: 2.375rem;
}

.admin-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--admin-bar-h);
    background: var(--color-stone-900);
    color: var(--color-stone-300);
    font-size: 0.75rem;
}

.has-admin-bar [data-header] {
    top: var(--admin-bar-h);
}

.admin-bar-inner {
    display: flex;
    align-items: stretch;
    gap: 0.125rem;
    height: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 0.5rem;
    /* Dar ekranda ogeler sigmiyor; sarmak yerine kayar. */
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-bar-inner::-webkit-scrollbar {
    display: none;
}

.admin-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.625rem;
    white-space: nowrap;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.admin-bar-item svg {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
    opacity: 0.75;
}

@media (hover: hover) {
    .admin-bar-item:hover {
        background: var(--color-stone-800);
        color: #fff;
    }

    .admin-bar-item:hover svg {
        opacity: 1;
    }
}

.admin-bar-item:focus-visible {
    outline: 2px solid var(--color-bronze-400);
    outline-offset: -2px;
}

.admin-bar-brand {
    font-weight: 500;
    color: #fff;
}

/* Bakilan sayfayi duzenleme, cubugun asil isi: bronzla one cikar. */
.admin-bar-edit {
    color: var(--color-bronze-300);
    font-weight: 500;
}

.admin-bar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background: var(--color-bronze-500);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.admin-bar-count-muted {
    background: var(--color-stone-700);
    color: var(--color-stone-300);
}

.admin-bar-spacer {
    flex: 1;
    min-width: 0.5rem;
}

.admin-bar-user {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    white-space: nowrap;
    color: var(--color-stone-400);
}

.admin-bar-logout {
    display: flex;
}

/* Dar ekranda etiketler yer kaplıyor; ikonlar yeterli. Yalnizca panel,
   duzenleme ve cikis yazili kalir ki en cok kullanilanlar tanınsın. */
@media (max-width: 639px) {
    .admin-bar-user {
        display: none;
    }

    .admin-bar-item span:not(.admin-bar-count) {
        display: none;
    }

    .admin-bar-brand span,
    .admin-bar-edit span {
        display: inline;
    }
}

/* ------------------------------------------------------- Mega menu */

/*
   Panel iki bolume ayrildi: solda kategorinin kendisi (ikon, ad, kisa
   tanim ve "tumunu gor"), sagda alt basliklar. Ikonlar yalnizca burada ve
   mobil menude; ust cubuga ikon koymak 1024-1280 arasi menuyu tasiriyor ve
   sade duran baslik cubugunu kalabaliklastiriyordu.
*/
.mega-panel {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: 1.5rem;
    width: min(56rem, 92vw);
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--color-stone-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
}

.mega-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--color-stone-100);
}

.mega-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-bronze-600);
    border: 1px solid var(--color-stone-200);
}

.mega-intro-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mega-intro-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-stone-950);
}

.mega-intro-note {
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-stone-500);
}

.mega-intro-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-bronze-700);
}

.mega-intro-all svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s var(--ease-out-quint);
}

@media (hover: hover) {
    .mega-intro-all:hover svg {
        transform: translateX(0.1875rem);
    }
}

.mega-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem 0.75rem;
    align-content: start;
}

.mega-link {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s var(--ease-out-quint);
}

.mega-link-title {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-stone-900);
    transition: color 0.15s var(--ease-out-quint);
}

.mega-link-note {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-stone-500);
}

@media (hover: hover) {
    .mega-link:hover {
        background: var(--color-stone-50);
    }

    .mega-link:hover .mega-link-title {
        color: var(--color-bronze-700);
    }
}

/* Dar pencerede sol tanitim sutunu yer kaplamasin. */
@media (max-width: 1279px) {
    .mega-panel {
        grid-template-columns: 11.5rem minmax(0, 1fr);
        width: min(48rem, 92vw);
        gap: 1.125rem;
    }

    .mega-intro-note {
        display: none;
    }
}

/* --------------------------------------------- Mobil menu satirlari */

.mobile-nav-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 0;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--color-stone-800);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.mobile-nav-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: var(--color-stone-400);
}

.mobile-nav-label {
    flex: 1;
    min-width: 0;
}

/* Yonetici cubugu: "Yeni" acilir menusu */

.admin-bar-new {
    position: relative;
    display: flex;
}

/*
   Menu `fixed` konumlanir. Sebep: .admin-bar-inner uzerinde overflow-x
   var (dar ekranda cubuk yatay kaysin diye) ve tasma kabi, icindeki
   `absolute` konumlu ogeleri KIRPAR. Menu cubugun altina actigi icin
   tamamen kirpilip gorunmez oluyordu: dugmeye basiliyor, bir sey olmuyordu.
   Konum acilirken JS tarafindan tetikleyicinin kutusundan hesaplanir.
*/
.admin-bar-menu {
    position: fixed;
    z-index: 51;
    min-width: 9rem;
    padding: 0.25rem;
    background: var(--color-stone-900);
    border: 1px solid var(--color-stone-800);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-card);
}

.admin-bar-menu a {
    display: block;
    padding: 0.4375rem 0.625rem;
    border-radius: var(--radius-xs);
    color: var(--color-stone-300);
    white-space: nowrap;
}

@media (hover: hover) {
    .admin-bar-menu a:hover {
        background: var(--color-stone-800);
        color: #fff;
    }
}

.admin-bar-menu a:focus-visible {
    outline: 2px solid var(--color-bronze-400);
    outline-offset: -2px;
}

/*
   Panel eskiden tetikleyici ogeye gore ortalaniyordu; soldaki ilk basligin
   panelii 1024-1280 arasi ekranin solundan tasip kirpiliyordu. Sarmalayici
   static yapilinca konumlandirma en yakin konumlu ata olan <header>'a
   gecer: panel artik sayfaya gore ortalanir ve hicbir genislikte tasmaz.
*/
@media (min-width: 1024px) {
    [data-mega] {
        position: static;
    }
}

/* ----------------------------------------------- Manset okunabilirligi */

/*
   Manset karartmasi (app.css icindeki overlay-scrim) yalnizca dikey bir
   gradyan: altta %78, ustte %6. Metin ust-orta bantta durdugu icin oraya
   ancak %17 karartma dusuyor. Koyu gorsellerde sorun cikmiyor ama parlak
   gokyuzlu bir karede metin kayboluyor.

   Olculen ornek — /otomasyon-sistemleri:
     zemin rgb(181,148,109), eyebrow bronze-400  -> 1.11:1
     ayni zemin, beyaz H1                        -> 2.82:1
   WCAG AA kucuk metin icin 4.5:1, buyuk metin icin 3:1 ister. Ikisi de
   altinda kaliyordu.

   Cozum: dikey gradyanin ustune YATAY bir gradyan eklendi. Metin her
   mansette solda duruyor; sag taraf karartilmadigi icin gorsel aydinlik
   kaliyor, metnin oldugu yer ise okunur hale geliyor.
*/
.overlay-scrim {
    background-image:
        linear-gradient(
            to right,
            rgb(15 14 13 / 0.58) 0%,
            rgb(15 14 13 / 0.46) 32%,
            rgb(15 14 13 / 0.16) 62%,
            rgb(15 14 13 / 0) 80%
        ),
        linear-gradient(
            to top,
            rgb(15 14 13 / 0.78) 0%,
            rgb(15 14 13 / 0.52) 38%,
            rgb(15 14 13 / 0.18) 72%,
            rgb(15 14 13 / 0.06) 100%
        );
}

/*
   Eyebrow rengi bronze-400 (#c89a6a) idi; sicak tonlu bir gorselin
   uzerinde neredeyse zeminle ayni renge dusuyordu. Daha acik bir sicak
   ton hem vurgu hissini koruyor hem okunuyor.
*/
.hero-eyebrow {
    color: var(--color-bronze-100, #f4e8da);
}

/* ------------------------------------------- Erisilebilirlik duzeltmeleri */

/*
   Olculen kontrast degerleri (Lighthouse raporunu dogrulamak icin tek tek
   hesaplandi, beyaz/stone-50 zemin uzerinde):

     text-stone-500 (#857d71) kucuk metin ......... 4.06:1  (esik 4.5)
     .btn-accent beyaz / bronze-500 (#b47f4b) ..... 3.46:1  (esik 4.5)
     .home-search-label stone-400 ................. 2.18:1  (esik 4.5)

   stone-500 sitede 44 yerde geciyor; bunlarin 6'si footer'da KOYU zemin
   uzerinde ve orada 4.73:1 ile geciyor. Global bir degisiklik footer'i
   bozardi (2.91:1'e duserdi), bu yuzden kural yalnizca acik zeminli
   baglamlara — main ve header — kapsamlandi.
*/
main .text-stone-500,
header .text-stone-500 {
    color: var(--color-stone-600);
}

/*
   Birincil dönüşüm butonu. Zemin bronze-500'den bronze-600'e cekildi:
   beyaz metinle 3.46 -> 4.84:1. Hover bronze-600 idi, ayrimin kaybolmamasi
   icin bronze-700'e alindi (6.92:1).
*/
.btn-accent {
    background-color: var(--color-bronze-600);
}

.btn-accent:hover {
    background-color: var(--color-bronze-700);
}

/* Dar ekranda cipler parmakla rahat secilsin. */
@media (max-width: 639px) {
    .home-search-links .chip {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }
}

/*
   eyebrow ve bilgi merkezi kart etiketleri bronze-600 ile stone-100 zemin
   uzerinde 4.33:1 veriyor — esik 4.5. bronze-700 ile 6.19:1.

   Koyu zeminde kullanilan eyebrow ornekleri disarida tutuldu: manset
   (.hero-eyebrow) ve ana sayfanin koyu fiyat seridi (text-bronze-400).
   Bu dosya katmansiz oldugu icin Tailwind utility'lerini yenerdi; o yuzden
   :not() ile acikca ayiklandi.
*/
.eyebrow:not([class*="text-"]):not(.hero-eyebrow) {
    color: var(--color-bronze-700);
}

main .text-bronze-600 {
    color: var(--color-bronze-700);
}

/* ------------------------------------------- Cerez bandi / alt cubuk cakismasi */

/*
   Cerez bandi `fixed bottom-0 z-50`, mobil alt cubuk ise `sticky bottom-0
   z-30`. Ilk ziyarette band cubugun TAMAMINI ortuyordu: olculdu, ortusme
   375x57 ve bes ogenin besi de elementFromPoint testinde bandin altinda
   kaliyordu. Yani telefon, WhatsApp ve teklif butonlarina cerez onayi
   verilmeden dokunmak mumkun degildi.

   Band, cubugun yuksekligi kadar yukari alindi. Masaustunde cubuk zaten
   gorunmedigi icin kural yalnizca 1024px altinda gecerli.
*/
@media (max-width: 1023px) {
    [data-consent-banner] {
        /* 3.5rem oge yuksekligi + 1px ust kenarlik. */
        bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom));
    }
}

/* Band butonlari 36px yuksekligindeydi; parmakla kullanim icin 44px taban. */
@media (max-width: 639px) {
    [data-consent-banner] .btn {
        min-height: 2.75rem;
    }
}

/* Cubuk artik fixed; icerigin altina girmemesi icin govdede yer ayrilir. */
@media (max-width: 1023px) {
    body {
        padding-bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom));
    }
}

/*
   Cubuk ilk ekranda gizli, ~320px kaydirmadan sonra beliriyor. JS
   calismazsa (data-visible hic yazilmazsa) gorunur kalir; erisim
   JavaScript\x27e bagimli olmamali.
*/
.mobile-bar[data-visible="false"] {
    transform: translateY(100%);
    pointer-events: none;
}

.mobile-bar {
    transition: transform 0.25s var(--ease-out-quint);
    will-change: transform;
}

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