/* =========================================================================
   İlaç görsel kimliği: farmasötik form ikonu, ATC ana grubuna göre renklendirilir.
   Ürün fotoğrafı yerine kullanılır; tamamı satır içi SVG (ek ağ isteği yok).
   ========================================================================= */

:root {
    /* ATC ana grup renkleri — açık tema (zemin / çizgi) */
    --atc-A-bg: #fdf1dd;  --atc-A-fg: #8a5a08;   /* sindirim sistemi */
    --atc-B-bg: #fdeceb;  --atc-B-fg: #a32218;   /* kan */
    --atc-C-bg: #fdeaf0;  --atc-C-fg: #a01f4c;   /* kalp damar */
    --atc-D-bg: #fdeee2;  --atc-D-fg: #94500b;   /* dermatoloji */
    --atc-G-bg: #fbe9f4;  --atc-G-fg: #93276e;   /* ürogenital */
    --atc-H-bg: #f3ecfb;  --atc-H-fg: #5b3596;   /* hormonlar */
    --atc-J-bg: #e6f0fd;  --atc-J-fg: #14508f;   /* antienfektif */
    --atc-L-bg: #efeafc;  --atc-L-fg: #4c34a3;   /* antineoplastik */
    --atc-M-bg: #e2f5f2;  --atc-M-fg: #12706a;   /* kas iskelet */
    --atc-N-bg: #e9ecfb;  --atc-N-fg: #33409b;   /* sinir sistemi */
    --atc-P-bg: #eef6e0;  --atc-P-fg: #4f6b12;   /* antiparaziter */
    --atc-R-bg: #e3f2fb;  --atc-R-fg: #145d80;   /* solunum */
    --atc-S-bg: #e0f5f7;  --atc-S-fg: #10646f;   /* duyu organları */
    --atc-V-bg: #eef0f0;  --atc-V-fg: #4a5555;   /* çeşitli */
    --atc-X-bg: var(--bg-sunken); --atc-X-fg: var(--text-subtle);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --atc-A-bg: #33260f;  --atc-A-fg: #e8bd72;
        --atc-B-bg: #351a17;  --atc-B-fg: #f0a59d;
        --atc-C-bg: #341725;  --atc-C-fg: #efa0bd;
        --atc-D-bg: #332012;  --atc-D-fg: #e9b483;
        --atc-G-bg: #311a2b;  --atc-G-fg: #eaa3d4;
        --atc-H-bg: #251d3a;  --atc-H-fg: #c4a9ef;
        --atc-J-bg: #142639;  --atc-J-fg: #93c4f2;
        --atc-L-bg: #211c3d;  --atc-L-fg: #b3a4f0;
        --atc-M-bg: #122e2c;  --atc-M-fg: #7fd3ca;
        --atc-N-bg: #1a1f3c;  --atc-N-fg: #a3aef0;
        --atc-P-bg: #212c12;  --atc-P-fg: #bcd581;
        --atc-R-bg: #132a37;  --atc-R-fg: #8ac6e5;
        --atc-S-bg: #112b2f;  --atc-S-fg: #7ecdd6;
        --atc-V-bg: #232929;  --atc-V-fg: #a8b3b3;
        --atc-X-bg: var(--bg-sunken); --atc-X-fg: var(--text-subtle);
    }
}

:root[data-theme="dark"] {
    --atc-A-bg: #33260f;  --atc-A-fg: #e8bd72;
    --atc-B-bg: #351a17;  --atc-B-fg: #f0a59d;
    --atc-C-bg: #341725;  --atc-C-fg: #efa0bd;
    --atc-D-bg: #332012;  --atc-D-fg: #e9b483;
    --atc-G-bg: #311a2b;  --atc-G-fg: #eaa3d4;
    --atc-H-bg: #251d3a;  --atc-H-fg: #c4a9ef;
    --atc-J-bg: #142639;  --atc-J-fg: #93c4f2;
    --atc-L-bg: #211c3d;  --atc-L-fg: #b3a4f0;
    --atc-M-bg: #122e2c;  --atc-M-fg: #7fd3ca;
    --atc-N-bg: #1a1f3c;  --atc-N-fg: #a3aef0;
    --atc-P-bg: #212c12;  --atc-P-fg: #bcd581;
    --atc-R-bg: #132a37;  --atc-R-fg: #8ac6e5;
    --atc-S-bg: #112b2f;  --atc-S-fg: #7ecdd6;
    --atc-V-bg: #232929;  --atc-V-fg: #a8b3b3;
    --atc-X-bg: var(--bg-sunken); --atc-X-fg: var(--text-subtle);
}

.drug-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--icon-bg, var(--bg-sunken));
    color: var(--icon-fg, var(--text-subtle));
    border: 1px solid color-mix(in srgb, var(--icon-fg, var(--text-subtle)) 18%, transparent);
}

.drug-icon svg { width: 60%; height: 60%; }

.drug-icon--sm { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.drug-icon--md { width: 44px; height: 44px; }
.drug-icon--lg { width: 72px; height: 72px; border-radius: var(--radius-lg); }

/* ATC grubu renk atamaları */
.drug-icon--atc-A { --icon-bg: var(--atc-A-bg); --icon-fg: var(--atc-A-fg); }
.drug-icon--atc-B { --icon-bg: var(--atc-B-bg); --icon-fg: var(--atc-B-fg); }
.drug-icon--atc-C { --icon-bg: var(--atc-C-bg); --icon-fg: var(--atc-C-fg); }
.drug-icon--atc-D { --icon-bg: var(--atc-D-bg); --icon-fg: var(--atc-D-fg); }
.drug-icon--atc-G { --icon-bg: var(--atc-G-bg); --icon-fg: var(--atc-G-fg); }
.drug-icon--atc-H { --icon-bg: var(--atc-H-bg); --icon-fg: var(--atc-H-fg); }
.drug-icon--atc-J { --icon-bg: var(--atc-J-bg); --icon-fg: var(--atc-J-fg); }
.drug-icon--atc-L { --icon-bg: var(--atc-L-bg); --icon-fg: var(--atc-L-fg); }
.drug-icon--atc-M { --icon-bg: var(--atc-M-bg); --icon-fg: var(--atc-M-fg); }
.drug-icon--atc-N { --icon-bg: var(--atc-N-bg); --icon-fg: var(--atc-N-fg); }
.drug-icon--atc-P { --icon-bg: var(--atc-P-bg); --icon-fg: var(--atc-P-fg); }
.drug-icon--atc-R { --icon-bg: var(--atc-R-bg); --icon-fg: var(--atc-R-fg); }
.drug-icon--atc-S { --icon-bg: var(--atc-S-bg); --icon-fg: var(--atc-S-fg); }
.drug-icon--atc-V { --icon-bg: var(--atc-V-bg); --icon-fg: var(--atc-V-fg); }
.drug-icon--atc-X { --icon-bg: var(--atc-X-bg); --icon-fg: var(--atc-X-fg); }

/* --- Yerleşim uyarlamaları --- */

/* Liste satırında ikon + metin */
.drug-row { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 560px) {
    .drug-row { grid-template-columns: auto minmax(0, 1fr); }
}

/* Kartta ikon üstte */
.drug-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

/* Detay sayfası başlığında büyük ikon */
.drug-hero__top {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.drug-hero__top .drug-hero__title { margin-bottom: 0; }

/* Arama önerilerinde küçük ikon */
.search__item { align-items: center; }
.search__item .drug-icon { margin-right: var(--sp-1); }

/* Formun görünür metni: ikonun taşıdığı bilgiyi arama motoruna da verir */
.drug-row__form {
    color: var(--icon-fg, var(--text-muted));
    font-weight: 550;
}

/* --- Etkin madde bloğu: moleküler yapı görseli + açıklama --- */
.ingredient-block {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
}
@media (max-width: 620px) {
    .ingredient-block { flex-direction: column; gap: var(--sp-4); }
}

.structure {
    flex-shrink: 0;
    width: 180px;
    margin: 0;
    text-align: center;
}
@media (max-width: 620px) {
    .structure { width: 100%; max-width: 240px; margin-inline: auto; }
}

.structure img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;              /* yapı çizimleri saydam/siyah çizgilidir */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-2);
}

.structure figcaption {
    margin-top: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
}
.structure figcaption span {
    display: block;
    color: var(--text-subtle);
    margin-top: 2px;
}