/*
 * Fidanliktayim.com — Modern Design v2
 * Güvenli — mevcut stilleri bozmadan sadece görsel iyileştirme
 */

:root {
    --ft-green:       #89956F;
    --ft-green-dark:  #6b7558;
    --ft-green-light: #a8b58a;
    --ft-green-pale:  #f2f5ec;
    --ft-border:      #e4ead8;
    --ft-shadow:      0 4px 20px rgba(137,149,111,.14);
    --ft-shadow-hover:0 12px 36px rgba(137,149,111,.22);
    --ft-radius:      12px;
    --ft-ease:        .3s cubic-bezier(.25,.8,.25,1);
}

/* ── Smooth scroll & selection ── */
html { scroll-behavior: smooth; }
::selection { background: rgba(137,149,111,.2); color: #3d4530; }

/* ══════════════════════════════════════
   PAGE LOADER
══════════════════════════════════════ */
#ft-page-loader {
    position: fixed; inset: 0;
    background: #fff;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
#ft-page-loader.ft-loader-done { opacity: 0; visibility: hidden; pointer-events: none; }
.ft-loader-leaf svg { width: 60px; height: 60px; animation: ft-leaf .9s ease-in-out infinite alternate; }
@keyframes ft-leaf {
    from { transform: scale(.85) rotate(-8deg); }
    to   { transform: scale(1.1) rotate(8deg); }
}

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.ft-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.ft-reveal.ft-visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════
   CURSOR SPARKLE
══════════════════════════════════════ */
.ft-spark {
    position: fixed; width: 7px; height: 7px; border-radius: 50%;
    pointer-events: none; z-index: 99998;
    transform: translate(-50%,-50%);
    animation: ft-spark .65s ease-out forwards;
}
@keyframes ft-spark {
    0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(0); }
}

/* ══════════════════════════════════════
   STICKY HEADER
══════════════════════════════════════ */
.site-header, #masthead {
    transition: box-shadow .3s ease, background .3s ease;
}
.ft-header-scrolled {
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(137,149,111,.15) !important;
}

/* ══════════════════════════════════════
   NAV — sadece hover underline, linke dokunma
══════════════════════════════════════ */
.nav-menu > li > a,
.mega-menu > li > a {
    position: relative;
}
.nav-menu > li > a::after,
.mega-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 2px;
    background: var(--ft-green);
    border-radius: 2px;
    transition: left var(--ft-ease), right var(--ft-ease);
    pointer-events: none;
}
.nav-menu > li:hover > a::after,
.nav-menu > li.current-menu-item > a::after,
.mega-menu > li:hover > a::after {
    left: 0; right: 0;
}

/* Dropdown shadow */
.main-navigation ul ul {
    border-radius: 8px !important;
    box-shadow: var(--ft-shadow) !important;
}

/* ══════════════════════════════════════
   SERVIS KARTLARI
══════════════════════════════════════ */
.service-list {
    background: #fff;
    border-radius: var(--ft-radius);
    border: 1px solid var(--ft-border);
    transition: transform var(--ft-ease), box-shadow var(--ft-ease), border-color var(--ft-ease);
    box-shadow: 0 2px 10px rgba(137,149,111,.08);
}
.service-list:hover {
    transform: translateY(-7px);
    box-shadow: var(--ft-shadow-hover);
    border-color: var(--ft-green);
}
.home-service-content .icon-image {
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.service-list:hover .icon-image {
    transform: scale(1.12) rotate(-6deg);
}
.service-list:hover .service-title { color: var(--ft-green); }

/* ══════════════════════════════════════
   ÜRÜN KARTLARI — sadece kart çerçevesi ve resim zoom
   Buton/link HTML'e dokunmuyoruz
══════════════════════════════════════ */
.product-block-inner {
    background: #fff;
    border-radius: var(--ft-radius);
    border: 1px solid var(--ft-border);
    box-shadow: 0 2px 12px rgba(137,149,111,.09);
    transition: transform var(--ft-ease), box-shadow var(--ft-ease);
    overflow: hidden;
}
.product-block-inner:hover {
    transform: translateY(-6px);
    box-shadow: var(--ft-shadow-hover);
}

/* Resim zoom — sadece img, başka bir şeye dokunma */
.product-block-inner a img {
    transition: transform .5s ease;
    display: block; width: 100%;
}
.product-block-inner:hover a img {
    transform: scale(1.05);
}

/* Ürün adı hover rengi — link rengini/görünürlüğünü koruyoruz */
.product-name a {
    transition: color .2s ease;
}
.product-block-inner:hover .product-name a {
    color: var(--ft-green);
}

/* ══════════════════════════════════════
   BUTONLAR — sadece transition ve hover rengi
   border-radius, padding, renk vs. parent temaya bırak
══════════════════════════════════════ */
.woocommerce ul.products li.product .button,
.product-button-hover .button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button,
.checkout-button {
    transition: transform var(--ft-ease), box-shadow var(--ft-ease), background-color .2s ease !important;
}
.woocommerce ul.products li.product .button:hover,
.product-button-hover .button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(137,149,111,.35) !important;
}

/* Add-to-cart animasyonu (JS tetikler) */
.ft-adding {
    animation: ft-btn-click .35s ease 2;
}
@keyframes ft-btn-click {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(.94); }
}

/* ══════════════════════════════════════
   SALE ROZET
══════════════════════════════════════ */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    animation: ft-badge-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ft-badge-pop {
    from { transform: scale(0) rotate(-15deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ══════════════════════════════════════
   BANNER KARTLARI
══════════════════════════════════════ */
.cms-banner-item {
    border-radius: var(--ft-radius);
    overflow: hidden;
    transition: transform var(--ft-ease), box-shadow var(--ft-ease);
    box-shadow: 0 2px 10px rgba(137,149,111,.08);
}
.cms-banner-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--ft-shadow-hover);
}
.cms-banner-item .cms-banner-img img {
    transition: transform .6s ease;
}
.cms-banner-item:hover .cms-banner-img img {
    transform: scale(1.04);
}

/* ══════════════════════════════════════
   WIDGET
══════════════════════════════════════ */
.widget {
    border-radius: var(--ft-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(137,149,111,.08);
    border: 1px solid var(--ft-border);
    transition: box-shadow var(--ft-ease);
}
.widget:hover { box-shadow: var(--ft-shadow-hover); }

/* Widget içindeki li hover — sadece arka plan, link rengine dokunma */
.widget ul li {
    transition: background .2s ease, padding-left .2s ease;
}
.widget ul li:hover {
    background: var(--ft-green-pale);
    padding-left: 4px;
}

/* Fiyat filtresi */
.price_slider_wrapper .ui-slider-range { background: var(--ft-green) !important; }
.price_slider_wrapper .ui-slider-handle {
    background: var(--ft-green) !important;
    border-color: var(--ft-green) !important;
}

/* ══════════════════════════════════════
   INPUT FOCUS
══════════════════════════════════════ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: var(--ft-green) !important;
    box-shadow: 0 0 0 3px rgba(137,149,111,.15) !important;
    outline: none !important;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer {
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 250px; height: 250px; border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}

/* ══════════════════════════════════════
   SAYFALAMA
══════════════════════════════════════ */
.woocommerce-pagination a,
.paging-navigation a {
    transition: transform var(--ft-ease), box-shadow var(--ft-ease), background var(--ft-ease);
}
.woocommerce-pagination a:hover,
.paging-navigation a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(137,149,111,.25);
}

/* ══════════════════════════════════════
   NOTICE ANİMASYON
══════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    animation: ft-notice .4s ease;
}
@keyframes ft-notice {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   SEPET TABLOSU
══════════════════════════════════════ */
.woocommerce table.cart td {
    transition: background .2s ease;
}
.woocommerce table.cart tr:hover td {
    background: var(--ft-green-pale);
}

/* ══════════════════════════════════════
   SKELETONs (ürün yüklenirken)
══════════════════════════════════════ */
.product-loading .product-block-inner {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ft-skeleton 1.5s infinite;
}
@keyframes ft-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.on-first-load .product-block-inner * { visibility: hidden; }

/* ══════════════════════════════════════
   MOBIL
══════════════════════════════════════ */
@media (max-width: 768px) {
    .product-block-inner:hover { transform: none; }
    .service-list:hover { transform: none; }
    .cms-banner-item:hover { transform: none; }
}
