:root{
  /* Avatar sütununun genişliği: plan kartı bunu iki yandan geri alıyor. */
  --ai-avatar-payi:54px;
  --ai-ink:#17233c;
  --ai-ink-2:#24445a;
  --ai-muted:#687d8d;
  --ai-line:#dce8ed;
  --ai-teal:#16b8b4;
  --ai-blue:#1597d4;
  --ai-orange:#ff6437;
  --ai-soft:#f4fbfc;
  --ai-pink:#f4728a;
  --ai-yellow:#ffd56a;
  --ai-shadow:0 18px 52px rgba(23,35,60,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ai-page{margin:0;min-height:100vh;background:
  radial-gradient(circle at 7% 2%,rgba(22,184,180,.13),transparent 28rem),
  radial-gradient(circle at 94% 14%,rgba(21,151,212,.11),transparent 26rem),
  linear-gradient(180deg,#fbfefe 0%,#f6fafb 100%);color:var(--ai-ink);font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,textarea{font:inherit}
a{color:inherit}
[hidden]{display:none!important}

.ai-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:70px;padding:0 clamp(12px,4vw,38px);border-bottom:1px solid rgba(220,232,237,.9);background:rgba(255,255,255,.9);backdrop-filter:blur(18px)}
.ai-history-toggle,.ai-new{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--ai-line);border-radius:13px;background:#fff;color:var(--ai-ink);cursor:pointer;transition:.2s ease}
.ai-history-toggle:hover,.ai-new:hover{border-color:var(--ai-teal);color:var(--ai-teal);transform:translateY(-1px)}
.ai-history-toggle svg{width:20px;height:20px}.ai-new{font-size:20px}
.ai-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;font-weight:850;letter-spacing:-.04em;white-space:nowrap}
.ai-brand img{width:38px;height:38px;border-radius:12px;padding:6px;background:linear-gradient(135deg,var(--ai-teal),var(--ai-blue));box-shadow:0 8px 24px rgba(21,151,212,.2)}
/* Tam logo: yazı ve işaret aynı SVG'de, birlikte ölçekleniyor.
   Kutu, arka plan ve gölge yok — logo kendi biçimini taşıyor. */
.ai-brand .ai-brand-logo{
  width:auto;height:34px;max-width:190px;object-fit:contain;
  border-radius:0;padding:0;background:none;box-shadow:none;
}
.ai-brand span span{color:var(--ai-teal)}
.ai-mode{margin-left:auto;display:flex;align-items:center;padding:5px;border:1px solid var(--ai-line);border-radius:999px;background:#fff}
.ai-mode a{min-height:36px;display:flex;align-items:center;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--ai-muted);font-size:12px;font-weight:800;transition:.2s ease}
.ai-mode a[aria-current="page"]{background:var(--ai-ink);color:#fff;box-shadow:0 6px 18px rgba(23,35,60,.18)}

.ai-sidebar{position:fixed;inset:0 auto 0 0;z-index:80;width:min(360px,88vw);padding:18px;background:#fff;border-right:1px solid var(--ai-line);box-shadow:26px 0 70px rgba(23,35,60,.18);overflow:auto;animation:aiSlide .22s ease both}
.ai-sidebar-backdrop{position:fixed;inset:0;z-index:70;border:0;background:rgba(15,28,45,.34);backdrop-filter:blur(2px);cursor:pointer}
.ai-sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:4px 2px 18px}
.ai-sidebar-head small{display:block;margin-bottom:3px;color:var(--ai-teal);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.ai-sidebar-head h2{margin:0;font:800 29px/1.05 "Playfair Display",Georgia,serif;color:var(--ai-ink)}
.ai-sidebar-head button{width:36px;height:36px;border:1px solid var(--ai-line);border-radius:12px;background:#fff;color:var(--ai-muted);font-size:22px;cursor:pointer}
.ai-sidebar-new{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--ai-ink),#274f68);color:#fff;font-weight:850;cursor:pointer;box-shadow:0 10px 26px rgba(23,35,60,.17)}
.ai-sidebar-new span:first-child{font-size:20px}.ai-history-section{margin-top:24px}.ai-history-section h3{margin:0 0 9px;padding:0 4px;color:#8193a0;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.ai-history-list{display:grid;gap:7px}.ai-history-empty{padding:12px 9px;color:#8a9ca8;font-size:12px}
.ai-history-open{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:60px;padding:9px;border:1px solid transparent;border-radius:15px;background:transparent;text-align:left;color:var(--ai-ink);cursor:pointer}
.ai-history-open:hover,.ai-history-open.active{background:#f2f8fa;border-color:#e1edf1}
.ai-history-mode{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e7f8f6;color:#087a78;font-size:16px}
.ai-history-name{min-width:0;display:grid;gap:3px}.ai-history-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.ai-history-name small{color:#8a9ca8;font-size:10px}
.ai-history-actions{display:flex;gap:2px}.ai-history-actions button{width:28px;height:28px;border:0;border-radius:9px;background:transparent;color:#8193a0;cursor:pointer}.ai-history-actions button:hover{background:#fff;color:var(--ai-orange)}

.ai-main{width:min(960px,100%);margin:0 auto;padding:0 18px 190px}
.ai-welcome{padding:clamp(42px,8vw,82px) 0 26px;text-align:center}
.ai-orb{width:76px;height:76px;margin:0 auto 18px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(135deg,var(--ai-teal),var(--ai-blue));box-shadow:0 18px 46px rgba(21,151,212,.25);position:relative}
.ai-orb:after{content:"";position:absolute;inset:-9px;border:1px solid rgba(22,184,180,.24);border-radius:32px}
.ai-orb img{width:47px;height:47px}.ai-orb-route{background:linear-gradient(135deg,#184f72,var(--ai-teal))}.ai-orb-route svg{width:43px;height:43px;color:#fff}
.ai-kicker{margin:0 0 8px;color:#16888b;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:900}
.ai-welcome h1{margin:0 auto;max-width:790px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(36px,8vw,68px);line-height:.98;letter-spacing:-.04em;color:var(--ai-ink)}
.ai-welcome p{max-width:680px;margin:18px auto 0;color:var(--ai-muted);font-size:15px;line-height:1.7}
.ai-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px auto 0;max-width:760px}
.ai-example{min-height:72px;padding:14px 16px;border:1px solid var(--ai-line);border-radius:18px;background:rgba(255,255,255,.86);color:var(--ai-ink);text-align:left;font-size:13px;font-weight:750;line-height:1.4;cursor:pointer;box-shadow:0 10px 30px rgba(16,42,67,.05);transition:.2s ease}
.ai-example:hover{transform:translateY(-2px);border-color:rgba(22,184,180,.65);box-shadow:0 14px 35px rgba(16,42,67,.09)}
.ai-example small{display:block;margin-bottom:5px;color:var(--ai-teal);font-size:10px;text-transform:uppercase;letter-spacing:.12em}

.ai-thread{padding:30px 0 10px}.ai-message{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;margin:0 0 28px;animation:aiIn .24s ease both}.ai-message.user{grid-template-columns:minmax(0,1fr)}
.ai-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--ai-teal),var(--ai-blue));box-shadow:0 8px 22px rgba(21,151,212,.17)}.ai-avatar img{width:28px;height:28px}
.ai-body{min-width:0}.ai-label{margin:0 0 8px;color:var(--ai-muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.ai-user-bubble{justify-self:end;max-width:min(700px,88%);padding:15px 18px;border-radius:22px 22px 6px 22px;background:var(--ai-ink);color:#fff;line-height:1.58;white-space:pre-wrap;box-shadow:0 12px 30px rgba(16,42,67,.16)}
.ai-answer{padding:2px 2px 0;color:#183b50;font-size:15px;line-height:1.72}.ai-answer h2,.ai-answer h3{margin:22px 0 9px;color:var(--ai-ink);letter-spacing:-.025em}.ai-answer h2{font-size:22px}.ai-answer h3{font-size:17px}.ai-answer p{margin:0 0 12px}.ai-answer ul,.ai-answer ol{margin:8px 0 14px;padding-left:22px}.ai-answer li{margin:6px 0}.ai-answer strong{color:var(--ai-ink)}
.ai-answer .ai-time{display:inline-flex;align-items:center;margin-right:8px;padding:2px 8px;border-radius:999px;background:#e8f8f7;color:#087a78;font-size:12px;font-weight:900}
.ai-answer blockquote{margin:14px 0;padding:12px 15px;border-left:3px solid var(--ai-teal);border-radius:0 12px 12px 0;background:#f0faf9;color:#416170}
.ai-thinking{display:flex;align-items:center;gap:8px;min-height:46px;color:var(--ai-muted);font-size:13px;font-weight:700}.ai-thinking i{width:8px;height:8px;border-radius:50%;background:var(--ai-teal);animation:aiDot 1.2s infinite}.ai-thinking i:nth-child(2){animation-delay:.18s}.ai-thinking i:nth-child(3){animation-delay:.36s}

.ai-product-group-head{display:flex;align-items:center;gap:12px;margin:22px 0 10px;padding-top:8px}.ai-product-group-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#e7f8f6,#e9f5fd);font-size:18px}.ai-product-group-head h3{margin:0;color:var(--ai-ink);font-size:17px}.ai-product-group-head p{margin:3px 0 0;color:var(--ai-muted);font-size:11px}
.ai-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}.ai-product{position:relative;min-width:0;display:grid;grid-template-columns:108px minmax(0,1fr);border:1px solid var(--ai-line);border-radius:21px;background:#fff;box-shadow:0 12px 32px rgba(16,42,67,.07);overflow:hidden;transition:.2s ease}.ai-product:hover{border-color:rgba(22,184,180,.72);transform:translateY(-2px);box-shadow:0 18px 42px rgba(16,42,67,.11)}
.ai-product-media{position:relative;min-height:190px;background:linear-gradient(135deg,#eaf7f7,#e8f2fa);overflow:hidden}.ai-product-media img{width:100%;height:100%;object-fit:cover}.ai-product-media:empty:before{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--ai-teal);font-size:34px}
.ai-product-content{min-width:0;display:flex;flex-direction:column;padding:14px}.ai-product-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ai-product-provider{color:#16888b;text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:900}.ai-product-match{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;border-radius:999px;background:#eef7f8;color:#5a7280;font-size:9px;font-weight:800}
.ai-product h4{margin:9px 0 6px;font-size:14px;line-height:1.4;color:var(--ai-ink)}.ai-product-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px;color:var(--ai-muted);font-size:11px;line-height:1.45}
.ai-product-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;color:var(--ai-muted);font-size:10px;font-weight:750}.ai-product-meta span{padding:3px 6px;border-radius:8px;background:#f4f8fa}.ai-product-price{color:var(--ai-orange)!important;font-size:13px!important;font-weight:900!important;background:#fff4ef!important}.ai-product-price-missing{color:var(--ai-muted);font-weight:800}
.ai-product-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.ai-product-open,.ai-product-secondary{min-height:35px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border-radius:11px;font-size:10px;font-weight:900;text-decoration:none;cursor:pointer}.ai-product-open{flex:1;background:var(--ai-ink);color:#fff}.ai-product-secondary{border:1px solid var(--ai-line);background:#fff;color:var(--ai-ink)}.ai-product-secondary:hover,.ai-product-secondary.selected{border-color:var(--ai-teal);background:#eaf9f7;color:#087a78}
.ai-disclaimer{margin-top:12px;color:#8193a0;font-size:10.5px;line-height:1.5}

.ai-route-actions{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 4px}.ai-route-action{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--ai-line);border-radius:13px;background:#fff;color:var(--ai-ink);font-size:11px;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:0 8px 22px rgba(23,35,60,.06)}.ai-route-action:hover,.ai-route-action.selected{border-color:var(--ai-teal);color:#087a78;background:#ecfaf8}.ai-route-primary{border:0;background:linear-gradient(135deg,var(--ai-teal),var(--ai-blue));color:#fff}.ai-route-primary:hover{color:#fff;background:linear-gradient(135deg,#0fa8a4,#1088c2)}

.ai-compare-tray{position:fixed;left:50%;bottom:112px;z-index:56;transform:translateX(-50%);display:flex;align-items:center;gap:9px;width:min(560px,calc(100% - 28px));padding:10px 11px 10px 14px;border:1px solid var(--ai-line);border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 16px 46px rgba(23,35,60,.2);backdrop-filter:blur(16px)}.ai-compare-tray>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#e7f8f6;color:#087a78;font-size:11px;font-weight:900}.ai-compare-tray strong{min-width:0;flex:1;font-size:11px}.ai-compare-tray button{min-height:34px;padding:0 11px;border:0;border-radius:10px;background:var(--ai-ink);color:#fff;font-size:10px;font-weight:900;cursor:pointer}.ai-compare-tray button:last-child{width:32px;padding:0;background:#f1f5f6;color:var(--ai-muted)}
.ai-location-state{position:fixed;right:18px;bottom:126px;z-index:58;max-width:260px;padding:10px 13px;border:1px solid var(--ai-line);border-radius:14px;background:#fff;color:var(--ai-muted);font-size:11px;font-weight:750;box-shadow:0 10px 28px rgba(16,42,67,.12)}
.ai-error{padding:13px 15px;border:1px solid #ffd2c6;border-radius:15px;background:#fff5f1;color:#a33a1c;font-size:13px;line-height:1.5}

.ai-composer-wrap{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:14px 16px max(14px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(248,251,252,0),rgba(248,251,252,.96) 25%,#f8fbfc 55%)}
.ai-composer{width:min(920px,100%);margin:0 auto;padding:8px;border:1px solid #cfe0e6;border-radius:25px;background:#fff;box-shadow:0 18px 55px rgba(16,42,67,.16);display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:end;gap:6px}.ai-composer textarea{width:100%;min-height:44px;max-height:150px;padding:11px 7px;border:0;outline:0;resize:none;background:transparent;color:var(--ai-ink);font-size:14px;line-height:1.5}.ai-composer textarea::placeholder{color:#8a9ca8}.ai-tool,.ai-send{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:15px;cursor:pointer}.ai-tool{background:#f0f6f8;color:#5b7282}.ai-tool.active{background:#e1f7f5;color:#087a78}.ai-send{background:var(--ai-orange);color:#fff;box-shadow:0 8px 20px rgba(255,100,55,.25)}.ai-send:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}.ai-tool svg,.ai-send svg{width:20px;height:20px}.ai-composer-note{width:min(920px,100%);margin:7px auto 0;text-align:center;color:#8193a0;font-size:10px}

@keyframes aiDot{0%,80%,100%{transform:scale(.65);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes aiIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes aiSlide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

html[dir="rtl"] .ai-sidebar{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--ai-line)}
html[dir="rtl"] .ai-user-bubble{justify-self:start;border-radius:22px 22px 22px 6px}
html[dir="rtl"] .ai-product{text-align:right}

@media(max-width:820px){.ai-products{grid-template-columns:1fr}.ai-product{grid-template-columns:118px minmax(0,1fr)}}
@media(max-width:700px){.ai-header{height:64px;padding:0 10px;gap:8px}.ai-brand{font-size:18px}.ai-brand img{width:35px;height:35px}.ai-mode a{padding:0 10px;font-size:11px}.ai-history-toggle,.ai-new{width:36px;height:36px}.ai-main{padding-left:14px;padding-right:14px;padding-bottom:172px}.ai-welcome{padding-top:38px}.ai-welcome h1{font-size:43px}.ai-examples{grid-template-columns:1fr;gap:9px}.ai-example{min-height:58px}.ai-message{grid-template-columns:36px minmax(0,1fr);gap:10px}.ai-avatar{width:36px;height:36px;border-radius:12px}.ai-avatar img{width:23px;height:23px}.ai-user-bubble{max-width:94%;font-size:14px}.ai-answer{font-size:14px}.ai-composer-wrap{padding-left:10px;padding-right:10px}.ai-location-state{left:12px;right:12px;bottom:124px;max-width:none;text-align:center}.ai-compare-tray{bottom:116px}}
@media(max-width:520px){.ai-brand .ai-brand-logo{height:26px;max-width:132px}/*
 * ÖLÇÜLDÜ: header 427 piksel genişliğe çıkıyordu, pencere 412 —
 * yani taşan içerik değil KABIN KENDİSİYDİ. 377 öğe + 30 boşluk +
 * 20 dolgu = 427.
 *
 * Boşluk 4'e, yan dolgu 8'e indi: 377 + 20 + 16 = 413... hâlâ sınırda,
 * o yüzden mod menüsü de daralabiliyor (`min-width:0`).
 */
.ai-header{gap:4px;padding-left:8px;padding-right:8px}
.ai-mode{margin-left:auto;margin-right:auto;min-width:0}.ai-mode a{padding:0 9px}.ai-mode{font-size:12.5px}.ai-welcome p{font-size:13px}.ai-welcome h1{font-size:39px}.ai-product{grid-template-columns:92px minmax(0,1fr)}.ai-product-media{min-height:205px}.ai-product-content{padding:12px}.ai-product-actions{display:grid;grid-template-columns:1fr 1fr}.ai-product-open{grid-column:1/-1}.ai-route-actions{display:grid;grid-template-columns:1fr 1fr}.ai-route-primary{grid-column:1/-1}.ai-composer{grid-template-columns:40px minmax(0,1fr) 40px;border-radius:22px}.ai-tool,.ai-send{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
.ai-history-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px;border-radius:15px}.ai-history-item.active .ai-history-open{background:#f2f8fa;border-color:#e1edf1}.ai-history-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}.ai-route-action,.ai-route-primary{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:13px;font-size:11px;font-weight:900;text-decoration:none;cursor:pointer}.ai-product-group-head>p{margin:0 0 0 auto!important;max-width:44%;color:#8193a0!important;font-size:10px!important;text-align:right}

/* v353: sabit alt sohbet çubuğu + güvenli mobil klavye davranışı */
html{height:100%;overflow:hidden}
body.ai-page{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr)}
.ai-header{position:relative;top:auto}
.ai-main{width:min(960px,100%);height:100%;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-bottom:calc(var(--ai-composer-height,104px) + 28px);-webkit-overflow-scrolling:touch}
.ai-composer-wrap{position:fixed;left:0;right:0;bottom:var(--ai-keyboard-offset,0px);z-index:60;padding:10px 12px max(10px,env(safe-area-inset-bottom));border-top:1px solid rgba(207,224,230,.92);background:rgba(248,251,252,.96);box-shadow:0 -12px 34px rgba(23,35,60,.08);backdrop-filter:blur(18px);transition:bottom .12s ease}
.ai-composer{border-radius:20px;box-shadow:0 8px 28px rgba(16,42,67,.12)}
.ai-send{background:linear-gradient(135deg,var(--ai-teal),var(--ai-blue));color:#fff;box-shadow:0 8px 20px rgba(21,151,212,.24)}
.ai-send:hover:not(:disabled){filter:brightness(.96)}
.ai-thinking{gap:11px;min-height:48px}
.ai-thinking-logo{width:36px;height:36px;display:block;flex:0 0 auto}
.ai-thinking i{display:none}

@media(max-width:700px){
  .ai-main{padding-bottom:calc(var(--ai-composer-height,82px) + 18px)}
  .ai-composer-wrap{padding:8px 9px max(8px,env(safe-area-inset-bottom))}
  .ai-composer-note{display:none}
  .ai-composer{width:100%;border-radius:18px}
}

/* v355: yükleme satırında ikinci avatarı kaldır, yalnız marka animasyonu kalsın */
.ai-message-thinking{display:block;margin-bottom:28px}
.ai-message-thinking .ai-body{width:min(720px,100%)}
.ai-message-thinking .ai-label{margin-left:0}
.ai-message-thinking .ai-thinking{padding-left:0}

/* v357: ana rota cevabından bağımsız ürün tarama durumu */
.ai-offer-state{display:flex;align-items:center;gap:10px;margin:14px 0 4px;padding:11px 13px;border:1px solid #d7ecef;border-radius:14px;background:#f6fbfc;color:#45606a;font-size:.84rem;font-weight:700;line-height:1.45}
.ai-offer-state.loading{color:#176d79;background:#f0fbfc}
.ai-offer-spinner{width:16px;height:16px;border:2px solid #b8e0e5;border-top-color:#149cb1;border-radius:50%;animation:ai-offer-spin .8s linear infinite;flex:0 0 auto}
@keyframes ai-offer-spin{to{transform:rotate(360deg)}}
.ai-product-secondary:disabled{cursor:default;opacity:.72}
.ai-product-secondary.selected{background:#e8f8f3;border-color:#93d8c7;color:#126d5d}
.ai-updated-route{margin:14px 0;padding:14px 16px;border:1px solid #cce8e4;border-radius:16px;background:#f3fbf8}
.ai-updated-route h3{margin:0 0 10px;color:#176d62;font-size:.92rem}
.ai-updated-route ol{margin:0;padding-left:22px;display:grid;gap:8px;color:#263f47;font-size:.88rem}
.ai-updated-route li{padding-left:3px}.ai-updated-route .ai-time{margin-right:8px}.ai-updated-route small{color:#16816d;font-weight:800}

/* v362: rota önce planı gösterir; teklifler ikincil ve kompakt kalır */
/*
 * ═══ PLAN KARTI TAM GENİŞLİK (9 Ağustos) ═══
 * KULLANICI: "Tur rota kısmı böyle güzel ama ekranın yarısında
 * çıkıyor; tam ekran görünsün, ekranın sol tarafındaki boşluk
 * olmasın."
 *
 * Sebep: cevap balonu `36px + kalan` ızgarası ve plan kartı SAĞDAKİ
 * sütunda. Soldaki boşluk avatar sütunu — kart onun yanına
 * sıkışıyordu.
 *
 * Kart ızgaradan çıkarılıyor: negatif kenar boşluğuyla avatar
 * sütununu geri alıyor. Avatar sütunu 36px + 10px aralık = 46px
 * (700px altı), üstünde 42px + 12px = 54px.
 *
 * Cevabın METNİ sütunda kalıyor — orada hizalama doğru, sorun yalnız
 * plan kartında.
 */
/*
 * ═══ PLAN AKIŞA HİZALI (9 Ağustos) ═══
 * KULLANICI: "Ekranın yarısında çıkıyor, sol tarafındaki boşluk
 * olmasın, tam ekran görünsün."
 *
 * Plan `.ai-body` içinde ve o gövde avatar sütunu kadar sağa kaymış
 * durumda; kart bu payı negatif kenar boşluğuyla geri alıyor.
 *
 * ÖNCE YANLIŞ ÖLÇTÜM: kartı PENCEREYE göre okuyup "sağda 29 piksel
 * fazla" sandım ve iki yandan taşırdım — kart akıştan dışarı çıktı.
 * Doğru ölçüt akışın kendisi: ölçüldü, sol pay 0 ve sağ pay 0.
 *
 * Sabit `-54px` yerine değişken: pay iki yerde tanımlıysa biri
 * değişince diğeri unutulur.
 */
.ai-route-plan{margin:16px 0 12px;margin-left:calc(var(--ai-avatar-payi, 54px) * -1);padding:16px;border:1px solid #cfe5e9;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(23,35,60,.06)}
@media(max-width:700px){:root{--ai-avatar-payi:46px}}
.ai-route-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ai-route-plan-head small{display:block;margin-bottom:3px;color:#16888b;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.ai-route-plan-head h2{margin:0;color:var(--ai-ink);font-size:18px;line-height:1.25}
.ai-route-city{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:#e9f8f7;color:#087a78;font-size:10px;font-weight:900}
.ai-route-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ai-route-stop{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;min-width:0}
.ai-route-stop-rail{display:flex;flex-direction:column;align-items:center}
.ai-route-stop-dot{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--ai-teal),var(--ai-blue));color:#fff;font-size:9px;font-weight:900}
.ai-route-stop-rail i{width:2px;min-height:26px;flex:1;background:#d9e9ed}
.ai-route-stop:last-child .ai-route-stop-rail i{display:none}
.ai-route-stop-detail{min-width:0;padding:1px 0 13px}
.ai-route-stop-top{display:flex;align-items:flex-start;gap:8px}
.ai-route-stop-top time{flex:0 0 auto;padding:3px 7px;border-radius:8px;background:#edf8f7;color:#087a78;font-size:10px;font-weight:900}
.ai-route-stop-top h3{min-width:0;margin:1px 0 0;color:var(--ai-ink);font-size:13px;line-height:1.35}
.ai-route-stop-detail p{margin:5px 0 0;color:var(--ai-muted);font-size:11px;line-height:1.45}
.ai-route-stop-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ai-route-stop-meta span{padding:3px 6px;border-radius:7px;background:#f2f7f9;color:#6a7d89;font-size:9px;font-weight:800}
.ai-route-stop-meta span.attached{background:#e8f8f1;color:#12705d}
.ai-route-plan + .ai-route-actions{margin-top:10px}

.ai-product-group-durak,.ai-product-group-guzergah{margin-top:14px}
.ai-product-group-durak .ai-product-group-head,.ai-product-group-guzergah .ai-product-group-head{margin:14px 0 8px;padding-top:0}
.ai-product-group-durak .ai-product-group-icon,.ai-product-group-guzergah .ai-product-group-icon{width:32px;height:32px;border-radius:10px;font-size:14px}
.ai-product-group-durak .ai-product-group-head h3,.ai-product-group-guzergah .ai-product-group-head h3{font-size:14px}
.ai-product-group-durak .ai-product-group-head>p,.ai-product-group-guzergah .ai-product-group-head>p{display:none}
.ai-product-compact{grid-template-columns:86px minmax(0,1fr);min-height:116px;border-radius:16px;box-shadow:0 8px 20px rgba(16,42,67,.06)}
.ai-product-compact .ai-product-media{min-height:116px;max-height:136px}
.ai-product-compact .ai-product-content{padding:10px}
.ai-product-compact .ai-product-top{margin-bottom:5px}
.ai-product-compact .ai-product-provider{font-size:8px;letter-spacing:.1em}
.ai-product-compact h4{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0 0 8px;font-size:12px;line-height:1.35}
.ai-product-compact .ai-product-meta{gap:4px;font-size:8.5px}
.ai-product-compact .ai-product-meta span{padding:3px 5px;border-radius:7px}
.ai-product-compact .ai-product-price{font-size:10px!important}
.ai-product-compact .ai-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.ai-product-compact .ai-product-open,.ai-product-compact .ai-product-secondary{min-height:31px;padding:0 7px;border-radius:9px;font-size:8.5px;line-height:1.2;text-align:center}
.ai-product-compact .ai-product-open{grid-column:auto}
.ai-retry{margin-top:10px;min-height:38px;padding:0 14px;border:1px solid #efb8a8;border-radius:11px;background:#fff;color:#9d3d24;font-weight:850;cursor:pointer}

@media(max-width:700px){
  .ai-route-plan{padding:13px;border-radius:17px}
  .ai-route-plan-head h2{font-size:16px}
  .ai-products{gap:9px}
  .ai-product-compact{grid-template-columns:78px minmax(0,1fr);min-height:108px}
  .ai-product-compact .ai-product-media{min-height:108px;max-height:128px}
  .ai-product-compact .ai-product-content{padding:9px}
  .ai-product-compact h4{font-size:11.5px}
  .ai-product-compact .ai-product-actions{grid-template-columns:1fr 1fr}
}

/* v363: AI küratör notları ve keşif/rota ürünlerinin daha sakin hiyerarşisi */
/*
 * ═══ NOT KARTIN DIŞINA ÇIKTI (10 Ağustos) ═══
 * KULLANICI: "Mavi info yazısını kartın dışına yazmak gerek, böyle hem
 * küçük hem okunmuyor."
 *
 * Kompakt kartta not 9 PUNTOYDU ve ÜÇ SATIRDA KIRPILIYORDU — üstelik
 * kırpılan yer en değerli yerdi: "senin rotana uymaz çünkü…" cümlesi
 * tam orada kesiliyordu.
 *
 * Not artık grubun altında, tam genişlikte, 13 punto ve Tuana'nın
 * avatarıyla. Kartta yalnız kararın özeti bir rozet olarak duruyor.
 */
.ai-not-balon{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:12px 14px;
  border:1px solid #cfe9ec;border-radius:16px;background:linear-gradient(135deg,#eefafa,#f5fbff)}
.ai-not-avatar{flex:0 0 28px;width:28px;height:28px;border-radius:10px;overflow:hidden;background:#16b8b4}
.ai-not-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.ai-not-govde{min-width:0}
.ai-not-govde small{display:block;margin-bottom:3px;color:#0f7d86;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ai-not-govde p{margin:0 0 5px;color:#1e3a44;font-size:13px;line-height:1.5}
.ai-not-govde p:last-child{margin-bottom:0}
/* Karşılaştırma paragrafı biraz daha belirgin: karar orada veriliyor. */
.ai-not-ozet{font-weight:600;color:#17233c}
.ai-not-ozet + p{padding-top:6px;border-top:1px solid rgba(22,184,180,.18)}

/*
 * ═══ UYUM ROZETİ ═══
 * Renk kararı taşıyor: yeşil "planına uyar", kehribar "dikkat". Bir
 * bakışta okunuyor, cümle okumaya gerek kalmıyor.
 */
.ai-product-uyum{align-self:flex-start;margin-bottom:6px;padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.01em}
.ai-product-uyum-uyar{background:#dff5ee;color:#0f8a5f}
.ai-product-uyum-uymaz{background:#fdecdc;color:#b45309}
.ai-product-uymaz-kart{border-color:#f0d9c4;background:#fffaf4}

/* ═══ FAVORİ BİLDİRİMİ ═══
   Nereye kaydedildiğini bir kez söylüyor. Menüyü zorla açmıyoruz:
   kaydeden kişi genellikle okumaya devam ediyor ve açılan menü
   baktığı planı kapatırdı. */
.ai-favori-bildirim{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:60;
  display:flex;align-items:center;gap:6px;padding:11px 16px;border:1px solid #cfe9ec;border-radius:999px;
  background:#fff;color:#17233c;font:inherit;font-size:13.5px;cursor:pointer;
  box-shadow:0 10px 28px rgba(23,35,60,.16);opacity:0;transition:opacity .25s ease,transform .25s ease}
.ai-favori-bildirim.gorunur{opacity:1;transform:translate(-50%,0)}
.ai-favori-bildirim strong{color:#0f7d86}

/* Giriş bölümü menünün altında: geçmiş ve favorilerden sonra, çünkü
   gezgin önce işini yapıyor, hesabı sonra düşünüyor. */
.ai-giris-not{margin:8px 2px 0;color:var(--ai-muted);font-size:11.5px;line-height:1.45}

/* ═══ ÜST BARDA FAVORİ VE HESAP (10 Ağustos) ═══
   ÖLÇÜLDÜ: 412 pikselde barda 77 piksel boş vardı, 360'ta 25.
   İki simge ~80 piksel; 412'ye sığıyor, 360'ta taşıyordu.
   O yüzden 380 pikselin altında logo küçülüyor — simgeler
   kaybolmuyor, çünkü kaybolan düğme olmayan düğmedir. */
/*
 * ÖLÇÜLDÜ: 36 piksellik simgelerle son düğme 417'de bitiyordu, pencere
 * 412 — beş piksel taşma. Medya sorgusuna kural yazmak işe yaramadı
 * çünkü ana tanım DAHA SONRA geliyor ve eziyordu.
 *
 * Ana tanım 32'ye indirildi; dar ekran kuralı gerekmiyor, çünkü 32
 * geniş ekranda da fazla küçük durmuyor.
 */
.ai-ust-favori,.ai-ust-hesap{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;
  padding:0;border:1px solid var(--ai-line);border-radius:10px;background:#fff;color:var(--ai-ink);
  cursor:pointer;transition:.14s}
.ai-ust-favori svg,.ai-ust-hesap svg{width:17px;height:17px}
.ai-ust-favori:hover,.ai-ust-hesap:hover{border-color:var(--ai-teal);color:#0f7d86}
/* Girişliyken hesap simgesi dolu: durumun kendisi bilgi. */
.ai-ust-hesap.girisli{background:linear-gradient(135deg,#0f7d86,#16b8b4);border-color:transparent;color:#fff}
.ai-ust-favori.dolu{color:#c2410c;border-color:#f0d9c4}

/*
 * ÖLÇÜLDÜ: iki simge eklenince 412'de bile taştı (dolu 407, boş 5) —
 * çünkü 520 medya sorgusu daha SONRA geliyor ve benim kuralımı
 * eziyordu. Kural o sorgunun İÇİNE taşındı.
 */
@media(max-width:520px){
  .ai-not-balon{padding:11px 12px;gap:9px}
  .ai-not-govde p{font-size:12.5px}
}

.ai-product-ai-note{margin:8px 0 0;padding:8px 10px;border-left:3px solid #48bfc1;border-radius:8px;background:#f2fbfb;color:#3d5965;font-size:10.5px;line-height:1.45}
.ai-product-ai-note strong{color:#147f82;font-size:9.5px;letter-spacing:.02em}
.ai-product-group-alternatif,.ai-product-group-ulasim{margin-top:15px;padding-top:2px}
.ai-product-group-alternatif .ai-product-group-icon{background:#eef6ff;color:#257bb3}
.ai-product-group-ulasim .ai-product-group-icon{background:#fff5e8;color:#9a6519}
.ai-product-group-alternatif .ai-products{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-product-group-ulasim .ai-products{grid-template-columns:minmax(0,520px)}
.ai-product-compact .ai-product-ai-note{margin-top:6px;padding:6px 7px;font-size:9px;line-height:1.35;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ai-product-compact .ai-product-ai-note strong{font-size:8.5px}
@media(max-width:700px){
  .ai-product-group-alternatif .ai-products{grid-template-columns:1fr}
  .ai-product-ai-note{font-size:10px}
}

/* v364: rota duraklarında ulaşım ve pratik not hiyerarşisi */
.ai-route-stop-practical{margin:6px 0 0!important;padding:7px 9px;border-left:3px solid #7ccfd0;border-radius:8px;background:#f4fbfb;color:#526a75!important;font-size:10px!important;line-height:1.45!important}
.ai-route-stop-meta span.travel{background:#eef6ff;color:#2d74a5}

/* ── Araç kiralama, önerilerin en üstünde ──
   KULLANICI (7 Ağustos): "en başa sabitle, düzgün bir yazı yaz."
   Rotanın hemen altında, ürünlerden ÖNCE: kullanıcı planı görür
   görmez ulaşım kararını verebiliyor. Ürün kartlarıyla yarışmasın
   diye kart değil, tek satırlık bir eylem çubuğu. */
.ai-car-rental-pinned{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(21,151,212,.34);
  background:linear-gradient(135deg,rgba(22,184,180,.10),rgba(21,151,212,.10));
  align-items:center;
}
.ai-car-rental-pinned .ai-car-rental-icon{font-size:1.3rem}
.ai-car-rental-pinned .ai-car-rental-text{display:grid;gap:2px}
.ai-car-rental-pinned strong{font-size:.97rem;line-height:1.3}
.ai-car-rental-sub{font-size:.84rem;opacity:.78;line-height:1.35}
.ai-car-rental-go{font-size:1.1rem;opacity:.6}

/* ── Araç kiralama bağlantısı ──
   Ürün kartı değil: grubun altında ince bir satır. Küratörün seçtiği
   ürünlerle görsel olarak yarışmamalı, ama görülebilmeli. */
.ai-car-rental {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .75rem;
  padding: .6rem .85rem;
  border: 1px solid rgba(13, 148, 136, .28);
  border-radius: .75rem;
  background: rgba(13, 148, 136, .06);
  color: inherit;
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.35;
  transition: background .15s ease, border-color .15s ease;
}
.ai-car-rental:hover,
.ai-car-rental:focus-visible {
  background: rgba(13, 148, 136, .12);
  border-color: rgba(13, 148, 136, .5);
}
.ai-car-rental-icon { font-size: 1.05rem; line-height: 1; }
.ai-car-rental-text { flex: 1; }

/* ── Rotaya eklenebilirler ──
   KULLANICI (7 Ağustos): "kaç taneyse yan yana görünebilmeli."

   Mobilde ızgara tek sütuna düşüyor ve altı ürün altı satır demek
   oluyordu; rotanın altı ürünle doluyordu. Burada yatay kaydırma
   kullanılıyor: kartlar yan yana kalıyor, dikey yer kaplamıyor,
   kullanıcı kaydırarak hepsini görebiliyor. */
.ai-product-group-rota-eklenebilir .ai-products{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
  /* Kaydırma çubuğu kartların üstüne binmesin. */
  -webkit-overflow-scrolling:touch;
}
.ai-product-group-rota-eklenebilir .ai-products > .ai-product{
  flex:0 0 82%;
  max-width:340px;
  scroll-snap-align:start;
}
@media(min-width:821px){
  .ai-product-group-rota-eklenebilir .ai-products > .ai-product{flex:0 0 320px}
}
.ai-product-group-rota-eklenebilir .ai-products::-webkit-scrollbar{height:6px}
.ai-product-group-rota-eklenebilir .ai-products::-webkit-scrollbar-thumb{
  background:rgba(13,148,136,.28);border-radius:99px
}

/* Ortak logosu: emoji yerine kime gittiğini gösteren işaret. */
.ai-car-rental-logo{
  width:34px;height:34px;object-fit:contain;flex:0 0 34px;
  border-radius:8px;background:#fff;padding:3px;
}

/* ── Kart içi AI notu: kırpılıyorsa TEMİZ kırpılsın ──
   KULLANICI (7 Ağustos): "yazılar okunmuyor içindeki."

   Kompakt kartta nota kırpma kuralı konmamıştı; metin kartın
   kenarından ortadan bölünüyor ve yarım satır görünüyordu. Bozuk
   değil, bitmemiş gibi duruyordu.

   Üç satırda üç nokta ile bitiyor: kullanıcı devamı olduğunu anlıyor.
   Tam metin `title` içinde duruyor. */
.ai-product-compact .ai-product-ai-note{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:6px;
  padding:7px 9px;
  font-size:10px;
  line-height:1.4;
}

/* Yatay şeritteki kartlar biraz daha uzun olabilir: notun üç satırı
   ve iki düğme rahatça sığsın, kart içeriği kesilmesin. */
.ai-product-group-rota-eklenebilir .ai-product{min-height:210px}
.ai-product-group-rota-eklenebilir .ai-product-media{min-height:auto}

/* Başlangıç fiyatı etiketi fiyattan daha soluk: rakam öne çıksın
   ama "bu en düşük" bilgisi kaybolmasın. */
.ai-product-price{white-space:nowrap}

/* ══ ARAÇ KİRALAMA: SAYFADA SABİT ══
   Yazma kutusunun hemen üstünde, sayfa açılır açılmaz görünür ve
   kaybolmaz. Cevabın içinde değil çünkü ulaşım kararı cevaptan
   bağımsız ve süreklidir.

   Kompozisyon alanıyla aynı genişlikte hizalanıyor; ayrı bir kutu
   gibi değil, alt çubuğun parçası gibi duruyor. */
.ai-car-fixed{
  /*
   * Kompozisyon alanının İÇİNDE olduğu için kendi konumlandırmasına
   * gerek yok: onunla birlikte sabit kalıyor. Önceki sürümde
   * `position: sticky` idi ve fixed kompozisyon alanı onu örtüyordu.
   */
  width:min(920px,100%);margin:0 auto 8px;
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;
  border:1px solid rgba(21,151,212,.30);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(22,184,180,.12),rgba(21,151,212,.12)),#fff;
  color:inherit;text-decoration:none;
  box-shadow:0 8px 24px rgba(16,42,67,.10);
  transition:transform .15s ease,box-shadow .15s ease;
}
.ai-car-fixed:hover,.ai-car-fixed:focus-visible{
  transform:translateY(-1px);box-shadow:0 12px 30px rgba(16,42,67,.15);
}
.ai-car-fixed img{
  /* 40 → 52: kullanıcı "DiscoverCars okunmuyor bile" dedi. Logodaki
     yazı küçük punto; kutu büyümeden okunmuyor. */
  width:52px;height:52px;flex:0 0 52px;object-fit:contain;
  background:#fff;border-radius:11px;padding:5px;
}

/*
 * ═══ 450 PİKSELE GERİLİYORDU (9 Ağustos) ═══
 * KULLANICI: "Rota oluşturunca ekranın yarısında göstermiş, sol
 * tarafta boşluk kalmış, rent a car yazıların üstünde gösteriyor."
 *
 * CANLIDA ÖLÇÜLDÜ: blok y=76'dan y=526'ya uzanıyordu — içeriği 60
 * piksel, gerisi boşluk.
 *
 * SEBEP: `body.ai-page` iki satırlık bir ızgara (`auto minmax(0,1fr)`)
 * ve blok başlıktan sonraki İKİNCİ çocuktu; yani `1fr` satırına düşüp
 * bütün boşluğu doldurdu. `<main>` de üçüncü, örtük bir satıra kaydı.
 *
 * Blok artık `<main>`in İÇİNDE, ilk çocuk. Kaydırma kabı da main
 * olduğu için `top:0` yeterli — 70 piksellik pay, kabın kendi üstünden
 * sayıldığı için boşluk bırakıyordu.
 */
.ai-car-ustte{
  position:sticky;top:0;z-index:20;
  align-self:start;
  margin:4px auto 10px;
}
.ai-car-fixed-text{display:grid;gap:2px;min-width:0;flex:1}
.ai-car-fixed-text strong{font-size:14px;line-height:1.3}
.ai-car-fixed-text span{font-size:12px;line-height:1.4;opacity:.78}
.ai-car-fixed-go{font-size:18px;opacity:.55;flex:0 0 auto}
@media(max-width:420px){
  .ai-car-fixed{gap:9px;padding:9px 11px}
  .ai-car-fixed img{width:44px;height:44px;flex:0 0 44px}
  .ai-car-fixed-text strong{font-size:13px}
  .ai-car-fixed-text span{font-size:11px}
}

/* ══ AYNI YER, BAŞKA SAĞLAYICI ══
   Kapalı başlıyor: kart zaten dolu ve çoğu kullanıcı önerileni alır.
   Ama fiyat farkı başlıkta yazıyor — açmadan da görülsün, asıl değer
   o rakamda. */
.ai-product-others{margin-top:9px;border-top:1px dashed #d8e6ea;padding-top:8px}
.ai-product-others>summary{
  cursor:pointer;list-style:none;
  color:#0b7f81;font-size:11.5px;font-weight:800;line-height:1.4;
  padding:3px 0;
}
.ai-product-others>summary::-webkit-details-marker{display:none}
.ai-product-others>summary::before{content:"⇄ ";opacity:.75}
.ai-product-others[open]>summary{margin-bottom:6px}
.ai-product-others-list{display:grid;gap:5px}
.ai-product-other{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:7px 9px;border:1px solid var(--ai-line);border-radius:10px;
  background:#fbfdfd;color:inherit;text-decoration:none;
}
.ai-product-other:hover{border-color:rgba(22,184,180,.6);background:#f4fbfb}
.ai-product-other-main{display:grid;gap:1px;min-width:0}
.ai-product-other-main strong{font-size:10px;letter-spacing:.08em;color:#16888b}
.ai-product-other-main span{
  font-size:11px;line-height:1.35;color:var(--ai-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ai-product-other-price{font-size:12px;font-weight:800;white-space:nowrap;color:var(--ai-ink)}

/* ══ "BUNU BEĞENDİYSEN ŞU DA HOŞUNA GİDER" ══
   Diğer sağlayıcı satırından ayrı görünmeli: biri "aynı şeyi başka
   yerden al", bu "bunun yanına şu da yakışır". Sıcak bir ton için
   çerçeve yerine yumuşak bir zemin kullanılıyor. */
.ai-product-pairs{margin-top:9px;padding-top:8px;border-top:1px dashed #d8e6ea;display:grid;gap:6px}
.ai-product-pairs-head{
  margin:0;font-size:11px;font-weight:800;color:#7a5b1e;line-height:1.35;
}
.ai-product-pairs-head::before{content:"✧ ";opacity:.8}
.ai-product-pair{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:8px 10px;border-radius:11px;
  background:linear-gradient(135deg,rgba(255,183,77,.12),rgba(255,138,76,.10));
  color:inherit;text-decoration:none;
}
.ai-product-pair:hover{background:linear-gradient(135deg,rgba(255,183,77,.2),rgba(255,138,76,.16))}
.ai-product-pair-body{display:grid;gap:2px;min-width:0}
.ai-product-pair-body strong{font-size:11.5px;line-height:1.35}
.ai-product-pair-why{font-size:10.5px;line-height:1.4;color:var(--ai-muted)}
.ai-product-pair-price{font-size:11px;font-weight:800;white-space:nowrap}

/* İlerleme satırı: sayaç ve o an aranan konu. Metin uydurma değil,
   modelin ürettiği aramanın kendisi. */
.ai-offer-progress{display:inline-flex;align-items:baseline;gap:7px;min-width:0}
.ai-offer-progress strong{
  font-size:10px;font-weight:800;padding:2px 6px;border-radius:7px;
  background:rgba(22,184,180,.14);color:#0b7f81;white-space:nowrap;
}
.ai-offer-progress span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ ROTA ÖNERİ KARTLARI — DİKEY DÜZEN ══
   KULLANICI (7 Ağustos): "kartlarda hiç olmamış; tur güzelce
   görünecek, alt kısmında açıklama olacak, her şey dar bir yere
   sıkıştırılmayacak. Kartlardan bir şey anlaşılmıyor."

   ÖLÇÜLDÜ: kart iki sütunluydu — 108px resim + metin. Yatay şeritte
   kart genişliği ~340px, yani metne 230px kalıyordu. O genişlikte
   başlık üç satıra, düğmeler üç satıra bölünüyor, "yanına iyi gider"
   kutusu taşıyordu.

   Dikey düzende resim üstte tam genişlikte duruyor ve metin bütün
   kartı kullanıyor. Kart uzuyor ama yatay kaydırmada yükseklik
   sorun değil — genişlik sorundu. */
.ai-product-group-rota-eklenebilir .ai-product,
.ai-product-group-rota-eklenebilir .ai-product-compact{
  display:flex;
  flex-direction:column;
  min-height:auto;
  border-radius:18px;
  overflow:hidden;
}
.ai-product-group-rota-eklenebilir .ai-product-media{
  width:100%;
  height:150px;
  min-height:150px;
  max-height:150px;
  flex:0 0 150px;
}
.ai-product-group-rota-eklenebilir .ai-product-media img{
  width:100%;height:100%;object-fit:cover;
}
.ai-product-group-rota-eklenebilir .ai-product-content{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Yazı boyutları: hiçbiri 11px altına inmiyor. */
.ai-product-group-rota-eklenebilir .ai-product-provider{font-size:10px}
.ai-product-group-rota-eklenebilir .ai-product-compact h4,
.ai-product-group-rota-eklenebilir h4{
  font-size:15px;line-height:1.35;-webkit-line-clamp:2;margin:6px 0 8px;
}
.ai-product-group-rota-eklenebilir .ai-product-summary{
  font-size:12px;line-height:1.5;-webkit-line-clamp:2;margin-bottom:9px;
}
.ai-product-group-rota-eklenebilir .ai-product-meta{gap:6px;font-size:11.5px;flex-wrap:wrap}
.ai-product-group-rota-eklenebilir .ai-product-meta span{padding:4px 9px;border-radius:9px}
.ai-product-group-rota-eklenebilir .ai-product-price{font-size:14px!important;font-weight:800}
.ai-product-group-rota-eklenebilir .ai-product-ai-note{
  font-size:12px;line-height:1.5;-webkit-line-clamp:3;padding:10px 12px;margin-top:10px;
}

/* Düğmeler yan yana ve tek satırda: üç satıra bölünmüş düğme
   okunmuyor ve tıklanacak yeri belirsizleştiriyor. */
/*
 * ═══ DÜĞMELER ALT ALTA ═══
 * ÖLÇÜLDÜ: yan yana iki düğme 287px istiyor, kartta 209px yer var.
 * Türkçe etiketler uzun ("İncele ve rezervasyon yap").
 *
 * Alt alta iki tam genişlik düğme hem sığıyor hem parmakla daha
 * kolay basılıyor. Dar kartta yan yana sıkıştırmak, iki düğmeyi de
 * okunmaz yapıyordu.
 */
.ai-product-group-rota-eklenebilir .ai-product-actions{
  display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px;
}
.ai-product-group-rota-eklenebilir .ai-product-open,
.ai-product-group-rota-eklenebilir .ai-product-secondary{
  min-height:42px;font-size:12.5px;border-radius:12px;padding:0 12px;
  display:flex;align-items:center;justify-content:center;
  /* Tam genişlikte olduğu için sarmaya gerek yok ama uzun çeviriler
     için taşma yerine kırpma: düğme yüksekliği sabit kalsın. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;
}

/* Kart genişliği: dikey düzende daha dar olabilir, metin zaten
   tam genişliği kullanıyor. Yan yana iki kartın kenarı görünsün ki
   kaydırılabildiği anlaşılsın. */
/*
 * ═══ GENİŞLİK ÖLÇÜLDÜ, TAHMİN EDİLMEDİ (7 Ağustos) ═══
 * `%74` yazmıştım; kapsayıcı 323px olduğu için kart 239px çıktı ve
 * içindeki düğme satırı 287px istiyordu — taşıyordu.
 *
 * Yüzde, kapsayıcıya göre hesaplanıyor ve kapsayıcı sayfa
 * dolgusundan sonra kalan yer. Sabit bir taban daha öngörülebilir:
 * dar ekranda %88, geniş ekranda 300px.
 */
.ai-product-group-rota-eklenebilir .ai-products>.ai-product{flex:0 0 min(300px, 88%)}
@media(min-width:821px){
  .ai-product-group-rota-eklenebilir .ai-products>.ai-product{flex:0 0 300px}
}

/* "Yanına iyi gider" kutusu dikey kartta taşmıyor. */
.ai-product-group-rota-eklenebilir .ai-product-pairs{margin-top:10px}
.ai-product-group-rota-eklenebilir .ai-product-pair{padding:9px 11px}
.ai-product-group-rota-eklenebilir .ai-product-pair-body strong{font-size:12px}
.ai-product-group-rota-eklenebilir .ai-product-pair-why{font-size:11px}

/* ══ KEŞFET KARTLARI — RESİM SÜTUNU DAHA GENİŞ ══
   Keşfet'te kart tam genişlikte, iki sütun kalabilir. Ama 108px
   resim sütunu dar ve uzun bir şerit gibi görünüyordu. */
/* ══ KEŞFET KARTLARI DA DİKEY: FOTOĞRAF ÜSTTE, TAM GENİŞLİK ══
   KULLANICI (7 Ağustos): "Kartlar hâlâ böyle, fotoğrafların hiçbiri
   görünmüyor. Sadece kısa kesitler ve ne olduğu belirsiz."

   ÖLÇÜLDÜ: kart iki sütunluydu ve resim 108-132px genişliğinde,
   kart boyunca uzayan bir ŞERİTTİ. 16:9 çekilmiş bir tekne
   fotoğrafı o şeride sığmıyor; `object-fit:cover` ortadan dar bir
   dilim kesiyor. Kullanıcı denizi değil kayalığı görüyor.

   Dikey düzende fotoğraf kendi en-boy oranında duruyor. */
.ai-product-group-magaza .ai-product,
.ai-products>.ai-product:not(.ai-product-compact){
  display:flex;flex-direction:column;
}
.ai-product-group-magaza .ai-product-media,
.ai-products>.ai-product:not(.ai-product-compact) .ai-product-media{
  width:100%;
  aspect-ratio:16/9;
  height:auto;min-height:0;max-height:none;
  flex:0 0 auto;
}
.ai-product-group-magaza .ai-product-media img,
.ai-products>.ai-product:not(.ai-product-compact) .ai-product-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.ai-product-group-magaza .ai-product-content{padding:14px}

/* ══ OTELDEN ALIM ROZETİ ══
   KULLANICI: "Müşteri otelde konaklıyorsa o otelden alıyor mu
   almıyor mu, onun da bilmesi gerekiyor."

   Bu ürün başlığında yazıyor ama uzun başlıkta kayboluyor. Ayrı bir
   rozet olarak öne çıkıyor: gezginin ilk sorduğu şey bu. */
.ai-pickup-badge{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:7px;padding:4px 9px;border-radius:9px;
  background:rgba(22,184,180,.12);color:#0d6c6a;
  font:750 11px/1.3 Manrope,system-ui,sans-serif;
}

/* ══ DURAK KARTI: FOTOĞRAF ÜSTTE, SEÇENEKLER İÇERİDE ══
   KULLANICI (7 Ağustos): "Antalya Akvaryum öneriyorsun, fotoğrafın
   üzerine basınca bütün opsiyonlar açılacak... Fotoğraflar geldiği
   anda chat fotoğrafla doluyor, aşırı büyük."

   Eskiden aynı yerin altı seçeneği altı büyük kart demekti ve ekran
   fotoğraf çöplüğüne dönüyordu. Şimdi ekranda YER duruyor; gezgin
   önce nereye gideceğine, sonra hangi bileti alacağına karar veriyor. */
.ai-stop-cover{
  position:relative;width:100%;height:132px;margin:0 0 10px;
  border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#eaf7f7,#e8f2fa);
}
.ai-stop-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ai-stop-cover::after{
  content:'';position:absolute;inset:auto 0 0 0;height:44px;
  background:linear-gradient(180deg,rgba(12,32,52,0),rgba(12,32,52,.34));
}

.ai-stop-toggle{
  margin-top:9px;width:100%;min-height:40px;
  border:1px solid rgba(200,222,229,.95);border-radius:12px;background:#fff;
  color:#17233c;font:750 12.5px/1.2 Manrope,system-ui,sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.ai-stop-toggle:hover{border-color:rgba(22,184,180,.7);background:#f7fdfd}

/* Seçenekler durağın ALTINDA, dikey liste: hepsi aynı yerin bileti,
   yatay kaydırma burada kafa karıştırıyor. */
.ai-stop-options{display:grid;gap:10px;margin-top:10px}
.ai-stop-options .ai-product{
  display:grid;grid-template-columns:74px minmax(0,1fr);
  border-radius:14px;box-shadow:0 6px 16px rgba(16,42,67,.06);
}
.ai-stop-options .ai-product-media{min-height:100%;height:auto;aspect-ratio:auto}
.ai-stop-options .ai-product-content{padding:10px 12px}
.ai-stop-options .ai-product h4{font-size:13px;line-height:1.35;-webkit-line-clamp:2;margin:2px 0 6px}
.ai-stop-options .ai-product-summary{display:none}
.ai-stop-options .ai-product-ai-note{font-size:11.5px;line-height:1.45;-webkit-line-clamp:2;padding:8px 10px;margin-top:8px}
.ai-stop-options .ai-product-price{font-size:13.5px!important}
.ai-stop-options .ai-product-actions{grid-template-columns:1fr;gap:6px;margin-top:9px}
.ai-stop-options .ai-product-open,
.ai-stop-options .ai-product-secondary{min-height:38px;font-size:12px}

/* ═══ SEÇENEK PANELİ ═══
   KULLANICI (8 Ağustos): "Diğer sağlayıcıların aynı turu yeni bir
   sayfada açılsın ama sohbet aşırı dolmasın."

   Sohbetin ÜSTÜNE açılıyor: sohbet 3-6 kartta kalıyor, on iki seçenek
   burada. Kapatınca gezgin yerini kaybetmiyor. */
.ai-product-more{display:block;width:100%;margin:8px 0 0;padding:9px 12px;border:1px dashed rgba(22,184,180,.55);border-radius:12px;background:rgba(22,184,180,.07);color:#12727a;font:800 11.5px/1.2 inherit;text-align:center;cursor:pointer}
.ai-product-more:hover{background:rgba(22,184,180,.13);border-style:solid}

.ai-secenek-katman{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;background:rgba(12,22,36,.52);backdrop-filter:blur(2px)}
.ai-secenek-panel{width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -12px 44px rgba(12,22,36,.28)}
.ai-secenek-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px 11px;border-bottom:1px solid #eef1f4}
.ai-secenek-bas b{color:#17233c;font-size:14px}
.ai-secenek-kapat{width:32px;height:32px;border:0;border-radius:10px;background:#f2f5f7;color:#3d4d5c;font-size:15px;cursor:pointer}
.ai-secenek-govde{overflow-y:auto;padding:8px 12px 18px;display:grid;gap:8px}
.ai-secenek-durum{margin:18px 6px;color:#687d8d;font-size:12px;text-align:center}
.ai-secenek-satir{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px;border:1px solid #eef1f4;border-radius:14px;text-decoration:none;color:inherit}
.ai-secenek-satir:hover{border-color:rgba(22,184,180,.6);background:#fafdfd}
.ai-secenek-gorsel{width:64px;height:52px;object-fit:cover;border-radius:10px}
.ai-secenek-bilgi{display:grid;gap:3px;min-width:0}
.ai-secenek-saglayici{color:#16888b;font-size:8px;font-weight:900;letter-spacing:.11em}
.ai-secenek-bilgi strong{color:#17233c;font-size:12px;line-height:1.28}
.ai-secenek-meta{display:flex;flex-wrap:wrap;gap:7px;color:#687d8d;font-size:10px}
.ai-secenek-fiyat{color:#d7513a;font-size:12px;font-weight:800;white-space:nowrap}
body.ai-katman-acik{overflow:hidden}
@media(prefers-reduced-motion:reduce){.ai-product-more{transition:none!important}}

/* ═══ TUANA'NIN YÜZÜ ═══
   Rozet, dairenin İÇİNİ dolduruyor: `object-fit:cover` ile kırpılıyor,
   arka plandaki degrade yalnız saçın etrafında görünüyor. Görselin
   kendi saydamlığı korunuyor — beyaz gömlek degradenin üstünde. */
.ai-orb-tuana{overflow:hidden;background:linear-gradient(160deg,#d9f2f2,#eef7fb)}
.ai-orb-tuana img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}

/* Mesaj balonunun yanındaki Tuana: degrade zemin kalkıyor, figürün
   kendi rengi var. Yuvarlak kırpım — kare bir portre balonun yanında
   yamalı durur. */
.ai-avatar-tuana{overflow:hidden;border-radius:50%;background:linear-gradient(160deg,#d9f2f2,#eef7fb)}
.ai-avatar-tuana img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 10%}

/*
 * ═══ DAR EKRAN, EN SONA (10 Ağustos) ═══
 * Bu kuralı önce yukarıya yazdım ve tutmadı: aşağıdaki 520 sorgusu
 * daha SONRA geldiği için eziyordu. Bugün aynı hataya iki kez düştüm —
 * CSS'te sıra, seçici gücü kadar belirleyici.
 *
 * ÖLÇÜLDÜ: 360 ve 390 pikselde üst bar taşıyordu. Düğme KALDIRMAK
 * yerine daraltıldı; kaybolan düğme, bulunamayan düğmedir.
 */
@media(max-width:520px){
  /*
   * 412'de bir piksel taşıyordu (413/412). Mod menüsünün iç dolgusu
   * ve logo genişliği birlikte kısılınca sığıyor.
   */
  .ai-header .ai-mode a{padding:0 7px}
  .ai-header .ai-brand .ai-brand-logo{max-width:120px}
}
@media(max-width:400px){
  .ai-header{gap:3px;padding-left:6px;padding-right:6px}
  .ai-header .ai-mode a{padding:0 5px;font-size:11.5px}
  .ai-header .ai-mode{padding:2px}
  .ai-header .ai-brand .ai-brand-logo{height:24px;max-width:92px}
}