@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

        :root { /* v4.4.7 */
            --aiy-p: #2563eb;
            --aiy-glass: rgba(255, 255, 255, 0.85);
            --aiy-glass-hover: rgba(255, 255, 255, 0.95);
            --aiy-border: rgba(255, 255, 255, 0.5);
            --aiy-text: #0f172a;
            --aiy-muted: #64748b;

            /* Theme integration vars (soft overrides) */
            --aiy-page-text: var(--aiy-text);
            --aiy-h1-color: var(--aiy-text);
            --aiy-desc-color: var(--aiy-muted);

            --aiy-tab-bg: transparent;
            --aiy-tab-border: transparent;
            --aiy-tab-color: var(--aiy-muted);
            --aiy-tab-bg-active: rgba(255,255,255,0.92);
            --aiy-tab-border-active: rgba(226,232,240,0.9);
            --aiy-tab-color-active: var(--aiy-text);
            --aiy-tab-shadow-active: 0 12px 26px rgba(15,23,42,.08);

            --aiy-controls-bg: rgba(255,255,255,0.75);
            --aiy-controls-border: rgba(226,232,240,0.9);
            --aiy-controls-color: var(--aiy-text);
        }

        /* iOS/Android: remove ugly tap highlight globally */
        html, body {
          -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        
        
        

                .aiy-exp-outer{
  /* Full-bleed container (edge-to-edge) */
  width:100%;
  max-width:100%;
  position:relative;
  left:auto;
  right:auto;
  margin-left:0;
  margin-right:0;

  /* Theme owns ALL backgrounds */
  background:transparent !important;
  background-image:none !important;

  font-family:'Plus Jakarta Sans', sans-serif;
  color: var(--aiy-page-text, var(--aiy-text));

  padding:24px 0 80px;
  overflow-x:hidden;
  z-index:1;
}



        

body.aiy-immersive-active{
  /* Soft theme-aware overrides for immersive mode */
  --aiy-page-text: rgba(255,255,255,0.90);
  --aiy-h1-color: rgba(255,255,255,0.92);
  --aiy-desc-color: rgba(255,255,255,0.38);

  --aiy-tab-bg: rgba(255,255,255,0.16);
  --aiy-tab-border: rgba(255,255,255,0.20);
  --aiy-tab-color: rgba(255,255,255,0.62);

  --aiy-tab-bg-active: rgba(15,23,42,0.62);
  --aiy-tab-border-active: rgba(255,255,255,0.26);
  --aiy-tab-color-active: #ffffff;
  --aiy-tab-shadow-active: 0 18px 40px -26px rgba(0,0,0,0.55);

  --aiy-controls-bg: rgba(255,255,255,0.14);
  --aiy-controls-border: rgba(255,255,255,0.20);
  --aiy-controls-color: rgba(255,255,255,0.86);
}
.aiy-exp-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        .aiy-header { text-align: center; margin-bottom: 50px; }
        .aiy-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
            padding: 8px 20px; border-radius: 99px; color: white;
            font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
            box-shadow: 0 8px 20px -5px rgba(139, 92, 246, 0.4); margin-bottom: 24px;
        }
        .aiy-h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin: 0 0 16px 0; color: var(--aiy-h1-color, var(--aiy-text)); }
        .aiy-desc { font-size: 1.1rem; color: var(--aiy-desc-color, var(--aiy-muted)); max-width: 600px; margin: 0 auto; line-height: 1.6; }

        .aiy-controls {
            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
            margin-bottom: 40px; position: sticky; top: var(--aiy-sticky-top, 20px); z-index: 100;
        }

        .aiy-tabs {
            display: flex; gap: 6px; background: rgba(255,255,255,0.6); backdrop-filter: blur(12px);
            padding: 6px; border-radius: 99px; border: 1px solid var(--aiy-border);
            box-shadow: 0 4px 20px -5px rgba(0,0,0,0.05);
            overflow: hidden; /* clip iOS tap-highlight / focus paint to pill */
            outline: none;
        }
        .aiy-tab {
            padding: 10px 18px; border-radius: 99px; border: 1px solid var(--aiy-tab-border); background: var(--aiy-tab-bg);
            color: var(--aiy-tab-color); font-weight: 700; font-size: 0.85rem; cursor: pointer;
            transition: all 0.2s ease; display: flex; align-items: center; gap: 6px;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            user-select: none;
        }
        /* Hover only on real-hover devices (prevents sticky-hover on mobile) */
        @media (hover: hover) and (pointer: fine) {
          .aiy-tab:hover { color: var(--aiy-text); background: rgba(255,255,255,0.5); }
        }
        .aiy-tab.active { background: var(--aiy-tab-bg-active); color: var(--aiy-tab-color-active); box-shadow: var(--aiy-tab-shadow-active); }

        .aiy-actions { display: flex; gap: 12px; align-items: center; }

        .aiy-sort-wrap {
            position: relative; display: flex; align-items: center;
            background: var(--aiy-controls-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--aiy-controls-border); border-radius: 99px;
            padding: 0 16px; height: 44px; gap: 8px; transition: all 0.2s;
            overflow: hidden; /* prevent square focus paint on iOS */
            -webkit-tap-highlight-color: var(--aiy-controls-color);
            outline: none;
        }
        @media (hover: hover) and (pointer: fine) {
          .aiy-sort-wrap:hover { background: var(--aiy-glass-hover); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        }
        .aiy-select {
            appearance: none; -webkit-appearance: none; border: none; background: transparent;
            font-size: 0.85rem; font-weight: 700; color: var(--aiy-text); cursor: pointer;
            padding-right: 16px; outline: none; font-family: inherit;
            -webkit-tap-highlight-color: transparent;
        }
        .aiy-select option { background: #fff; color: #333; }

        /* Remove ugly square focus ring on touch, keep accessible focus for keyboard */
        .aiy-tab:focus,
        .aiy-select:focus,
        .wiooz-card:focus {
            outline: none;
        }
        .aiy-tab:focus-visible,
        .aiy-select:focus-visible,
        .wiooz-card:focus-visible {
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
        }

        /* Touch devices: prevent the focus-visible ring (can appear as blue side lines on iOS)
           Keep focus-visible for keyboard/mouse.
        */
        @media (hover: none), (pointer: coarse) {
          .aiy-tab:focus-visible,
          .aiy-select:focus-visible,
          .wiooz-card:focus-visible {
            box-shadow: none !important;
          }
        }

        
/* Force-disable theme link active/focus effects that can appear as blue side lines / dark frames on iOS */
.wiooz-card:focus,
.wiooz-card:active,
.aiy-tab:focus,
.aiy-tab:active,
.aiy-select:focus,
.aiy-select:active {
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
/* iOS sometimes paints a white rect while focusing select */
        .aiy-sort-wrap:focus-within { background: rgba(255,255,255,0.72); }
        .aiy-select:focus { background: transparent; }

        .aiy-btn-glass {
            display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 44px;
            background: var(--aiy-controls-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--aiy-controls-border); border-radius: 99px;
            color: var(--aiy-controls-color); font-weight: 700; font-size: 0.85rem; text-decoration: none;
            transition: all 0.2s ease;
        }
        .aiy-btn-glass:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

        .aiy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }

        .aiy-card {
            background: #fff; border: 1px solid rgba(226, 232, 240, 0.6);
            border-radius: 32px; overflow: hidden; text-decoration: none;
            display: flex; flex-direction: column; transition: all 0.4s ease;
            position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.02);
        }
        /* Desktop hover only (mobile Safari keeps :hover after tap -> looks like black frame) */
        @media (hover: hover) and (pointer: fine) {
          .aiy-card:hover { transform: translateY(-8px); border-color: var(--aiy-tab-border-active); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.08); }
        }
        @media (hover: none), (pointer: coarse) {
          .aiy-card:hover { transform: none; border-color: rgba(226, 232, 240, 0.6); box-shadow: 0 4px 20px rgba(0,0,0,0.02); }
          .aiy-card:active { box-shadow: 0 18px 40px -26px rgba(0,0,0,0.35); }
        }
        .aiy-card.hidden { display: none !important; }

        .aiy-cover { height: 180px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .aiy-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        @media (hover: hover) and (pointer: fine) {
          .aiy-card:hover .aiy-cover img { transform: scale(1.05); }
        }
        .aiy-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); }

        .aiy-cover-gradient { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
        .aiy-cover-icon { color: rgba(15, 23, 42, 0.6); transition: transform 0.4s ease; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); }
        @media (hover: hover) and (pointer: fine) {
          .aiy-card:hover .aiy-cover-icon { transform: scale(1.1) rotate(-5deg); color: rgba(15, 23, 42, 0.8); }
        }

        .aiy-type-tag {
            position: absolute; top: 16px; left: 16px; z-index: 10;
            background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
            padding: 6px 12px; border-radius: 12px; font-size: 0.7rem; font-weight: 800;
            color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .aiy-card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
        .aiy-card-title {
            font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0; line-height: 1.4;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }

        .aiy-meta {
            margin-top: auto; padding-top: 16px; border-top: 1px solid #f1f5f9;
            display: flex; justify-content: space-between; align-items: center;
        }
        .aiy-score-pill {
            display: inline-flex; align-items: center; gap: 6px;
            background: #ecfdf5; color: #059669; padding: 6px 12px;
            border-radius: 99px; font-weight: 800; font-size: 0.85rem;
        }
        .aiy-score-pill.vs { background: #fff7ed; color: #d97706; }
        .aiy-date { font-size: 0.85rem; color: var(--aiy-muted); font-weight: 600; }

        @media(max-width: 768px) {
            .aiy-exp-outer { padding-top: 18px; margin-top: 0; }
            .aiy-h1 { font-size: 2rem; }
            /* Never allow the page to "push" sideways on mobile */
            .aiy-exp-outer, .aiy-exp-inner { overflow-x: clip; }

            .aiy-controls { flex-direction: column; align-items: stretch; position: static; gap: 12px; }

            /* Tabs: always fit 3 buttons full width */
            .aiy-tabs { width: 100%; padding: 4px; gap: 6px; overflow: hidden; }
            .aiy-tab {
                flex: 1 1 0;
                min-width: 0;
                white-space: nowrap;
                justify-content: center;
                padding: 10px 10px;
                font-size: 0.82rem;
            }

            /* Mobile: make each control full-width (like /kategoriler/) */
            .aiy-actions {
                display: grid;
                grid-template-columns: 1fr;
                gap: 12px;
                align-items: stretch;
            }
            .aiy-sort-wrap, .aiy-btn-glass {
                width: 100%;
                min-width: 0;
                justify-content: center;
            }
            .aiy-sort-wrap { padding: 0 12px; }
            .aiy-select {
                width: 100%;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .aiy-card { border-radius: 24px; }

            .aiy-select { font-size: 16px; }
        }
    

/* hide helper */
.wiooz-card.hidden{display:none!important;}

/* ===== Shared Premium Card (from Wiooz home builder) ===== */
.wiooz-card{
  min-width:0;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.8);
  text-decoration:none;
  color:#1e293b;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  position:relative;
  /* will-change removed (causes iOS press artifacts) */
  will-change: auto;
-webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@media (hover: hover) and (pointer: fine) {
  .wiooz-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -10px rgba(0,0,0,.2);
    border-color:#cbd5e1;
  }
  .wiooz-card:hover .wiooz-card-img{ transform:scale(1.03); }
}
@media (hover: none), (pointer: coarse) {
  /* On touch devices, iOS can "stick" :hover and paint dark edges on press.
     Keep cards stable and avoid dark shadows/borders. */
  .wiooz-card:hover,
  .wiooz-card:active{
    transform:none !important;
    box-shadow:0 4px 20px rgba(0,0,0,.05) !important;
    border-color:rgba(226,232,240,.8) !important;
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

.wiooz-card-badge-left{
  position:absolute; top:12px; left:12px; z-index:10;
  border-radius:999px; padding:4px 10px; font-size:.7rem; font-weight:800;
  background:rgba(239,246,255,.95); color:#1e40af; border:1px solid #dbeafe;
  backdrop-filter: blur(6px);
}
.wiooz-card-badge-right{
  position:absolute; top:12px; right:12px; z-index:10;
  border-radius:999px; padding:4px 10px; font-size:.7rem; font-weight:800;
  background:rgba(255,251,235,.95); color:#b45309; border:1px solid #fef3c7;
  backdrop-filter: blur(6px);
  display:flex; align-items:center; gap:6px;
}
.wiooz-card-img-wrap{
  width:100%; height:190px; aspect-ratio: 16 / 9; position:relative; overflow:hidden;
  background:#f1f5f9; display:flex; align-items:center; justify-content:center;
}
.wiooz-card-img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
/* hover image zoom moved into hover media query above */

.wiooz-dyn-vs{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(59,130,246,.14) 0%, rgba(59,130,246,0) 45%),
    radial-gradient(circle at 70% 70%, rgba(249,115,22,.14) 0%, rgba(249,115,22,0) 45%),
    linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
}
.wiooz-dyn-label{
  position:absolute; top:12px; left:12px;
  font-size:.72rem; font-weight:900;
  color:#1e40af; background:rgba(239,246,255,.95);
  border:1px solid #dbeafe;
  border-radius:999px; padding:4px 10px;
  backdrop-filter: blur(6px);
}
.wiooz-vs-side{
  width:44%;
  text-align:center;
  font-weight:800;
  color:#0f172a;
  font-size:1.05rem;
  padding:0 10px;
  line-height:1.2;
}
.wiooz-vs-badge{
  width:54px; height:54px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#f97316 0%,#fb923c 100%);
  box-shadow:0 10px 20px rgba(249,115,22,.3);
  transform: rotate(-6deg);
}

/* Top badge (score/winner) inside image area */
.wiooz-top-pill{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.45);
  color:#0f172a;
  font-weight:900;
  font-size:.86rem;
  white-space:nowrap;
  max-width:calc(100% - 28px);
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter: blur(10px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

@media(max-width:768px){
  .wiooz-top-pill{ bottom:12px; padding:7px 12px; font-size:.84rem; }
}
.wiooz-card-body{
  padding:16px 22px 24px;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
  background:#fff;
}
.wiooz-card-title{
  margin:0;
  font-size:1.15rem;
  color:#0f172a;
  line-height:1.35;
  font-weight:800;
  text-align:left;
}
.wiooz-card-title.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wiooz-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.wiooz-pill{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:10px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#475569;
  font-weight:700;
  font-size:.78rem;
  white-space:nowrap;
}

.wiooz-pill-more{
  background:rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.18);
  color:#1d4ed8;
}

        .wiooz-score-pill{
            display:inline-flex; align-items:center; justify-content:center;
            padding: 8px 12px; border-radius: 999px;
            background: rgba(59,130,246,0.12);
            border: 1px solid rgba(59,130,246,0.22);
            color: #1d4ed8;
            font-weight: 800; font-size: 0.85rem;
            white-space: nowrap;
        }
        .wiooz-meta-row{ gap: 10px; }
        @media(max-width:768px){
            .wiooz-score-pill{ padding: 7px 10px; font-size:0.82rem; }
        }
    
.wiooz-meta-row{ margin-top:auto; display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.wiooz-btn-action{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:12px 18px;
  background:linear-gradient(90deg,#3b82f6 0%,#4f46e5 100%);
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  border-radius:14px;
  border:none;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(59,130,246,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wiooz-btn-action:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(59,130,246,.35);
}
.wiooz-footer-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  color:#94a3b8;
  font-weight:700;
}
.wiooz-badge-new{
  display:inline-flex; align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.25);
  color:#065f46;
  font-weight:900;
}

/* ===== Mobile overflow fixes (category page controls) ===== */
@media (max-width: 640px){
  .aiy-controls{ flex-direction:column; align-items:stretch; gap:10px; }
  .aiy-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .aiy-tabs::-webkit-scrollbar{ display:none; }
  .aiy-tab{ flex:0 0 auto; }
  .aiy-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    width:100%;
  }
  .aiy-sort-wrap, .aiy-btn-glass{
    width:100%;
    justify-content:center;
  }
  .aiy-sort-wrap{ padding:0 12px; }
  .aiy-select{ width:100%; max-width:100%; }
  .aiy-grid{ grid-template-columns: 1fr; gap:16px; }
}


/* Winner pill (compare) */
.wiooz-winner-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.75);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);font-weight:700;font-size:13px;color:#0f172a;}
@media (max-width:480px){.wiooz-winner-pill{padding:9px 11px;font-size:12.5px;}}



/* =========================================================
 * Breadcrumb (Home › Categories) - sits under header (Option B)
 * ========================================================= */
.aiy-breadcrumb{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin: 18px 0 6px;
  font-weight:600;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.70);
}
.aiy-bc-link{
  color: rgba(255,255,255,0.70);
  text-decoration:none;
}
.aiy-bc-link:hover{ color: rgba(255,255,255,0.92); }
.aiy-bc-sep{
  color: rgba(255,255,255,0.38);
  font-weight:700;
}
.aiy-bc-current{
  color: rgba(255,255,255,0.92);
  font-weight:600;
}


/* =========================================================
 * Mobile tabs: ALWAYS fit (3 equal columns)
 * ========================================================= */
@media (max-width: 980px) and (min-width: 641px){
  /* iOS/Safari header height calc can explode; keep this page stable */
  .aiy-exp-outer{ padding-top: 16px !important; }
  .aiy-exp-outer, .aiy-exp-inner{ overflow-x: hidden !important; }
  .aiy-header{ margin-bottom: 26px !important; }

  .aiy-controls{ flex-direction: column; align-items: stretch; gap: 12px; }
  /* actions should NOT create a second column on phones */
  .aiy-actions{ width: 100%; display:block; }

  .aiy-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .aiy-tab{
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.60);
    border: 1px solid var(--aiy-border);
    box-shadow: 0 4px 16px -10px rgba(0,0,0,0.12);
    white-space: nowrap;
  }
  /* Hide tab icons on phones to guarantee fit */
  .aiy-tab svg{ display:none !important; }

  /* Sort full width under tabs */
  .aiy-sort-wrap{ width: 100%; justify-content: center; }
}





/* Make top hero text readable on dark */
.aiy-header .aiy-h1{ color: rgba(255,255,255,.92) !important; text-shadow: 0 10px 28px rgba(0,0,0,.35); }
.aiy-header .aiy-desc{ color: rgba(255,255,255,.68) !important; text-shadow: 0 8px 22px rgba(0,0,0,.28); }

/* Breadcrumb minimal, no icons/pills; ensure white */
.aiy-breadcrumb, .aiy-bc, .aiy-crumb, .aiyexp-bc{
  color: rgba(255,255,255,.72) !important;
}
.aiy-breadcrumb a, .aiy-bc a, .aiy-crumb a, .aiyexp-bc a{
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
}
.aiy-breadcrumb a:hover, .aiy-bc a:hover, .aiy-crumb a:hover, .aiyexp-bc a:hover{
  text-decoration: underline;
}
.aiy-breadcrumb .sep, .aiy-bc .sep, .aiy-crumb .sep, .aiyexp-bc .sep{
  opacity: .55;
}

/* Controls glass on dark */
.aiy-tabs, .aiy-sort-wrap{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.aiy-tab{ color: rgba(255,255,255,.70) !important; }
.aiy-tab.active{
  background: rgba(255,255,255,.20) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.30) !important;
}
.aiy-select{ color: rgba(255,255,255,.92) !important; }



@media (max-width: 768px){
  /* Mobile scroll performance: remove heavy blur and unnecessary GPU layer hints */
  .aiy-tabs, .aiy-sort-wrap{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .aiy-tab.active{
    box-shadow: none !important;
  }
  .wiooz-card{
    will-change: auto !important;
  }
  .wiooz-card-badge-left,
  .wiooz-card-badge-right{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ===== v4.4.2 Guard: prevent horizontal overflow / sideways scroll ===== */
html, body{ overflow-x:hidden; }
@supports (overflow: clip){
  html, body{ overflow-x:clip; }
}
.aiy-exp-outer{ max-width:100%; }



/* ===== v4.4.2 Mobile tabs: 3 buttons always fit (no overflow) ===== */
@media (max-width: 640px){
  .aiy-controls{ gap:10px; }
  .aiy-tabs{
    display:flex !important;
    width:100% !important;
    overflow-x: hidden !important;
    gap:10px !important;
  }
  .aiy-tab{
    flex:1 1 0 !important;
    min-width:0 !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
}

/* ===== v4.4.2 Reduce jank: simplify card transitions on touch ===== */
@media (max-width: 768px){
  .wiooz-card{ transition: box-shadow .2s ease, border-color .2s ease !important; }
}

/* iOS long-press/selection/tap paint hardening */
.wiooz-card,
.aiy-tab,
.aiy-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}


/* === v4.4.6 FINAL mobile press/focus + hover stability === */
.wiooz-card,
.aiy-tab,
.aiy-select,
.aiy-sort-wrap{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none !important;
}

.wiooz-card{
  overflow: hidden; /* ensure inner gradients/pseudos never bleed on iOS press */
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  transform: translateZ(0); /* stabilize rounded corner compositing */
}

.wiooz-card:focus,
.wiooz-card:active{
  outline: none !important;
  box-shadow: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.aiy-select{
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
}

.aiy-select:focus,
.aiy-select:active,
.aiy-sort-wrap:focus-within{
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Only apply hover effects on real hover devices (desktop). Prevent "sticky hover" on mobile. */
@media (hover: hover) and (pointer: fine) {
  .wiooz-card:hover{
    transform: translateY(-2px);
    /* keep shadow neutral (avoid black edges on dark backgrounds) */
    box-shadow: 0 10px 30px rgba(15,23,42,.14);
    border-color: rgba(226,232,240,.95);
  }
}

/* Touch devices: lock visual state */
@media (hover: none), (pointer: coarse) {
  .wiooz-card:hover,
  .wiooz-card:active{
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
    border-color: rgba(226,232,240,.8) !important;
  }
  /* iOS blue side-lines (focus ring) */
  .wiooz-card:focus-visible,
  .aiy-tab:focus-visible,
  .aiy-select:focus-visible{
    box-shadow: none !important;
  }
}