/* ====================================================================
   tara-tasarim.css — "SCAN ITEMS" KUTUSU TASARIMLARI  (?ts=1..20)  2026-10-12
   --------------------------------------------------------------------
   Izgaranin ilk hucresi (app.js TARA_KUTU). Hepsi GERCEK sayfada calisir;
   tiklayinca ikon doner (.donuyor). menu.js ?ts=N -> body.ts-N.
   Isaretleme: button.tara-kutu > span.ikon(svg) + b + small.tk-alt
   (small varsayilanda gizli, bazi tasarimlar acar).
   KURAL (kullanici): YUVARLAK YOK — hepsi karemsi.
   ==================================================================== */
.tara-kutu .tk-alt { display:none; font-size:11px; font-weight:600; color:var(--ink-3); }
.tara-kutu { position:relative; overflow:hidden; isolation:isolate; }

/* 1 · Mavi dolu */
body.ts-1 .tara-kutu { border:0; color:#fff;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6);
  box-shadow:0 12px 24px -14px rgba(37,99,235,.8); }
body.ts-1 .tara-kutu .ikon { background:rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
body.ts-1 .tara-kutu .tk-alt { display:block; color:rgba(255,255,255,.75); }

/* 2 · Esya karti gibi beyaz */
body.ts-2 .tara-kutu { border:0; background:var(--inci); color:var(--ink);
  box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06); }
body.ts-2 .tara-kutu .ikon { background:var(--buz); color:var(--mavi-koyu); }
body.ts-2 .tara-kutu .tk-alt { display:block; }

/* 3 · Duz cerceve (kesikli degil) */
body.ts-3 .tara-kutu { border:1.5px solid var(--mavi-ln); background:var(--kd-yuzey, #fff); color:var(--mavi-koyu); }
body.ts-3 .tara-kutu .ikon { border-radius:10px; }

/* 4 · Iri ikon */
body.ts-4 .tara-kutu { gap:12px; }
body.ts-4 .tara-kutu .ikon { width:62px; height:62px; border-radius:17px; box-shadow:0 12px 24px -12px rgba(37,99,235,.8); }
body.ts-4 .tara-kutu .ikon svg { width:28px; height:28px; }
body.ts-4 .tara-kutu b { font-size:14px; color:var(--ink); }

/* 5 · Yatay: ikon solda, yazi sagda */
body.ts-5 .tara-kutu { flex-direction:row; gap:11px; text-align:left; }
body.ts-5 .tara-kutu .tk-metin { display:flex; flex-direction:column; }
body.ts-5 .tara-kutu .tk-alt { display:block; }

/* 6 · Hayalet: zemin ve cerceve yok */
body.ts-6 .tara-kutu { border:0; background:transparent; color:var(--mavi-koyu); }
body.ts-6 .tara-kutu .ikon { background:transparent; color:var(--mavi); border:1.5px solid var(--mavi-ln); }

/* 7 · Nokta izgarasi */
body.ts-7 .tara-kutu { border:1px solid var(--cizgi); background-color:var(--kd-yuzey, #fff);
  background-image:radial-gradient(rgba(37,99,235,.18) 1.2px, transparent 1.3px); background-size:12px 12px; }

/* 8 · Capraz cizgiler */
body.ts-8 .tara-kutu { border:1px solid var(--mavi-ln);
  background:repeating-linear-gradient(135deg, rgba(37,99,235,.06) 0 8px, transparent 8px 16px), var(--buz); }

/* 9 · Cam */
body.ts-9 .tara-kutu { border:1px solid var(--kd-kenar, rgba(255,255,255,.85)); background:rgba(var(--kd-cam, 255,255,255), .55);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 24px rgba(15,42,86,.08); color:var(--ink); }

/* 10 · Koyu lacivert */
body.ts-10 .tara-kutu { border:0; background:var(--ink); color:#fff; }
body.ts-10 .tara-kutu .ikon { background:var(--mavi); }
body.ts-10 .tara-kutu .tk-alt { display:block; color:rgba(255,255,255,.55); }

/* 11 · Filigran: arkada dev, soluk ok */
body.ts-11 .tara-kutu { border:1px solid var(--cizgi); background:var(--kd-yuzey, #fff); color:var(--ink); }
body.ts-11 .tara-kutu::after { content:""; position:absolute; right:-28px; bottom:-30px; width:150px; height:150px; z-index:-1; opacity:.07;
  background:var(--mavi);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 12 · Ice basilmis (secili kart dili) */
body.ts-12 .tara-kutu { border:0; background:var(--kd-basik, #FAFBFC); color:var(--ink-2);
  box-shadow:inset 0 2px 8px rgba(15,42,86,.14), inset 0 0 0 1px rgba(15,42,86,.09); }

/* 13 · Ic dugmeli: kutu icinde "Scan" dugmesi */
body.ts-13 .tara-kutu { border:1px solid var(--cizgi); background:var(--buz); gap:7px; }
body.ts-13 .tara-kutu .ikon { width:auto; height:34px; padding:0 14px; gap:7px; display:inline-flex; align-items:center; border-radius:9px; order:2; }
body.ts-13 .tara-kutu .ikon::after { content:"Scan"; font-size:12.5px; font-weight:800; }
body.ts-13 .tara-kutu .ikon svg { width:15px; height:15px; }
body.ts-13 .tara-kutu b { order:0; font-size:13.5px; color:var(--ink); }
body.ts-13 .tara-kutu .tk-alt { display:block; order:1; margin-bottom:6px; }

/* 14 · Mavi kesikli, beyaz zemin */
body.ts-14 .tara-kutu { border:1.5px dashed var(--mavi-ln); background:var(--kd-yuzey, #fff); color:var(--mavi-koyu); }

/* 15 · Degrade cerceve */
body.ts-15 .tara-kutu { border:1.5px solid transparent; color:var(--ink);
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(150deg,#1E40AF,#60A5FA) border-box; }

/* 16 · Esya karti duzeni: ust etiket, ortada ikon, altta ad */
body.ts-16 .tara-kutu { border:0; background:var(--inci); color:var(--ink); align-items:stretch; justify-content:space-between; padding:11px 11px 10px;
  box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06); text-align:left; }
body.ts-16 .tara-kutu::before { content:"INVENTORY"; font-size:9.5px; font-weight:800; letter-spacing:.09em; color:var(--mavi-koyu); }
body.ts-16 .tara-kutu .ikon { align-self:center; width:58px; height:58px; border-radius:16px; }
body.ts-16 .tara-kutu .ikon svg { width:26px; height:26px; }
body.ts-16 .tara-kutu b { font-size:12.5px; }
body.ts-16 .tara-kutu .tk-alt { display:block; margin-top:-6px; }

/* 17 · Kucuk ikon, bol bosluk */
body.ts-17 .tara-kutu { gap:7px; }
body.ts-17 .tara-kutu .ikon { width:30px; height:30px; border-radius:8px; }
body.ts-17 .tara-kutu .ikon svg { width:15px; height:15px; }
body.ts-17 .tara-kutu b { font-size:12px; color:var(--ink-3); }

/* 18 · Radar: ikonun etrafinda karemsi halkalar (duragan) */
body.ts-18 .tara-kutu .ikon { position:relative; }
body.ts-18 .tara-kutu .ikon::before, body.ts-18 .tara-kutu .ikon::after { content:""; position:absolute; border:1.5px solid rgba(37,99,235,.22); pointer-events:none; }
body.ts-18 .tara-kutu .ikon::before { inset:-10px; border-radius:16px; }
body.ts-18 .tara-kutu .ikon::after { inset:-21px; border-radius:21px; border-color:rgba(37,99,235,.1); }
body.ts-18 .tara-kutu b { margin-top:18px; }

/* 19 · Iki parca: ust yarisi mavi, alt yarisi beyaz */
body.ts-19 .tara-kutu { border:0; padding:0; gap:0; background:#fff;
  box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06); justify-content:stretch; }
body.ts-19 .tara-kutu .ikon { width:100%; height:auto; flex:1; border-radius:0; background:linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6); }
body.ts-19 .tara-kutu .ikon svg { width:30px; height:30px; }
body.ts-19 .tara-kutu b { padding:12px 0 2px; color:var(--ink); font-size:13px; }
body.ts-19 .tara-kutu .tk-alt { display:block; padding-bottom:12px; }

/* 20 · Cizgi ikon: dolgusuz iri ok */
body.ts-20 .tara-kutu { border:1px solid var(--cizgi); background:var(--buz); }
body.ts-20 .tara-kutu .ikon { background:transparent; color:var(--mavi); width:52px; height:52px; }
body.ts-20 .tara-kutu .ikon svg { width:40px; height:40px; stroke-width:1.6; }
body.ts-20 .tara-kutu b { color:var(--ink); }

@media (prefers-reduced-motion: reduce) { .tara-kutu.donuyor .ikon svg { animation:none; } }
/* yazi sarmali: varsayilanda yok sayilir (b ve small eskisi gibi kutunun dogrudan cocugu) */
.tara-kutu .tk-metin { display:contents; }

/* ====================================================================
   ANIMASYONLU TASARIMLAR  ?ts=21..40  (2026-10-12, "guzel animasyonlu tasarimlar")
   Kurallar: KAREMSI (yuvarlak/daire yok), animasyon kutunun ICINDE kalir,
   disari firlayan kivilcim ve buyuyen "dalga" halkasi YOK (kullanicinin
   reddettikleri). Yalniz transform/opacity/background — ucuz.
   Tiklayinca (.donuyor) ikon her tasarimda hizli doner.
   ==================================================================== */
@keyframes tkDon     { to { transform:rotate(360deg); } }
@keyframes tkSupur   { 0% { transform:translateX(-120%); } 55%, 100% { transform:translateX(120%); } }
@keyframes tkTara    { 0% { top:10%; } 100% { top:86%; } }
@keyframes tkAkis    { 0% { background-position:0% 50%; } 100% { background-position:100% 50%; } }
@keyframes tkSuz     { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes tkBantX   { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
@keyframes tkNefes   { 0%, 100% { box-shadow:0 4px 12px -6px rgba(37,99,235,.5); } 50% { box-shadow:0 10px 30px -4px rgba(37,99,235,.75); } }
@keyframes tkDesteS  { 0%, 100% { transform:rotate(0) translate(0,0); } 50% { transform:rotate(-14deg) translate(-9px,2px); } }
@keyframes tkDesteD  { 0%, 100% { transform:rotate(0) translate(0,0); } 50% { transform:rotate(14deg) translate(9px,2px); } }
@keyframes tkAdim    { 0%, 18% { transform:rotate(0); } 25%, 43% { transform:rotate(90deg); } 50%, 68% { transform:rotate(180deg); }
                       75%, 93% { transform:rotate(270deg); } 100% { transform:rotate(360deg); } }
@keyframes tkEkol    { 0%   { background-size:4px 30%, 4px 80%, 4px 50%, 4px 70%; }
                       25%  { background-size:4px 90%, 4px 40%, 4px 75%, 4px 35%; }
                       50%  { background-size:4px 55%, 4px 95%, 4px 30%, 4px 85%; }
                       75%  { background-size:4px 75%, 4px 50%, 4px 90%, 4px 45%; }
                       100% { background-size:4px 30%, 4px 80%, 4px 50%, 4px 70%; } }
@keyframes tkCubuk   { 0% { left:-40%; } 100% { left:100%; } }
@keyframes tkOdak    { 0%, 100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.13); opacity:.45; } }
@keyframes tkKare    { 0% { transform:translateY(0); opacity:0; } 15% { opacity:1; } 100% { transform:translateY(-120px); opacity:0; } }
@keyframes tkYazi    { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes tkCevir   { 0%, 40% { transform:rotateY(0); } 50%, 90% { transform:rotateY(180deg); } 100% { transform:rotateY(360deg); } }
@keyframes tkSerit   { to { background-position:32px 0; } }
@keyframes tkNokta   { 0%, 100% { box-shadow:7px 0 0 rgba(37,99,235,.25), 14px 0 0 rgba(37,99,235,.25); background:var(--mavi); }
                       33% { box-shadow:7px 0 0 var(--mavi), 14px 0 0 rgba(37,99,235,.25); background:rgba(37,99,235,.25); }
                       66% { box-shadow:7px 0 0 rgba(37,99,235,.25), 14px 0 0 var(--mavi); background:rgba(37,99,235,.25); } }

/* animasyonlu tasarimlarin ortak beyaz kart zemini */
body.ts-21 .tara-kutu, body.ts-23 .tara-kutu, body.ts-25 .tara-kutu, body.ts-26 .tara-kutu, body.ts-28 .tara-kutu,
body.ts-29 .tara-kutu, body.ts-30 .tara-kutu, body.ts-32 .tara-kutu, body.ts-33 .tara-kutu, body.ts-34 .tara-kutu,
body.ts-35 .tara-kutu, body.ts-37 .tara-kutu, body.ts-38 .tara-kutu, body.ts-40 .tara-kutu {
  border:0; background:var(--inci); color:var(--ink);
  box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06); }

/* 21 · Yavas donen ikon */
body.ts-21 .tara-kutu .ikon svg { animation:tkDon 6s linear infinite; }

/* 22 · Isik supurmesi (mavi kutu) */
body.ts-22 .tara-kutu { border:0; color:#fff; background:linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6); }
body.ts-22 .tara-kutu .ikon { background:rgba(255,255,255,.2); }
body.ts-22 .tara-kutu .tk-alt { display:block; color:rgba(255,255,255,.75); }
body.ts-22 .tara-kutu::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 35%, rgba(var(--kd-cam, 255,255,255), .28) 50%, transparent 65%);
  animation:tkSupur 3.6s ease-in-out infinite; }

/* 23 · Tarayici cizgisi: yukaridan asagi inen mavi cizgi */
body.ts-23 .tara-kutu::after { content:""; position:absolute; left:10%; right:10%; height:2px; z-index:-1; border-radius:1px;
  background:var(--mavi); box-shadow:0 0 14px 3px rgba(37,99,235,.35);
  animation:tkTara 2.4s ease-in-out infinite alternate; }

/* 24 · Akan degrade */
body.ts-24 .tara-kutu { border:0; color:#fff;
  background:linear-gradient(120deg,#1E3A8A,#2563EB,#60A5FA,#2563EB,#1E3A8A); background-size:300% 300%;
  animation:tkAkis 7s ease-in-out infinite alternate; }
body.ts-24 .tara-kutu .ikon { background:rgba(255,255,255,.2); }
body.ts-24 .tara-kutu .tk-alt { display:block; color:rgba(255,255,255,.78); }

/* 25 · Kenarda dolasan isik (@property ile aci) */
@property --tk-aci { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes tkKenar { to { --tk-aci:360deg; } }
body.ts-25 .tara-kutu { border:2px solid transparent; box-shadow:none;
  background:linear-gradient(var(--inci),var(--inci)) padding-box,
             conic-gradient(from var(--tk-aci), rgba(37,99,235,.12) 0 60%, #2563EB 80%, #93C5FD 90%, rgba(37,99,235,.12) 100%) border-box;
  animation:tkKenar 3.2s linear infinite; }

/* 26 · Suzulen ikon */
body.ts-26 .tara-kutu .ikon { animation:tkSuz 3s ease-in-out infinite; box-shadow:0 12px 20px -12px rgba(37,99,235,.9); }

/* 27 · Nokta izgarasinda gezen isik bandi */
body.ts-27 .tara-kutu { border:1px solid var(--cizgi); background-color:var(--kd-yuzey, #fff);
  background-image:radial-gradient(rgba(37,99,235,.2) 1.2px, transparent 1.3px); background-size:12px 12px; }
body.ts-27 .tara-kutu::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(37,99,235,.14), transparent); animation:tkBantX 2.8s ease-in-out infinite; }

/* 28 · Bekleyen noktalar (karemsi) */
body.ts-28 .tara-kutu b::after { content:""; display:inline-block; width:4px; height:4px; margin-left:7px; border-radius:1px; vertical-align:2px;
  animation:tkNokta 1.4s steps(1) infinite; }
body.ts-28 .tara-kutu b { padding-right:14px; }

/* 29 · Nefes alan parilti (ikonun golgesi; buyuyen halka DEGIL) */
body.ts-29 .tara-kutu .ikon { animation:tkNefes 2.8s ease-in-out infinite; }

/* 30 · Kart destesi: ikonun arkasinda iki mini kart acilip kapanir */
body.ts-30 .tara-kutu .ikon { position:relative; z-index:1; }
body.ts-30 .tara-kutu .ikon::before, body.ts-30 .tara-kutu .ikon::after { content:""; position:absolute; inset:2px; z-index:-1; border-radius:10px;
  background:var(--buz-2); box-shadow:0 2px 6px rgba(15,42,86,.12); }
body.ts-30 .tara-kutu .ikon::before { animation:tkDesteS 3.2s ease-in-out infinite; }
body.ts-30 .tara-kutu .ikon::after { background:var(--buz); animation:tkDesteD 3.2s ease-in-out infinite; }

/* 31 · Radar supurmesi (kutu boyunca donen soluk isik) */
body.ts-31 .tara-kutu { border:1px solid var(--mavi-ln); background:var(--buz); }
body.ts-31 .tara-kutu::before { content:""; position:absolute; left:50%; top:50%; width:340px; height:340px; margin:-170px 0 0 -170px; z-index:-1;
  background:conic-gradient(from 0deg, rgba(37,99,235,.2), transparent 22%); animation:tkDon 4s linear infinite; }

/* 32 · Adim adim donen ok */
body.ts-32 .tara-kutu .ikon svg { animation:tkAdim 3.2s cubic-bezier(.6,0,.3,1.3) infinite; }

/* 33 · Ekolayzer cubuklari */
body.ts-33 .tara-kutu { padding-bottom:22px; }
body.ts-33 .tara-kutu::after { content:""; position:absolute; left:50%; bottom:22px; width:25px; height:16px; margin-left:-12px;
  background:linear-gradient(var(--mavi),var(--mavi)) 0 100% no-repeat, linear-gradient(var(--mavi),var(--mavi)) 7px 100% no-repeat,
             linear-gradient(var(--mavi),var(--mavi)) 14px 100% no-repeat, linear-gradient(var(--mavi),var(--mavi)) 21px 100% no-repeat;
  opacity:.55; animation:tkEkol 1.6s ease-in-out infinite; }

/* 34 · Dongu cubugu: kutunun alt kenarinda kayan ince cubuk (kenara kirpili) */
body.ts-34 .tara-kutu::before { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--buz); }
body.ts-34 .tara-kutu::after { content:""; position:absolute; bottom:0; left:-40%; height:3px; width:40%; background:var(--mavi);
  animation:tkCubuk 1.8s cubic-bezier(.6,0,.4,1) infinite; }

/* 35 · Odak koseleri (kamera vizoru gibi) */
body.ts-35 .tara-kutu .ikon { position:relative; }
body.ts-35 .tara-kutu .ikon::after { content:""; position:absolute; inset:-13px; pointer-events:none;
  background:
    linear-gradient(var(--mavi),var(--mavi)) 0 0/12px 2px no-repeat, linear-gradient(var(--mavi),var(--mavi)) 0 0/2px 12px no-repeat,
    linear-gradient(var(--mavi),var(--mavi)) 100% 0/12px 2px no-repeat, linear-gradient(var(--mavi),var(--mavi)) 100% 0/2px 12px no-repeat,
    linear-gradient(var(--mavi),var(--mavi)) 0 100%/12px 2px no-repeat, linear-gradient(var(--mavi),var(--mavi)) 0 100%/2px 12px no-repeat,
    linear-gradient(var(--mavi),var(--mavi)) 100% 100%/12px 2px no-repeat, linear-gradient(var(--mavi),var(--mavi)) 100% 100%/2px 12px no-repeat;
  animation:tkOdak 2.2s ease-in-out infinite; }
body.ts-35 .tara-kutu b { margin-top:12px; }

/* 36 · Yukselen kareler (kutunun ICINDE kalir) */
body.ts-36 .tara-kutu { border:1px solid var(--cizgi); background:var(--buz); }
body.ts-36 .tara-kutu::before, body.ts-36 .tara-kutu::after { content:""; position:absolute; bottom:-8px; width:6px; height:6px; border-radius:2px; z-index:-1;
  background:rgba(37,99,235,.35); }
body.ts-36 .tara-kutu::before { left:24%; box-shadow:34px 30px 0 rgba(37,99,235,.25), 70px 12px 0 rgba(37,99,235,.3); animation:tkKare 3.4s linear infinite; }
body.ts-36 .tara-kutu::after { left:38%; width:5px; height:5px; box-shadow:-20px 40px 0 rgba(37,99,235,.2), 44px 22px 0 rgba(37,99,235,.3); animation:tkKare 3.4s linear 1.7s infinite; }

/* 37 · Parlayan yazi */
body.ts-37 .tara-kutu b { font-size:14px; color:transparent;
  background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, #60A5FA 50%, var(--ink) 60%, var(--ink) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; animation:tkYazi 2.6s linear infinite; }

/* 38 · Donen kart ikon (3B cevirme) */
body.ts-38 .tara-kutu { perspective:500px; }
body.ts-38 .tara-kutu .ikon { animation:tkCevir 4.2s cubic-bezier(.6,0,.3,1) infinite; transform-style:preserve-3d; }

/* 39 · Kayan seritler */
body.ts-39 .tara-kutu { border:1px solid var(--mavi-ln);
  background:repeating-linear-gradient(135deg, rgba(37,99,235,.07) 0 8px, transparent 8px 16px), var(--buz); background-size:32px 32px, auto;
  animation:tkSerit 1.6s linear infinite; }

/* 40 · Tiklayinca dolan: bostayken duragan, tiklayinca mavi alttan dolar, sonra solar */
body.ts-40 .tara-kutu { transition:color .3s ease; }
body.ts-40 .tara-kutu::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6); transform:scaleY(0); transform-origin:bottom; opacity:0;
  transition:opacity .35s ease, transform 0s linear .35s; }
body.ts-40 .tara-kutu.donuyor { color:#fff; }
body.ts-40 .tara-kutu.donuyor::before { transform:scaleY(1); opacity:1; transition:transform .45s cubic-bezier(.65,0,.35,1), opacity 0s; }
body.ts-40 .tara-kutu .ikon { transition:background .3s ease; }
body.ts-40 .tara-kutu.donuyor .ikon { background:rgba(255,255,255,.22); }

/* tiklayinca her tasarimda hizli donus (tasarimin kendi ikon animasyonunu ezer) */
body[class*="ts-"] .tara-kutu.donuyor .ikon svg { animation:tkDon .9s linear infinite !important; }
body[class*="ts-"] .tara-kutu.donuyor .ikon { animation-play-state:paused; }

@media (prefers-reduced-motion: reduce) {
  body[class*="ts-"] .tara-kutu, body[class*="ts-"] .tara-kutu *, body[class*="ts-"] .tara-kutu::before, body[class*="ts-"] .tara-kutu::after,
  body[class*="ts-"] .tara-kutu .ikon::before, body[class*="ts-"] .tara-kutu .ikon::after, body[class*="ts-"] .tara-kutu b::after { animation:none !important; }
}

/* ====================================================================
   DESENLI + ESYALI TASARIMLAR  ?ts=41..50  (2026-10-12)
   Kullanici: "27 gibi ama noktalar sarmadi; guzel desenler, itemler asagi
   kayabilir, sasirtici olsun". Karemsi, hareket kutunun ICINDE.
   .tk-esyalar: app.js taraKutu() en degerli esyalarin gorselleriyle 3 sutun
   doldurur (varsayilan GIZLI; esyali tasarimlar acar).
   ==================================================================== */
.tara-kutu .tk-esyalar { display:none; position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.tara-kutu .tk-kolon { position:absolute; top:0; width:33.4%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.tara-kutu .tk-kolon img { width:58%; height:auto; aspect-ratio:1; object-fit:contain; }
.tara-kutu .tk-kolon.k1 { left:0; } .tara-kutu .tk-kolon.k2 { left:33.3%; } .tara-kutu .tk-kolon.k3 { left:66.6%; }
@keyframes tkInis   { from { transform:translateY(-50%); } to { transform:translateY(0); } }
@keyframes tkCikis  { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@keyframes tkBant   { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes tkDesen  { to { background-position:var(--dx,24px) var(--dy,24px); } }
@keyframes tkSupur2 { 0% { transform:translateX(-130%) skewX(-12deg); } 60%, 100% { transform:translateX(130%) skewX(-12deg); } }
@keyframes tkBlip   { 0%, 70%, 100% { opacity:0; transform:scale(.4); } 78% { opacity:1; transform:scale(1); } 90% { opacity:.6; } }
@keyframes tkPiksel { 0% { background-position:0 -200px; } 100% { background-position:0 200px; } }
@keyframes tkIsilti { 0%, 100% { opacity:.15; } 50% { opacity:.55; } }

/* ortak: icerik ustte, okunur kalsin diye ikon+yazinin arkasinda yumusak beyaz isik */
body.ts-41 .tara-kutu, body.ts-42 .tara-kutu, body.ts-43 .tara-kutu, body.ts-44 .tara-kutu, body.ts-45 .tara-kutu,
body.ts-46 .tara-kutu, body.ts-47 .tara-kutu, body.ts-49 .tara-kutu, body.ts-50 .tara-kutu { border:1px solid var(--cizgi); background-color:var(--kd-yuzey, #fff); color:var(--ink); }
body.ts-41 .tara-kutu .tk-metin b, body.ts-44 .tara-kutu .tk-metin b, body.ts-47 .tara-kutu .tk-metin b { padding:3px 8px; border-radius:7px; background:rgba(var(--kd-cam, 255,255,255), .88); box-shadow:0 4px 14px rgba(15,42,86,.08); }

/* 41 · Esya yagmuru: senin esyalarin uc sutunda yavasca asagi suzulur */
body.ts-41 .tara-kutu .tk-esyalar { display:block; opacity:.3; }
body.ts-41 .tara-kutu .tk-kolon { animation:tkInis 16s linear infinite; }
body.ts-41 .tara-kutu .tk-kolon.k2 { animation-duration:12s; }
body.ts-41 .tara-kutu .tk-kolon.k3 { animation-duration:19s; }
body.ts-41 .tara-kutu .ikon { box-shadow:0 0 0 6px var(--kd-halka, rgba(255,255,255,.9)), 0 10px 22px -8px rgba(37,99,235,.7); }

/* 42 · Kareli kagit + capraz isik */
body.ts-42 .tara-kutu { background-image:linear-gradient(rgba(37,99,235,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.09) 1px, transparent 1px);
  background-size:16px 16px; background-position:-1px -1px; }
body.ts-42 .tara-kutu::after { content:""; position:absolute; top:0; bottom:0; width:45%; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(37,99,235,.13), transparent); animation:tkSupur2 3.4s ease-in-out infinite; }

/* 43 · Kayan dama: minik kareler capraz kayar */
body.ts-43 .tara-kutu { --dx:24px; --dy:24px;
  background-image:conic-gradient(rgba(37,99,235,.08) 25%, transparent 0 50%, rgba(37,99,235,.08) 0 75%, transparent 0);
  background-size:24px 24px; animation:tkDesen 2.6s linear infinite; }

/* 44 · Konveyor bandi: esyalar altta soldan saga akar, bant seritli */
body.ts-44 .tara-kutu { justify-content:flex-start; padding-top:40px; }
body.ts-44 .tara-kutu .tk-esyalar { display:block; top:auto; height:62px; bottom:12px; overflow:hidden;
  background:repeating-linear-gradient(90deg, var(--buz) 0 10px, var(--kd-yuzey, #fff) 10px 20px); border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi); }
body.ts-44 .tara-kutu .tk-kolon.k1 { position:absolute; top:6px; left:0; width:auto; flex-direction:row; gap:12px; animation:tkBant 9s linear infinite; }
body.ts-44 .tara-kutu .tk-kolon.k1 img { width:48px; }
body.ts-44 .tara-kutu .tk-kolon.k2, body.ts-44 .tara-kutu .tk-kolon.k3 { display:none; }

/* 45 · Capraz cizgi deseni (ince, sik) asagi akar */
body.ts-45 .tara-kutu { --dx:0px; --dy:28px;
  background-image:repeating-linear-gradient(45deg, rgba(37,99,235,.07) 0 2px, transparent 2px 14px),
                   repeating-linear-gradient(-45deg, rgba(37,99,235,.07) 0 2px, transparent 2px 14px);
  background-size:28px 28px; animation:tkDesen 3s linear infinite; }

/* 46 · Radar izgarasi + yanip sonen kare isaretler */
body.ts-46 .tara-kutu { background-image:linear-gradient(rgba(37,99,235,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.1) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px; }
body.ts-46 .tara-kutu::before, body.ts-46 .tara-kutu::after { content:""; position:absolute; width:7px; height:7px; border-radius:2px; background:var(--mavi); z-index:-1;
  box-shadow:0 0 0 3px rgba(37,99,235,.18); animation:tkBlip 3s ease-out infinite; }
body.ts-46 .tara-kutu::before { left:23%; top:24%; }
body.ts-46 .tara-kutu::after { left:71%; top:66%; animation-delay:1.4s; }
body.ts-46 .tara-kutu .tk-metin::after { content:""; position:absolute; left:10%; right:10%; top:0; height:2px; background:var(--mavi); opacity:.5; animation:tkTara 2.6s ease-in-out infinite alternate; }

/* 47 · Mini kart seridi: hesapsiz ekranin minyaturu, esya kartlari asagi kayar */
body.ts-47 .tara-kutu { background:var(--buz); }
body.ts-47 .tara-kutu .tk-esyalar { display:block; opacity:.55; }
body.ts-47 .tara-kutu .tk-kolon { width:44%; gap:8px; animation:tkInis 14s linear infinite; }
body.ts-47 .tara-kutu .tk-kolon.k1 { left:5%; } body.ts-47 .tara-kutu .tk-kolon.k2 { left:51%; animation-name:tkCikis; } body.ts-47 .tara-kutu .tk-kolon.k3 { display:none; }
body.ts-47 .tara-kutu .tk-kolon img { width:100%; padding:8px; border-radius:10px; background:var(--kd-yuzey, #fff); box-shadow:0 1px 2px rgba(15,42,86,.06), 0 3px 10px rgba(15,42,86,.07); }
body.ts-47 .tara-kutu::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 45% at 50% 50%, var(--kd-basik, rgba(231,239,251,.95)) 30%, transparent 75%); }

/* 48 · Mavi zemin + asagi akan sevron (V) deseni */
body.ts-48 .tara-kutu { --dx:0px; --dy:24px; border:0; color:#fff;
  background-color:#2563EB;
  background-image:linear-gradient(135deg, rgba(255,255,255,.09) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,.09) 25%, transparent 25%),
                   linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6);
  background-size:24px 24px, 24px 24px, 100% 100%; background-position:0 0, 12px 0, 0 0; animation:tkDesen48 2.4s linear infinite; }
@keyframes tkDesen48 { to { background-position:0 24px, 12px 24px, 0 0; } }
body.ts-48 .tara-kutu .ikon { background:rgba(255,255,255,.2); }
body.ts-48 .tara-kutu .tk-alt { display:block; color:rgba(255,255,255,.78); }

/* 49 · Arti deseni + parlayan kareler */
body.ts-49 .tara-kutu { background-color:var(--buz); --dx:0px; --dy:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 5v8M5 9h8' stroke='%232563EB' stroke-opacity='.28' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:18px 18px; animation:tkDesen 3.2s linear infinite; }
body.ts-49 .tara-kutu::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 40% at 50% 50%, var(--buz) 35%, transparent 80%); }
body.ts-49 .tara-kutu::after { content:""; position:absolute; left:18%; top:20%; width:8px; height:8px; border-radius:2px; background:var(--mavi); z-index:-1;
  box-shadow:96px 30px 0 rgba(37,99,235,.7), 20px 120px 0 rgba(37,99,235,.55), 104px 140px 0 var(--mavi); animation:tkIsilti 2.2s ease-in-out infinite; }

/* 50 · Piksel tarama: kare pikseller satir satir yanip gecer */
body.ts-50 .tara-kutu { background-color:var(--kd-yuzey, #fff); }
body.ts-50 .tara-kutu::before { content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(var(--kd-cam, 255,255,255), 0) 0, rgba(var(--kd-cam, 255,255,255), 0) 40%, rgba(37,99,235,.18) 50%, rgba(var(--kd-cam, 255,255,255), 0) 60%);
  background-size:100% 200px; animation:tkPiksel 2.8s linear infinite;
  -webkit-mask:conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0/10px 10px;
          mask:conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0/10px 10px; }
body.ts-50 .tara-kutu::after { content:""; position:absolute; inset:0; z-index:-1;
  background:conic-gradient(rgba(37,99,235,.05) 25%, transparent 0 50%, rgba(37,99,235,.05) 0 75%, transparent 0) 0 0/10px 10px; }

/* tiklayinca her tasarimda ikon hizli doner (yukaridaki kural); esya akislari hareketi azalt'ta durur */
@media (prefers-reduced-motion: reduce) { .tara-kutu .tk-kolon, .tara-kutu .tk-metin::after { animation:none !important; } }

/* ====================================================================
   MINI KART TASARIMLARI  ?ts=51..65  (2026-10-12)
   Kullanici: "47 fena degil ama kotu; bu tarz 15 tane, guzel, goz sikmeyen".
   47'den farki: YAVAS (16-30 sn dongu), SOLUK (.4-.55), ustten/alttan
   yumusak solma, ortada isik (yazinin arkasina beyaz kutu GEREKMEZ), kartlar
   bizim kart dilimizde (nadirlik seridi + gorsel + isim cizgisi).
   Isaretleme app.js taraKutu(): .tk-kartlar > .tk-sk.s1..s3 > .tk-k(--nadir) > b + img + i
   ==================================================================== */
.tara-kutu .tk-kartlar { display:none; position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%); }
.tara-kutu .tk-sk { position:absolute; top:0; width:29%; display:flex; flex-direction:column; gap:8px; }
.tara-kutu .tk-sk.s1 { left:3.5%; } .tara-kutu .tk-sk.s2 { left:35.5%; } .tara-kutu .tk-sk.s3 { left:67.5%; }
.tara-kutu .tk-k { position:relative; display:flex; flex-direction:column; align-items:center; padding:7px 5px 7px; border-radius:9px; overflow:hidden;
  background:var(--kd-yuzey, #fff); box-shadow:0 1px 2px rgba(15,42,86,.06), 0 3px 8px rgba(15,42,86,.06); }
.tara-kutu .tk-k b { position:absolute; top:0; left:28%; right:28%; height:2px; border-radius:0 0 2px 2px; background:var(--nadir,var(--common)); }
.tara-kutu .tk-k img { width:80%; aspect-ratio:1; object-fit:contain; }
.tara-kutu .tk-k i { display:block; width:62%; height:4px; margin-top:5px; border-radius:2px; background:var(--buz-2); }
.tara-kutu .tk-k u { display:none; width:40%; height:4px; margin-top:3px; border-radius:2px; background:rgba(22,163,74,.45); text-decoration:none; }

/* 51-65 ortak: buz zemin, kartlar acik, ortada yumusak isik (yazi kendiliginden okunur) */
body:is(.ts-51,.ts-52,.ts-53,.ts-54,.ts-55,.ts-56,.ts-57,.ts-59,.ts-60,.ts-61,.ts-62,.ts-63,.ts-64,.ts-65) .tara-kutu {
  border:1px solid var(--cizgi); background:var(--buz); color:var(--ink); }
body:is(.ts-51,.ts-52,.ts-53,.ts-54,.ts-55,.ts-56,.ts-57,.ts-58,.ts-59,.ts-60,.ts-61,.ts-62,.ts-63,.ts-64,.ts-65) .tara-kutu .tk-kartlar { display:block; opacity:.5; }
body:is(.ts-51,.ts-52,.ts-53,.ts-54,.ts-56,.ts-57,.ts-59,.ts-60,.ts-61,.ts-62,.ts-64,.ts-65) .tara-kutu::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 34% at 50% 50%, var(--buz) 0, var(--kd-basik, rgba(231,239,251,.92)) 45%, rgba(231,239,251,0) 100%); }
body:is(.ts-51,.ts-52,.ts-53,.ts-54,.ts-55,.ts-56,.ts-57,.ts-59,.ts-60,.ts-61,.ts-62,.ts-63,.ts-64,.ts-65) .tara-kutu .ikon {
  box-shadow:0 10px 22px -10px rgba(37,99,235,.75); }

/* 51 · Sakin akis: uc sutun ayni hizda asagi suzulur */
body.ts-51 .tara-kutu .tk-sk { animation:tkInis 22s linear infinite; }

/* 52 · Tugla dizilim: ortadaki sutun yarim kart kaymis, hepsi asagi */
body.ts-52 .tara-kutu .tk-sk { animation:tkInis 24s linear infinite; }
body.ts-52 .tara-kutu .tk-sk.s2 { margin-top:-40px; }

/* 53 · Egik akis: sutunlar hafif egik, capraz suzulur */
/* KULLANICI SECIMI (2026-10-12): varsayilan; kartlar BULANIK */
body.ts-53 .tara-kutu .tk-kartlar { inset:-30% -20%; transform:rotate(-12deg); filter:blur(1.6px); opacity:.55; }
body.ts-53 .tara-kutu .tk-sk { width:24%; animation:tkInis 26s linear infinite; }
body.ts-53 .tara-kutu .tk-sk.s1 { left:10%; } body.ts-53 .tara-kutu .tk-sk.s2 { left:38%; } body.ts-53 .tara-kutu .tk-sk.s3 { left:66%; }

/* 54 · Tek sutun: ortada iri kartlar, ikonun arkasindan yavasca iner */
body.ts-54 .tara-kutu .tk-sk.s1, body.ts-54 .tara-kutu .tk-sk.s3 { display:none; }
body.ts-54 .tara-kutu .tk-sk.s2 { left:24%; width:52%; gap:12px; animation:tkInis 26s linear infinite; }
body.ts-54 .tara-kutu .tk-kartlar { opacity:.42; }

/* 55 · Kenar seritleri: yalniz iki kenarda ince sutun, orta temiz */
body.ts-55 .tara-kutu .tk-sk { width:20%; animation:tkInis 20s linear infinite; }
body.ts-55 .tara-kutu .tk-sk.s1 { left:3%; } body.ts-55 .tara-kutu .tk-sk.s2 { display:none; } body.ts-55 .tara-kutu .tk-sk.s3 { left:77%; animation-name:tkCikis; }
body.ts-55 .tara-kutu .tk-kartlar { opacity:.6; }

/* 56 · Paralaks: sutunlar farkli (yavas) hizlarda */
body.ts-56 .tara-kutu .tk-sk.s1 { animation:tkInis 22s linear infinite; }
body.ts-56 .tara-kutu .tk-sk.s2 { animation:tkInis 30s linear infinite; }
body.ts-56 .tara-kutu .tk-sk.s3 { animation:tkInis 26s linear infinite; }

/* 57 · Yatay seritler: ustte ve altta birer sira sola kayar, orta bant temiz */
body.ts-57 .tara-kutu .tk-kartlar { -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
body.ts-57 .tara-kutu .tk-sk { width:auto; flex-direction:row; gap:8px; animation:tkBant 24s linear infinite; }
body.ts-57 .tara-kutu .tk-sk .tk-k { width:52px; }
body.ts-57 .tara-kutu .tk-sk.s1 { left:0; top:8px; }
body.ts-57 .tara-kutu .tk-sk.s2 { display:none; }
body.ts-57 .tara-kutu .tk-sk.s3 { left:0; top:auto; bottom:8px; animation-direction:reverse; }

/* 58 · Mavi zemin: beyaz kartlar cok soluk suzulur, yazi beyaz */
body.ts-58 .tara-kutu { border:0; color:#fff; background:linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6); }
body.ts-58 .tara-kutu .tk-kartlar { opacity:.22; }
body.ts-58 .tara-kutu .tk-sk { animation:tkInis 24s linear infinite; }
body.ts-58 .tara-kutu::after { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(58% 34% at 50% 50%, rgba(37,99,235,.95) 0, rgba(37,99,235,.6) 50%, transparent 100%); }
body.ts-58 .tara-kutu .ikon { background:rgba(255,255,255,.2); }
body.ts-58 .tara-kutu .tk-alt { display:block; color:rgba(255,255,255,.78); }

/* 59 · Bulanik arka: kartlar hafif bulanik, ikon net */
body.ts-59 .tara-kutu .tk-kartlar { filter:blur(1.4px); opacity:.55; }
body.ts-59 .tara-kutu .tk-sk { animation:tkInis 22s linear infinite; }
body.ts-59 .tara-kutu .tk-sk.s2 { animation-duration:28s; }

/* 60 · Belirgin nadirlik seridi: kart ustunde renkli serit (StarPETS karti gibi) */
body.ts-60 .tara-kutu .tk-k b { left:22%; right:22%; height:3px; }
body.ts-60 .tara-kutu .tk-k { background:linear-gradient(180deg, color-mix(in srgb, var(--nadir,var(--common)) 10%, var(--kd-yuzey, #fff)), var(--kd-yuzey, #fff) 45%); }
body.ts-60 .tara-kutu .tk-sk { animation:tkInis 24s linear infinite; }
body.ts-60 .tara-kutu .tk-kartlar { opacity:.6; }

/* 61 · Iki sutun, genis: kartlar daha buyuk, sakin */
body.ts-61 .tara-kutu .tk-sk { width:42%; gap:10px; animation:tkInis 26s linear infinite; }
body.ts-61 .tara-kutu .tk-sk.s1 { left:5%; } body.ts-61 .tara-kutu .tk-sk.s2 { display:none; } body.ts-61 .tara-kutu .tk-sk.s3 { left:53%; margin-top:-46px; }

/* 62 · Yavas kayan izgara: 3 sutun capraz yonde (asagi + saga) */
@keyframes tkCapraz { from { transform:translate(-8px,-50%); } to { transform:translate(8px,0); } }
body.ts-62 .tara-kutu .tk-sk { animation:tkCapraz 28s linear infinite alternate; }

/* 63 · Buzlu cam pencere: kartlar akar, ortada buzlu cam panelin ustunde ikon */
body.ts-63 .tara-kutu .tk-sk { animation:tkInis 22s linear infinite; }
body.ts-63 .tara-kutu .tk-kartlar { opacity:.65; }
body.ts-63 .tara-kutu::after { content:""; position:absolute; left:14%; right:14%; top:30%; bottom:30%; z-index:-1; border-radius:14px;
  background:rgba(var(--kd-cam, 255,255,255), .55); -webkit-backdrop-filter:blur(8px) saturate(150%); backdrop-filter:blur(8px) saturate(150%);
  border:1px solid var(--kd-kenar, rgba(255,255,255,.8)); box-shadow:0 8px 24px rgba(15,42,86,.08); }

/* 64 · Alt yari: kartlar yalniz altta akar, ust temiz; ikon + yazi ustte */
body.ts-64 .tara-kutu { justify-content:flex-start; padding-top:30px; }
body.ts-64 .tara-kutu .tk-kartlar { top:46%; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 30%, #000 80%, transparent 100%); }
body.ts-64 .tara-kutu .tk-sk { animation:tkInis 20s linear infinite; }
body.ts-64 .tara-kutu::after { display:none; }
body.ts-64 .tara-kutu .tk-alt { display:block; }

/* 65 · Fiyat cizgili: kartlarda yesil kucuk fiyat cizgisi (satis hissi), sakin akis */
body.ts-65 .tara-kutu .tk-k u { display:block; }
body.ts-65 .tara-kutu .tk-sk { animation:tkInis 24s linear infinite; }
body.ts-65 .tara-kutu .tk-sk.s2 { animation-name:tkCikis; animation-duration:28s; }
body.ts-65 .tara-kutu .tk-kartlar { opacity:.55; }

@media (prefers-reduced-motion: reduce) { .tara-kutu .tk-sk { animation:none !important; } }

/* ====================================================================
   SCAN ITEMS ON YUZU (ikon + yazi)  ?ti=1..5, varsayilan 1   (2026-10-12)
   .tk-on varsayilanda display:contents (eski tasarimlar degismez).
   ==================================================================== */
.tara-kutu .tk-on { display:contents; }
body[class*="ti-"] .tara-kutu .tk-on { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
body[class*="ti-"] .tara-kutu .tk-metin { display:flex; flex-direction:column; align-items:center; gap:2px; }
body[class*="ti-"] .tara-kutu .tk-alt { display:block; }
/* dolgun mavi ikon kutusu (1, 2, 4) */
body:is(.ti-1,.ti-2,.ti-4) .tara-kutu .ikon {
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6);
  box-shadow:0 8px 18px -8px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.32); color:#fff; }

/* 1 · Buzlu cam panel: ikon + baslik + alt satir bir arada, bulanik kartlarin ustunde okunur */
body.ti-1 .tara-kutu .tk-on { gap:10px; padding:16px 18px 14px; border-radius:16px;
  background:rgba(var(--kd-cam, 255,255,255), .72); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border:1px solid var(--kd-kenar, rgba(255,255,255,.9)); box-shadow:0 12px 28px -14px rgba(15,42,86,.3); }
body.ti-1 .tara-kutu .ikon { width:44px; height:44px; border-radius:13px; }
body.ti-1 .tara-kutu .ikon svg { width:21px; height:21px; }
body.ti-1 .tara-kutu b { font-size:13.5px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
body.ti-1 .tara-kutu .tk-alt { font-size:11px; font-weight:600; color:var(--ink-3); }

/* 2 · Yatay dugme: ikon solda, yazi sagda, beyaz panel */
body.ti-2 .tara-kutu .tk-on { flex-direction:row; gap:10px; padding:9px 14px 9px 9px; border-radius:14px; text-align:left;
  background:var(--kd-yuzey, #fff); box-shadow:0 1px 2px rgba(15,42,86,.06), 0 12px 26px -14px rgba(15,42,86,.35); }
body.ti-2 .tara-kutu .tk-metin { align-items:flex-start; }
body.ti-2 .tara-kutu .ikon { width:36px; height:36px; border-radius:10px; }
body.ti-2 .tara-kutu .ikon svg { width:17px; height:17px; }
body.ti-2 .tara-kutu b { font-size:13px; font-weight:800; color:var(--ink); }
body.ti-2 .tara-kutu .tk-alt { font-size:10.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; }

/* 3 · Mavi cam panel: beyaz ikon + yazi */
body.ti-3 .tara-kutu .tk-on { gap:10px; padding:16px 18px 14px; border-radius:16px; color:#fff;
  background:linear-gradient(150deg, rgba(30,64,175,.9), rgba(37,99,235,.88) 60%, rgba(59,130,246,.86));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 14px 30px -14px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.25); }
body.ti-3 .tara-kutu .ikon { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
body.ti-3 .tara-kutu b { font-size:13.5px; font-weight:800; color:#fff; }
body.ti-3 .tara-kutu .tk-alt { font-size:11px; font-weight:600; color:rgba(255,255,255,.75); }

/* 4 · Iri ikon + kucuk harfli etiket, panelsiz; ikonun etrafinda beyaz kare cerceve */
body.ti-4 .tara-kutu .tk-on { gap:12px; }
body.ti-4 .tara-kutu .ikon { width:58px; height:58px; border-radius:16px;
  box-shadow:0 0 0 5px var(--kd-halka, rgba(255,255,255,.85)), 0 14px 26px -10px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.32); }
body.ti-4 .tara-kutu .ikon svg { width:26px; height:26px; }
body.ti-4 .tara-kutu b { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mavi-koyu);
  padding:4px 9px; border-radius:7px; background:rgba(var(--kd-cam, 255,255,255), .85); }
body.ti-4 .tara-kutu .tk-alt { display:none; }

/* 5 · Acik panel, cizgi ikon: beyaz kutuda mavi cerceveli ikon */
body.ti-5 .tara-kutu .tk-on { gap:10px; padding:16px 18px 14px; border-radius:16px; background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--mavi-ln); }
body.ti-5 .tara-kutu .ikon { width:44px; height:44px; border-radius:12px; background:var(--buz); color:var(--mavi-koyu); border:1.5px solid var(--mavi-ln); }
body.ti-5 .tara-kutu .ikon svg { width:21px; height:21px; }
body.ti-5 .tara-kutu b { font-size:13.5px; font-weight:800; color:var(--ink); }
body.ti-5 .tara-kutu .tk-alt { font-size:11px; font-weight:600; color:var(--ink-3); }
/* dar kutu (152px) icin: panel kutuya sigar, alt yazi TEK satir */
body[class*="ti-"] .tara-kutu .tk-on { max-width:calc(100% - 18px); }
body[class*="ti-"] .tara-kutu .tk-alt { white-space:nowrap; }
body:is(.ti-1,.ti-3,.ti-5) .tara-kutu .tk-on { padding:14px 12px 12px; gap:9px; }
body:is(.ti-1,.ti-3,.ti-5) .tara-kutu .tk-alt { font-size:10.5px; }
body.ti-2 .tara-kutu .tk-on { padding:8px 12px 8px 8px; gap:9px; }
body.ti-2 .tara-kutu .tk-alt { display:none; }
body.ti-2 .tara-kutu b { white-space:nowrap; }
/* ikon kutusu sikismasin (ti=2 yatayda daraliyordu) */
body[class*="ti-"] .tara-kutu .ikon { flex:0 0 auto; }
/* ti=2 dar kutuda yazi panelden tasiyordu */
body.ti-2 .tara-kutu .tk-on { padding:7px 10px 7px 7px; gap:8px; }
body.ti-2 .tara-kutu .ikon { width:32px; height:32px; border-radius:9px; }
body.ti-2 .tara-kutu .ikon svg { width:15px; height:15px; }
body.ti-2 .tara-kutu b { font-size:12.5px; }
/* DAR KUTU (kucuk ekranlarda kutu ~120px): kutunun kendi genisligine gore (container query) */
.tara-kutu { container-type:inline-size; }
@container (max-width: 140px) {
  body[class*="ti-"] .tara-kutu .tk-alt { display:none; }
  body[class*="ti-"] .tara-kutu .tk-on { padding:11px 9px 10px; gap:7px; }
  body[class*="ti-"] .tara-kutu b { font-size:12px; white-space:nowrap; }
  body:is(.ti-1,.ti-3,.ti-5) .tara-kutu .ikon { width:38px; height:38px; border-radius:11px; }
  body.ti-2 .tara-kutu .tk-on { flex-direction:column; text-align:center; }
  body.ti-4 .tara-kutu .ikon { width:50px; height:50px; }
  body.ti-4 .tara-kutu b { font-size:10px; letter-spacing:.08em; }
}