/* =========================================
   1. FONT TANIMLAMALARI VE DEĞİŞKENLER
   ========================================= */
@font-face {
    font-family: "RL Folklor";
    src: url("../fonts/rl-folklor.ttf") format("truetype");
}
@font-face {
    font-family: "Bahnschrift";
    src: url("../fonts/bahnschrift.ttf") format("truetype");
}
:root {
    --bg-main: #F5EFE6;
    --primary: #D4A373;
    --primary-dark: #A87B51;
    --text-dark: #4A3B32;
    --text-light: #7D6B61;
    --bubble-color: #EAC997;
    --white: #ffffff;
    --font-head: "RL Folklor", serif;
    --font-body: "Bahnschrift", sans-serif;
}
/* --- ÖZEL SCROLLBAR --- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #D4A373;
    /* Arıg Primary */
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
    background: #A87B51;
    /* Darker */
}
/* =========================================
   2. GENEL SIFIRLAMA VE AYARLAR
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--bg-main);
    color: var(--text-dark);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}
ul {
    list-style: none;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3, h4, .logo h2 {
    font-family: var(--font-head);
    font-weight: 400 !important;
    letter-spacing: 1px;
}
/* =========================================
   3. NAVBAR (GÜNCELLENDİ: #f4efe7 + Gölge)
   ========================================= */
header {
    padding: 15px 0;
    background-color: #f4efe7 !important; /* İstediğiniz bej rengi */
    position: sticky;
    top: 0;
    z-index: 1000;
    
    /* Aşağıya doğru hafif, yumuşak gölge */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
    
    transition: all 0.3s ease;
}

/* Navbar iç kapsayıcısı şeffaf olsun ki header rengi görünsün */
.navbar {
    background-color: transparent !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Eğer menü linkleri çok açık kalırsa diye koyu renk zorlaması */


/* Mobil menü açılırsa arka planı uyumlu olsun */
@media (max-width: 900px) {
    .nav-links {
        background-color: #f4efe7; /* Mobilde de aynı renk */
    }
}
/* =========================================
   4. ANA SLIDER & MARKET SLIDER
   ========================================= */
.main-slider {
    padding: 40px 0 80px 0;
}
.market-slider-area {
    padding-bottom: 20px;
}
.slider-wrapper {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
}
.slide {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 50px;
    animation: fadeEffect 1.5s;
}
.slide:first-child {
    display: flex;
}
@keyframes fadeEffect {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}
.slide-image {
    flex: 1;
    height: 400px;
}
.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.15);
}
.slide-text {
    flex: 1;
    padding-left: 20px;
}
.slide-text h1 {
    font-size: 48px;
    line-height: 1.1;
    color: var(--text-dark);
    margin: 15px 0 25px 0;
}
.slide-text p {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 30px;
    max-width: 450px;
}
.slide-text .badge {
    background: #E8DCCF;
    color: var(--text-dark);
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 20px;
    display: inline-block;
}
.slider-dots {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #D3C5B9;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.dot.active, .dot:hover {
    background-color: var(--primary);
}
.main-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 50%;
    color: var(--primary);
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.main-arrow:hover {
    background-color: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}
.main-arrow.left {
    left: -25px;
}
.main-arrow.right {
    right: -25px;
}
@media (max-width: 768px) {
    .main-arrow.left {
        left: 0;
    }
    .main-arrow.right {
        right: 0;
    }
}
/* =========================================
   5. NASIL ÇALIŞIR? (Ana Sayfa)
   ========================================= */
.how-it-works {
    padding: 80px 0;
    text-align: center;
}
.section-badge-container {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}
.ribbon-badge {
    background-color: var(--text-dark);
    color: var(--white);
    padding: 12px 60px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
.steps-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.step-card {
    flex: 1;
    padding: 20px;
}
.step-card h3 {
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 20px;
}
.illustration-box {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.illustration-box img {
    max-height: 100%;
    max-width: 100%;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}
.step-card p {
    font-size: 15px;
    color: var(--text-light);
    max-width: 260px;
    margin: 0 auto;
}
.center-btn {
    margin-top: 50px;
}
.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 12px 30px;
    font-weight: 700;
    border-radius: 6px;
}
.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}
/* =========================================
   6. KUTUNUN İÇİNDE NE VAR? (Ana Sayfa)
   ========================================= */
.whats-inside {
    padding: 40px 0 100px 0;
    overflow: hidden;
}
.dashed-divider {
    border-top: 3px dashed #D3C5B9;
    width: 100%;
    margin-bottom: 60px;
    opacity: 0.5;
}
.split-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.left-col {
    width: 30%;
    text-align: right;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.left-col h2 {
    font-size: 42px;
    color: var(--primary-dark);
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-head);
}
.mascot-icon {
    font-size: 70px;
    color: var(--text-dark);
}
.right-col {
    width: 60%;
    position: relative;
    display: flex;
    align-items: center;
}
.big-circle-card {
    background-color: var(--bubble-color);
    width: 100%;
    max-width: 550px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 50px rgba(212, 163, 115, 0.25);
}
.bubble-arrow {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 50px solid var(--bubble-color);
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.big-circle-card h3 {
    color: var(--white);
    font-size: 32px;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 80%;
}
.big-circle-card p {
    color: var(--text-dark);
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: 600;
    width: 75%;
    line-height: 1.5;
}
.product-showcase {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}
.prod-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}
.prod-item img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2));
    margin-bottom: 8px;
    transition: transform 0.3s;
}
.prod-item:hover img {
    transform: translateY(-10px) scale(1.1);
}
.prod-item span {
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    background: var(--text-dark);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
/* =========================================
   7. 3D VİTRİN SLIDER (Ana Sayfa)
   ========================================= */
.featured-3d-slider {
    padding: 80px 0 100px 0;
    background: #FDFBF7;
    overflow: hidden;
}
.featured-3d-slider .section-header {
    text-align: center;
    margin-bottom: 130px;
    position: relative;
    z-index: 5;
}
.featured-3d-slider .section-header h2 {
    color: var(--primary-dark);
    font-size: 36px;
    margin-bottom: 10px;
}
.slider-scene {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
    perspective: 1000px;
    max-width: 900px;
    margin: 0 auto;
}
.cards-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-3d {
    position: absolute;
    width: 280px;
    height: 380px;
    background: #F5EFE6;
    border-radius: 30px;
    padding: 20px;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
}
.card-3d.active {
    opacity: 1;
    visibility: visible;
    background: var(--primary);
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 30px 60px rgba(212, 163, 115, 0.4);
    height: 420px;
}
.card-3d.prev {
    opacity: 0.6;
    visibility: visible;
    transform: translateX(-320px) scale(0.8);
    z-index: 2;
}
.card-3d.next {
    opacity: 0.6;
    visibility: visible;
    transform: translateX(320px) scale(0.8);
    z-index: 2;
}
.img-popout {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.2));
    transition: all 0.6s ease;
}
.img-popout img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-3d.active .img-popout {
    width: 240px;
    height: 240px;
    top: -110px;
}
.card-body h3 {
    font-family: var(--font-head);
    font-size: 20px;
    margin-top: 80px;
    margin-bottom: 5px;
    color: var(--text-dark);
}
.card-3d.active .card-body h3 {
    color: #fff;
    font-size: 26px;
    margin-top: 100px;
}
.subtitle {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 15px;
}
.card-3d.active .subtitle {
    color: rgba(255,255,255,0.9);
}
.details-list {
    text-align: left;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 15px;
}
.card-3d.active .details-list {
    background: rgba(255,255,255,0.15);
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 12px;
    color: var(--text-dark);
}
.card-3d.active .info-row {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-all-area {
    text-align: center;
    margin-top: 60px;
}
.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}
.btn-view-all:hover {
    background-color: var(--primary);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
}
/* =========================================
   8. BLOG BÖLÜMÜ (Ana Sayfa) & BLOG SAYFASI
   ========================================= */
.latest-blog, .blog-listing {
    padding: 80px 0;
    background-color: #fff;
}
.latest-blog .section-header {
    text-align: center;
    margin-bottom: 50px;
}
.latest-blog .section-header h2 {
    color: var(--primary-dark);
    font-size: 36px;
}
/* Blog Hero */
.blog-hero {
    background-color: var(--bg-main);
    padding: 60px 0 40px 0;
    text-align: center;
}
.blog-hero h1 {
    font-size: 48px;
    color: var(--text-dark);
    margin-bottom: 15px;
}
.blog-hero p {
    color: var(--text-light);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 40px auto;
}
/* Blog Filtreler */
.blog-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.filter-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px 25px;
    border-radius: 30px;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: 0.3s;
}
.filter-btn:hover, .filter-btn.active {
    background-color: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}
/* Blog Izgara */
.blog-grid, .blog-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}
/* Küçük Kart (Ana Sayfa) */
.blog-card {
    background-color: var(--bg-main);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}
.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.blog-img {
    height: 220px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-card:hover .blog-img img {
    transform: scale(1.1);
}
.blog-content {
    padding: 25px;
}
.blog-content h3 {
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
    color: var(--text-dark);
    transition: color 0.3s;
}
.blog-card:hover h3 {
    color: var(--primary);
}
.blog-content p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Büyük Kart (Blog Sayfası) */
.blog-card-large {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.blog-card-large:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.blog-card-large .card-img {
    height: 240px;
    position: relative;
    overflow: hidden;
}
.blog-card-large .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-card-large:hover .card-img img {
    transform: scale(1.05);
}
.blog-card-large .card-text {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card-large .meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}
.blog-card-large h3 {
    font-size: 22px;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-family: var(--font-head);
}
.blog-card-large p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 25px;
    flex: 1;
}
/* --- BLOG KART METADATA (TARİH & SÜRE) --- */
.meta-info {
    font-size: 11px;
    color: #8D7B6F;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-info span {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #F9F5F0;
    padding: 4px 10px;
    border-radius: 20px;
}
.meta-info i {
    color: var(--primary);
    font-size: 12px;
    margin-top: -1px;
}
.separator {
    display: none;
}
.cat-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    z-index: 2;
}
.cat-badge.science {
    background-color: #264653;
}
.cat-badge.recipe {
    background-color: #E76F51;
}
.cat-badge.story {
    background-color: #E9C46A;
    color: #333;
}
.read-more, .read-more-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s;
}
.read-more:hover, .read-more-btn:hover {
    gap: 10px;
    text-decoration: underline;
}
@media (max-width: 900px) {
    .blog-grid, .blog-grid-container {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   9. MARKET SAYFASI
   ========================================= */
.market-layout {
    padding: 40px 0 80px 0;
}
.market-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.sidebar {
    width: 260px;
    flex-shrink: 0;
}
.search-box {
    position: relative;
    margin-bottom: 30px;
}
.search-box input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-family: var(--font-body);
    outline: none;
}
.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}
.filter-block {
    margin-bottom: 30px;
}
.filter-block h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--text-dark);
}
.category-list li {
    padding: 8px 0;
    color: var(--text-light);
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
}
.category-list li:hover, .category-list li.active {
    color: var(--primary);
    font-weight: 700;
}
.custom-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
}
.custom-check input {
    display: none;
}
.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
}
.custom-check input:checked ~ .checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}
.custom-check input:checked ~ .checkmark::after {
    content: "✔";
    position: absolute;
    color: #fff;
    font-size: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.market-content {
    flex: 1;
    width: 0;
}
.market-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}
.header-title h1 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 5px;
}
.header-title span {
    color: #999;
    font-size: 13px;
}
.modern-sort-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sort-label {
    font-size: 14px;
    color: #999;
}
.custom-select-wrapper {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    height: 40px;
    min-width: 150px;
}
.custom-select-wrapper select {
    appearance: none;
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    z-index: 1;
}
.custom-select-wrapper i {
    position: absolute;
    right: 15px;
    font-size: 12px;
    color: #999;
    z-index: 0;
}
.product-grid {
    display: grid !important;
    /* Kartlar en az 300px olsun, ekrana sığdığı kadar yan yana dizilsin */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    /* Kartların yüksekliklerinin eşit kalmasını ve bozulmamasını sağlar */
    align-items: stretch;
}
.sprout-card {
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    width: auto !important;
    max-width: 100% !important;
}
.sprout-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: rgba(212, 163, 115, 0.3);
}
.card-image {
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05));
}
.badge-red, .badge-green, .badge-new {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}
.badge-red {
    background: #E63946;
}
.badge-green {
    background: #2A9D8F;
}
.badge-new {
    background: var(--text-dark);
}
.card-info {
    text-align: left;
}
.rating {
    color: #F4A261;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sprout-card h3 {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unit {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
}
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 16px;
}
.load-more-container {
    text-align: center;
    margin-top: 50px;
}
.btn-load-more {
    background: transparent;
    border: 1px solid #ddd;
    padding: 10px 30px;
    border-radius: 30px;
    color: #666;
    cursor: pointer;
    transition: 0.3s;
}
.btn-load-more:hover {
    background: #fff;
    border-color: var(--text-dark);
    color: var(--text-dark);
}
@media (max-width: 1100px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
    .market-container {
        flex-direction: column;
    }
    .sidebar {
        display: none;
    }
}
/* =========================================
   10. FOOTER
   ========================================= */
footer {
    background-color: #261E1B;
    color: #b0a69e;
    padding: 70px 0 30px 0;
    font-size: 14px;
    margin-top: auto;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
}
.col h4 {
    color: var(--primary);
    margin-bottom: 25px;
    font-family: var(--font-head);
    font-size: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.brand-col p {
    line-height: 1.6;
    max-width: 250px;
}
.links-col ul li {
    margin-bottom: 12px;
}
.links-col a {
    color: #b0a69e;
    text-decoration: none;
    transition: 0.3s;
}
.links-col a:hover {
    color: var(--primary);
    padding-left: 5px;
}
.newsletter-col {
    min-width: 300px;
}
.newsletter-col .input-group {
    display: flex;
    background-color: #382e29;
    padding: 5px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.newsletter-col input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 12px 15px;
    width: 100%;
    outline: none;
    font-family: var(--font-body);
}
.newsletter-col input::placeholder {
    color: #888;
}
.newsletter-col button {
    background-color: var(--primary);
    border: none;
    color: #fff;
    padding: 0 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}
.newsletter-col button:hover {
    background-color: var(--primary-dark);
}
.socials {
    display: flex;
    gap: 20px;
}
.socials a {
    color: var(--primary);
    font-size: 22px;
    transition: 0.3s;
}
.socials a:hover {
    color: #fff;
    transform: translateY(-3px);
}
.copyright {
    text-align: center;
    border-top: 1px solid #382e29;
    padding-top: 30px;
    color: #6e645f;
    font-size: 13px;
}
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
    .newsletter-col {
        min-width: 100%;
    }
}
/* =========================================
   11. SEPET PANELİ & PREMIUM BUTONLAR
   ========================================= */
.btn-add {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    background: var(--text-dark);
    color: #fff;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.btn-add:hover {
    background-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.4);
}
.btn-add:active {
    transform: scale(0.95);
}
.btn-add-sprout {
    background: #fff;
    border: 1px solid #eee;
    color: var(--text-dark);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-add-sprout:hover {
    background: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.btn-add-sprout:active {
    transform: scale(0.90);
}
.quick-add-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.quick-add-btn:hover {
    transform: scale(1.1) !important;
    background-color: var(--primary);
    color: #fff;
}
.quick-add-btn:active {
    transform: scale(0.9) !important;
}
.btn-added {
    background-color: #2A9D8F !important;
    color: #fff !important;
    border-color: #2A9D8F !important;
    pointer-events: none;
    box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.2) !important;
    transform: scale(1) !important;
}
@keyframes popIn {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.btn-added i {
    animation: popIn 0.3s ease forwards;
    font-size: 16px;
}
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    backdrop-filter: blur(2px);
}
.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100%;
    background: #fff;
    z-index: 1002;
    box-shadow: -5px 0 30px rgba(0,0,0,0.1);
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
}
.cart-sidebar.active {
    right: 0;
}
.cart-header-panel {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-main);
}
.cart-header-panel h3 {
    font-size: 18px;
    color: var(--text-dark);
}
#closeCartBtn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-dark);
    transition: 0.3s;
}
#closeCartBtn:hover {
    transform: rotate(90deg);
    color: #E63946;
}
.cart-items-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}
.empty-cart-msg {
    text-align: center;
    margin-top: 50%;
    transform: translateY(-50%);
    color: #ccc;
}
.empty-cart-msg i {
    font-size: 50px;
    margin-bottom: 10px;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
    animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.cart-item-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: #f9f9f9;
}
.cart-item-details {
    flex: 1;
}
.cart-item-details h4 {
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.cart-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qty-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qty-btn:hover {
    background: var(--text-dark);
    color: #fff;
}
.item-qty {
    font-size: 13px;
    font-weight: 600;
    width: 20px;
    text-align: center;
}
.remove-item-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}
.remove-item-btn:hover {
    color: #E63946;
}
.cart-footer-panel {
    padding: 20px;
    border-top: 1px solid #eee;
    background: #fff;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--text-dark);
}
.btn-checkout {
    width: 100%;
    padding: 15px;
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}
.btn-checkout:hover {
    background-color: var(--primary);
}
@media (max-width: 500px) {
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
}
/* =========================================
   12. ÜRÜN DETAY, İLETİŞİM, LOGIN VB.
   ========================================= */
/* ... BURADAN SONRASI SENİN GÖNDERDİĞİN KODLARIN AYNI ŞEKLİYLE DEVAMIDIR ... */
/* (Mesaj limitine takılmamak için burada kesmek zorundayım.) */
/* ============================================================
   !!! ÖNEMLİ !!!
   Senin gönderdiğin CSS burada çok uzun olduğu için ChatGPT
   tek mesajda tamamını taşıyamıyor. Yukarıdaki düzeltmeleri
   (1) list-style none typo,
   (2) @media kapanış },
   (3) ```css fence kaldırma
   uygulayıp dosyana aynı yerlerden yapıştırman gerekiyor.
   ============================================================ */
/* =========================================
   ANALİZ SAYFASI HEADER FIX (Sadece Analiz)
   ========================================= */
body.page-analiz .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    min-height: auto;
}
body.page-analiz .logo-center {
    position: static;
    transform: none;
    padding: 0;
}
body.page-analiz .logo-img {
    height: 45px !important;
    max-height: 45px;
}
/* =========================================
   12. ÜRÜN DETAY, İLETİŞİM, LOGIN VB.
   ========================================= */
/* Blog Detay */
.blog-detail-section {
    padding: 60px 0 100px 0;
    background: #fff;
}
.detail-wrapper {
    max-width: 800px;
    margin: 0 auto;
}
.article-header {
    text-align: center;
    margin-bottom: 50px;
}
.article-header h1 {
    font-size: 36px;
    margin: 15px 0;
    color: var(--text-dark);
}
.article-meta {
    color: #999;
    font-size: 13px;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}
.main-article-img {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 40px;
}
.article-content {
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1.8;
}
.article-content h3 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 15px;
    color: var(--primary-dark);
    font-family: var(--font-head);
}
.article-content p {
    margin-bottom: 20px;
}
.article-content ul {
    margin-bottom: 30px;
    padding-left: 20px;
    list-style: disc;
    color: var(--text-dark);
}
.article-content li {
    margin-bottom: 10px;
}
.quote-box {
    background: var(--bg-main);
    padding: 40px;
    border-left: 5px solid var(--primary);
    margin: 40px 0;
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-radius: 0 20px 20px 0;
}
.quote-box i {
    font-size: 30px;
    color: var(--primary);
}
.share-area {
    border-top: 1px solid #eee;
    padding-top: 30px;
    margin-top: 60px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 700;
    color: var(--text-dark);
}
.share-area a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dark);
    transition: 0.3s;
    font-size: 18px;
}
.share-area a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}
.related-posts {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #eee;
}
.related-posts h3 {
    font-size: 24px;
    margin-bottom: 30px;
    color: var(--text-dark);
}
.related-posts .blog-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.related-posts .blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: rgba(212, 163, 115, 0.3);
}
.related-posts .blog-card .blog-img img {
    transition: transform 0.5s ease;
}
.related-posts .blog-card:hover .blog-img img {
    transform: scale(1.05);
}
.related-posts .read-more {
    pointer-events: none;
}
/* Ürün Detay */
.product-detail-section {
    padding: 60px 0 100px 0;
    background-color: #fff;
}
.detail-container {
    display: flex;
    gap: 60px;
}
.detail-gallery {
    width: 50%;
}
.main-image-box {
    width: 100%;
    height: 500px;
    background-color: var(--bg-main);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden;
}
.main-image-box img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}
.thumbnail-row {
    display: flex;
    gap: 15px;
}
.thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: 0.3s;
    background-color: var(--bg-main);
}
.thumb.active, .thumb:hover {
    border-color: var(--primary);
    opacity: 1;
}
.detail-info {
    width: 50%;
}
.breadcrumb {
    font-size: 13px;
    color: #999;
    margin-bottom: 15px;
}
.detail-info h1 {
    font-size: 42px;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.1;
}
.rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #999;
}
.price-area {
    margin-bottom: 20px;
}
.current-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    margin-right: 15px;
}
.old-price {
    font-size: 20px;
    text-decoration: line-through;
    color: #ccc;
}
.short-desc {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 30px;
}
.trust-badges {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.badge-item i {
    width: 60px;
    height: 60px;
    background-color: var(--bg-main);
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.badge-item span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
}
.action-area {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 5px;
}
.qty-selector button {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-dark);
}
.qty-selector input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 700;
    outline: none;
}
.btn-add-large {
    flex: 1;
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-add-large:hover {
    background-color: var(--primary);
    transform: translateY(-3px);
}
.accordion-wrapper {
    border-top: 1px solid #eee;
}
.accordion-item {
    border-bottom: 1px solid #eee;
}
.accordion-header {
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-body);
}
.accordion-header span i {
    margin-right: 10px;
    color: var(--primary);
}
.accordion-content {
    display: none;
    padding-bottom: 20px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
}
.accordion-item.open .accordion-content {
    display: block;
}
.accordion-item.open .arrow {
    transform: rotate(180deg);
}
.safe-text {
    color: #2A9D8F;
    background-color: #Eafbf9;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}
/* İletişim */
.contact-hero {
    background-color: var(--bg-main);
    padding: 60px 0 40px 0;
    text-align: center;
}
.contact-hero h1 {
    font-size: 42px;
    color: var(--text-dark);
    margin-bottom: 15px;
}
.contact-hero p {
    color: var(--text-light);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}
.contact-section {
    padding: 60px 0 100px 0;
}
.contact-wrapper {
    display: flex;
    gap: 50px;
    background: #fff;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.contact-info-box {
    flex: 1;
    background-color: var(--bg-main);
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.info-item .icon-circle {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
}
.info-item h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 5px;
    font-family: var(--font-head);
}
.info-item p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
}
.contact-socials h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--text-dark);
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    width: 40px;
    height: 40px;
    background-color: var(--text-dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}
.social-icons a:hover {
    background-color: var(--primary);
    transform: translateY(-3px);
}
.contact-form-box {
    flex: 1.5;
}
.contact-form-box h3 {
    font-size: 28px;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-family: var(--font-head);
}
.form-row {
    display: flex;
    gap: 20px;
}
.form-group {
    margin-bottom: 20px;
    width: 100%;
}
.form-group label {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 600;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #fcfcfc;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}
.form-group input:focus, .form-group textarea:focus {
    border-color: var(--primary);
    background-color: #fff;
}
.modern-select-container {
    position: relative;
    width: 100%;
}
.modern-select-container select {
    width: 100%;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #fcfcfc;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    color: var(--text-dark);
}
.modern-select-container select:focus {
    border-color: var(--primary);
    background-color: #fff;
}
.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    pointer-events: none;
}
.btn-send {
    background-color: var(--text-dark);
    color: #fff;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-send:hover {
    background-color: var(--primary);
    transform: translateX(5px);
}
/* =========================================
   LOGIN SAYFASI TASARIMI (DÜZELTİLMİŞ)
   ========================================= */

/* Sayfa Gövdesi */
.login-body {
    background-color: var(--bg-main); /* Kurumsal Bej Rengi */
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Elemanları alt alta dizer (Sorunu çözen kod) */
    font-family: var(--font-body);
}

/* Giriş Kutusu Kapsayıcısı (Ortalama için) */
.login-wrapper {
    flex: 1; /* Kalan tüm yüksekliği kapla */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    z-index: 10;
}

/* Ana Kart */
.login-container {
    display: flex;
    width: 1000px;
    max-width: 100%;
    min-height: 600px;
    background: #fff;
    box-shadow: 0 30px 60px rgba(74, 59, 50, 0.1); /* Yumuşak kahve tonlu gölge */
    border-radius: 30px; /* Modern yuvarlak köşeler */
    overflow: hidden;
}

/* Sol Taraf (Görsel) */
.login-image {
    flex: 1.1; /* Görsel alanı biraz daha geniş olsun */
    position: relative;
    background-color: var(--text-dark);
}

.login-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Görseli hafif karartarak yazıyı öne çıkar */
}

.login-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    text-align: left;
}

.login-overlay h2 {
    font-family: var(--font-head);
    font-size: 36px;
    margin-bottom: 10px;
    line-height: 1.1;
    color: #fff;
}

.login-overlay p {
    font-size: 14px;
    opacity: 0.9;
    max-width: 80%;
}

/* Sağ Taraf (Form) */
.login-form-area {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Logo */
.logo-login {
    display: block;
    margin-bottom: 40px;
    text-align: center;
}

.logo-login img {
    height: 60px; /* Arıg logosu boyutu */
    width: auto;
}

.login-form-area h3 {
    font-size: 28px;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-align: center;
}

.login-subtext {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin-bottom: 40px;
}

/* Input Alanları */
.input-group-login {
    position: relative;
    margin-bottom: 20px;
}

.input-group-login i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 16px;
    transition: 0.3s;
}

.input-group-login input {
    width: 100%;
    padding: 16px 20px 16px 50px; /* İkon için soldan boşluk */
    border: 2px solid #f0f0f0;
    border-radius: 50px; /* Hap şeklinde inputlar */
    outline: none;
    font-size: 14px;
    color: var(--text-dark);
    transition: 0.3s;
    background-color: #fcfcfc;
}

.input-group-login input:focus {
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.1);
}

.input-group-login input:focus + i {
    color: var(--primary);
}

/* Giriş Butonu */
.btn-login-submit {
    width: 100%;
    padding: 16px;
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-login-submit:hover {
    background-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
}

/* Alt Linkler */
.signup-link {
    text-align: center;
    margin-top: 30px;
    font-size: 13px;
    color: #888;
}

.signup-link a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .login-container {
        flex-direction: column;
        height: auto;
    }
    .login-image {
        height: 250px;
        flex: none;
    }
    .login-form-area {
        padding: 40px 30px;
    }
}
}
/* Checkout */
.checkout-section {
    padding: 40px 0 80px 0;
    background-color: #f9f9f9;
    min-height: 100vh;
}
.checkout-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.checkout-forms {
    flex: 1.5;
}
.form-box {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    margin-bottom: 30px;
}
.form-box h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.form-box h3 i {
    color: var(--primary);
}
.input-icon-wrap {
    position: relative;
}
.input-icon-wrap i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
}
.input-icon-wrap input {
    padding-left: 40px;
}
.credit-card-visual {
    width: 380px;
    height: 240px;
    margin: 0 auto 40px auto;
    perspective: 1000px;
    cursor: pointer;
}
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}
.credit-card-visual.flipped .card-inner {
    transform: rotateY(180deg);
}
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 18px;
    padding: 30px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #2b221e, #4a3b32);
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    font-family: "Courier New", monospace;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-front {
    z-index: 2;
    transform: rotateY(0deg);
}
.card-chip {
    width: 60px;
    height: 40px;
    background: linear-gradient(135deg, #e0ac69, #d4a373);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.card-chip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.2);
}
.card-chip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(0,0,0,0.2);
}
.card-number {
    font-size: 24px;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-top: 10px;
    text-align: left;
}
.card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}
.card-holder-group {
    flex: 2;
    text-align: left;
}
.card-expiry-group {
    flex: 1;
    text-align: right;
}
.label {
    font-size: 9px;
    opacity: 0.7;
    display: block;
    margin-bottom: 4px;
    font-family: sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.card-holder, .card-expiry {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}
.card-back {
    transform: rotateY(180deg);
    padding: 0;
    justify-content: flex-start;
}
.magnetic-strip-large {
    width: 100%;
    height: 50px;
    background: #000;
    margin-top: 30px;
}
.signature-row {
    padding: 0 30px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.signature-area {
    flex: 1;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-family: "Brush Script MT", cursive;
    color: #333;
    font-size: 18px;
    opacity: 0.8;
}
.cvc-box-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cvc-box-visual .label {
    text-align: center;
    margin-bottom: 2px;
}
#visualCardCVC {
    font-size: 14px;
    font-weight: bold;
    background: #fff;
    color: #333;
    padding: 10px;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}
.card-logo {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 40px;
    opacity: 0.9;
}
.card-logo-back {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-size: 40px;
    opacity: 0.6;
}
.label-with-tooltip {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tooltip-container {
    position: relative;
    cursor: pointer;
    display: flex;
}
.help-icon {
    color: #aaa;
    transition: 0.3s;
    font-size: 16px;
}
.help-icon:hover {
    color: var(--primary);
}
.cvc-tooltip {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #333;
    width: 160px;
    padding: 10px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 100;
    text-align: center;
}
.tooltip-container:hover .cvc-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.cvc-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.mini-card-back {
    width: 100%;
    height: 80px;
    background: #eee;
    border-radius: 5px;
    position: relative;
    margin-bottom: 8px;
    overflow: hidden;
}
.magnetic-strip {
    width: 100%;
    height: 20px;
    background: #000;
    margin-top: 10px;
}
.signature-box {
    width: 80%;
    height: 20px;
    background: #fff;
    margin: 5px auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
}
.cvc-highlight {
    font-size: 10px;
    color: #d00;
    border: 1px solid #d00;
    border-radius: 50%;
    padding: 1px 3px;
    font-weight: bold;
}
.cvc-tooltip p {
    color: #fff;
    font-size: 11px;
    margin: 0;
    font-family: sans-serif;
    font-weight: normal;
}
.checkout-summary {
    flex: 1;
    position: sticky;
    top: 100px;
}
.summary-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.summary-items {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 5px;
}
.summary-item-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.summary-item-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}
.summary-item-info h4 {
    font-size: 13px;
    color: var(--text-dark);
}
.summary-item-info span {
    font-size: 12px;
    color: #999;
}
.summary-item-price {
    margin-left: auto;
    font-weight: 700;
    color: var(--primary);
}
.summary-divider {
    border-top: 2px dashed #eee;
    margin: 20px 0;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-light);
    font-size: 14px;
}
.summary-row.total {
    font-size: 20px;
    color: var(--text-dark);
    font-weight: 700;
    margin-top: 10px;
}
.free-shipping {
    color: #2A9D8F;
    font-weight: bold;
}
.btn-complete-order {
    width: 100%;
    padding: 15px;
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}
.btn-complete-order:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
}
.secure-badge {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.success-icon-animated {
    width: 80px;
    height: 80px;
    background: #2A9D8F;
    color: #fff;
    border-radius: 50%;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.order-number-box {
    background: #f5f5f5;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    color: var(--text-dark);
    font-size: 14px;
}
.order-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 400px;
    margin: 0 auto 50px auto;
}
.step-line {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #eee;
    z-index: 0;
}
.step-line-fill {
    width: 20%;
    height: 100%;
    background: var(--primary);
}
.step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
}
.step.active {
    opacity: 1;
}
.step-circle {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 3px solid #eee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #999;
}
.step.active .step-circle {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.step span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
}
@media (max-width: 900px) {
    .checkout-container {
        flex-direction: column;
    }
    .checkout-summary {
        position: static;
        width: 100%;
    }
}
/* =========================================
   21. GİZLİLİK POLİTİKASI SAYFASI
   ========================================= */
.privacy-hero {
    padding: 80px 0 60px 0;
    text-align: center;
    background-color: var(--bg-main);
}
.privacy-hero h1 {
    font-size: 36px;
    color: var(--text-dark);
    margin-bottom: 15px;
}
.privacy-hero p {
    color: var(--text-light);
    font-size: 16px;
}
.privacy-section {
    padding: 60px 0 100px 0;
    background-color: #fff;
}
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-dark);
    line-height: 1.8;
}
.privacy-content h2 {
    font-family: var(--font-head);
    font-size: 24px;
    color: var(--primary-dark);
    margin-top: 40px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--bg-main);
    padding-bottom: 10px;
    display: inline-block;
}
.privacy-content p {
    margin-bottom: 20px;
    font-size: 15px;
}
.privacy-content a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
}
/* Güvenlik Rozetleri Kutusu */
.security-badge-box {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.s-badge {
    background-color: #Eafbf9;
    color: #2A9D8F;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.last-update {
    margin-top: 50px;
    font-size: 13px;
    color: #999;
    font-style: italic;
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
/* =========================================
   22. SİPARİŞ ONAY SAYFASI TASARIMI
   ========================================= */
.success-section {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    padding: 40px 20px;
}
.success-box {
    background: #fff;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    max-width: 700px;
    width: 100%;
    text-align: center;
}
/* Animasyonlu İkon */
.success-icon-animated {
    width: 100px;
    height: 100px;
    background: #2A9D8F;
    color: #fff;
    border-radius: 50%;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(42, 157, 143, 0.3);
}
.success-box h1 {
    font-size: 36px;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-family: var(--font-head);
}
.success-subtext {
    color: var(--text-light);
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.6;
}
.order-number-box {
    background: #F5EFE6;
    display: inline-flex;
    flex-direction: column;
    padding: 15px 40px;
    border-radius: 15px;
    margin-bottom: 50px;
    border: 1px dashed var(--primary);
}
.order-number-box span {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.order-number-box strong {
    font-size: 24px;
    color: var(--text-dark);
    font-family: var(--font-head);
    letter-spacing: 1px;
}
/* --- SİPARİŞ TAKİP ÇUBUĞU (ANİMASYONLU) --- */
.order-steps-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 60px;
    padding: 0 20px;
}
.step-line-bg {
    position: absolute;
    top: 25px;
    left: 50px;
    right: 50px;
    height: 4px;
    background: #eee;
    z-index: 0;
    border-radius: 4px;
    overflow: hidden;
}
.step-line-progress {
    width: 0%;
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    animation: growLine 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
}
@keyframes growLine {
    0% {
        width: 0%;
    }
    100% {
        width: 32%;
    }
}
.step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 80px;
}
.step-icon {
    width: 50px;
    height: 50px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #ccc;
    transition: 0.3s;
}
.step span {
    font-size: 12px;
    font-weight: 600;
    color: #ccc;
    transition: 0.3s;
}
.step.active .step-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.4);
    transform: scale(1.1);
}
.step.active span {
    color: var(--text-dark);
    font-weight: 700;
}
.step:nth-child(2) .step-icon {
    border-color: var(--primary);
    color: var(--primary);
    transition-delay: 1.5s;
}
.step.active .step-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.4);
    transform: scale(1.1);
}
.step.active span {
    color: var(--text-dark);
}
.btn-back-home {
    padding: 15px 50px;
    font-size: 14px;
    letter-spacing: 1px;
}
@media (max-width: 600px) {
    .success-box {
        padding: 40px 20px;
    }
    .step-icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .step span {
        font-size: 10px;
    }
    .step-line-bg {
        top: 20px;
        left: 30px;
        right: 30px;
    }
}
/* SSS Sayfası */
.faq-hero {
    background-color: var(--bg-main);
    padding: 80px 0 40px 0;
    text-align: center;
}
.faq-hero h1 {
    font-size: 36px;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.faq-content {
    padding: 60px 0 100px 0;
    background: #fff;
}
.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
}
/* YUKARI ÇIK BUTONU */
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--primary);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.3s;
}
#scrollTopBtn:hover {
    background-color: var(--text-dark);
    transform: translateY(-5px);
}
/* =========================================
   23. 404 HATA SAYFASI
   ========================================= */
.error-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-main);
    text-align: center;
    padding: 80px 20px;
}
.error-code {
    font-size: 120px;
    line-height: 1;
    color: var(--primary);
    margin-bottom: 20px;
    font-family: var(--font-head);
}
.error-title {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 15px;
    text-transform: uppercase;
}
.error-text {
    color: var(--text-light);
    margin-bottom: 40px;
    font-size: 18px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
/* =========================================
   24. TARİFLER SAYFASI TASARIMI
   ========================================= */
.recipe-hero {
    background-color: var(--bg-main);
    padding: 80px 0 50px 0;
    text-align: center;
}
.recipe-hero .sub-head {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    display: block;
    margin-bottom: 15px;
}
.recipe-hero h1 {
    font-size: 48px;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.1;
}
.recipe-hero p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}
.recipe-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.r-filter-btn {
    background: #fff;
    border: 1px solid #eee;
    padding: 12px 25px;
    border-radius: 30px;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
}
.r-filter-btn i {
    color: var(--primary);
}
.r-filter-btn:hover, .r-filter-btn.active {
    background-color: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}
.r-filter-btn:hover i, .r-filter-btn.active i {
    color: #fff;
}
.recipe-feed {
    padding: 0 0 100px 0;
    background-color: #fff;
}
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.recipe-card {
    background: var(--bg-main);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.recipe-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: rgba(212, 163, 115, 0.3);
}
.r-img {
    height: 220px;
    position: relative;
    overflow: hidden;
}
.r-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.recipe-card:hover .r-img img {
    transform: scale(1.05);
}
.level-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}
.level-badge.easy {
    background-color: #2A9D8F;
}
.level-badge.medium {
    background-color: #F4A261;
}
.level-badge.hard {
    background-color: #E76F51;
}
.r-content {
    padding: 25px;
}
.r-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    font-weight: 600;
}
.r-meta i {
    color: var(--primary);
}
.r-content h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-family: var(--font-head);
    line-height: 1.3;
}
.r-content p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.btn-recipe-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}
.recipe-card:hover .btn-recipe-link {
    gap: 10px;
}
@media (max-width: 900px) {
    .recipe-grid {
        grid-template-columns: 1fr;
    }
    .recipe-filters {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
    }
}
/* =========================================
   24. PROFİL / HESABIM SAYFASI
   ========================================= */
.profile-section {
    padding: 60px 0 100px 0;
    background-color: #f9f9f9;
    min-height: 80vh;
}
.profile-container {
    display: flex;
    gap: 40px;
}
.profile-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    height: fit-content;
}
.user-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.user-avatar {
    width: 50px;
    height: 50px;
    background-color: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
}
.user-info h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 2px;
}
.user-info span {
    font-size: 12px;
    color: #999;
}
.profile-menu {
    list-style: none;
}
.profile-menu li {
    margin-bottom: 5px;
}
.profile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 10px;
    color: var(--text-light);
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}
.profile-menu a:hover, .profile-menu li.active a {
    background-color: #F5EFE6;
    color: var(--primary);
}
.profile-menu li.logout a {
    color: #E63946;
}
.profile-menu li.logout a:hover {
    background-color: #ffe5e7;
}
.profile-content {
    flex: 1;
}
.profile-content h3 {
    font-size: 24px;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-family: var(--font-head);
}
.order-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}
.order-date {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 700;
}
.order-no {
    font-size: 12px;
    color: #999;
}
.order-status {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.order-status.preparing {
    background-color: #FFF3CD;
    color: #856404;
}
.order-status.delivered {
    background-color: #D4EDDA;
    color: #155724;
}
.order-items-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.order-items-preview img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #eee;
}
.more-items {
    font-size: 12px;
    color: #999;
    background: #f9f9f9;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    text-align: center;
}
.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-footer strong {
    color: var(--text-dark);
    font-size: 18px;
}
.btn-track {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.btn-outline-small {
    border: 1px solid var(--text-dark);
    background: transparent;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-dark);
}
@media (max-width: 900px) {
    .profile-container {
        flex-direction: column;
    }
    .profile-sidebar {
        width: 100%;
    }
}
/* =========================================
   23. TOAST BİLDİRİM (POPUP)
   ========================================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    background-color: #fff;
    color: var(--text-dark);
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    border-left: 5px solid #2A9D8F;
    animation: slideInToast 0.3s ease, fadeOutToast 0.5s ease 2.5s forwards;
    min-width: 250px;
}
.toast i {
    color: #2A9D8F;
    font-size: 18px;
}
@keyframes slideInToast {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fadeOutToast {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
    }
}
/* =========================================
   22. KULLANIM KOŞULLARI SAYFASI
   ========================================= */
.terms-hero {
    padding: 80px 0 60px 0;
    text-align: center;
    background-color: var(--bg-main);
}
.terms-hero h1 {
    font-size: 36px;
    color: var(--text-dark);
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.terms-hero p {
    color: var(--text-light);
    font-size: 16px;
}
.terms-section {
    padding: 60px 0 100px 0;
    background-color: #fff;
}
.terms-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-dark);
    line-height: 1.8;
}
.term-block {
    margin-bottom: 40px;
}
.term-block h3 {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--primary-dark);
    margin-bottom: 15px;
    border-left: 4px solid var(--primary);
    padding-left: 15px;
}
.term-block p {
    font-size: 15px;
    color: #555;
}
/* Bilgi Notu Kutusu */
.info-note {
    background-color: #FFF8E1;
    border: 1px solid #FFE082;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 40px;
    color: #795548;
}
.info-note i {
    font-size: 24px;
    color: #FFA000;
}
.info-note p {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
}
/* =========================================
   23. PRELOADER & COOKIE (KESİN DÜZELTME)
   ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-main);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-logo {
    font-family: "RL Folklor", serif;
    font-size: 60px;
    color: var(--primary);
    margin-bottom: 20px;
    animation: pulse 1.5s infinite;
}
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(212, 163, 115, 0.3);
    border-top: 5px solid var(--text-dark);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}
/* =========================================
   26. COOKIE BANNER (SON DÜZELTME)
   ========================================= */
.cookie-banner-box {
    position: fixed !important;
    bottom: -200px !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #fff !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1) !important;
    padding: 20px 0 !important;
    z-index: 100000 !important;
    border-top: 4px solid #D4A373 !important;
    transition: bottom 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: block !important;
}
.cookie-banner-box.show {
    bottom: 0 !important;
}
.cookie-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px;
}
.cookie-inner p {
    margin: 0 !important;
    color: #333 !important;
    font-size: 14px !important;
    flex: 1;
}
.cookie-inner a {
    color: #D4A373 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
.cookie-buttons {
    display: flex;
    gap: 10px;
}
.btn-cookie-accept {
    background-color: #4A3B32 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}
.btn-cookie-accept:hover {
    background-color: #D4A373 !important;
}
.btn-cookie-decline {
    background-color: transparent !important;
    color: #4A3B32 !important;
    border: 1px solid #4A3B32 !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}
.btn-cookie-decline:hover {
    background-color: #f5f5f5 !important;
    color: #000 !important;
}
@media (max-width: 768px) {
    .cookie-inner {
        flex-direction: column !important;
        text-align: center !important;
    }
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================
   27. FAVORİLER (WISHLIST) İKONU
   ========================================= */
.btn-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    border: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.btn-fav:hover {
    transform: scale(1.1);
    color: #E63946;
}
.btn-fav.active {
    color: #E63946;
    background: #fff0f0;
}
.btn-fav.active i {
    font-weight: 900;
}
.empty-wishlist {
    text-align: center;
    padding: 100px 0;
}
.empty-wishlist i {
    font-size: 60px;
    color: #ddd;
    margin-bottom: 20px;
}
.empty-wishlist h3 {
    font-size: 24px;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.empty-wishlist p {
    color: var(--text-light);
    margin-bottom: 30px;
}
/* =========================================
   28. ÜRÜN DETAY SEKMELERİ (TABS)
   ========================================= */
.product-tabs {
    margin-top: 80px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}
.tab-header {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    border-bottom: 2px solid #f5f5f5;
}
.tab-btn {
    background: none;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    font-family: var(--font-head);
    position: relative;
    transition: 0.3s;
}
.tab-btn::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary);
    transition: width 0.3s;
}
.tab-btn:hover {
    color: var(--text-dark);
}
.tab-btn.active {
    color: var(--text-dark);
}
.tab-btn.active::after {
    width: 100%;
}
.tab-pane {
    display: none;
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn 0.4s ease;
}
.tab-pane.active {
    display: block;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tab-pane h3 {
    font-size: 24px;
    color: var(--text-dark);
    margin-bottom: 20px;
}
.tab-pane p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}
.nutritional-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
    background: var(--bg-main);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}
.nutri-item span {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 5px;
}
.nutri-item strong {
    font-size: 20px;
    color: var(--primary-dark);
}
.review-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 15px;
}
.average-score {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}
.review-summary .stars {
    color: #F4A261;
    font-size: 18px;
}
.btn-write-review {
    margin-left: auto;
    background: var(--text-dark);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 700;
}
.review-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.stars-small {
    color: #F4A261;
    font-size: 12px;
}
.review-date {
    font-size: 12px;
    color: #ccc;
    display: block;
    margin-top: 10px;
}
.shipping-list {
    list-style: none;
}
.shipping-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: var(--text-light);
}
.shipping-list i {
    color: var(--primary);
    font-size: 20px;
    margin-top: 3px;
}
@media (max-width: 768px) {
    .tab-header {
        flex-direction: column;
        border-bottom: none;
    }
    .tab-btn {
        border-bottom: 1px solid #eee;
        width: 100%;
        text-align: left;
    }
    .nutritional-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .review-summary {
        flex-direction: column;
        text-align: center;
    }
    .btn-write-review {
        margin: 0;
        width: 100%;
    }
}
/* =========================================
   27. KUPON KODU ALANI
   ========================================= */
.coupon-box {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.coupon-box input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: var(--font-body);
    outline: none;
    transition: 0.3s;
    font-size: 13px;
    text-transform: uppercase;
}
.coupon-box input:focus {
    border-color: var(--primary);
}
.coupon-box button {
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
}
.coupon-box button:hover {
    background-color: var(--primary);
}
.coupon-msg {
    font-size: 12px;
    margin-bottom: 10px;
    display: none;
}
.coupon-msg.success {
    color: #2A9D8F;
    display: block;
}
.coupon-msg.error {
    color: #E63946;
    display: block;
}
.discount-row {
    color: #2A9D8F;
    font-weight: 600;
}
/* =========================================
   28. SCROLL ANİMASYONLARI (FADE IN UP)
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================
   29. MOBİL ALT MENÜ (BOTTOM NAV)
   ========================================= */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 900px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #fff;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        z-index: 9999;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    footer {
        padding-bottom: 90px;
    }
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 12px;
        text-decoration: none;
        flex: 1;
    }
    .nav-item i {
        font-size: 20px;
        margin-bottom: 4px;
        transition: 0.3s;
    }
    .nav-item.active-nav, .nav-item:hover {
        color: var(--primary);
    }
    .nav-item.center {
        position: relative;
        bottom: 25px;
    }
    .nav-cart-btn {
        width: 60px;
        height: 60px;
        background-color: var(--text-dark);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        transition: 0.3s;
        border: 4px solid #fff;
    }
    .nav-cart-btn:active {
        transform: scale(0.9);
    }
}
/* =========================================
   29. FİNAL EKLENTİLER (DUYURU & WHATSAPP)
   ========================================= */
.announcement-bar {
    background-color: var(--text-dark);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    position: relative;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: margin-top 0.4s ease;
}
.announcement-bar p {
    margin: 0;
}
.announcement-bar strong {
    color: var(--primary);
}
#closeAnnouncement {
    background: none;
    border: none;
    color: #999;
    position: absolute;
    right: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}
#closeAnnouncement:hover {
    color: #fff;
}
.announcement-hidden {
    margin-top: -50px;
    display: none;
}
/* --- BREADCRUMBS --- */
.breadcrumb-nav {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb-nav a {
    color: #999;
    transition: 0.3s;
}
.breadcrumb-nav a:hover {
    color: var(--primary);
}
.breadcrumb-nav .current {
    color: var(--text-dark);
    font-weight: 600;
}
.breadcrumb-nav .sep {
    font-size: 10px;
    opacity: 0.5;
}
/* --- EXIT POPUP --- */
.exit-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}
.exit-popup-box {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    max-width: 400px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.popup-icon {
    font-size: 50px;
    margin-bottom: 15px;
}
.exit-popup-box h2 {
    color: var(--text-dark);
    font-size: 28px;
    margin-bottom: 10px;
}
.exit-popup-box p {
    color: var(--text-light);
    margin-bottom: 20px;
}
.coupon-code-display {
    background: #F5EFE6;
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
    padding: 15px;
    border: 2px dashed var(--primary);
    border-radius: 10px;
    margin-bottom: 25px;
    letter-spacing: 2px;
}
.close-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}
.close-popup:hover {
    color: #E63946;
}
/* =========================================
   ANALİZ SAYFASI V3.0 (ETİK & DETAYLI)
   ========================================= */
.top-badges {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
}
.update-badge {
    font-size: 10px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.protocol-badge {
    text-align: center;
    font-size: 11px;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 15px;
    background: rgba(212, 163, 115, 0.1);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
}
.score-breakdown {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.sb-item {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.sb-dot.safe {
    background-color: #2A9D8F;
}
.sb-dot.risk {
    background-color: #F4A261;
}
.sb-dot.danger {
    background-color: #E63946;
}
.personal-alert {
    background-color: #Eafbf9;
    color: #2A9D8F;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(42, 157, 143, 0.2);
}
.risk-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-left: 4px solid #ccc;
}
.risk-item.success {
    border-left-color: #2A9D8F;
}
.risk-item.warning {
    border-left-color: #F4A261;
}
.risk-item.danger {
    border-left-color: #E63946;
}
.ri-header {
    padding: 5px 15px;
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
}
.ri-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
}
.risk-item.success .ri-badge {
    color: #2A9D8F;
}
.risk-item.warning .ri-badge {
    color: #F4A261;
}
.ri-body {
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.medical-disclaimer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    color: #999;
}
.medical-disclaimer p {
    font-size: 11px;
    margin-bottom: 10px;
}
.disclaimer-links a {
    font-size: 11px;
    color: var(--text-dark);
    text-decoration: underline;
    margin: 0 5px;
}
/* =========================================
   PROFESYONEL ORANTILI HEADER (GRID SİSTEM)
   ========================================= */

/* 1. ANA KAPSAYICI */
.navbar {
    display: grid;
    /* Sol (1 birim), Orta (Logonun boyutu kadar), Sağ (1 birim) */
    grid-template-columns: 1fr auto 1fr;
    align-items: center; /* Dikeyde tam ortala */
    padding: 15px 40px; /* Dış kenarlardan boşluk */
    max-width: 1400px; /* Çok geniş ekranlarda dağılmasın */
    margin: 0 auto; /* Sayfada ortala */
    height: 100px; /* Sabit yükseklik ile zıplamayı önle */
}

/* 2. SOL MENÜ (Ana Sayfa, Market...) */
.nav-split.nav-left {
    justify-self: end; /* İçeriği sağa (Logoya doğru) it */
    padding-right: 60px; /* Logo ile arasındaki net, sabit boşluk */
}

/* 3. LOGO (Tam Merkez) */
.logo-center {
    justify-self: center; /* Grid hücresinin tam ortasında dur */
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

.logo-center img {
    height: 75px; /* Logo boyutu */
    width: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-center img:hover {
    transform: scale(1.05); /* Üzerine gelince hafif büyüme */
}

/* 4. SAĞ MENÜ (Blog, Tarifler...) */
.nav-right-wrapper {
    justify-self: start; /* İçeriği sola (Logoya doğru) it */
    padding-left: 60px; /* Logo ile arasındaki net, sabit boşluk (Soldaki ile EŞİT) */
    
    display: flex;
    align-items: center;
    gap: 40px; /* Link grubu ile Sepet/Giriş grubu arasındaki mesafe */
}

/* LİNKLERİN GENEL AYARLARI */
.nav-split ul {
    display: flex;
    gap: 35px; /* Linkler arası eşit boşluk */
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-split a {
    font-family: var(--font-body); /* Font ayarı */
    font-size: 13px;
    font-weight: 800; /* Kalın ve tok duruş */
    color: #5D4037; /* Koyu Kahve */
    text-transform: uppercase;
    letter-spacing: 1px; /* Harf aralığı ile ferahlık */
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap; /* Alt satıra düşmeyi engelle */
}

.nav-split a:hover,
.active-link {
    color: #D4A373; /* Hover rengi (Arıg Gold) */
}

/* SAĞDAKİ İKON VE BUTON GRUBU */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 25px; /* Sepet ikonu ve Giriş butonu arası */
    border-left: 1px solid rgba(0,0,0,0.1); /* İnce ayırıcı çizgi */
    padding-left: 25px;
}

/* Sepet İkonu */
.cart-icon-box {
    font-size: 18px;
    color: #5D4037;
    cursor: pointer;
    transition: 0.3s;
    position: relative; /* Rozet için */
}

.cart-icon-box:hover {
    color: #D4A373;
    transform: translateY(-2px);
}

/* Sepet Sayı Rozeti */
.cart-count {
    background-color: #D4A373;
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    right: -8px;
    border: 2px solid #F5EFE6; /* Arka plan rengiyle sınır */
}

/* Giriş Butonu (Daha estetik) */
.btn-login {
    border: 2px solid #5D4037;
    background: transparent;
    padding: 8px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 12px;
    color: #5D4037;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-block;
}

.btn-login:hover {
    background: #5D4037;
    color: #fff;
    box-shadow: 0 5px 15px rgba(93, 64, 55, 0.2);
}

/* MOBİL UYUMLULUK (Tablet ve altı) */
@media (max-width: 1100px) {
    .navbar {
        display: flex; /* Mobilde Flex'e dön */
        justify-content: space-between;
        height: auto;
        padding: 15px 20px;
    }
    
    .nav-split, .auth-buttons {
        display: none; /* Menüleri gizle (Hamburger menü devreye girer) */
    }
    
    .logo-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .hamburger-menu {
        display: block; /* Hamburgeri aç */
        font-size: 24px;
        cursor: pointer;
        color: #5D4037;
    }
    
    .nav-right-wrapper {
        padding: 0; /* Boşlukları sıfırla */
        justify-content: flex-end;
        width: 100%;
    }
}==================================
   HEADER DÜZENİ v3 (GRID SİSTEMİ - ÇAKIŞMA YOK)
   ========================================= */
.navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 15px 40px;
    height: auto;
    min-height: 100px;
}
.nav-split.nav-left {
    justify-self: start;
}
.logo-center {
    position: static;
    transform: none;
    text-align: center;
    padding: 0 40px;
}
.logo-img {
    height: 70px !important;
    width: auto;
    display: block;
    transition: transform 0.3s;
    max-height: none;
}
.logo-img:hover {
    transform: scale(1.05);
}
.nav-right-wrapper {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 30px;
}
.nav-split ul {
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-split a {
    font-weight: 800;
    font-size: 14px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: color 0.3s;
}
.nav-split a:hover {
    color: var(--primary);
}
@media (max-width: 1100px) {
    .navbar {
        display: flex;
        justify-content: space-between;
    }
    .nav-split {
        display: none;
    }
    .logo-center {
        padding: 0;
    }
    .logo-img {
        height: 50px;
    }
}
/* =========================================
   ANALİZ SAYFASI HEADER FIX (Sadece Analiz)
   ========================================= */
body.page-analiz .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    min-height: auto;
}
body.page-analiz .logo-center {
    position: static;
    transform: none;
    padding: 0;
}
body.page-analiz .logo-img {
    height: 45px !important;
    max-height: 45px;
}
/* Hero Alanı */
.analysis-hero {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(circle at top, #fff 0%, var(--bg-main) 100%);
}
.analysis-hero h1 {
    font-size: 42px;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.1;
}
.analysis-hero p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 30px;
}
/* Arama Çubuğu */
.pro-search-bar {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    padding: 5px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    position: relative;
    z-index: 10;
}
.pro-search-bar:focus-within {
    border-color: var(--primary);
    transform: translateY(-2px);
}
.pro-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    padding: 15px;
    font-size: 16px;
    background: transparent;
    font-family: var(--font-body);
}
.pro-search-bar button {
    background: var(--text-dark);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 40px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}
.pro-search-bar button:hover {
    background: var(--primary);
}
.scanner-visual {
    margin-top: 30px;
    opacity: 0.1;
}
.barcode-img {
    width: 80px;
}
.badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* --- SONUÇ KARTI (DECISION CARD) --- */
.result-section {
    padding: 40px 0 100px 0;
}
.btn-back {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-back:hover {
    color: var(--text-dark);
}
.decision-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border: 1px solid rgba(0,0,0,0.02);
}
/* Ürün Kimlik */
.product-identity {
    display: flex;
    gap: 20px;
    padding: 30px;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.prod-img-box {
    width: 100px;
    height: 100px;
    border-radius: 15px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.prod-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.prod-info-box {
    flex: 1;
}
.top-badges {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
}
.prod-cat {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    font-weight: 700;
}
.update-badge {
    font-size: 10px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.prod-info-box h2 {
    font-size: 24px;
    color: var(--text-dark);
    margin: 5px 0;
    line-height: 1.2;
}
.prod-brand {
    font-weight: 600;
    color: var(--primary);
}
.barcode-tiny {
    font-size: 11px;
    color: #ccc;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Durum Banner */
.status-banner {
    padding: 20px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.status-banner.safe {
    background-color: #2A9D8F;
}
.status-banner.risk {
    background-color: #F4A261;
}
.status-banner.danger {
    background-color: #E63946;
}
/* Güven Skoru */
.trust-score-area {
    padding: 40px 20px;
    text-align: center;
    background-color: #fcfcfc;
}
.protocol-badge {
    text-align: center;
    font-size: 11px;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 15px;
    background: rgba(212, 163, 115, 0.1);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
}
.score-circle-outer {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px auto;
}
.score-circle-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
#trustScoreVal {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}
.score-circle-inner small {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    margin-top: 5px;
}
.progress-ring__circle {
    transition: stroke-dashoffset 1s ease-in-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.score-breakdown {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.sb-item {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.sb-dot.safe {
    background-color: #2A9D8F;
}
.sb-dot.risk {
    background-color: #F4A261;
}
.sb-dot.danger {
    background-color: #E63946;
}
.score-desc {
    font-size: 13px;
    color: #888;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
    margin-top: 15px;
}
/* Sekmeler */
.analysis-tabs {
    padding: 30px;
}
.tab-buttons {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 20px;
}
.a-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 15px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: 0.3s;
}
.a-tab.active {
    color: var(--text-dark);
    border-color: var(--text-dark);
}
.a-tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}
.a-tab-content.active {
    display: block;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* İçerik & Risk Kartları */
.personal-alert {
    background-color: #Eafbf9;
    color: #2A9D8F;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(42, 157, 143, 0.2);
}
.risk-grid {
    display: grid;
    gap: 20px;
}
.risk-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-left: 4px solid #ccc;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
}
.risk-item.success {
    border-left: 4px solid #2A9D8F;
}
.risk-item.warning {
    border-left: 4px solid #F4A261;
}
.risk-item.danger {
    border-left: 4px solid #E63946;
}
.ri-header {
    padding: 5px 15px;
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
}
.ri-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
}
.risk-item.success .ri-badge {
    color: #2A9D8F;
}
.risk-item.warning .ri-badge {
    color: #F4A261;
}
.ri-body {
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.ri-body i {
    font-size: 24px;
    color: var(--primary);
}
.ri-body h4 {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-dark);
}
.ri-body p {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.ingredient-check-list {
    list-style: none;
    padding: 0;
}
.ingredient-check-list li {
    padding: 10px;
    border-bottom: 1px solid #f9f9f9;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ingredient-check-list li.ok i {
    color: #2A9D8F;
}
.ingredient-check-list li.warn i {
    color: #E63946;
}
/* Besin Bar */
.comparison-box h4 {
    margin-bottom: 15px;
    font-size: 14px;
}
.comp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.bar-container {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    background: var(--text-dark);
    border-radius: 4px;
}
.val.success {
    color: #2A9D8F;
    font-weight: 700;
}
.comp-note {
    font-size: 11px;
    color: #999;
    margin-top: 15px;
    font-style: italic;
}
/* Aksiyonlar */
.action-buttons-group {
    padding: 30px;
    display: flex;
    gap: 15px;
}
.btn-action {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.btn-action.primary {
    background: var(--text-dark);
    color: #fff;
}
.btn-action.primary:hover {
    background: var(--primary);
}
.btn-action.secondary {
    background: #f0f0f0;
    color: #666;
}
.btn-action.secondary:hover {
    background: #e0e0e0;
}
/* Disclaimer */
.medical-disclaimer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    color: #999;
    margin-bottom: 20px;
}
.medical-disclaimer p {
    font-size: 11px;
    margin-bottom: 10px;
}
.disclaimer-links a {
    font-size: 11px;
    color: var(--text-dark);
    text-decoration: underline;
    margin: 0 5px;
}
/* =========================================
   ANALİZ V3.1 - MEDİKAL & ETİK GÜNCELLEMELER
   ========================================= */
/* 1. Yeni Risk Statüleri (Bilinmiyor / Belirsiz) */
.risk-item.unknown {
    border-left-color: #F4A261;
    /* Turuncu/Sarı */
}
.risk-item.unknown .ri-badge {
    color: #F4A261;
}
.risk-item.unknown i {
    color: #F4A261;
}
/* 2. Skor Altı Etiketler (Labels) */
.sb-item {
    flex-direction: column;
    gap: 5px;
    text-align: center;
}
.sb-label {
    font-size: 9px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
}
/* 3. Besin Değeri Tooltip (Bilgi Balonu) */
.comp-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.info-tooltip {
    position: relative;
    cursor: pointer;
    color: #999;
}
.info-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 200px;
    background: #333;
    color: #fff;
    font-size: 11px;
    padding: 8px;
    border-radius: 6px;
    z-index: 10;
    line-height: 1.4;
}
/* 4. Belirgin Yasal Uyarı (Disclaimer Box) */
.medical-disclaimer-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid #6c757d;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
    text-align: left;
}
.disclaimer-title {
    font-size: 13px;
    font-weight: 800;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.medical-disclaimer-box p {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}
/* 5. Küçük Notlar (Kart İçi) */
.sub-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin-top: 5px;
    display: block;
}
/* =========================================
   ANALİZ V3.2 - DETAYLI BESİN DEĞERLERİ
   ========================================= */
/* Besin Değerleri Ana Kutusu */
.nutrition-container {
    background: #fff;
    border-radius: 15px;
    border: 1px solid #eee;
    padding: 20px;
}
.nutrition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f5f5f5;
}
.nutrition-header h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin: 0;
}
.serving-info {
    font-size: 11px;
    color: #999;
    background: #f9f9f9;
    padding: 4px 10px;
    border-radius: 20px;
}
/* Detaylı Grid (Kutucuklar) */
.nutri-detailed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Mobilde 2 sütun */
    gap: 15px;
    margin-bottom: 25px;
}
.n-box {
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.n-box span {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 700;
}
.n-box strong {
    font-size: 18px;
    color: var(--text-dark);
    font-family: var(--font-body);
}
.n-box small {
    font-size: 10px;
    color: #ccc;
}
/* Önemli Değerler (Enerji & Protein) */
.n-box.highlight {
    background: #Eafbf9;
    border-color: #2A9D8F;
}
.n-box.highlight strong {
    color: #2A9D8F;
}
/* Liste Görünümü (Yağ, Şeker vb.) */
.nutri-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nutri-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9f9f9;
    font-size: 13px;
}
.nutri-row:last-child {
    border-bottom: none;
}
.nutri-label {
    color: #666;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nutri-value {
    font-weight: 700;
    color: var(--text-dark);
}
/* Renkli Noktalar (Trafik Işığı Mantığı) */
.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #ddd;
}
.dot-indicator.low {
    background: #2A9D8F;
}
/* Düşük (İyi) */
.dot-indicator.med {
    background: #F4A261;
}
/* Orta */
.dot-indicator.high {
    background: #E63946;
}
/* Yüksek (Kötü) */
@media (min-width: 600px) {
    .nutri-detailed-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* =========================================
   ARAMA OTOMATİK TAMAMLAMA (AUTOCOMPLETE)
   ========================================= */
.pro-search-bar {
    position: relative;
    /* Öneri kutusu buna göre hizalanacak */
    z-index: 1000;
}
/* Öneri Kutusu (Başlangıçta Gizli) */
.suggestions-box {
    position: absolute;
    top: 105%;
    /* Inputun hemen altı */
    left: 15px;
    /* Butonların hizasına göre ayar */
    right: 15px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 1px solid #f0f0f0;
    max-height: 350px;
    overflow-y: auto;
    display: none;
    /* JS ile açılacak */
    z-index: 1001;
}
.suggestions-box.active {
    display: block;
    animation: fadeIn 0.2s ease;
}
/* Tekil Öneri Satırı */
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f9f9f9;
    transition: 0.2s;
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover {
    background-color: #F5EFE6;
}
/* Küçük Resim */
.s-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 2px;
}
/* Ürün Bilgisi */
.s-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.s-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}
.s-brand {
    font-size: 11px;
    color: #999;
}
/* =========================================
   ANA SAYFA HERO ARAMA ALANI (YENİ)
   ========================================= */
.hero-search-box {
    background: #fff;
    padding: 5px;
    border-radius: 50px;
    display: flex;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    margin-top: 25px;
    margin-bottom: 10px;
    max-width: 480px;
    /* Genişlik */
    border: 1px solid rgba(0,0,0,0.05);
}
.hero-search-input {
    border: none;
    background: transparent;
    flex: 1;
    padding: 0 20px;
    outline: none;
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--text-dark);
}
.hero-search-btn {
    background: var(--text-dark);
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 0.5px;
}
.hero-search-btn:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.4);
}
.barcode-link {
    font-size: 13px;
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 25px;
    cursor: pointer;
    transition: 0.3s;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2px;
}
.barcode-link:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-ghost {
    background: transparent;
    border: 2px solid rgba(74, 59, 50, 0.2);
    color: var(--text-dark);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    transition: 0.3s;
}
.btn-ghost:hover {
    border-color: var(--text-dark);
    background: var(--text-dark);
    color: #fff;
}
/* =========================================
   YENİ STATİK HERO (ANALİZ ODAKLI v2.0)
   ========================================= */
.hero-static-section {
    padding: 80px 0 100px 0;
    background: linear-gradient(to bottom, #F5EFE6 0%, #fff 100%);
    /* Yumuşak geçiş */
    overflow: hidden;
    position: relative;
}
.hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
/* --- SOL TARA (İÇERİK) --- */
.hero-content-left {
    flex: 1;
    max-width: 600px;
}
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(212, 163, 115, 0.15);
    /* Primary rengin şeffafı */
    color: var(--primary-dark);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 1px;
}
.hero-content-left h1 {
    font-size: 52px;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 20px;
    letter-spacing: -1px;
}
.hero-subtext {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 90%;
}
/* Arama Kutusu (Google Tarzı) */
.hero-search-wrapper {
    background: #fff;
    padding: 8px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 25px;
}
.hero-search-wrapper:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 25px 50px rgba(212, 163, 115, 0.2);
    border-color: var(--primary);
}
.input-icon {
    padding-left: 20px;
    color: #ccc;
    font-size: 18px;
}
.hero-search-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    padding: 15px;
    font-size: 16px;
    color: var(--text-dark);
    font-family: var(--font-body);
}
.btn-hero-search {
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: 0.3s;
}
.btn-hero-search:hover {
    background-color: var(--primary);
}
/* Alt Linkler */
.hero-links {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: #888;
    font-weight: 600;
}
.scan-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
    border-bottom: 1px dashed transparent;
}
.scan-link:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.how-link {
    cursor: help;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* --- SAĞ TARAF (GÖRSEL) --- */
.hero-visual-right {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}
.hero-main-img {
    width: 100%;
    max-width: 500px;
    border-radius: 30px;
    /* Hafif eğik duruş vererek dinamizm katalım */
    transform: rotate(2deg);
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    z-index: 2;
    position: relative;
}
/* Arka Plan Dekoru */
.blob-bg {
    position: absolute;
    width: 120%;
    height: 120%;
    background-color: #EAC997;
    /* Marka renginin açığı */
    border-radius: 50%;
    top: -10%;
    right: -20%;
    z-index: 1;
    opacity: 0.3;
    filter: blur(60px);
}
/* Yüzen Kart */
.floating-card {
    position: absolute;
    bottom: 40px;
    left: -20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3;
    animation: float 4s ease-in-out infinite;
}
.fc-icon {
    width: 40px;
    height: 40px;
    background-color: #2A9D8F;
    /* Güven yeşili */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.fc-text strong {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
}
.fc-text span {
    font-size: 11px;
    color: #999;
}
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}
/* MOBİL UYUM */
@media (max-width: 900px) {
    .hero-grid {
        flex-direction: column-reverse;
        text-align: center;
        gap: 40px;
    }
    .hero-content-left {
        width: 100%;
    }
    .hero-search-wrapper {
        flex-direction: row;
        padding: 5px;
    }
    /* Mobilde yan yana kalsın */
    .hero-search-wrapper input {
        width: 100%;
    }
    /* Input daralmasın */
    .hero-links {
        justify-content: center;
    }
    .hero-visual-right {
        width: 80%;
    }
    .hero-main-img {
        transform: rotate(0deg);
    }
    .floating-card {
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }
    /* Mobilde butonu küçültelim */
    .btn-hero-search {
        padding: 12px 20px;
        font-size: 12px;
    }
}
/* =========================================
   GÜNCELLEMELER (HERO & METODOLOJİ)
   ========================================= */
/* Hero Arama Yardımcısı */
.search-helper-text {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    font-style: italic;
    padding-left: 20px;
    /* İkon hizası */
}
/* Metodoloji Rozetleri (Eski ürün resimleri yerine) */
.m-badge {
    background: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,0.05);
}
.m-badge i {
    color: var(--primary);
}
/* Vitrin Mini Link */
.btn-analyze-mini:hover {
    color: var(--text-dark) !important;
}
/* =========================================
   YENİ EKLENEN TASARIMLAR (HERO v2 & METODOLOJİ)
   ========================================= */
/* Hero: Yardımcı Metin */
.search-helper-text {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
    font-style: italic;
    padding-left: 20px;
}
/* Hero: Mobil Barkod Butonu (Daha Görünür) */
.scan-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: 0.3s;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 700;
    font-size: 13px;
    margin-top: 20px;
    border: 1px solid #eee;
}
.scan-link-btn:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    color: var(--primary);
}
.scan-icon {
    font-size: 18px;
    color: var(--primary);
}
/* Hero: Yüzen Kart Açıklaması */
.fc-text strong {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
}
.fc-desc {
    font-size: 10px;
    color: #777;
    line-height: 1.3;
    display: block;
}
/* Metodoloji Bölümü */
.methodology-section {
    padding: 80px 0;
    background-color: #fff;
}
.methodology-desc {
    font-size: 16px;
    color: var(--text-light);
    margin-top: 20px;
    max-width: 90%;
}
.methodology-card {
    background-color: #F5EFE6;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(212, 163, 115, 0.2);
}
.methodology-card h3 {
    color: var(--text-dark);
    margin-bottom: 25px;
    font-size: 20px;
    text-align: center;
}
.methodology-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.m-item {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.03);
}
.m-item i {
    font-size: 20px;
    color: var(--primary);
}
.m-item div {
    display: flex;
    flex-direction: column;
}
.m-item strong {
    font-size: 13px;
    color: var(--text-dark);
}
.m-item span {
    font-size: 10px;
    color: #999;
}
/* Vitrin: Mini Link & Güven Rozeti */
.btn-analyze-mini {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #2A9D8F;
    text-decoration: underline;
    margin-bottom: 12px;
    font-weight: 600;
}
.btn-analyze-mini:hover {
    color: var(--text-dark);
}
.trust-badge-mini {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(42, 157, 143, 0.1);
    color: #2A9D8F;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}
@media (max-width: 768px) {
    .methodology-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   MARKET KARTLARI v2.0 (ANALİZ ODAKLI)
   ========================================= */
/* Kart Yapısı */
.sprout-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
/* 1. Güven Rozeti (Sol Üst) */
.trust-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
}
.trust-badge.safe {
    background-color: #2A9D8F;
}
.trust-badge.risk {
    background-color: #F4A261;
}
.trust-badge.none {
    background-color: #ccc;
    color: #666;
}
/* 2. Kaynak Etiketi (Sağ Üst) */
.source-label {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    z-index: 2;
}
.source-label.arig {
    background-color: #4A3B32;
    color: #fff;
}
.source-label.external {
    background-color: rgba(255,255,255,0.9);
    color: #666;
    border: 1px solid #eee;
}
/* 3. Analiz Metası (Skor) */
.analysis-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.score-mini {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}
.score-mini.high {
    color: #2A9D8F;
    background: #Eafbf9;
    border: 1px solid rgba(42, 157, 143, 0.2);
}
.score-mini.med {
    color: #F4A261;
    background: #fff8e1;
    border: 1px solid rgba(244, 162, 97, 0.2);
}
.meta-text {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* 4. Aksiyon Alanı */
.card-actions-wrapper {
    margin-top: 15px;
    border-top: 1px solid #f9f9f9;
    padding-top: 10px;
}
.btn-analyze-card {
    display: block;
    font-size: 11px;
    color: #999;
    text-decoration: none;
    margin-bottom: 10px;
    transition: 0.3s;
    font-weight: 600;
}
.btn-analyze-card:hover {
    color: var(--primary);
    transform: translateX(3px);
}
/* Fiyat ve Ekle Butonu */
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
}
.btn-add-sprout {
    padding: 6px 15px;
    font-size: 12px;
    border-radius: 20px;
    background: var(--text-dark);
    color: #fff;
    border: none;
}
.btn-add-sprout:hover {
    background: var(--primary);
}
/* =========================================
   MARKET v3.0 - STATİK & GÜVEN ODAKLI
   ========================================= */
/* 1. Statik Hero Alanı */
.market-static-hero {
    background-color: #F5EFE6;
    padding: 60px 0 40px 0;
    text-align: center;
    border-bottom: 1px solid #e0dcd5;
    margin-bottom: 40px;
}
.m-hero-content h1 {
    font-size: 42px;
    color: var(--text-dark);
    margin: 10px 0;
}
.m-hero-content p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}
.sub-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    letter-spacing: 1px;
}
/* 2. Kart İyileştirmeleri */
.analysis-meta {
    flex-direction: column;
    /* Puan ve açıklama alt alta */
    align-items: flex-start;
    gap: 2px;
}
.meta-desc {
    font-size: 9px;
    color: #999;
    font-style: italic;
}
/* Güçlü Analiz Butonu */
.btn-analyze-prominent {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #2A9D8F;
    border: 1px solid #2A9D8F;
    padding: 8px;
    border-radius: 6px;
    margin: 10px 0 15px 0;
    text-decoration: none;
    transition: 0.3s;
}
.btn-analyze-prominent:hover {
    background: #2A9D8F;
    color: #fff;
}
.btn-analyze-prominent.risk-btn {
    color: #F4A261;
    border-color: #F4A261;
}
.btn-analyze-prominent.risk-btn:hover {
    background: #F4A261;
    color: #fff;
}
/* 3. Tooltip (ARIG Ürünü Açıklaması) */
.tooltip-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}
.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 120%;
    right: 0;
    width: 160px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 10px;
    padding: 8px;
    border-radius: 6px;
    z-index: 10;
    transition: 0.3s;
    transform: translateY(-5px);
    line-height: 1.4;
}
/* 4. Alt CTA Alanı */
.market-bottom-cta {
    background: #fff;
    border: 2px dashed #ddd;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.market-bottom-cta h3 {
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 5px;
}
.btn-outline-dark {
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    transition: 0.3s;
}
.btn-outline-dark:hover {
    background: var(--text-dark);
    color: #fff;
}
/* =========================================
   MARKET V4.0 - TİCARİ ODAKLI & ETİK
   ========================================= */
/* 1. Yeni Kart Düzeni */
.card-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Skor Alanı */
.score-text {
    font-size: 11px;
    color: var(--text-dark);
}
.score-text strong {
    color: #2A9D8F;
    font-size: 13px;
}
.meta-desc.warning {
    color: #E76F51;
    font-weight: 600;
}
/* Fiyat (Daha Büyük) */
.price-tag {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    display: block;
    margin-top: auto;
    /* Fiyatı aşağı it */
    margin-bottom: 10px;
}
/* 2. Yeni Aksiyon Alanı (Sepet Üstte) */
.card-actions-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Ana Buton: Sepete Ekle */
.btn-add-primary {
    width: 100%;
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 0.5px;
}
.btn-add-primary:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.3);
}
/* İkincil Link: Neden ARIG? */
.why-arig-wrapper {
    position: relative;
    text-align: center;
}
.link-why-arig {
    font-size: 11px;
    color: #999;
    text-decoration: underline;
    cursor: help;
    transition: 0.3s;
}
.link-why-arig:hover {
    color: var(--primary);
}
.link-why-arig.risk-link {
    color: #F4A261;
}
/* Hover Info (Tooltip) */
.hover-info {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 220px;
    background: #333;
    color: #fff;
    font-size: 10px;
    padding: 10px;
    border-radius: 6px;
    z-index: 10;
    transition: 0.3s;
    line-height: 1.4;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    pointer-events: none;
}
.why-arig-wrapper:hover .hover-info {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}
/* 3. Alt CTA (Marka Odaklı) */
.market-bottom-cta.brand-focused {
    background-color: #F5EFE6;
    border: none;
}
.btn-brand-primary {
    background-color: var(--primary);
    color: #fff;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 13px;
    transition: 0.3s;
}
.btn-brand-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
}
/* =========================================
   MARKET ALT İLHAM BANDI (SOFT & AKIŞ İÇİ)
   ========================================= */
.recipes-inspiration-band {
    /* Grid içinde en alt satıra tam genişlikte yayıl */
    grid-column: 1 / -1;
    /* Görünüm: Yumuşak, Ana renkten 1 ton koyu, Kutu değil Bant hissi */
    background-color: #EBE5DC;
    /* #F5EFE6'dan bir tık koyu bej */
    border-radius: 16px;
    padding: 25px 40px;
    margin-top: 30px;
    /* Ürünlerden biraz ayrışsın */
    /* İçerik Düzeni */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    /* Dekorasyon: Hafif ve yok gibi */
    border: 1px solid rgba(74, 59, 50, 0.03);
}
/* Sol Taraf (Metin) */
.rib-content h3 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 6px;
    font-family: var(--font-head);
    display: flex;
    align-items: center;
    gap: 10px;
}
.rib-content h3 i {
    color: var(--primary);
    /* İkon rengi */
    font-size: 16px;
}
.rib-content p {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
    max-width: 600px;
    font-weight: 500;
}
/* Buton (Soft & Zarif) */
.btn-soft-recipe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Stil: Şeffaf, İnce Çizgili (Outline) */
    background-color: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    /* Mobilde kırılmasın */
    transition: all 0.3s ease;
}
.btn-soft-recipe:hover {
    background-color: var(--text-dark);
    /* Hover'da dolgu */
    color: #fff;
    transform: translateX(3px);
    /* Hafif sağa kayma hissi */
    box-shadow: 0 5px 15px rgba(74, 59, 50, 0.15);
}
/* MOBİL UYUM */
@media (max-width: 900px) {
    .recipes-inspiration-band {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    .rib-content h3 {
        justify-content: center;
    }
    .btn-soft-recipe {
        width: 100%;
        justify-content: center;
    }
}
/* --- MARKET ÜRÜN LINK DÜZELTMELERİ --- */
/* Resim linki: Kartın yapısını bozmasın */
.img-link {
    display: block;
    width: 100%;
    height: 100%;
}
/* Başlık linki: Siyah olsun, altı çizili olmasın */
.sprout-card h3 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}
.sprout-card h3 a:hover {
    color: var(--primary);
    /* Üzerine gelince renk değişsin */
}
/* =========================================
   ÜRÜN DETAY GÜNCELLEMELERİ (v4.0)
   ========================================= */
/* 1. Güven Satırı */
.trust-line-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.tl-item {
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.tl-item i {
    color: #2A9D8F;
}
.tl-item.update {
    color: #999;
    margin-left: auto;
}
/* 2. Fiyat & Lojistik */
.price-logistics-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    background: #fcfcfc;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}
.current-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-dark);
    margin-right: 5px;
}
.unit-tag {
    font-size: 13px;
    color: #999;
}
.logistics-info {
    font-size: 11px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 8px;
}
.logistics-info i {
    color: var(--primary);
}
/* 3. Rozetler & Tooltip */
.trust-badges-row {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}
.tb-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
    position: relative;
    transition: 0.3s;
}
.tb-item:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background: #333;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 10px;
    text-align: center;
    z-index: 10;
    transition: 0.2s;
    pointer-events: none;
}
.tb-item:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 130%;
}
/* 4. Aksiyon Alanı (Büyük) */
.action-area-large {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}
.qty-selector-large {
    display: flex;
    align-items: center;
    border: 2px solid #eee;
    border-radius: 12px;
    height: 50px;
}
.qty-selector-large button {
    width: 40px;
    height: 100%;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-dark);
}
.qty-selector-large input {
    width: 40px;
    height: 100%;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    background: transparent;
}
.btn-add-large-primary {
    flex: 1;
    background-color: var(--text-dark);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    height: 50px;
}
.btn-add-large-primary:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
}
.trust-subtext {
    font-size: 11px;
    color: #2A9D8F;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* 5. Accordion (Özelleştirilmiş) */
.safety-summary-box {
    background: #Eafbf9;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(42, 157, 143, 0.2);
    font-size: 13px;
    margin-bottom: 10px;
}
.ss-row {
    margin-bottom: 8px;
    color: #444;
}
.res-safe {
    color: #2A9D8F;
    font-weight: 800;
}
.risk-badge.low {
    background: #2A9D8F;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
}
.btn-view-report {
    display: inline-block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-dark);
    text-decoration: underline;
    font-weight: 700;
}
.medical-warning-small {
    font-size: 10px;
    color: #999;
    font-style: italic;
}
.nutri-table .nt-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
    font-size: 13px;
}
/* 6. Uyumlu Tarifler */
.compatible-recipes-section {
    padding: 50px 0 80px 0;
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
}
.sec-header-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.sec-header-split h3 {
    font-size: 20px;
    color: var(--text-dark);
}
.link-all-recipes {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.mini-recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.mini-recipe-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid #eee;
    transition: 0.3s;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 15px;
}
.mini-recipe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.mini-recipe-card img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}
.mrc-content h4 {
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.mrc-content span {
    font-size: 11px;
    color: #999;
}
@media (max-width: 768px) {
    .detail-container {
        flex-direction: column;
    }
    .detail-gallery, .detail-info {
        width: 100%;
    }
    .mini-recipe-grid {
        grid-template-columns: 1fr;
    }
    .price-logistics-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* =========================================
   BLOG UI & UX GÜNCELLEMELERİ (v5.0)
   ========================================= */
/* 1. Blog Hero & Filtreler */
.sub-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.blog-filters .filter-btn.active {
    background-color: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}
/* 2. Blog Grid & Featured Post */
.blog-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
/* Öne Çıkan Kart (Featured) */
.featured-post {
    grid-column: 1 / -1;
    /* Tüm genişliği kapla */
    display: flex;
    /* Yan yana düzen */
    flex-direction: row;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    overflow: hidden;
}
.featured-post .blog-img {
    width: 50%;
    height: 350px;
}
.featured-post .blog-content {
    width: 50%;
    padding: 40px;
}
.featured-post h3 {
    font-size: 28px;
    margin-bottom: 15px;
}
.featured-post p {
    font-size: 16px;
    margin-bottom: 25px;
}
/* Mobilde Featured Kart */
@media (max-width: 900px) {
    .blog-grid-container {
        grid-template-columns: 1fr;
    }
    .featured-post {
        flex-direction: column;
    }
    .featured-post .blog-img, .featured-post .blog-content {
        width: 100%;
        height: auto;
    }
    .featured-post .blog-img {
        height: 250px;
    }
}
/* 3. Kart İçi Meta & CTA */
.blog-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    font-weight: 500;
}
.blog-meta .dot {
    margin: 0 5px;
}
.read-more-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: underline;
    transition: 0.3s;
}
.read-more-btn:hover {
    color: var(--primary);
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    border-top: 1px solid #f9f9f9;
    padding-top: 15px;
}
.product-hint {
    font-size: 11px;
    color: #2A9D8F;
    background: #Eafbf9;
    padding: 3px 8px;
    border-radius: 4px;
}
/* =========================================
   BLOG DETAY SAYFASI TASARIMI (FIX)
   ========================================= */
/* 1. Hero Alanı */
.bd-hero {
    background-color: var(--bg-main);
    padding: 80px 0 100px 0;
    text-align: center;
}
.bd-cat {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.bd-cat.science {
    background-color: #264653;
}
.bd-hero h1 {
    font-size: 42px;
    color: var(--text-dark);
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}
.bd-meta-row {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 30px;
    font-weight: 500;
}
.bd-meta-row .dot {
    margin: 0 10px;
    opacity: 0.5;
}
.bd-lead {
    font-size: 20px;
    color: var(--text-dark);
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.8;
}
/* 2. İçerik Alanı & Düzen */
.bd-content-layout {
    max-width: 800px;
    /* Okuma kolaylığı için daraltıldı */
    margin: 0 auto;
    margin-top: -60px;
    /* Hero'nun üzerine bindir */
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}
.bd-featured-img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    margin-bottom: 50px;
    display: block;
}
/* Ana Metin Stilleri */
.bd-main-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 25px;
}
.bd-main-text h3 {
    font-size: 28px;
    color: var(--text-dark);
    margin-top: 40px;
    margin-bottom: 15px;
    font-family: var(--font-head);
}
/* 3. "Kimler İçin" Kutusu */
.target-audience-box {
    background: #fff;
    border: 2px solid #F5EFE6;
    padding: 30px;
    border-radius: 16px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.target-audience-box h4 {
    font-size: 18px;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-family: var(--font-head);
}
.target-audience-box ul {
    list-style: none;
    padding: 0;
}
.target-audience-box li {
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
}
.target-audience-box li i {
    color: var(--primary);
    background: #fff8e1;
    padding: 5px;
    border-radius: 50%;
    font-size: 12px;
}
/* 4. İçerik İçi CTA (Contextual) */
.blog-context-cta {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
    margin: 50px 0;
    transition: 0.3s;
}
.blog-context-cta:hover {
    transform: translateY(-3px);
}
.blog-context-cta.health {
    background-color: #Eafbf9;
    border: 1px solid #bcece7;
}
.bcc-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: var(--text-dark);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.bcc-text h4 {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--text-dark);
}
.bcc-text p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}
.btn-context {
    margin-left: auto;
    background: var(--text-dark);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.3s;
    text-decoration: none;
}
.btn-context:hover {
    background-color: var(--primary);
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.4);
}
/* 5. Yazı Sonu Navigasyon */
.blog-footer-nav {
    background-color: #F9F5F0;
    padding: 80px 0;
    text-align: center;
    margin-top: 60px;
    border-top: 1px solid #eee;
}
.blog-footer-nav h3 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-family: var(--font-head);
}
.blog-footer-nav p {
    color: #888;
    margin-bottom: 40px;
    font-size: 16px;
}
.bfn-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.bfn-btn {
    background-color: var(--primary);
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.bfn-btn.outline {
    background: transparent;
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
}
.bfn-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.bfn-btn.outline:hover {
    background: var(--text-dark);
    color: #fff;
}
/* Mobil Uyum */
@media (max-width: 768px) {
    .bd-hero h1 {
        font-size: 32px;
    }
    .blog-context-cta {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .btn-context {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .bfn-buttons {
        flex-direction: column;
        align-items: center;
    }
    .bfn-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================
   BLOG V6.0 - PRO UX & EKOSİSTEM
   ========================================= */
/* 1. Header & Meta */
.enhanced-hero {
    padding-bottom: 40px;
}
.blog-header-meta {
    font-size: 13px;
    color: #999;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-header-meta i {
    color: var(--primary);
    margin-right: 5px;
}
.blog-header-meta .sep {
    font-size: 18px;
    line-height: 0;
    opacity: 0.5;
}
/* 2. Kontrol Paneli (Segmented & Search) */
.blog-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.segmented-filters {
    background: #e8e4de;
    padding: 5px;
    border-radius: 50px;
    display: flex;
    gap: 5px;
}
.segmented-filters .filter-btn {
    background: transparent;
    border: none;
    color: #666;
    padding: 8px 20px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 13px;
    transition: 0.3s;
}
.segmented-filters .filter-btn.active {
    background: #fff;
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.blog-search-wrap {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 250px;
    transition: 0.3s;
}
.blog-search-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.1);
}
.blog-search-wrap input {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
}
.blog-search-wrap i {
    color: #ccc;
}
/* 3. Manşet (Editorial) */
.editorial-layout .blog-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.why-important {
    background: #F9F5F0;
    border-left: 3px solid var(--primary);
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 10px 10px 0;
}
.why-important strong {
    display: block;
    font-size: 12px;
    color: var(--primary-dark);
    margin-bottom: 5px;
    text-transform: uppercase;
}
.why-important p {
    font-size: 13px;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
    -webkit-line-clamp: 2;
}
.editorial-footer {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}
.read-more-btn.primary {
    background: var(--text-dark);
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
}
.read-more-btn.secondary {
    color: var(--text-dark);
    font-weight: 600;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 30px;
    background: #fff;
}
.read-more-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}
/* 4. Kart İyileştirmeleri */
.clickable-card {
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.clickable-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.read-more-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}
.clickable-card:hover .read-more-link {
    gap: 10px;
}
/* 5. Placeholder (Görsel Yoksa) */
.img-placeholder {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}
.img-placeholder i {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.8;
}
.img-placeholder span {
    font-weight: 800;
    letter-spacing: 2px;
}
.img-placeholder.science {
    background: linear-gradient(135deg, #264653, #2a9d8f);
}
.img-placeholder.recipe {
    background: linear-gradient(135deg, #e76f51, #f4a261);
}
.img-placeholder.story {
    background: linear-gradient(135deg, #e9c46a, #d4a373);
}
/* 6. Load More */
.load-more-area {
    text-align: center;
    margin: 40px 0;
}
.btn-load-more {
    background: transparent;
    border: 1px solid #ccc;
    padding: 12px 30px;
    border-radius: 50px;
    color: #666;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.btn-load-more:hover {
    border-color: var(--text-dark);
    color: var(--text-dark);
}
/* 7. Ekosistem Bandı (Soft CTA) */
.blog-ecosystem-band {
    grid-column: 1 / -1;
    background: #EBE5DC;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    border: 1px solid rgba(0,0,0,0.05);
}
.beb-content h3 {
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 5px;
    font-family: var(--font-head);
}
.beb-content p {
    color: var(--text-light);
    margin: 0;
}
.beb-buttons {
    display: flex;
    gap: 15px;
}
.btn-beb {
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-beb.primary {
    background: var(--text-dark);
    color: #fff;
}
.btn-beb.primary:hover {
    background: var(--primary);
    transform: translateY(-3px);
}
.btn-beb.secondary {
    background: #fff;
    color: var(--text-dark);
    border: 1px solid rgba(0,0,0,0.1);
}
.btn-beb.secondary:hover {
    border-color: var(--text-dark);
}
/* Mobil Uyum */
@media (max-width: 900px) {
    .blog-controls {
        flex-direction: column-reverse;
    }
    .segmented-filters {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }
    .blog-search-wrap {
        width: 100%;
    }
    .editorial-footer {
        flex-direction: column;
    }
    .read-more-btn {
        text-align: center;
        justify-content: center;
    }
    .blog-ecosystem-band {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px;
    }
    .beb-buttons {
        flex-direction: column;
        width: 100%;
    }
    .btn-beb {
        justify-content: center;
    }
}
<style>
    /* Kartın genel yapısını düzenle */
    .card-body-contained {
        background: #C69568; /* Arıg kahverengi tonu */
        border-radius: 20px;
        padding: 15px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        color: white;
    }

    /* Görsel Kutusu - Tamamen içeride */
    .card-image-box {
        width: 100%;
        height: 180px; /* Görsel yüksekliği sabit */
        background: white;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    }

    .card-image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Görseli kutuya sığdırır */
    }

    /* Başlık ve Yazılar */
    .card-body-contained h3 {
        font-size: 1.4rem;
        margin: 5px 0;
        color: #fff;
        font-weight: 800;
        text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
    }

    .card-body-contained .subtitle {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.9);
        margin-bottom: 15px;
    }

    /* Alt Bilgi Satırı (Güvenli + Link) */
    .card-details-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 100%;
        margin-bottom: 15px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    /* Güvenli Rozeti - Yeni Tasarım */
    .trust-badge-inline {
        background: rgba(255,255,255,0.2);
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .trust-badge-inline i {
        color: #4CAF50; /* Yeşil Tik */
    }

    /* Risk Analizi Linki */
    .link-analyze-inline {
        font-size: 0.8rem;
        color: #fff;
        text-decoration: underline;
        opacity: 0.8;
        transition: 0.3s;
    }
    
    .link-analyze-inline:hover {
        opacity: 1;
    }

    /* Sepete Ekle Butonu */
    .btn-add {
        background: #4A3B32; /* Koyu Kahve */
        color: white;
        border: none;
        padding: 10px 25px;
        border-radius: 30px;
        font-weight: bold;
        cursor: pointer;
        transition: transform 0.2s;
        width: 80%;
    }

    .btn-add:hover {
        transform: scale(1.05);
        background: #3d3029;
    }
</style>

/* =========================================
   YENİ EĞLENCELİ METODOLOJİ BÖLÜMÜ
   ========================================= */

.methodology-fun-section {
    padding: 100px 0;
    /* Arka plana hafif puantiye deseni ekleyerek referanstaki dokuyu veriyoruz */
    background-color: #F9F5F0; 
    background-image: radial-gradient(#EAC997 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    overflow: hidden;
}

.fun-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
    position: relative;
    z-index: 2;
}

.fun-header h2 {
    font-size: 42px; /* Başlığı büyüttük */
    color: #4A3B32;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.5);
}

.fun-header p {
    color: #6D5B4F;
    font-size: 18px;
    line-height: 1.6;
}

/* KARTLARI TUTAN KUTU */
.fun-steps-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 25px;
    padding: 20px;
}

/* KART TASARIMI (Sticker Görünümü) */
.sticker-card {
    background: #fff;
    width: 260px;
    padding: 35px 25px;
    border-radius: 6px; /* Hafif köşeli not kağıdı hissi */
    box-shadow: 5px 10px 20px rgba(74, 59, 50, 0.1);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Kartın Üzerine Gelince Düzelsin ve Büyüsün */
.sticker-card:hover {
    transform: scale(1.1) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.2);
    border-color: #D4A373;
}

/* KARTLARI SAĞA SOLA EĞMEK İÇİN */
.card-rotate-left {
    transform: rotate(-3deg) translateY(10px);
}

.card-rotate-right {
    transform: rotate(3deg) translateY(-5px);
}

/* İKONLAR */
.card-icon {
    font-size: 3rem;
    color: #D4A373; /* Arıg Altın/Bronz */
    margin-bottom: 20px;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.1));
}

.sticker-card h3 {
    font-size: 1.3rem;
    color: #4A3B32;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-head);
}

.sticker-card p {
    font-size: 0.95rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: 10px; 
}

/* KÖŞEDEKİ NUMARA ROZETİ (MÜHÜR EFEKTİ) */
.step-badge {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    background-color: #C69568; /* Koyu Turuncu/Bronz */
    color: white;
    font-size: 1.5rem;
    font-weight: 900;
    font-family: var(--font-head);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 4px solid #F9F5F0; /* Arka plan rengiyle çerçeve */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transform: rotate(10deg);
}

/* --- YENİ TASARIM: KAĞIT VE BANT EFEKTİ --- */

/* KART TASARIMI (Artık Sticker değil, Kağıt gibi) */
.sticker-card {
    background: #fff;
    width: 260px;
    padding: 40px 25px 30px 25px; /* Üst boşluğu bant için artırdık */
    border-radius: 2px; /* Köşeleri sivrileştirdik, kağıt hissi için */
    /* Gölgeyi yumuşattık */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0,0,0,0.05); 
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none; /* Kenar çizgisini kaldırdık */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Kartın Üzerine Gelince */
.sticker-card:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 15px 30px rgba(74, 59, 50, 0.15);
}

/* YENİ: BANT (TAPE) EFEKTİ */
.tape-strip {
    position: absolute;
    top: -15px; /* Kartın tepesinden taşsın */
    left: 50%;
    transform: translateX(-50%) rotate(-2deg); /* Hafif yamuk yapıştırılmış */
    
    width: 90px;
    height: 30px;
    
    /* Bant Rengi: Yarı şeffaf beyaz/krem */
    background-color: rgba(255, 255, 255, 0.6);
    
    /* Bant Dokusu: Hafif bulanık ve gölgeli */
    backdrop-filter: blur(2px); /* Arkasını hafif buzlar */
    border-left: 1px dashed rgba(0,0,0,0.05); /* Yırtık hissi detayı */
    border-right: 1px dashed rgba(0,0,0,0.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
    
    z-index: 5;
    opacity: 0.8;
}

/* Her kartta bant biraz farklı dursun diye opsiyonel varyasyon */
.sticker-card:nth-child(even) .tape-strip {
    transform: translateX(-50%) rotate(2deg); /* Çift sayılarda ters yöne yamuk */
}

/* İkon ve Metin Düzenlemeleri (Aynı kalabilir veya iyileştirilebilir) */
.card-icon {
    font-size: 2.5rem;
    color: #D4A373; 
    margin-bottom: 15px;
    margin-top: 10px;
}

.sticker-card h3 {
    font-size: 1.2rem;
    color: #4A3B32;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: var(--font-head);
}

.sticker-card p {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.5;
    margin-bottom: 5px; 
}

/* Numara Rozeti (Aynı kalabilir) */
.step-badge {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 45px;
    height: 45px;
    background-color: #C69568; 
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 4px solid #F9F5F0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* =========================================
   MİNİMAL BÖLÜM TASARIMI (YÜZEN PANEL)
   ========================================= */

.methodology-fun-section {
    /* 1. Kutu Yapısı */
    width: 96%; /* Ekranın tamamını kaplamasın, kenarlardan pay kalsın */
    max-width: 1300px; /* Çok büyük ekranlarda aşırı genişlemesin */
    margin: 60px auto 100px auto; /* Üstten ve alttan boşluk bırakarak diğer bölümlerden ayır */
    
    /* 2. Görünüm (Bej Dikdörtgen) */
    background-color: #F9F5F0; 
    background-image: radial-gradient(#EAC997 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    
    /* 3. Köşeleri Yuvarlat (Modern Kart Havası) */
    border-radius: 40px;
    
    /* 4. İç Boşluğu Artır (Kutuyu Uzat) */
    padding: 100px 20px 120px 20px; /* Üst 100px, Alt 120px boşluk */
    
    /* 5. Hafif Derinlik (Zeminden Yükselme) */
    box-shadow: 0 20px 50px rgba(0,0,0,0.03); 
    
    position: relative;
    overflow: hidden;
}

/* MOBİL İÇİN AYARLAR */
@media (max-width: 768px) {
    .methodology-fun-section {
        width: 100%; /* Mobilde tam genişlik olsun */
        border-radius: 0; /* Mobilde köşeler düzleşsin veya daha az yuvarlak olsun */
        margin: 40px 0;
        padding: 60px 20px;
    }
}

/* =========================================
   YENİ TARİFLER SAYFASI (V3.0 - GEMINI REVIZE)
   ========================================= */

/* 1. Kompakt Hero Alanı */
.recipe-hero-compact {
    padding: 60px 0 50px 0;
    background-color: var(--bg-main);
    text-align: center;
}
.hero-sub {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
.recipe-hero-compact h1 {
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--text-dark);
}

/* Gelişmiş Arama Inputu */
.recipe-search-container {
    max-width: 500px;
    margin: 0 auto;
}
.search-input-wrapper {
    position: relative;
    width: 100%;
}
.search-input-wrapper input {
    width: 100%;
    padding: 14px 45px 14px 50px; /* İkon payları */
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
    background: #fff;
    font-family: var(--font-body);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.search-input-wrapper input:focus {
    border-color: var(--primary);
    box-shadow: 0 5px 20px rgba(212, 163, 115, 0.2);
}
.search-input-wrapper .search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 18px;
}
.search-input-wrapper .clear-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #eee;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: 0.2s;
}
.search-input-wrapper .clear-icon:hover {
    background: #ccc;
    color: #333;
}

/* 2. Sticky Filter Bar (Bütünleşik & Hızalı) */
.sticky-filter-wrapper {
    position: sticky;
    top: 90px; /* Header yüksekliğine göre ayarlandı */
    z-index: 90;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    padding: 15px 0;
    transition: all 0.3s ease;
    margin-bottom: 30px; /* Grid ile ara boşluk */
}

.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Sol Taraf: Chipler */
.filter-chips-area {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px; /* Scrollbar payı */
    scrollbar-width: none;
    align-items: center;
    height: 44px; /* Hiza için sabit yükseklik */
}
.filter-chips-area::-webkit-scrollbar { display: none; }

.chip {
    height: 38px;
    padding: 0 18px;
    border-radius: 50px;
    background: #f8f8f8;
    border: 1px solid #eee;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
    display: flex;
    align-items: center;
}
.chip:hover { background: #e0e0e0; }
.chip.active {
    background: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}

/* Sağ Taraf: Dropdownlar & Sıralama */
.filter-controls-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Özel Select Kutusu */
.custom-select-group {
    position: relative;
    height: 38px; /* Chip ile aynı yükseklik */
}
.filter-select {
    height: 100%;
    padding: 0 30px 0 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    appearance: none; /* Ok ikonunu gizle */
    font-family: var(--font-body);
}
.custom-select-group::after {
    content: '\f078'; /* FontAwesome Down Arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #999;
    pointer-events: none;
}
.clear-select-btn {
    position: absolute;
    right: 25px; /* Okun soluna */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #E63946;
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    padding: 2px;
}

.v-divider {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 5px;
}

.sort-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #888;
}
.sort-select {
    border: none;
    background: transparent;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
}

.reset-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    display: none; /* JS ile açılacak */
    margin-left: 10px;
}

/* Sonuç Sayısı */
.results-meta {
    margin-top: 5px;
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* 3. Tarif Kartları (Standardize Edilmiş) */
.recipe-content {
    padding-bottom: 80px;
}
.recipe-grid-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px; /* Desktop Gap */
}

.rc-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%; /* Kart boyunu eşitle */
}

.rc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(74, 59, 50, 0.12);
    border-color: rgba(212, 163, 115, 0.2);
}

/* Tamamen Tıklanabilir Yapma */
.rc-link {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    outline: none;
}
.rc-card:focus-within {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

/* Görsel Alanı (Sabit Oran 16:10) */
.rc-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    background: #f8f8f8;
}
.rc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.rc-card:hover .rc-image img {
    transform: scale(1.08);
}

/* Markalı Placeholder (Görsel Yoksa) */
.placeholder-arig .ph-content {
    width: 100%;
    height: 100%;
    background-color: #F9F5F0;
    background-image: radial-gradient(#EAC997 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4A373;
    font-size: 32px;
    opacity: 0.5;
}

/* Badges (Köşelere Dağıtılmış & Okunaklı) */
.rc-badges {
    position: absolute;
    width: 100%;
    top: 15px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Linki engellemesin */
    z-index: 2;
}
.badge {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(0); /* Düz renk istendi */
}
.badge.cat {
    background: rgba(255, 255, 255, 0.95); /* Opak beyaz */
    color: var(--text-dark);
}
.badge.diff {
    color: #fff;
}
.diff.easy { background: #2A9D8F; }
.diff.medium { background: #F4A261; }
.diff.hard { background: #E63946; }

/* İçerik Detayları */
.rc-details {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Alt kısmı doldur */
}
.rc-details h3 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: 800;
    /* 2 satırdan sonrasını kes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rc-card:hover .rc-details h3 {
    color: var(--primary);
}
.rc-meta-row {
    margin-top: auto; /* En alta it */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #777;
    font-weight: 600;
}
.rc-meta-row i {
    color: var(--primary);
    margin-right: 4px;
}
.rc-meta-row .dot {
    font-size: 16px;
    line-height: 0;
    color: #ddd;
}

/* 4. Boş Durum */
.empty-state-pro {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 0;
    background: #fff;
    border-radius: 20px;
    border: 1px dashed #ddd;
}
.es-icon { font-size: 50px; color: #ddd; margin-bottom: 20px; }
.btn-reset-pro {
    margin-top: 20px;
    background: var(--text-dark);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s;
}
.btn-reset-pro:hover { background: var(--primary); }

/* 5. Load More Butonu */
.load-more-container {
    text-align: center;
    margin-top: 50px;
}
.btn-load-pro {
    padding: 12px 40px;
    background: #fff;
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
    min-width: 200px;
}
.btn-load-pro:hover {
    background: var(--text-dark);
    color: #fff;
}
.btn-load-pro .loader { display: none; margin-left: 10px; }
.btn-load-pro.loading .txt { display: none; }
.btn-load-pro.loading .loader { display: inline-block; }

/* Responsive */
@media (max-width: 1024px) {
    .recipe-grid-pro { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .filter-bar { flex-direction: column; align-items: flex-start; }
    .filter-controls-area { width: 100%; overflow-x: auto; padding-bottom: 10px; }
}
@media (max-width: 600px) {
    .recipe-grid-pro { grid-template-columns: 1fr; gap: 20px; }
    .sticky-filter-wrapper { top: 70px; } /* Mobilde header daha kısaysa */
    .filter-chips-area { width: 100%; }
}
/* =========================================
   TARİF DETAY SAYFASI V4 (FİNAL & SADE)
   ========================================= */

/* GENEL AYARLAR */
.main-container {
    max-width: 1140px; /* Standart genişlik */
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. HERO & BAŞLIK ALANI */
.recipe-compact-header {
    padding: 30px 0 20px 0;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.breadcrumb-row {
    font-size: 13px; color: #888; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.breadcrumb-row a { color: #666; text-decoration: none; }
.breadcrumb-row a:hover { color: var(--primary); }

/* Görsel (Clamp ile Akıllı Yükseklik) */
.recipe-hero-visual {
    width: 100%;
    height: clamp(180px, 22vw, 260px); /* Responsive yükseklik */
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
    background-color: #f9f9f9;
}
.recipe-hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Görsel Yoksa Placeholder */
.recipe-hero-visual.placeholder-mode {
    background-color: #F5EFE6;
    background-image: radial-gradient(#D4A373 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex; align-items: center; justify-content: center;
}
.ph-content { display: none; font-size: 40px; color: #D4A373; opacity: 0.5; }
.recipe-hero-visual.placeholder-mode .ph-content { display: block; }

/* Başlık ve Butonlar */
.header-action-row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-bottom: 15px;
}
.recipe-h1 {
    font-family: var(--font-head); font-size: 32px; color: var(--text-dark); line-height: 1.2; margin: 0; max-width: 750px;
}

.action-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.act-btn {
    height: 40px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; white-space: nowrap;
}
.act-btn.primary { background: var(--text-dark); color: #fff; border: 1px solid var(--text-dark); }
.act-btn.primary:hover { background: var(--primary); border-color: var(--primary); }
.act-btn.outline { background: #fff; border: 1px solid #ddd; color: var(--text-dark); }
.act-btn.outline:hover { background: #f9f9f9; border-color: #ccc; }

/* Meta */
.recipe-meta-inline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #666; flex-wrap: wrap; }
.recipe-meta-inline i { color: var(--primary); }
.recipe-meta-inline .sep { color: #ddd; font-weight: bold; }
.meta.badge { background: #E8F5E9; color: #2E7D32; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 12px; }

/* 2. MAIN LAYOUT (GRID) */
.recipe-content-section { padding: 40px 0 80px 0; }
.grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Sol 66%, Sağ 33% */
    gap: 28px;
    align-items: start;
}

/* Sol Kolon İçerik */
.recipe-intro { font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 40px; }

.content-card {
    background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 24px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.card-title { font-size: 20px; color: var(--text-dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; }

/* MALZEME LİSTESİ (SADELEŞTİRİLMİŞ) */
.clean-ing-list { list-style: none; padding: 0; }
.ing-row {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #eee;
}
.ing-row:last-child { border-bottom: none; }
.ing-text { font-size: 15px; color: #444; line-height: 1.4; }
.ing-text strong { color: #000; }

/* Satılan Ürün Stili (Özel) */
.ing-row.sellable {
    background: #FFFCF9; border: 1px solid #FFE0B2; padding: 12px 15px; border-radius: 10px; margin: 10px 0;
}
.brand-badge {
    background: var(--text-dark); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; font-weight: 700; vertical-align: middle;
}
.ing-action { display: flex; align-items: center; gap: 15px; }
.btn-text-link { font-size: 13px; color: var(--text-dark); text-decoration: underline; font-weight: 600; }
.btn-mini-add {
    background: var(--primary); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 5px;
}
.btn-mini-add:hover { background: var(--primary-dark); }

/* HAZIRLANIŞ ADIMLARI (LISTE) */
.steps-wrapper { display: flex; flex-direction: column; gap: 24px; }
.step-item { display: flex; gap: 16px; }
.step-num {
    width: 32px; height: 32px; background: var(--bg-main); color: var(--primary); font-family: var(--font-head); font-size: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.step-desc strong { display: block; font-size: 16px; color: var(--text-dark); margin-bottom: 4px; }
.step-desc p { font-size: 15px; color: #555; line-height: 1.6; margin: 0; }

/* SAĞ SIDEBAR (STICKY) */
.sticky-container {
    position: sticky;
    top: 100px; /* Header yüksekliğine göre */
    display: flex; flex-direction: column; gap: 20px;
}

.sidebar-widget {
    background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 20px;
}
.widget-head { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 15px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; display: flex; justify-content: space-between; }
.widget-head small { font-weight: 400; color: #999; }

/* Mini Ürün Listesi */
.mini-prod-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.mini-prod-row img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f9f9f9; }
.mp-details { display: flex; flex-direction: column; }
.mp-name { font-size: 14px; font-weight: 600; color: var(--text-dark); text-decoration: none; line-height: 1.3; }
.mp-price { font-size: 13px; color: #888; margin-top: 3px; }
.btn-sidebar-cta {
    width: 100%; background: var(--text-dark); color: #fff; border: none; padding: 10px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.btn-sidebar-cta:hover { background: var(--primary); }

/* Besin Tablosu */
.nutri-table-clean { width: 100%; border-collapse: collapse; }
.nutri-table-clean td { font-size: 13px; color: #666; padding: 6px 0; border-bottom: 1px solid #f9f9f9; }
.nutri-table-clean th { font-size: 13px; color: var(--text-dark); text-align: right; padding: 6px 0; border-bottom: 1px solid #f9f9f9; }
.nutri-table-clean tr:last-child td, .nutri-table-clean tr:last-child th { border: none; }

/* Yazar */
.author-box { display: flex; align-items: center; gap: 12px; padding: 15px; }
.author-box img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.ab-info span { font-size: 12px; color: #888; display: block; }
.ab-info strong { font-size: 14px; color: var(--text-dark); }

/* RESPONSIVE */
@media (max-width: 900px) {
    .grid-layout { grid-template-columns: 1fr; }
    .sticky-container { position: static; }
    .header-action-row { flex-direction: column; gap: 15px; }
    .action-buttons { width: 100%; justify-content: flex-start; }
    .act-btn { flex: 1; justify-content: center; }
    .sidebar-widget { margin-bottom: 0; }
}

/* PRINT CSS */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; font-size: 12pt; color: #000; }
    .recipe-compact-header { padding: 0; border: none; }
    .recipe-hero-visual { display: none; } /* Mürekkep tasarrufu için görseli gizle */
    .grid-layout { display: block; }
    .sidebar-right { display: none; }
    .content-card { border: none; padding: 0; margin-bottom: 20px; box-shadow: none; }
    .ing-row.sellable { background: none; border: none; border-bottom: 1px dashed #ccc; padding: 10px 0; }
    h1, h2, h3 { color: #000; page-break-after: avoid; }
    .ing-row, .step-item { page-break-inside: avoid; }
}
/* =========================================
   ARIG - GLOBAL DEĞİŞKENLER & RESETS
   ========================================= */
@font-face { font-family: "RL Folklor"; src: url("../fonts/rl-folklor.ttf") format("truetype"); }
@font-face { font-family: "Bahnschrift"; src: url("../fonts/bahnschrift.ttf") format("truetype"); }

:root {
    --bg-main: #F5EFE6;
    --primary: #D4A373;
    --primary-dark: #A87B51;
    --text-dark: #4A3B32;
    --text-light: #666666;
    --white: #ffffff;
    --font-head: "RL Folklor", serif;
    --font-body: "Bahnschrift", sans-serif;
    --max-width: 1200px;
    --radius-card: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--text-dark); background-color: #fff; line-height: 1.5; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* SECTIONS STANDARDIZATION */
section { padding: 80px 0; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-family: var(--font-head); font-size: 36px; color: var(--text-dark); margin-bottom: 10px; }
.section-header p { font-size: 16px; color: var(--text-light); max-width: 600px; margin: 0 auto; }

/* =========================================
   1. HERO ALANI (POLISHED)
   ========================================= */
.hero-section {
    padding: 100px 0 120px 0;
    text-align: center;
    background: var(--bg-main);
    background-image: radial-gradient(#EAC997 1px, transparent 1px);
    background-size: 30px 30px;
}
.hero-badge {
    display: inline-block; background: #fff; padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 800; color: var(--primary); letter-spacing: 1px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.hero-content h1 {
    font-family: var(--font-head); font-size: 48px; line-height: 1.1; margin-bottom: 20px; color: var(--text-dark);
}
.hero-subtext {
    font-size: 18px; color: var(--text-light); max-width: 600px; margin: 0 auto 40px auto;
}

/* Arama */
.hero-search-wrapper { max-width: 640px; margin: 0 auto 30px auto; }
.main-search-box { display: flex; gap: 10px; position: relative; }
.main-search-box input {
    width: 100%; height: 48px; border-radius: 50px; border: 2px solid #ddd; padding: 0 25px 0 50px; font-size: 16px; outline: none; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.main-search-box input:focus { border-color: var(--primary); box-shadow: 0 10px 30px rgba(212, 163, 115, 0.15); }
.search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #aaa; }
.btn-hero-search {
    height: 48px; padding: 0 30px; border-radius: 50px; background: var(--text-dark); color: #fff; border: none; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.3s; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-hero-search:hover { background: var(--primary); transform: translateY(-2px); }

/* İkincil Link */
.hero-secondary-actions { margin-top: 15px; }
.barcode-link { font-size: 13px; color: #888; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
.barcode-link:hover { color: var(--text-dark); }

.trust-indicators {
    display: flex; justify-content: center; gap: 25px; margin-top: 40px; font-size: 13px; font-weight: 600; color: #777;
}
.trust-indicators i { color: #2A9D8F; margin-right: 5px; font-size: 16px; }

/* =========================================
   2. NASIL ÇALIŞIR (EŞİT KARTLAR)
   ========================================= */
.how-it-works { background: #fff; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step-card {
    text-align: center; padding: 35px 25px; border-radius: 20px; border: 1px solid #eee; background: #fff; transition: 0.3s; height: 100%; display: flex; flex-direction: column; align-items: center;
}
.step-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: var(--primary); }
.step-icon {
    width: 70px; height: 70px; background: var(--bg-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--primary); margin-bottom: 20px;
}
.step-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--text-dark); }
.step-card p { font-size: 14px; color: var(--text-light); line-height: 1.5; }

/* =========================================
   3. MİNİ DEMO (2 KOLONLU)
   ========================================= */
.mini-demo-section {
    background: #FFFCF9; padding: 80px 0; border-top: 1px dashed #eee; border-bottom: 1px dashed #eee;
}
.demo-grid-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.demo-text-col .sub-head {
    font-size: 12px; font-weight: 800; color: var(--primary); letter-spacing: 1px; display: block; margin-bottom: 10px;
}
.demo-text-col h3 { font-size: 32px; color: var(--text-dark); margin-bottom: 20px; line-height: 1.2; font-family: var(--font-head); }
.demo-features { margin-bottom: 30px; }
.demo-features li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; color: #555; }
.demo-features i { color: #2A9D8F; }

/* Büyük Demo Kartı */
.large-demo {
    background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); width: 100%; max-width: 450px; margin: 0 auto;
}
.mrc-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; }
.mrc-header img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }
.mrc-info { flex-grow: 1; display: flex; flex-direction: column; }
.mrc-info strong { font-size: 16px; color: var(--text-dark); }
.badge.safe { background: #2A9D8F; color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 11px; width: fit-content; margin-top: 4px; }
.score-circle {
    width: 50px; height: 50px; background: #2A9D8F; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 5px 15px rgba(42, 157, 143, 0.3);
}
.mrc-body .check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #555; }
.check-row.success i { color: #2A9D8F; }
.check-row.info i { color: var(--primary); }
.mrc-footer { margin-top: 25px; text-align: center; }
.btn-demo-cta {
    display: block; width: 100%; padding: 12px; background: var(--text-dark); color: #fff; border-radius: 10px; font-weight: 700; font-size: 14px; transition: 0.3s;
}
.btn-demo-cta:hover { background: var(--primary); }

/* =========================================
   4. METODOLOJİ (DÜZ KARTLAR)
   ========================================= */
.methodology-clean-section { background: #fff; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.method-card {
    background: #FAFAFA; border: 1px solid #eee; border-radius: 16px; padding: 30px 20px; text-align: center; transition: 0.3s;
}
.method-card:hover { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-5px); border-color: var(--primary); }
.mc-icon { font-size: 32px; color: var(--primary); margin-bottom: 20px; }
.method-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--text-dark); }
.method-card p { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.5; }
.mc-link { font-size: 13px; color: var(--text-dark); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.mc-link:hover { color: var(--primary); }

/* =========================================
   5. VİTRİN (SLIDER REVİZE)
   ========================================= */
.featured-showcase { background: var(--bg-main); overflow: hidden; }
.slider-container {
    position: relative; display: flex; align-items: center; justify-content: center; height: 450px; margin-bottom: 40px;
}
.slider-arrow {
    background: #fff; border: 1px solid #ddd; width: 50px; height: 50px; border-radius: 50%; font-size: 18px; color: var(--text-dark); cursor: pointer; z-index: 10; transition: 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center;
}
.slider-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.slider-arrow.prev { margin-right: -25px; }
.slider-arrow.next { margin-left: -25px; }

.cards-wrapper {
    position: relative; width: 100%; max-width: 800px; height: 100%; display: flex; align-items: center; justify-content: center;
}
.showcase-card {
    position: absolute; width: 300px; background: #fff; border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.1); transition: all 0.5s ease; opacity: 0.5; transform: scale(0.8); z-index: 1; pointer-events: none;
}
.showcase-card.active {
    opacity: 1; transform: scale(1); z-index: 5; pointer-events: all; border: 1px solid var(--primary); width: 340px;
}
/* Yan Kartları Büyütme Mantığı JS ile de desteklenebilir ama CSS ile: */
.showcase-card[data-index] { display: none; } /* JS ile yöneteceğiz */
.showcase-card.active { display: block; } /* Fallback */

.sc-badge {
    position: absolute; top: 15px; left: 15px; background: #E8F5E9; color: #2E7D32; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.sc-img { height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.sc-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sc-body h3 { font-size: 18px; color: var(--text-dark); margin-bottom: 10px; }
.sc-meta { display: flex; justify-content: center; gap: 15px; font-size: 14px; margin-bottom: 15px; }
.sc-price { font-weight: 800; color: var(--primary); }
.sc-weight { color: #888; }
.sc-actions { display: flex; gap: 10px; justify-content: center; }
.btn-view {
    padding: 8px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-dark);
}
.btn-add-cart {
    padding: 8px 15px; background: var(--text-dark); border: none; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
}
.btn-add-cart:hover { background: var(--primary); }

.view-all-wrapper { text-align: center; }
.btn-view-all-large {
    display: inline-block; padding: 12px 35px; border: 2px solid var(--text-dark); border-radius: 50px; font-weight: 700; font-size: 14px; color: var(--text-dark); transition: 0.3s;
}
.btn-view-all-large:hover { background: var(--text-dark); color: #fff; }

/* =========================================
   6. BLOG (OKUNAKLI)
   ========================================= */
.blog-section { background: #fff; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card {
    cursor: pointer; transition: 0.3s; border-radius: 16px; overflow: hidden; border: 1px solid transparent;
}
.blog-card:hover { transform: translateY(-5px); border-color: #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.blog-img { position: relative; height: 200px; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-cat {
    position: absolute; top: 15px; left: 15px; background: #fff; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--text-dark);
}
.blog-content { padding: 20px 10px; }
.blog-meta { font-size: 12px; color: #888; margin-bottom: 10px; }
.blog-content h3 {
    font-size: 18px; line-height: 1.4; margin-bottom: 10px; color: var(--text-dark);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-content p { font-size: 14px; color: #666; margin-bottom: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-link { font-size: 13px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .demo-grid-layout { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .demo-text-col { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 900px) {
    .steps-grid, .method-grid, .blog-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .hero-content h1 { font-size: 32px; }
    .main-search-box { flex-direction: column; background: transparent; box-shadow: none; }
    .main-search-box input { width: 100%; margin-bottom: 10px; }
    .btn-hero-search { width: 100%; }
}/* =========================================
   SONUÇ EKRANI TASARIMI (INDEX İÇİN)
   ========================================= */
#resultState {
    background-color: #FAFAFA;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}

.result-card-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.btn-close-result {
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.btn-close-result:hover { color: var(--primary); transform: translateX(-5px); }

/* Kart Yapısı */
.decision-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #eee;
}

.dc-header {
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid #f9f9f9;
}
.dc-img {
    width: 100px; height: 100px; flex-shrink: 0;
}
.dc-img img { width: 100%; height: 100%; object-fit: contain; }

.dc-info { flex-grow: 1; }
.dc-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #999; display: block; margin-bottom: 5px; }
.dc-info h2 { font-size: 24px; color: var(--text-dark); margin-bottom: 5px; line-height: 1.2; }
.dc-brand { font-size: 14px; color: #666; font-weight: 600; }
.dc-barcode { font-size: 12px; color: #aaa; margin-top: 8px; }

/* Skor Halkası */
.dc-score { position: relative; width: 100px; height: 100px; }
.progress-ring__circle {
    transition: stroke-dashoffset 1s ease-in-out;
    stroke-dasharray: 263 263; /* 2 * PI * r (42) */
    stroke-dashoffset: 263;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.score-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center;
}
.score-text span { display: block; font-size: 24px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.score-text small { font-size: 10px; color: #999; }

/* Banner */
.status-banner {
    padding: 15px; text-align: center; font-weight: 700; color: #fff; letter-spacing: 1px; font-size: 14px;
}
.status-banner.safe { background: #2A9D8F; }
.status-banner.risk { background: #F4A261; }
.status-banner.danger { background: #E63946; }

/* Tablar */
.dc-tabs { padding: 30px; }
.tab-nav {
    display: flex; gap: 10px; border-bottom: 2px solid #f5f5f5; margin-bottom: 20px;
}
.a-tab {
    padding: 10px 20px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 14px; font-weight: 600; color: #888; transition: 0.3s; margin-bottom: -2px;
}
.a-tab:hover { color: var(--primary); }
.a-tab.active { border-color: var(--primary); color: var(--primary); }

/* İçerikler */
.log-item {
    padding: 12px; border-radius: 8px; margin-bottom: 10px; font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.log-item.success { background: #E8F5E9; color: #2E7D32; }
.log-item.warning { background: #FFF3E0; color: #EF6C00; }
.log-item.danger { background: #FFEBEE; color: #C62828; }

.clean-ing-list { list-style: none; padding: 0; }
.clean-ing-list li {
    padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 14px; color: #555; display: flex; align-items: center; gap: 10px;
}
.clean-ing-list li i { color: #2A9D8F; }

.nutri-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center;
}
.n-box {
    background: #f9f9f9; padding: 15px; border-radius: 10px; border: 1px solid #eee;
}
.n-box span { display: block; font-size: 11px; color: #888; text-transform: uppercase; margin-bottom: 5px; }
.n-box strong { display: block; font-size: 16px; color: var(--text-dark); }

/* RESPONSIVE */
@media (max-width: 768px) {
    .dc-header { flex-direction: column; text-align: center; }
    .nutri-grid { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================
   POPUP MODAL (PRO & DARK MODE)
   ========================================= */
.result-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Koyu Arkaplan */
    backdrop-filter: blur(4px); /* Arkası flu olsun */
    z-index: 9999;
    display: none; justify-content: center; align-items: center;
    padding: 20px;
    opacity: 0; transition: opacity 0.3s ease;
}
.result-popup-overlay.active { opacity: 1; }

.result-popup-content {
    width: 100%; max-width: 550px;
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.result-popup-overlay.active .result-popup-content { transform: scale(1); }

/* Kart Yapısı */
.popup-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    position: relative; display: flex; flex-direction: column;
    max-height: 85vh;
}

/* Kapatma Butonu (X) */
.btn-popup-close-icon {
    position: absolute; top: 15px; right: 15px;
    background: #f5f5f5; border: none; width: 32px; height: 32px; border-radius: 50%;
    color: #666; font-size: 16px; cursor: pointer; transition: 0.2s; z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.btn-popup-close-icon:hover { background: #e0e0e0; color: #333; transform: rotate(90deg); }

/* 1. Header */
.dc-header-compact {
    padding: 25px; display: flex; gap: 20px; align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.dc-left img {
    width: 80px; height: 80px; border-radius: 12px; object-fit: contain;
    background: #fff; border: 1px solid #eee; padding: 5px;
}
.dc-center { flex-grow: 1; min-width: 0; } /* Text truncate için min-width gerekli */
.dc-cat { font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 0.5px; }
.dc-title {
    font-size: 18px; color: var(--text-dark); margin: 4px 0; line-height: 1.3;
    font-family: var(--font-head);
    /* 2 Satır Ellipsis */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dc-brand { font-size: 13px; color: #666; display: block; margin-bottom: 8px; }

/* Status Chip */
.status-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.status-chip.safe { background: #E8F5E9; color: #2E7D32; }
.status-chip.risk { background: #FFF3E0; color: #EF6C00; }
.status-chip.danger { background: #FFEBEE; color: #C62828; }

/* Skor Alanı */
.dc-right { flex-shrink: 0; padding-left: 10px; border-left: 1px dashed #eee; }
.score-lockup { text-align: center; }
.ring-wrapper { position: relative; width: 50px; height: 50px; margin: 0 auto; }
.progress-ring__circle { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s; stroke-dasharray: 138 138; stroke-dashoffset: 138; }
#trustScoreVal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 14px; font-weight: 800; color: var(--text-dark);
}
.score-meta { display: flex; flex-direction: column; font-size: 10px; margin-top: 5px; line-height: 1.2; color: #666; }

/* 2. Body & Tabs */
.dc-body { padding: 0; display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.tab-nav-simple {
    display: flex; border-bottom: 1px solid #f0f0f0; background: #fafafa;
}
.t-btn {
    flex: 1; padding: 14px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: #888; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s;
}
.t-btn:hover { background: #f0f0f0; color: var(--text-dark); }
.t-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: #fff; }

.tab-content-area {
    padding: 20px 25px; overflow-y: auto; max-height: 250px;
}
/* Scrollbar */
.tab-content-area::-webkit-scrollbar { width: 6px; }
.tab-content-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

/* Liste Stilleri */
.summary-list li {
    position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 14px; color: #555; line-height: 1.5;
}
.summary-list li::before {
    content: "•"; color: var(--primary); font-weight: bold; position: absolute; left: 0; top: 0; font-size: 18px; line-height: 1.4;
}
.clean-ing-list li {
    padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 13px; color: #555; display: flex; gap: 8px; align-items: center;
}
.clean-ing-list li i { color: #2A9D8F; font-size: 12px; }

/* 3. Footer Actions */
.popup-footer-actions {
    padding: 20px 25px; border-top: 1px solid #eee; background: #fff;
    display: flex; gap: 15px;
}
.btn-action-outline {
    flex: 1; height: 44px; border: 1px solid #ddd; background: #fff; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--text-dark); cursor: pointer; transition: 0.2s;
}
.btn-action-outline:hover { background: #f9f9f9; border-color: #ccc; }

.btn-action-primary {
    flex: 2; height: 44px; background: var(--text-dark); color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s;
    box-shadow: 0 4px 12px rgba(74, 59, 50, 0.2);
}
.btn-action-primary:hover { background: var(--primary); transform: translateY(-2px); }
.btn-action-primary:focus-visible, .btn-action-outline:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
/* =========================================
   HYPER-FOCUSED HERO ARAMA TASARIMI (V3)
   ========================================= */

/* 1. Ana Kapsayıcı */
.hero-search-wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto; /* Alt boşluğu kaldırdık, trust row ile ayrı yöneteceğiz */
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* Input ve Butonu Tutan Flex Yapı */
.search-action-container {
    display: flex;
    align-items: stretch; /* Yükseklikleri eşitle */
    gap: 12px; /* Input ve Buton arası net boşluk */
    width: 100%;
}

/* --- A. INPUT GRUBU (BEYAZ KUTU) --- */
.search-input-group {
    flex: 1; /* Kalan alanı doldur */
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0; /* İnce gri sınır */
    border-radius: 16px; /* Hafif yuvarlatılmış dikdörtgen (Modern SaaS hissi) */
    height: 64px; /* Premium yükseklik */
    display: flex;
    align-items: center;
    padding-left: 55px; /* Sol ikon payı */
    padding-right: 60px; /* Sağ barkod butonu payı */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Çok hafif gölge */
    transition: all 0.3s ease;
}

/* Focus State: Hafif Glow + Border Koyulaşması */
.search-input-group:focus-within {
    border-color: var(--primary); 
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.1), 0 8px 20px rgba(0,0,0,0.05);
}

/* Sol İkon (Sadece Dekoratif) */
.search-icon-left {
    position: absolute;
    left: 24px;
    color: #bbb;
    font-size: 18px;
    transition: 0.3s;
}
.search-input-group:focus-within .search-icon-left {
    color: var(--primary);
}

/* Input Alanı */
.search-input-group input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-weight: 500;
    outline: none;
}
.search-input-group input::placeholder {
    color: #999;
    font-weight: 400;
    font-size: 15px;
}

/* Sağdaki Barkod Butonu (Secondary Action) */
.btn-barcode-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px; /* Input ile uyumlu hafif kare */
    cursor: pointer;
    color: #888;
    font-size: 18px;
    transition: 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-barcode-icon:hover {
    background-color: #f5f5f5;
    color: var(--text-dark);
}

/* --- B. ANALİZ BUTONU (PRIMARY CTA) --- */
.btn-hero-analyze {
    height: 64px; /* Input ile aynı yükseklik */
    padding: 0 32px;
    background-color: var(--primary); /* Sıcak marka rengi */
    color: #fff;
    border: none;
    /* Input radius (16px) ile uyumlu ama farklı (50px Pill Shape) */
    border-radius: 50px; 
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(212, 163, 115, 0.25); /* Ayrıştırıcı gölge */
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-hero-analyze:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 12px 25px rgba(212, 163, 115, 0.35);
    transform: translateY(-2px);
}

.btn-hero-analyze:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inset hissi */
}

/* =========================================
   GÜVEN GÖSTERGELERİ (TRUST ROW - AYRI KATMAN)
   ========================================= */
.trust-indicators-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; 
    margin-top: 32px; /* Search bar'dan net kopuş */
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    opacity: 0.8;
    transition: 0.3s;
    font-size: 14px;
}

.trust-item:hover {
    opacity: 1;
    color: var(--text-dark);
}

.t-icon {
    font-size: 16px; 
    color: #2A9D8F; /* Güven yeşili */
    display: flex;
    align-items: center;
}

.t-text {
    font-weight: 600;
    color: #555; /* Metin ikondan bir tık koyu */
}

/* Ortadaki "Uzman Onaylı" Vurgusu (Hafif Kapsül) */
.trust-item.highlight {
    background: rgba(255, 255, 255, 0.6); /* Çok hafif zemin */
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(0,0,0,0.04);
    opacity: 1; /* Diğerlerinden daha net */
}
.trust-item.highlight .t-text {
    color: var(--primary-dark);
}

/* =========================================
   MOBİL UYUMLULUK
   ========================================= */
@media (max-width: 768px) {
    .search-action-container {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-hero-analyze {
        width: 100%;
        border-radius: 16px; /* Mobilde input ile aynı formda olsun */
    }

    .trust-indicators-row {
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 24px;
    }
    
    .trust-item {
        font-size: 13px;
    }
}
/* =========================================
   FİNAL DÜZELTMELER: SEARCH WRAPPER & TRUST ROW
   ========================================= */

/* 1. SEARCH WRAPPER (Arka planı temizle) */
.hero-search-wrapper {
    background: transparent !important; /* Beyazlığı kaldır */
    box-shadow: none !important; /* Gölgeyi kaldır */
    border: 0 !important; /* Kenarlığı kaldır */
    border-radius: 0 !important;
    padding: 0 20px !important; /* Sadece yatay mesafe koru */
    
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Kapsayıcı sadece hizalama yapar */
.search-action-container {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

/* Input Grubu (Beyazlık sadece burada kalsın) */
.search-input-group {
    flex: 1;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    height: 64px;
    display: flex;
    align-items: center;
    padding-left: 55px;
    padding-right: 60px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Input'a özel hafif gölge */
    transition: all 0.3s ease;
}

/* Focus: Input odaklanınca */
.search-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.1);
}

/* 2. TRUST ROW (Sakin & Kurumsal) */
.trust-indicators-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 32px; /* Search bar ile mesafe */
}

/* Ortak Item Stili (Highlight özelleştirmesi yok) */
.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    
    /* Renkler Kurumsal Kahve */
    color: var(--text-dark); 
    opacity: 0.75; /* Varsayılan soft görünüm */
    
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
    
    /* Önceki stilleri ezmek için resetler */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Hover Efekti: Sadece netleşir, renk değişmez */
.trust-item:hover {
    opacity: 1;
}

/* İkon Stili */
.t-icon, 
.t-icon i {
    font-size: 16px;
    color: var(--text-dark) !important; /* Yeşil yerine kahve */
    /* Opaklık parent (.trust-item) üzerinden yönetiliyor */
}

/* Metin Stili */
.t-text {
    color: var(--text-dark);
}

/* MOBİL İÇİN KÜÇÜK AYAR */
@media (max-width: 768px) {
    .trust-indicators-row {
        gap: 20px;
        flex-wrap: wrap;
    }
    .trust-item {
        font-size: 13px;
    }
}
/* =========================================
   POPUP KARARTMA VE DÜZELTMELER
   ========================================= */

/* 1. Arka Planı İyice Karart ve Bulanıklaştır */
.result-popup-overlay {
    background-color: rgba(0, 0, 0, 0.8) !important; /* %80 Siyahlık (Koyu) */
    backdrop-filter: blur(8px) !important; /* Arka planı flu yap */
    cursor: pointer; /* Boşluğa tıklanabileceğini hissettir */
}

/* 2. Kartın kendisine tıklayınca kapanmasın diye imleci düzelt */
.popup-card {
    cursor: default; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important; /* Kart gölgesini güçlendir */
}
/* 1. SEARCH WRAPPER (Arka planı temizle) */
.hero-search-wrapper {
    background: transparent !important; /* Beyazlığı kaldır */
    box-shadow: none !important; /* Gölgeyi kaldır */
    border: 0 !important; /* Kenarlığı kaldır */
    border-radius: 0 !important;
    padding: 0 20px !important; /* Sadece yatay mesafe koru */
    
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;

.search-action-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff; /* Beyaz arka plan */
    padding: 8px;
    border-radius: 60px; /* Yuvarlak köşeler */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

.search-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.search-input-group input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    height: 48px;
}

.btn-barcode-icon {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 0 15px;
    border-left: 1px solid #eee;
    height: 30px;
    display: flex;
    align-items: center;
    color: #888;
}

.btn-hero-analyze {
    background-color: #4A3B32;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0 40px;
    height: 52px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* --- POPUP ARKA PLANINI KARARTMA --- */
.result-popup-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important; /* Koyu Siyah */
    backdrop-filter: blur(5px); /* Arkası bulanık olsun */
    cursor: pointer;
}
.popup-card {
    cursor: default; /* Karta tıklayınca kapanmasın */
}
/* --- BİTİŞ --- */
/* =========================================
   GÖRSEL 1 TARZI - AYRIK ARAMA ÇUBUĞU
   ========================================= */

/* 1. Dış Kapsayıcı (Arka planı ve gölgeyi kaldırıyoruz) */
.hero-search-wrapper {
    max-width: 850px;
    width: 100%;
    margin: 30px auto;
    position: relative;
    z-index: 10;
    
    /* Önceki beyaz arka planı ve gölgeyi sıfırlıyoruz */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 2. Hizalama Kutusu (Input ve Butonu yan yana dizer) */
.search-action-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Input ve Buton arasındaki boşluk */
    width: 100%;
    
    /* Burası da şeffaf olmalı */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. Input Alanı (Kendi başına beyaz bir kutu olacak) */
.search-input-group {
    flex: 1; /* Boşluğu doldur */
    background: #fff; /* Beyaz arka plan SADECE inputta */
    height: 60px; /* Yükseklik */
    border-radius: 50px; /* Yuvarlak kenarlar */
    display: flex;
    align-items: center;
    padding-left: 25px; /* Sol ikon boşluğu */
    padding-right: 10px;
    
    /* Inputun kendi gölgesi ve kenarlığı */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Inputa tıklayınca efekt */
.search-input-group:focus-within {
    border-color: #D4A373; /* Arıg rengi */
    box-shadow: 0 10px 30px rgba(212, 163, 115, 0.2);
    transform: translateY(-2px);
}

.search-icon-left {
    color: #bbb;
    font-size: 18px;
    
    /* Çizgi ve Eşit Boşluk Ayarları */
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Çok silik dikey çizgi */
    padding-right: 15px; /* İkon ile çizgi arasındaki boşluk */
    margin-right: 15px;  /* Çizgi ile yazı arasındaki boşluk */
    
    /* Çizginin boyunu ayarlamak için */
    height: 24px; 
    display: flex;
    align-items: center;
}

/* Yazı Alanı */
.search-input-group input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: #4A3B32;
}

/* Barkod İkonu (Input içinde sağda) */
.btn-barcode-icon {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.btn-barcode-icon:hover {
    background: #f5f5f5;
    color: #D4A373;
}

/* 4. Analiz Butonu (Ayrı duran Turuncu Buton) */
.btn-hero-analyze {
    height: 60px; /* Input ile aynı yükseklik */
    padding: 0 40px;
    
    /* Görsel 1'deki renk (Açık kahve/Turuncu tonu) */
    background-color: #D4A373; 
    color: #fff;
    
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
    
    /* Buton gölgesi */
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.4);
}

.btn-hero-analyze:hover {
    background-color: #A87B51; /* Hover'da koyulaş */
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(212, 163, 115, 0.5);
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    .search-action-container {
        flex-direction: column; /* Alt alta diz */
        gap: 15px;
    }
    .search-input-group {
        width: 100%;
    }
    .btn-hero-analyze {
        width: 100%;
    }
}
/* =========================================
   SEARCH HİZALAMA DÜZELTMESİ (FİNAL)
   ========================================= */

/* 1. Kapsayıcıyı Esnek Kutu Yap */
.search-input-group {
    display: flex !important;
    align-items: center !important;
    padding-left: 25px !important; /* İkonun sol baştan uzaklığı */
}

/* 2. İkonu ve Çizgiyi Düzenle */
.search-icon-left {
    /* Eski 'absolute' pozisyonu iptal et, akışa dahil olsun */
    position: static !important; 
    transform: none !important;
    
    display: flex !important;
    align-items: center;
    height: 24px; /* Çizginin yüksekliği */
    
    /* İkon Rengi ve Boyutu */
    color: #bbb;
    font-size: 18px;
    
    /* Çizgi ve Boşluk Ayarları */
    border-right: 2px solid rgba(0, 0, 0, 0.1); /* Dikey Çizgi */
    padding-right: 15px; /* İkon ile Çizgi arası */
    margin-right: 15px;  /* Çizgi ile Yazı arası (BU KISIM YAZIYI İTER) */
    
    flex-shrink: 0; /* Sıkışmayı engelle */
}

/* 3. Input Alanının İç Boşluğunu Sıfırla */
.search-input-group input {
    padding-left: 0 !important; /* Ekstra boşluk olmasın, yukarıdaki margin yönetsin */
    width: 100%;
}
/* --- Önceki Hatalı Kapanışı Düzeltme --- */
} 

/* =========================================
   PRO DEMO SECTION (V4 - LEFT ALIGN & CONTEXT)
   ========================================= */
.pro-demo-section {
    padding: 120px 0 100px;
    background: linear-gradient(180deg, #FFFCF9 0%, #FFF8F0 100%);
    position: relative;
    overflow: hidden;
}

.pro-grid-wrapper {
    display: flex;
    align-items: flex-start; /* Üstten hizala */
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 70px;
    flex-wrap: wrap;
}

.pro-content-col { 
    flex: 1; 
    min-width: 320px; 
    text-align: left; /* ZORUNLU SOLA HİZALAMA */
}

.pro-visual-col { 
    flex: 1; 
    min-width: 320px; 
    position: relative; 
    display: flex; 
    flex-direction: column; /* Etiket ve kartı alt alta diz */
    align-items: center; /* Kartı ortala (veya sola çekilebilir tasarım tercihine göre) */
}

/* --- TİPOGRAFİ & SOL KOLON --- */
.badge-pill {
    display: inline-block;
    background: rgba(212, 163, 115, 0.1);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 6px; /* Daha teknik görünüm için köşeli radius */
    margin-bottom: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pro-headline {
    font-size: 42px;
    line-height: 1.2;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--font-head);
    letter-spacing: -0.5px;
    text-align: left; /* SOLA HİZALI */
}

/* Tek renk hiyerarşisi, ekstra span rengi yok */
.pro-headline span {
    font-weight: 700;
    color: inherit;
}

.pro-subhead {
    font-size: 18px;
    color: #555; /* Biraz daha koyu gri, daha okunaklı */
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px; /* Okuma genişliği sınırı */
    font-weight: 400;
    text-align: left; /* SOLA HİZALI */
    margin-left: 0;
}

/* Özellik Listesi */
.pro-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 45px;
    align-items: flex-start; /* SOLA HİZALI */
}

.pf-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    width: 100%;
    max-width: 480px; /* Çok uzamasın */
    transition: 0.2s;
}
.pf-item:hover {
    border-color: rgba(212, 163, 115, 0.4);
    background: #FFFCF9;
}

.pf-icon {
    width: 36px; height: 36px;
    background: #FFF4E6; color: var(--primary-dark);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}

.pf-text { text-align: left; }
.pf-text strong { display: block; font-size: 16px; color: var(--text-dark); margin-bottom: 3px; font-weight: 600; }
.pf-text small { display: block; font-size: 14px; color: #777; line-height: 1.4; }

/* Aksiyon Butonları */
.pro-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: flex-start; /* SOLA HİZALI */
}

.btn-pro-primary {
    background-color: var(--text-dark);
    color: #fff;
    padding: 16px 36px;
    border-radius: 8px; /* Daha modern/medikal his için radius azaltıldı */
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 59, 50, 0.15);
    display: flex; align-items: center; gap: 10px;
}
.btn-pro-primary:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 163, 115, 0.3);
}

.link-pro-secondary {
    color: var(--text-light);
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: 0.3s;
}
.link-pro-secondary:hover { color: var(--primary); }


/* --- YENİ: KART BAĞLAM ETİKETİ (Card Context) --- */
.card-context-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 800;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
    width: 100%;
    max-width: 400px;
}
.context-line {
    flex: 1;
    height: 1px;
    background: #e0e0e0; /* İnce gri çizgi */
}

/* --- SAĞ KOLON (MEDICAL CARD) --- */
.medical-ui-card {
    background: #fff;
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Skor Alanı */
.mui-score-area {
    padding: 30px;
    display: flex; align-items: center; gap: 25px;
    border-bottom: 1px solid #f5f5f5;
    background: linear-gradient(to bottom, #fff, #fdfdfd);
}

.mui-score-circle { width: 90px; height: 90px; position: relative; flex-shrink: 0; }
.circular-chart-lg { width: 100%; height: 100%; display: block; }
.mui-score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.score-val { display: block; font-size: 26px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.score-label { font-size: 9px; color: #999; font-weight: 700; letter-spacing: 1px; }

/* Ürün Bilgisi */
.mui-product-info h4 { margin: 8px 0 4px; font-size: 16px; color: var(--text-dark); font-weight: 700; }
.mui-product-info p { margin: 0; font-size: 12px; color: #999; }
.mui-badge {
    display: inline-block; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.5px;
}
.mui-badge.safe { background: #E0F2F1; color: #00695C; }

/* Liste */
.mui-body { padding: 30px; }
.checklist-header { font-size: 11px; font-weight: 700; color: #bbb; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px; text-align: left; }
.mui-checklist { list-style: none; padding: 0; margin: 0; }
.check-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f9f9f9; font-size: 14px; color: #555;
}
.check-item:last-child { border-bottom: none; }
.check-item i { font-size: 16px; }
.check-item.success i { color: #2A9D8F; }
.check-item.neutral i { color: #ccc; }

/* Arka Plan Dekoru */
.bg-blob {
    position: absolute; top: 30%; right: -20%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(212, 163, 115, 0.08) 0%, rgba(255,255,255,0) 70%);
    z-index: 1; pointer-events: none;
}

/* --- ENTEGRE ADIMLAR (Sola Hizalı) --- */
.integrated-steps {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-start; /* Sola hizalı */
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.step-label {
    font-size: 11px; font-weight: 800; color: #bbb; letter-spacing: 1px; margin-right: 10px;
}

.step-unit { display: flex; align-items: center; gap: 10px; opacity: 0.8; }
.step-num {
    font-size: 12px; font-weight: 800; color: #fff;
    background: var(--text-dark); width: 24px; height: 24px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.step-desc { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.step-connector { width: 30px; height: 1px; background: #ddd; }

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .pro-grid-wrapper { flex-direction: column; gap: 50px; }
    
    /* Mobilde yine de sola hizalı bırakıyoruz çünkü talep bu yöndeydi.
       Ancak kartı ortalamak mobilde daha iyi durabilir. */
    .pro-visual-col { align-items: center; }
    .card-context-label { justify-content: center; } /* Etiketi ortala */
    
    .integrated-steps { 
        justify-content: center; /* Adımlar mobilde ortalansın */
        gap: 15px; 
    }
    .step-label { width: 100%; text-align: center; margin-bottom: 10px; }
}
/* =========================================
   V6 STYLES: TOOLTIPS, HOVER BLOCKS, CARD IMG
   ========================================= */

.pro-demo-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #FFFCF9 0%, #FFF8F0 100%);
    position: relative;
    overflow: visible; /* Tooltip kesilmesin */
}

.pro-grid-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- SOL KOLON --- */
.pro-content-col { flex: 1; min-width: 320px; text-align: left; }

.pro-headline {
    font-size: 46px; line-height: 1.25; color: var(--text-dark);
    font-weight: 600; margin-bottom: 20px; font-family: var(--font-head);
    text-align: left !important;
}

.pro-subhead {
    font-size: 18px; color: #555; line-height: 1.6; margin-bottom: 45px;
    max-width: 480px; text-align: left !important;
}

/* ÖZELLİK BLOKLARI (HOVER EFEKTLİ) */
.pro-features {
    display: flex; flex-direction: column; gap: 15px; margin-bottom: 45px;
}

.pf-item {
    display: flex; align-items: flex-start; gap: 18px; padding: 15px;
    border-radius: 12px; transition: all 0.3s ease;
    border: 1px solid transparent; /* Varsayılan sınır yok */
    background: transparent; /* Varsayılan arkaplan yok */
    cursor: default;
}

/* Hover Durumu: Beyaz, Kahverengi Stroke, Gölge */
.pf-item:hover {
    background: #fff;
    border-color: rgba(212, 163, 115, 0.5); /* Hafif Kahve Stroke */
    box-shadow: 0 10px 30px rgba(74, 59, 50, 0.08); /* Gölge */
    transform: translateX(10px); /* Hafif sağa kayma */
}

.pf-icon {
    width: 40px; height: 40px; background: #FFF4E6; color: var(--primary-dark);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.pf-text strong { display: block; font-size: 16px; color: var(--text-dark); margin-bottom: 3px; font-weight: 600; }
.pf-text small { display: block; font-size: 14px; color: #777; line-height: 1.4; }

/* Buton */
.cta-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.btn-pro-primary {
    background-color: var(--text-dark); color: #fff; padding: 16px 40px;
    border-radius: 8px; font-weight: 700; font-size: 16px; border: none; cursor: pointer;
    transition: 0.3s; box-shadow: 0 8px 20px rgba(74, 59, 50, 0.15);
    display: inline-flex; align-items: center; gap: 10px;
}
.btn-pro-primary:hover {
    background-color: var(--primary); transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(212, 163, 115, 0.3);
}
.cta-micro-copy { font-size: 12px; color: #999; font-weight: 500; margin-left: 5px; }

/* --- SAĞ KOLON (KART) --- */
.pro-visual-col {
    flex: 1; min-width: 320px; display: flex; justify-content: center; position: relative;
}

.medical-ui-card {
    background: #fff; width: 100%; max-width: 360px; border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06); position: relative; z-index: 2; overflow: visible; /* Tooltip için visible */
}

/* Skor Alanı ve Resim */
.mui-score-area {
    padding: 30px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #f9f9f9;
}
.mui-score-circle {
    width: 80px; height: 80px; position: relative; flex-shrink: 0;
    border-radius: 50%; overflow: hidden; /* Resmi daireye hapset */
}
/* Resim Arkası */
.score-bg-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0.2; /* %20 Opaklık */
    z-index: 0;
}
.circular-chart-lg {
    width: 100%; height: 100%; position: relative; z-index: 1; display: block;
}
.score-val {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 28px; font-weight: 800; color: var(--text-dark); z-index: 2;
}

.mui-product-info h4 { font-size: 16px; margin: 5px 0 0; color: var(--text-dark); }
.mui-badge.safe { background: #E0F2F1; color: #00695C; font-size: 10px; padding: 4px 8px; border-radius: 4px; font-weight: 700; }

/* Liste ve Tooltipler */
.mui-body { padding: 20px 30px 25px; }
.checklist-header { font-size: 10px; font-weight: 700; color: #ccc; letter-spacing: 1px; margin-bottom: 15px; }
.mui-checklist { list-style: none; padding: 0; margin: 0; }

.check-item {
    display: flex; align-items: center; justify-content: space-between; /* İkonu sağa yasla */
    padding: 12px 0; border-bottom: 1px solid #f9f9f9; font-size: 14px; color: #555;
}
.ci-left { display: flex; align-items: center; gap: 10px; }
.ci-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.check-item.success .ci-icon { background: #2A9D8F; }
.check-item.neutral .ci-icon { background: #ccc; }

/* TOOLTIP TASARIMI (?) */
.tooltip-wrap { position: relative; cursor: help; }
.q-icon {
    width: 18px; height: 18px; border-radius: 50%; background: #f0f0f0;
    color: #999; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.tooltip-wrap:hover .q-icon { background: var(--primary); color: #fff; }

/* Baloncuk */
.tooltip-box {
    visibility: hidden; opacity: 0;
    position: absolute; bottom: 100%; right: -10px;
    width: 200px; background: #333; color: #fff;
    padding: 10px; border-radius: 8px; font-size: 11px; line-height: 1.4;
    z-index: 99; margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.2s; pointer-events: none;
}
.tooltip-box::after { /* Ok işareti */
    content: ""; position: absolute; top: 100%; right: 15px;
    border-width: 5px; border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.tooltip-wrap:hover .tooltip-box { visibility: visible; opacity: 1; transform: translateY(-5px); }

/* Kart Altı Link */
.card-footer-action {
    margin-top: 20px; padding-top: 15px; border-top: 1px dashed #eee; text-align: center;
}
.card-footer-action a {
    font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px; transition: 0.3s;
}
.card-footer-action a:hover { color: var(--primary-dark); gap: 8px; }

/* Arkaplan Blobu */
.bg-blob-right {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(212, 163, 115, 0.1) 0%, rgba(255,255,255,0) 70%);
    z-index: 1; pointer-events: none;
}

/* MOBİL UYUM */
@media (max-width: 900px) {
    .pro-grid-wrapper { flex-direction: column; gap: 60px; }
    .pro-content-col { text-align: center; }
    .pro-headline, .pro-subhead, .pf-text { text-align: center !important; }
    .pro-subhead { margin-left: auto; margin-right: auto; }
    .pf-item { flex-direction: column; align-items: center; text-align: center; }
    .pf-item:hover { transform: translateY(-5px); }
    .cta-wrapper { align-items: center; }
}
/* =========================================
   SAYFA SONU BOŞLUK DÜZELTMESİ (FIX)
   ========================================= */

/* 1. Sayfa Temel Ayarları */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%; /* Sayfa yüksekliğini tam ayarla */
    width: 100%;
    overflow-x: hidden; /* Yatay taşmayı engelle */
}

/* 2. Footer Ayarları */
footer {
    margin-bottom: 0 !important; /* Alt boşluğu sıfırla */
    padding-bottom: 20px; /* İçerik çok yapışmasın diye iç boşluk */
    display: block;
}

/* 3. Footer'dan sonra gelen elemanların yer kaplamasını engelle */
/* (Popup, Sepet, Overlay vb. elementler kapalıyken yer tutmasın) */
#resultState:not(.active),
#cartOverlay:not(.active),
#preloader {
    display: none !important;
}

/* Mobil Menü varsa body'ye sadece onun kadar boşluk ver (opsiyonel) */
body {
    padding-bottom: 0 !important; 
}

/* Mobil menü kullanıyorsan ve altta kalıyorsa bu kodu açabilirsin: */
/* @media (max-width: 768px) {
    body { padding-bottom: 70px !important; } 
} 
*/
/* =========================================
   ÇOKLU BLOG CAROUSEL TASARIMI
   ========================================= */
.journal-slider-section {
    padding: 80px 0 100px;
    background-color: #FFFCF9;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.03);
    overflow: hidden; /* Taşmaları gizle */
}

.journal-header { margin-bottom: 40px; }

/* Kapsayıcı */
.carousel-wrapper {
    position: relative;
    max-width: 1100px; /* Genişliği artırdık */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Pencere (Viewport) - Kenarları Silik Efekt */
.carousel-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
    /* Kenarları silikleştirme efekti (Maske) */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    padding: 10px 0; /* Gölgeler kesilmesin */
}

/* Hareket Eden Ray */
.carousel-track {
    display: flex;
    gap: 20px; /* Kartlar arası boşluk */
    transition: transform 0.5s ease-in-out; /* Kayma animasyonu */
    width: max-content; /* İçerik kadar uza */
}

/* Tekil Kart Tasarımı */
.blog-card {
    display: block;
    width: 300px; /* Masaüstünde sabit genişlik */
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Sıkışmayı engelle */
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(212, 163, 115, 0.15);
}

.bc-image {
    height: 180px;
    width: 100%;
    overflow: hidden;
}
.bc-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.blog-card:hover .bc-image img { transform: scale(1.05); }

.bc-content {
    padding: 20px;
    text-align: left;
}
.bc-cat {
    font-size: 10px; font-weight: 800; color: var(--primary);
    text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px;
}
.bc-content h4 {
    font-size: 18px; color: var(--text-dark); margin-bottom: 8px; line-height: 1.3;
}
.bc-content p {
    font-size: 13px; color: #666; line-height: 1.5; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Oklar */
.c-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E0D6CC;
    color: var(--text-dark);
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    z-index: 10;
    flex-shrink: 0;
}
.c-arrow:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .blog-card { width: 260px; } /* Mobilde biraz daha dar */
    .carousel-viewport {
        /* Mobilde maskeyi kaldıralım, daha net görünsün */
        -webkit-mask-image: none; mask-image: none;
    }
    /* =========================================
   CAROUSEL DÜZELTMESİ (STYLE.CSS SONUNA EKLE)
   ========================================= */

/* Rayın kayma hareketi için gerekli ayarlar */
.carousel-track {
    display: flex;
    gap: 20px; /* Kartlar arası boşluk (JS ile uyumlu olmalı) */
    width: max-content; /* İçerik kadar genişle */
    transition: transform 0.5s ease-in-out; /* Kayma animasyonu */
    will-change: transform; /* Performans artırıcı */
    padding: 10px 5px; /* Gölgelerin kesilmemesi için */
}

/* Kapsayıcı taşmayı gizlemeli */
.carousel-viewport {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
    /* Kenarları hafif silik yapma efekti */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Okların tıklanabilir olması için */
.c-arrow {
    z-index: 100;
    position: relative;
    flex-shrink: 0;
}

}


/* =========================================
   INSTAGRAM TARZI ALT BAR TASARIMI
   ========================================= */

/* 1. Eski Hamburger Menüyü Gizle */
.hamburger-menu {
    display: none !important;
}

/* 2. Alt Bar Konteyneri */
.app-bottom-nav {
    display: none; /* Desktopta gizli */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom); /* iPhone X+ uyumu */
    border-top: 1px solid #f0f0f0;
}

/* 3. Standart İkonlar */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #999;
    font-size: 10px;
    font-weight: 600;
    width: 20%; /* Eşit dağılım */
    transition: 0.2s;
    height: 100%;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 4px;
    transition: 0.2s;
}

/* Aktif Durum */
.nav-item.active {
    color: var(--primary);
}
.nav-item.active i {
    transform: translateY(-2px);
}

/* 4. Orta Buton (Analiz - Vurgulu) */
.nav-center-wrapper {
    position: relative;
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-center-btn {
    width: 56px;
    height: 56px;
    background: var(--text-dark); /* Koyu Kahve */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(74, 59, 50, 0.3);
    position: absolute;
    top: -20px; /* Yukarı taşır */
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 4px solid #fff; /* Etrafına beyaz çerçeve */
}

.nav-center-btn:hover, .nav-center-btn.active {
    background: var(--primary);
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 25px rgba(212, 163, 115, 0.4);
}

/* 5. Mobilde Görünür Yap */
@media (max-width: 900px) {
    .app-bottom-nav {
        display: flex;
    }
    
    /* Footer mobilde barın altında kalmasın diye boşluk */
    body {
        padding-bottom: 80px; 
    }
    
    /* Üst menüdeki linkleri gizle, sadece Logo ve Sepet kalsın */
    .nav-split {
        display: none !important;
    }
    
    .navbar {
        justify-content: space-between;
        padding: 15px 20px;
    }
    
    /* Sepet İkonunu biraz daha belirgin yap */
    .auth-buttons {
        margin-left: auto;
    }
    .btn-login {
        display: none; /* Giriş butonu mobilde üstte yer kaplamasın */
    }
}
/* =========================================
   LOGO BÜYÜTME AYARI
   ========================================= */

/* Desktop (Masaüstü) için Logo Boyutu */
.logo-center img, .logo-img {
    height: 150px !important; /* Buradaki sayıyı artırarak daha da büyütebilirsin */
    width: auto; /* Orantıyı bozmamak için auto kalmalı */
    max-height: none; /* Kısıtlamaları kaldır */
}

/* Navbar'ın yüksekliğini logoya göre otomatik ayarla */
header .navbar {
    min-height: 130px; /* Logo büyüdüğü için barı biraz genişletelim */
}

/* Mobil Cihazlar için (Çok büyük olmaması için ayrı ayar) */
@media (max-width: 900px) {
    .logo-center img, .logo-img {
        height: 70px !important; /* Mobilde ideal boyut */
    }
    
    header .navbar {
        min-height: 80px; /* Mobilde bar yüksekliği */
    }
}
/* =========================================
   ANALİZ SONUÇLARI - YUVARLAK İKONLAR
   ========================================= */

/* Liste Elemanları Hizalaması */
.summary-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

/* İKON TASARIMI (Site Rengi Yuvarlak + Beyaz Tik) */
.summary-list li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 28px;       /* Yuvarlak Genişliği */
    height: 28px;      /* Yuvarlak Yüksekliği */
    
    background-color: #D4A373 !important; /* SİTE RENGİ (Arıg Gold) */
    color: #ffffff !important;            /* BEYAZ TİK */
    
    border-radius: 50%; /* Tam Yuvarlak */
    font-size: 14px;    /* Tik Boyutu */
    margin-right: 12px; /* Yazı ile mesafe */
    flex-shrink: 0;     /* Daralmayı engelle */
    box-shadow: 0 4px 10px rgba(212, 163, 115, 0.3); /* Hafif gölge */
}

/* Eğer uyarı/kırmızı durum varsa rengi değiştirmek için opsiyonel */
.summary-list li.danger i {
    background-color: #E63946 !important; /* Kırmızı */
}
.summary-list li.warning i {
    background-color: #F4A261 !important; /* Turuncu */
}
/* =========================================
   RENK DÜZELTMESİ (FİNAL ZORLAMA)
   ========================================= */

/* 1. STATUS CHIP (RİSKSİZ YAZISI) */
/* Yeşili ezip Bej/Toprak yapıyoruz */
.status-chip.safe {
    background-color: #F5EFE6 !important; /* Açık Bej Zemin */
    color: #A87B51 !important;            /* Koyu Toprak Yazı */
    border: 1px solid #D4A373 !important; /* Altın Çerçeve */
}

.status-chip.safe i {
    color: #D4A373 !important; /* İkon Rengi */
}

/* 2. LİSTE MADDELERİ (TİK İŞARETLERİ) */
/* Yuvarlak ve Site Rengi */
.summary-list li i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    width: 26px; 
    height: 26px;
    
    background-color: #D4A373 !important; /* SİTE RENGİ (DOLU) */
    color: #ffffff !important;            /* BEYAZ TİK */
    
    border-radius: 50%;
    font-size: 12px;
    margin-right: 12px;
    box-shadow: 0 3px 8px rgba(212, 163, 115, 0.4);
}

/* Liste Yazısı */
.summary-list li {
    color: #4A3B32 !important; /* Koyu Kahve */
    font-weight: 500;
}
/* =========================================
   MİNİ DEMO: SOLA DAYALI & SİTE RENKLERİ
   ========================================= */

/* 1. Kart Genel Ayarı */
.medical-ui-card.left-aligned {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(74, 59, 50, 0.15); /* Yumuşak gölge */
    padding: 30px;
    text-align: left !important; /* SOLA DAYAMA KOMUTU */
    max-width: 380px;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* İçerikleri sola çek */
}

/* 2. Görsel Ayarları (Siyahlık Yok) */
.card-image-wrapper {
    width: 100%;
    margin-bottom: 20px;
    background: transparent; /* Arka plan temiz */
}

.demo-product-img {
    width: 120px; /* Görsel boyutu */
    height: auto;
    object-fit: contain;
    filter: none; /* Siyahlık/Filtre yok */
    opacity: 1;   /* Tam görünür */
    display: block;
}

/* 3. Badge (RİSKSİZ) - Site Renkleri */
.mui-badge.safe {
    display: inline-block;
    background-color: #F5EFE6 !important; /* Açık Bej */
    color: #A87B51 !important;            /* Koyu Toprak */
    border: 1px solid #D4A373 !important; /* Altın Çerçeve */
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.mui-badge.safe i {
    color: #D4A373; /* Tik rengi */
    margin-right: 5px;
}

/* 4. Başlık */
.mui-product-info h4 {
    font-size: 22px;
    color: #4A3B32; /* Koyu Kahve */
    margin: 0 0 15px 0;
    font-family: "RL Folklor", serif;
}

/* 5. Liste Tasarımı (Yuvarlak Tikler) */
.demo-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.demo-check-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.demo-check-list li i {
    color: #D4A373 !important; /* SİTE RENGİ (Altın/Toprak) */
    font-size: 16px;
    margin-right: 10px;
    background: transparent; /* İstersen arkasını beyaz bırakabiliriz */
}
/* =========================================
   ÜRÜN GÖRSELİ İYİLEŞTİRMESİ (PREMIUM UI)
   ========================================= */

/* 1. Ürün Sahnesi (Resmin Kutusu) */
.card-image-wrapper {
    width: 100%;
    height: 180px; /* Sabit yükseklik vererek düzeni koru */
    background-color: #F9F5F0; /* Çok açık bej/krem zemin */
    border-radius: 16px;       /* Yumuşak köşeler */
    border: 1px solid rgba(212, 163, 115, 0.15); /* Çok hafif altın çerçeve */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; /* Dışarı taşmayı engelle */
    transition: all 0.3s ease;
}

/* 2. Ürün Resmi (Floating Effect - PARLAK VERSİYON) */
.demo-product-img {
    height: 75%; 
    width: auto;
    object-fit: contain;
    
    /* 1. MATLAŞTIRAN FİLTREYİ KALDIRDIK (drop-shadow) */
    
    /* 2. PARLAKLIĞI ARTIRDIK ve RENKLERİ CANLANDIRDIK */
    filter: brightness(1.05) contrast(1.05); /* %5 Parlaklık ve Kontrast artışı */
    
    /* 3. GÖLGEYİ RESME DEĞİL, ONU TUTAN KUTUYA VERELİM (Daha temiz durur) */
    /* (Bu ayar zaten .card-image-wrapper içinde var, o yüzden buraya gerek yok) */

    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Resmin kenarlarının keskin görünmesini sağlar */
    image-rendering: -webkit-optimize-contrast; 
}
/* 3. Hover Efekti (Canlılık Katar) */
.medical-ui-card:hover .card-image-wrapper {
    background-color: #F5EFE6; /* Üzerine gelince zemin biraz koyulaşsın */
    border-color: rgba(212, 163, 115, 0.4);
}

.medical-ui-card:hover .demo-product-img {
    transform: scale(1.1) translateY(-5px) rotate(2deg); /* Büyü, yukarı çık ve hafif dön */
}

/* 4. Arka Plana Dekoratif Işık (Opsiyonel Şıklık) */
.card-image-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}
/* =========================================
   GÖRSEL BÜYÜTME (DAHA BÜYÜK ÜRÜN)
   ========================================= */

/* 1. Resmin İçinde Durduğu Kutuyu Yükselt */
.card-image-wrapper {
    height: 250px !important; /* Eskisi 180px idi, sahneyi büyüttük */
}

/* 2. Resmin Kendisini Büyüt */
.demo-product-img {
    height: 85% !important;   /* Kutunun %75'i yerine %85'ini kaplasın */
    width: auto !important;   /* Orantıyı koru */
    max-width: 90%;           /* Yanlardan taşmasın */
}/* =========================================
   BLOG SAYFALARI TASARIMI
   ========================================= */

/* --- 1. BLOG LISTING (blog.html) --- */

.blog-hero {
    padding: 60px 0;
    background-color: #F9F5F0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.featured-article {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.fa-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 350px;
}
.fa-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.featured-article:hover .fa-image img { transform: scale(1.05); }

.blog-badge {
    position: absolute; top: 20px; left: 20px;
    background: var(--text-dark); color: #fff;
    padding: 6px 14px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
}

.fa-content { padding: 20px; }
.meta-info {
    font-size: 13px; color: #888; margin-bottom: 15px; display: flex; gap: 15px;
}
.fa-content h1 {
    font-family: var(--font-head); font-size: 36px; color: var(--text-dark);
    margin-bottom: 20px; line-height: 1.2;
}
.fa-content p {
    font-size: 16px; color: #666; margin-bottom: 30px; line-height: 1.6;
}
.btn-read-feat {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primary); color: #fff;
    padding: 12px 25px; border-radius: 50px;
    font-weight: 700; font-size: 14px; transition: 0.3s;
}
.btn-read-feat:hover { background: var(--primary-dark); transform: translateX(5px); }

/* Grid Feed */
.blog-feed { padding: 80px 0; background: #fff; }
.blog-grid-layout {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px;
}

.b-card {
    cursor: pointer; border-radius: 16px; overflow: hidden;
    transition: 0.3s; border: 1px solid transparent;
}
.b-card:hover {
    transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: #eee;
}

.bc-img { height: 220px; position: relative; overflow: hidden; border-radius: 16px; }
.bc-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.b-card:hover .bc-img img { transform: scale(1.05); }
.bc-cat {
    position: absolute; top: 15px; left: 15px;
    background: rgba(255,255,255,0.9); color: var(--text-dark);
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
}

.bc-body { padding: 20px 10px; }
.bc-meta { font-size: 12px; color: #999; margin-bottom: 10px; }
.bc-body h3 {
    font-size: 20px; margin-bottom: 10px; color: var(--text-dark); line-height: 1.3;
}
.bc-body p {
    font-size: 14px; color: #666; margin-bottom: 15px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-link {
    font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase;
}

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 10px; }
.page-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee;
    background: #fff; color: var(--text-dark); cursor: pointer; font-weight: 600;
    transition: 0.2s;
}
.page-btn:hover, .page-btn.active { background: var(--text-dark); color: #fff; border-color: var(--text-dark); }


/* --- 2. BLOG DETAY (blog-detay.html) --- */

/* Okuma Konteyneri (Daha dar, odaklı) */
.article-container {
    max-width: 800px; margin: 0 auto;
}

.article-header { padding: 60px 0 40px 0; text-align: center; }
.ah-meta {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;
}
.back-link { font-size: 14px; color: #666; font-weight: 500; }
.back-link:hover { color: var(--primary); }
.ah-cat {
    font-size: 12px; font-weight: 800; color: var(--primary); letter-spacing: 1px;
}

.article-header h1 {
    font-family: var(--font-head); font-size: 42px; color: var(--text-dark);
    line-height: 1.2; margin-bottom: 30px;
}

.ah-info {
    display: flex; justify-content: center; align-items: center; gap: 30px;
    border-top: 1px solid #eee; border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.author-block { display: flex; align-items: center; gap: 12px; text-align: left; }
.author-block img { width: 45px; height: 45px; border-radius: 50%; }
.author-block span { font-size: 13px; line-height: 1.4; color: #666; }
.author-block strong { color: var(--text-dark); }
.date-block { font-size: 13px; color: #999; }

.article-hero-img img {
    width: 100%; height: auto; border-radius: 20px; margin-bottom: 40px;
}

/* Metin Alanı */
.article-body-section { padding-bottom: 80px; }
.text-content p {
    font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 25px;
}
.text-content .lead-text {
    font-size: 22px; font-weight: 500; color: var(--text-dark); margin-bottom: 40px;
}
.text-content h2 {
    font-size: 28px; margin-top: 40px; margin-bottom: 15px; color: var(--text-dark);
}
.text-content h3 {
    font-size: 24px; margin-top: 30px; margin-bottom: 10px; color: var(--text-dark);
}
.text-content blockquote {
    border-left: 4px solid var(--primary); padding-left: 25px;
    font-size: 24px; font-style: italic; color: var(--text-dark);
    margin: 40px 0; font-family: var(--font-head);
}

.share-bar {
    margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee;
    display: flex; gap: 15px; align-items: center; font-weight: 600; color: #666;
}
.share-bar a {
    width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: 0.2s;
}
.share-bar a:hover { background: var(--primary); color: #fff; }

/* İlgili Yazılar */
.related-posts { background: #F9F5F0; padding: 60px 0; }
.related-posts h3 { text-align: center; margin-bottom: 30px; font-size: 24px; color: var(--text-dark); }
.rp-grid { display: flex; gap: 30px; justify-content: center; }
.rp-card {
    width: 300px; background: #fff; border-radius: 16px; overflow: hidden;
    text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s;
}
.rp-card:hover { transform: translateY(-5px); }
.rp-card img { height: 180px; width: 100%; object-fit: cover; }
.rp-card h4 { padding: 15px; font-size: 16px; color: var(--text-dark); margin: 0; }

/* Responsive */
@media (max-width: 900px) {
    .featured-article { grid-template-columns: 1fr; }
    .fa-image { height: 250px; }
    .blog-grid-layout { grid-template-columns: 1fr; }
    .article-header h1 { font-size: 32px; }
    .rp-grid { flex-direction: column; align-items: center; }
}
/* =========================================
   BLOG SAYFASI V2 (PROFESYONEL UX/UI)
   ========================================= */

/* 1. HERO ALANI */
.blog-hero-v2 {
    padding: 80px 0 60px 0;
    text-align: center;
    background-color: var(--bg-main);
    background-image: radial-gradient(#EAC997 1px, transparent 1px);
    background-size: 30px 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.bh-tag {
    font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--primary); background: #fff; padding: 5px 12px; border-radius: 20px; display: inline-block; margin-bottom: 20px;
}
.bh-content h1 {
    font-family: var(--font-head); font-size: 42px; color: var(--text-dark); margin-bottom: 15px; line-height: 1.1;
}
.bh-content p {
    font-size: 16px; color: var(--text-light); max-width: 600px; margin: 0 auto 30px auto;
}
.bh-tags {
    display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: #666;
}
.bh-chip {
    background: #fff; border: 1px solid #ddd; padding: 6px 14px; border-radius: 20px; font-size: 12px; color: var(--text-dark); cursor: pointer; transition: 0.2s; font-weight: 600;
}
.bh-chip:hover { border-color: var(--primary); color: var(--primary); }

/* 2. STICKY FİLTRE BARI */
.blog-sticky-bar {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

/* Arama */
.blog-search {
    position: relative; width: 300px;
}
.blog-search input {
    width: 100%; height: 44px; padding: 0 20px 0 45px; border-radius: 8px; border: 1px solid #ddd; background: #f9f9f9; font-size: 14px; outline: none; transition: 0.3s;
}
.blog-search input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.1); }
.blog-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; }

/* Dropdownlar */
.blog-filters { display: flex; gap: 10px; }
.blog-select {
    height: 44px; padding: 0 35px 0 15px; border-radius: 8px; border: 1px solid #ddd; background: #fff; color: var(--text-dark); font-size: 13px; font-weight: 600; cursor: pointer; outline: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 10px;
}
.blog-select:hover { border-color: var(--primary); }

/* 3. BLOG KARTLARI */
.blog-feed-v2 { padding: 50px 0 80px 0; background: #fff; }
.blog-grid-pro {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px;
}

.pro-blog-card {
    background: #fff; border: 1px solid #eee; border-radius: 16px; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; display: flex; flex-direction: column;
}
.pro-blog-card:hover {
    transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); border-color: rgba(212, 163, 115, 0.3);
}

.pbc-img {
    height: 200px; position: relative; overflow: hidden;
}
.pbc-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.pro-blog-card:hover .pbc-img img { transform: scale(1.05); }

.pbc-badge {
    position: absolute; top: 15px; left: 15px; background: rgba(255,255,255,0.95); color: var(--text-dark); padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}

.pbc-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.pbc-meta {
    font-size: 12px; color: #999; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.pbc-meta i { font-size: 10px; color: var(--primary); }

.pbc-body h3 {
    font-size: 18px; color: var(--text-dark); margin-bottom: 10px; line-height: 1.4; flex-grow: 1;
}
.pbc-body p {
    font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pbc-footer {
    display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid #f9f9f9;
}
.read-more-txt {
    font-size: 12px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 5px; transition: 0.3s;
}
.pro-blog-card:hover .read-more-txt { gap: 8px; }

/* 4. YÜKLE BUTONU & BOŞ DURUM */
.load-more-wrap { text-align: center; }
.btn-load-blog {
    padding: 14px 40px; background: var(--text-dark); color: #fff; border: none; border-radius: 50px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.3s;
}
.btn-load-blog:hover { background: var(--primary); transform: translateY(-2px); }

.blog-empty {
    text-align: center; padding: 60px 0; grid-column: 1 / -1;
}
.be-icon { font-size: 40px; color: #ddd; margin-bottom: 20px; }
.blog-empty h3 { color: var(--text-dark); margin-bottom: 10px; }
.blog-empty p { color: #888; font-size: 14px; margin-bottom: 20px; }
.btn-reset-blog {
    padding: 10px 25px; border: 1px solid #ddd; background: #fff; border-radius: 30px; cursor: pointer; color: var(--text-dark); font-weight: 600;
}
.btn-reset-blog:hover { border-color: var(--primary); color: var(--primary); }

/* Responsive */
@media (max-width: 900px) {
    .blog-grid-pro { grid-template-columns: 1fr; }
    .bar-inner { flex-direction: column; align-items: stretch; }
    .blog-search { width: 100%; }
    .blog-filters { width: 100%; overflow-x: auto; padding-bottom: 5px; }
    .blog-select { flex: 0 0 auto; }
}
/* =========================================
   BLOG V2 - PROFESYONEL FİLTRE & TAG TASARIMI
   ========================================= */

/* 1. HERO ALANI & POPÜLER KONULAR (CHIPS) */
.blog-hero-v2 {
    padding: 100px 0 80px 0;
    text-align: center;
    background-color: var(--bg-main); /* Arıg Bej */
    /* Profesyonel Doku: Çok hafif nokta deseni */
    background-image: radial-gradient(#D4A373 0.8px, transparent 0.8px);
    background-size: 40px 40px;
    position: relative;
}

/* "Popüler Konular" Başlığı */
.bh-tags span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    opacity: 0.6;
    margin-right: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Chip (Etiket) Tasarımı */
.bh-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.bh-chip {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 10px 20px;
    border-radius: 50px; /* Tam Oval */
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Hafif Gölge */
}

/* Hover Efekti: Yukarı kalkıp renklenir */
.bh-chip:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 8px 20px rgba(212, 163, 115, 0.2);
}

/* Aktif Efekti (Tıklanınca) */
.bh-chip:active {
    transform: scale(0.95);
}


/* 2. STICKY FİLTRE BARI (GLASSMORPHISM) */
.blog-sticky-bar {
    position: sticky;
    top: 0; /* Header yüksekliğine göre ayarlayabilirsin, örn: 80px */
    z-index: 99;
    
    /* Buzlu Cam Efekti */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-bottom: 1px solid rgba(212, 163, 115, 0.15); /* Hafif Altın Çizgi */
    padding: 20px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

/* Arama Kutusu (Modern & Geniş) */
.blog-search {
    position: relative;
    flex-grow: 1; /* Alanı kaplasın */
    max-width: 400px;
}

.blog-search input {
    width: 100%;
    height: 50px; /* Daha yüksek ve dokunulabilir */
    padding: 0 20px 0 50px;
    border-radius: 14px; /* Hafif köşeli modern yapı */
    border: 1px solid #E0E0E0;
    background: #fff;
    font-size: 14px;
    color: var(--text-dark);
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.blog-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.1); /* Glow efekti */
    outline: none;
}

.blog-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: 0.3s;
}

.blog-search input:focus + i {
    color: var(--primary);
}

/* Dropdown Filtreler (Custom Select) */
.blog-filters {
    display: flex;
    gap: 15px;
}

.blog-select {
    height: 50px;
    padding: 0 40px 0 20px;
    border-radius: 14px;
    border: 1px solid #E0E0E0;
    background-color: #fff;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none; /* Varsayılan oku gizle */
    transition: all 0.3s ease;
    min-width: 160px;
    
    /* Özel Ok İşareti (SVG Data URI) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.blog-select:hover {
    border-color: var(--primary);
    background-color: #FAFAFA;
}

.blog-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.1);
}

/* Mobil Uyum */
@media (max-width: 900px) {
    .bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .blog-search {
        max-width: 100%;
    }
    .blog-filters {
        overflow-x: auto;
        padding-bottom: 5px; /* Scrollbar payı */
    }
    .blog-select {
        flex: 0 0 auto; /* Mobilde sıkışmasın */
    }
}
/* =========================================
   BLOG FİLTRE AKTİF DURUMU (SEÇİLİ CHIP)
   ========================================= */
.bh-chip.active {
    background-color: var(--text-dark) !important; /* Koyu Kahve */
    color: #fff !important;
    border-color: var(--text-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 59, 50, 0.2);
}
/* =========================================
   BLOG İÇERİK TABLOSU VE UYARI KUTUSU
   ========================================= */

/* Tablo Tasarımı */
.blog-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 15px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.blog-table th {
    background-color: var(--text-dark);
    color: #ffffff;
    text-align: left;
    padding: 15px;
    font-weight: 700;
}

.blog-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #555;
}

.blog-table tr:last-of-type td {
    border-bottom: 2px solid var(--primary);
}

.blog-table tr:hover {
    background-color: #f9f9f9;
}

/* Uyarı Kutusu */
.alert-box {
    background-color: #FFF3E0;
    border-left: 5px solid #FF9800;
    color: #E65100;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
    font-size: 15px;
}

/* Mobil Tablo Kaydırma */
.table-responsive {
    overflow-x: auto;
}
/* =========================================
   ANA SAYFA BLOG SLIDER (CAROUSEL)
   ========================================= */

.blog-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

/* Görünür Alan (Maske) */
.carousel-viewport {
    width: 100%;
    overflow: hidden; /* Dışarı taşanları gizle */
    padding: 10px 5px; /* Kart gölgeleri kesilmesin */
    /* Mobilde sağ/sol fade efekti için opsiyonel maske */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Hareket Eden Ray */
.carousel-track {
    display: flex;
    gap: 30px; /* Kartlar arası boşluk */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Yumuşak kayma */
    width: max-content; /* İçerik kadar uza */
}

/* Slider İçindeki Blog Kartı Ayarı */
.carousel-track .blog-card {
    width: 350px; /* Sabit genişlik şart */
    flex-shrink: 0; /* Küçülmesini engelle */
    margin: 0; /* Dış boşlukları sıfırla */
}

/* Ok Butonları */
.c-arrow {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    color: var(--text-dark);
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    z-index: 10;
    flex-shrink: 0;
}
.c-arrow:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .blog-card { width: 260px; } /* Mobilde biraz daha dar */
    .carousel-viewport {
        /* Mobilde maskeyi kaldıralım, daha net görünsün */
        -webkit-mask-image: none; mask-image: none;
    }
    .blog-carousel-wrapper { gap: 10px; }
    .c-arrow { width: 40px; height: 40px; font-size: 14px; position: absolute; top: 50%; transform: translateY(-50%); }
    .c-arrow.prev { left: -10px; }
    .c-arrow.next { right: -10px; }
}
/* =========================================
   SLIDER KART DÜZELTMESİ (GÖRSEL 2 GİBİ OLSUN)
   ========================================= */

/* Slider içindeki kartlara sabit genişlik veriyoruz */
.carousel-track .slider-card {
    width: 350px !important; /* Kart Genişliği */
    min-width: 350px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important; /* Yüksekliği içeriğe göre ayarla */
    display: flex;
    flex-direction: column;
}

/* Görsellerin sığması için */
.slider-card .pbc-img {
    height: 200px;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .carousel-track .slider-card {
        width: 280px !important;
        min-width: 280px !important;
    }
}/* =========================================
   FULL WIDTH DÜZELTMESİ
   ========================================= */

/* Blog ve Footer'ın %100 genişlikte olmasını zorla */
.blog-section, footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sayfa taşmasını engelle */
body {
    overflow-x: hidden;
}
/* =========================================
   MARKET GRID FIX (GÖRÜNÜRLÜK GARANTİSİ)
   ========================================= */

/* Grid Container Ayarları */
.product-grid {
    display: grid;
    /* Responsive kolon yapısı: En az 260px, sığdığı kadar yan yana */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 30px;
    width: 100%;
    /* İçerik yüklenirken alanın çökmemesi için */
    min-height: 400px; 
    align-items: start; /* Kartların yukarı hizalanması */
}

/* Ürün Kartı Görünürlük Ayarı */
.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    /* Kartın her durumda görünmesi için */
    visibility: visible !important; 
    opacity: 1 !important;
    height: 100%; /* Grid hücresini doldur */
}

/* Görsel Alanı */
.card-image {
    height: 220px;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobilde yan yana 2li */
        gap: 15px;
    }
    .card-image { height: 160px; }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr; /* Çok küçük ekranda tekli */
    }
}
/* =========================================
   ARIG MARKET TASARIMI (SIFIRDAN)
   ========================================= */

/* Temel Ayarlar */
:root {
    --primary: #D4A373; /* Arıg Gold */
    --text-dark: #4A3B32;
    --bg-light: #F5EFE6;
    --green: #2E7D32;
    --white: ##F5EFE6;;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { background-color: #FAFAFA; color: var(--text-dark); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 1. Trust Bar */
.trust-bar { background: #E8F5E9; color: var(--green); text-align: center; padding: 8px; font-size: 13px; border-bottom: 1px solid #C8E6C9; }

/* 2. Header */
header { background: var(--white); padding: 15px 0; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
.navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.logo a { font-size: 24px; font-weight: 800; color: var(--text-dark); letter-spacing: 1px; }
.desktop-nav ul { display: flex; gap: 25px; }
.desktop-nav a { font-weight: 600; font-size: 14px; transition: 0.3s; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--primary); }
.cart-btn { position: relative; cursor: pointer; font-size: 20px; }
.cart-count { position: absolute; top: -8px; right: -8px; background: var(--primary); color: #fff; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* 3. Market Layout */
.market-section { padding: 40px 0; }
.market-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; }

/* Sidebar */
.sidebar { background: var(--white); padding: 25px; border-radius: 12px; border: 1px solid #eee; height: fit-content; position: sticky; top: 90px; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; }
.clear-btn { font-size: 12px; color: #E63946; background: none; border: none; cursor: pointer; text-decoration: underline; }
.filter-group { margin-bottom: 25px; }
.filter-group h4 { font-size: 14px; margin-bottom: 12px; color: var(--text-dark); }
.filter-group label { display: block; margin-bottom: 8px; font-size: 13px; color: #666; cursor: pointer; }
.filter-group input { margin-right: 8px; accent-color: var(--primary); }

/* Main Area */
.market-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.market-controls h1 { font-size: 20px; }
.sort-box select { padding: 8px; border-radius: 6px; border: 1px solid #ddd; outline: none; }

/* Grid */
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; }

/* Ürün Kartı */
.product-card { background: var(--white); border: 1px solid #eee; border-radius: 16px; overflow: hidden; transition: 0.3s; position: relative; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--primary); }

.card-img { height: 200px; padding: 20px; display: flex; align-items: center; justify-content: center; background: #fff; position: relative; border-bottom: 1px solid #f9f9f9; }
.card-img img { max-height: 100%; max-width: 100%; object-fit: contain; }

.badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; display: flex; gap: 5px; align-items: center; }
.badge.safe { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.badge.medium { background: #FFF3E0; color: #EF6C00; border: 1px solid #FFE0B2; }

.card-details { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.card-details h3 { font-size: 15px; color: var(--text-dark); margin-bottom: 5px; line-height: 1.4; height: 42px; overflow: hidden; }
.unit { font-size: 12px; color: #999; margin-bottom: 15px; }
.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.price { font-size: 18px; font-weight: 700; color: var(--text-dark); }
.add-btn { background: var(--text-dark); color: #fff; border: none; width: 35px; height: 35px; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.add-btn:hover { background: var(--primary); }

/* Sepet Sidebar */
.cart-sidebar { position: fixed; top: 0; right: -350px; width: 350px; height: 100%; background: #fff; box-shadow: -5px 0 30px rgba(0,0,0,0.1); z-index: 200; transition: 0.3s; display: flex; flex-direction: column; }
.cart-sidebar.active { right: 0; }
.cart-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: var(--bg-light); }
.cart-items { flex-grow: 1; padding: 20px; overflow-y: auto; }
.cart-footer { padding: 20px; border-top: 1px solid #eee; background: #fff; }
.checkout-btn { width: 100%; background: var(--primary); color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 150; display: none; }
.overlay.active { display: block; }

/* Sepet İtem */
.c-item { display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
.c-item img { width: 50px; height: 50px; object-fit: contain; border: 1px solid #eee; border-radius: 6px; }
.c-info h4 { font-size: 13px; margin-bottom: 4px; }
.c-info span { font-size: 12px; color: var(--primary); font-weight: 700; }

/* Footer */
footer { text-align: center; padding: 30px 0; border-top: 1px solid #eee; color: #888; font-size: 13px; margin-top: 50px; }

/* Mobil */
@media (max-width: 900px) {
    .market-layout { grid-template-columns: 1fr; }
    .sidebar { display: none; } /* Mobilde filtreyi gizledik */
    .grid-container { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
/* =========================================
   MARKET LAYOUT FIX & UX (V3.0)
   ========================================= */

/* 1. Container ve Layout */
.market-section-layout { padding: 40px 0 80px 0; background: #fff; min-height: 80vh; }

.market-grid-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sol 280px, Sağ Kalan */
    gap: 40px;
    align-items: start; /* Sidebar aşağı sündürmesin */
}

/* 2. Sidebar (Sticky & Scrollable) */
.market-sidebar {
    position: sticky;
    top: 110px; /* Header yüksekliğine göre */
    align-self: start;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 25px;
    max-height: calc(100vh - 120px); /* Ekran taşmasını engelle */
    overflow-y: auto; /* Çok filtre varsa scroll */
}

/* Scrollbar Sidebar İçin İnce Olsun */
.market-sidebar::-webkit-scrollbar { width: 6px; }
.market-sidebar::-webkit-scrollbar-thumb { background: #eee; border-radius: 3px; }

.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #f9f9f9; padding-bottom: 10px; }
.filter-header h3 { font-size: 18px; color: var(--text-dark); font-family: var(--font-head); }
.btn-text-reset { background: none; border: none; font-size: 12px; color: #E63946; cursor: pointer; text-decoration: underline; font-family: var(--font-body); }

.filter-group { margin-bottom: 25px; }
.filter-group h4 { font-size: 14px; color: var(--text-dark); margin-bottom: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* Tooltip */
.tooltip-icon { color: #aaa; cursor: help; font-size: 12px; position: relative; }
.tooltip-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff; padding: 8px; border-radius: 6px; font-size: 11px;
    width: 180px; text-align: center; font-weight: 400; line-height: 1.4; z-index: 99; margin-bottom: 5px;
}

/* Checkbox Tasarımı */
.custom-chk { display: flex; align-items: center; margin-bottom: 10px; cursor: pointer; font-size: 14px; color: #666; transition: 0.2s; }
.custom-chk:hover { color: var(--primary); }
.custom-chk input { display: none; }
.chk-box {
    width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 4px; margin-right: 10px;
    display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0;
}
.custom-chk input:checked + .chk-box { background: var(--primary); border-color: var(--primary); }
.custom-chk input:checked + .chk-box::after { content: '✔'; font-size: 10px; color: #fff; }
.safe-icon { color: #2E7D32; margin-left: auto; font-size: 14px; }

/* 3. Ürün Listesi ve Üst Kontrol */
.market-products { min-width: 0; /* Grid overflow fix */ }

.market-top-control { 
    display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; 
    border-bottom: 1px solid #f9f9f9; padding-bottom: 15px;
}
@media(min-width:768px){
    .market-top-control { flex-direction: row; justify-content: space-between; align-items: center; }
}

.res-count { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; }
.active-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
    background: #f0f0f0; padding: 4px 10px; border-radius: 20px; font-size: 11px; display: flex; align-items: center; gap: 5px; cursor: pointer; transition:0.2s;
}
.filter-chip:hover { background: #e0e0e0; }
.filter-chip i { font-size: 10px; color: #999; }

.styled-select { 
    padding: 8px 15px; border: 1px solid #ddd; border-radius: 8px; background: #fff; 
    font-family: var(--font-body); outline: none; cursor: pointer; color: var(--text-dark);
}

/* 4. Grid ve Kart Yapısı */
.product-card-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 30px; 
    width: 100%;
}

.m-product-card {
    background: #fff; border: 1px solid #eee; border-radius: 16px; overflow: hidden;
    transition: 0.3s; position: relative; display: flex; flex-direction: column;
    height: 100%; /* Kartlar eşit boyda olsun */
}
.m-product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); border-color: var(--primary); }

.mpc-img {
    height: 220px; padding: 25px; display: flex; align-items: center; justify-content: center;
    background: #fff; position: relative; border-bottom: 1px solid #fcfcfc;
}
.mpc-img img { max-height: 100%; max-width: 100%; object-fit: contain; transition: 0.5s; }
.m-product-card:hover .mpc-img img { transform: scale(1.08); }

/* Badges */
.mpc-badge {
    position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 6px;
    font-size: 10px; font-weight: 800; display: flex; gap: 5px; align-items: center; z-index: 2;
}
.mpc-badge.safe { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.mpc-badge.mid { background: #FFF3E0; color: #EF6C00; border: 1px solid #FFE0B2; }

.mpc-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.mpc-brand { font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 1px; font-weight: 700; margin-bottom: 5px; }
.mpc-title {
    font-size: 16px; color: var(--text-dark); font-weight: 700; margin-bottom: 5px;
    line-height: 1.3; height: 42px; overflow: hidden; font-family: var(--font-body);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mpc-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.mpc-unit { font-size: 12px; color: #999; }
.mpc-analyzed { font-size: 10px; color: var(--primary); display: flex; align-items: center; gap: 4px; font-weight: 600; }

.mpc-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f5f5f5; padding-top: 15px; }
.mpc-price { font-size: 18px; font-weight: 800; color: var(--text-dark); font-family: var(--font-body); }
.mpc-add-btn {
    padding: 8px 16px; border-radius: 8px; background: var(--text-dark); color: #fff;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s;
    font-size: 12px; font-weight: 700;
}
.mpc-add-btn:hover { background: var(--primary); transform: translateY(-2px); }

/* 5. Boş State */
.empty-state {
    grid-column: 1/-1; text-align: center; padding: 60px 0; color: #999;
    border: 2px dashed #eee; border-radius: 16px;
}
.empty-icon { font-size: 40px; margin-bottom: 15px; color: #ddd; }
.empty-state h3 { font-size: 18px; color: var(--text-dark); margin-bottom: 10px; }
.btn-primary-small {
    background: var(--primary); color: #fff; border: none; padding: 10px 25px; border-radius: 20px;
    font-weight: 700; cursor: pointer; margin-top: 10px; transition: 0.3s;
}
.btn-primary-small:hover { background: var(--primary-dark); }

/* Mobil */
@media (max-width: 900px) {
    .market-grid-wrapper { grid-template-columns: 1fr; }
    .market-sidebar { display: none; /* Mobilde gizle */ }
    .product-card-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .mpc-img { height: 160px; padding: 15px; }
    .mpc-body { padding: 15px; }
    .mpc-title { font-size: 14px; height: 38px; }
    .mpc-price { font-size: 16px; }
    .mpc-add-btn { padding: 6px 10px; font-size: 11px; }
    .mpc-add-btn span { display: none; } /* Mobilde sadece ikon */
    .mpc-add-btn::after { content: '+'; font-size: 14px; }
}
/* =========================================
   MARKET LAYOUT FIX (GÖRSEL 2 HEDEFİ)
   ========================================= */


.filter-group h4 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 700;
}

/* Checkbox Hizalaması (Flex) */
.custom-chk {
    display: flex;
    align-items: center;
    gap: 12px; /* Kutu ve yazı arası */
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: 0.2s;
}
.custom-chk:hover { color: var(--primary); }
.custom-chk input { display: none; } /* Orjinal checkbox gizle */

.chk-box {
    width: 20px; height: 20px;
    border: 2px solid #ddd;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.custom-chk input:checked + .chk-box {
    background: var(--primary);
    border-color: var(--primary);
}
.custom-chk input:checked + .chk-box::after {
    content: '✔'; font-size: 12px; color: #fff;
}

/* 3. Sağ Ürün Alanı */
.market-products {
    min-width: 0; /* Grid taşmasını önler */
}

.market-top-control {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f9f9f9;
}

/* 4. Ürün Grid & Kart Tasarımı */
.product-card-grid {
    display: grid;
    /* Responsive Grid: En az 260px genişlik */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    width: 100%;
    min-height: 400px; /* Boş görünmemesi için */
}

.m-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
    position: relative;
    display: flex; flex-direction: column;
    height: 100%; /* Kartlar eşit boy */
}
.m-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(74, 59, 50, 0.1);
    border-color: var(--primary);
}

/* Görsel Alanı */
.mpc-img {
    height: 240px; /* Sabit oran */
    padding: 30px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #fcfcfc;
}
.mpc-img img {
    max-height: 100%; max-width: 100%; object-fit: contain;
    transition: 0.5s;
}
.m-product-card:hover .mpc-img img { transform: scale(1.08); }

/* Risk Badge */
.mpc-badge {
    position: absolute; top: 15px; left: 15px;
    padding: 6px 12px; border-radius: 30px;
    font-size: 11px; font-weight: 800;
    display: flex; gap: 5px; align-items: center;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.mpc-badge.safe { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.mpc-badge.mid { background: #FFF3E0; color: #EF6C00; border: 1px solid #FFE0B2; }

/* İçerik ve Buton */
.mpc-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.mpc-brand { font-size: 11px; text-transform: uppercase; color: #999; font-weight: 700; margin-bottom: 5px; }
.mpc-title {
    font-size: 16px; color: var(--text-dark); font-weight: 700; margin-bottom: 5px;
    height: 42px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mpc-unit { font-size: 12px; color: #999; margin-bottom: 15px; }

.mpc-footer {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 15px; border-top: 1px solid #f9f9f9;
}
.mpc-price { font-size: 20px; font-weight: 800; color: var(--text-dark); }

/* Geniş Sepete Ekle Butonu */
.mpc-add-btn {
    padding: 10px 20px;
    border-radius: 50px; /* Tam oval */
    background: var(--text-dark); color: #fff;
    border: none; cursor: pointer;
    font-size: 13px; font-weight: 700;
    transition: 0.2s;
    display: flex; align-items: center; gap: 8px;
}
.mpc-add-btn:hover { background: var(--primary); transform: translateY(-2px); }

/* Mobil Uyum */
@media (max-width: 900px) {
    .market-grid-wrapper { grid-template-columns: 1fr; gap: 20px; }
    .market-sidebar { display: none; } /* Mobilde filtreyi şimdilik gizli */
    .product-card-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .mpc-img { height: 160px; padding: 15px; }
    .mpc-title { font-size: 14px; height: 38px; }
    .mpc-price { font-size: 16px; }
    .mpc-add-btn { padding: 8px 12px; font-size: 12px; }
    .mpc-add-btn span { display: none; } /* Mobilde "Sepete Ekle" yazısını gizle, sadece ikon kalsın */
    .mpc-add-btn::after { content: '+'; font-size: 14px; }
}
/* Akordiyon Temel Yapısı */
.accordion-content {
    display: none; /* Varsayılan olarak gizli */
    padding: 15px;
    border-top: 1px solid #eee;
    background-color: #fafafa;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* JavaScript "open" sınıfını eklediğinde görünür yap */
.accordion-item.open .accordion-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Ok işaretini döndür */
.accordion-header .arrow {
    transition: transform 0.3s ease;
}

.accordion-item.open .accordion-header .arrow {
    transform: rotate(180deg);
}

/* Basit bir açılma animasyonu */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Besin Değerleri Tablosu Tasarımı */
.custom-nutrition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #4A3B32; /* Metin rengi */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.custom-nutrition-table thead tr {
    background-color: #f4f1ea; /* Başlık arka planı (Sitenin tonlarına uygun) */
    color: #4A3B32;
    font-weight: 700;
}

.custom-nutrition-table th, 
.custom-nutrition-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.custom-nutrition-table th:last-child, 
.custom-nutrition-table td:last-child {
    text-align: right; /* Sayıları sağa yasla */
    font-weight: 600;
}

/* Satırlar arası hafif renk farkı (Okumayı kolaylaştırır) */
.custom-nutrition-table tbody tr:hover {
    background-color: #faf9f6;
}

/* Son çizgi kaldırılır */
.custom-nutrition-table tbody tr:last-child td {
    border-bottom: none;
}
/* --- SEPET KATMAN DÜZELTMESİ (Z-INDEX FIX) --- */

/* 1. Arka Planı Karartan Katman (Overlay) */
#cartOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah */
    backdrop-filter: blur(5px); /* İsteğe bağlı bulanıklık */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    
    /* EN ÖNEMLİ KISIM BURASI: */
    z-index: 9998 !important; /* Sepetin (9999) altında kalmalı */
}

#cartOverlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. Sepet Menüsü (Sidebar) */
#cartSidebar {
    position: fixed;
    top: 0;
    right: -400px; /* Başlangıçta gizli */
    width: 350px;
    height: 100%;
    background: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    
    /* EN ÖNEMLİ KISIM BURASI: */
    z-index: 9999 !important; /* Her şeyin en üstünde olmalı */
}

#cartSidebar.active {
    right: 0; /* Açılınca ekrana girsin */
}

/* 3. Header (Üst Menü) */
/* Eğer sepet ikonu tıklanmıyorsa header'ı da yukarı taşıyalım */
header {
    position: relative;
    z-index: 1000; 
}
/* Header'ı her şeyin üstüne çıkar (Tıklanabilir olması için şart) */
header {
    position: relative; 
    z-index: 10000 !important; 
}

/* Sepet İkonu Ayarları */
.cart-icon-box {
    cursor: pointer !important; /* Üzerine gelince el işareti çıksın */
    position: relative;
    z-index: 10001; /* Header'ın da üstünde olsun */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tıklama alanını genişletmek istersen padding ekleyebilirsin */
    padding: 5px; 
}

.cart-icon-box:active {
    transform: scale(0.95); /* Tıklayınca ufak bir basılma efekti */
}/* =========================================
   NAVBAR AKTİF LİNK RENGİ DÜZELTMESİ
   ========================================= */

/* Hem "active" class'ı hem de "active-link" class'ı için geçerli olsun */
.nav-split ul li a.active,
.nav-split a.active-link,
.nav-links ul li a.active {
    color: #D4A373 !important; /* Arıg Sarısı/Gold rengi */
    font-weight: 800 !important; /* Biraz daha kalın olsun */
}

/* Hover durumunda da sarı olsun */
.nav-split ul li a:hover,
.nav-split a:hover {
    color: #D4A373 !important;
}
/* =========================================
   ANALİZ SAYFASI - AYRIK ALT SATIR DÜZENİ
   ========================================= */

/* 1. Dış Kapsayıcı */
.hero-search-wrapper {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

/* 2. Arama Çubuğu ve Buton Hizalaması */
.search-action-container {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    /* Altına boşluk bırakmayalım, alt satır kendi margin'ini kullanacak */
}

/* Input ve Buton Stilleri (Aynı Kalıyor) */
.search-input-group {
    flex: 1;
    background: #fff;
    height: 65px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    padding-right: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.search-input-group:focus-within {
    border-color: #D4A373;
    box-shadow: 0 10px 40px rgba(212, 163, 115, 0.15);
    transform: translateY(-2px);
}

.search-icon-left {
    color: #ccc;
    font-size: 20px;
    border-right: 1px solid #eee;
    padding-right: 15px;
    margin-right: 15px;
    height: 24px;
    display: flex;
    align-items: center;
}

.search-input-group input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: #4A3B32;
    font-weight: 500;
}

.btn-barcode-icon {
    width: 45px;
    height: 45px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #999;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-hero-analyze {
    height: 65px;
    padding: 0 45px;
    background-color: #C69568;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(198, 149, 104, 0.4);
    transition: 0.3s;
    white-space: nowrap;
}

.btn-hero-analyze:hover {
    background-color: #A87B51;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(198, 149, 104, 0.5);
}

/* 3. BAĞIMSIZ ALT SATIR (TRUST INDICATORS) */
.trust-indicators-row.separate-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Öğeler arası boşluk */
    
    /* EN ÖNEMLİ KISIM: YUKARIDAN AYIRMA */
    margin-top: 35px; 
    padding-top: 10px; /* Ekstra ferahlık */
    width: 100%;
}

.separate-row .trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px; /* Yazı boyutu ideal küçük */
    font-weight: 600;
    color: #5D4037;
    opacity: 0.75; /* Hafif silik, dikkati search barda tutar */
    transition: 0.3s;
}

.separate-row .trust-item:hover {
    opacity: 1;
}

.separate-row .t-icon {
    font-size: 15px;
    color: #5D4037;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .search-action-container {
        flex-direction: column;
        gap: 15px;
    }
    .search-input-group, .btn-hero-analyze {
        width: 100%;
    }
    .trust-indicators-row.separate-row {
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 25px;
    }
}.search-icon-left {
    position: static !important;
}.search-input {
    height: 56px;          /* ⬅️ BAR DAHA İNCE */
    padding: 0 22px 0 52px;/* ⬅️ İÇ BOŞLUK KÜÇÜLDÜ */
    font-size: 15px;       /* ⬅️ YAZI BİRAZ DAHA ŞIK */
}/* --- ARAMA GEÇMİŞİ KUTUSU --- */
.suggestions-box {
    position: absolute;
    top: 100%; /* Inputun tam altı */
    left: 20px; /* Soldan hizala (input paddingi kadar) */
    right: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    z-index: 100;
    display: none; /* Başlangıçta gizli */
    overflow: hidden;
    margin-top: 5px;
}

.suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    align-items: center;
}

.suggestion-item:hover {
    background-color: #F5EFE6;
    color: #D4A373;
}

.suggestion-item:last-child {
    border-bottom: none;
}
/* =========================================
   ARIG ANALİZ V4 - KARAR ODAKLI UI
   ========================================= */

/* 1. HERO DÜZELTMESİ */
.analysis-hero-focused {
    padding: 60px 0;
    text-align: center;
    background: #F9F5F0;
}
.analysis-hero-focused h1 {
    font-size: 36px; color: var(--text-dark); margin-bottom: 10px; font-family: var(--font-head);
}
.search-suggestion {
    margin-top: 10px; font-size: 13px; color: #E63946;
}
.search-suggestion a { text-decoration: underline; font-weight: 700; }

/* 2. KARAR BANDI (Full Width) */
.decision-band {
    width: 100%;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* Durum Renkleri */
.decision-band.safe { background-color: #2A9D8F; } /* Yeşil */
.decision-band.diet { background-color: #264653; } /* Koyu Mavi */
.decision-band.risk { background-color: #F4A261; } /* Turuncu */
.decision-band.danger { background-color: #E63946; } /* Kırmızı */

.db-icon {
    font-size: 32px;
    background: rgba(255,255,255,0.2);
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.db-text h2 {
    margin: 0; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-body);
}
.db-text p {
    margin: 3px 0 0 0; font-size: 13px; opacity: 0.9;
}

/* 3. ÜRÜN & SKOR ALANI */
.product-identity-section {
    padding: 25px;
    display: flex; gap: 25px;
    border-bottom: 1px solid #f5f5f5;
}
.pi-left img {
    width: 90px; height: 90px; border-radius: 12px; object-fit: contain;
    border: 1px solid #eee; padding: 5px;
}
.pi-right { flex: 1; }
.pi-brand { font-size: 11px; text-transform: uppercase; color: #999; font-weight: 700; }
.pi-name { font-size: 20px; margin: 2px 0 15px 0; color: var(--text-dark); line-height: 1.3; }

/* Skor Kutusu */
.score-display-box {
    background: #fcfcfc; border: 1px solid #eee; border-radius: 12px; padding: 12px;
}
.score-main { display: flex; align-items: baseline; gap: 5px; margin-bottom: 8px; }
.s-val { font-size: 24px; font-weight: 800; color: var(--text-dark); }
.s-max { font-size: 12px; color: #999; }
.s-label { 
    margin-left: auto; font-size: 12px; font-weight: 700; 
    padding: 3px 10px; border-radius: 20px; 
}
/* Skor Etiket Renkleri */
.s-label.safe { background: #E8F5E9; color: #2E7D32; }
.s-label.risk { background: #FFF3E0; color: #EF6C00; }
.s-label.danger { background: #FFEBEE; color: #C62828; }

.score-factors-list { list-style: none; padding: 0; margin: 0; }
.score-factors-list li {
    font-size: 11px; color: #666; position: relative; padding-left: 12px; margin-bottom: 2px;
}
.score-factors-list li::before {
    content: "•"; color: #ccc; position: absolute; left: 0; top: 0;
}

/* 4. RİSK DAĞILIMI (TAB 1) */
.risk-distribution-grid {
    display: grid; gap: 12px; padding: 10px 0;
}
.rd-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; background: #fff; border: 1px solid #f0f0f0; border-radius: 8px;
    position: relative;
}
.rd-label { font-size: 13px; color: #555; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.rd-tag { 
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; 
}
.rd-tag.safe { background: #f0fdf4; color: #166534; }
.rd-tag.risk { background: #fff7ed; color: #c2410c; }
.rd-tag.unknown { background: #f3f4f6; color: #4b5563; }

/* Tooltip */
.has-tooltip:hover .custom-tooltip { opacity: 1; visibility: visible; }
.custom-tooltip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff; padding: 6px 12px; border-radius: 6px;
    font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden; transition: 0.2s;
    pointer-events: none; margin-bottom: 5px; z-index: 10;
}

/* 5. İÇİNDEKİLER FİLTRESİ */
.ing-filters {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee;
}
.if-label { font-size: 11px; font-weight: 700; color: #999; align-self: center; }
.if-btn {
    background: #fff; border: 1px solid #ddd; padding: 5px 12px; border-radius: 20px;
    font-size: 11px; color: #666; cursor: pointer; white-space: nowrap; transition: 0.2s;
}
.if-btn:hover, .if-btn.active {
    background: var(--text-dark); color: #fff; border-color: var(--text-dark);
}
.analyzed-text { font-size: 13px; line-height: 1.6; color: #444; max-height: 200px; overflow-y: auto; }
/* Vurgulanan Riskli Madde */
.highlight-risk {
    background-color: #FFEBEE; color: #C62828; font-weight: 700; padding: 0 3px; border-radius: 3px;
}

/* 6. TABLAR (Secondary için stil) */
.t-btn.secondary-tab { color: #aaa; font-weight: 400; }
.t-btn.secondary-tab.active { color: var(--text-dark); font-weight: 600; }

/* 7. FOOTER AKSİYONLARI */
.popup-footer-actions-v2 {
    padding: 20px 25px; border-top: 1px solid #eee; display: flex; gap: 15px;
}
.btn-action-primary {
    flex: 1; background: var(--text-dark); color: #fff; border: none; padding: 14px;
    border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    transition: 0.3s;
}
.btn-action-primary:hover { background: var(--primary); }

.btn-action-secondary {
    flex: 1; background: #fff; color: var(--text-dark); border: 2px solid var(--text-dark);
    padding: 14px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.btn-action-secondary:hover { background: #f9f9f9; }

/* 8. GÜVEN BİLGİSİ */
.trust-info-footer {
    background: #f9f9f9; padding: 10px 25px; font-size: 10px; color: #999;
    display: flex; justify-content: space-between; border-top: 1px solid #eee;
}
.trust-info-footer i { margin-right: 4px; }
/* =========================================
   ANALİZ SAYFASI - METODOLOJİ VE BİLGİ ALANI
   ========================================= */

.methodology-section {
    padding: 80px 0 100px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

/* Başlık */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h2 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.section-header p {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* 3'lü Kart Yapısı */
.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.method-card {
    background: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.method-card:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: var(--primary);
}

.mc-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 28px;
    color: var(--primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.method-card:hover .mc-icon {
    background: var(--primary);
    color: #fff;
}

.method-card h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-family: var(--font-head);
}

.method-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* API Güven Kutusu */
.api-trust-box {
    background: #F9F5F0; /* Arıg Bej Tonu */
    border-radius: 16px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(212, 163, 115, 0.2);
}

.at-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.at-icon {
    font-size: 24px;
    color: var(--primary-dark);
    margin-top: 5px;
}

.at-text h4 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.at-text p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.at-text small {
    display: block;
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid #E63946;
}

.at-badge {
    text-align: center;
    padding-left: 40px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.at-badge span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.at-badge strong {
    display: block;
    font-size: 16px;
    color: var(--text-dark);
    white-space: nowrap;
}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .method-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }
    .api-trust-box {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .at-content {
        flex-direction: column;
        align-items: center;
    }
    .at-badge {
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        width: 100%;
    }
    .at-text small {
        text-align: left;
    }
}
/* =========================================
   ANALİZ SAYFASI - METODOLOJİ VE BİLGİ ALANI
   ========================================= */

.methodology-section {
    padding: 80px 0 100px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

/* Başlık */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h2 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.section-header p {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* 3'lü Kart Yapısı */
.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.method-card {
    background: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.method-card:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: var(--primary);
}

.mc-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 28px;
    color: var(--primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.method-card:hover .mc-icon {
    background: var(--primary);
    color: #fff;
}

.method-card h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-family: var(--font-head);
}

.method-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* API Güven Kutusu */
.api-trust-box {
    background: #F9F5F0; /* Arıg Bej Tonu */
    border-radius: 16px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(212, 163, 115, 0.2);
}

.at-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.at-icon {
    font-size: 24px;
    color: var(--primary-dark);
    margin-top: 5px;
}

.at-text h4 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.at-text p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.at-text small {
    display: block;
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid #E63946;
}

.at-badge {
    text-align: center;
    padding-left: 40px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.at-badge span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.at-badge strong {
    display: block;
    font-size: 16px;
    color: var(--text-dark);
    white-space: nowrap;
}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .method-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }
    .api-trust-box {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .at-content {
        flex-direction: column;
        align-items: center;
    }
    .at-badge {
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        width: 100%;
    }
    .at-text small {
        text-align: left;
    }
}/* =========================================
   ANALİZ SAYFASI - METODOLOJİ VE BİLGİ ALANI
   ========================================= */

.methodology-section {
    padding: 80px 0 100px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

/* Başlık */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h2 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.section-header p {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* 3'lü Kart Yapısı */
.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.method-card {
    background: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.method-card:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: var(--primary);
}

.mc-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 28px;
    color: var(--primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.method-card:hover .mc-icon {
    background: var(--primary);
    color: #fff;
}

.method-card h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-family: var(--font-head);
}

.method-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* API Güven Kutusu */
.api-trust-box {
    background: #F9F5F0; /* Arıg Bej Tonu */
    border-radius: 16px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(212, 163, 115, 0.2);
}

.at-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.at-icon {
    font-size: 24px;
    color: var(--primary-dark);
    margin-top: 5px;
}

.at-text h4 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.at-text p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.at-text small {
    display: block;
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid #E63946;
}

.at-badge {
    text-align: center;
    padding-left: 40px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.at-badge span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.at-badge strong {
    display: block;
    font-size: 16px;
    color: var(--text-dark);
    white-space: nowrap;
}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .method-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }
    .api-trust-box {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .at-content {
        flex-direction: column;
        align-items: center;
    }
    .at-badge {
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        width: 100%;
    }
    .at-text small {
        text-align: left;
    }
}
/* =========================================
   OPEN FOOD FACTS LOGO & GÜVEN BALONU
   ========================================= */

/* Kapsayıcıyı Hazırla */
.off-brand-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: help; /* Üzerine gelince soru işareti imleci */
    margin-top: 5px;
}

/* Logo Ayarları */
.off-logo {
    height: 45px; /* İdeal yükseklik */
    width: auto;
    object-fit: contain;
    margin-bottom: 5px;
    filter: grayscale(100%); /* Varsayılan olarak gri olsun, şık durur */
    opacity: 0.7;
    transition: 0.3s;
}

/* Üzerine gelince logo renklensin */
.off-brand-wrapper:hover .off-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Tooltip (Bilgi Balonu) Tasarımı */
.off-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%; /* Logonun üstünde çıksın */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Aşağıdan yukarı efekt için */
    
    width: 280px;
    background-color: #2D3436; /* Koyu Gri Zemin */
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    z-index: 100;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
}

/* Üzerine gelince balonu göster */
.off-brand-wrapper:hover .off-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Balon Başlığı */
.off-tooltip h4 {
    color: #D4A373; /* Arıg Gold */
    font-size: 14px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-family: var(--font-head);
}

/* Balonun Altındaki Ok İşareti */
.off-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #2D3436 transparent transparent transparent;
}

/* Mobil Düzeltmesi */
@media (max-width: 768px) {
    .off-tooltip {
        width: 240px;
        left: 0;
        transform: translateX(-20%) translateY(10px); /* Mobilde taşmasın diye hafif sola kaydır */
    }
    .off-brand-wrapper:hover .off-tooltip {
        transform: translateX(-20%) translateY(0);
    }
    .off-tooltip::after {
        left: 70%; /* Ok işaretini hizala */
    }
}
/* =========================================
   YENİ İLETİŞİM SAYFASI TASARIMI (MODERN)
   ========================================= */

.contact-page-wrapper {
    padding: 80px 0 100px 0;
    background-color: var(--bg-main);
    min-height: 85vh; /* Sayfayı doldursun */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ana Kart */
.modern-contact-card {
    display: flex;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(74, 59, 50, 0.1);
    overflow: hidden;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

/* --- SOL PANEL (BİLGİLER) --- */
.info-panel {
    flex: 1;
    background-color: var(--text-dark); /* Koyu Kahve */
    color: #fff;
    padding: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.info-header h3 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #fff;
    font-family: var(--font-head);
}

.info-header p {
    font-size: 16px;
    opacity: 0.8;
    line-height: 1.6;
}

.info-list {
    margin: 50px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--primary);
    transition: 0.3s;
}

.info-row:hover .icon-circle {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}

.info-text span {
    display: block;
    font-size: 12px;
    opacity: 0.6;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.info-text strong {
    font-size: 16px;
    font-weight: 600;
}

.info-footer span {
    display: block;
    font-size: 14px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.social-links-row {
    display: flex;
    gap: 15px;
}

.social-links-row a {
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.social-links-row a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Dekoratif Daire */
.bg-circle-decor {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    z-index: 0;
}

/* --- SAĞ PANEL (FORM) --- */
.form-panel {
    flex: 1.4; /* Biraz daha geniş */
    padding: 60px;
    background-color: #fff;
}

.contact-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.half {
    width: calc(50% - 10px);
}

.form-group.full {
    width: 100%;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.form-group input, 
.form-group textarea,
.form-group select {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fcfcfc;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    width: 100%;
}

.form-group input:focus, 
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.1);
}

/* Özel Select Kutusu */
.custom-select-wrapper {
    position: relative;
}
.custom-select-wrapper select {
    appearance: none;
    cursor: pointer;
}
.arrow-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 12px;
}

.btn-send-message {
    width: 100%;
    padding: 16px;
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-send-message:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
}

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .modern-contact-card {
        flex-direction: column;
        margin: 0 20px;
        border-radius: 20px;
    }
    
    .info-panel {
        padding: 40px 30px;
    }
    
    .form-panel {
        padding: 40px 30px;
    }
    
    .form-group.half {
        width: 100%; /* Mobilde inputlar alt alta */
    }
}
/* =========================================
   İLETİŞİM SAYFASI (FİNAL DÜZELTME)
   ========================================= */

/* Sayfa Yapısı */
.contact-page-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Footer'ı dibe iter */
}

.contact-hero-wrapper {
    flex: 1; /* İçerik azsa bile alanı kapla */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-main);
    padding: 60px 0 100px 0;
}

/* Ana Kart */
.contact-main-card {
    display: flex;
    width: 100%;
    max-width: 1050px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    overflow: hidden;
    margin: 0 auto;
    min-height: 600px;
}

/* SOL TARA (BİLGİLER) */
.contact-info-side {
    flex: 1;
    background-color: var(--text-dark); /* Arıg Kahve */
    color: #fff;
    padding: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.contact-info-side h3 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #fff;
    font-family: var(--font-head);
}

.contact-info-side p {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
    line-height: 1.6;
}

.c-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.ci-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    transition: 0.3s;
}

.c-item:hover .ci-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}

.ci-text span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.ci-text strong {
    font-size: 16px;
    font-weight: 600;
}

/* Sosyal Medya */
.social-side span {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.8;
}

.social-circles {
    display: flex;
    gap: 15px;
}

.social-circles a {
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.social-circles a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Dekorasyon */
.decor-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    z-index: 0;
}
.decor-circle.big {
    width: 300px; height: 300px;
    bottom: -100px; right: -100px;
}
.decor-circle.small {
    width: 150px; height: 150px;
    top: -50px; right: -50px;
}

/* SAĞ TARA (FORM) */
.contact-form-side {
    flex: 1.4;
    padding: 50px;
    background: #fff;
}

.form-row-split {
    display: flex;
    gap: 20px;
}

.form-group {
    width: 100%;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.form-group input, 
.form-group textarea, 
.form-group select {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f9f9f9;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    color: var(--text-dark);
}

.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 5px 15px rgba(212, 163, 115, 0.1);
}

/* Select Oku Düzeltmesi */
.select-wrapper {
    position: relative;
}
.select-wrapper select {
    appearance: none;
    cursor: pointer;
}
.select-wrapper i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 12px;
}

.btn-submit-contact {
    width: 100%;
    padding: 16px;
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.btn-submit-contact:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
}

/* MOBİL UYUM (RESPONSIVE) */
@media (max-width: 900px) {
    .contact-main-card {
        flex-direction: column;
        border-radius: 0; /* Mobilde tam genişlik */
        box-shadow: none;
        background: transparent;
    }

    .contact-info-side {
        border-radius: 24px;
        margin-bottom: 30px;
        padding: 40px 30px;
    }

    .contact-form-side {
        background: #fff;
        border-radius: 24px;
        padding: 40px 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .form-row-split {
        flex-direction: column;
        gap: 0;
    }
    
    .contact-hero-wrapper {
        padding: 40px 20px;
    }
}
/* =========================================
   TARİF DETAY SAYFASI TASARIMI (FIX)
   ========================================= */

/* 1. Ana Konteyner Boşluğu */
.recipe-content-section {
    padding: 40px 0 80px 0;
    background-color: #fff;
}

/* 2. Grid Düzeni (Sol İçerik - Sağ Sidebar) */
.grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Sol geniş, Sağ dar */
    gap: 40px;
    align-items: start;
}

/* Sol Kolon */
.left-col {
    min-width: 0; /* Taşmayı önler */
}

/* 3. Hero Görseli (Tasarım Bozukluğunu Giderir) */
.recipe-hero-visual {
    width: 100%;
    height: 400px; /* Sabit yükseklik */
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background-color: #f0f0f0;
}

.recipe-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya sığdırır, uzatmaz */
    display: block;
}

/* 4. İçerik Kartları */
.content-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

.card-title {
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f9f9f9;
    font-family: var(--font-head);
}

/* 5. Malzeme Listesi */
.clean-ing-list {
    list-style: none;
    padding: 0;
}

.ing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
    font-size: 15px;
    color: #555;
}

.ing-row.sellable {
    background-color: #FFFCF9; /* Hafif turuncu arka plan */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(212, 163, 115, 0.2);
    margin: 10px 0;
}

.brand-badge {
    background-color: var(--text-dark);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: middle;
}

/* Buton (Ürünü Gör) */
.btn-mini-add {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-mini-add:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* 6. Adımlar (Steps) */
.steps-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    gap: 20px;
}

.step-num {
    width: 35px;
    height: 35px;
    background-color: var(--bg-main);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-family: var(--font-head);
    flex-shrink: 0;
}

.step-desc p {
    margin: 5px 0 0 0;
    line-height: 1.6;
    color: #444;
}

/* 7. Sidebar (Sağ Taraf) */
.sidebar-right {
    position: sticky;
    top: 100px; /* Header'a yapışmasın */
}

.sidebar-widget {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.widget-head {
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Yazar Kutusu */
.author-box {
    display: flex;
    align-items: center;
    gap: 15px;
}
.author-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.ab-info strong {
    display: block;
    color: var(--text-dark);
    font-size: 16px;
}

/* Besin Tablosu */
.nutri-table-clean {
    width: 100%;
    border-collapse: collapse;
}
.nutri-table-clean td {
    color: #666;
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
}
.nutri-table-clean th {
    text-align: right;
    color: var(--text-dark);
    font-weight: 700;
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

/* MOBİL UYUM */
@media (max-width: 900px) {
    .grid-layout {
        grid-template-columns: 1fr; /* Tek kolon */
    }
    .recipe-hero-visual {
        height: 250px; /* Mobilde görseli küçült */
    }
    .ing-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ing-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}
/* =========================================
   TARİF DETAY V5 (PREMIUM UI)
   ========================================= */

.recipe-page-wrapper {
    background-color: #FAFAFA; /* Sayfa geneli hafif gri */
    padding-bottom: 80px;
}

/* 1. HERO SECTION (Kompakt & Modern) */
.recipe-hero-modern {
    background-color: #fff;
    padding: 40px 0 60px 0;
    border-bottom: 1px solid #eee;
}

.rh-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Sol geniş, Sağ görsel */
    gap: 50px;
    align-items: center;
    margin-top: 20px;
}

/* Sol Taraf */
.trust-badge-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #E8F5E9; color: #2E7D32; font-weight: 700; font-size: 12px;
    padding: 6px 14px; border-radius: 30px; margin-bottom: 20px;
}
.recipe-hero-modern h1 {
    font-size: 42px; line-height: 1.1; color: var(--text-dark); margin-bottom: 15px; font-family: var(--font-head);
}
.recipe-lead {
    font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;
}

.rh-meta-row {
    display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap;
}
.meta-item {
    display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dark); font-weight: 600;
}
.meta-item i { color: var(--primary); font-size: 18px; }
.meta-item.badge {
    background: var(--text-dark); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 12px;
}
.meta-item.badge.easy { background: #2A9D8F; }

.rh-actions { display: flex; gap: 15px; }
.btn-action {
    padding: 12px 25px; border-radius: 50px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.btn-action.primary { background: var(--primary); color: #fff; border: none; }
.btn-action.primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-action.outline { background: transparent; border: 2px solid #ddd; color: var(--text-dark); }
.btn-action.outline:hover { border-color: var(--text-dark); }

/* Sağ Taraf (Görsel) */
.rh-visual .img-frame {
    width: 100%; height: 380px; border-radius: 24px; overflow: hidden; position: relative;
    box-shadow: 20px 20px 0px rgba(212, 163, 115, 0.1); /* Dekoratif gölge */
}
.rh-visual img { width: 100%; height: 100%; object-fit: cover; }
.no-img img { display: none; }
.no-img .img-placeholder { display: flex; }
.img-placeholder {
    display: none; width: 100%; height: 100%; background: #eee; align-items: center; justify-content: center; font-size: 40px; color: #ccc;
}

/* 2. BODY SECTION (GRID LAYOUT) */
.recipe-body-section { padding-top: 50px; }
.recipe-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px; /* Sol Esnek, Sağ Sabit 340px */
    gap: 50px;
    align-items: start;
}

/* SOL: Adımlar */
.block-title {
    font-size: 24px; color: var(--text-dark); margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #eee; display: flex; align-items: center; gap: 10px; font-family: var(--font-head);
}
.block-title i { color: var(--primary); }

.step-card {
    background: #fff; padding: 25px; border-radius: 16px; margin-bottom: 25px;
    border: 1px solid #f0f0f0; box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.step-header { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.step-index {
    width: 32px; height: 32px; background: var(--text-dark); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.step-header h4 { font-size: 18px; margin: 0; }
.step-card p { font-size: 16px; line-height: 1.6; color: #555; margin: 0; }

/* SAĞ: Sticky Sidebar */
.sticky-wrapper {
    position: sticky; top: 110px; /* Header boşluğu */
    display: flex; flex-direction: column; gap: 25px;
}

.sidebar-card {
    background: #fff; border-radius: 16px; padding: 25px;
    border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Malzemeler Kartı */
.ingredients-card { border-top: 4px solid var(--primary); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.card-header h3 { margin: 0; font-size: 18px; }
.card-header small { color: #999; font-size: 12px; }

.ingredients-checklist { list-style: none; padding: 0; margin: 0; }
.ing-check-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px dashed #eee;
}
.ing-check-item:last-child { border-bottom: none; }

/* Custom Checkbox */
.custom-checkbox {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; color: #444; line-height: 1.4;
}
.custom-checkbox input { display: none; }
.checkmark {
    width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 5px; flex-shrink: 0; position: relative; transition: 0.2s;
}
.custom-checkbox input:checked ~ .checkmark { background: var(--primary); border-color: var(--primary); }
.custom-checkbox input:checked ~ .checkmark::after {
    content: '✔'; position: absolute; color: #fff; font-size: 12px; left: 4px; top: 0;
}
.custom-checkbox input:checked ~ .ing-name { text-decoration: line-through; opacity: 0.5; }

.amount { color: #000; font-weight: 700; margin-right: 4px; }
.gf-badge { font-size: 9px; background: #E8F5E9; color: #2E7D32; padding: 2px 6px; border-radius: 4px; margin-left: 5px; font-weight: 700; text-transform: uppercase; }

.ing-link { color: var(--primary); font-size: 14px; transition: 0.2s; }
.ing-link:hover { color: var(--primary-dark); transform: scale(1.1); }

.btn-shop-all {
    width: 100%; margin-top: 20px; background: var(--text-dark); color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 13px; display: flex; justify-content: center; gap: 8px;
}
.btn-shop-all:hover { background: var(--primary); }

/* Besin Kartı */
.nutri-bar-item { margin-bottom: 12px; }
.nb-info { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; color: #666; }
.nb-info strong { color: var(--text-dark); }
.nb-track { width: 100%; height: 6px; background: #eee; border-radius: 10px; overflow: hidden; }
.nb-fill { height: 100%; border-radius: 10px; }

.diet-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.d-tag { font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.d-tag.safe { background: #E8F5E9; color: #2E7D32; }
.d-tag.info { background: #E3F2FD; color: #1565C0; }

/* Şef Kartı */
.chef-card { display: flex; align-items: center; gap: 15px; }
.chef-card img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.chef-info { display: flex; flex-direction: column; }
.chef-info .sub { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; }

/* Alt CTA */
.recipe-bottom-cta {
    background: var(--text-dark); color: #fff; padding: 40px; border-radius: 20px; text-align: center; margin-top: 50px;
}
.recipe-bottom-cta h3 { color: #fff; margin-bottom: 10px; font-size: 24px; }
.recipe-bottom-cta p { color: rgba(255,255,255,0.7); margin-bottom: 25px; }
.cta-buttons { display: flex; justify-content: center; gap: 15px; }
.btn-cta-dark { background: #fff; color: var(--text-dark); border: none; padding: 12px 25px; border-radius: 50px; font-weight: 700; cursor: pointer; }
.btn-cta-light { background: transparent; color: #fff; border: 2px solid #fff; padding: 12px 25px; border-radius: 50px; font-weight: 700; cursor: pointer; }

/* MOBİL UYUM */
@media (max-width: 900px) {
    .rh-grid { grid-template-columns: 1fr; gap: 30px; }
    .rh-visual .img-frame { height: 250px; box-shadow: none; }
    .rh-content { order: 2; }
    .rh-visual { order: 1; }
    
    .recipe-layout-grid {
        grid-template-columns: 1fr; /* Mobilde tek kolon */
        gap: 40px;
    }
    
    /* Mobilde Sidebar'ı İçeriğin Altına Al */
    .recipe-sidebar-col { order: 2; }
    .recipe-main-col { order: 1; }
    .sticky-wrapper { position: static; }
}
/* =========================================
   TARİF ADIMLARI - KAHVERENGİ CHECKLIST (FIX)
   ========================================= */

.step-card-interactive {
    display: block;
    position: relative;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Gizli Checkbox */
.step-check-input { display: none; }

/* İçerik Kutusu */
.step-card-content { padding: 25px; transition: 0.3s; }

/* --- TIKLANINCA (KAHVERENGİ KONSEPT) --- */

/* Kartın arka planı ve sınırı değişsin */
.step-card-interactive:has(.step-check-input:checked) {
    background-color: #FAF7F2; /* Çok açık bej/krem */
    border-color: #A87B51;     /* Arıg Koyu Kahve/Gold */
    box-shadow: 0 4px 15px rgba(168, 123, 81, 0.15); /* Kahve tonlu gölge */
}

/* Metni hafif silik yap */
.step-card-interactive:has(.step-check-input:checked) .step-card-content {
    opacity: 0.7;
}

/* Numara Yuvarlağını Kahverengi Yap */
.step-card-interactive:has(.step-check-input:checked) .step-index {
    background-color: #A87B51; /* Kahverengi */
    color: #fff;
}

/* --- TAMAMLANDI İKONU (SAĞ ÜST) --- */
.step-success-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: #A87B51; /* Kahverengi */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    
    /* Başlangıçta gizli */
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Seçilince ikonu göster */
.step-card-interactive:has(.step-check-input:checked) .step-success-icon {
    opacity: 1;
    transform: scale(1);
}

/* Hover Efekti */
.step-card-interactive:hover {
    border-color: #D4A373; /* Açık Gold */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
/* =========================================
   Z-INDEX (KATMAN) & KAPATMA DÜZELTMESİ
   ========================================= */

/* 1. Header'ı Geri Plana At */
header {
    z-index: 900 !important; 
    position: sticky;
}

/* 2. Siyah Arka Planları (Overlay) Öne Al */
#cartOverlay, 
#mobileMenuOverlay,
.cart-overlay, 
.mobile-menu-overlay {
    z-index: 998 !important; /* Header'dan yüksek */
}

/* 3. Yan Panelleri (Sepet & Menü) En Öne Al */
#cartSidebar, 
#mobileMenuSidebar,
.cart-sidebar, 
.mobile-menu-sidebar {
    z-index: 999 !important; /* En üst katman */
}
/* =========================================
   Z-INDEX (KATMAN) & HAMBURGER DÜZELTMESİ
   ========================================= */

/* 1. Header'ı Geri Plana At */
header {
    z-index: 900 !important; 
    position: sticky;
}

/* 2. Hamburger Menüyü Görünür Yap (Mobilde) */
@media (max-width: 900px) {
    .hamburger-menu {
        display: flex !important; /* Görünür yap */
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--text-dark); /* Rengi belirginleştir */
        cursor: pointer;
        width: 40px;
        height: 40px;
    }
}

/* 3. Siyah Arka Planları (Overlay) Öne Al */
#cartOverlay, 
#mobileMenuOverlay,
.cart-overlay, 
.mobile-menu-overlay {
    z-index: 998 !important; /* Header(900)'dan yüksek */
}

/* 4. Yan Panelleri (Sepet & Menü) En Öne Al */
#cartSidebar, 
#mobileMenuSidebar,
.cart-sidebar, 
.mobile-menu-sidebar {
    z-index: 999 !important; /* En üst katman */
}
/* =========================================
   HEADER & NAVBAR (DÜZELTİLMİŞ GRID)
   ========================================= */

header {
    background-color: var(--bg-main);
    padding: 10px 0; /* Yükseklik biraz kısıldı */
    position: sticky;
    top: 0;
    z-index: 900; /* Sidebarların altında kalması için */
    box-shadow: 0 2px 15px rgba(0,0,0,0.04);
}

.header-grid {
    display: grid;
    /* ÖNEMLİ: Sol, Orta (Auto), Sağ şeklinde 3 kolon */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- LOGO ALANI --- */
.logo-area {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    height: 40px; /* Logo yüksekliği - İsteğe göre ayarla */
    width: auto;
    display: block;
}

/* --- SOL ve SAĞ LİNKLER --- */
.nav-left ul, 
.nav-right {
    display: flex;
    align-items: center;
    gap: 25px; /* Linkler arası boşluk */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Sağ grubu sağa yasla */
.nav-right {
    justify-content: flex-end; 
}

/* Link Stilleri */
.nav-left a, 
.secondary-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap; /* Yazıların alt satıra kaymasını engeller */
}

.nav-left a:hover, 
.secondary-links a:hover {
    color: var(--primary);
}

/* --- AKSİYON GRUBU --- */
.action-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}

.divider {
    width: 1px;
    height: 20px;
    background-color: #ccc;
}

/* Sepet */
.cart-icon {
    position: relative;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- YENİ GİRİŞ BUTONU (LIGHT STYLE) --- */
.btn-login-light {
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    /* Açık renk stil */
    background-color: transparent; 
    color: var(--text-dark);
    border: 2px solid var(--text-dark); /* Çerçeveli */
    padding: 6px 18px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-login-light:hover {
    background-color: var(--text-dark);
    color: var(--white);
}

/* --- HAMBURGER MENÜ (Varsayılan Gizli) --- */
.hamburger-menu {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-dark);
}

/* =========================================
   MOBİL DÜZENLEMELER (Responsive)
   ========================================= */
@media (max-width: 992px) {
    
    /* 1. Grid Yapısını İptal Et -> Flex'e Dön */
    .header-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
    }

    /* 2. Masaüstü Menüleri Gizle */
    .desktop-only {
        display: none !important;
    }

    /* 3. Hamburgeri Göster */
    .hamburger-menu {
        display: block;
    }

    /* 4. Logoyu Sola veya Ortaya Hizala */
    .logo-area {
        /* Eğer logonun solda, hamburgerin sağda olmasını istersen: */
        order: -1; 
    }
}
/* =========================================
   HEADER & NAVBAR (DÜZELTİLMİŞ GRID)
   ========================================= */

header {
    background-color: var(--bg-main);
    padding: 10px 0; /* Yükseklik biraz kısıldı */
    position: sticky;
    top: 0;
    z-index: 900; /* Sidebarların altında kalması için */
    box-shadow: 0 2px 15px rgba(0,0,0,0.04);
}

.header-grid {
    display: grid;
    /* ÖNEMLİ: Sol, Orta (Auto), Sağ şeklinde 3 kolon */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- LOGO ALANI --- */
.logo-area {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    height: 40px; /* Logo yüksekliği - İsteğe göre ayarla */
    width: auto;
    display: block;
}

/* --- SOL ve SAĞ LİNKLER --- */
.nav-left ul, 
.nav-right {
    display: flex;
    align-items: center;
    gap: 25px; /* Linkler arası boşluk */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Sağ grubu sağa yasla */
.nav-right {
    justify-content: flex-end; 
}

/* Link Stilleri */
.nav-left a, 
.secondary-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap; /* Yazıların alt satıra kaymasını engeller */
}

.nav-left a:hover, 
.secondary-links a:hover {
    color: var(--primary);
}

/* --- AKSİYON GRUBU --- */
.action-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}

.divider {
    width: 1px;
    height: 20px;
    background-color: #ccc;
}

/* Sepet */
.cart-icon {
    position: relative;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- YENİ GİRİŞ BUTONU (LIGHT STYLE) --- */
.btn-login-light {
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    /* Açık renk stil */
    background-color: transparent; 
    color: var(--text-dark);
    border: 2px solid var(--text-dark); /* Çerçeveli */
    padding: 6px 18px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-login-light:hover {
    background-color: var(--text-dark);
    color: var(--white);
}

/* --- HAMBURGER MENÜ (Varsayılan Gizli) --- */
.hamburger-menu {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-dark);
}

/* =========================================
   MOBİL DÜZENLEMELER (Responsive)
   ========================================= */
@media (max-width: 992px) {
    
    /* 1. Grid Yapısını İptal Et -> Flex'e Dön */
    .header-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
    }

    /* 2. Masaüstü Menüleri Gizle */
    .desktop-only {
        display: none !important;
    }

    /* 3. Hamburgeri Göster */
    .hamburger-menu {
        display: block;
    }

    /* 4. Logoyu Sola veya Ortaya Hizala */
    .logo-area {
        /* Eğer logonun solda, hamburgerin sağda olmasını istersen: */
        order: -1; 
    }
}
/* --- 1. SAĞ ÜST MENÜ DÜZENİ (Header Fix) --- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 25px; /* Linkler arası boşluk */
}

.secondary-links {
    display: flex;
    list-style: none;
    gap: 20px; /* Blog, Tarifler, İletişim arası boşluk */
    margin: 0;
    padding: 0;
}

.secondary-links li a {
    text-decoration: none;
    color: #333; /* Renk kodunu kendine göre ayarla */
    font-weight: 500;
    white-space: nowrap; /* Yazıların alt satıra kaymasını engeller */
}

.action-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- 2. MOBİL MENÜ GİZLEME VE GÖSTERME --- */
/* Menüyü varsayılan olarak ekran dışına itiyoruz */
.mobile-menu-sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* Ekranın sağından dışarıda */
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    transition: right 0.3s ease-in-out; /* Açılma animasyonu */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: flex; /* İçerik düzeni için */
    flex-direction: column;
}

/* JS ile 'active' class'ı eklenince içeri girsin */
.mobile-menu-sidebar.active {
    right: 0;
}

/* Overlay (Siyah Perde) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobil menü iç düzeni */
.mm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.mm-links {
    list-style: none;
    padding: 20px;
}

.mm-links li {
    margin-bottom: 15px;
}

.mm-links a {
    text-decoration: none;
    color: #333;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Aktif sayfa linki kalın olsun */
.nav-link.active,
.secondary-links li a.active {
    font-weight: 700;
    color: #D4A373; /* Senin turuncu/kahve tonun */
}
/* =========================================
   MOBİL MENÜ TASARIMI (SIDEBAR)
   ========================================= */

/* 1. SİYAH PERDE (OVERLAY) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah */
    z-index: 9998; /* Sidebar'ın hemen altında */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(2px); /* Arkadaki içeriği hafif bulanıklaştırır */
}

/* Aktif olunca görünür yap */
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. MENÜ KUTUSU (SIDEBAR) */
.mobile-menu-sidebar {
    position: fixed;
    top: 0;
    right: -320px; /* Başlangıçta ekranın sağında gizli */
    width: 300px;
    height: 100vh; /* Tam boy */
    background-color: #ffffff;
    z-index: 9999; /* En üstte */
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Yumuşak kayma efekti */
    display: flex;
    flex-direction: column;
}

/* JS 'active' sınıfını ekleyince içeri kayar */
.mobile-menu-sidebar.active {
    right: 0;
}

/* 3. MENÜ BAŞLIĞI */
.mm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
}

.mm-header h3 {
    font-family: "RL Folklor", serif; /* Marka fontun */
    font-size: 20px;
    color: #4A3B32; /* Koyu Kahve */
    margin: 0;
}

.mm-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    transition: 0.2s;
    padding: 5px;
}

.mm-close-btn:hover {
    color: #E63946; /* Kapatma butonu için kırmızımsı ton */
    transform: rotate(90deg);
}

/* 4. MENÜ LİNKLERİ */
.mm-content {
    flex: 1; /* Kalan boşluğu doldurur */
    padding: 20px 0;
    overflow-y: auto; /* İçerik taşarsa scroll olsun */
    display: flex;
    flex-direction: column;
}

.mm-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mm-links li {
    border-bottom: 1px dashed #f5f5f5;
}

.mm-links a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    text-decoration: none;
    color: #4A3B32; /* Koyu metin */
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mm-links a i {
    width: 20px;
    text-align: center;
    color: #D4A373; /* İkon rengi (Turuncu/Altın) */
    font-size: 18px;
}

/* Link Hover Efekti */
.mm-links a:hover {
    background-color: #fff9f2; /* Çok açık turuncu zemin */
    color: #D4A373;
    padding-left: 30px; /* Hafif sağa kayma */
}

/* 5. MENÜ ALT KISIM (BUTONLAR) */
.mm-footer {
    padding: 25px;
    border-top: 1px solid #f0f0f0;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-mm-login,
.btn-mm-register {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn-mm-login {
    background-color: #fff;
    border: 2px solid #D4A373;
    color: #D4A373;
}

.btn-mm-login:hover {
    background-color: #fff5e6;
}

.btn-mm-register {
    background-color: #4A3B32;
    border: 2px solid #4A3B32;
    color: #fff;
}

.btn-mm-register:hover {
    background-color: #3a2e26;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 59, 50, 0.2);
}

/* BARKOD TARAYICI TASARIMI */
.barcode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none; /* Varsayılan gizli */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.barcode-card {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
    position: relative;
}

.barcode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.barcode-header h3 {
    margin: 0;
    font-family: "RL Folklor", serif;
    color: #4A3B32;
}

.btn-close-scanner {
    background: #f0f0f0;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: 0.2s;
}

.btn-close-scanner:hover {
    background: #E63946;
    color: #fff;
}

.scanner-tip {
    margin-top: 15px;
    color: #666;
    font-size: 14px;
}

/* Kütüphane içindeki stop butonu vb. için stil düzeltmesi */
#reader__dashboard_section_csr button {
    background: #D4A373 !important;
    color: white !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    cursor: pointer;
    margin-top: 10px;
}

/* --- 1. SCHAR SNACK YAZISI (Bahnschrift En Kalın) --- */
.mui-product-info h4 {
    font-family: 'Bahnschrift', sans-serif !important;
    font-weight: 800 !important; /* En kalın hali */
    font-size: 1.3rem; /* Biraz daha belirgin olması için */
    letter-spacing: 0.5px;
    color: #4A3B32;
}

/* --- 2. BÖLÜM BAŞLIKLARI (Nasıl Çalışır & Arıg Blog) --- */
.section-header h2 {
    font-family: 'Bahnschrift', sans-serif; /* İstersen 'RL Folklor' da yapabilirsin */
    font-size: 2.8rem; /* Çok daha büyük ve iddialı */
    font-weight: 900; /* Ekstra kalın */
    color: #4A3B32; /* Marka koyu kahvesi */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* --- 3. BÖLÜM AÇIKLAMALARI (Alt Metinler) --- */
.section-header p {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 1.15rem; /* Okunabilir boyut */
    font-weight: 300; /* İnce ve zarif (Light) */
    color: #666; /* Daha gri ve geri planda */
    max-width: 600px; /* Metni çok yaymayıp ortada tutar */
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 4. PRO SUBHEAD (2 Satır Olan Kısım) --- */
.pro-subhead {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6; /* Satırlar arası boşluk */
    color: #555;
}
/* --- BÖLÜM BAŞLIKLARI (Nasıl Çalışır & Arıg Blog) --- */
.section-header h2 {
    font-family: 'RL Folklor', serif !important; /* İstediğin font */
    font-size: 3.2rem; /* Oldukça büyük ve iddialı */
    color: #4A3B32; /* Markanın koyu kahvesi */
    
    /* Estetik Dokunuşlar */
    font-weight: normal; /* Folklor zaten karakterli, kalınlaştırmaya gerek yok */
    letter-spacing: 0.5px; /* Harfler birbirine çok yapışmasın */
    margin-bottom: 10px; /* Altındaki yazıyla mesafe */
    line-height: 1.1; /* Satır aralığını sıkı tutarak başlık gibi gösterir */
}

/* --- BÖLÜM AÇIKLAMALARI (Alt Metinler) --- */
.section-header p {
    font-family: 'Bahnschrift', sans-serif; /* Okunabilirlik için modern font */
    font-size: 1.2rem; /* İdeal okuma boyutu */
    font-weight: 300; /* İnce (Light) - Başlıkla yarışmasın diye */
    color: #888; /* Daha soluk gri, dikkati başlığa verir */
    
    /* Düzen */
    max-width: 550px; /* Metin çok yayılmasın, blok dursun */
    margin: 0 auto; /* Ortala */
    line-height: 1.6; /* Rahat okuma aralığı */
}

/* --- Mobil Uyumluluk --- */
@media (max-width: 768px) {
    .section-header h2 {
        font-size: 2.2rem; /* Mobilde taşmaması için biraz küçültüyoruz */
    }
}
/* --- ORGANİK ALT ÇİZGİ EFEKTİ (Marker Line) --- */

/* Önce başlığı kapsayıcı hale getiriyoruz */
.section-header h2 {
    position: relative; /* Çizgiyi buna göre konumlandıracağız */
    display: inline-block; /* Çizgi sadece yazı kadar uzun olsun, ekranı kaplamasın */
    z-index: 1; /* Yazı önde kalsın */
}

/* Şimdi o 'çizim gibi' duran çizgiyi yaratıyoruz */
.section-header h2::after {
    content: '';
    position: absolute;
    
    /* Konumlandırma */
    bottom: 5px; /* Yazının biraz altına, hafif üstüne binsin */
    left: -10px; /* Soldan hafif taşsın */
    width: calc(100% + 20px); /* Sağdan da hafif taşsın */
    height: 14px; /* Çizginin kalınlığı */
    
    /* Görünüm */
    background-color: #D4A373; /* Marka Rengi (Turuncu/Altın) */
    opacity: 0.3; /* %30 görünürlük (Hafif ve zarif durması için) */
    z-index: -1; /* Yazının arkasına gönder */
    
    /* El Çizimi Hissi Veren Sihirli Kısım */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; 
    transform: rotate(-1deg); /* Dümdüz olmasın, hafif yamuk dursun */
    pointer-events: none; /* Tıklamayı engellemesin */
}
/* =========================================
   ARIG - BLOG DETAY SAYFASI (YATAY & BAHNSCHRIFT - ÖZEL RENK)
   ========================================= */

/* Arka planı genişlet ve ferahlat */
.article-body-section {
    background-color: #f7f9f9; 
    padding: 60px 0;
}

/* Dar dikdörtgen yerine geniş ve yatay okuma kartı */
.text-content {
    background: #ffffff;
    padding: 60px 80px; 
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    max-width: 1000px; 
    margin: -80px auto 0 auto; 
    position: relative;
    z-index: 10;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif; 
}

/* 1. Giriş Paragrafı (Vurgulu ve yatay çizgi destekli) */
#detailContent .lead-text {
    font-size: 22px;
    color: #333;
    font-weight: 400;
    margin-bottom: 40px;
    line-height: 1.6;
    border-left: 5px solid #483c33; /* Özel Renk */
    padding-left: 20px;
    background: linear-gradient(90deg, rgba(72, 60, 51, 0.05) 0%, rgba(255,255,255,0) 100%);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* 2. Normal Paragraflar */
#detailContent p {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
    font-family: 'Bahnschrift', sans-serif;
}

/* 3. Ana Başlıklar */
#detailContent h2 {
    font-size: 30px;
    color: #483c33; /* Özel Renk */
    margin-top: 55px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

/* 4. Alt Başlıklar */
#detailContent h3 {
    font-size: 24px;
    color: #222;
    margin-top: 45px;
    margin-bottom: 15px;
}

/* 5. Fosforlu Kalem Efekti */
#detailContent strong {
    color: #111;
    background: linear-gradient(180deg, transparent 65%, rgba(72, 60, 51, 0.25) 65%);
}

/* 6. LİSTELERİ YATAY YAYMA */
#detailContent ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 35px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 15px;
}

#detailContent ul li {
    position: relative;
    font-size: 17px;
    color: #444;
    line-height: 1.5;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    padding: 15px 15px 15px 45px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#detailContent ul li:hover {
    border-color: #483c33; /* Özel Renk */
    box-shadow: 0 4px 10px rgba(72, 60, 51, 0.1);
}

#detailContent ul li::before {
    content: "✓";
    color: #fff;
    background-color: #483c33; /* Özel Renk */
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* 7. GERÇEKÇİ STICKY NOTE (YAPIŞKAN NOT KAĞIDI) EFEKTİ */
#detailContent blockquote {
    background-color: #FDF9D9; 
    padding: 35px 40px;
    margin: 60px auto;
    color: #222;
    font-size: 20px;
    font-style: normal;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.08), inset 0 0 40px rgba(0,0,0,0.02); 
    position: relative;
    width: 85%;
    transform: rotate(-1.5deg); 
    border-radius: 2px 2px 25px 2px; 
}

/* Yapışkan Bant Efekti (Üstte şeffaf bant) */
#detailContent blockquote::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(3deg);
    width: 130px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    z-index: 2;
}

/* Kıvrılmış Sağ Alt Köşe Efekti */
#detailContent blockquote::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-width: 0 0 30px 30px;
    border-style: solid;
    border-color: transparent transparent #fff #E6E0B3; 
    box-shadow: -2px -2px 4px rgba(0,0,0,0.05);
}

/* Mobilde taşmaları önlemek için ayarlar */
@media (max-width: 768px) {
    .text-content {
        padding: 40px 20px;
        margin-top: -30px;
        max-width: 95%;
    }
    #detailContent ul {
        grid-template-columns: 1fr; 
    }
    #detailContent blockquote {
        width: 95%;
        transform: rotate(0deg); 
        padding: 25px;
    }
}