/* ==========================================================================
   lake-catalog.css
   Katalog ve kurumsal sayfalarda temanın karşılığı OLMAYAN bileşenler.

   Temada zaten bulunan her şey (card-product, tf-grid-layout, tf-btn,
   tf-product-info-*, section-page-title ...) burada TEKRARLANMAZ.
   Renkler tema değişkenlerinden okunur; sabit renk yazılmaz ki palet
   değiştiğinde bu sayfalar da onunla dönsün.
   ========================================================================== */

/* --- Görseli olmayan ürün kartı --------------------------------------- */
.catalog-card_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--surface);
    color: var(--text-3);
}

/* --- Teknik özellik tablosu ------------------------------------------- */
/* Gerçek <table>: dil modelleri tabloyu serbest metinden çok daha güvenilir
   çıkarır, bu da AI yanıtlarında alıntılanma şansını artırır. */
.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table th,
.spec-table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}

.spec-table th {
    width: 42%;
    font-weight: 500;
    color: var(--text-2);
}

.spec-table td {
    color: var(--text);
    font-weight: 500;
}

/* --- Renk etiketleri --------------------------------------------------- */
.color-tag {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-2);
    background: var(--white);
}

/* --- Uygulama tipi kartı (kapak detayındaki 3 kart) ------------------- */
/* <button> olarak render edilir (modal açar), bu yüzden tarayıcı düğme
   varsayılanları sıfırlanır. */
.application-card {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow .25s ease, transform .25s ease;
}

.application-card:hover,
.application-card:focus-visible {
    box-shadow: 0 12px 32px rgba(16, 16, 16, .1);
    transform: translateY(-3px);
}

.application-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.application-card_img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.application-card_body {
    padding: 16px 18px 18px;
}

.application-card_title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.application-card_meta {
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-2);
}

/* --- Uzun metin blokları (kurumsal ve hukuki sayfalar) ---------------- */
.content-prose {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-2);
}

.content-prose > :first-child { margin-top: 0; }

.content-prose h2 {
    font-size: 24px;
    color: var(--text);
    margin: 40px 0 14px;
}

.content-prose h3 {
    font-size: 19px;
    color: var(--text);
    margin: 28px 0 10px;
}

.content-prose ul,
.content-prose ol {
    padding-left: 22px;
    margin-bottom: 18px;
}

.content-prose li { margin-bottom: 8px; }

.content-prose a {
    color: var(--primary);
    text-decoration: underline;
}

.content-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.content-prose th,
.content-prose td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
}

.content-prose th {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
}

/* --- Boş durum -------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 56px 20px;
}

.empty-state > i {
    color: var(--text-3);
    display: block;
    margin-bottom: 16px;
}

/* --- Bilgi/istatistik kutuları (kurumsal sayfalar) -------------------- */
.info-card {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
}

.info-card_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 16px;
}

.info-card_title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.info-card_text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
    margin: 0;
}

/* --- Katalog (PDF) kartı ---------------------------------------------- */
.catalog-doc {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    transition: box-shadow .25s ease;
}

.catalog-doc:hover {
    box-shadow: 0 12px 32px rgba(16, 16, 16, .08);
}

.catalog-doc_icon {
    font-size: 34px;
    color: var(--primary);
    margin-bottom: 14px;
}

.catalog-doc_actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

.catalog-doc_download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 18px;
    transition: border-color .2s ease, color .2s ease;
}

.catalog-doc_download:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Ürün galerisi ---------------------------------------------------- */
.product-gallery_main {
    all: unset;
    cursor: zoom-in;
    display: block;
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}

.product-gallery_main img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
}

.product-gallery_main:hover img { transform: scale(1.03); }

/* Büyütme ipucu — kullanıcı tıklanabilir olduğunu görmeli */
.product-gallery_zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 16px rgba(16, 16, 16, .16);
    transition: transform .2s ease;
}

.product-gallery_main:hover .product-gallery_zoom { transform: scale(1.08); }

.product-gallery_thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.product-gallery_thumb {
    all: unset;
    cursor: pointer;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}

.product-gallery_thumb:hover,
.product-gallery_thumb:focus-visible { border-color: var(--primary); }

.product-gallery_thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.product-gallery_empty {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--surface);
    border-radius: 16px;
}

/* --- Büyük önizleme (lightbox) --------------------------------------- */
.product-lightbox .modal-content {
    background: rgba(16, 16, 16, .97);
    border: 0;
    border-radius: 0;
}

.product-lightbox_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    color: var(--white);
    flex-shrink: 0;
}

.product-lightbox_title {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-lightbox_counter {
    font-size: 13px;
    opacity: .7;
    flex-shrink: 0;
}

.product-lightbox_close {
    all: unset;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 20px;
    flex-shrink: 0;
    transition: background .2s ease;
}

.product-lightbox_close:hover { background: rgba(255, 255, 255, .12); }

.product-lightbox_body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 0 12px 24px;
}

.product-lightbox_swiper {
    width: 100%;
    height: 100%;
}

.product-lightbox_swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-lightbox_swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-lightbox_nav {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .2s ease;
}

.product-lightbox_nav:hover { background: rgba(255, 255, 255, .25); }
.product-lightbox_nav.prev { left: 8px; }
.product-lightbox_nav.next { right: 8px; }

@media (min-width: 768px) {
    .product-lightbox_body { padding: 0 24px 32px; }
    .product-lightbox_nav.prev { left: 24px; }
    .product-lightbox_nav.next { right: 24px; }
}

/* --- Ürün bilgi sütunu ------------------------------------------------ */
.product-info { top: 100px; }

@media (max-width: 991.98px) {
    /* Mobilde sticky sütun ekranı kilitliyor; sadece masaüstünde yapışsın. */
    .product-info { position: static !important; }
}

/* --- Birincil eylem: WhatsApp ---------------------------------------- */
/* Ziyaretçiyi forma değil doğrudan konuşmaya yönlendiriyoruz; bu yüzden
   WhatsApp butonu diğerlerinden görsel olarak baskın. */
.product-cta {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}

.product-cta_whatsapp {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .28);
}

.product-cta_whatsapp:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .36);
}

.product-cta_whatsapp > i { font-size: 28px; flex-shrink: 0; }
.product-cta_whatsapp strong { display: block; font-size: 16px; line-height: 1.3; }
.product-cta_whatsapp small { display: block; font-size: 12px; opacity: .9; }

.product-cta_row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Kullanılan kapak kartı ------------------------------------------ */
.used-panels { margin: 28px 0; }

.used-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.used-panel:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(16, 16, 16, .07);
    color: inherit;
}

.used-panel_img {
    flex: 0 0 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
}

.used-panel_img img { width: 100%; height: 100%; object-fit: cover; }

.used-panel_body { flex: 1; min-width: 0; }

.used-panel_code {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--white);
    background: var(--text);
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 4px;
}

.used-panel_name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.used-panel_meta { display: block; font-size: 13px; color: var(--text-2); }

.used-panel_arrow { color: var(--text-3); flex-shrink: 0; }
.used-panel:hover .used-panel_arrow { color: var(--primary); }


/* --- "Bu kapakla yapılanlar" — tür başına bölüm ---------------------- */
/* Modal kaldırıldı: uygulamalar doğrudan sayfada, her görsel kendi sayfasına
   giden gerçek bir bağlantı. Tek katman, açıklama metni gerektirmiyor. */
.usage-group + .usage-group {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.usage-group_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.usage-group_title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.usage-group_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
}

.usage-group_all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.usage-group_all:hover { color: var(--primary); text-decoration: underline; }

/* --- Büyük önizlemede yakınlaştırma ---------------------------------- */
.product-lightbox_swiper .swiper-slide {
    overflow: hidden;
    touch-action: pan-y;
}

.product-lightbox_swiper .swiper-slide img {
    transform-origin: center center;
    transition: transform .18s ease-out;
    cursor: zoom-in;
    will-change: transform;
}

/* Yakınlaştırılmışken imleç "taşı"ya döner ve geçiş kapanır: sürükleme
   sırasında animasyon olursa hareket gecikmeli hissettirir. */
.product-lightbox_swiper .swiper-slide.is-zoomed img {
    cursor: grab;
    transition: none;
}

.product-lightbox_swiper .swiper-slide.is-zoomed:active img { cursor: grabbing; }

.product-lightbox_hint {
    text-align: center;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    padding: 0 20px 12px;
}

/* --- Lake Renk Dünyası ------------------------------------------------ */
.color-family + .color-family { margin-top: 48px; }

.color-family_title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}

.color-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
}

.color-card_swatch {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Görsel yoksa hex'ten düz renk; içeriden ince bir çizgi ile açık tonlar
   beyaz zeminde kaybolmaz. */
.color-card_swatch.is-flat { box-shadow: inset 0 0 0 1px rgba(16, 16, 16, .08); }

.color-card_body { display: block; padding: 12px 14px 14px; }

.color-card_name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.color-card_code {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text-2);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 999px;
}

.color-card_meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); }

.color-note {
    margin-top: 56px;
    padding: 32px;
    border-radius: 14px;
    background: var(--surface);
}

/* --- Kilometre taşları (hakkımızda) -----------------------------------
   Kart değil ince bir şerit: sayfada zaten üç bilgi kartı var, altı kutu
   üst üste gelince hiçbiri okunmuyordu. */
.milestone-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.milestone {
    background: var(--white);
    padding: 24px 20px;
    text-align: center;
}

.milestone_value {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}

.milestone_label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}

@media (min-width: 768px) {
    .milestone-strip { grid-template-columns: repeat(3, 1fr); }
    .milestone { padding: 30px 24px; }
    .milestone_value { font-size: 40px; }
}

/* Satır içi marka SVG'si font ikonu gibi davransın: metinle aynı hizada dursun. */
.brand-icon { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* --- Sipariş süreci adımları (çalışma sistemimiz) ---------------------- */
.process-steps {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.process-step {
    display: flex;
    gap: 18px;
    padding-bottom: 28px;
    position: relative;
}

/* Adımları birbirine bağlayan dikey çizgi; sonuncuda çizilmez. */
.process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 4px;
    width: 2px;
    background: var(--line);
}

.process-step_no {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.process-step_body { padding-top: 6px; }

.process-step_title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
}

.process-step_title a { color: inherit; text-decoration: underline; }

.process-step_text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    margin: 0;
}

/* --- Avantaj listesi (hakkımızda) ------------------------------------- */
.benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 28px;
}

.benefit-list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-2);
}

.benefit-list > li > i {
    color: var(--primary);
    font-size: 20px;
    line-height: 1.4;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .benefit-list { grid-template-columns: repeat(2, 1fr); }
}