/*
 * SEO icerik bloklari - ORTAK TASARIM KAYNAGI.
 *
 * Kimler kullanir:
 *   .seo-article / .seo-faq   koleksiyon sayfalari, kategori rehber blogu,
 *                             anasayfa "Avmal ne yapar" blogu
 *   .tc-*                     yalnizca Olta Takimlari sayfalari
 *
 * NEDEN AYRI DUZ CSS (Tailwind utility'leri yerine): Tailwind v4 sinif
 * taramasini DERLEME aninda yapiyor ve public/build/ icindeki derlenmis CSS
 * elle uretiliyor. Blade'e bugun yeni bir utility yazilirsa derleme
 * yenilenmedikce o sinif CSS'te YOK ve sessizce etkisiz kaliyor
 * (category-filter.css ve tackle.css ile ayni gerekce).
 *
 * NEDEN ROZET RENGI BURADA YOK: takim kartindaki rozet tackle.css icindeki
 * .tr-badge sinifidir. Ikinci bir kopya yazilsaydi "cok iyi eslesme" rengi
 * olta robotu sayfasinda bir, koleksiyon sayfasinda baska turlu olabilirdi.
 * Bu yuzden koleksiyon sayfalari tackle.css'i de bagliyor.
 *
 * Palet category-filter.css ile ayni ailedendir (ayni gri ve mavi tonlari),
 * ama degiskenler --sc-* onekiyle ayri durur: iki dosya birbirinden bagimsiz
 * yuklenebilir olmali.
 */

:root {
    --sc-border: #e5e7eb;
    --sc-border-strong: #d1d5db;
    --sc-text: #374151;
    --sc-text-strong: #111827;
    --sc-text-muted: #6b7280;
    --sc-text-faint: #9ca3af;
    --sc-accent: #0284c7;
    --sc-accent-hover: #0369a1;
    --sc-accent-soft: #e0f2fe;
    --sc-surface: #ffffff;
    --sc-surface-alt: #f9fafb;
    --sc-radius: 10px;
}

/* ==================================================================== makale */

/* NEDEN GENISLIK SINIRI YOK: 72ch sinirli govde, kategori listesinin ve
   koleksiyon kartlarinin altinda sagda genis bir bosluk birakiyordu ve sayfa
   yarim kalmis gorunuyordu. Makale artik kabinin tam genisligini kullaniyor,
   satir uzunlugu sayfa duzeninin kendi sutun genisligiyle belirleniyor. */
.seo-article {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sc-text);
}

.seo-article h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--sc-text-strong);
    margin: 28px 0 10px;
}

/* Blogun ilk basligi ustten bosluk almasin: bolumun kendi bosluğu var. */
.seo-article > h2:first-child,
.seo-article > h3:first-child {
    margin-top: 0;
}

.seo-article h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--sc-text-strong);
    margin: 20px 0 8px;
}

.seo-article p {
    margin: 0 0 14px;
}

.seo-article ul,
.seo-article ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.seo-article ul {
    list-style: disc;
}

.seo-article ol {
    list-style: decimal;
}

.seo-article li {
    margin: 4px 0;
}

.seo-article a {
    color: var(--sc-accent-hover);
    text-decoration: underline;
}

.seo-article a:hover {
    color: var(--sc-accent);
}

.seo-article strong {
    font-weight: 600;
    color: var(--sc-text-strong);
}

.seo-article em {
    font-style: italic;
}

/* ------------------------------------------------------ mobil kisaltma */

/*
 * NEDEN max-height (satir sayisi degil): -webkit-line-clamp cok satirli
 * KUTUYU kirpar, birden fazla paragraf ve baslik iceren bir makalede
 * calismaz. 11.5em yaklasik 7 satir; altindaki gradyan metnin kesildigini
 * gosterir.
 *
 * NEDEN max-width: 767px ICINDE: plan 2.2 kisaltmayi yalnizca MOBILDE
 * istiyor ("Mobilde ilk ~6 satir gorunur, Devamini oku"). Medya sorgusu
 * olmadan makale masaustunde de kirpiliyordu ve genis ekranda gereksiz bir
 * "Devamini oku" adimi cikiyordu. 767px, kategori sayfasinin geri kalaninin
 * kullandigi Tailwind md kiriliminin (768px) bir altidir.
 */
@media (max-width: 767px) {
    .seo-article--clamped {
        position: relative;
        max-height: 11.5em;
        overflow: hidden;
    }

    .seo-article--clamped::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4em;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sc-surface));
        pointer-events: none;
    }
}

/* Acilmis makale: kisit ve gradyan kalkar. */
.seo-article--open {
    max-height: none;
    overflow: visible;
}

.seo-article--open::after {
    content: none;
}

.seo-article__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px dokunma hedefi: yukseklik dolgudan degil min-height'tan gelir,
       boylece metin buyudugunde buton bozulmaz. */
    min-height: 44px;
    padding: 0 2px;
    margin-top: 4px;
    background: none;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-accent-hover);
    cursor: pointer;
}

.seo-article__more:hover {
    color: var(--sc-accent);
    text-decoration: underline;
}

/*
 * NEDEN AYRI [hidden] KURALI: yukaridaki "display: inline-flex" bir YAZAR
 * kurali, tarayicinin kendi "[hidden] { display: none }" kuralini yener.
 * Bu satir olmadan dugme, blade onu hidden basmis olsa bile (JS calisana
 * kadar ya da JS hic calismazsa) ekranda kaliyordu.
 */
.seo-article__more[hidden] {
    display: none;
}

/* ============================================== makale bolumu (kap) ======= */

/*
 * Rehber makalesinin sayfa icindeki kabi. Uc yerde ayni is: kategori
 * listesinin altinda (.seo-guide), anasayfanin altinda (.home-guide) ve
 * Olta Robotu dizininin altinda (.tr-guide).
 *
 * NEDEN UST CIZGI: makale listelerin ve kartlarin ALTINDA duruyor. Ayirici
 * olmadan urun izgarasinin devami gibi okunuyordu.
 */
.seo-guide,
.home-guide,
.tr-guide {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--sc-border);
}

@media (min-width: 768px) {
    .seo-guide,
    .home-guide,
    .tr-guide {
        margin-top: 36px;
        padding-top: 24px;
    }
}

/* ====================================================================== SSS */

/* Govde ile ayni gerekce: sag tarafta bosluk kalmasin. */
.seo-faq {
    max-width: none;
}

.seo-faq details {
    border-bottom: 1px solid var(--sc-border);
}

.seo-faq summary {
    font-size: 15px;
    font-weight: 600;
    color: var(--sc-text-strong);
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
}

/* Varsayilan ucgen isaretci yerine kendi artı/eksi isaretimiz. */
.seo-faq summary::-webkit-details-marker {
    display: none;
}

.seo-faq summary::after {
    content: "+";
    float: right;
    margin-left: 12px;
    font-weight: 400;
    color: var(--sc-text-muted);
}

.seo-faq details[open] summary::after {
    content: "\2212";
}

.seo-faq__answer {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sc-text);
    padding: 8px 0 14px;
}

.seo-faq__answer p:last-child {
    margin-bottom: 0;
}

/* ====================================================== koleksiyon sayfasi */

.tc-hero {
    margin-bottom: 20px;
}

.tc-hero__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--sc-text-strong);
    margin: 0 0 10px;
}

@media (min-width: 640px) {
    .tc-hero__title {
        font-size: 30px;
    }
}

.tc-section {
    margin-top: 28px;
}

.tc-section__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--sc-text-strong);
    margin: 0 0 12px;
}

/* ------------------------------------------------------- kart izgarasi */

.tc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .tc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tc-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

.tc-card__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.tc-card__link {
    color: var(--sc-text-strong);
    text-decoration: none;
}

.tc-card__link:hover {
    color: var(--sc-accent-hover);
}

.tc-card__meta {
    font-size: 13px;
    color: var(--sc-text-muted);
    margin: 0;
}

/* ----------------------------------------------------------- takim karti */

/*
 * Iki yari + ortada "+" ayraci. Dar ekranda yarilar alt alta gecer, ayrac
 * aralarinda kalir (tackle.css .tr-pair__combo ile ayni fikir, sade hali).
 */
.tc-pair {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: var(--sc-surface-alt);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}

.tc-pair__side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.tc-pair__kind {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}

.tc-pair__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1 / 1;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    overflow: hidden;
    color: var(--sc-text-faint);
}

.tc-pair__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tc-pair__noimg {
    width: 34px;
    height: 34px;
}

.tc-pair__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.tc-pair__name a {
    color: var(--sc-text-strong);
    text-decoration: none;
}

.tc-pair__name a:hover {
    color: var(--sc-accent-hover);
    text-decoration: underline;
}

.tc-pair__spec {
    font-size: 12.5px;
    color: var(--sc-text-muted);
    margin: 0;
}

.tc-pair__plus {
    flex: 0 0 auto;
    align-self: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--sc-text-faint);
}

.tc-pair__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--sc-text-muted);
}

/* -------------------------------------------------- kompakt set listesi */

/*
 * Vitrin takiminin altindaki varyant satirlari. AYNI bilesen hem hub
 * kartinda (dar kutu) hem koleksiyon sayfasinda (genis blok) kullaniliyor,
 * bu yuzden satir sabit sutun sayisina degil SARMAYA dayaniyor: genis
 * kapsayicida kamis + makine + rozet tek satira sigar, dar kapsayicida
 * kamis bir satira, makine ve rozet alt satira duser. Taban 210px, adlar
 * overflow-wrap ile kirilir, hicbir degeri kirpmayiz (urun kartiyla ayni
 * kural).
 *
 * OLCULEN GERCEK: hub kartinin ic genisligi 331 px (768) ile 377 px (1440)
 * arasinda, yani kartta iki oge HICBIR ekran genisliginde ayni satira
 * sigmiyor ve satir her zaman sariyor. Koleksiyon blogu 1440'ta tek satira
 * sigiyor, 375'te sariyor. Arti isareti bu yuzden satirin kardesi degil
 * makine ogesinin ILK COCUGU (bkz. set-list.blade.php): kardes oldugunda
 * kamis satirinin sag kenarinda, bosluga bakan bir arti olarak kaliyordu.
 */
.tc-sets {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sc-border);
}

.tc-sets__label {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-text-faint);
}

.tc-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sc-border);
}

.tc-set__item {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 210px;
    min-width: 0;
}

.tc-set__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    overflow: hidden;
    color: var(--sc-text-faint);
}

.tc-set__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tc-set__noimg {
    width: 18px;
    height: 18px;
}

.tc-set__name {
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--sc-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tc-set__name:hover {
    color: var(--sc-accent-hover);
    text-decoration: underline;
}

/*
 * Arti, makine ogesinin ilk cocugu. margin-left negatif degil: ogeler
 * arasindaki 8px bosluk zaten arti ile kamis adini ayiriyor, arti ile makine
 * gorseli arasinda ise ogenin kendi 7px gap'i var.
 */
.tc-set__plus {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-text-faint);
}

/* Rozet satirin sonunda: dar kapsayicida makine satirinin sagina duser. */
.tc-set__badge {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 10.5px;
    padding: 2px 7px;
}

.tc-sets__more {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-accent-hover);
    text-decoration: none;
}

.tc-sets__more:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------- senaryo bloklari */

.tc-block {
    padding: 14px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    margin-bottom: 14px;
}

.tc-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.tc-block__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--sc-text-strong);
    margin: 0;
}

.tc-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--sc-accent-soft);
    color: var(--sc-accent-hover);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tc-block__more {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-accent-hover);
    text-decoration: none;
}

.tc-block__more:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ bag listesi */

.tc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-links a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border-strong);
    border-radius: 999px;
    font-size: 14px;
    color: var(--sc-text);
    text-decoration: none;
}

.tc-links a:hover {
    border-color: var(--sc-accent);
    color: var(--sc-accent-hover);
}

.tc-note {
    font-size: 13px;
    color: var(--sc-text-muted);
    margin: 14px 0 0;
}

/* ------------------------------------------------------------- hareket */

/*
 * Yalnizca transform ve opacity: bu iki ozellik yerlesim hesabini yeniden
 * tetiklemez. Hareket azaltma istegi olan ziyaretcide hic calismaz.
 */
@media (prefers-reduced-motion: no-preference) {
    .tc-card,
    .tc-block__more,
    .tc-links a {
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .tc-card:hover {
        transform: translateY(-2px);
    }
}