/* ============================================================
           İlaçAtlas — Apple tasarım dili
           SF tipografi ölçeği, sistem renk paleti, saydam sticky bar,
           segmented control, inset grouped list, sheet modal.
           Renk yalnızca veriyi taşır; sistem temasına uyar.
           ============================================================ */
        :root {
            color-scheme: light;

            /* Apple sistem renkleri — beyaz üzerinde okunabilir varyantlar */
            --blue:        #007AFF;
            --blue-press:  #0062CC;
            --blue-tint:   rgba(0, 122, 255, 0.10);
            --red:         #D70015;
            --green:       #248A3D;
            --orange:      #C93400;
            --purple:      #8944AB;

            /* Zeminler — hafif lavanta gri; yumuşak yüzey dili için
               düz nötr griden daha sıcak bir taban. */
            --bg-grouped:  #E7EAF0;
            --bg-elevated: #EFF2F7;
            --bg-raised:   #F4F6FA;
            --bg-fill:     rgba(118, 128, 152, 0.13);
            --bg-fill-2:   rgba(118, 128, 152, 0.08);
            --bg-fill-3:   rgba(118, 128, 152, 0.22);
            --bg-chrome:   rgba(231, 234, 240, 0.80);
            --bg-scrim:    rgba(20, 24, 34, 0.30);

            /* Etiket hiyerarşisi */
            --label:   #000000;
            --label-2: rgba(60, 60, 67, 0.60);
            --label-3: rgba(60, 60, 67, 0.30);
            --label-heading: rgba(60, 60, 67, 0.78);

            /* Ayırıcılar */
            --sep:        rgba(60, 60, 67, 0.20);
            --sep-opaque: #C6C6C8;

            /* Anlamsal durumlar */
            --warn-fg: #8A5B00;  --warn-bg: rgba(255, 159, 10, 0.12);  --warn-line: rgba(255, 159, 10, 0.30);
            --dang-fg: #D70015;  --dang-bg: rgba(255,  59, 48, 0.10);  --dang-line: rgba(255,  59, 48, 0.24);
            --info-fg: #0A5FCC;  --info-bg: rgba(  0, 122,255, 0.09);  --info-line: rgba(  0, 122,255, 0.24);
            --intr-fg: #7A3B96;  --intr-bg: rgba(137,  68,171, 0.10);  --intr-line: rgba(137,  68,171, 0.24);
            --ok-fg:   #248A3D;  --ok-bg:   rgba( 52, 199, 89, 0.12);  --ok-line:   rgba( 52, 199, 89, 0.28);

            /* Reçete sınıfı — mevzuata bağlı renk kodu */
            --rx-beyaz:   var(--sep-opaque);
            --rx-kisitli: var(--label-2);
            --rx-kirmizi: var(--red);
            --rx-yesil:   var(--green);
            --rx-turuncu: var(--orange);
            --rx-mor:     var(--purple);
            --rx-kontrol: var(--label);

            /* Marka işareti */
            --mark-bg: #1D1D1F;

            --r-control: 11px;
            --r-card:   16px;
            --r-sheet:  22px;
            --r-pill:  980px;

            /* Çift yönlü yumuşak gölge: sol üstten ışık, sağ alttan gölge.
               Yüzeyler kenarlık olmadan fiziksel duruyor.
               Yükselen = eyleme açık, çöken = veri girilen. Bu ayrım
               kasıtlı; neumorfizmin buton/kart belirsizliğini önlüyor. */
            --shadow-card:  -7px -7px 16px rgba(255, 255, 255, 0.90),
                             7px  7px 16px rgba(158, 172, 196, 0.42);
            --shadow-raise: -4px -4px 10px rgba(255, 255, 255, 0.85),
                             4px  4px 10px rgba(158, 172, 196, 0.40);
            --shadow-press: inset -2px -2px 5px rgba(255, 255, 255, 0.80),
                            inset  3px  3px 6px rgba(158, 172, 196, 0.45);
            --shadow-sunk:  inset -2px -2px 6px rgba(255, 255, 255, 0.75),
                            inset  3px  3px 7px rgba(158, 172, 196, 0.40);
            --shadow-seg:   var(--shadow-raise);
            --shadow-pop:   var(--shadow-raise);
            --shadow-sheet: -12px -12px 40px rgba(255, 255, 255, 0.55),
                             18px  22px 60px rgba(97, 112, 140, 0.40);

            --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
                    'JetBrains Mono', 'Roboto Mono', monospace;

            /* JS içindeki eski değişken adları için köprü */
            --text-primary:   var(--label);
            --text-secondary: var(--label-2);
            --text-muted:     var(--label-3);
            --border-color:   var(--sep);
            --ink-faint:      var(--label-3);
            --danger:         var(--red);
        }

        /* Koyu tema. Sistem tercihi <head> içindeki betikte çözülüp
           data-theme olarak yazılıyor; böylece kullanıcının açık/koyu
           seçimi işletim sistemini geçersiz kılabiliyor. */
        :root[data-theme="dark"] {
            color-scheme: dark;
            --blue:        #0A84FF;
            --blue-press:  #409CFF;
            --blue-tint:   rgba(10, 132, 255, 0.18);
            --red:         #FF453A;
            --green:       #30D158;
            --orange:      #FF9F0A;
            --purple:      #BF5AF2;

            --bg-grouped:  #131519;
            --bg-elevated: #1B1E24;
            --bg-raised:   #22262E;
            --bg-fill:     rgba(128, 138, 160, 0.20);
            --bg-fill-2:   rgba(128, 138, 160, 0.13);
            --bg-fill-3:   rgba(128, 138, 160, 0.32);
            --bg-chrome:   rgba(19, 21, 25, 0.80);
            --bg-scrim:    rgba(0, 0, 0, 0.55);

            --label:   #FFFFFF;
            --label-2: rgba(235, 235, 245, 0.60);
            --label-3: rgba(235, 235, 245, 0.30);
            --label-heading: rgba(235, 235, 245, 0.78);

            --sep:        rgba(84, 84, 88, 0.60);
            --sep-opaque: #38383A;

            --warn-fg: #FFB340;  --warn-bg: rgba(255, 159, 10, 0.16);  --warn-line: rgba(255, 159, 10, 0.32);
            --dang-fg: #FF6961;  --dang-bg: rgba(255,  69, 58, 0.16);  --dang-line: rgba(255,  69, 58, 0.32);
            --info-fg: #64B5FF;  --info-bg: rgba( 10, 132,255, 0.16);  --info-line: rgba( 10, 132,255, 0.32);
            --intr-fg: #D08BF5;  --intr-bg: rgba(191,  90,242, 0.16);  --intr-line: rgba(191,  90,242, 0.32);
            --ok-fg:   #30D158;  --ok-bg:   rgba( 48, 209,  88, 0.16); --ok-line:   rgba( 48, 209,  88, 0.32);

            --mark-bg: #2C2C2E;

            /* Koyuda sol üstten "ışık" işe yaramaz; üst kenara ince bir
               parlaklık, altına derin gölge. Çöken durum tersine döner. */
            --shadow-card:  inset 0 1px 0 rgba(255, 255, 255, 0.05),
                            0 10px 24px rgba(0, 0, 0, 0.55);
            --shadow-raise: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                            0 5px 14px rgba(0, 0, 0, 0.50);
            --shadow-press: inset 0 2px 6px rgba(0, 0, 0, 0.65),
                            inset 0 -1px 0 rgba(255, 255, 255, 0.04);
            --shadow-sunk:  inset 0 2px 7px rgba(0, 0, 0, 0.60),
                            inset 0 -1px 0 rgba(255, 255, 255, 0.04);
            --shadow-seg:   var(--shadow-raise);
            --shadow-pop:   var(--shadow-raise);
            --shadow-sheet: 0 30px 80px rgba(0, 0, 0, 0.72);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: var(--font);
            background: var(--bg-grouped);
            color: var(--label);
            min-height: 100vh;
            font-size: 15px;
            line-height: 1.47;
            letter-spacing: -0.01em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        a { color: var(--blue); text-decoration: none; }
        a:hover { text-decoration: underline; }
        ::selection { background: var(--blue-tint); }

        :focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.35);
            border-radius: var(--r-control);
        }

        .icon { width: 16px; height: 16px; flex-shrink: 0; }

        .hidden, [hidden] { display: none !important; }
        .view-section.hidden, .view-panel.hidden { display: none !important; }

        /* ---------- Saydam sticky app bar ---------- */
        /* Çubuk, kartlarla aynı kutuda duran bir şerit. Dış kaplama yalnızca
           konumlandırma yapar ve saydamdır; görünen yüzey .app-bar-inner'da,
           tam olarak kartların başladığı yerde başlayıp bittiği yerde biter.
           Yatay boşluk .container ile aynı (22px / mobilde 12px) -- ikisi
           ayrışırsa hizalama sessizce bozulur. */
        .app-bar {
            position: sticky; top: 0; z-index: 100;
            max-width: 1380px; margin: 0 auto;
            padding: 10px 22px 0;
            background: transparent;
            border-bottom: none;
            /* Kaplama saydam ama hâlâ 1380px'lik bir alan kaplıyor; şeridin
               yanındaki ve üstündeki boşluk, altından geçen içeriğin
               tıklamalarını yutardı. Tıklamalar yalnızca görünen yüzeye. */
            pointer-events: none;
        }
        .app-bar-inner { pointer-events: auto; }
        .app-bar-inner {
            padding: 9px 14px;
            background: var(--bg-chrome);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
            border: 1px solid var(--sep);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 14px;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            order: 1;
            min-width: 0;
            max-width: 100%;
        }
        .bar-tools { display: flex; align-items: center; gap: 8px; order: 2; flex-shrink: 0; }

        /* Sekmelerin komşusu, ama hap grubunun dışında: bir görünüm sekmesi
           gibi görünmemeli, çünkü görünüm değiştirmiyor. */
        .bar-icon-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; flex-shrink: 0;
            border: 1px solid var(--sep); border-radius: 10px;
            background: var(--bg-fill-2); color: var(--label-2);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .bar-icon-btn:hover { background: var(--bg-raised); color: var(--label); border-color: var(--blue); }
        .bar-icon-btn .icon { width: 17px; height: 17px; }

__SETTINGS_CSS__

        /* Segmented control */
        .segmented {
            display: inline-flex;
            align-items: center;
            padding: 3px;
            gap: 3px;
            background: var(--bg-fill-2);
            border-radius: 13px;
            box-shadow: var(--shadow-sunk);
            max-width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .segmented::-webkit-scrollbar { display: none; }
        .nav-tab-btn {
            border: none;
            background: transparent;
            border-radius: 10px;
            padding: 6px 12px;
            font-family: var(--font);
            font-size: 13px;
            font-weight: 500;
            letter-spacing: -0.005em;
            color: var(--label);
            cursor: pointer;
            transition: background 0.2s ease, box-shadow 0.2s ease;
            flex-shrink: 0;
            white-space: nowrap;
            user-select: none;
            -webkit-user-select: none;
        }
        .nav-tab-btn:hover:not(.active) { color: var(--label-2); }
        .nav-tab-btn.active {
            background: var(--bg-raised);
            box-shadow: var(--shadow-seg);
            font-weight: 600;
        }

        @media (max-width: 1120px) {
            .tab-long { display: none; }
        }

        .btn-export {
            background: var(--blue-tint); color: var(--blue);
            border: none; padding: 6px 13px; border-radius: var(--r-pill);
            font-family: var(--font); font-size: 13px; font-weight: 500;
            letter-spacing: -0.005em;
            cursor: pointer; text-decoration: none;
            display: inline-flex; align-items: center; gap: 5px;
            transition: background 0.15s ease;
        }
        .btn-export { box-shadow: var(--shadow-raise); }
        .btn-export:hover { background: rgba(0, 122, 255, 0.18); text-decoration: none; }
        .btn-export:active { box-shadow: var(--shadow-press); }
        .btn-export .icon { width: 14px; height: 14px; }

        /* Tema anahtarı: üç durumlu, ikon boyutunda segmented control */
        .theme-switch { padding: 2px; gap: 2px; border-radius: 11px; }
        .theme-btn {
            border: none; background: transparent;
            width: 28px; height: 26px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--label-2); cursor: pointer;
            transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
        }
        .theme-btn .icon { width: 15px; height: 15px; }
        .theme-btn:hover { color: var(--label); }
        .theme-btn.active {
            background: var(--bg-raised);
            box-shadow: var(--shadow-seg);
            color: var(--label);
        }

        /* ---------- Gövde ---------- */
        .container { max-width: 1380px; margin: 0 auto; padding: 22px 22px 64px; }

        /* ---------- Yasal uyarı ---------- */
        .disclaimer-banner {
            display: flex; align-items: flex-start; gap: 10px;
            background: var(--warn-bg);
            border: 1px solid var(--warn-line);
            border-radius: var(--r-card);
            padding: 11px 15px;
            margin-bottom: 18px;
            font-size: 13px; color: var(--warn-fg); line-height: 1.45;
        }
        .disclaimer-banner .db-icon { color: var(--warn-fg); margin-top: 1px; display: flex; }
        .disclaimer-banner .db-icon .icon { width: 15px; height: 15px; }
        .disclaimer-banner strong { font-weight: 590; }

        /* ---------- İstatistikler ---------- */
        .stats-grid {
            display: flex; flex-wrap: wrap;
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            margin-bottom: 18px;
            overflow: hidden;
        }
        .stat-card {
            flex: 1 1 170px;
            padding: 14px 20px;
            display: flex; flex-direction: column; gap: 1px;
            position: relative;
        }
        .stat-card + .stat-card::before {
            content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
            width: 1px; background: var(--sep);
        }
        .stat-val {
            font-size: 26px; font-weight: 600; color: var(--label);
            line-height: 1.1; letter-spacing: -0.022em;
            font-variant-numeric: tabular-nums;
        }
        .stat-lbl {
            font-size: 12px; color: var(--label-2); letter-spacing: 0;
        }

        /* ---------- Ana Sayfa Hero & Modern Arama ---------- */
        .home-hero-header {
            text-align: center;
            padding: 36px 16px 26px;
            margin: 0 auto;
            max-width: 820px;
        }
        .home-hero-title {
            font-size: 38px;
            font-weight: 700;
            letter-spacing: -0.035em;
            color: var(--label);
            margin: 0 0 8px;
            line-height: 1.15;
        }
        .home-hero-title .brand-thin {
            font-weight: 300;
            color: var(--blue);
        }
        .home-hero-subtitle {
            font-size: 17px;
            font-weight: 600;
            color: var(--blue);
            margin-bottom: 8px;
            letter-spacing: -0.01em;
        }
        .home-hero-desc {
            font-size: 14.5px;
            color: var(--label-2);
            margin: 0;
            line-height: 1.45;
        }
        .home-hero-active .filter-row,
        .home-hero-active .rx-legend {
            display: none !important;
        }

        /* ---------- Arama ---------- */
        .search-container {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            padding: 18px 20px;
            margin-bottom: 18px;
        }
        .search-main-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .search-main-input-wrap .search-icon {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            color: var(--label-3); display: flex; pointer-events: none;
        }
        .search-main-input {
            width: 100%;
            background: var(--bg-fill-2);
            border: none;
            box-shadow: var(--shadow-sunk);
            border-radius: var(--r-control);
            padding: 12px 115px 12px 42px;
            color: var(--label);
            font-family: var(--font);
            font-size: 15px; letter-spacing: -0.01em;
            outline: none;
            transition: box-shadow 0.15s ease, background 0.15s ease;
        }
        .search-main-input::placeholder { color: var(--label-3); }
        .search-main-input:focus {
            box-shadow: var(--shadow-sunk), 0 0 0 4px rgba(0, 122, 255, 0.30);
            background: var(--bg-raised);
        }

        .btn-search-submit {
            position: absolute;
            right: 44px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--blue);
            color: #ffffff;
            border: none;
            border-radius: 7px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease;
            box-shadow: var(--shadow-raise);
            z-index: 2;
        }
        .btn-search-submit:hover {
            background: var(--blue-press);
        }
        .btn-search-submit:active {
            transform: translateY(-50%) scale(0.96);
            box-shadow: var(--shadow-press);
        }

        .btn-voice-search {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: transparent; border: none;
            border-radius: 7px; width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            color: var(--label-2); cursor: pointer;
            font-size: 16px; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
            z-index: 2;
        }
        .btn-voice-search:hover { background: var(--blue-tint); color: var(--blue); }
        .btn-voice-search:active { transform: translateY(-50%) scale(0.92); }
        .btn-voice-search.is-listening {
            background: var(--dang-bg); color: var(--red);
            box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.35);
            animation: voicePulse 1.2s infinite ease-in-out;
        }
        @keyframes voicePulse {
            0% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4); }
            50% { transform: translateY(-50%) scale(1.08); box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
            100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
        }

        .voice-visualizer {
            position: absolute; right: 105px; top: 50%; transform: translateY(-50%);
            display: flex; align-items: center; gap: 7px;
            padding: 3px 10px;
            background: var(--dang-bg);
            border: 1px solid var(--dang-line);
            border-radius: 20px;
            color: var(--dang-fg);
            font-size: 11.5px; font-weight: 600;
            z-index: 2; pointer-events: none;
        }

        /* ---------- Hızlı Erişim & Karar Destek Kartları ---------- */
        .quick-access-section {
            margin: 20px 0 26px;
        }
        .quick-access-title {
            font-size: 12px;
            font-weight: 650;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--label-heading);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .quick-access-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .qa-chip {
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            color: var(--label);
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 550;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: var(--shadow-raise);
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .qa-chip:hover {
            border-color: var(--blue);
            color: var(--blue);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
        }
        .qa-chip:active {
            transform: translateY(1px);
            box-shadow: var(--shadow-press);
        }

        /* Bugün Ne Yapmak İstiyorsunuz? 3 Büyük Kart */
        .intent-hub-section {
            margin: 28px 0 24px;
        }
        .intent-hub-heading {
            font-size: 18px;
            font-weight: 700;
            color: var(--label);
            margin-bottom: 16px;
            letter-spacing: -0.015em;
        }
        .intent-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 18px;
        }
        .intent-card {
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            border-radius: 14px;
            padding: 22px 20px;
            cursor: pointer;
            box-shadow: var(--shadow-card);
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .intent-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            border-color: var(--blue);
        }
        .intent-card:active {
            transform: translateY(-1px);
        }
        .intent-card-icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .icon-blue { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
        .icon-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
        .icon-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }

        .intent-card-content h3,
        .intent-card-content h2 {
            font-size: 16.5px;
            font-weight: 700;
            color: var(--label);
            margin: 0 0 6px;
            letter-spacing: -0.01em;
        }
        .intent-card-content p {
            font-size: 13.5px;
            color: var(--label-2);
            line-height: 1.45;
            margin: 0 0 14px;
        }
        .intent-card-action {
            font-size: 13px;
            font-weight: 650;
            color: var(--blue);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Minimalist Popüler Senaryolar */
        .sp-minimal-examples {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            padding-top: 14px;
            margin-top: 20px;
            border-top: 1px solid var(--sep);
        }
        .sp-min-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--label-2);
        }
        .sp-min-chip {
            background: var(--bg-fill);
            border: 1px solid transparent;
            color: var(--label-2);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .sp-min-chip:hover {
            background: var(--blue-tint);
            color: var(--blue);
            border-color: var(--blue);
        }
        .voice-visualizer.hidden { display: none !important; }
        .voice-rec-dot {
            width: 7px; height: 7px; background: #e53935;
            border-radius: 50%;
            animation: blink 0.8s infinite alternate;
        }
        .voice-wave-bars {
            display: flex; align-items: center; gap: 2.5px;
            height: 14px;
        }
        .wave-bar {
            width: 2.5px; height: 4px; background: #e53935;
            border-radius: 1.5px;
            transition: height 0.08s ease;
            animation: waveAnim 1s ease-in-out infinite;
        }
        .wave-bar:nth-child(1) { animation-delay: 0.0s; }
        .wave-bar:nth-child(2) { animation-delay: 0.2s; }
        .wave-bar:nth-child(3) { animation-delay: 0.4s; }
        .wave-bar:nth-child(4) { animation-delay: 0.1s; }
        .wave-bar:nth-child(5) { animation-delay: 0.3s; }
        @keyframes waveAnim {
            0%, 100% { height: 4px; }
            50% { height: 13px; }
        }
        @keyframes blink {
            0% { opacity: 0.25; }
            100% { opacity: 1.0; }
        }

        .search-hints-bar {
            display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
            margin-top: 10px; padding: 2px 0;
        }
        .hints-title {
            font-size: 11.5px; font-weight: 600; color: var(--label-2);
            text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px;
        }
        .hint-pill {
            background: var(--bg-fill-2); border: 1px solid var(--sep);
            color: var(--label); padding: 4px 10px; border-radius: var(--r-pill);
            font-size: 12px; font-weight: 500; cursor: pointer;
            display: inline-flex; align-items: center; gap: 5px;
            transition: all 0.15s ease;
        }
        .hint-pill:hover {
            background: var(--blue-tint); color: var(--blue); border-color: rgba(0, 122, 255, 0.3);
            transform: translateY(-1px);
        }
        .hint-pill:active { transform: translateY(0); }
        .hint-pill.hint-pill-tag {
            background: var(--bg-raised); color: var(--label-2); font-family: var(--font-mono); font-size: 11.5px;
        }

        .search-tip {
            font-size: 12px; color: var(--label-2); margin-top: 9px;
            display: flex; gap: 3px 18px; flex-wrap: wrap; align-items: baseline;
            letter-spacing: 0;
        }
        .search-tip > span { color: var(--label); font-weight: 600; }
        .search-tip code {
            font-family: var(--font-mono); font-size: 11px;
            background: var(--bg-fill); border-radius: 5px; padding: 1px 5px;
            color: var(--label-2);
        }

        /* ---------- Filtreler ---------- */
        .filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
        .filter-select {
            -webkit-appearance: none; appearance: none;
            background-color: var(--bg-raised);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%238E8E93' d='M5 0.8 8.2 4.6H1.8zM5 13.2 1.8 9.4h6.4z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 9px center;
            border: none;
            box-shadow: var(--shadow-pop);
            color: var(--label);
            padding: 6px 28px 6px 11px; border-radius: 7px;
            font-family: var(--font); font-size: 13px; font-weight: 400;
            letter-spacing: -0.005em;
            outline: none; cursor: pointer;
        }
        .filter-select:focus { box-shadow: var(--shadow-pop), 0 0 0 4px rgba(0, 122, 255, 0.30); }
        .filter-select:active { box-shadow: var(--shadow-press); }
        /* Varsayılan dışında bir değer seçiliyse liste de mavi görünür.
           "Tüm Formlar" ile "Tablet" arasındaki fark, aksi hâlde yalnızca
           okunarak anlaşılıyordu. */
        .filter-select.is-set {
            background-color: var(--blue); color: #fff; font-weight: 500;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%23FFFFFF' d='M5 0.8 8.2 4.6H1.8zM5 13.2 1.8 9.4h6.4z'/%3E%3C/svg%3E");
        }
        .filter-select.is-set option { background-color: var(--bg-raised); color: var(--label); }
        .btn-reset {
            background: none; border: none;
            color: var(--blue); padding: 6px 4px;
            font-family: var(--font); font-size: 13px; font-weight: 400;
            cursor: pointer; margin-left: auto;
        }
        .btn-reset:hover { text-decoration: underline; }

        /* ---------- Reçete sınıfı lejantı ---------- */
        .rx-legend {
            display: flex; flex-wrap: wrap; gap: 5px 16px; align-items: center;
            margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sep);
        }
        .rx-legend .legend-label {
            font-size: 11.5px; font-weight: 600; color: var(--label-heading);
            text-transform: uppercase; letter-spacing: 0.05em;
        }
        .rx-legend .rx-chip { margin-top: 0; }

        /* ---------- Etkin madde hub ---------- */
        .ingredient-hub-card {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            padding: 16px 18px; margin-bottom: 14px;
        }
        .ingredient-hub-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
        }
        .ingredient-title {
            font-size: 17px; font-weight: 600; color: var(--label);
            letter-spacing: -0.018em;
            display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
        }
        .ingredient-title .ing-label {
            font-size: 11.5px; font-weight: 600; color: var(--label-heading);
            text-transform: uppercase; letter-spacing: 0.05em;
        }
        .ingredient-badge-count {
            background: var(--bg-fill); color: var(--label-2);
            padding: 2px 9px; border-radius: var(--r-pill);
            font-size: 12px; font-weight: 500; letter-spacing: 0;
        }
        .preparations-chip-container { display: flex; flex-wrap: wrap; gap: 6px; }
        .prep-chip {
            background: var(--bg-fill-2);
            border: none;
            color: var(--label);
            padding: 6px 12px; border-radius: var(--r-pill);
            font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
            cursor: pointer; display: flex; align-items: baseline; gap: 7px;
            transition: background 0.15s ease;
        }
        .prep-chip:hover { background: var(--blue-tint); color: var(--blue); }
        .prep-chip .chip-meta { color: var(--label-2); font-size: 12px; font-weight: 400; }
        .prep-chip .chip-price {
            font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums;
        }
        .prep-chip.is-combo { box-shadow: inset 0 0 0 1px var(--purple); }
        .comb-section-title {
            font-size: 11.5px; font-weight: 600; color: var(--label-heading);
            text-transform: uppercase; letter-spacing: 0.05em;
            margin-top: 16px; margin-bottom: 8px;
        }

        /* ---------- Tablo: inset grouped list ---------- */
        .table-wrapper {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            overflow: hidden;
        }
        table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; }
        th {
            background: transparent; color: var(--label-heading);
            font-weight: 600; font-size: 11.5px;
            text-transform: uppercase; letter-spacing: 0.05em;
            padding: 12px 16px 8px;
            border-bottom: 1px solid var(--sep);
            white-space: nowrap;
        }
        td {
            padding: 11px 16px; border-bottom: 1px solid var(--sep);
            color: var(--label); vertical-align: top;
            letter-spacing: -0.005em;
        }
        tbody tr { cursor: pointer; transition: background 0.12s ease; }
        tbody tr:hover { background: var(--bg-fill-2); }
        tbody tr:last-child td { border-bottom: none; }
        tbody tr > td:first-child { position: relative; padding-left: 20px; }

        .med-name { font-weight: 590; color: var(--label); font-size: 13.5px; letter-spacing: -0.01em; }
        .med-sub-info { font-size: 12px; color: var(--label-2); margin-top: 1px; }
        .cell-ingredient { color: var(--label); font-weight: 400; }
        .cell-form { color: var(--label-2); }
        .cell-dim { color: var(--label-3); }
        .cell-posology { font-size: 12px; color: var(--label-2); display: block; margin-top: 3px; }

        /* Reçete sınıfı: macOS kenar çubuğu seçim göstergesi gibi kapsül şerit */
        tr[class*="rx-"] > td:first-child::before {
            content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px;
            width: 3px; border-radius: 1.5px; background: var(--rx-color, transparent);
        }
        tr.rx-beyaz   { --rx-color: var(--rx-beyaz); }
        tr.rx-kisitli { --rx-color: var(--rx-kisitli); }
        tr.rx-kirmizi { --rx-color: var(--rx-kirmizi); }
        tr.rx-yesil   { --rx-color: var(--rx-yesil); }
        tr.rx-turuncu { --rx-color: var(--rx-turuncu); }
        tr.rx-mor     { --rx-color: var(--rx-mor); }
        tr.rx-kontrol { --rx-color: var(--rx-kontrol); }
        /* Reçetesiz bir reçete sınıfı değil — şerit almaz. */

        .rx-chip {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11.5px; font-weight: 400; color: var(--label-2);
            white-space: nowrap; margin-top: 4px; letter-spacing: 0;
        }
        .rx-chip::before {
            content: ''; width: 7px; height: 7px; border-radius: 50%;
            box-shadow: inset 0 0 0 1px var(--sep-opaque);
            background: var(--bg-elevated); flex-shrink: 0;
        }
        .rx-chip.rx-kisitli::before { background: var(--label-2); box-shadow: none; }
        .rx-chip.rx-kirmizi::before { background: var(--red);     box-shadow: none; }
        .rx-chip.rx-yesil::before   { background: var(--green);   box-shadow: none; }
        .rx-chip.rx-turuncu::before { background: var(--orange);  box-shadow: none; }
        .rx-chip.rx-mor::before     { background: var(--purple);  box-shadow: none; }
        .rx-chip.rx-kontrol::before { background: var(--label);   box-shadow: none; }
        .rx-chip.rx-otc::before     { display: none; }
        .rx-chip.rx-otc { color: var(--label-2); font-style: italic; }

        /* Etiketler */
        .tag {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 8px; border-radius: var(--r-pill);
            font-size: 11.5px; font-weight: 500; white-space: nowrap;
            letter-spacing: 0;
        }
        .cell-atc { margin-top: 3px; }
        .tag-atc {
            background: var(--bg-fill); color: var(--label-2);
            font-family: var(--font-mono); font-size: 11px;
        }
        /* TİTCK'nin e-reçete pasif listesindeki ürün: hâlâ aranabilir --
           hasta elindeki kutuyu sorabilir -- ama reçete edilemeyeceği
           görünmeden geçmemeli. */
        .tag-withdrawn {
            background: var(--dang-bg); color: var(--dang-fg); font-weight: 600;
        }
        /* Deliberately not a warning colour. It marks what the register does
           not say about a barcode, not something wrong with the product. */
        .tag-unverified {
            background: var(--bg-fill-2); color: var(--label-2);
            font-weight: 500; border: 1px solid var(--sep);
        }
        .tag-preg-safe    { background: var(--ok-bg);   color: var(--ok-fg); }
        .tag-preg-caution { background: var(--warn-bg); color: var(--warn-fg); }
        .tag-preg-risk    { background: var(--dang-bg); color: var(--dang-fg); }
        .tag-price {
            font-weight: 500; color: var(--label);
            font-variant-numeric: tabular-nums; white-space: nowrap;
        }
        .tag-doc {
            display: inline-flex; align-items: center; gap: 4px;
            color: var(--blue); text-decoration: none;
            font-size: 12.5px; font-weight: 400; margin-right: 12px;
        }
        .tag-doc:hover { text-decoration: underline; }

        .pagination-container {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 16px; border-top: 1px solid var(--sep);
            font-size: 12.5px; color: var(--label-2);
            font-variant-numeric: tabular-nums;
        }
        .pagination-btns { display: flex; gap: 8px; }
        .btn-page {
            background: var(--bg-raised); border: none;
            box-shadow: var(--shadow-pop);
            color: var(--label); padding: 5px 14px; border-radius: 7px;
            font-family: var(--font); font-size: 13px; font-weight: 400; cursor: pointer;
        }
        .btn-page:active:not(:disabled) { box-shadow: var(--shadow-press); }
        .btn-page:disabled { opacity: 0.45; cursor: default; box-shadow: var(--shadow-sunk); background: var(--bg-fill-2); }

        /* ---------- PWA & Offline Indicator ---------- */
        .offline-banner {
            background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
            color: #ffffff;
            text-align: center;
            padding: 10px 18px;
            font-size: 13.5px;
            font-weight: 600;
            border-bottom: 1px solid rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
            z-index: 99;
        }
        .offline-banner.hidden { display: none !important; }
        .btn-install-pwa {
            background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .btn-install-pwa:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(2, 132, 199, 0.4);
        }
        .btn-install-pwa:active {
            transform: translateY(1px);
        }
        .btn-install-pwa.hidden { display: none !important; }
        /* Not the withdrawn red: the product is fine, the sentence quoted
           beside it is the thing that does not say what the row implies. */
        .tag-negative-evidence {
            background: var(--warn-bg); color: var(--warn-fg); font-weight: 600;
        }
        .icd-evidence-source {
            margin-top: 3px; font-size: 11.5px; color: var(--label-2);
        }
        .ddi-quote-source {
            margin-top: 3px; font-size: 11.5px; color: var(--label-2);
            line-height: 1.4;
        }
__API_CTA_CSS__

        /* ---------- Sheet modal ---------- */
        .modal-backdrop {
            position: fixed; inset: 0;
            background: var(--bg-scrim);
            -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
            z-index: 1000; display: none; align-items: flex-start; justify-content: center;
            padding: 44px 20px;
        }
        .modal-card {
            background: var(--bg-elevated);
            border-radius: var(--r-sheet);
            max-width: 880px; width: 100%; max-height: calc(100vh - 88px);
            display: flex; flex-direction: column; overflow: hidden;
            box-shadow: var(--shadow-sheet);
            animation: sheetIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        }
        @keyframes sheetIn {
            from { opacity: 0; transform: translateY(14px) scale(0.99); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .modal-header {
            padding: 16px 22px;
            background: var(--bg-chrome);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid var(--sep);
            display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
        }
        .modal-title-wrap h2 {
            font-size: 20px; font-weight: 600; color: var(--label); line-height: 1.25;
            letter-spacing: -0.021em;
        }
        .modal-title-wrap p {
            font-size: 12.5px; color: var(--label-2); margin-top: 3px; letter-spacing: 0;
        }
        .modal-close {
            background: var(--bg-raised); border: none;
            box-shadow: var(--shadow-raise);
            color: var(--label-2); width: 28px; height: 28px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 15px;
            cursor: pointer; flex-shrink: 0; line-height: 1;
        }
        .modal-close:hover { color: var(--label); }
        .modal-close:active { box-shadow: var(--shadow-press); }
        .modal-body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
        /* Gövde zaten kayıyor; overflow taşıyan ızgaralar min-height korumasını
           kaybettiği için hiçbir bölüm sıkışmamalı. */
        .modal-body > * { flex-shrink: 0; }

        .modal-rx { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
        .modal-rx .rx-chip { font-size: 13px; margin-top: 0; font-weight: 500; color: var(--label); }
        .modal-rx .rx-raw { font-size: 12.5px; color: var(--label-2); }

        .modal-disclaimer {
            background: var(--warn-bg);
            border: 1px solid var(--warn-line);
            border-radius: var(--r-control);
            padding: 10px 14px;
            font-size: 12.5px; color: var(--warn-fg); line-height: 1.45;
        }

        /* ---------- Klinik karar kartları ---------- */
        .clinical-decision-hero {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            background: var(--bg-elevated);
            border-radius: var(--r-card); overflow: hidden;
        }
        .clinical-card {
            background: var(--bg-elevated);
            box-shadow: 0 0 0 0.5px var(--sep);
            padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
        }
        .clinical-card-header {
            display: flex; align-items: center; gap: 7px; font-size: 11.5px;
            font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--label-heading);
        }
        .clinical-card-header::before {
            content: ''; width: 6px; height: 6px; border-radius: 50%;
            background: var(--sep-opaque); flex-shrink: 0;
        }
        .clinical-card-body { font-size: 14px; line-height: 1.45; color: var(--label); letter-spacing: -0.01em; }
        .card-pregnancy .clinical-card-header::before { background: var(--red); }
        .card-lactation .clinical-card-header::before { background: var(--purple); }
        .card-posology  .clinical-card-header::before { background: var(--blue); }
        .card-organ     .clinical-card-header::before { background: var(--orange); }

        .alert-box { border-radius: var(--r-card); padding: 13px 16px; }
        .alert-box .alert-title {
            font-weight: 590; font-size: 11px; margin-bottom: 4px;
            text-transform: uppercase; letter-spacing: 0.05em;
        }
        .alert-box .alert-body { font-size: 14px; line-height: 1.45; color: var(--label); letter-spacing: -0.01em; }
        .alert-danger { background: var(--dang-bg); border: 1px solid var(--dang-line); }
        .alert-danger .alert-title { color: var(--dang-fg); }
        .alert-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
        .alert-warn .alert-title { color: var(--warn-fg); }
        .alert-info { background: var(--info-bg); border: 1px solid var(--info-line); }
        .alert-info .alert-title { color: var(--info-fg); }
        .alert-interaction { background: var(--intr-bg); border: 1px solid var(--intr-line); }
        .alert-interaction .alert-title { color: var(--intr-fg); }

        /* Which KÜB section the text below was quoted from. Every clinical
           value on this screen is lifted from the document, and the badge is
           what lets a physician check it against the PDF. */
        .alert-title .alert-src {
            font-weight: 500; font-size: 10px; letter-spacing: 0.03em;
            color: var(--label-2); text-transform: none; margin-left: 6px;
        }

        /* Fiyat şeridi: kazınan fiyat ile yayımlanmış liste yan yana, her
           değerin altında nereden geldiği. Türetilmiş bir "SGK fiyatı"
           hesaplanmıyor -- SUT geri ödemesi perakende eksi iskonto değil. */
        .price-strip {
            display: flex; flex-wrap: wrap; gap: 0;
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 4px;
        }
        .price-cell {
            flex: 1 1 128px; min-width: 0; padding: 12px 16px;
            box-shadow: 0 0 0 0.5px var(--sep);
        }
        .price-k {
            font-size: 10.5px; font-family: var(--font-mono);
            letter-spacing: 0.05em; text-transform: uppercase;
            color: var(--label-2); margin-bottom: 3px;
        }
        .price-v {
            font-size: 17px; font-weight: 590; color: var(--label);
            letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
        }
        .price-cell.is-note { flex: 1 1 168px; }
        .price-src { font-size: 13px; color: var(--label-2); letter-spacing: -0.005em; }
        .price-flag {
            flex: 1 1 100%; padding: 10px 16px; font-size: 13px;
            background: var(--warn-bg); color: var(--warn-fg);
            box-shadow: 0 0 0 0.5px var(--sep);
        }

        /* --- Klinik gruplar --- */
        .group-section { margin-bottom: 26px; }
        .group-section .section-heading { display: flex; align-items: center; gap: 8px; }
        .group-main-code {
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; border-radius: 6px;
            background: var(--blue-tint); color: var(--blue);
            font-family: var(--font-mono); font-size: 12px; font-weight: 600;
        }

        .group-hub {
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: var(--shadow-card); padding: 16px 18px; margin-bottom: 18px;
        }
        .group-hub-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 12px; margin-bottom: 12px;
        }
        .group-hub-title {
            font-size: 17px; font-weight: 600; color: var(--label);
            letter-spacing: -0.02em; margin-bottom: 2px;
        }
        .group-clear {
            flex-shrink: 0; border: none; cursor: pointer;
            background: var(--bg-fill-2); color: var(--label-2);
            border-radius: 8px; padding: 6px 11px; font-size: 12.5px;
            font-family: inherit; transition: background 0.12s ease, color 0.12s ease;
        }
        .group-clear:hover { background: var(--dang-bg); color: var(--dang-fg); }

        .group-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
        .group-atc-chip, .group-ing-chip {
            display: inline-flex; align-items: baseline; gap: 6px;
            background: var(--bg-raised); border-radius: 8px;
            padding: 5px 10px; font-size: 12.5px; color: var(--label-2);
            box-shadow: 0 0 0 0.5px var(--sep);
            border: none; cursor: pointer; font-family: inherit;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .group-atc-chip b, .group-ing-chip b { color: var(--label); font-weight: 590; }
        .group-atc-chip:hover, .group-ing-chip:hover { background: var(--blue-tint); color: var(--blue); }
        .group-atc-chip:hover b, .group-ing-chip:hover b { color: var(--blue); }

        /* Bir filtrenin açık olduğu, ekrana bakınca görülmeli. Seçili her
           öğe -- çip, kart, açılır liste -- aynı mavi işareti alır, çünkü
           hangisinin filtrelediğini hatırlamak kullanıcının işi değil. */
        .group-atc-chip.is-active, .group-ing-chip.is-active {
            background: var(--blue); color: #fff;
            box-shadow: 0 0 0 0.5px var(--blue);
        }
        .group-atc-chip.is-active b, .group-ing-chip.is-active b { color: #fff; }
        .group-atc-chip.is-active:hover, .group-ing-chip.is-active:hover {
            background: var(--blue); color: #fff;
        }
        .group-atc-chip.is-active:hover b, .group-ing-chip.is-active:hover b { color: #fff; }

        /* ICD-10 tanı sonuçları. Her ilaç satırı, o tanıyı anan kendi KÜB 4.1
           cümlesiyle birlikte gelir: burada iddia edilen tek şey "bu belge
           böyle diyor", ve hekimin tartacağı şey de o cümle. */
        .icd-hit {
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: 0 0 0 0.5px var(--sep); padding: 13px 16px; margin-bottom: 9px;
            cursor: pointer; transition: background 0.12s ease;
        }
        .icd-hit:hover { background: var(--bg-fill-2); }
        .icd-hit.is-active { background: var(--blue-tint); box-shadow: 0 0 0 1.5px var(--blue); }
        .icd-code {
            font-family: var(--font-mono); font-size: 12px; font-weight: 600;
            color: var(--blue); background: var(--blue-tint);
            border-radius: 6px; padding: 2px 7px; margin-right: 8px;
        }
        .icd-hit.is-active .icd-code { background: var(--blue); color: #fff; }
        .icd-title { font-size: 14.5px; font-weight: 500; color: var(--label); }
        .icd-synonym { font-size: 12px; color: var(--label-2); margin-top: 3px; }
        .icd-evidence {
            font-size: 12.5px; color: var(--label-2); line-height: 1.5;
            border-left: 2px solid var(--sep); padding-left: 10px; margin-top: 5px;
        }
        .icd-evidence mark {
            background: var(--warn-bg); color: var(--label);
            border-radius: 3px; padding: 0 2px;
        }
        .icd-med-row {
            display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
        }
        .icd-chapter-row {
            display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 16px;
        }
        /* KÜB metni ile TİTCK'nin ATC kodu aynı yeri gösteriyor mu. Renk
           hüküm vermiyor: kırmızı yok, çünkü "beklenmedik" yanlış demek
           değil -- astım için bir kortikosteroid ATC H'dir ve doğrudur. */
        .icd-agree-bar {
            display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 12px;
        }
        .tag-agree { font-family: var(--font-mono); font-size: 10.5px; }
        .tag-uyumlu      { background: var(--ok-bg);   color: var(--ok-fg); }
        .tag-beklenmedik { background: var(--warn-bg); color: var(--warn-fg); }
        .tag-belirsiz    { background: var(--bg-fill); color: var(--label-2); }
        /* Bu ilaç bu kodun kendisinden değil, altındaki bir koddan geliyor. */
        .tag-rollup {
            background: var(--bg-fill); color: var(--label-2);
            font-family: var(--font-mono); font-size: 10.5px;
        }
        /* İlacın kendi 4.1 metninin andığı tanılar, ilaç kartında. */
        .dx-row { display: flex; flex-wrap: wrap; gap: 7px; }
        .dx-chip {
            border: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
            background: var(--bg-raised); color: var(--label);
            box-shadow: 0 0 0 0.5px var(--sep);
            border-radius: 8px; padding: 6px 11px; text-align: left;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .dx-chip:hover { background: var(--blue-tint); color: var(--blue); }
        .dx-chip code {
            font-family: var(--font-mono); font-size: 11px;
            color: var(--label); margin-right: 6px;
        }
        .dx-chip:hover code { color: var(--blue); }
        .icd-chapter-row button {
            border: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
            background: var(--bg-raised); color: var(--label-2);
            box-shadow: 0 0 0 0.5px var(--sep);
            border-radius: 8px; padding: 6px 11px;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .icd-chapter-row button:hover { background: var(--blue-tint); color: var(--blue); }
        .icd-chapter-row button.is-active { background: var(--blue); color: #fff; }

        /* Arama kutusunun altındaki grup önerisi: yazılan terim bir klinik
           grubu adlandırıyorsa, tek tıkla o gruba geçiş sunulur. */
        .group-suggest {
            display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
            margin-top: 10px; font-size: 13px; color: var(--label-2);
        }
        .group-suggest button {
            border: none; cursor: pointer; font-family: inherit; font-size: 13px;
            background: var(--blue-tint); color: var(--blue);
            border-radius: 8px; padding: 5px 11px; font-weight: 500;
        }
        .group-suggest button:hover { background: var(--blue); color: #fff; }

        /* Yazılan söz bir ilaç adı değil bir sınıf adıysa, sonuçlara o sınıfın
           üyeleri de eklenir. Bunun sessizce olmaması gerekir: hekim ne
           aradığını değil, ne bulduğunu görmeli. */
        .class-notice {
            display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
            margin: 0 0 14px; padding: 10px 14px; font-size: 13px;
            background: var(--blue-tint); color: var(--label);
            border-radius: 10px;
        }
        .class-notice strong { font-weight: 600; }
        .notice-companies {
            font-weight: 600; color: var(--label); margin-left: auto;
            text-align: right;
        }
        /* Ruhsat sahibi bir bağlantıdır: aynı adı taşıyan ürünleri listeler.
           Satırın kendi metniyle aynı boyda kalır, altı çizili değildir --
           tabloda yüzlerce satır varsa altı çizili ad gürültü olur. */
        .company-link {
            border: none; background: none; padding: 0; margin: 0;
            font: inherit; color: inherit; cursor: pointer; text-align: left;
        }
        .company-link:hover, .company-link:focus-visible {
            color: var(--blue); text-decoration: underline;
        }
        .class-notice button {
            border: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
            background: transparent; color: var(--blue); font-weight: 500;
            text-decoration: underline; padding: 0; margin-left: auto;
        }

        .section-heading {
            font-size: 13.5px; font-weight: 600; color: var(--label);
            letter-spacing: -0.008em; margin-bottom: 10px;
        }

        .desc-box {
            background: var(--bg-fill-2);
            border-radius: var(--r-card);
            padding: 14px 16px;
            font-size: 14px; color: var(--label); line-height: 1.55;
            letter-spacing: -0.01em;
            max-height: 220px; overflow-y: auto;
        }

        .list-pill-container { display: flex; flex-wrap: wrap; gap: 7px; }
        .pill-item {
            background: var(--bg-fill-2); border: none;
            padding: 7px 13px; border-radius: var(--r-pill);
            font-family: var(--font); font-size: 13px; font-weight: 500;
            letter-spacing: -0.005em;
            color: var(--label); text-decoration: none;
            display: inline-flex; align-items: center; gap: 7px;
            cursor: pointer; transition: background 0.15s ease;
        }
        .pill-item:hover { background: var(--blue-tint); color: var(--blue); text-decoration: none; }
        .pill-item .pill-meta { color: var(--label-2); font-weight: 400; font-size: 12px; }
        .pill-item .pill-price {
            font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums;
        }
        .pill-item.is-action { background: var(--blue-tint); color: var(--blue); }
        .pill-item.is-action:hover { background: rgba(0, 122, 255, 0.18); }
        .pill-item .icon { width: 14px; height: 14px; }

        .doc-viewer-card {
            background: var(--bg-fill-2);
            border-radius: var(--r-card);
            padding: 18px; margin-top: 14px;
        }
        .doc-viewer-head {
            display: flex; justify-content: space-between; align-items: center; gap: 12px;
            margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--sep);
        }
        .doc-viewer-head .doc-label {
            font-weight: 590; color: var(--label); font-size: 15px; letter-spacing: -0.015em;
        }
        .doc-section-block {
            margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--sep);
        }
        .doc-section-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .doc-sec-title {
            font-size: 11.5px; font-weight: 600; color: var(--label-heading);
            text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
        }
        .doc-sec-body {
            font-size: 14px; color: var(--label); line-height: 1.55;
            letter-spacing: -0.01em; white-space: pre-line;
        }

        .empty-state { text-align: center; padding: 40px 20px; color: var(--label-2); font-size: 14px; }
        .view-section { display: block; }
        .view-section.hidden { display: none; }

        /* ---------- Etkin madde indeksi ---------- */
        .ing-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            background: var(--bg-elevated);
            border-radius: var(--r-card); overflow: hidden;
            box-shadow: var(--shadow-card);
        }
        /* Sunucudan gelen hub listeleri. JS'in doldurduğu kapsayıcıların
           dışında duruyorlar: oraya yazsaydım ilk fetch onların üzerine
           yazardı ve sayfa yine bağlantısız kalırdı. */
        .ssr-hub-list { margin-top: 22px; }
        a.ing-card { text-decoration: none; color: inherit; }
        a.ing-card:hover { text-decoration: none; }
        .ing-card.is-static { cursor: default; }

        .ing-card {
            background: var(--bg-elevated);
            box-shadow: 0 0 0 0.5px var(--sep);
            padding: 15px 17px; cursor: pointer;
            display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
            transition: background 0.12s ease;
            /* Bir grid öğesinin örtük en küçük genişliği min-content'tir, ve
               tek parça uzun bir metin izi kendi genişliğine açar. */
            min-width: 0;
        }
        .ing-card > * { min-width: 0; }
        .ing-card:hover { background: var(--bg-fill-2); }
        /* Katalogda hangi grubun açık olduğu görünsün. */
        .ing-card.is-active {
            background: var(--blue-tint);
            box-shadow: 0 0 0 1.5px var(--blue);
        }
        .ing-card.is-active .ing-name, .ing-card.is-active .ing-go { color: var(--blue); }
        .ing-name {
            font-size: 15px; font-weight: 590; color: var(--label);
            letter-spacing: -0.015em; margin-bottom: 3px;
        }
        .ing-details {
            font-size: 12px; color: var(--label-2); letter-spacing: 0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            overflow-wrap: anywhere;
        }
        .ing-details .ing-atc { font-family: var(--font-mono); color: var(--label-2); }
        .ing-card-foot { display: flex; justify-content: space-between; align-items: center; }
        .ing-card-foot .ing-go { color: var(--blue); font-size: 13px; font-weight: 400; }

        /* Arama yapılmadan önceki ekran. Boş bir tablo değil, bir soru. */
        /* Arama yapılmadan önceki kompakt hızlı başlangıç şeridi */
        .search-prompt {
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: var(--shadow-card); padding: 14px 18px;
            display: flex; flex-direction: column; gap: 10px;
            margin-bottom: 16px;
        }
        .sp-header-row {
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 6px;
        }
        .sp-title { font-size: 13.5px; font-weight: 650; color: var(--label); }
        .sp-hint { font-size: 12.5px; color: var(--label-2); }
        .sp-chips-row {
            display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        }
        .sp-chip {
            background: var(--bg-fill-2);
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            padding: 6px 12px;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--label);
            cursor: pointer;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .sp-chip:hover {
            background: var(--bg-fill);
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-1px);
        }

        /* ---------- Gelişmiş Hesaplayıcı Kartları ---------- */
        .calc-card-box {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            padding: 22px 24px;
            margin-bottom: 24px;
            border: 1px solid var(--sep);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .calc-card-box:hover {
            border-color: rgba(0, 122, 255, 0.35);
        }
        .calc-nav-chip {
            background: var(--bg-raised);
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            padding: 7px 16px;
            font-size: 13px;
            font-weight: 590;
            color: var(--label);
            cursor: pointer;
            box-shadow: var(--shadow-raise);
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .calc-nav-chip:hover {
            background: var(--blue-tint);
            border-color: var(--blue);
            color: var(--blue);
            transform: translateY(-1px);
        }
        .calc-nav-chip:active {
            box-shadow: var(--shadow-press);
            transform: translateY(1px);
        }

        /* ---------- Hızlı Reçete Not Defteri ---------- */
        .btn-add-rx {
            background: var(--bg-fill-2);
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            color: var(--label);
            padding: 3px 8px;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            box-shadow: var(--shadow-raise);
            transition: all 0.15s ease;
            white-space: nowrap;
        }
        .btn-add-rx:hover {
            background: var(--blue-tint);
            border-color: var(--blue);
            color: var(--blue);
            transform: scale(1.05);
        }
        .btn-add-rx.is-added {
            background: var(--ok-bg);
            border-color: var(--ok-line);
            color: var(--ok-fg);
        }

        .floating-rx-pad-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 999;
            background: var(--bg-elevated);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            padding: 10px 18px;
            box-shadow: var(--shadow-sheet);
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: var(--label);
            font-family: var(--font);
            font-size: 13.5px;
            font-weight: 600;
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .floating-rx-pad-btn:hover {
            transform: translateY(-3px) scale(1.03);
            border-color: var(--blue);
            box-shadow: 0 10px 30px rgba(0, 122, 255, 0.25);
        }
        .floating-rx-pad-btn:active {
            transform: translateY(0) scale(0.97);
        }
        .rx-pad-badge {
            background: var(--label-3);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: var(--r-pill);
            min-width: 18px;
            text-align: center;
            transition: all 0.2s ease;
        }
        .rx-pad-badge.has-items {
            background: var(--green);
        }

        /* Reçete Çekmecesi */
        .rx-drawer-backdrop {
            position: fixed;
            inset: 0;
            background: var(--bg-scrim);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            transition: opacity 0.25s ease;
        }
        .rx-drawer-card {
            background: var(--bg-elevated);
            width: 100%;
            max-width: 480px;
            height: 100%;
            box-shadow: var(--shadow-sheet);
            display: flex;
            flex-direction: column;
            animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            border-left: 1px solid var(--sep);
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); }
            to   { transform: translateX(0); }
        }
        .rx-drawer-head {
            padding: 16px 20px;
            background: var(--bg-chrome);
            border-bottom: 1px solid var(--sep);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .rx-drawer-title-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .rx-drawer-title-group h3 {
            font-size: 16px;
            font-weight: 650;
            color: var(--label);
            margin: 0;
        }
        .rx-drawer-title-group p {
            font-size: 12px;
            color: var(--label-2);
            margin: 2px 0 0;
        }
        .rx-drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .rx-item-card {
            background: var(--bg-raised);
            border: 1px solid var(--sep);
            border-radius: var(--r-card);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: var(--shadow-raise);
            transition: all 0.15s ease;
        }
        .rx-item-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }
        .rx-item-name {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--label);
        }
        .rx-item-ing {
            font-size: 12px;
            color: var(--label-2);
        }
        .rx-item-remove {
            background: transparent;
            border: none;
            color: var(--label-3);
            cursor: pointer;
            font-size: 14px;
            padding: 2px;
            line-height: 1;
        }
        .rx-item-remove:hover {
            color: var(--red);
        }
        .rx-item-dose-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }
        .rx-item-dose-select {
            flex: 1;
            font-size: 12px;
            padding: 5px 8px;
            border-radius: 6px;
            background: var(--bg-fill);
            color: var(--label);
            border: 1px solid var(--sep);
        }
        .rx-drawer-foot {
            padding: 16px 20px;
            background: var(--bg-chrome);
            border-top: 1px solid var(--sep);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .rx-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--label);
        }
        .rx-actions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        /* ---------- Bildirim (Toast) Mesajları ---------- */
        .toast-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }
        .toast-msg {
            background: var(--bg-elevated);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
            border: 1px solid var(--sep);
            color: var(--label);
            padding: 10px 18px;
            border-radius: var(--r-pill);
            box-shadow: var(--shadow-sheet);
            font-family: var(--font);
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: toastSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: auto;
        }
        @keyframes toastSlideIn {
            from { opacity: 0; transform: translateY(-12px) scale(0.95); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ---------- Geri Bildirim & Hata Bildir Modalı ---------- */
        .floating-feedback-btn {
            position: fixed;
            bottom: 24px;
            left: 24px;
            z-index: 999;
            background: var(--bg-elevated);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            padding: 10px 18px;
            box-shadow: var(--shadow-sheet);
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: var(--label);
            font-family: var(--font);
            font-size: 13.5px;
            font-weight: 600;
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .floating-feedback-btn:hover {
            transform: translateY(-3px) scale(1.03);
            border-color: var(--blue);
            box-shadow: 0 10px 30px rgba(0, 122, 255, 0.25);
        }
        .floating-feedback-btn:active {
            transform: translateY(0) scale(0.97);
        }
        .feedback-modal-backdrop {
            position: fixed;
            inset: 0;
            background: var(--bg-scrim);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            z-index: 1100;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            transition: opacity 0.2s ease;
        }
        .feedback-modal-backdrop.hidden {
            display: none !important;
        }
        .feedback-modal-card {
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            border-radius: var(--r-sheet);
            box-shadow: var(--shadow-sheet);
            width: 100%;
            max-width: 520px;
            overflow: hidden;
            animation: modalPop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .feedback-modal-header {
            padding: 20px 24px 16px;
            border-bottom: 1px solid var(--sep);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        .feedback-modal-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--label);
            letter-spacing: -0.02em;
            margin-bottom: 4px;
        }
        .feedback-modal-header p {
            font-size: 13px;
            color: var(--label-2);
            line-height: 1.4;
        }
        .feedback-modal-body {
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .feedback-form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .feedback-form-group label {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--label);
        }
        .feedback-category-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .feedback-pill {
            background: var(--bg-raised);
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            color: var(--label-2);
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: var(--font);
        }
        .feedback-pill:hover {
            border-color: var(--blue);
            color: var(--label);
        }
        .feedback-pill.active {
            background: var(--blue-tint);
            border-color: var(--blue);
            color: var(--blue);
            font-weight: 600;
        }
        .feedback-input, .feedback-textarea {
            width: 100%;
            background: var(--bg-raised);
            border: 1px solid var(--sep);
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 14px;
            color: var(--label);
            font-family: var(--font);
            box-sizing: border-box;
            transition: border-color 0.15s ease;
        }
        .feedback-input:focus, .feedback-textarea:focus {
            outline: none;
            border-color: var(--blue);
            box-shadow: 0 0 0 3px var(--blue-tint);
        }
        .feedback-textarea {
            resize: vertical;
            min-height: 90px;
            line-height: 1.5;
        }
        .feedback-modal-footer {
            padding: 16px 24px 20px;
            border-top: 1px solid var(--sep);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }
        .btn-cancel {
            background: transparent;
            border: 1px solid var(--sep);
            border-radius: var(--r-pill);
            padding: 8px 16px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--label-2);
            cursor: pointer;
            font-family: var(--font);
            transition: all 0.15s ease;
        }
        .btn-cancel:hover {
            background: var(--bg-fill);
            color: var(--label);
        }
        .btn-submit-feedback {
            background: var(--blue);
            border: none;
            border-radius: var(--r-pill);
            padding: 8px 20px;
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            font-family: var(--font);
            transition: all 0.15s ease;
        }
        .btn-submit-feedback:hover {
            background: var(--blue-press);
            transform: translateY(-1px);
        }
        .btn-submit-feedback:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .feedback-status-msg {
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 8px;
            line-height: 1.4;
        }
        .feedback-status-msg.error {
            background: rgba(239, 68, 68, 0.12);
            color: var(--red);
            border: 1px solid rgba(239, 68, 68, 0.25);
        }
        .feedback-status-msg.success {
            background: rgba(34, 197, 94, 0.12);
            color: var(--green);
            border: 1px solid rgba(34, 197, 94, 0.25);
        }
        @media (max-width: 600px) {
            .floating-feedback-btn {
                bottom: 16px;
                left: 16px;
                padding: 8px 14px;
                font-size: 12.5px;
            }
            .floating-feedback-btn .feedback-btn-label {
                display: none;
            }
        }

        /* ---------- Alt bilgi ---------- */
        .site-footer {
            margin-top: 36px;
            padding: 22px 0 0;
            border-top: 1px solid var(--sep);
            color: var(--label-2);
            font-size: 12px;
            line-height: 1.6;
            letter-spacing: 0;
            width: 100%;
        }
        .site-footer h4 {
            font-size: 13.5px; font-weight: 600; color: var(--label);
            letter-spacing: -0.008em; margin-bottom: 9px;
        }
        .site-footer p { margin-bottom: 10px; width: 100%; max-width: 100%; }
        .site-footer strong { color: var(--label); font-weight: 590; }
        .site-footer .footer-meta {
            display: flex; flex-wrap: wrap; gap: 4px 18px;
            padding-top: 14px; margin-top: 6px;
            border-top: 1px solid var(--sep);
            color: var(--label-2); font-size: 11.5px;
            align-items: center;
        }
        .site-footer .footer-brand { color: var(--label-2); font-weight: 590; }
        .site-footer a { color: var(--blue); text-decoration: none; }
        .site-footer a:hover { text-decoration: underline; }

        /* ---------- Klinik Karar Asistanı (AI) ---------- */
        .assistant-prompt-box {
            display: flex; flex-direction: column; gap: 12px;
        }
        .btn-assistant-submit {
            background: var(--blue); color: #fff; border: none;
            border-radius: var(--r-control); padding: 10px 20px;
            font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
            box-shadow: var(--shadow-raise);
            transition: background 0.15s ease, transform 0.1s ease;
        }
        .btn-assistant-submit:hover { background: var(--blue-press); }
        .btn-assistant-submit:active { box-shadow: var(--shadow-press); transform: translateY(1px); }

        .assistant-results-area { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }

        .assistant-chat-bubble {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            box-shadow: var(--shadow-card);
            padding: 20px 22px;
            display: flex; flex-direction: column; gap: 14px;
            position: relative;
        }
        .assistant-chat-header {
            display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 10px;
            padding-bottom: 12px; border-bottom: 1px solid var(--sep);
        }
        .assistant-avatar-title {
            display: flex; align-items: center; gap: 10px;
        }
        .assistant-avatar {
            width: 32px; height: 32px; border-radius: 50%;
            background: var(--blue-tint); color: var(--blue);
            display: flex; align-items: center; justify-content: center;
            font-size: 17px; flex-shrink: 0;
        }
        .assistant-title-text h3 {
            font-size: 16px; font-weight: 600; color: var(--label);
            letter-spacing: -0.015em; line-height: 1.2;
        }
        .assistant-title-text p {
            font-size: 12px; color: var(--label-2); margin-top: 2px;
        }
        .patient-profile-pills {
            display: flex; flex-wrap: wrap; gap: 6px;
        }
        .patient-pill {
            display: inline-flex; align-items: center; gap: 5px;
            background: var(--bg-fill-2); color: var(--label);
            border-radius: var(--r-pill); padding: 4px 10px;
            font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
        }
        .assistant-message-body {
            font-size: 14.5px; line-height: 1.65; color: var(--label);
            letter-spacing: -0.01em;
        }
        .assistant-message-body p { margin-bottom: 12px; }
        .assistant-message-body p:last-child { margin-bottom: 0; }
        .assistant-message-body strong { font-weight: 600; color: var(--label); }
        .assistant-message-body em { color: var(--label-2); font-style: italic; }
        .asst-bullet {
            display: flex; align-items: baseline; gap: 9px;
            margin: 6px 0; font-size: 14px; line-height: 1.5; color: var(--label);
        }
        .asst-dot {
            color: var(--blue); font-weight: 700; flex-shrink: 0; font-size: 15px;
        }
        .assistant-disclaimer-card {
            background: var(--warn-bg); border: 1px solid var(--warn-line);
            border-radius: var(--r-control); padding: 10px 14px;
            font-size: 12px; color: var(--warn-fg); line-height: 1.45;
        }

        .asst-heading {
            font-size: 15px;
            font-weight: 700;
            color: var(--label);
            letter-spacing: -0.015em;
            margin-top: 16px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* İnteraktif Tıklanabilir Klinik İlaç / Etkin Madde Butonları */
        .inline-candidate-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--blue-tint);
            color: var(--blue);
            border: 1px solid rgba(0, 122, 255, 0.25);
            border-radius: var(--r-pill);
            padding: 1px 8px 2px 6px;
            font-family: var(--font);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.35;
            cursor: pointer;
            vertical-align: middle;
            margin: 1px 2px;
            text-decoration: none;
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }
        .inline-candidate-chip:hover {
            background: var(--blue);
            color: #ffffff !important;
            border-color: var(--blue);
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(0, 122, 255, 0.32);
        }
        .inline-candidate-chip:active {
            transform: translateY(0);
            box-shadow: none;
        }
        .inline-candidate-chip .chip-icon {
            font-size: 12px;
            line-height: 1;
        }
        .inline-candidate-chip strong {
            color: inherit !important;
            font-weight: 600;
        }

        @keyframes highlightGlow {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7);
                outline: 2px solid var(--blue);
            }
            40% {
                box-shadow: 0 0 0 10px rgba(0, 122, 255, 0.22);
                outline: 2px solid var(--blue);
            }
            100% {
                box-shadow: var(--shadow-card);
                outline: 2px solid transparent;
            }
        }
        .highlight-pulse {
            animation: highlightGlow 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* ---------- Hakkında & İstatistikler Görünümleri ---------- */
        .about-hero {
            background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(88, 86, 214, 0.05) 100%);
            border: 1px solid rgba(0, 122, 255, 0.18);
            border-radius: var(--r-card); padding: 28px 30px;
            margin-bottom: 24px; box-shadow: var(--shadow-card);
        }
        .about-hero h2 {
            font-size: 24px; font-weight: 700; color: var(--label);
            letter-spacing: -0.025em; margin-bottom: 8px; line-height: 1.25;
        }
        .about-hero p {
            font-size: 15px; color: var(--label-2); line-height: 1.6;
            max-width: 82ch; margin-bottom: 14px;
        }
        .about-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
        .about-hero-pill {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--bg-raised); border: 1px solid var(--sep);
            padding: 5px 12px; border-radius: var(--r-pill);
            font-size: 12.5px; font-weight: 500; color: var(--label);
        }

        .about-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 16px; margin-bottom: 24px;
        }
        .about-card {
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: var(--shadow-card); padding: 22px 24px;
            display: flex; flex-direction: column; gap: 10px;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .about-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
        /* Bu iki düğme, sayfada uygulamanın dışına çıkan tek yer. Zeminden
           renkle ayrılıyorlar, çünkü okunarak değil görülerek bulunmaları
           gerekiyor: anahtarı nasıl alacağını arayan biri metni taramaz. */
        .home-api-cta {
            display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: 16px;
            margin: 0 0 22px; padding: 18px 20px; border-radius: 16px;
            border: 1px solid rgba(99, 102, 241, 0.35);
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.10) 0%,
                                        rgba(99, 102, 241, 0.12) 100%);
        }
        .home-api-cta strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
        .home-api-cta span { font-size: 13.5px; color: var(--label-2); }
        .home-api-cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
        .key-cta {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
            color: #fff; text-decoration: none; font-weight: 750;
            font-size: 15px; padding: 12px 22px; border-radius: 14px;
            box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .key-cta:hover { transform: translateY(-1px); color: #fff;
                         box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45); }
        .key-cta-quiet {
            background: var(--bg-raised); color: var(--label);
            border: 1px solid rgba(99, 102, 241, 0.45); box-shadow: none;
        }
        .key-cta-quiet:hover { color: var(--label); box-shadow: none; }
        /* İletişim çipi. İki kabuk da aynı çipi çiziyor: ödeme yolu
           kaldırıldıktan sonra ücretli plan da reklam da tek bir formdan
           açılıyor ve o forma giden yol, hangi kabukta olduğunuza göre
           değişmemeli. */
        /* Reklam alanı. İki kabuk da aynı çerçeveyi çiziyor: kutu dosya
           gelmeden ayrılır (ölçü görselin kendi ölçüsüdür), "Reklam" ibaresi
           görselin üstünde durur ve alan çerçeveyle editoryal metinden
           ayrılır. Bu kurallar sunucuda değil burada görünür hâle geliyor,
           ve iki kabukta ayrı yazılırsa biri sessizce ibaresiz kalır. */
        .ad-slot {
            display: block; margin: 18px 0; padding: 10px 12px 12px;
            border: 1px solid var(--sep); border-radius: 14px;
            background: var(--bg-fill);
        }
        /* Google'ın dolduramadığı birim çerçevesiyle birlikte kaybolur. */
        .ad-slot-google:has(ins[data-ad-status="unfilled"]) { display: none; }
        .ad-slot-label {
            display: inline-block; font-size: 10.5px; font-weight: 700;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--label-2); border: 1px solid var(--sep);
            border-radius: 999px; padding: 2px 8px; margin-bottom: 8px;
            background: var(--bg-raised);
        }
        .ad-slot a { text-decoration: none; color: inherit; }
        .ad-slot a:hover .ad-slot-headline { text-decoration: underline; }
        .ad-slot img {
            display: block; max-width: 100%; height: auto; border-radius: 8px;
        }
        .ad-slot-banner { text-align: center; }
        .ad-slot-banner img { margin: 0 auto; }
        .ad-slot-card-body { display: flex; flex-wrap: wrap; gap: 14px;
                             align-items: flex-start; }
        .ad-slot-card-body > div { flex: 1 1 240px; min-width: 0; }
        .ad-slot-card-body img { flex: 0 0 auto; max-width: 220px; }
        .ad-slot-headline { font-size: 15.5px; font-weight: 700;
                            margin: 0 0 4px; color: var(--label); }
        .ad-slot-text { font-size: 13.5px; color: var(--label-2);
                        margin: 0 0 8px; line-height: 1.5; }
        .ad-slot-cta { display: inline-block; font-size: 13px;
                       font-weight: 650; color: var(--blue, #2563eb); }
        .ad-slot-strip .ad-slot-card-body { align-items: center; gap: 10px; }
        .ad-slot-strip img { max-width: 48px; border-radius: 10px; }
        .ad-slot-badge .ad-slot-card-body { align-items: center; gap: 12px; }
        .ad-slot-badge img { max-width: 160px; }
        .ad-slot-advertiser { font-size: 12px; color: var(--label-2);
                              margin: 8px 0 0; }
        @media (max-width: 640px) {
            .ad-slot { margin: 14px 0; }
            .ad-slot-card-body img { max-width: 100%; }
        }
        .contact-chip {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 55%, #6366f1 100%);
            color: #fff; text-decoration: none; font-weight: 700;
            font-size: 14px; padding: 11px 20px; border-radius: 999px;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            border: 0; cursor: pointer;
        }
        .contact-chip:hover { transform: translateY(-1px); color: #fff;
                              box-shadow: 0 8px 20px rgba(37, 99, 235, 0.42); }
        .contact-chip-quiet {
            background: rgba(37, 99, 235, 0.08); color: #1d4ed8;
            border: 1px solid rgba(37, 99, 235, 0.45); box-shadow: none;
            font-size: 13px; padding: 9px 16px;
        }
        .contact-chip-quiet:hover { color: #1d4ed8; box-shadow: none;
                                    background: rgba(37, 99, 235, 0.14); }
        .contact-chips { display: flex; flex-wrap: wrap; gap: 10px; }
        @media (prefers-color-scheme: dark) {
            .contact-chip-quiet { color: #93c5fd;
                background: rgba(59, 130, 246, 0.14);
                border-color: rgba(96, 165, 250, 0.55); }
            .contact-chip-quiet:hover { color: #bfdbfe;
                background: rgba(59, 130, 246, 0.22); }
        }
        @media (max-width: 640px) {
            .contact-chip { width: 100%; justify-content: center; }
        }
        .about-card-icon {
            font-size: 26px; width: 44px; height: 44px; border-radius: 12px;
            background: var(--bg-fill-2); display: flex; align-items: center; justify-content: center;
        }
        .about-card h3 {
            font-size: 17px; font-weight: 600; color: var(--label);
            letter-spacing: -0.015em;
        }
        .about-card p {
            font-size: 13.5px; color: var(--label-2); line-height: 1.55;
        }

        .about-disclaimer-box {
            background: var(--bg-raised); border: 1px solid var(--sep);
            border-radius: var(--r-card); padding: 20px 24px;
            font-size: 13px; color: var(--label-2); line-height: 1.6;
        }
        .about-disclaimer-box h4 {
            font-size: 14.5px; font-weight: 600; color: var(--label);
            margin-bottom: 8px;
        }

        .stats-hero-banner {
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: var(--shadow-card); padding: 22px 26px;
            margin-bottom: 20px;
        }
        .stats-hero-banner h2 {
            font-size: 20px; font-weight: 700; color: var(--label);
            letter-spacing: -0.02em; margin-bottom: 6px;
        }
        .stats-hero-banner p {
            font-size: 13.5px; color: var(--label-2); line-height: 1.5;
        }
        .stats-breakdown-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px; margin-top: 18px;
        }
        .stats-breakdown-card {
            background: var(--bg-elevated); border-radius: var(--r-card);
            box-shadow: var(--shadow-card); padding: 18px 20px;
        }
        .stats-breakdown-card h3 {
            font-size: 14px; font-weight: 600; color: var(--label);
            margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
        }
        .stats-row-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 7px 0; border-bottom: 1px solid var(--sep);
            font-size: 13px; color: var(--label);
        }
        .stats-row-item:last-child { border-bottom: none; }
        .stats-row-item span:first-child { color: var(--label-2); }
        .stats-row-item strong { font-weight: 600; color: var(--label); }

        /* ---------- Klinik Hesaplayıcılar & TİTCK Bülten Sekmeleri ---------- */
        .calc-card-box {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            border: 1px solid var(--sep);
            box-shadow: var(--shadow-card);
            padding: 20px 24px;
            margin-bottom: 20px;
        }
        .bulletin-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 16px;
        }
        .bulletin-card {
            background: var(--bg-elevated);
            border-radius: var(--r-card);
            border: 1px solid var(--sep);
            box-shadow: var(--shadow-card);
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .bulletin-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-dropdown);
        }
        .bulletin-card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }
        .bulletin-card-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--label);
            line-height: 1.3;
        }
        .bulletin-badge-recall {
            background: #fee2e2;
            color: #dc2626;
            font-weight: 700;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 6px;
        }
        .bulletin-badge-warning {
            background: #fef3c7;
            color: #b45309;
            font-weight: 700;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 6px;
        }
        .sut-box {
            background: var(--bg-fill-2);
            border-radius: 12px;
            border: 1px solid var(--sep);
            padding: 12px 14px;
            margin-bottom: 12px;
        }

        /* ---------- İnteraktif Dozaj & Titrasyon Widget'ı ---------- */
        .dose-calc-widget {
            background: var(--bg-fill-2);
            border-radius: 12px;
            border: 1px solid var(--sep);
            padding: 12px 14px;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .dose-calc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 600;
            color: var(--label);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .dose-calc-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .dose-calc-input-group {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--label);
        }
        .dose-calc-input {
            width: 70px;
            padding: 5px 8px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 6px;
            border: 1px solid var(--sep-opaque);
            background: var(--bg-elevated);
            color: var(--label);
            text-align: center;
            outline: none;
        }
        .dose-calc-input:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 2px var(--blue-tint);
        }
        .dose-calc-result-box {
            background: var(--bg-elevated);
            border-radius: 8px;
            padding: 9px 12px;
            font-size: 12.5px;
            line-height: 1.5;
            color: var(--label);
            border-left: 3px solid var(--blue);
        }

        /* ---------- Baskı ---------- */
        @media print {
            /* Koyu temadayken basıldığında tüm metin beyaz kalıyor, yani
               kâğıtta görünmez oluyordu. Baskı her zaman açık palet kullanır. */
            :root, :root[data-theme="dark"] {
                color-scheme: light;
                --bg-grouped: #fff; --bg-elevated: #fff; --bg-raised: #fff;
                --bg-fill: #f0f0f0; --bg-fill-2: #f7f7f7; --bg-fill-3: #e8e8e8;
                --label: #000; --label-2: #333; --label-3: #666; --label-heading: #333;
                --sep: #ccc; --sep-opaque: #bbb;
                --blue: #0b4a8f; --mark-bg: #000;
                --warn-fg: #6b4400; --warn-bg: #fbf6ea; --warn-line: #d9c48f;
                --dang-fg: #a01008; --dang-bg: #fdf2f1; --dang-line: #e6bdb8;
                --info-fg: #0b3d75; --info-bg: #eef4fb; --info-line: #b9cde4;
                --intr-fg: #5a2a70; --intr-bg: #f6eefa; --intr-line: #d3bade;
                --ok-fg: #146c30;   --ok-bg: #f0f7f2;   --ok-line: #bcd9c6;
            }
            body { background: #fff; color: #000; font-size: 10.5pt; }
            .theme-switch { display: none !important; }
            .app-bar, .search-container, .stats-grid, .pagination-container,
            .btn-export, .modal-close { display: none !important; }
            .container { max-width: none; padding: 0; }
            /* Yüzey dili tamamen gölgeye dayanıyor; baskıda gölge düştüğü için
               sınırları kenarlıkla geri veriyoruz. */
            .table-wrapper, .modal-card, .ing-grid, .search-container,
            .stats-grid, .ingredient-hub-card, .desc-box, .doc-viewer-card {
                box-shadow: none; max-height: none; border: 1px solid #c8c8c8;
            }
            .modal-backdrop { position: static; display: block !important; background: none;
                              padding: 0; backdrop-filter: none; }
            .modal-body { overflow: visible; max-height: none; }
            .desc-box, .doc-sec-body { max-height: none; overflow: visible; }
            a { color: #000; text-decoration: none; }
            /* Reçete sınıfı kodu baskıda da okunmalı. */
            tr[class*="rx-"] > td:first-child::before, .rx-chip::before, .rx-legend,
            .clinical-card-header::before {
                -webkit-print-color-adjust: exact; print-color-adjust: exact;
            }
        }

        /* ---------- İlaç Etkileşim Kontrol Modülü (DDI Engine) ---------- */
        .ddi-hero-header {
            text-align: center;
            padding: 24px 16px 20px;
            margin: 0 auto;
            max-width: 820px;
        }
        .ddi-hero-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--label);
            margin: 0 0 6px;
            letter-spacing: -0.025em;
        }
        .ddi-hero-subtitle {
            font-size: 16px;
            font-weight: 600;
            color: var(--blue);
            margin-bottom: 8px;
        }
        .ddi-hero-desc {
            font-size: 14px;
            color: var(--label-2);
            line-height: 1.5;
            margin: 0;
        }

        .ddi-input-box-wrapper {
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            border-radius: var(--r-card);
            padding: 20px 22px;
            box-shadow: var(--shadow-card);
            margin-bottom: 24px;
        }

        .ddi-tag-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            background: var(--bg-fill-2);
            /* Kenarlık yok: sitedeki bütün arama kutuları (.search-main-input)
               çerçevesizdir, derinliği yalnızca --shadow-sunk verir. Buradaki
               1px --sep, soğuk gri olduğu için açık zeminde mavimsi bir
               çerçeve gibi okunuyordu ve kutuyu diğerlerinden ayırıyordu.
               Odak halkası ikisinde de aynı. */
            border: none;
            border-radius: var(--r-control);
            min-height: 52px;
            padding: 8px 12px;
            cursor: text;
            box-shadow: var(--shadow-sunk);
            transition: box-shadow 0.15s ease, background 0.15s ease;
        }
        .ddi-tag-container:focus-within {
            box-shadow: var(--shadow-sunk), 0 0 0 4px rgba(0, 122, 255, 0.30);
            background: var(--bg-raised);
        }

        .ddi-tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .ddi-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            border-radius: 16px;
            padding: 4px 10px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--label);
            box-shadow: var(--shadow-raise);
            animation: tagIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes tagIn {
            from { opacity: 0; transform: scale(0.85); }
            to { opacity: 1; transform: scale(1); }
        }
        .ddi-tag-remove {
            background: transparent;
            border: none;
            color: var(--label-2);
            font-size: 14px;
            cursor: pointer;
            line-height: 1;
            padding: 0 2px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.12s ease, transform 0.12s ease;
        }
        .ddi-tag-remove:hover {
            color: var(--red);
            transform: scale(1.2);
        }

        .ddi-tag-input {
            flex: 1;
            min-width: 220px;
            border: none;
            background: transparent;
            outline: none;
            color: var(--label);
            font-size: 14.5px;
            font-family: var(--font);
            padding: 4px;
        }
        .ddi-tag-input::placeholder {
            color: var(--label-3);
        }
        /* İki mavi çerçeve buradan çıkıyordu. Kapsayıcı :focus-within ile
           halkayı zaten çiziyor, input da genel :focus-visible kuralından
           ikincisini alıyordu -- iç içe iki halka. Input'taki `outline: none`
           bunu kesmiyor, çünkü halka outline değil box-shadow.
           Görünür kontrol kapsayıcı: çipler ondan içeride duruyor, dolayısıyla
           yalnızca metin alanına yapışan bir halka kutunun ortasında asılı
           kalıyordu. Kalan halka kapsayıcınınki. */
        .ddi-tag-input:focus,
        .ddi-tag-input:focus-visible {
            box-shadow: none;
        }

        .ddi-control-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .ddi-btn-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-ddi-run {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #ffffff;
            border: none;
            border-radius: var(--r-control);
            padding: 10px 22px;
            font-size: 14px;
            font-weight: 650;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-ddi-run:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
        }
        .btn-ddi-run:active {
            transform: translateY(1px);
        }

        .btn-ddi-clear {
            background: var(--bg-fill);
            border: 1px solid var(--sep);
            color: var(--label-2);
            border-radius: var(--r-control);
            padding: 10px 16px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .btn-ddi-clear:hover {
            background: var(--bg-fill-2);
            color: var(--red);
            border-color: var(--dang-line);
        }

        .ddi-count-indicator {
            font-size: 13px;
            font-weight: 600;
            color: var(--label-2);
            background: var(--bg-fill);
            padding: 6px 12px;
            border-radius: 14px;
            border: 1px solid var(--sep);
        }

        .ddi-presets-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--sep);
        }
        .ddi-presets-label {
            font-size: 12.5px;
            font-weight: 650;
            color: var(--label-2);
        }
        .ddi-preset-chip {
            background: var(--bg-fill-2);
            border: 1px solid var(--sep);
            color: var(--label);
            border-radius: 14px;
            padding: 5px 12px;
            font-size: 12.5px;
            font-weight: 550;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .ddi-preset-chip:hover {
            background: var(--blue-tint);
            color: var(--blue);
            border-color: var(--blue);
        }

        /* Sonuç Paneli */
        .ddi-results-wrapper {
            margin-top: 24px;
        }
        .ddi-summary-banner {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            border-radius: var(--r-card);
            margin-bottom: 24px;
            border: 1px solid transparent;
        }
        .ddi-summary-banner.status-critical {
            background: var(--dang-bg);
            border-color: var(--dang-line);
            color: var(--dang-fg);
        }
        .ddi-summary-banner.status-caution {
            background: var(--warn-bg);
            border-color: var(--warn-line);
            color: var(--warn-fg);
        }
        /* Neutral, not green. This banner appears when the engine found
           nothing, and green with a tick reads as "cleared" -- which is the
           one thing an empty result does not mean. */
        .ddi-summary-banner.status-no-finding {
            background: var(--bg-fill);
            border-color: var(--sep);
            color: var(--label);
        }

        .ddi-stat-chips-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .ddi-stat-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 650;
            border: 1px solid rgba(0,0,0,0.06);
            background: var(--bg-elevated);
            color: var(--label);
            box-shadow: var(--shadow-raise);
        }
        .chip-crit { color: #dc2626; }
        .chip-mod { color: #d97706; }
        .chip-safe { color: #16a34a; }
        /* Deliberately not green: "no rule matched" is not "these two are
           fine together", and a green chip says the second thing. */
        .chip-unmatched { color: var(--label-2); }
        .chip-dup { color: #7c3aed; }

        .ddi-section-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--label);
            margin: 26px 0 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ddi-card {
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            border-radius: var(--r-card);
            padding: 18px 20px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-card);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .ddi-card:hover {
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        }
        .ddi-card.card-major {
            border-left: 5px solid #dc2626;
        }
        .ddi-card.card-moderate {
            border-left: 5px solid #f59e0b;
        }
        .ddi-card.card-safe {
            border-left: 5px solid #10b981;
        }
        .ddi-card.card-duplication {
            border-left: 5px solid #8b5cf6;
        }

        .ddi-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }
        .ddi-pair-pills {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .ddi-drug-pill {
            background: var(--bg-fill-2);
            border: 1px solid var(--sep);
            color: var(--label);
            font-weight: 650;
            font-size: 14px;
            padding: 4px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .ddi-drug-pill:hover {
            background: var(--bg-raised);
            border-color: var(--blue);
        }
        .ddi-lightning {
            font-size: 16px;
            color: #f59e0b;
            font-weight: 700;
        }

        .ddi-card-headline {
            font-size: 15px;
            font-weight: 650;
            color: var(--label);
            margin: 6px 0 12px;
            line-height: 1.4;
        }
        .ddi-card-summary {
            font-size: 13.5px;
            color: var(--label-2);
            line-height: 1.5;
            margin-bottom: 14px;
        }

        .ddi-why-btn {
            background: var(--bg-fill);
            border: 1px solid var(--sep);
            border-radius: 8px;
            padding: 7px 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--blue);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
        }
        .ddi-why-btn:hover {
            background: var(--blue-tint);
            border-color: var(--blue);
        }

        .ddi-why-content {
            background: var(--bg-fill-2);
            border: 1px solid var(--sep);
            border-radius: 10px;
            padding: 16px;
            margin-top: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            animation: fadeIn 0.2s ease;
        }
        .ddi-why-content.hidden { display: none !important; }

        .ddi-why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 12px;
        }
        .ddi-why-item {
            background: var(--bg-elevated);
            border: 1px solid var(--sep);
            border-radius: 8px;
            padding: 12px 14px;
        }
        .ddi-why-item-title {
            font-size: 11.5px;
            font-weight: 650;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--label-heading);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .ddi-why-item-desc {
            font-size: 13.5px;
            color: var(--label);
            line-height: 1.45;
            margin: 0;
        }

        /* ============================================================
           Mobil Görünüm & Responsive Düzenlemeler
           Sayfa taşmalarını, yatay kaymaları ve dar ekran sıkışmalarını
           önleyen kapsamlı mobil tasarım kuralları.
           ============================================================ */
        html, body {
            overflow-x: hidden !important;
            max-width: 100vw;
            width: 100%;
            position: relative;
        }

        @media (max-width: 760px) {
            body { font-size: 15px; }

            /* --- App bar: iki sıra, taşmasız yatay kaydırılabilir sekmeler --- */
            /* .container mobilde 12px kullanıyor; şerit onunla aynı hizada
               dursun diye yatay boşluk dış kaplamaya taşınıyor. */
            .app-bar { padding: 8px 12px 0; }
            .app-bar-inner {
                padding: 9px 10px; gap: 8px;
                flex-wrap: wrap; align-items: center;
                max-width: 100%;
            }
            /* Marka bloğu kaldırıldıktan sonra ilk satırda yalnızca tema
               düğmeleri kalıyordu; sekmeler ve araçlar tek satırı paylaşıyor. */
            .header-actions { order: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; }
            .bar-tools { order: 1; flex: 0 0 auto; gap: 6px; }
            
            .header-actions .segmented {
                /* width:100% idi; ayarlar dişlisi sekmelerin yanına gelince
                   onu satırdan taşırıyordu. flex:1 kalan yeri alır, dişli
                   kendi genişliğinde kalır. */
                flex: 1 1 auto;
                min-width: 0;
                display: flex;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding: 3px;
                gap: 4px;
            }
            .header-actions .segmented::-webkit-scrollbar { display: none; }
            .nav-tab-btn { flex: 0 0 auto; padding: 7px 11px; font-size: 13px; white-space: nowrap; }
            .tab-long { display: none; }
            .btn-export { padding: 6px 10px; font-size: 12px; }
            .btn-export span.export-label { display: none; }
            .btn-lock { padding: 6px 4px; font-size: 12px; }

            .container { padding: 12px 12px calc(40px + env(safe-area-inset-bottom)); width: 100%; max-width: 100vw; overflow-x: hidden; }

            /* --- İstatistikler: 2x2 --- */
            .stats-grid { border-radius: var(--r-card); }
            .stat-card { flex: 1 1 50%; padding: 12px 14px; min-width: 0; }
            .stat-card + .stat-card::before { display: none; }
            .stat-card:nth-child(n+3) { border-top: 1px solid var(--sep); }
            .stat-card:nth-child(even) { border-left: 1px solid var(--sep); }
            .stat-val { font-size: 22px; }

            /* --- Arama: 16px altı iOS'ta odaklanınca sayfayı büyütür --- */
            .search-container { padding: 14px; max-width: 100%; }
            .search-main-input { font-size: 16px; padding: 11px 36px 11px 34px; }
            .search-tip { display: none; }

            .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
            .filter-select { width: 100%; font-size: 15px; padding: 9px 26px 9px 10px; }
            .btn-reset { grid-column: 1 / -1; margin-left: 0; text-align: left; padding: 4px 2px; }

            .rx-legend { gap: 6px 12px; margin-top: 12px; padding-top: 10px; }
            .rx-legend .rx-chip { font-size: 12px; }

            /* --- Klinik Karar Asistanı & Chat Balonu --- */
            .assistant-chat-bubble {
                padding: 14px 14px;
                max-width: 100%;
                overflow: hidden;
            }
            .assistant-chat-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .assistant-chat-header > div:last-child {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
            }
            .assistant-chat-header .btn {
                font-size: 11.5px;
                padding: 5px 9px;
            }
            .assistant-avatar {
                width: 28px; height: 28px; font-size: 15px;
            }
            .assistant-title-text h3 {
                font-size: 15px;
            }
            .assistant-title-text p {
                font-size: 11.5px;
            }
            .patient-profile-pills {
                gap: 4px;
            }
            .patient-pill {
                font-size: 11.5px;
                padding: 3px 8px;
                max-width: 100%;
                word-break: break-word;
            }
            .assistant-message-body {
                font-size: 14px;
                line-height: 1.6;
                overflow-wrap: anywhere;
            }
            .asst-bullet {
                font-size: 13.5px;
                line-height: 1.45;
                gap: 7px;
            }
            .asst-bullet > div {
                min-width: 0;
                overflow-wrap: anywhere;
            }
            .inline-candidate-chip {
                font-size: 12.5px;
                padding: 1px 7px 2px 5px;
                margin: 1px 1px;
                max-width: 100%;
                word-break: break-word;
                white-space: normal;
                display: inline-flex;
            }

            /* --- Etkin Madde & Aday İlaç Kartları --- */
            .ingredient-hub-card {
                padding: 14px;
                max-width: 100%;
                overflow: hidden;
            }
            .ingredient-hub-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .ingredient-hub-header > div:last-child {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                gap: 6px;
            }
            .ingredient-title {
                font-size: 15px;
                word-break: break-word;
                overflow-wrap: anywhere;
                gap: 6px;
            }
            .preparations-chip-container {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                max-width: 100%;
            }
            .prep-chip {
                font-size: 12.5px;
                padding: 6px 10px;
                white-space: normal;
                word-break: break-word;
                text-align: left;
                max-width: 100%;
            }

            /* --- Pediatrik & Renal Doz Hesaplayıcı Widget --- */
            .dose-calc-widget {
                padding: 11px 12px;
                max-width: 100%;
            }
            .dose-calc-header {
                font-size: 11.5px;
                flex-wrap: wrap;
                gap: 4px;
            }
            .dose-calc-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .dose-calc-input-group {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .dose-calc-input {
                width: 80px;
                font-size: 15px;
            }
            .dose-calc-result-box {
                font-size: 12px;
                padding: 8px 10px;
                overflow-wrap: anywhere;
            }

            /* --- Tablo -> kart yığını --- */
            .table-wrapper { background: none; box-shadow: none; border-radius: 0; overflow: visible; width: 100%; }
            table, tbody, tr, td { display: block; width: auto; max-width: 100%; }
            thead { display: none; }

            tbody tr {
                position: relative;
                background: var(--bg-elevated);
                border-radius: var(--r-card);
                box-shadow: var(--shadow-card);
                padding: 14px 14px 14px 18px;
                margin-bottom: 12px;
                max-width: 100%;
                overflow: hidden;
            }
            tbody tr:hover { background: var(--bg-elevated); }
            tbody tr:last-child td { border-bottom: none; }

            td { padding: 0; border-bottom: none; max-width: 100%; }
            td.is-empty { display: none; }

            /* Reçete şeridi kartın sol kenarına taşınır */
            tbody tr > td:first-child { padding-left: 0; }
            tr[class*="rx-"] > td:first-child::before { content: none; }
            tr[class*="rx-"]::before {
                content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px;
                width: 3px; border-radius: 1.5px; background: var(--rx-color, transparent);
            }

            .c-name .med-name { font-size: 15px; word-break: break-word; }
            .c-name .med-sub-info { font-size: 12.5px; word-break: break-word; }
            .c-name .rx-chip { font-size: 12px; }

            /* Ad ile ilk alan arasını ayır, sonra etiketli alanlar */
            .c-ing { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sep); }
            .c-safety, .c-form, .c-price, .c-docs { margin-top: 8px; }

            td[data-label]::before {
                content: attr(data-label);
                display: block;
                font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
                text-transform: uppercase; color: var(--label-heading);
                margin-bottom: 2px;
            }
            .cell-ingredient, .cell-form { font-size: 14px; word-break: break-word; }
            .tag-price { font-size: 14.5px; font-weight: 600; }
            .cell-posology { font-size: 12.5px; }
            .tag-doc { font-size: 13px; margin-right: 12px; padding: 4px 0; display: inline-flex; }

            .pagination-container {
                background: var(--bg-elevated); border-radius: var(--r-card);
                box-shadow: var(--shadow-card); border-top: none;
                flex-direction: column; gap: 10px; padding: 12px;
            }
            .btn-page { padding: 8px 16px; font-size: 13.5px; }

            /* --- Etkin madde indeksi: tek sütun --- */
            .ing-grid { grid-template-columns: 1fr; }
            .group-hub-head { flex-direction: column; }
            .group-clear { align-self: stretch; text-align: center; }
            .ing-details { white-space: normal; }

            /* --- Hastalık sekmesi --- */
            .icd-evidence { font-size: 13.5px; line-height: 1.5; }
            .icd-title { font-size: 14.5px; }
            .icd-hit { padding: 12px 13px; }
            .icd-med-row { gap: 6px 8px; }
            .icd-med-row .icd-title { flex: 1 1 100%; }
            .icd-chapter-row, .icd-agree-bar { gap: 8px; }
            .icd-chapter-row button { font-size: 13px; }
            .icd-chapter-row { display: grid; grid-template-columns: 1fr; }
            .icd-chapter-row button { text-align: left; }
            .dx-row { gap: 6px; }
            .dx-chip { flex: 1 1 100%; font-size: 13px; }

            .tag { font-size: 11.5px; }
            .tag-agree, .tag-rollup { font-size: 11px; }
            .class-notice { font-size: 13px; }
            .class-notice button { margin-left: 0; }

            /* --- Hakkında & İstatistikler --- */
            .about-hero { padding: 18px 16px; }
            .about-hero h2 { font-size: 20px; }
            .about-grid { grid-template-columns: 1fr; }
            .stats-hero-banner { padding: 16px 14px; }
            .stats-hero-banner h2 { font-size: 18px; }
            .stats-breakdown-grid { grid-template-columns: 1fr; }

            /* --- Modal: alttan açılan iOS Sheet --- */
            .modal-backdrop { padding: 0; align-items: flex-end; }
            .modal-card {
                max-width: none; width: 100%;
                max-height: 92vh;
                border-radius: var(--r-sheet) var(--r-sheet) 0 0;
                animation: sheetUp 0.34s cubic-bezier(0.32, 0.72, 0, 1);
                position: relative;
            }
            @keyframes sheetUp {
                from { transform: translateY(100%); }
                to   { transform: translateY(0); }
            }
            .modal-card::before {
                content: ''; position: absolute; top: 7px; left: 50%;
                transform: translateX(-50%);
                width: 36px; height: 5px; border-radius: 3px;
                background: var(--label-3); z-index: 2;
            }
            .modal-header { padding: 16px 14px 12px; }
            .modal-title-wrap h2 { font-size: 17px; }
            .modal-body {
                padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
                gap: 16px;
            }
            .clinical-decision-hero { grid-template-columns: 1fr; }
            .modal-close { width: 30px; height: 30px; }
            .pill-item { font-size: 13px; padding: 8px 12px; }
            .desc-box { max-height: none; font-size: 13.5px; }

            .site-footer { font-size: 12px; }
        }

        @media (max-width: 400px) {
            .filter-row { grid-template-columns: 1fr; }
            .nav-tab-btn { font-size: 12.5px; padding: 7px 9px; }
            .stat-card { flex: 1 1 100%; border-left: none !important; }
            .stat-card + .stat-card { border-top: 1px solid var(--sep) !important; }
        }

        /* Dokunmatik: hedef boyutları.
           Genişliğe değil giriş yöntemine bağlı, çünkü sorun ekranın darlığı
           değil parmağın büyüklüğü -- tablette de aynı. Ölçüldüğünde bu
           arayüzdeki düğmelerin çoğu 25-35 px yüksekliğindeydi: sekmeler 32,
           sayfalama 35, KÜB indirme bağlantısı 33, ICD bölüm düğmeleri 27,
           uyum çipleri 25. 44 px Apple'ın, 48 dp Google'ın alt sınırı; burada
           birincil gezinme 44'e, ikincil denetimler 40'a çekildi. */
        @media (pointer: coarse) {
            .nav-tab-btn { min-height: 44px; }
            .btn-page { min-height: 44px; padding: 11px 18px; }
            .search-main-input { min-height: 46px; }
            .filter-select { min-height: 44px; }

            /* Measured at 375px and missed by the block above: the primary
               search action was 27px tall beside a 46px field, the mic 32,
               and the example chips 24 -- a fingertip is about 44. The
               submit button sits inside the input, so it takes what fits
               there rather than the full 44. */
            .btn-search-submit { min-height: 38px; padding: 9px 16px; }
            .btn-voice-search { width: 40px; height: 40px; }
            .qa-chip { min-height: 38px; }
            .sp-min-chip { min-height: 34px; padding: 8px 12px; }

            /* Same fix as the seo shell's footer, in the shell that needed
               it too. The first pass changed one of the two and the
               homepage's links stayed 18px -- the drift these two templates
               produce every single time something is added to one of them. */
            .site-footer .footer-meta { gap: 2px 14px; }
            .site-footer .footer-meta a { padding: 8px 0; line-height: 1.5; }
            .nav-api-cta { min-height: 40px; }

            .theme-btn { width: 40px; height: 38px; }
            .btn-lock, .btn-export { min-height: 40px; }
            .btn-reset { min-height: 40px; }
            .modal-close { width: 40px; height: 40px; }

            /* Düğme gibi davranan her şey: çipler, bölüm düğmeleri, tanı
               kısayolları, belge bağlantıları. */
            .prep-chip, .group-clear, .group-atc-chip, .group-ing-chip,
            .dx-chip, .icd-chapter-row button, .pill-item {
                min-height: 40px;
                display: inline-flex; align-items: center; gap: 6px;
            }
            /* inline-flex, text-align'i etkisiz bırakır: mobilde tam genişliğe
               yayılan kapat düğmesi bu satır olmadan sola yaslanıyor. */
            .group-clear { justify-content: center; }
            .tag-doc { min-height: 40px; padding: 9px 0; margin-right: 18px; }
            /* Sınıf genişletmesinden çıkış bağlantısı. Altı çizili bir metin
               gibi görünüyor ama tek kaçış yolu o, ve 15 px yüksekliğindeydi. */
            .class-notice button { min-height: 40px; padding: 0 2px; }

            /* Bir sonucu açmak için satırın tamamı hedef olmalı; kart zaten
               tıklanabilir, ama masaüstünde imleç değişmediği için bunun
               böyle olduğu görünmüyordu. */
            tbody tr, .icd-hit, .ing-card { cursor: pointer; }
        }

        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition: none !important; }
        }

        @media print {
            body { background: #fff !important; color: #000 !important; }
            .app-bar, .search-container, .filter-row, .rx-legend, .search-prompt,
            .table-wrapper, .site-footer, .segmented, .theme-switch, .btn-lock,
            .loading-state, #groupHubArea, #ingredientHubArea, #groupSuggest,
            #classNotice, #viewIngredients, #viewGroups, #viewDiseases,
            #viewStats, #viewAbout, #viewInteractions, #viewCalc, #viewBulletin, .modal-backdrop {
                display: none !important;
            }
            .container { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
            .assistant-chat-bubble {
                box-shadow: none !important;
                border: 1px solid #ccc !important;
                margin: 0 !important;
                padding: 15px !important;
            }
            .assistant-chat-header button {
                display: none !important;
            }
        }